From bcdb9974883d673234db394cbad5cea454c5dc99 Mon Sep 17 00:00:00 2001
From: Ferran Buireu <fbuireu@gmail.com>
Date: Sat, 7 Sep 2024 13:59:34 +0200
Subject: [PATCH] feat: add slider for related articles

---
 .../utils/validateContact/validateContact.ts  |  16 +--
 src/pages/index.astro                         |   1 -
 src/pages/tags/_tag.css                       |  29 ++---
 .../AboutLatestArticles.astro                 |   2 +-
 .../AboutLatestArticlesSlider.tsx             |  10 +-
 .../components/articleCard/ArticleCard.astro  |  26 ++--
 .../components/articleCard/ArticleCard.tsx    |   4 +-
 .../components/articleCard/article-card.css   |   2 +-
 .../latestArticles/LatestArticles.astro       |   2 +-
 .../LatestArticlesSlider.tsx                  |   8 +-
 .../relatedArticles/RelatedArticles.astro     |  28 ++---
 .../RelatedArticleCard.astro                  |  48 --------
 .../related-article-card.css                  | 114 ------------------
 .../RelatedArticlesSlider.tsx                 |  77 ++++++++++++
 .../atoms/relatedArticlesSlider/index.ts      |   1 +
 .../modules/core/components/slider/Slider.tsx |  15 ++-
 .../SliderNavigation/SliderNavigation.tsx     |  10 +-
 .../SliderNavigation/slider-navigation.css    |   5 +-
 .../articleVariantToClass.ts                  |   4 +-
 .../testimonials/Testimonials.astro           |   2 +-
 .../testimonialsSlider/TestimonialsSlider.tsx |   5 +-
 src/ui/styles/vendor/swiper.css               |   3 +-
 22 files changed, 165 insertions(+), 247 deletions(-)
 delete mode 100644 src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/RelatedArticleCard.astro
 delete mode 100644 src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/related-article-card.css
 create mode 100644 src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx
 create mode 100644 src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/index.ts

