@notionhive/testimonials 0.1.0

package/templates/components/organisms/Testimonial05/Testimonial05.jsx

@@ -0,0 +1,88 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  testimonial05DefaultProps,
+  testimonial05PropTypes,
+} from "./Testimonial05.propTypes";
+
+function QuoteIcon({ className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 80 80"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M18 44c0-10 6-18 16-22l4 8c-6 2-10 6-10 12h10V56H12V44h6zm34 0c0-10 6-18 16-22l4 8c-6 2-10 6-10 12h10V56H46V44h6z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Testimonial05 — Featured quote card with overlapping portrait and accent quote mark.
+ *
+ * @param {object} props - See Testimonial05.propTypes.js.
+ */
+export function Testimonial05({
+  quote = testimonial05DefaultProps.quote,
+  authorName = testimonial05DefaultProps.authorName,
+  authorRole = testimonial05DefaultProps.authorRole,
+  portrait = testimonial05DefaultProps.portrait,
+  className = "",
+}) {
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-white",
+        "px-4 py-12 sm:px-6 sm:py-16 md:px-10 lg:px-20 lg:py-[106px] xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial05"
+    >
+      <div className="relative mx-auto w-full max-w-[1182px]">
+        <div className="relative bg-[#f7f8fa] px-6 py-10 sm:px-10 sm:py-12 lg:px-20 lg:py-10">
+          <QuoteIcon className="absolute -left-2 top-6 size-16 text-[#efa90c] sm:-left-4 sm:top-8 sm:size-20 lg:left-0 lg:top-1/2 lg:size-[100px] lg:-translate-y-1/2" />
+
+          <div className="relative z-10 flex flex-col gap-8 pr-0 sm:gap-10 lg:max-w-[799px] lg:gap-0 lg:justify-between lg:min-h-[294px] lg:pl-4">
+            <blockquote className="font-serif text-xl leading-[1.24] tracking-[-0.002em] text-[#010623] sm:text-2xl md:text-[28px] lg:text-[34px] lg:leading-[42px]">
+              {quote}
+            </blockquote>
+
+            <div className="flex flex-col gap-2">
+              <p className="font-serif text-lg leading-7 text-[#010623] sm:text-xl lg:text-[22px]">
+                {authorName}
+              </p>
+              {authorRole ? (
+                <p className="text-sm leading-[22px] text-[#414c5e] sm:text-base">
+                  {authorRole}
+                </p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        {portrait?.src ? (
+          <div className="relative mx-auto mt-6 h-56 w-full max-w-sm overflow-hidden sm:h-64 lg:absolute lg:right-0 lg:top-1/2 lg:mt-0 lg:h-[228px] lg:w-[342px] lg:max-w-none lg:-translate-y-1/2">
+            <SafeImage
+              src={portrait.src}
+              alt={portrait.alt ?? authorName}
+              fill
+              className="object-cover object-center"
+              sizes="(max-width: 1024px) 90vw, 342px"
+            />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+Testimonial05.propTypes = testimonial05PropTypes;
+
+export default Testimonial05;

package/templates/components/organisms/Testimonial05/Testimonial05.propTypes.js

@@ -0,0 +1,29 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+export const testimonial05PropTypes = {
+  /** Main testimonial quote text. */
+  quote: PropTypes.string,
+  /** Author full name. */
+  authorName: PropTypes.string,
+  /** Author role or title. */
+  authorRole: PropTypes.string,
+  /** Portrait image shown overlapping the card edge. */
+  portrait: imageShape,
+  className: PropTypes.string,
+};
+
+export const testimonial05DefaultProps = {
+  quote:
+    "The foundation of our success lies in trust, innovation, and unwavering commitment to excellence. We strive to empower our clients with seamless solutions, ensuring growth and long-term prosperity.",
+  authorName: "Ahsanur Rahman",
+  authorRole: "Chief Executive Officer",
+  portrait: {
+    src: "/testimonials/testimonial05/portrait.jpg",
+    alt: "Ahsanur Rahman",
+  },
+};

package/templates/components/organisms/Testimonial05/index.js

@@ -0,0 +1 @@
+export { Testimonial05, default } from "./Testimonial05";

package/templates/components/organisms/Testimonial06/Testimonial06.jsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial06DefaultProps,
+  testimonial06PropTypes,
+} from "./Testimonial06.propTypes";
+
+function getCardsPerView() {
+  if (typeof window === "undefined") return 1;
+  if (window.matchMedia("(min-width: 1280px)").matches) return 4;
+  if (window.matchMedia("(min-width: 1024px)").matches) return 3;
+  if (window.matchMedia("(min-width: 640px)").matches) return 2;
+  return 1;
+}
+
+function ChevronIcon({ direction = "right", className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d={direction === "right" ? "M9 6l6 6-6 6" : "M15 6l-6 6 6 6"}
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Testimonial06 — VisaVerse client stories carousel with rounded cards and page counter.
+ *
+ * @param {object} props - See Testimonial06.propTypes.js.
+ */
+export function Testimonial06({
+  headlinePrefix = testimonial06DefaultProps.headlinePrefix,
+  headlineAccent = testimonial06DefaultProps.headlineAccent,
+  description = testimonial06DefaultProps.description,
+  ctaText = testimonial06DefaultProps.ctaText,
+  ctaHref = testimonial06DefaultProps.ctaHref,
+  onCtaClick,
+  testimonials = testimonial06DefaultProps.testimonials,
+  activeSlide: activeSlideProp = testimonial06DefaultProps.activeSlide,
+  onSlideChange,
+  autoPlayMs = testimonial06DefaultProps.autoPlayMs,
+  className = "",
+}) {
+  const [perView, setPerView] = useState(4);
+  const maxIndex = Math.max(0, testimonials.length - 1);
+
+  const handleChange = useCallback(
+    (index) => {
+      onSlideChange?.(index);
+    },
+    [onSlideChange]
+  );
+
+  const { activeSlide, goTo, next, prev, pause, resume } = useCarousel({
+    count: testimonials.length,
+    initialIndex: activeSlideProp,
+    autoPlayMs,
+    onChange: handleChange,
+  });
+
+  useEffect(() => {
+    const update = () => setPerView(getCardsPerView());
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  useEffect(() => {
+    goTo(Math.min(activeSlideProp, maxIndex));
+  }, [activeSlideProp, goTo, maxIndex]);
+
+  useEffect(() => {
+    if (activeSlide > maxIndex) goTo(maxIndex);
+  }, [activeSlide, goTo, maxIndex]);
+
+  const CtaTag = ctaHref ? "a" : "button";
+  const cardStepPercent = 100 / perView;
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-white",
+        "px-4 py-16 sm:px-6 sm:py-20 md:px-10 lg:px-20 lg:py-[100px] xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial06"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="mx-auto flex w-full max-w-[1840px] flex-col items-center gap-12 sm:gap-16 lg:gap-20">
+        <header className="flex w-full max-w-[910px] flex-col items-center gap-8 text-center sm:gap-10">
+          <h2 className="text-3xl font-semibold leading-tight tracking-[-0.02em] text-[#242424] sm:text-4xl lg:text-[54px] lg:leading-[52px]">
+            {headlinePrefix}
+            <span className="text-[#283aff]">{headlineAccent}</span>
+          </h2>
+
+          <div className="flex flex-col items-center gap-6 sm:gap-8">
+            {description ? (
+              <p className="max-w-[910px] text-base leading-normal tracking-[-0.02em] text-[#242424] sm:text-lg lg:text-xl">
+                {description}
+              </p>
+            ) : null}
+
+            {ctaText ? (
+              <CtaTag
+                {...(ctaHref
+                  ? { href: ctaHref }
+                  : { type: "button", onClick: onCtaClick })}
+                className="inline-flex h-12 items-center justify-center rounded-full bg-[#283aff] px-5 text-base font-medium tracking-[-0.02em] text-white transition-colors duration-200 ease-out hover:bg-[#1f2ecc] focus-visible:outline-2 focus-visible:outline-offset-2 sm:text-lg"
+              >
+                {ctaText}
+              </CtaTag>
+            ) : null}
+          </div>
+        </header>
+
+        <div className="w-full overflow-hidden">
+          <div
+            className="flex gap-5 transition-transform duration-500 ease-out motion-reduce:transition-none"
+            style={{ transform: `translateX(-${activeSlide * cardStepPercent}%)` }}
+          >
+            {testimonials.map((item) => (
+              <article
+                key={item.id ?? item.authorName}
+                className="flex w-full shrink-0 flex-col justify-between rounded-[40px] border-2 border-[#e5e7eb] bg-white p-6 sm:w-1/2 sm:p-8 lg:w-1/3 lg:min-h-[340px] xl:w-1/4"
+              >
+                <div className="flex items-center gap-5">
+                  {item.avatar?.src ? (
+                    <div className="relative size-14 shrink-0 overflow-hidden rounded-full sm:size-[70px]">
+                      <SafeImage
+                        src={item.avatar.src}
+                        alt={item.avatar.alt ?? item.authorName}
+                        fill
+                        className="object-cover object-center"
+                        sizes="70px"
+                      />
+                    </div>
+                  ) : null}
+                  <div className="min-w-0 text-left">
+                    <p className="text-lg font-medium tracking-[-0.02em] text-[#242424] sm:text-xl lg:text-2xl">
+                      {item.authorName}
+                    </p>
+                    {item.authorLocation ? (
+                      <p className="text-base tracking-[-0.02em] text-[#242424] sm:text-lg lg:text-xl">
+                        {item.authorLocation}
+                      </p>
+                    ) : null}
+                  </div>
+                </div>
+
+                <p className="mt-8 text-base leading-normal tracking-[-0.02em] text-[#242424] sm:mt-10 sm:text-lg">
+                  {item.quote}
+                </p>
+              </article>
+            ))}
+          </div>
+        </div>
+
+        {testimonials.length > 1 ? (
+          <div className="inline-flex items-center gap-4 rounded-full border border-[#f3f4f6] bg-white px-2 py-1.5">
+            <button
+              type="button"
+              aria-label="Previous testimonials"
+              onClick={prev}
+              disabled={activeSlide === 0}
+              className="flex size-10 items-center justify-center rounded-full text-[#242424] transition-colors duration-200 ease-out hover:bg-[#f3f4f6] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <ChevronIcon direction="left" className="size-5" />
+            </button>
+
+            <p className="min-w-[3rem] text-center text-base font-medium tracking-[-0.02em] text-[#242424] sm:text-lg">
+              {activeSlide + 1}/{testimonials.length}
+            </p>
+
+            <button
+              type="button"
+              aria-label="Next testimonials"
+              onClick={next}
+              disabled={activeSlide >= maxIndex}
+              className="flex size-10 items-center justify-center rounded-full text-[#242424] transition-colors duration-200 ease-out hover:bg-[#f3f4f6] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <ChevronIcon direction="right" className="size-5" />
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+Testimonial06.propTypes = testimonial06PropTypes;
+
+export default Testimonial06;

package/templates/components/organisms/Testimonial06/Testimonial06.propTypes.js

@@ -0,0 +1,106 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const testimonialItemShape = PropTypes.shape({
+  id: PropTypes.string,
+  quote: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  authorLocation: PropTypes.string,
+  avatar: imageShape,
+});
+
+export const testimonial06PropTypes = {
+  /** Section headline before the accent span. */
+  headlinePrefix: PropTypes.string,
+  /** Accent portion of the headline (rendered in brand blue). */
+  headlineAccent: PropTypes.string,
+  /** Supporting description below the headline. */
+  description: PropTypes.string,
+  /** Primary CTA label. */
+  ctaText: PropTypes.string,
+  /** CTA link; renders a button when omitted. */
+  ctaHref: PropTypes.string,
+  /** CTA click handler when no href is provided. */
+  onCtaClick: PropTypes.func,
+  /** Testimonial cards for the carousel. */
+  testimonials: PropTypes.arrayOf(testimonialItemShape),
+  /** Controlled active page index (0-based). */
+  activeSlide: PropTypes.number,
+  /** Called when the active page changes. */
+  onSlideChange: PropTypes.func,
+  /** Auto-advance interval in ms; 0 = off. */
+  autoPlayMs: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export const testimonial06DefaultProps = {
+  headlinePrefix: "Hear from Our ",
+  headlineAccent: "Happy Clients",
+  description:
+    "At Visaverse, we're passionate about every individual immigration journey. Read the inspiring stories of individuals who have successfully achieved their Canadian dreams with us!",
+  ctaText: "Start Your Journey",
+  ctaHref: "#",
+  testimonials: [
+    {
+      id: "maria",
+      quote:
+        "I was overwhelmed with the idea of immigrating to Canada, but VisaVerse made it all so simple. They explained every step in detail, addressed my concerns, and provided the exact services I needed.",
+      authorName: "Maria Farnandez",
+      authorLocation: "Brazil",
+      avatar: {
+        src: "/testimonials/testimonial06/avatar-maria.jpg",
+        alt: "Maria Farnandez",
+      },
+    },
+    {
+      id: "sarah",
+      quote:
+        "VisaVerse made my Permanent Residency journey a breeze! From the initial consultation to receiving my PR, they guided me step by step. Their expertise and clear communication ensured there were no surprises along the way.",
+      authorName: "Sarah Singh",
+      authorLocation: "India",
+      avatar: {
+        src: "/testimonials/testimonial06/avatar-sarah.jpg",
+        alt: "Sarah Singh",
+      },
+    },
+    {
+      id: "ahmed",
+      quote:
+        "The team at VisaVerse was outstanding! They handled everything from paperwork to follow-ups with the Canadian authorities. It felt like I was in good hands the entire time.",
+      authorName: "Ahmed Usman",
+      authorLocation: "UAE",
+      avatar: {
+        src: "/testimonials/testimonial06/avatar-ahmed.jpg",
+        alt: "Ahmed Usman",
+      },
+    },
+    {
+      id: "danzel",
+      quote:
+        "VisaVerse was professional, attentive, and reliable throughout the entire process. From the first consultation to finally receiving my work permit, they were always available to answer questions and ensure everything was on track.",
+      authorName: "Danzel Raymond",
+      authorLocation: "USA",
+      avatar: {
+        src: "/testimonials/testimonial06/avatar-danzel.jpg",
+        alt: "Danzel Raymond",
+      },
+    },
+    {
+      id: "lisa",
+      quote:
+        "Their personalized approach made all the difference. Every question was answered patiently, and I always knew what to expect next in my immigration process.",
+      authorName: "Lisa Chen",
+      authorLocation: "China",
+      avatar: {
+        src: "/testimonials/testimonial06/avatar-lisa.jpg",
+        alt: "Lisa Chen",
+      },
+    },
+  ],
+  activeSlide: 0,
+  autoPlayMs: 0,
+};

package/templates/components/organisms/Testimonial06/index.js

@@ -0,0 +1 @@
+export { Testimonial06, default } from "./Testimonial06";

package/templates/components/organisms/Testimonial07/Testimonial07.jsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial07DefaultProps,
+  testimonial07PropTypes,
+} from "./Testimonial07.propTypes";
+
+const DRAG_THRESHOLD = 48;
+
+function ChevronIcon({ direction = "right", className = "" }) {
+  return (
+    <svg viewBox="0 0 30 30" fill="none" aria-hidden="true" className={className}>
+      <path
+        d={direction === "right" ? "M12 8l6 7-6 7" : "M18 8l-6 7 6 7"}
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Testimonial07 — Minimal serif headline slider with quote, portrait, and dot indicators.
+ *
+ * @param {object} props - See Testimonial07.propTypes.js.
+ */
+export function Testimonial07({
+  headline = testimonial07DefaultProps.headline,
+  testimonials = testimonial07DefaultProps.testimonials,
+  activeSlide: activeSlideProp = testimonial07DefaultProps.activeSlide,
+  onSlideChange,
+  autoPlayMs = testimonial07DefaultProps.autoPlayMs,
+  className = "",
+}) {
+  const maxIndex = Math.max(0, testimonials.length - 1);
+  const { activeSlide, goTo, next, prev, pause, resume } = useCarousel({
+    count: testimonials.length,
+    initialIndex: activeSlideProp,
+    loop: true,
+    autoPlayMs,
+    onChange: onSlideChange,
+  });
+
+  const [dragOffset, setDragOffset] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef(0);
+
+  useEffect(() => {
+    goTo(Math.min(activeSlideProp, maxIndex));
+  }, [activeSlideProp, goTo, maxIndex]);
+
+  const finishDrag = (delta) => {
+    setIsDragging(false);
+    setDragOffset(0);
+    resume();
+
+    if (delta < -DRAG_THRESHOLD) {
+      next();
+    } else if (delta > DRAG_THRESHOLD) {
+      prev();
+    }
+  };
+
+  const handlePointerDown = (event) => {
+    dragStartX.current = event.clientX;
+    setIsDragging(true);
+    pause();
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const handlePointerMove = (event) => {
+    if (!isDragging) return;
+    setDragOffset(event.clientX - dragStartX.current);
+  };
+
+  const handlePointerUp = (event) => {
+    if (!isDragging) return;
+    finishDrag(event.clientX - dragStartX.current);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+
+  const handlePointerCancel = (event) => {
+    if (!isDragging) return;
+    finishDrag(event.clientX - dragStartX.current);
+  };
+
+  const trackTransform = isDragging
+    ? `translateX(calc(-${activeSlide * 100}% + ${dragOffset}px))`
+    : `translateX(-${activeSlide * 100}%)`;
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-white",
+        "px-4 py-14 sm:px-6 sm:py-16 md:px-10 lg:px-20 lg:py-[100px] xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial07"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="mx-auto flex w-full max-w-[1366px] flex-col gap-10 lg:gap-14">
+        <h2 className="text-center font-serif text-2xl font-medium uppercase leading-tight tracking-[0.02em] text-[#1b1b1b] sm:text-3xl lg:text-[40px] lg:leading-[50px]">
+          {headline}
+        </h2>
+
+        <div className="relative">
+          <button
+            type="button"
+            aria-label="Previous testimonial"
+            onClick={prev}
+            className="absolute left-0 top-1/2 z-10 hidden -translate-y-1/2 p-2 text-[#1b1b1b] transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2 sm:flex"
+          >
+            <ChevronIcon direction="left" className="size-7 lg:size-8" />
+          </button>
+
+          <button
+            type="button"
+            aria-label="Next testimonial"
+            onClick={next}
+            className="absolute right-0 top-1/2 z-10 hidden -translate-y-1/2 p-2 text-[#1b1b1b] transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2 sm:flex"
+          >
+            <ChevronIcon direction="right" className="size-7 lg:size-8" />
+          </button>
+
+          <div
+            className="cursor-grab overflow-hidden px-0 touch-pan-y active:cursor-grabbing sm:px-12 lg:px-16"
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerCancel}
+          >
+            <div
+              className={[
+                "flex motion-reduce:transition-none",
+                isDragging
+                  ? "transition-none"
+                  : "transition-transform duration-500 ease-out",
+              ].join(" ")}
+              style={{ transform: trackTransform }}
+            >
+              {testimonials.map((item, index) => (
+                <article
+                  key={item.id ?? item.authorName}
+                  className="flex w-full shrink-0 flex-col gap-10 lg:flex-row lg:items-center lg:justify-between lg:gap-16"
+                >
+                  <div
+                    key={index === activeSlide ? `content-${activeSlide}` : item.id}
+                    className={[
+                      "flex max-w-xl flex-col gap-8 lg:max-w-[442px]",
+                      index === activeSlide ? "animate-fade-in" : "",
+                    ].join(" ")}
+                  >
+                    <blockquote className="text-lg font-light leading-[1.5] text-[#1b1b1b] sm:text-xl">
+                      &ldquo;{item.quote}&rdquo;
+                    </blockquote>
+
+                    <div>
+                      <p className="text-lg font-bold text-[#1b1b1b]">
+                        {item.authorName}
+                      </p>
+                      {item.authorRole ? (
+                        <p className="text-xs font-light uppercase tracking-[0.08em] text-[#1b1b1b]">
+                          {item.authorRole}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+
+                  {item.image?.src ? (
+                    <div
+                      key={index === activeSlide ? `photo-${activeSlide}` : item.id}
+                      className={[
+                        "relative mx-auto size-[220px] shrink-0 overflow-hidden bg-[#c4c4c4] sm:size-[250px] lg:mx-0 lg:size-[278px]",
+                        index === activeSlide ? "animate-fade-in" : "",
+                      ].join(" ")}
+                    >
+                      <SafeImage
+                        src={item.image.src}
+                        alt={item.image.alt ?? item.authorName}
+                        fill
+                        className="object-cover object-center transition-transform duration-500 ease-out motion-reduce:transition-none"
+                        sizes="(max-width: 1024px) 80vw, 278px"
+                      />
+                    </div>
+                  ) : null}
+                </article>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <button
+            type="button"
+            aria-label="Previous testimonial"
+            onClick={prev}
+            className="flex p-2 text-[#1b1b1b] transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2 sm:hidden"
+          >
+            <ChevronIcon direction="left" className="size-6" />
+          </button>
+
+          {testimonials.map((item, index) => (
+            <button
+              key={item.id ?? item.authorName}
+              type="button"
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeSlide === index ? "true" : undefined}
+              onClick={() => goTo(index)}
+              className={[
+                "rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+                activeSlide === index
+                  ? "size-2.5 bg-[#408ec2]"
+                  : "size-2 bg-[#eeeeee] hover:bg-[#d8d8d8]",
+              ].join(" ")}
+            />
+          ))}
+
+          <button
+            type="button"
+            aria-label="Next testimonial"
+            onClick={next}
+            className="flex p-2 text-[#1b1b1b] transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2 sm:hidden"
+          >
+            <ChevronIcon direction="right" className="size-6" />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial07.propTypes = testimonial07PropTypes;
+
+export default Testimonial07;