@notionhive/testimonials 0.1.0

package/templates/components/organisms/Testimonial12/Testimonial12.jsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial12DefaultProps,
+  testimonial12PropTypes,
+} from "./Testimonial12.propTypes";
+
+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>
+  );
+}
+
+function PlayIcon({ active = false, className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 62 62"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <circle
+        cx="31"
+        cy="31"
+        r="31"
+        fill={active ? "#0860A8" : "rgba(255,255,255,0.35)"}
+        className="transition-colors duration-200 ease-out"
+      />
+      <path
+        d="M26 20l18 11-18 11V20z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Testimonial12 — Dark video-story carousel with play buttons and CTA.
+ *
+ * @param {object} props - See Testimonial12.propTypes.js.
+ */
+export function Testimonial12({
+  headline = testimonial12DefaultProps.headline,
+  subtitle = testimonial12DefaultProps.subtitle,
+  stories = testimonial12DefaultProps.stories,
+  activeSlide: controlledSlide,
+  onSlideChange,
+  ctaText = testimonial12DefaultProps.ctaText,
+  ctaHref = testimonial12DefaultProps.ctaHref,
+  onCtaClick,
+  onStoryPlay,
+  className = "",
+}) {
+  const isControlled = controlledSlide !== undefined;
+  const [hoveredStory, setHoveredStory] = useState(null);
+  const [slidesPerView, setSlidesPerView] = useState(1);
+
+  const handleChange = useCallback(
+    (index) => {
+      onSlideChange?.(index);
+    },
+    [onSlideChange]
+  );
+
+  const slideCount = Math.max(1, stories.length - slidesPerView + 1);
+  const maxSlide = slideCount - 1;
+
+  const {
+    activeSlide: carouselSlide,
+    next,
+    prev,
+    pause,
+    resume,
+    goTo,
+  } = useCarousel({
+    count: slideCount,
+    initialIndex: isControlled ? controlledSlide : 0,
+    loop: false,
+    onChange: handleChange,
+  });
+
+  const activeSlide = isControlled ? controlledSlide : carouselSlide;
+
+  useEffect(() => {
+    const updateSlidesPerView = () => {
+      const width = window.innerWidth;
+      if (width >= 1280) setSlidesPerView(4);
+      else if (width >= 1024) setSlidesPerView(3);
+      else if (width >= 640) setSlidesPerView(2);
+      else setSlidesPerView(1);
+    };
+
+    updateSlidesPerView();
+    window.addEventListener("resize", updateSlidesPerView);
+    return () => window.removeEventListener("resize", updateSlidesPerView);
+  }, []);
+
+  useEffect(() => {
+    if (isControlled) goTo(controlledSlide);
+  }, [controlledSlide, goTo, isControlled]);
+
+  useEffect(() => {
+    if (carouselSlide > maxSlide) goTo(maxSlide);
+  }, [carouselSlide, goTo, maxSlide]);
+
+  const CtaTag = ctaHref ? "a" : "button";
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-black",
+        "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="testimonial12"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-10 lg:gap-12">
+        <header className="mx-auto flex max-w-2xl flex-col items-center gap-4 text-center text-white sm:gap-5">
+          <h2 className="text-2xl font-medium leading-tight sm:text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px]">
+            {headline}
+          </h2>
+          {subtitle ? (
+            <p className="text-sm leading-relaxed sm:text-base lg:leading-[26px]">
+              {subtitle}
+            </p>
+          ) : null}
+        </header>
+
+        <div className="relative">
+          <button
+            type="button"
+            aria-label="Previous story"
+            onClick={prev}
+            disabled={activeSlide === 0}
+            className="absolute left-0 top-1/2 z-10 hidden -translate-y-1/2 text-white/20 transition-colors duration-200 ease-out hover:text-white/60 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-20 sm:flex"
+          >
+            <ChevronIcon direction="left" className="size-10" />
+          </button>
+
+          <div className="overflow-hidden px-0 sm:px-10 lg:px-12">
+            <div
+              className="flex gap-6 transition-transform duration-500 ease-out motion-reduce:transition-none lg:gap-[30px]"
+              style={{
+                transform: `translateX(-${activeSlide * (100 / slidesPerView)}%)`,
+              }}
+            >
+              {stories.map((story, index) => {
+                const isActive =
+                  hoveredStory === story.id ||
+                  (hoveredStory === null && index === activeSlide);
+
+                return (
+                  <article
+                    key={story.id ?? story.description}
+                    className="flex shrink-0 flex-col gap-5 sm:gap-6"
+                    style={{ width: `calc(${100 / slidesPerView}% - ${slidesPerView > 1 ? "18px" : "0px"})` }}
+                    onMouseEnter={() => setHoveredStory(story.id ?? String(index))}
+                    onMouseLeave={() => setHoveredStory(null)}
+                    onFocus={() => setHoveredStory(story.id ?? String(index))}
+                    onBlur={() => setHoveredStory(null)}
+                  >
+                    <div className="group relative aspect-[300/350] w-full overflow-hidden">
+                      {story.thumbnail ? (
+                        <SafeImage
+                          src={story.thumbnail.src}
+                          alt={story.thumbnail.alt ?? ""}
+                          fill
+                          className="object-cover object-center transition-transform duration-300 ease-out motion-safe:group-hover:scale-[1.02] motion-reduce:transition-none"
+                          sizes="(max-width:640px) 85vw, 300px"
+                        />
+                      ) : null}
+
+                      <button
+                        type="button"
+                        aria-label={`Play story ${index + 1}`}
+                        onClick={() => onStoryPlay?.(story, index)}
+                        className="absolute bottom-5 left-5 transition-transform duration-200 ease-out hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none"
+                      >
+                        <PlayIcon
+                          active={isActive}
+                          className="size-12 sm:size-14 lg:size-[62px]"
+                        />
+                      </button>
+                    </div>
+
+                    <p
+                      className={[
+                        "text-base font-medium leading-relaxed text-white/80 sm:text-lg lg:text-xl lg:leading-[26px]",
+                        "transition-colors duration-200 ease-out",
+                        isActive ? "text-white underline decoration-solid underline-offset-4" : "",
+                      ].join(" ")}
+                    >
+                      {story.description}
+                    </p>
+                  </article>
+                );
+              })}
+            </div>
+          </div>
+
+          <button
+            type="button"
+            aria-label="Next story"
+            onClick={next}
+            disabled={activeSlide >= maxSlide}
+            className="absolute right-0 top-1/2 z-10 hidden -translate-y-1/2 text-white transition-colors duration-200 ease-out hover:text-white/60 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-20 sm:flex"
+          >
+            <ChevronIcon direction="right" className="size-10" />
+          </button>
+        </div>
+
+        <div className="flex flex-col items-center gap-6">
+          {slideCount > 1 ? (
+            <div className="flex gap-2 sm:hidden">
+              {Array.from({ length: slideCount }).map((_, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  aria-label={`Go to slide ${index + 1}`}
+                  aria-current={activeSlide === index ? "true" : undefined}
+                  onClick={() => goTo(index)}
+                  className={[
+                    "h-1.5 rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+                    activeSlide === index
+                      ? "w-6 bg-white"
+                      : "w-1.5 bg-white/30 hover:bg-white/50",
+                  ].join(" ")}
+                />
+              ))}
+            </div>
+          ) : null}
+
+          {ctaText ? (
+            <CtaTag
+              {...(ctaHref
+                ? { href: ctaHref }
+                : { type: "button", onClick: onCtaClick })}
+              className="inline-flex items-center justify-center border border-white px-6 py-3 text-sm font-semibold text-white shadow-[0_4px_10px_rgba(8,96,168,0.06)] transition-colors duration-200 ease-out hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 sm:px-8 sm:py-[13px] sm:text-base"
+            >
+              {ctaText}
+            </CtaTag>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial12.propTypes = testimonial12PropTypes;
+
+export default Testimonial12;

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

@@ -0,0 +1,81 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const storyItemShape = PropTypes.shape({
+  id: PropTypes.string,
+  description: PropTypes.string.isRequired,
+  thumbnail: imageShape,
+  videoUrl: PropTypes.string,
+});
+
+export const testimonial12PropTypes = {
+  /** Main section headline. */
+  headline: PropTypes.string,
+  /** Subtitle below the headline. */
+  subtitle: PropTypes.string,
+  /** Video story cards. */
+  stories: PropTypes.arrayOf(storyItemShape),
+  /** Controlled active slide index. */
+  activeSlide: PropTypes.number,
+  /** Called when the active slide changes. */
+  onSlideChange: PropTypes.func,
+  /** CTA button label. */
+  ctaText: PropTypes.string,
+  /** CTA href (renders an anchor when set). */
+  ctaHref: PropTypes.string,
+  /** CTA click handler (button mode when no href). */
+  onCtaClick: PropTypes.func,
+  /** Called when a story play button is clicked. */
+  onStoryPlay: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const testimonial12DefaultProps = {
+  headline: "Story of the new beginnings",
+  subtitle: "Yes, we can!",
+  stories: [
+    {
+      id: "story-1",
+      description:
+        "Auctor quam dictumst nibh a sagis. Eu in enim risus augue non enim in tincidunt.",
+      thumbnail: {
+        src: "/testimonials/testimonial12/story-1.jpg",
+        alt: "Woman in wheelchair against red background",
+      },
+    },
+    {
+      id: "story-2",
+      description:
+        "Auctor quam dictumst nibh a sagis. Eu in enim risus augue non enim in tincidunt.",
+      thumbnail: {
+        src: "/testimonials/testimonial12/story-2.jpg",
+        alt: "Woman with glasses in purple shirt",
+      },
+    },
+    {
+      id: "story-3",
+      description:
+        "Auctor quam dictumst nibh a sagis. Eu in enim risus augue non enim in tincidunt.",
+      thumbnail: {
+        src: "/testimonials/testimonial12/story-3.jpg",
+        alt: "Woman in headscarf holding a mug",
+      },
+    },
+    {
+      id: "story-4",
+      description:
+        "Auctor quam dictumst nibh a sagis. Eu in enim risus augue non enim in tincidunt.",
+      thumbnail: {
+        src: "/testimonials/testimonial12/story-4.jpg",
+        alt: "Woman in blue gown holding a card",
+      },
+    },
+  ],
+  activeSlide: 0,
+  ctaText: "Read More Story",
+  ctaHref: "#",
+};

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

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

package/templates/components/organisms/Testimonial13/Testimonial13.jsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useEffect } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial13DefaultProps,
+  testimonial13PropTypes,
+} from "./Testimonial13.propTypes";
+
+function PlayIcon({ className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M4 2.5v11l9-5.5-9-5.5z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/**
+ * Testimonial13 — Featured story carousel with preview cards and video play CTA.
+ *
+ * @param {object} props - See Testimonial13.propTypes.js.
+ */
+export function Testimonial13({
+  headline = testimonial13DefaultProps.headline,
+  subtitle = testimonial13DefaultProps.subtitle,
+  slides = testimonial13DefaultProps.slides,
+  activeSlide: activeSlideProp = testimonial13DefaultProps.activeSlide,
+  onSlideChange,
+  ctaText = testimonial13DefaultProps.ctaText,
+  ctaHref = testimonial13DefaultProps.ctaHref,
+  onCtaClick,
+  onPlayClick,
+  className = "",
+}) {
+  const isControlled = typeof activeSlideProp === "number";
+  const { activeSlide, goTo } = 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];
+  const previewSlides = slides
+    .map((slide, index) => ({ slide, index }))
+    .filter(({ index }) => index !== current)
+    .slice(0, 2);
+
+  const CtaTag = ctaHref ? "a" : "button";
+  const progress = slides.length > 0 ? ((current + 1) / slides.length) * 100 : 0;
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-[#003035]",
+        "px-4 py-16 sm:px-6 sm:py-20 md:px-10 lg:px-20 lg:py-[140px] xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial13"
+    >
+      <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 items-center gap-5 text-center text-white">
+          <h2 className="text-3xl leading-tight tracking-[-0.04em] sm:text-4xl md:text-5xl lg:text-[56px]">
+            {headline}
+          </h2>
+          {subtitle ? (
+            <p className="max-w-2xl text-base leading-relaxed sm:text-lg lg:text-xl">
+              {subtitle}
+            </p>
+          ) : null}
+        </header>
+
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-stretch lg:gap-2.5">
+          <article className="flex min-h-[420px] flex-1 flex-col overflow-hidden rounded-xl bg-[#003035] sm:min-h-[480px] lg:min-h-[535px] lg:flex-row">
+            <div className="relative aspect-[4/5] w-full shrink-0 sm:aspect-[3/4] lg:aspect-auto lg:h-auto lg:w-[35%]">
+              <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, 430px"
+              />
+              <button
+                type="button"
+                aria-label="Play video testimonial"
+                onClick={() => onPlayClick?.(active, current)}
+                className="absolute bottom-4 right-4 flex size-12 items-center justify-center rounded-full bg-[#ff6900] text-white transition-colors duration-200 ease-out hover:bg-[#e55e00] focus-visible:outline-2 focus-visible:outline-offset-2 sm:bottom-6 sm:right-6 sm:size-16"
+              >
+                <PlayIcon className="size-4 sm:size-5" />
+              </button>
+            </div>
+
+            <div className="flex flex-1 flex-col justify-between gap-8 px-6 py-8 sm:px-8 sm:py-10 lg:px-10 lg:py-[30px]">
+              <blockquote className="text-2xl leading-snug text-white sm:text-3xl lg:text-[40px] lg:leading-[1.4]">
+                {active.quote}
+              </blockquote>
+              <div className="flex flex-col gap-1 text-center lg:items-start lg:text-left">
+                <p className="text-xl text-white sm:text-2xl">{active.authorName}</p>
+                {active.authorLocation ? (
+                  <p className="text-sm text-white/60">{active.authorLocation}</p>
+                ) : null}
+              </div>
+            </div>
+          </article>
+
+          <div className="hidden shrink-0 gap-2.5 lg:flex">
+            {previewSlides.map(({ slide, index }) => (
+              <button
+                key={slide.id ?? index}
+                type="button"
+                aria-label={`View testimonial from ${slide.authorName}`}
+                onClick={() => setSlide(index)}
+                className="group relative h-[535px] w-[250px] overflow-hidden rounded-xl transition-transform duration-300 ease-out hover:scale-[1.02] focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none motion-reduce:hover:scale-100"
+              >
+                <SafeImage
+                  src={slide.image.src}
+                  alt={slide.image.alt ?? slide.authorName}
+                  fill
+                  className="object-cover object-center"
+                  sizes="250px"
+                />
+                {slide.overlayColor ? (
+                  <span
+                    className="absolute inset-0 rounded-xl"
+                    style={{ backgroundColor: slide.overlayColor }}
+                    aria-hidden="true"
+                  />
+                ) : null}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center gap-10 sm:gap-14 lg:gap-[60px]">
+          <div
+            className="relative h-px w-full max-w-[1670px] bg-white/20"
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(progress)}
+            aria-label="Testimonial progress"
+          >
+            <div
+              className="absolute left-0 top-0 h-full bg-white transition-all duration-500 ease-out motion-reduce:transition-none"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+
+          {ctaText ? (
+            <CtaTag
+              {...(ctaHref
+                ? { href: ctaHref }
+                : { type: "button", onClick: onCtaClick })}
+              className="inline-flex h-12 items-center border border-white px-5 text-base font-semibold text-white backdrop-blur-[17px] transition-colors duration-200 ease-out hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {ctaText}
+            </CtaTag>
+          ) : null}
+        </div>
+
+        <div className="flex justify-center gap-2 lg:hidden">
+          {slides.map((slide, index) => (
+            <button
+              key={slide.id ?? index}
+              type="button"
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={index === current ? "true" : undefined}
+              onClick={() => setSlide(index)}
+              className={[
+                "h-2 rounded-full transition-all duration-300 motion-reduce:transition-none",
+                index === current ? "w-6 bg-white" : "w-2 bg-white/40",
+              ].join(" ")}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial13.propTypes = testimonial13PropTypes;
+
+export default Testimonial13;

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

@@ -0,0 +1,87 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const slideShape = PropTypes.shape({
+  id: PropTypes.string,
+  quote: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  authorLocation: PropTypes.string,
+  image: imageShape.isRequired,
+  /** Preview card tint — e.g. `rgba(255,105,0,0.7)` or `rgba(0,189,214,0.7)`. */
+  overlayColor: PropTypes.string,
+  videoUrl: PropTypes.string,
+});
+
+export const testimonial13PropTypes = {
+  headline: PropTypes.string,
+  subtitle: PropTypes.string,
+  slides: PropTypes.arrayOf(slideShape),
+  activeSlide: PropTypes.number,
+  onSlideChange: PropTypes.func,
+  ctaText: PropTypes.string,
+  ctaHref: PropTypes.string,
+  onCtaClick: PropTypes.func,
+  onPlayClick: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const testimonial13DefaultProps = {
+  headline: "Real Stories, Real Change",
+  subtitle: "Behind every program is a real human story.",
+  slides: [
+    {
+      id: "marcus",
+      quote:
+        "When everything felt confusing and overwhelming, Refugee 613 helped me find clear information and people who truly listened. I didn't feel alone anymore.",
+      authorName: "Marcus Boyer",
+      authorLocation: "From Myanmar",
+      image: {
+        src: "/testimonials/testimonial13/slide-1.jpg",
+        alt: "Woman smiling while on a phone call",
+      },
+    },
+    {
+      id: "amina",
+      quote:
+        "The support I received gave me confidence to rebuild my life. Every step felt guided and compassionate.",
+      authorName: "Amina Hassan",
+      authorLocation: "From Syria",
+      image: {
+        src: "/testimonials/testimonial13/slide-2.jpg",
+        alt: "Portrait of a newcomer",
+      },
+      overlayColor: "rgba(255,105,0,0.7)",
+    },
+    {
+      id: "david",
+      quote:
+        "I finally understood my rights and options. The team made a difficult transition feel possible.",
+      authorName: "David Chen",
+      authorLocation: "From Vietnam",
+      image: {
+        src: "/testimonials/testimonial13/slide-3.jpg",
+        alt: "Community member portrait",
+      },
+      overlayColor: "rgba(0,189,214,0.7)",
+    },
+    {
+      id: "leila",
+      quote:
+        "Having someone who spoke my language and understood my culture changed everything for my family.",
+      authorName: "Leila Farah",
+      authorLocation: "From Afghanistan",
+      image: {
+        src: "/testimonials/testimonial13/slide-4.jpg",
+        alt: "Family receiving support",
+      },
+      overlayColor: "rgba(0,189,214,0.7)",
+    },
+  ],
+  activeSlide: 0,
+  ctaText: "Read More Stories",
+  ctaHref: "#",
+};

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

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