diff --git a/src/infrastructure/utils/validateContact/validateContact.ts b/src/infrastructure/utils/validateContact/validateContact.ts
index 7486a4c6..3ae3e9c2 100644
--- a/src/infrastructure/utils/validateContact/validateContact.ts
+++ b/src/infrastructure/utils/validateContact/validateContact.ts
@@ -5,14 +5,14 @@ import type { ContactFormData } from "@shared/ui/types";
 type ValidateContact = Omit<ContactFormData, "recaptcha">;
 
 export function validateContact(contact: ValidateContact) {
-    const { success, data, error } = contactFormSchema.safeParse(contact);
+	const { success, data, error } = contactFormSchema.safeParse(contact);
 
-    if (!success) {
-        throw new Exception({
-            message: error?.errors.join(", ") || "Invalid data",
-            code: "BAD_REQUEST",
-        });
-    }
+	if (!success) {
+		throw new Exception({
+			message: error?.errors.join(", ") || "Invalid data",
+			code: "BAD_REQUEST",
+		});
+	}
 
-    return data;
+	return data;
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c653a0cb..06dfa76e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,6 @@ import Testimonials from "@modules/home/components/testimonials/Testimonials.ast
 import Welcome from "@modules/home/components/welcome/Welcome.astro";
 
 // check responsive
-// related articles slider?
 // todo: add small transitions & animations
 //        - Latest articles (https://codepen.io/jh3y/pen/MWLyGxo)
 //        - add small icons (reading time, tags, etc)?
diff --git a/src/pages/tags/_tag.css b/src/pages/tags/_tag.css
index 458b4353..982037ad 100644
--- a/src/pages/tags/_tag.css
+++ b/src/pages/tags/_tag.css
@@ -1,24 +1,25 @@
 .tag__article__list {
-    gap: 0 3rem;
+    --gap: 2rem;
+    gap: 0 var(--gap);
     margin-block: 2rem;
     position: relative;
 
     @media (width <= 960px) {
         margin-inline: 1rem;
     }
-}
-
-.tag__article__item {
-    --gap: 2rem;
-    margin-block-end: 3rem;
-    max-width: calc(100% / var(--items-per-row) - var(--gap));
-    position: relative;
-    width: 100%;
-    --items-per-row: 4;
 
-    @media (width <= 960px) {
-        --gap: 0;
+    .tag__article__item {
         margin-block-end: 3rem;
-        --items-per-row: 1;
-    }
+        max-width: calc(100% / var(--items-per-row) - var(--gap)); 
+        position: relative;
+        width: 100%;
+        --items-per-row: 4;
+
+        @media (width <= 960px) {
+            --gap: 0;
+            margin-block-end: 3rem;
+            --items-per-row: 1;
+        }
+    } 
 }
+
diff --git a/src/ui/modules/about/components/aboutLatestArticles/AboutLatestArticles.astro b/src/ui/modules/about/components/aboutLatestArticles/AboutLatestArticles.astro
index 04b9c66d..3af277dc 100644
--- a/src/ui/modules/about/components/aboutLatestArticles/AboutLatestArticles.astro
+++ b/src/ui/modules/about/components/aboutLatestArticles/AboutLatestArticles.astro
@@ -15,7 +15,7 @@ const articles = await getCollection("articles");
       <h4 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h4>
       <h6 class="about-latest-articles__quote__author">Ferran Buireu</h6>
     </div>
-    <AboutLatestArticlesSlider client:load articles={articles} location={Astro.url} />
+    <AboutLatestArticlesSlider client:load articles={articles} origin={Astro.url} />
     <script is:inline type="application/ld+json" set:html={JSON.stringify({
       "@context": "https://schema.org",
       "@type": "ItemList",
diff --git a/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx b/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
index a4d989c3..84165059 100644
--- a/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
+++ b/src/ui/modules/about/components/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
@@ -2,13 +2,13 @@ import type { CollectionEntry } from "astro:content";
 import { DEFAULT_SWIPER_CONFIG } from "@const/const";
 import { ArticleCard } from "@modules/core/components/articleCard/ArticleCard";
 import { Slider } from "@modules/core/components/slider";
+import type { CSSProperties } from "react";
 import type { SwiperOptions } from "swiper/types";
 import "./about-latest-articles-slider.css";
-import type { CSSProperties } from "react";
 
 interface AboutLatestArticlesSLiderProps {
 	articles: CollectionEntry<"articles">[];
-	location: URL;
+	origin: URL;
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
@@ -30,15 +30,15 @@ const SLIDER_CONFIG: SwiperOptions = {
 	containerModifierClass: "latest-articles-",
 };
 
-export const AboutLatestArticlesSlider = ({ articles, location }: AboutLatestArticlesSLiderProps) => {
+export const AboutLatestArticlesSlider = ({ articles, origin }: AboutLatestArticlesSLiderProps) => {
 	return (
 		<div className="about__latest-articles__slider">
 			<Slider
 				items={articles}
 				swiperOptions={SLIDER_CONFIG}
-				classNames="--is-about__latest-articles-slider"
+				origin={origin}
 				renderItem={(article) => {
-					const props = { ...article, location };
+					const props = { ...article, origin };
 
 					return (
 						<ArticleCard {...props}>
diff --git a/src/ui/modules/core/components/articleCard/ArticleCard.astro b/src/ui/modules/core/components/articleCard/ArticleCard.astro
index 9e9764f9..de675765 100644
--- a/src/ui/modules/core/components/articleCard/ArticleCard.astro
+++ b/src/ui/modules/core/components/articleCard/ArticleCard.astro
@@ -1,17 +1,17 @@
 ---
-import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
-import { PAGES_ROUTES } from "@const/index";
-import { articleVariantToClass } from "@modules/core/utils/articleVariantToClass";
-import { getLocation } from "@modules/core/utils/getLocation";
-import clsx from "clsx";
-import "./article-card.css";
-
-type ArticleCardProps = CollectionEntry<"articles">;
-
-const article = Astro.props as ArticleCardProps;
-const { pathname } = Astro.url;
-const location = getLocation(Astro.url);
+import { Image } from "astro:assets";
+import type { CollectionEntry } from "astro:content";
+import { PAGES_ROUTES } from "@const/index";
+import { articleVariantToClass } from "@modules/core/utils/articleVariantToClass";
+import { getLocation } from "@modules/core/utils/getLocation";
+import clsx from "clsx";
+import "./article-card.css";
+
+type ArticleCardProps = CollectionEntry<"articles">;
+
+const article = Astro.props as ArticleCardProps;
+const { pathname } = Astro.url;
+const location = getLocation(Astro.url);
 ---
 <a class="article-card__link" href={`${PAGES_ROUTES.ARTICLES}/${article.data.slug}`} aria-label={article.data.title}>{' '}</a>
 <article
diff --git a/src/ui/modules/core/components/articleCard/ArticleCard.tsx b/src/ui/modules/core/components/articleCard/ArticleCard.tsx
index 6fca0468..ac5bcc4f 100644
--- a/src/ui/modules/core/components/articleCard/ArticleCard.tsx
+++ b/src/ui/modules/core/components/articleCard/ArticleCard.tsx
@@ -23,11 +23,11 @@ import type { ReactNode } from "react";
 import "./article-card.css";
 
 interface ArticleCardProps extends CollectionEntry<"articles"> {
-	location: URL;
+	origin: URL;
 	children: ReactNode;
 }
 
-export const ArticleCard = ({ children, location: origin, data }: ArticleCardProps) => {
+export const ArticleCard = ({ children, origin, data }: ArticleCardProps) => {
 	const location = getLocation(origin);
 
 	return (
diff --git a/src/ui/modules/core/components/articleCard/article-card.css b/src/ui/modules/core/components/articleCard/article-card.css
index 6537642b..e88d9d15 100644
--- a/src/ui/modules/core/components/articleCard/article-card.css
+++ b/src/ui/modules/core/components/articleCard/article-card.css
@@ -57,7 +57,7 @@
     / 1fr 1fr;
     }
 
-    &.--is-articles, &.--is-about, &.--is-tags {
+    &.--is-articles, &.--is-about, &.--is-tags, &.--is-article {
         color: var(--neutral-main)
     }
 }
diff --git a/src/ui/modules/core/components/latestArticles/LatestArticles.astro b/src/ui/modules/core/components/latestArticles/LatestArticles.astro
index ab147348..802ccb79 100644
--- a/src/ui/modules/core/components/latestArticles/LatestArticles.astro
+++ b/src/ui/modules/core/components/latestArticles/LatestArticles.astro
@@ -17,7 +17,7 @@ const articles = (await getCollection("articles")).slice(0, limit);
         Fresh from <a class="latest-articles__title__link --is-clickable --underline-on-hover"
                       href={`${PAGES_ROUTES.ARTICLES}`}>the blog</a>
     </h3>
-    <LatestArticlesSlider client:load articles={articles} location={Astro.url} />
+    <LatestArticlesSlider client:load articles={articles} origin={Astro.url} />
     <script is:inline type="application/ld+json" set:html={JSON.stringify({
       '@context': 'https://schema.org',
       '@type': 'ItemList',
diff --git a/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx b/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx
index 7a77bd8f..94004c00 100644
--- a/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx
+++ b/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx
@@ -8,7 +8,7 @@ import "./latest-articles-slider.css";
 
 interface LatestArticlesSLiderProps {
 	articles: CollectionEntry<"articles">[];
-	location: URL;
+	origin: URL;
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
@@ -34,15 +34,15 @@ const SLIDER_CONFIG: SwiperOptions = {
 	containerModifierClass: "latest-articles-",
 };
 
-export const LatestArticlesSlider = ({ articles, location }: LatestArticlesSLiderProps) => {
+export const LatestArticlesSlider = ({ articles, origin }: LatestArticlesSLiderProps) => {
 	return (
 		<div className="latest-articles__slider common-wrapper">
 			<Slider
 				items={articles}
 				swiperOptions={SLIDER_CONFIG}
-				classNames="--is-latest-articles-slider"
+				origin={origin}
 				renderItem={(article) => {
-					const props = { ...article, location };
+					const props = { ...article, origin };
 
 					return (
 						<ArticleCard {...props}>
diff --git a/src/ui/modules/core/components/relatedArticles/RelatedArticles.astro b/src/ui/modules/core/components/relatedArticles/RelatedArticles.astro
index f863bf56..f696ba66 100644
--- a/src/ui/modules/core/components/relatedArticles/RelatedArticles.astro
+++ b/src/ui/modules/core/components/relatedArticles/RelatedArticles.astro
@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import { getEntry } from "astro:content";
-import RelatedArticleCard from "./atoms/relatedArticleCard/RelatedArticleCard.astro";
+import { RelatedArticlesSlider } from "@modules/core/components/relatedArticles/atoms/relatedArticlesSlider";
 import "./related-articles.css";
 
 interface RelatedArticleProps {
@@ -17,22 +17,16 @@ const relatedArticles = await Promise.all(
     relatedArticles.length > 0 && (
     <section class="related-articles__wrapper common-wrapper">
         <h3 class="related-articles__title section-title">You might also like</h3>
-        <ul class="related-articles__grid__list flex row-wrap justify-space-between">
-          {relatedArticles.map((relatedArticle, index) => (
-              <li class="related-articles__grid__item">
-                  <RelatedArticleCard {...relatedArticle} />
-              </li>
-              <script is:inline type="application/ld+json" set:html={JSON.stringify({
-                '@context': 'https://schema.org',
-                '@type': 'ItemList',
-                'itemListElement': {
-                  '@type': 'ListItem',
-                  'position': index + 1,
-                  'url': new URL(relatedArticle.data.slug, Astro.url).href,
-                },
-              })}/>
-          ))}
-        </ul>
+        <RelatedArticlesSlider client:only="react" articles={relatedArticles} origin={Astro.url} />
+        <script is:inline type="application/ld+json" set:html={JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'ItemList',
+          'itemListElement': relatedArticles.map(({ data: { slug } }, index) => ({
+            '@type': 'ListItem',
+            'position': index + 1,
+            'url': new URL(slug, Astro.url).href,
+          })),
+        })} />
     </section>
         )
     }
diff --git a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/RelatedArticleCard.astro b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/RelatedArticleCard.astro
deleted file mode 100644
index be1b30ac..00000000
--- a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/RelatedArticleCard.astro
+++ /dev/null
@@ -1,48 +0,0 @@
----
-import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
-import { PAGES_ROUTES } from "@const/index";
-import { articleVariantToClass } from "@modules/core/utils/articleVariantToClass";
-import clsx from "clsx";
-import "./related-article-card.css";
-
-type RelatedArticleCardProps = CollectionEntry<"articles">;
-
-const { pathname } = Astro.url;
-const relatedArticle = Astro.props as RelatedArticleCardProps;
----
-<a class="related-article-card__link" href={`${PAGES_ROUTES.ARTICLES}/${relatedArticle.data.slug}`}
-   aria-label={relatedArticle.data.title}>{' '}</a>
-<article
-    class={clsx(
-        'related-article-card__item',
-        articleVariantToClass(relatedArticle.data.variant)
-    )}
->
-  {relatedArticle.data.featuredImage && (
-      <Image    
-          class="related-article-card__item__featured-image"
-          src={relatedArticle.data.featuredImage.url}
-          width={relatedArticle.data.featuredImage.details.width}
-          height={relatedArticle.data.featuredImage.details.height}
-          alt={relatedArticle.data.title}
-          transition:name=`featured-image-${pathname}`
-      />
-  )}
-    <time class="related-article-card__item__publish-date" datetime={relatedArticle.data.publishDate}>
-      {relatedArticle.data.publishDate}
-    </time>
-    <h3 class="related-article-card__title font-serif inner-section-title">{relatedArticle.data.title}</h3>
-    <p class="related-article-card__author">
-        by <a href={`${PAGES_ROUTES.TAGS}/${relatedArticle.data.author.slug}`} class="related-article-card__author__name --underline-on-hover --is-clickable">{relatedArticle.data.author.name}</a>
-    </p>
-    <p class="related-article-card__excerpt">{relatedArticle.data.description}</p>
-    <p class="related-article-card__reading-time">{relatedArticle.data.readingTime} minutes read</p>
-    <ul class="related-article-card__tags__list flex">
-      {relatedArticle.data.tags?.map(({ slug, name }, index) => (
-          <a class="related-article-card__tag__item --underline-on-hover --is-clickable" href={`${PAGES_ROUTES.TAGS}/${slug}`} style={`--inline-index: ${String(index)}`}>
-              #{name}
-          </a>
-      ))}
-    </ul>
-</article>
diff --git a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/related-article-card.css b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/related-article-card.css
deleted file mode 100644
index 83354bab..00000000
--- a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticleCard/related-article-card.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.related-article__item__wrapper {
-    backface-visibility: hidden;
-    -webkit-font-smoothing: subpixel-antialiased;
-    max-width: calc(100% / 4 - 2rem);
-    position: relative;
-    transform: translateZ(0);
-    transition: 0.2s scale;
-    width: 100%;
-    will-change: transform;
-}
-
-.related-article-card__item {
-    display: grid;
-    gap: 0.5rem 0;
-    height: 100%;
-    overflow: hidden;
-
-    &.--no-image-variant {
-        grid:
-            'Publish-Date Publish-Date' auto
-            'Title Title' 1fr
-            'Author Reading-Time' auto
-            'Excerpt Excerpt' auto
-            'Tags Tags' auto
-            / 1fr 1fr;
-    }
-
-    &.--default-variant {
-        grid:
-            'Publish-Date Publish-Date' auto
-            'Featured-Image Featured-Image' 1fr
-            'Title Title' auto
-            'Author Reading-Time' auto
-            'Excerpt Excerpt' auto
-            'Tags Tags' auto
-            / 1fr 1fr;
-    }
-}
-
-.related-article-card__excerpt {
-    color: currentColor;
-    grid-area: Excerpt;
-}
-
-.related-article-card__item__featured-image {
-    grid-area: Featured-Image;
-    object-fit: cover;
-    z-index: 0;
-}
-
-.related-article-card__item__publish-date {
-    grid-area: Publish-Date;
-}
-
-.related-article-card__reading-time {
-    grid-area: Reading-Time;
-    justify-self: flex-end;
-}
-
-.related-article-card__tag__item {
-    transition: all 0.3s ease;
-    transition-delay: calc(var(--inline-index) * 0.1s);
-    translate: 0 100px;
-}
-
-.related-article-card__tags__list:hover .related-article-card__tag__item {
-    translate: 0 0;
-}
-
-.related-article-card__link {
-    inset: 0;
-    position: absolute;
-    width: 100%;
-    z-index: 1;
-
-    &:hover ~ .related-article-card__item .related-article-card__tag__item {
-        translate: 0 0;
-    }
-}
-
-.related-article-card__author {
-    color: currentColor;
-    grid-area: Author;
-
-    a {
-        color: var(--primary-main);
-        position: relative;
-        z-index: 10;
-    }
-
-    &:has(a:hover) ~ .related-article-card__tags__list .related-article-card__tag__item {
-        translate: 0 0;
-    }
-}
-
-.related-article-card__title {
-    align-self: center;
-    color: currentColor;
-    grid-area: Title;
-    letter-spacing: normal;
-}
-
-.related-article-card__tags__list {
-    color: currentColor;
-    gap: 0 1rem;
-    grid-area: Tags;
-    position: relative;
-    text-transform: lowercase;
-    z-index: 10;
-}
-
-.related-article-card__author__name {
-    display: inline-block;
-}
\ No newline at end of file
diff --git a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx
new file mode 100644
index 00000000..82852d59
--- /dev/null
+++ b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx
@@ -0,0 +1,77 @@
+import type { CollectionEntry } from "astro:content";
+import { DEFAULT_SWIPER_CONFIG } from "@const/index";
+import { ArticleCard } from "@modules/core/components/articleCard/ArticleCard";
+import { Slider } from "@modules/core/components/slider";
+import type { CSSProperties } from "react";
+import type { SwiperOptions } from "swiper/types";
+
+interface RelatedArticlesSliderProps {
+	articles: CollectionEntry<"articles">[];
+	origin: URL;
+}
+
+const SLIDER_CONFIG: SwiperOptions = {
+	...DEFAULT_SWIPER_CONFIG,
+	slidesPerView: 3,
+	autoplay: {
+		delay: 10000,
+		pauseOnMouseEnter: true,
+	},
+	breakpoints: {
+		1024: {
+			slidesPerView: 3,
+			spaceBetween: 32,
+		},
+		720: {
+			slidesPerView: 2,
+			spaceBetween: 32,
+		},
+		320: {
+			slidesPerView: 1,
+		},
+	},
+	containerModifierClass: "related-articles-",
+};
+
+export const RelatedArticlesSlider = ({ articles, origin }: RelatedArticlesSliderProps) => {
+	return (
+		<div className="related-articles__slider common-wrapper">
+			<Slider
+				items={articles}
+				swiperOptions={SLIDER_CONFIG}
+				origin={origin}
+				renderItem={(article) => {
+					const props = { ...article, origin };
+
+					return (
+						<ArticleCard {...props}>
+							<ArticleCard.PublishDate publishDate={article.data.publishDate}>
+								{article.data.publishDate}
+							</ArticleCard.PublishDate>
+							{article.data.featuredImage && (
+								<ArticleCard.Image src={article.data.featuredImage.url} alt={article.data.title} />
+							)}
+							<ArticleCard.Title>{article.data.title}</ArticleCard.Title>
+							<ArticleCard.Excerpt>{article.data.description}</ArticleCard.Excerpt>
+							<ArticleCard.Author slug={article.data.author.slug}>{article.data.author.name}</ArticleCard.Author>
+							<ArticleCard.ReadingTime>{article.data.readingTime} minutes read</ArticleCard.ReadingTime>
+							<ArticleCard.Tags>
+								{article.data.tags?.map((tag, index) => {
+									const style: CSSProperties & { [key: string]: string } = {
+										"--inline-index": String(index),
+									};
+
+									return (
+										<ArticleCard.Tag key={tag.name} tag={tag} style={style}>
+											{tag.name}
+										</ArticleCard.Tag>
+									);
+								})}
+							</ArticleCard.Tags>
+						</ArticleCard>
+					);
+				}}
+			/>
+		</div>
+	);
+};
diff --git a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/index.ts b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/index.ts
new file mode 100644
index 00000000..963e47f8
--- /dev/null
+++ b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/index.ts
@@ -0,0 +1 @@
+export * from "./RelatedArticlesSlider";
diff --git a/src/ui/modules/core/components/slider/Slider.tsx b/src/ui/modules/core/components/slider/Slider.tsx
index 9fac4167..532cda79 100644
--- a/src/ui/modules/core/components/slider/Slider.tsx
+++ b/src/ui/modules/core/components/slider/Slider.tsx
@@ -5,28 +5,31 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import type { Swiper as SwiperClass, SwiperOptions } from "swiper/types";
 import { SliderNavigation } from "./atoms/SliderNavigation";
 import "swiper/css/bundle";
+import { getLocation } from "@modules/core/utils/getLocation";
 
 export interface Slider<T> {
 	items: T[];
 	renderItem: (item: T, index: number) => ReactNode;
 	swiperOptions: SwiperOptions;
-	classNames: string;
+	origin: URL;
 }
 
-export const Slider = <T,>({ items, renderItem, swiperOptions, classNames }: Slider<T>) => {
+export const Slider = <T,>({ items, renderItem, swiperOptions, origin }: Slider<T>) => {
 	const [swiperInstance, setSwiperInstance] = useState<SwiperClass | null>(null);
+	const location = getLocation(origin);
+	const locationClassName = location ? `--is-${location}` : "";
 
 	return (
-		<div className={clsx(`slider__wrapper common-wrapper ${classNames}`)}>
+		<div className={clsx("slider__wrapper common-wrapper", locationClassName)}>
 			<Swiper {...swiperOptions} onSwiper={setSwiperInstance}>
-				<ul className={clsx(`slider__list flex row-wrap justify-space-between ${classNames}`)}>
+				<ul className={clsx("slider__list flex row-wrap justify-space-between", locationClassName)}>
 					{items.map((item, index) => (
-						<li key={crypto.randomUUID()} className={clsx(`item__wrapper --is-clickable ${classNames}`)}>
+						<li key={crypto.randomUUID()} className={clsx("item__wrapper --is-clickable", locationClassName)}>
 							<SwiperSlide key={crypto.randomUUID()}>{renderItem(item, index)}</SwiperSlide>
 						</li>
 					))}
 				</ul>
-				{swiperInstance && <SliderNavigation swiper={swiperInstance} baseClassName={classNames} />}
+				{swiperInstance && <SliderNavigation swiper={swiperInstance} locationClassName={locationClassName} />}
 			</Swiper>
 		</div>
 	);
diff --git a/src/ui/modules/core/components/slider/atoms/SliderNavigation/SliderNavigation.tsx b/src/ui/modules/core/components/slider/atoms/SliderNavigation/SliderNavigation.tsx
index b6b2d56b..8f77def4 100644
--- a/src/ui/modules/core/components/slider/atoms/SliderNavigation/SliderNavigation.tsx
+++ b/src/ui/modules/core/components/slider/atoms/SliderNavigation/SliderNavigation.tsx
@@ -7,19 +7,19 @@ import "./slider-navigation.css";
 
 interface SliderNavigationProps {
 	swiper: SwiperClass;
-	baseClassName: string;
+	locationClassName?: string;
 }
 
-export const SliderNavigation: React.FC<SliderNavigationProps> = ({ swiper, baseClassName }) => {
+export const SliderNavigation: React.FC<SliderNavigationProps> = ({ swiper, locationClassName }) => {
 	const leftButtonRef = useRef<HTMLButtonElement>(null);
 	const rightButtonRef = useRef<HTMLButtonElement>(null);
 	useSliderNavigation({ swiper, leftButtonRef, rightButtonRef });
 
 	return (
-		<div className={clsx(`slider__navigation flex row-nowrap ${baseClassName}`)}>
+		<div className={clsx(`slider__navigation flex row-nowrap ${locationClassName}`)}>
 			<button
 				ref={leftButtonRef}
-				className={clsx(`slider__navigation__button --is-left --is-clickable ${baseClassName}`)}
+				className={clsx(`slider__navigation__button --is-left --is-clickable ${locationClassName}`)}
 				type="button"
 				onClick={() => swiper.slidePrev()}
 			>
@@ -27,7 +27,7 @@ export const SliderNavigation: React.FC<SliderNavigationProps> = ({ swiper, base
 			</button>
 			<button
 				ref={rightButtonRef}
-				className={clsx(`slider__navigation__button --is-right --is-clickable ${baseClassName}`)}
+				className={clsx(`slider__navigation__button --is-right --is-clickable ${locationClassName}`)}
 				type="button"
 				onClick={() => swiper.slideNext()}
 			>
diff --git a/src/ui/modules/core/components/slider/atoms/SliderNavigation/slider-navigation.css b/src/ui/modules/core/components/slider/atoms/SliderNavigation/slider-navigation.css
index 176c2d3f..06a15ce3 100644
--- a/src/ui/modules/core/components/slider/atoms/SliderNavigation/slider-navigation.css
+++ b/src/ui/modules/core/components/slider/atoms/SliderNavigation/slider-navigation.css
@@ -8,9 +8,12 @@
         width: 3rem;
     }
 
-    &.--is-latest-articles-slider {
+    &.--is-home{
         color: light-dark(var(--background-main), var(--white));
+    }
 
+    &.--is-home,
+    &.--is-article {
         @media (width >= 1024px) {
             display: none;
         }
diff --git a/src/ui/modules/core/utils/articleVariantToClass/articleVariantToClass.ts b/src/ui/modules/core/utils/articleVariantToClass/articleVariantToClass.ts
index 030423a2..ab553ade 100644
--- a/src/ui/modules/core/utils/articleVariantToClass/articleVariantToClass.ts
+++ b/src/ui/modules/core/utils/articleVariantToClass/articleVariantToClass.ts
@@ -1,10 +1,10 @@
 import { ArticleType } from "@application/dto/article/types.ts";
 
-const variantClassMap = new Map<ArticleType, string>([
+const VARIANT_CLASS_MAP = new Map<ArticleType, string>([
 	[ArticleType.DEFAULT, "--default-variant"],
 	[ArticleType.NO_IMAGE, "--no-image-variant"],
 ]);
 
 export function articleVariantToClass(variant: ArticleType) {
-	return variantClassMap.get(variant) ?? "--default-variant";
+	return VARIANT_CLASS_MAP.get(variant) ?? VARIANT_CLASS_MAP.get(ArticleType.DEFAULT);
 }
diff --git a/src/ui/modules/home/components/testimonials/Testimonials.astro b/src/ui/modules/home/components/testimonials/Testimonials.astro
index da39247b..3fd8890f 100644
--- a/src/ui/modules/home/components/testimonials/Testimonials.astro
+++ b/src/ui/modules/home/components/testimonials/Testimonials.astro
@@ -16,5 +16,5 @@ const testimonials = await getCollection("testimonials");
         or
         Vue to your project.
     </p>
-    <TestimonialsSlider client:load testimonials={testimonials} />
+    <TestimonialsSlider client:load testimonials={testimonials} origin={Astro.url} />
 </section>
diff --git a/src/ui/modules/home/components/testimonialsSlider/TestimonialsSlider.tsx b/src/ui/modules/home/components/testimonialsSlider/TestimonialsSlider.tsx
index ca0b5172..d5adcb15 100644
--- a/src/ui/modules/home/components/testimonialsSlider/TestimonialsSlider.tsx
+++ b/src/ui/modules/home/components/testimonialsSlider/TestimonialsSlider.tsx
@@ -7,6 +7,7 @@ import type { SwiperOptions } from "swiper/types";
 
 interface TestimonialSliderProps extends Partial<Slider<TestimonialSliderProps>> {
 	testimonials: CollectionEntry<"testimonials">[];
+	origin: URL;
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
@@ -33,12 +34,12 @@ const SLIDER_CONFIG: SwiperOptions = {
 	containerModifierClass: "testimonials-",
 };
 
-export const TestimonialsSlider = ({ testimonials }: TestimonialSliderProps) => {
+export const TestimonialsSlider = ({ testimonials, origin }: TestimonialSliderProps) => {
 	return (
 		<Slider
 			items={testimonials}
 			swiperOptions={SLIDER_CONFIG}
-			classNames="--is-testimonials-slider"
+			origin={origin}
 			renderItem={(testimonial) => (
 				<Testimonial>
 					<Testimonial.Author>{testimonial.data.author}</Testimonial.Author>
diff --git a/src/ui/styles/vendor/swiper.css b/src/ui/styles/vendor/swiper.css
index fa59b17b..e20b4ce1 100644
--- a/src/ui/styles/vendor/swiper.css
+++ b/src/ui/styles/vendor/swiper.css
@@ -3,7 +3,8 @@
         padding-bottom: 8rem !important;
     }
 
-    .latest-articles-initialized {
+    .latest-articles-initialized,
+    .related-articles-initialized {
         .swiper-wrapper {
             align-items: stretch;
         }