@notionhive/testimonials 0.1.0

package/templates/components/organisms/Testimonial10/Testimonial10.jsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial10DefaultProps,
+  testimonial10PropTypes,
+} from "./Testimonial10.propTypes";
+
+function QuoteMarkIcon({ className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 48 48"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M14 36V22.8C14 16.4 17.2 11.6 23.6 8.4L26.4 12.4C21.6 15.2 19.2 18.8 18.4 24H26.4V36H14ZM30 36V22.8C30 16.4 33.2 11.6 39.6 8.4L42.4 12.4C37.6 15.2 35.2 18.8 34.4 24H42.4V36H30Z"
+        fill="#F15E22"
+      />
+    </svg>
+  );
+}
+
+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>
+  );
+}
+
+/**
+ * Testimonial10 — Centered headline with quote cards and architectural imagery.
+ *
+ * @param {object} props - See Testimonial10.propTypes.js.
+ */
+export function Testimonial10({
+  headline = testimonial10DefaultProps.headline,
+  subtitle = testimonial10DefaultProps.subtitle,
+  testimonials = testimonial10DefaultProps.testimonials,
+  activeSlide: controlledSlide,
+  onSlideChange,
+  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,
+    onChange: handleChange,
+  });
+
+  const activeSlide = isControlled ? controlledSlide : carouselSlide;
+
+  useEffect(() => {
+    const updateSlidesPerView = () => {
+      setSlidesPerView(window.innerWidth >= 1024 ? 3 : 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-24 xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial10"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 md:gap-16 lg:gap-20">
+        <header className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center text-[#1f1f1f] lg:gap-[30px]">
+          <h2 className="font-serif text-3xl leading-none tracking-[-0.03em] sm:text-4xl md:text-5xl lg:text-6xl xl:text-[72px]">
+            {headline}
+          </h2>
+          {subtitle ? (
+            <p className="max-w-2xl text-base leading-[1.4] tracking-[-0.02em] opacity-80 sm:text-lg lg:text-xl">
+              {subtitle}
+            </p>
+          ) : null}
+        </header>
+
+        <div className="relative">
+          <div className="overflow-hidden">
+            <div
+              className="flex transition-transform duration-500 ease-out motion-reduce:transition-none"
+              style={{
+                transform: `translateX(-${activeSlide * (100 / slidesPerView)}%)`,
+              }}
+            >
+              {testimonials.map((item) => (
+                <article
+                  key={item.id ?? item.attribution}
+                  className="flex shrink-0 flex-col items-end gap-12 border-r border-black/10 pr-5 sm:gap-16 lg:gap-[100px] lg:pr-5"
+                  style={{ width: `${100 / slidesPerView}%` }}
+                >
+                  <div className="flex w-full flex-col gap-5 sm:gap-6">
+                    <p className="font-serif text-lg leading-[1.2] tracking-[-0.03em] sm:text-xl lg:text-2xl">
+                      &ldquo;{item.quote}&rdquo;
+                    </p>
+                    <p className="text-sm leading-none opacity-80 sm:text-base">
+                      {item.attribution}
+                    </p>
+                  </div>
+
+                  {item.image ? (
+                    <div className="relative h-24 w-28 shrink-0 sm:h-[110px] sm:w-36 lg:h-[134px] lg:w-[152px]">
+                      <SafeImage
+                        src={item.image.src}
+                        alt={item.image.alt ?? ""}
+                        fill
+                        className="object-cover object-center"
+                        sizes="152px"
+                      />
+                      <QuoteMarkIcon className="absolute -left-3 -top-3 size-10 sm:size-12 lg:left-0 lg:top-0 lg:size-12" />
+                    </div>
+                  ) : null}
+                </article>
+              ))}
+            </div>
+          </div>
+
+          {slideCount > 1 ? (
+            <div className="mt-8 flex items-center justify-center gap-4">
+              <button
+                type="button"
+                aria-label="Previous testimonial"
+                onClick={prev}
+                disabled={activeSlide === 0}
+                className="flex size-10 items-center justify-center rounded-full border border-black/10 text-[#1f1f1f] transition-colors duration-200 ease-out hover:bg-black/5 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-30"
+              >
+                <ChevronIcon direction="left" className="size-5" />
+              </button>
+              <div className="flex 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-[#1f1f1f]"
+                        : "w-1.5 bg-black/15 hover:bg-black/30",
+                    ].join(" ")}
+                  />
+                ))}
+              </div>
+              <button
+                type="button"
+                aria-label="Next testimonial"
+                onClick={next}
+                disabled={activeSlide >= maxSlide}
+                className="flex size-10 items-center justify-center rounded-full border border-black/10 text-[#1f1f1f] transition-colors duration-200 ease-out hover:bg-black/5 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-30"
+              >
+                <ChevronIcon direction="right" className="size-5" />
+              </button>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial10.propTypes = testimonial10PropTypes;
+
+export default Testimonial10;

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

@@ -0,0 +1,65 @@
+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,
+  attribution: PropTypes.string.isRequired,
+  image: imageShape,
+});
+
+export const testimonial10PropTypes = {
+  /** Main section headline. */
+  headline: PropTypes.string,
+  /** Subtitle below the headline. */
+  subtitle: PropTypes.string,
+  /** Testimonial cards. */
+  testimonials: PropTypes.arrayOf(testimonialItemShape),
+  /** Controlled active slide index. */
+  activeSlide: PropTypes.number,
+  /** Called when the active slide changes. */
+  onSlideChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const testimonial10DefaultProps = {
+  headline: "Trusted by homeowners who value excellence",
+  subtitle: "Testimonials from those who've experienced the Luxe difference",
+  testimonials: [
+    {
+      id: "mahmud-hasan",
+      quote:
+        "Verona doesn't just deliver homes, they deliver confidence. The entire process was transparent, professional, and thoughtfully handled.",
+      attribution: "— Mahmud Hasan, Downtown Miami",
+      image: {
+        src: "/testimonials/testimonial10/card-1.jpg",
+        alt: "Coastal villas overlooking the ocean",
+      },
+    },
+    {
+      id: "ayesha-rahman",
+      quote:
+        "From the first visit to the final handover, everything felt seamless. The design, quality, and attention to detail truly exceeded our expectations.",
+      attribution: "— Ayesha Rahman, San Francisco",
+      image: {
+        src: "/testimonials/testimonial10/card-2.jpg",
+        alt: "Modern red architectural building",
+      },
+    },
+    {
+      id: "fahim-chowdhury",
+      quote:
+        "What impressed us most was the balance between luxury and functionality. It genuinely feels like a place designed for living.",
+      attribution: "— Fahim Chowdhury, Downtown Miami",
+      image: {
+        src: "/testimonials/testimonial10/card-3.jpg",
+        alt: "Yellow building beside water",
+      },
+    },
+  ],
+  activeSlide: 0,
+};

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

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

package/templates/components/organisms/Testimonial11/Testimonial11.jsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial11DefaultProps,
+  testimonial11PropTypes,
+} from "./Testimonial11.propTypes";
+
+function StarIcon({ className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M7.5 0L9.183 5.527L15 5.527L10.408 8.946L12.091 14.473L7.5 11.054L2.909 14.473L4.592 8.946L0 5.527L5.817 5.527L7.5 0Z"
+        fill="#F15E22"
+      />
+    </svg>
+  );
+}
+
+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>
+  );
+}
+
+/**
+ * Testimonial11 — Sector-labelled cards with drag-style horizontal carousel.
+ *
+ * @param {object} props - See Testimonial11.propTypes.js.
+ */
+export function Testimonial11({
+  eyebrow = testimonial11DefaultProps.eyebrow,
+  headline = testimonial11DefaultProps.headline,
+  testimonials = testimonial11DefaultProps.testimonials,
+  activeSlide: controlledSlide,
+  onSlideChange,
+  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,
+    onChange: handleChange,
+  });
+
+  const activeSlide = isControlled ? controlledSlide : carouselSlide;
+
+  useEffect(() => {
+    const updateSlidesPerView = () => {
+      const width = window.innerWidth;
+      if (width >= 1536) setSlidesPerView(3);
+      else if (width >= 1024) 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-24 xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial11"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-10 lg:gap-12">
+        <div className="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
+          <header className="flex max-w-3xl flex-col gap-8 lg:gap-10">
+            <div className="flex items-center gap-2.5">
+              <StarIcon className="size-[15px] shrink-0" />
+              {eyebrow ? (
+                <p className="text-lg font-medium tracking-[-0.04em] text-black sm:text-xl">
+                  {eyebrow}
+                </p>
+              ) : null}
+            </div>
+            <h2 className="text-3xl font-medium leading-none tracking-[-0.04em] text-black sm:text-4xl md:text-5xl lg:text-[56px]">
+              {headline}
+            </h2>
+          </header>
+
+          <p
+            className="shrink-0 text-lg font-medium text-black sm:text-xl lg:text-2xl"
+            aria-live="polite"
+          >
+            {activeSlide + 1}/{testimonials.length}
+          </p>
+        </div>
+
+        <div className="relative">
+          <div className="overflow-hidden">
+            <div
+              className="flex gap-5 transition-transform duration-500 ease-out motion-reduce:transition-none lg:gap-[20px]"
+              style={{
+                transform: `translateX(-${activeSlide * (100 / slidesPerView)}%)`,
+              }}
+            >
+              {testimonials.map((item) => (
+                <article
+                  key={item.id ?? item.authorName}
+                  className="flex shrink-0 flex-col rounded-[24px] bg-white px-6 py-10 sm:rounded-[32px] sm:px-10 sm:py-12 lg:rounded-[40px] lg:px-[60px] lg:py-20"
+                  style={{ width: `calc(${100 / slidesPerView}% - ${slidesPerView > 1 ? "14px" : "0px"})` }}
+                >
+                  <div className="flex flex-col gap-8 lg:gap-20">
+                    <div className="flex flex-col gap-6 lg:gap-10">
+                      <div className="flex items-center gap-2.5">
+                        <StarIcon className="size-[15px] shrink-0" />
+                        {item.sector ? (
+                          <p className="text-base font-medium tracking-[-0.04em] text-black sm:text-lg lg:text-xl">
+                            {item.sector}
+                          </p>
+                        ) : null}
+                      </div>
+                      <p className="text-xl leading-[1.4] text-black sm:text-2xl md:text-3xl lg:text-[38px]">
+                        &ldquo;{item.quote}&rdquo;
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-4 sm:gap-5">
+                      {item.avatar ? (
+                        <div className="relative size-14 shrink-0 overflow-hidden rounded-full sm:size-16 lg: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">
+                        <p className="text-lg font-medium leading-[1.4] text-black sm:text-xl lg:text-2xl">
+                          {item.authorName}
+                        </p>
+                        {item.authorTitle ? (
+                          <p className="text-sm leading-[1.6] text-black/70 sm:text-base">
+                            {item.authorTitle}
+                          </p>
+                        ) : null}
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+
+          <div className="mt-8 flex items-center justify-between gap-4">
+            <button
+              type="button"
+              aria-label="Previous testimonial"
+              onClick={prev}
+              disabled={activeSlide === 0}
+              className="flex size-12 items-center justify-center rounded-full border border-[#f5f3f3] text-black transition-colors duration-200 ease-out hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-30 lg:size-[100px]"
+            >
+              <ChevronIcon direction="left" className="size-5 lg:size-6" />
+            </button>
+
+            <div
+              className="hidden items-center gap-1 border border-[#f5f3f3] px-3 py-1.5 font-mono text-xs font-semibold uppercase tracking-wide text-black sm:flex sm:-rotate-[15deg]"
+              aria-hidden="true"
+            >
+              <ChevronIcon direction="left" className="size-4 text-[#F15E22]" />
+              <span>Drag</span>
+              <ChevronIcon direction="right" className="size-4 text-[#F15E22]" />
+            </div>
+
+            <button
+              type="button"
+              aria-label="Next testimonial"
+              onClick={next}
+              disabled={activeSlide >= maxSlide}
+              className="flex size-12 items-center justify-center rounded-full border border-[#f5f3f3] text-black transition-colors duration-200 ease-out hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-30 lg:size-[100px]"
+            >
+              <ChevronIcon direction="right" className="size-5 lg:size-6" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial11.propTypes = testimonial11PropTypes;
+
+export default Testimonial11;

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

@@ -0,0 +1,73 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const testimonialItemShape = PropTypes.shape({
+  id: PropTypes.string,
+  sector: PropTypes.string,
+  quote: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  authorTitle: PropTypes.string,
+  avatar: imageShape,
+});
+
+export const testimonial11PropTypes = {
+  /** Small label with star icon. */
+  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,
+  className: PropTypes.string,
+};
+
+export const testimonial11DefaultProps = {
+  eyebrow: "Testimonials",
+  headline: "Trusted by our clients",
+  testimonials: [
+    {
+      id: "healthcare",
+      sector: "Healthcare Sector",
+      quote:
+        "PCS has transformed the cleanliness of our hospital. Their team is reliable, professional, and always ensures patient safety comes first.",
+      authorName: "Kelli O'Conner",
+      authorTitle: "Admin Officer, Dhaka Medical Clinic",
+      avatar: {
+        src: "/testimonials/testimonial11/avatar-1.jpg",
+        alt: "Kelli O'Conner",
+      },
+    },
+    {
+      id: "education",
+      sector: "Education Sector",
+      quote:
+        "From classrooms to campus grounds, PCS delivers consistent service. Our students and staff feel safer and happier in a clean environment.",
+      authorName: "Ms. Roman Dare",
+      authorTitle: "Principal, International School Dhaka",
+      avatar: {
+        src: "/testimonials/testimonial11/avatar-2.jpg",
+        alt: "Ms. Roman Dare",
+      },
+    },
+    {
+      id: "industrial",
+      sector: "Industrial / Garments",
+      quote:
+        "Factory floors are tough to manage, but OCS keeps them spotless and safe—boosting productivity and worker satisfaction.",
+      authorName: "Mrs. Mary Howe",
+      authorTitle: "Admin Officer, Dhaka Medical Clinic",
+      avatar: {
+        src: "/testimonials/testimonial11/avatar-3.jpg",
+        alt: "Mrs. Mary Howe",
+      },
+    },
+  ],
+  activeSlide: 0,
+};

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

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