@notionhive/testimonials 0.1.0

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

@@ -0,0 +1,80 @@
+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,
+  authorRole: PropTypes.string,
+  image: imageShape,
+});
+
+export const testimonial07PropTypes = {
+  /** Centered uppercase headline. */
+  headline: PropTypes.string,
+  /** Slides for the testimonial carousel. */
+  testimonials: PropTypes.arrayOf(testimonialItemShape),
+  /** Controlled active slide index. */
+  activeSlide: PropTypes.number,
+  /** Called when the active slide changes. */
+  onSlideChange: PropTypes.func,
+  /** Auto-advance interval in ms; 0 = off. */
+  autoPlayMs: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export const testimonial07DefaultProps = {
+  headline: "Our Clients say",
+  testimonials: [
+    {
+      id: "beccaty",
+      quote:
+        "Simplifying the complex with carefully-crafted video & animated content. Lorem Ipsum is simply dummy text of the lorem printing and typesetting industry simplifying the complex with carefully lorem Ipsum is simply dummy.",
+      authorName: "Beccaty",
+      authorRole: "KYEL Fitness",
+      image: {
+        src: "/testimonials/testimonial07/photo.jpg",
+        alt: "Beccaty reviewing content on a phone",
+      },
+    },
+    {
+      id: "james",
+      quote:
+        "Their team delivered beyond expectations. Every frame felt intentional and the storytelling elevated our brand in ways we did not anticipate.",
+      authorName: "James Porter",
+      authorRole: "Northline Media",
+      image: {
+        src: "/testimonials/testimonial07/photo-2.jpg",
+        alt: "James Porter",
+      },
+    },
+    {
+      id: "nina",
+      quote:
+        "Working with them was seamless from concept to final cut. They listened, iterated quickly, and produced content our audience genuinely loves.",
+      authorName: "Nina Alvarez",
+      authorRole: "Studio Kinetic",
+      image: {
+        src: "/testimonials/testimonial07/photo-3.jpg",
+        alt: "Nina Alvarez",
+      },
+    },
+    {
+      id: "omar",
+      quote:
+        "The animation quality and attention to detail set them apart. Our campaign metrics improved significantly after launch.",
+      authorName: "Omar Haddad",
+      authorRole: "Pulse Creative",
+      image: {
+        src: "/testimonials/testimonial07/photo.jpg",
+        alt: "Omar Haddad",
+      },
+    },
+  ],
+  activeSlide: 0,
+  autoPlayMs: 0,
+};

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

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

package/templates/components/organisms/Testimonial08/Testimonial08.jsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useEffect } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial08DefaultProps,
+  testimonial08PropTypes,
+} from "./Testimonial08.propTypes";
+
+function QuoteIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 100 100" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M18 52c0-12 7-22 18-28l5 10c-7 3-12 8-12 16h12v14H10V52h8zm38 0c0-12 7-22 18-28l5 10c-7 3-12 8-12 16h12v14H48V52h8z"
+        fill="currentColor"
+        opacity="0.4"
+      />
+    </svg>
+  );
+}
+
+function NavArrowButton({ direction, onClick, disabled }) {
+  return (
+    <button
+      type="button"
+      aria-label={direction === "prev" ? "Previous testimonial" : "Next testimonial"}
+      onClick={onClick}
+      disabled={disabled}
+      className="flex size-14 items-center justify-center rounded-full border border-white/30 text-white transition-colors duration-200 ease-out hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40 sm:size-[60px]"
+    >
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-6">
+        <path
+          d={direction === "prev" ? "M15 6l-6 6 6 6" : "M9 6l6 6-6 6"}
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
+}
+
+/**
+ * Testimonial08 — NHCS split-background testimonial carousel with chamfered portrait.
+ *
+ * @param {object} props - See Testimonial08.propTypes.js.
+ */
+export function Testimonial08({
+  headline = testimonial08DefaultProps.headline,
+  testimonials = testimonial08DefaultProps.testimonials,
+  activeSlide: activeSlideProp = testimonial08DefaultProps.activeSlide,
+  onSlideChange,
+  autoPlayMs = testimonial08DefaultProps.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,
+  });
+
+  useEffect(() => {
+    goTo(Math.min(activeSlideProp, maxIndex));
+  }, [activeSlideProp, goTo, maxIndex]);
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial08"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="absolute inset-0 bg-[#f6f6f6]" aria-hidden="true" />
+      <div
+        className="absolute inset-x-0 top-0 h-[58%] bg-[#001028] sm:h-[62%] lg:h-[691px] lg:max-h-[70%]"
+        aria-hidden="true"
+      />
+
+      <div className="relative px-4 py-14 sm:px-6 sm:py-16 md:px-10 lg:px-20 lg:py-24 xl:px-[80px]">
+        <div className="mx-auto flex w-full max-w-[1366px] flex-col gap-10 lg:gap-16">
+          <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
+            <div className="max-w-3xl">
+              <h2 className="font-serif text-3xl leading-tight text-white sm:text-4xl lg:text-[48px] lg:leading-[60px]">
+                {headline}
+              </h2>
+              <div className="mt-5 h-1 w-16 bg-[#c70017]" aria-hidden="true" />
+            </div>
+
+            <div className="flex flex-row gap-3 lg:flex-col lg:gap-4">
+              <NavArrowButton direction="prev" onClick={prev} disabled={false} />
+              <NavArrowButton direction="next" onClick={next} disabled={false} />
+            </div>
+          </div>
+
+          <div className="overflow-hidden">
+            <div
+              className="flex transition-transform duration-500 ease-out motion-reduce:transition-none"
+              style={{ transform: `translateX(-${activeSlide * 100}%)` }}
+            >
+              {testimonials.map((item) => (
+                <article
+                  key={item.id ?? item.authorName}
+                  className="flex w-full shrink-0 flex-col gap-10 lg:flex-row lg:items-end lg:gap-12 xl:gap-20"
+                >
+                  {item.image?.src ? (
+                    <div
+                      className="relative mx-auto h-72 w-full max-w-md shrink-0 overflow-hidden sm:h-80 lg:mx-0 lg:h-[440px] lg:w-[445px] lg:max-w-none"
+                      style={{
+                        clipPath:
+                          "polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 18%)",
+                      }}
+                    >
+                      <SafeImage
+                        src={item.image.src}
+                        alt={item.image.alt ?? item.authorName}
+                        fill
+                        className="object-cover object-center"
+                        sizes="(max-width: 1024px) 90vw, 445px"
+                      />
+                    </div>
+                  ) : null}
+
+                  <div className="relative flex flex-1 flex-col gap-8 pb-4 lg:pb-10">
+                    <QuoteIcon className="size-16 text-[#c70017] sm:size-20 lg:size-[100px]" />
+
+                    <blockquote className="max-w-2xl font-serif text-lg italic leading-relaxed text-white sm:text-xl lg:text-2xl lg:leading-9">
+                      &ldquo;{item.quote}&rdquo;
+                    </blockquote>
+
+                    <div className="relative pl-0 lg:pl-36">
+                      <div
+                        className="absolute left-0 top-1/2 hidden h-px w-36 -translate-y-1/2 bg-[#c70017] lg:block"
+                        aria-hidden="true"
+                      />
+                      <p className="text-lg font-medium text-white sm:text-xl">
+                        {item.authorName}
+                      </p>
+                      {item.authorRole ? (
+                        <p className="mt-1 text-sm text-white/90 sm:text-base">
+                          {item.authorRole}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+
+          {testimonials.length > 1 ? (
+            <div className="flex justify-center gap-2 lg:justify-start">
+              {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={[
+                    "h-1 rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+                    activeSlide === index
+                      ? "w-8 bg-[#c70017]"
+                      : "w-4 bg-white/30 hover:bg-white/50",
+                  ].join(" ")}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial08.propTypes = testimonial08PropTypes;
+
+export default Testimonial08;

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

@@ -0,0 +1,69 @@
+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,
+  authorRole: PropTypes.string,
+  image: imageShape,
+});
+
+export const testimonial08PropTypes = {
+  /** Section headline. */
+  headline: PropTypes.string,
+  /** Slides for the testimonial carousel. */
+  testimonials: PropTypes.arrayOf(testimonialItemShape),
+  /** Controlled active slide index. */
+  activeSlide: PropTypes.number,
+  /** Called when the active slide changes. */
+  onSlideChange: PropTypes.func,
+  /** Auto-advance interval in ms; 0 = off. */
+  autoPlayMs: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export const testimonial08DefaultProps = {
+  headline: "Let's hear from our students and parents.",
+  testimonials: [
+    {
+      id: "mark",
+      quote:
+        "It's more of a family rather than a school relationship. There's a lot of respect between the students and a huge sense of responsibility.",
+      authorName: "Mark Ashmore",
+      authorRole: "Student at NHCS",
+      image: {
+        src: "/testimonials/testimonial08/student-1.jpg",
+        alt: "Mark Ashmore studying at a desk",
+      },
+    },
+    {
+      id: "sophia",
+      quote:
+        "The teachers genuinely care about every student. I feel supported academically and personally every single day.",
+      authorName: "Sophia Nguyen",
+      authorRole: "Parent at NHCS",
+      image: {
+        src: "/testimonials/testimonial08/student-2.jpg",
+        alt: "Sophia Nguyen",
+      },
+    },
+    {
+      id: "elijah",
+      quote:
+        "NHCS gave our daughter confidence and a love for learning. The community here is warm, inclusive, and inspiring.",
+      authorName: "Elijah Brooks",
+      authorRole: "Parent at NHCS",
+      image: {
+        src: "/testimonials/testimonial08/student-3.jpg",
+        alt: "Elijah Brooks",
+      },
+    },
+  ],
+  activeSlide: 0,
+  autoPlayMs: 0,
+};

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

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

package/templates/components/organisms/Testimonial09/Testimonial09.jsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial09DefaultProps,
+  testimonial09PropTypes,
+} from "./Testimonial09.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>
+  );
+}
+
+/**
+ * Testimonial09 — Horizontal bordered card carousel with avatar attribution.
+ *
+ * @param {object} props - See Testimonial09.propTypes.js.
+ */
+export function Testimonial09({
+  eyebrow = testimonial09DefaultProps.eyebrow,
+  headline = testimonial09DefaultProps.headline,
+  testimonials = testimonial09DefaultProps.testimonials,
+  activeSlide: controlledSlide,
+  onSlideChange,
+  autoPlayMs = testimonial09DefaultProps.autoPlayMs,
+  className = "",
+}) {
+  const isControlled = controlledSlide !== undefined;
+
+  const handleChange = useCallback(
+    (index) => {
+      onSlideChange?.(index);
+    },
+    [onSlideChange]
+  );
+
+  const [slidesPerView, setSlidesPerView] = useState(1);
+  const slideCount = Math.max(1, testimonials.length - slidesPerView + 1);
+  const maxSlide = slideCount - 1;
+
+  const {
+    activeSlide: carouselSlide,
+    next,
+    prev,
+    pause,
+    resume,
+    goTo,
+  } = useCarousel({
+    count: slideCount,
+    initialIndex: isControlled ? controlledSlide : 0,
+    loop: false,
+    autoPlayMs,
+    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 >= 768) 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]);
+
+  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="testimonial09"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="mx-auto flex w-full max-w-[1532px] flex-col gap-10 sm:gap-12 lg:gap-[48px]">
+        <header className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+          <div className="flex max-w-xl flex-col gap-6 lg:gap-12">
+            {eyebrow ? (
+              <p className="text-xs font-medium uppercase tracking-[0.08em] text-[#1b2127]">
+                {eyebrow}
+              </p>
+            ) : null}
+            <h2 className="font-serif text-2xl leading-[1.2] tracking-[-0.02em] text-[#1b2127] sm:text-[28px] lg:text-[32px]">
+              {headline}
+            </h2>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              aria-label="Previous testimonial"
+              onClick={prev}
+              disabled={activeSlide === 0}
+              className="flex size-10 items-center justify-center rounded-full border border-[#e6eaed] text-[#1b2127] transition-colors duration-200 ease-out hover:bg-[#f7f7f7] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-30"
+            >
+              <ChevronIcon direction="left" className="size-5" />
+            </button>
+            <button
+              type="button"
+              aria-label="Next testimonial"
+              onClick={next}
+              disabled={activeSlide >= maxSlide}
+              className="flex size-10 items-center justify-center rounded-full border border-[#e6eaed] text-[#1b2127] transition-colors duration-200 ease-out hover:bg-[#f7f7f7] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-30"
+            >
+              <ChevronIcon direction="right" className="size-5" />
+            </button>
+          </div>
+        </header>
+
+        <div className="-mx-4 overflow-hidden sm:-mx-6 md:-mx-10 lg:mx-0">
+          <div
+            className="flex transition-transform duration-500 ease-out motion-reduce:transition-none"
+            style={{
+              transform: `translateX(-${activeSlide * (100 / slidesPerView)}%)`,
+            }}
+          >
+            {testimonials.map((item, index) => (
+              <article
+                key={item.id ?? item.authorName}
+                className={[
+                  "flex shrink-0 flex-col justify-between border border-[#e6eaed] p-6 sm:p-8 lg:min-h-[400px] lg:p-[30px] xl:min-h-[496px]",
+                  index < testimonials.length - 1 ? "border-r-0" : "",
+                ].join(" ")}
+                style={{ width: `${100 / slidesPerView}%` }}
+              >
+                <p className="text-base leading-[1.4] tracking-[0.02em] text-[#1b2127]">
+                  &ldquo;{item.quote}&rdquo;
+                </p>
+
+                <div className="mt-10 flex flex-col gap-3">
+                  {item.avatar ? (
+                    <div className="relative size-14 shrink-0 overflow-hidden sm:size-[60px]">
+                      <SafeImage
+                        src={item.avatar.src}
+                        alt={item.avatar.alt ?? item.authorName}
+                        fill
+                        className="object-cover object-center"
+                        sizes="60px"
+                      />
+                    </div>
+                  ) : null}
+                  <p className="font-serif text-lg leading-none tracking-[-0.02em] text-[#1b2127] sm:text-xl">
+                    {item.authorName}
+                  </p>
+                  {item.authorRole ? (
+                    <p className="text-xs font-medium uppercase tracking-[0.08em] text-[#767f84]">
+                      {item.authorRole}
+                    </p>
+                  ) : null}
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-center gap-2">
+          {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-[#1b2127]"
+                  : "w-1.5 bg-[#e6eaed] hover:bg-[#767f84]",
+              ].join(" ")}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial09.propTypes = testimonial09PropTypes;
+
+export default Testimonial09;

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

@@ -0,0 +1,105 @@
+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,
+  authorRole: PropTypes.string,
+  avatar: imageShape,
+});
+
+export const testimonial09PropTypes = {
+  /** Small uppercase label above the headline. */
+  eyebrow: PropTypes.string,
+  /** Section headline. */
+  headline: PropTypes.string,
+  /** Testimonial cards for the carousel. */
+  testimonials: PropTypes.arrayOf(testimonialItemShape),
+  /** Controlled active slide index. */
+  activeSlide: PropTypes.number,
+  /** Called when the active slide changes. */
+  onSlideChange: PropTypes.func,
+  /** Auto-advance interval in ms; 0 = off. */
+  autoPlayMs: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export const testimonial09DefaultProps = {
+  eyebrow: "/ testimonials",
+  headline: "Stories of trust, comfort, and everyday living from the people.",
+  testimonials: [
+    {
+      id: "farhan-ahmed",
+      quote:
+        "From the very first meeting, the entire experience felt thoughtful, transparent, and professionally managed. Suvastu truly understands modern family living.",
+      authorName: "Farhan Ahmed",
+      authorRole: "Homeowner, Gulshan",
+      avatar: {
+        src: "/testimonials/testimonial09/avatar-2.jpg",
+        alt: "Farhan Ahmed",
+      },
+    },
+    {
+      id: "nusrat-rahman",
+      quote:
+        "What stood out most was the attention to detail — from the architectural planning to the finishing quality. Every space feels intentional.",
+      authorName: "Nusrat Rahman",
+      authorRole: "Resident, Banani",
+      avatar: {
+        src: "/testimonials/testimonial09/avatar-3.jpg",
+        alt: "Nusrat Rahman",
+      },
+    },
+    {
+      id: "arif-chowdhury",
+      quote:
+        "The community here is vibrant and welcoming, making it easy to feel at home from day one.",
+      authorName: "Arif Chowdhury",
+      authorRole: "Professional, Gulshan",
+      avatar: {
+        src: "/testimonials/testimonial09/avatar-4.jpg",
+        alt: "Arif Chowdhury",
+      },
+    },
+    {
+      id: "sadia-islam",
+      quote:
+        "I appreciate the eco-friendly designs integrated throughout the development. It truly makes a difference in daily living.",
+      authorName: "Sadia Islam",
+      authorRole: "Environmentalist, Dhanmondi",
+      avatar: {
+        src: "/testimonials/testimonial09/avatar-1.jpg",
+        alt: "Sadia Islam",
+      },
+    },
+    {
+      id: "mehjabin-karim",
+      quote:
+        "The handover process was smooth, organized, and trustworthy. Their commitment to quality and communication gave us real confidence.",
+      authorName: "Mehjabin Karim",
+      authorRole: "Homeowner, Uttara",
+      avatar: {
+        src: "/testimonials/testimonial09/avatar-5.jpg",
+        alt: "Mehjabin Karim",
+      },
+    },
+    {
+      id: "rafiul-islam",
+      quote:
+        "Suvastu creates homes that feel timeless. The design, atmosphere, and overall living experience feel elevated in every way.",
+      authorName: "Rafiul Islam",
+      authorRole: "Resident, Dhaka",
+      avatar: {
+        src: "/testimonials/testimonial09/avatar-6.jpg",
+        alt: "Rafiul Islam",
+      },
+    },
+  ],
+  activeSlide: 0,
+  autoPlayMs: 0,
+};

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

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