@notionhive/testimonials 0.1.0

package/templates/components/organisms/Testimonial14/Testimonial14.jsx

@@ -0,0 +1,89 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  testimonial14DefaultProps,
+  testimonial14PropTypes,
+} from "./Testimonial14.propTypes";
+
+/**
+ * Testimonial14 — Staggered impact cards with tilted sticky-note styling.
+ *
+ * @param {object} props - See Testimonial14.propTypes.js.
+ */
+export function Testimonial14({
+  eyebrow = testimonial14DefaultProps.eyebrow,
+  introPrimary = testimonial14DefaultProps.introPrimary,
+  introSecondary = testimonial14DefaultProps.introSecondary,
+  cards = testimonial14DefaultProps.cards,
+  className = "",
+}) {
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden",
+        "bg-gradient-to-b from-[#f0f7fa]/40 via-white to-white",
+        "px-4 py-16 sm:px-6 sm:py-20 md:px-10 lg:px-20 lg:py-[160px] xl:px-[80px] 2xl:px-[240px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial14"
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 sm:gap-16 lg:gap-20">
+        <header className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between lg:gap-16">
+          <p className="shrink-0 font-mono text-sm font-medium uppercase tracking-wide text-[#524b44] sm:text-base">
+            {eyebrow}
+          </p>
+          <p className="max-w-3xl text-2xl leading-snug tracking-[-0.025em] text-[#0d0a08] sm:text-3xl lg:text-[32px] lg:leading-[42px]">
+            <span>{introPrimary}</span>
+            <span className="text-[#0d0a08]/50">{introSecondary}</span>
+          </p>
+        </header>
+
+        <div className="flex gap-4 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] sm:gap-6 lg:overflow-visible lg:pb-0 [&::-webkit-scrollbar]:hidden">
+          {cards.map((card) => (
+            <article
+              key={card.id ?? card.authorName}
+              className={[
+                "group flex w-[min(85vw,320px)] shrink-0 flex-col justify-between rounded-lg p-8 transition-transform duration-300 ease-out hover:rotate-0 hover:shadow-lg focus-within:shadow-lg motion-reduce:transition-none sm:w-[min(70vw,360px] lg:min-h-[360px] lg:flex-1 lg:p-10",
+                card.rotation ?? "",
+              ].join(" ")}
+              style={{ backgroundColor: card.bgColor ?? "#ffffff" }}
+            >
+              <blockquote className="text-xl leading-[1.4] tracking-[0.005em] text-[#0d0a08] sm:text-2xl lg:text-[24px] lg:leading-[34px]">
+                &ldquo;{card.quote}&rdquo;
+              </blockquote>
+
+              <div className="mt-10 flex items-center gap-3">
+                {card.avatar?.src ? (
+                  <div className="relative size-12 shrink-0 overflow-hidden rounded-full bg-white">
+                    <SafeImage
+                      src={card.avatar.src}
+                      alt={card.avatar.alt ?? card.authorName}
+                      fill
+                      className="object-cover object-center"
+                      sizes="48px"
+                    />
+                  </div>
+                ) : null}
+                <div className="min-w-0">
+                  <p className="text-lg leading-tight text-[#0d0a08] sm:text-xl">
+                    {card.authorName}
+                  </p>
+                  {card.authorRole ? (
+                    <p className="text-sm text-black/70">{card.authorRole}</p>
+                  ) : null}
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial14.propTypes = testimonial14PropTypes;
+
+export default Testimonial14;

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

@@ -0,0 +1,87 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const cardShape = PropTypes.shape({
+  id: PropTypes.string,
+  quote: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  authorRole: PropTypes.string,
+  avatar: imageShape,
+  bgColor: PropTypes.string,
+  /** Tailwind rotate class, e.g. `-rotate-3`. */
+  rotation: PropTypes.string,
+});
+
+export const testimonial14PropTypes = {
+  eyebrow: PropTypes.string,
+  introPrimary: PropTypes.string,
+  introSecondary: PropTypes.string,
+  cards: PropTypes.arrayOf(cardShape),
+  className: PropTypes.string,
+};
+
+export const testimonial14DefaultProps = {
+  eyebrow: "Impacts",
+  introPrimary:
+    "Through personalized guidance and trusted connections, the Connectors Program ",
+  introSecondary:
+    "helps newcomers overcome challenges, access essential services, and build confidence, belonging, and long-term support in their new communities.",
+  cards: [
+    {
+      id: "nasim",
+      quote:
+        "My Connector helped me understand my options and made everything feel manageable.",
+      authorName: "Nasim Khan",
+      authorRole: "Refugee Claimant",
+      avatar: {
+        src: "/testimonials/testimonial14/avatar-1.jpg",
+        alt: "Nasim Khan",
+      },
+      bgColor: "#e5ffe9",
+      rotation: "-rotate-3",
+    },
+    {
+      id: "rashed",
+      quote:
+        "Having someone listen and guide me made settling into a new community much easier.",
+      authorName: "Rashed Ali",
+      authorRole: "Newcomer and Student",
+      avatar: {
+        src: "/testimonials/testimonial14/avatar-2.jpg",
+        alt: "Rashed Ali",
+      },
+      bgColor: "#ffebfd",
+      rotation: "rotate-2",
+    },
+    {
+      id: "rupa",
+      quote:
+        "I felt supported every step of the way. The program is caring and reliable.",
+      authorName: "Rupa Khaleda",
+      authorRole: "Single Parent and Newcomer",
+      avatar: {
+        src: "/testimonials/testimonial14/avatar-3.jpg",
+        alt: "Rupa Khaleda",
+      },
+      bgColor: "#ffffff",
+      rotation: "-rotate-2",
+    },
+    {
+      id: "sakhawat",
+      quote:
+        "The Connectors Program connected me with the right services quickly and respectfully.",
+      authorName: "Sakhawat Hasan",
+      authorRole: "Refugee Claimant and Job Seeker",
+      avatar: {
+        src: "/testimonials/testimonial14/avatar-4.jpg",
+        alt: "Sakhawat Hasan",
+      },
+      bgColor: "#f7ffd9",
+      rotation: "rotate-2",
+    },
+  ],
+};

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

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

package/templates/components/organisms/Testimonial15/Testimonial15.jsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useEffect } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial15DefaultProps,
+  testimonial15PropTypes,
+} from "./Testimonial15.propTypes";
+
+function PlayIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M8 5v14l11-7-11-7z" />
+    </svg>
+  );
+}
+
+function ProgressRing({ current, total, className = "" }) {
+  const radius = 34;
+  const circumference = 2 * Math.PI * radius;
+  const progress = total > 0 ? (current + 1) / total : 0;
+  const offset = circumference * (1 - progress);
+
+  return (
+    <div className={["relative size-[76px]", className].join(" ")}>
+      <svg viewBox="0 0 76 76" className="size-full -rotate-90" aria-hidden="true">
+        <circle
+          cx="38"
+          cy="38"
+          r={radius}
+          fill="none"
+          stroke="rgba(255,255,255,0.2)"
+          strokeWidth="4"
+        />
+        <circle
+          cx="38"
+          cy="38"
+          r={radius}
+          fill="none"
+          stroke="white"
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          className="transition-all duration-500 ease-out motion-reduce:transition-none"
+        />
+      </svg>
+      <span className="absolute inset-0 flex items-center justify-center text-base text-white">
+        {current + 1}/{total}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Testimonial15 — Dark split layout with vertical image carousel and play control.
+ *
+ * @param {object} props - See Testimonial15.propTypes.js.
+ */
+export function Testimonial15({
+  eyebrow = testimonial15DefaultProps.eyebrow,
+  headline = testimonial15DefaultProps.headline,
+  description = testimonial15DefaultProps.description,
+  slides = testimonial15DefaultProps.slides,
+  activeSlide: activeSlideProp = testimonial15DefaultProps.activeSlide,
+  onSlideChange,
+  onPlayClick,
+  className = "",
+}) {
+  const isControlled = typeof activeSlideProp === "number";
+  const { activeSlide, goTo, next, prev } = useCarousel({
+    count: slides.length,
+    initialIndex: activeSlideProp,
+    loop: true,
+    onChange: onSlideChange,
+  });
+  const current = isControlled ? activeSlideProp : activeSlide;
+
+  const setSlide = (index) => {
+    if (isControlled) {
+      onSlideChange?.(index);
+    } else {
+      goTo(index);
+    }
+  };
+
+  useEffect(() => {
+    if (!isControlled) {
+      goTo(activeSlideProp);
+    }
+  }, [activeSlideProp, goTo, isControlled]);
+
+  const active = slides[current] ?? slides[0];
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-[#1b1b1b]",
+        "px-4 py-16 sm:px-6 sm:py-20 md:px-10 lg:px-20 lg:py-24 xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial15"
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 lg:flex-row lg:items-center lg:gap-16 xl:gap-24">
+        <div className="flex flex-1 flex-col gap-8 lg:max-w-md">
+          <header className="flex flex-col gap-5">
+            <p className="text-sm font-bold uppercase tracking-[0.2em] text-white/50">
+              {eyebrow}
+            </p>
+            <h2 className="text-3xl leading-tight text-white sm:text-4xl lg:text-[40px] lg:leading-[50px]">
+              {headline}
+            </h2>
+          </header>
+
+          {description ? (
+            <p className="max-w-md text-base leading-relaxed text-white/90 lg:text-base lg:leading-[26px]">
+              {description}
+            </p>
+          ) : null}
+
+          <div className="flex items-center gap-4">
+            <ProgressRing current={current} total={slides.length} />
+            <div className="flex gap-2">
+              <button
+                type="button"
+                aria-label="Previous testimonial"
+                onClick={prev}
+                className="rounded-full border border-white/30 px-4 py-2 text-sm text-white transition-colors duration-200 ease-out hover:border-white focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Prev
+              </button>
+              <button
+                type="button"
+                aria-label="Next testimonial"
+                onClick={next}
+                className="rounded-full border border-white/30 px-4 py-2 text-sm text-white transition-colors duration-200 ease-out hover:border-white focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative flex flex-1 items-center justify-center">
+          <div className="relative h-[min(70vh,540px)] w-full max-w-xl overflow-hidden">
+            <div
+              className="flex h-full flex-col transition-transform duration-500 ease-out motion-reduce:transition-none"
+              style={{ transform: `translateY(-${current * 100}%)` }}
+            >
+              {slides.map((slide, index) => (
+                <div
+                  key={slide.id ?? index}
+                  className="relative h-full w-full shrink-0 overflow-hidden rounded-lg"
+                >
+                  <SafeImage
+                    src={slide.image.src}
+                    alt={slide.image.alt ?? `Testimonial ${index + 1}`}
+                    fill
+                    className={[
+                      "object-cover object-center transition-opacity duration-500",
+                      index === current ? "opacity-100" : "opacity-20",
+                    ].join(" ")}
+                    sizes="(max-width:1024px) 100vw, 540px"
+                  />
+                </div>
+              ))}
+            </div>
+
+            <button
+              type="button"
+              aria-label="Play video testimonial"
+              onClick={() => onPlayClick?.(active, current)}
+              className="absolute bottom-4 right-4 flex size-14 items-center justify-center rounded-full bg-white text-[#1b1b1b] shadow-lg transition-transform duration-200 ease-out hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:hover:scale-100"
+            >
+              <PlayIcon className="size-6" />
+            </button>
+
+            <div
+              className="absolute left-0 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:flex"
+              aria-hidden="true"
+            >
+              <div className="flex size-[100px] items-center justify-center rounded-full bg-white">
+                <span className="-rotate-90 text-xs font-bold uppercase tracking-[0.2em] text-[#1b1b1b]">
+                  Drag
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial15.propTypes = testimonial15PropTypes;
+
+export default Testimonial15;

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

@@ -0,0 +1,89 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const slideShape = PropTypes.shape({
+  id: PropTypes.string,
+  image: imageShape.isRequired,
+  videoUrl: PropTypes.string,
+});
+
+export const testimonial15PropTypes = {
+  eyebrow: PropTypes.string,
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  slides: PropTypes.arrayOf(slideShape),
+  activeSlide: PropTypes.number,
+  onSlideChange: PropTypes.func,
+  onPlayClick: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const testimonial15DefaultProps = {
+  eyebrow: "/ Testimonials",
+  headline: "Our Clients Say",
+  description:
+    "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal temperatu.",
+  slides: [
+    {
+      id: "slide-1",
+      image: {
+        src: "/testimonials/testimonial15/slide-1.jpg",
+        alt: "Client portrait one",
+      },
+    },
+    {
+      id: "slide-2",
+      image: {
+        src: "/testimonials/testimonial15/slide-2.jpg",
+        alt: "Client portrait two",
+      },
+    },
+    {
+      id: "slide-3",
+      image: {
+        src: "/testimonials/testimonial15/slide-3.jpg",
+        alt: "Client portrait three",
+      },
+    },
+    {
+      id: "slide-4",
+      image: {
+        src: "/testimonials/testimonial15/slide-1.jpg",
+        alt: "Client portrait four",
+      },
+    },
+    {
+      id: "slide-5",
+      image: {
+        src: "/testimonials/testimonial15/slide-2.jpg",
+        alt: "Client portrait five",
+      },
+    },
+    {
+      id: "slide-6",
+      image: {
+        src: "/testimonials/testimonial15/slide-3.jpg",
+        alt: "Client portrait six",
+      },
+    },
+    {
+      id: "slide-7",
+      image: {
+        src: "/testimonials/testimonial15/slide-1.jpg",
+        alt: "Client portrait seven",
+      },
+    },
+    {
+      id: "slide-8",
+      image: {
+        src: "/testimonials/testimonial15/slide-2.jpg",
+        alt: "Client portrait eight",
+      },
+    },
+  ],
+  activeSlide: 1,
+};

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

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

package/templates/components/organisms/Testimonial16/Testimonial16.jsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useEffect } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial16DefaultProps,
+  testimonial16PropTypes,
+} from "./Testimonial16.propTypes";
+
+function QuoteIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 100 100" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M24 72V44c0-12 6-22 18-30l8 12c-8 5-12 11-12 18h14v28H24zm40 0V44c0-12 6-22 18-30l8 12c-8 5-12 11-12 18h14v28H64z"
+        fill="#2f7a41"
+        fillOpacity="0.15"
+        stroke="#2f7a41"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+function ArrowIcon({ className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M7 17L17 7" />
+      <path d="M9 7h8v8" />
+    </svg>
+  );
+}
+
+/**
+ * Testimonial16 — Split hero quote layout with image, arrows, and dot navigation.
+ *
+ * @param {object} props - See Testimonial16.propTypes.js.
+ */
+export function Testimonial16({
+  headline = testimonial16DefaultProps.headline,
+  slides = testimonial16DefaultProps.slides,
+  activeSlide: activeSlideProp = testimonial16DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const isControlled = typeof activeSlideProp === "number";
+  const { activeSlide, goTo, next, prev } = useCarousel({
+    count: slides.length,
+    initialIndex: activeSlideProp,
+    onChange: onSlideChange,
+  });
+  const current = isControlled ? activeSlideProp : activeSlide;
+
+  const setSlide = (index) => {
+    if (isControlled) {
+      onSlideChange?.(index);
+    } else {
+      goTo(index);
+    }
+  };
+
+  useEffect(() => {
+    if (!isControlled) {
+      goTo(activeSlideProp);
+    }
+  }, [activeSlideProp, goTo, isControlled]);
+
+  const active = slides[current] ?? slides[0];
+
+  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-24 xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial16"
+    >
+      <div
+        className="pointer-events-none absolute right-0 top-0 h-[min(80vh,680px)] w-[min(90vw,1246px)] translate-x-1/4 rounded-full bg-[radial-gradient(circle,rgba(47,122,65,0.12)_0%,transparent_70%)]"
+        aria-hidden="true"
+      />
+
+      <div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col gap-12 lg:gap-16">
+        <h2 className="max-w-4xl text-3xl font-medium uppercase leading-none tracking-[-0.02em] text-[#050708] sm:text-5xl md:text-6xl lg:text-7xl xl:text-[80px]">
+          {headline}
+        </h2>
+
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:gap-16 xl:gap-24">
+          <div className="relative aspect-[679/400] w-full overflow-hidden bg-[#eee] lg:w-[45%] lg:shrink-0">
+            <SafeImage
+              src={active.image.src}
+              alt={active.image.alt ?? active.authorName}
+              fill
+              className="object-cover object-center transition-opacity duration-500 ease-out motion-reduce:transition-none"
+              sizes="(max-width:1024px) 100vw, 679px"
+            />
+          </div>
+
+          <div className="flex flex-1 flex-col gap-8 lg:gap-12">
+            <div className="flex items-start justify-between gap-4">
+              <QuoteIcon className="size-16 shrink-0 sm:size-20 lg:size-[100px]" />
+              <div className="flex items-center gap-5">
+                <button
+                  type="button"
+                  aria-label="Previous testimonial"
+                  onClick={prev}
+                  disabled={current === 0}
+                  className="flex size-12 items-center justify-center rounded-full border border-[#050708]/70 text-[#050708]/70 transition-colors duration-200 ease-out hover:border-[#050708] hover:text-[#050708] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  <ArrowIcon className="size-5 -scale-x-100" />
+                </button>
+                <button
+                  type="button"
+                  aria-label="Next testimonial"
+                  onClick={next}
+                  disabled={current >= slides.length - 1}
+                  className="flex size-12 items-center justify-center rounded-full bg-[#2f7a41] text-white transition-colors duration-200 ease-out hover:bg-[#276935] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  <ArrowIcon className="size-5" />
+                </button>
+              </div>
+            </div>
+
+            <blockquote className="text-2xl leading-snug text-[#050708]/70 sm:text-3xl lg:text-[40px] lg:leading-[1.2]">
+              &ldquo;{active.quote}&rdquo;
+            </blockquote>
+
+            <div className="flex flex-col gap-5">
+              <div className="h-px w-full bg-black/10" aria-hidden="true" />
+              <div className="flex items-center gap-4">
+                {active.avatar?.src ? (
+                  <div className="relative size-12 shrink-0 overflow-hidden rounded-full border border-black/10 sm:size-[50px]">
+                    <SafeImage
+                      src={active.avatar.src}
+                      alt={active.avatar.alt ?? active.authorName}
+                      fill
+                      className="object-cover object-center"
+                      sizes="50px"
+                    />
+                  </div>
+                ) : null}
+                <div>
+                  <p className="text-lg font-medium text-[#050708] sm:text-xl">
+                    {active.authorName}
+                  </p>
+                  {active.authorTitle ? (
+                    <p className="text-sm text-[#050708]/70">{active.authorTitle}</p>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1.5" role="tablist" aria-label="Testimonial slides">
+              {slides.map((slide, index) => (
+                <button
+                  key={slide.id ?? index}
+                  type="button"
+                  role="tab"
+                  aria-selected={index === current}
+                  aria-label={`Go to slide ${index + 1}`}
+                  onClick={() => setSlide(index)}
+                  className={[
+                    "rounded-full border border-[#050708] transition-all duration-300 motion-reduce:transition-none",
+                    index === current
+                      ? "h-2 w-6 bg-[#050708]"
+                      : "size-2 bg-transparent",
+                  ].join(" ")}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial16.propTypes = testimonial16PropTypes;
+
+export default Testimonial16;