From 716f34d3de95d881ae3b1675756b37be5e1219e2 Mon Sep 17 00:00:00 2001
From: Frank Goossen <frank@xprtz.net>
Date: Tue, 15 Jul 2025 14:30:47 +0200
Subject: [PATCH 1/4] Introduce embla carousel for team carousel

---
 libs/ui/package.json           |   1 +
 libs/ui/src/TeamCarousel.astro | 197 +++++++++++++++++----------------
 package-lock.json              |   6 +
 3 files changed, 108 insertions(+), 96 deletions(-)

diff --git a/libs/ui/package.json b/libs/ui/package.json
index 8b6e75c..50da37d 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -14,6 +14,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^5.11.1",
+    "embla-carousel": "^8.6.0",
     "marked": "^15.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/libs/ui/src/TeamCarousel.astro b/libs/ui/src/TeamCarousel.astro
index 487a03a..1d63aba 100644
--- a/libs/ui/src/TeamCarousel.astro
+++ b/libs/ui/src/TeamCarousel.astro
@@ -2,24 +2,6 @@
 import { type Team } from "@xprtz/cms";
 const team = Astro.props as Team;
 const site = import.meta.env.PUBLIC_IMAGES_URL;
-
-const membersPerSlide = 5;
-const totalMembers = team.members.length;
-const totalSlides = Math.max(1, Math.ceil(totalMembers / membersPerSlide));
-const slidesMembers = Array.from({ length: totalSlides }).map(
-  (_, slideIndex) => {
-    const startIndex = slideIndex * membersPerSlide;
-    const slideMembers = [];
-
-    for (let i = 0; i < membersPerSlide; i++) {
-      const memberIndex = (startIndex + i);
-      if (memberIndex >= totalMembers) break;
-      slideMembers.push(team.members[memberIndex]);
-    }
-
-    return slideMembers;
-  }
-);
 ---
 
 <div class="mx-auto mt-32 max-w-7xl px-6 lg:px-8">
@@ -31,23 +13,18 @@ const slidesMembers = Array.from({ length: totalSlides }).map(
     </h2>
     <p class="mt-6 text-lg/8 text-gray-600">{team.description}</p>
   </div>
-
-  <div
-    class="carousel-container mt-20 relative overflow-hidden"
-    aria-roledescription="carousel"
-    aria-label="Team members"
-  >
-    <div class="carousel-track flex transition-transform duration-500">
-      {
-        slidesMembers.map((slideMembers, slideIndex) => (
-          <div
-            class="carousel-slide flex-none w-full flex flex-nowrap justify-center gap-2 md:gap-4"
-            role="group"
-            aria-roledescription="slide"
-            aria-label={`Slide ${slideIndex + 1} of ${totalSlides}`}
-          >
-            {slideMembers.map((member) => (
-              <div class="carousel-item text-center px-2">
+  <div class="embla mt-20" data-embla>
+    <div class="embla__viewport">
+      <div class="embla__container">
+        {
+          team.members.map((member, memberIndex) => (
+            <div
+              class="embla__slide"
+              role="group"
+              aria-roledescription="slide"
+              aria-label={`Team member ${memberIndex + 1} of ${team.members.length}`}
+            >
+              <div class="team-member text-center px-2">
                 <img
                   class="mx-auto size-20 md:size-24 rounded-full"
                   src={`${site}${member.avatar.url}`}
@@ -60,115 +37,143 @@ const slidesMembers = Array.from({ length: totalSlides }).map(
                   {member.realTitle}
                 </p>
               </div>
-            ))}
-          </div>
-        ))
-      }
+            </div>
+          ))
+        }
+      </div>
     </div>
   </div>
 </div>
 
 <style>
-  .carousel-container {
-    max-width: 100%;
+  .embla {
     position: relative;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  .carousel-track {
-    display: flex;
-    width: 100%;
-    transition: transform 0.5s ease-in-out;
+  .embla__viewport {
+    overflow: hidden;
   }
 
-  .carousel-slide {
-    min-width: 100%;
+  .embla__container {
     display: flex;
-    flex-wrap: nowrap;
-    overflow-x: hidden;
+    touch-action: pan-y pinch-zoom;
+    margin-left: calc(1rem * -1);
   }
 
-  .carousel-item {
-    transition: opacity 0.3s ease;
+  .embla__slide {
+    flex: 0 0 20%;
+    min-width: 0;
+    padding-left: 1rem;
+  }
+
+  .team-member {
     flex-shrink: 0;
-    max-width: 100%;
+    width: 100%;
+    padding: 1rem;
   }
 
-  @media (min-width: 320px) and (max-width: 640px) {
-    .carousel-item {
-      width: 75%; /* 3 items per row on medium-small screens */
+  @media (max-width: 640px) {
+    .embla__slide {
+      flex: 0 0 50%;
     }
   }
 
   @media (min-width: 641px) and (max-width: 768px) {
-    .carousel-item {
-      width: 33.333%; /* 3 items per row on medium-small screens */
+    .embla__slide {
+      flex: 0 0 33.333%;
     }
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    .carousel-item {
-      width: 20%; /* 5 items per row on medium screens */
+    .embla__slide {
+      flex: 0 0 25%;
     }
   }
 
   @media (min-width: 1025px) {
-    .carousel-item {
-      width: 20%; /* 5 items per row on large screens */
+    .embla__slide {
+      flex: 0 0 20%;
     }
   }
 </style>
 
 <script>
-  // Initialize carousel functionality
-  const initCarousel = () => {
-    const track = document.querySelector(".carousel-track");
-    const slides = document.querySelectorAll(".carousel-slide");
-    const container = document.querySelector(".carousel-container");
+  import EmblaCarousel from "embla-carousel";
+
+  const CAROUSEL_CONFIG = {
+    AUTOPLAY_INTERVAL: 5000,
+    AUTOPLAY_DELAY: 1000,
+    DRAG_THRESHOLD: 5,
+  };
 
-    if (!track || !slides.length) return;
+  const initEmblaCarousel = () => {
+    const emblaNode = document.querySelector(".embla__viewport") as HTMLElement;
 
-    let currentSlide = 0;
-    const totalSlides = slides.length;
+    if (!emblaNode) return;
 
-    // Function to go to a specific slide
-    const goToSlide = (index) => {
-      if (index < 0) index = totalSlides - 1;
-      if (index >= totalSlides) index = 0;
+    if (emblaNode.hasAttribute("data-embla-initialized")) {
+      return;
+    }
+    emblaNode.setAttribute("data-embla-initialized", "true");
+
+    const embla = EmblaCarousel(emblaNode, {
+      loop: true,
+      containScroll: "trimSnaps",
+      slidesToScroll: 1,
+      align: "start",
+      dragFree: false,
+      dragThreshold: CAROUSEL_CONFIG.DRAG_THRESHOLD,
+      skipSnaps: false,
+    });
+
+    let autoplayInterval: NodeJS.Timeout | null = null;
+    let isAutoplayPaused = false;
+
+    const startAutoplay = () => {
+      if (autoplayInterval || isAutoplayPaused) return;
+
+      autoplayInterval = setInterval(() => {
+        embla.scrollNext();
+      }, CAROUSEL_CONFIG.AUTOPLAY_INTERVAL);
+    };
 
-      track.style.transform = `translateX(-${index * 100}%)`;
+    const stopAutoplay = () => {
+      if (autoplayInterval) {
+        clearInterval(autoplayInterval);
+        autoplayInterval = null;
+      }
+    };
 
-      // Update ARIA attributes for slides
-      slides.forEach((slide, i) => {
-        slide.setAttribute("aria-hidden", i === index ? "false" : "true");
-      });
+    const pauseAutoplay = () => {
+      isAutoplayPaused = true;
+      stopAutoplay();
+    };
 
-      currentSlide = index;
+    const resumeAutoplay = () => {
+      isAutoplayPaused = false;
+      startAutoplay();
     };
 
-    // Initialize first slide
-    goToSlide(0);
+    setTimeout(startAutoplay, CAROUSEL_CONFIG.AUTOPLAY_DELAY);
 
-    // Auto-rotate carousel
-    let interval = setInterval(() => {
-      goToSlide(currentSlide + 1);
-    }, 5000); // Change slide every 5 seconds
+    emblaNode.addEventListener("mouseenter", pauseAutoplay);
+    emblaNode.addEventListener("mouseleave", resumeAutoplay);
 
-    // Function to reset auto-rotation
-    const resetAutoRotation = () => {
-      clearInterval(interval);
-      interval = setInterval(() => {
-        goToSlide(currentSlide + 1);
-      }, 5000);
+    return () => {
+      stopAutoplay();
+      embla.destroy();
+      emblaNode.removeAttribute("data-embla-initialized");
     };
   };
 
-  // Run on initial load
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initCarousel);
+    document.addEventListener("DOMContentLoaded", initEmblaCarousel);
   } else {
-    initCarousel();
+    initEmblaCarousel();
   }
 
-  // Also run when Astro updates the page
-  document.addEventListener("astro:page-load", initCarousel);
+  document.addEventListener("astro:page-load", initEmblaCarousel);
 </script>
diff --git a/package-lock.json b/package-lock.json
index 3f09175..319bf52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -129,6 +129,7 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "astro": "^5.11.0",
+        "embla-carousel": "^8.6.0",
         "marked": "^15.0.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
@@ -4203,6 +4204,11 @@
       "integrity": "sha512-FWlQc52z1dXqm+9cCJ2uyFgJkESd+16j6dBEjsgDNuHjBpuIzL8/lRc0uvh1k8RNI6waGo6tcy2DvwkTBJOLDg==",
       "license": "ISC"
     },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="
+    },
     "node_modules/emmet": {
       "version": "2.4.11",
       "resolved": "https://registry.npmjs.org/emmet/-/emmet-2.4.11.tgz",

From 8a6f83c023553794864c187aa39387a17a6fb6d2 Mon Sep 17 00:00:00 2001
From: Frank Goossen <frank@xprtz.net>
Date: Wed, 16 Jul 2025 13:27:11 +0200
Subject: [PATCH 2/4] Add navigation buttons

---
 libs/ui/src/TeamCarousel.astro | 125 +++++++++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)

diff --git a/libs/ui/src/TeamCarousel.astro b/libs/ui/src/TeamCarousel.astro
index 1d63aba..7f5bdb7 100644
--- a/libs/ui/src/TeamCarousel.astro
+++ b/libs/ui/src/TeamCarousel.astro
@@ -42,6 +42,34 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
         }
       </div>
     </div>
+    <div class="embla__controls">
+      <div class="embla__buttons">
+        <button
+          class="embla__button embla__button--prev"
+          type="button"
+          aria-label="Previous team members"
+        >
+          <svg class="embla__button__svg" viewBox="0 0 532 532">
+            <path
+              fill="currentColor"
+              d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+            ></path>
+          </svg>
+        </button>
+        <button
+          class="embla__button embla__button--next"
+          type="button"
+          aria-label="Next team members"
+        >
+          <svg class="embla__button__svg" viewBox="0 0 532 532">
+            <path
+              fill="currentColor"
+              d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2C359.81 337.027 199.27 497.69 176.34 520.646Z"
+            ></path>
+          </svg>
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 
@@ -98,6 +126,67 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
       flex: 0 0 20%;
     }
   }
+
+  .embla__controls {
+    display: flex;
+    justify-content: center;
+    gap: 1.2rem;
+    margin-top: 0.5rem;
+  }
+
+  .embla__buttons {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+  }
+
+  .embla__button {
+    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    touch-action: manipulation;
+    display: inline-flex;
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    box-shadow: inset 0 0 0 0.2rem theme("colors.primary.600");
+    width: 2.5rem;
+    height: 2.5rem;
+    z-index: 1;
+    border-radius: 50%;
+    color: theme("colors.primary.600");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .embla__button:disabled {
+    color: theme("colors.primary.300");
+    box-shadow: inset 0 0 0 0.2rem theme("colors.primary.300");
+    cursor: not-allowed;
+  }
+
+  .embla__button:not(:disabled):hover,
+  .embla__button:not(:disabled):focus-visible {
+    color: theme("colors.white");
+    background-color: theme("colors.primary.600");
+    outline: none;
+  }
+
+  .embla__button:not(:disabled):active {
+    color: theme("colors.white");
+    background-color: theme("colors.primary.700");
+    transform: scale(0.96);
+  }
+
+  .embla__button__svg {
+    width: 35%;
+    height: 35%;
+  }
 </style>
 
 <script>
@@ -111,6 +200,12 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
 
   const initEmblaCarousel = () => {
     const emblaNode = document.querySelector(".embla__viewport") as HTMLElement;
+    const prevBtnNode = document.querySelector(
+      ".embla__button--prev"
+    ) as HTMLButtonElement;
+    const nextBtnNode = document.querySelector(
+      ".embla__button--next"
+    ) as HTMLButtonElement;
 
     if (!emblaNode) return;
 
@@ -132,6 +227,11 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
     let autoplayInterval: NodeJS.Timeout | null = null;
     let isAutoplayPaused = false;
 
+    const updateButtonStates = () => {
+      if (prevBtnNode) prevBtnNode.disabled = !embla.canScrollPrev();
+      if (nextBtnNode) nextBtnNode.disabled = !embla.canScrollNext();
+    };
+
     const startAutoplay = () => {
       if (autoplayInterval || isAutoplayPaused) return;
 
@@ -157,6 +257,31 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
       startAutoplay();
     };
 
+    // Add button event listeners
+    if (prevBtnNode) {
+      prevBtnNode.addEventListener("click", () => {
+        embla.scrollPrev();
+        pauseAutoplay();
+        setTimeout(resumeAutoplay, CAROUSEL_CONFIG.AUTOPLAY_INTERVAL);
+        // Remove focus to reset button state
+        prevBtnNode.blur();
+      });
+    }
+
+    if (nextBtnNode) {
+      nextBtnNode.addEventListener("click", () => {
+        embla.scrollNext();
+        pauseAutoplay();
+        setTimeout(resumeAutoplay, CAROUSEL_CONFIG.AUTOPLAY_INTERVAL);
+        // Remove focus to reset button state
+        nextBtnNode.blur();
+      });
+    }
+
+    // Update button states on select
+    embla.on("select", updateButtonStates);
+    embla.on("init", updateButtonStates);
+
     setTimeout(startAutoplay, CAROUSEL_CONFIG.AUTOPLAY_DELAY);
 
     emblaNode.addEventListener("mouseenter", pauseAutoplay);

From 559b4720fccb7ed27344b6f5739bfb3787e27026 Mon Sep 17 00:00:00 2001
From: Frank Goossen <frank@xprtz.net>
Date: Wed, 16 Jul 2025 14:34:58 +0200
Subject: [PATCH 3/4] Copilot comments

---
 libs/ui/src/TeamCarousel.astro | 62 +++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/libs/ui/src/TeamCarousel.astro b/libs/ui/src/TeamCarousel.astro
index 7f5bdb7..d32ab24 100644
--- a/libs/ui/src/TeamCarousel.astro
+++ b/libs/ui/src/TeamCarousel.astro
@@ -13,9 +13,15 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
     </h2>
     <p class="mt-6 text-lg/8 text-gray-600">{team.description}</p>
   </div>
-  <div class="embla mt-20" data-embla>
+  <div
+    class="embla mt-20"
+    data-embla
+    role="region"
+    aria-label="Team members carousel"
+    aria-roledescription="carousel"
+  >
     <div class="embla__viewport">
-      <div class="embla__container">
+      <div class="embla__container" role="group">
         {
           team.members.map((member, memberIndex) => (
             <div
@@ -47,7 +53,7 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
         <button
           class="embla__button embla__button--prev"
           type="button"
-          aria-label="Previous team members"
+          aria-label="Previous team member"
         >
           <svg class="embla__button__svg" viewBox="0 0 532 532">
             <path
@@ -59,7 +65,7 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
         <button
           class="embla__button embla__button--next"
           type="button"
-          aria-label="Next team members"
+          aria-label="Next team member"
         >
           <svg class="embla__button__svg" viewBox="0 0 532 532">
             <path
@@ -146,40 +152,33 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
     appearance: none;
     background-color: transparent;
     touch-action: manipulation;
-    display: inline-flex;
+    display: flex;
     text-decoration: none;
     cursor: pointer;
     border: 0;
     padding: 0;
     margin: 0;
-    box-shadow: inset 0 0 0 0.2rem theme("colors.primary.600");
     width: 2.5rem;
     height: 2.5rem;
     z-index: 1;
     border-radius: 50%;
-    color: theme("colors.primary.600");
-    display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease-in-out;
+    @apply text-primary-600 shadow-[inset_0_0_0_0.2rem] shadow-primary-600;
   }
 
   .embla__button:disabled {
-    color: theme("colors.primary.300");
-    box-shadow: inset 0 0 0 0.2rem theme("colors.primary.300");
-    cursor: not-allowed;
+    @apply text-primary-300 shadow-primary-300 cursor-not-allowed;
   }
 
   .embla__button:not(:disabled):hover,
   .embla__button:not(:disabled):focus-visible {
-    color: theme("colors.white");
-    background-color: theme("colors.primary.600");
-    outline: none;
+    @apply text-white bg-primary-600 outline-none;
   }
 
   .embla__button:not(:disabled):active {
-    color: theme("colors.white");
-    background-color: theme("colors.primary.700");
+    @apply text-white bg-primary-700;
     transform: scale(0.96);
   }
 
@@ -198,21 +197,23 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
     DRAG_THRESHOLD: 5,
   };
 
-  const initEmblaCarousel = () => {
-    const emblaNode = document.querySelector(".embla__viewport") as HTMLElement;
-    const prevBtnNode = document.querySelector(
+  const initEmblaCarousel = (rootElement: HTMLElement) => {
+    const emblaNode = rootElement.querySelector(
+      ".embla__viewport"
+    ) as HTMLElement;
+    const prevBtnNode = rootElement.querySelector(
       ".embla__button--prev"
     ) as HTMLButtonElement;
-    const nextBtnNode = document.querySelector(
+    const nextBtnNode = rootElement.querySelector(
       ".embla__button--next"
     ) as HTMLButtonElement;
 
     if (!emblaNode) return;
 
-    if (emblaNode.hasAttribute("data-embla-initialized")) {
+    if (rootElement.hasAttribute("data-embla-initialized")) {
       return;
     }
-    emblaNode.setAttribute("data-embla-initialized", "true");
+    rootElement.setAttribute("data-embla-initialized", "true");
 
     const embla = EmblaCarousel(emblaNode, {
       loop: true,
@@ -224,7 +225,7 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
       skipSnaps: false,
     });
 
-    let autoplayInterval: NodeJS.Timeout | null = null;
+    let autoplayInterval: ReturnType<typeof setInterval> | null = null;
     let isAutoplayPaused = false;
 
     const updateButtonStates = () => {
@@ -290,15 +291,22 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
     return () => {
       stopAutoplay();
       embla.destroy();
-      emblaNode.removeAttribute("data-embla-initialized");
+      rootElement.removeAttribute("data-embla-initialized");
     };
   };
 
+  const initAllCarousels = () => {
+    const carouselElements = document.querySelectorAll("[data-embla]");
+    carouselElements.forEach((element) => {
+      initEmblaCarousel(element as HTMLElement);
+    });
+  };
+
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initEmblaCarousel);
+    document.addEventListener("DOMContentLoaded", initAllCarousels);
   } else {
-    initEmblaCarousel();
+    initAllCarousels();
   }
 
-  document.addEventListener("astro:page-load", initEmblaCarousel);
+  document.addEventListener("astro:page-load", initAllCarousels);
 </script>

From 31e3a4d36fd3a349bc576b7001f2151c3c800113 Mon Sep 17 00:00:00 2001
From: Frank Goossen <frank@xprtz.net>
Date: Wed, 16 Jul 2025 15:13:52 +0200
Subject: [PATCH 4/4] Use hero icons

---
 libs/ui/src/TeamCarousel.astro | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/libs/ui/src/TeamCarousel.astro b/libs/ui/src/TeamCarousel.astro
index d32ab24..3c32478 100644
--- a/libs/ui/src/TeamCarousel.astro
+++ b/libs/ui/src/TeamCarousel.astro
@@ -1,5 +1,6 @@
 ---
 import { type Team } from "@xprtz/cms";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 const team = Astro.props as Team;
 const site = import.meta.env.PUBLIC_IMAGES_URL;
 ---
@@ -55,24 +56,14 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
           type="button"
           aria-label="Previous team member"
         >
-          <svg class="embla__button__svg" viewBox="0 0 532 532">
-            <path
-              fill="currentColor"
-              d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
-            ></path>
-          </svg>
+          <ChevronLeftIcon className="embla__button__icon" />
         </button>
         <button
           class="embla__button embla__button--next"
           type="button"
           aria-label="Next team member"
         >
-          <svg class="embla__button__svg" viewBox="0 0 532 532">
-            <path
-              fill="currentColor"
-              d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2C359.81 337.027 199.27 497.69 176.34 520.646Z"
-            ></path>
-          </svg>
+          <ChevronRightIcon className="embla__button__icon" />
         </button>
       </div>
     </div>
@@ -182,9 +173,9 @@ const site = import.meta.env.PUBLIC_IMAGES_URL;
     transform: scale(0.96);
   }
 
-  .embla__button__svg {
-    width: 35%;
-    height: 35%;
+  .embla__button__icon {
+    width: 70%;
+    height: 70%;
   }
 </style>