@notionhive/testimonials 0.1.0

package/templates/components/organisms/Testimonial01/Testimonial01.jsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial01DefaultProps,
+  testimonial01PropTypes,
+} from "./Testimonial01.propTypes";
+
+function getCardsPerView() {
+  if (typeof window === "undefined") return 3;
+  if (window.matchMedia("(min-width: 1024px)").matches) return 3;
+  if (window.matchMedia("(min-width: 640px)").matches) return 2;
+  return 1;
+}
+
+/**
+ * Testimonial01 — PASHA Group client quotes with company logos and progress bar.
+ *
+ * @param {object} props - See Testimonial01.propTypes.js.
+ */
+export function Testimonial01({
+  eyebrow = testimonial01DefaultProps.eyebrow,
+  headline = testimonial01DefaultProps.headline,
+  testimonials = testimonial01DefaultProps.testimonials,
+  activeSlide: activeSlideProp = testimonial01DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const [perView, setPerView] = useState(3);
+  const maxIndex = Math.max(0, testimonials.length - perView);
+  const { activeSlide, goTo } = useCarousel({
+    count: maxIndex + 1,
+    initialIndex: activeSlideProp,
+    onChange: onSlideChange,
+  });
+
+  useEffect(() => {
+    const update = () => setPerView(getCardsPerView());
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  useEffect(() => {
+    goTo(Math.min(activeSlideProp, maxIndex));
+  }, [activeSlideProp, goTo, maxIndex]);
+
+  useEffect(() => {
+    if (activeSlide > maxIndex) goTo(maxIndex);
+  }, [activeSlide, goTo, maxIndex]);
+
+  const stepPercent = 100 / perView;
+  const pageCount = maxIndex + 1;
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-[#f9f9f9]",
+        "px-4 py-12 sm:px-6 sm:py-16 md:px-10 lg:px-20 lg:py-[120px] xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial01"
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-10 sm:gap-14 lg:gap-[60px]">
+        <header className="flex flex-col gap-2.5 uppercase">
+          <p className="font-mono text-sm font-semibold leading-6 text-black sm:text-base">
+            {eyebrow}
+          </p>
+          <h2 className="text-3xl font-medium leading-tight tracking-[-0.02em] text-black sm:text-4xl lg:text-[48px] lg:leading-[54px]">
+            {headline}
+          </h2>
+        </header>
+
+        <div className="overflow-hidden">
+          <div
+            className="flex gap-1 transition-transform duration-500 ease-out motion-reduce:transition-none"
+            style={{ transform: `translateX(-${activeSlide * stepPercent}%)` }}
+          >
+            {testimonials.map((item) => (
+              <article
+                key={item.id ?? item.authorName}
+                className="flex w-full shrink-0 flex-col justify-between bg-white p-6 sm:w-1/2 sm:p-8 lg:min-h-[610px] lg:w-1/3 lg:p-10"
+              >
+                <div className="flex flex-col gap-10 sm:gap-16 lg:gap-20">
+                  {item.companyLogo?.src ? (
+                    <div className="relative h-16 w-[178px] shrink-0">
+                      <SafeImage
+                        src={item.companyLogo.src}
+                        alt={item.companyLogo.alt ?? ""}
+                        fill
+                        className="object-contain object-left object-bottom"
+                        sizes="178px"
+                      />
+                    </div>
+                  ) : null}
+                  <blockquote className="text-xl leading-[1.4] text-black sm:text-2xl lg:text-[28px]">
+                    &ldquo;{item.quote}&rdquo;
+                  </blockquote>
+                </div>
+
+                <div className="mt-8 flex items-center gap-[15px]">
+                  {item.avatar?.src ? (
+                    <div className="relative size-14 shrink-0 overflow-hidden rounded-full border border-black/10">
+                      <SafeImage
+                        src={item.avatar.src}
+                        alt={item.avatar.alt ?? item.authorName}
+                        fill
+                        className="object-cover object-center"
+                        sizes="56px"
+                      />
+                    </div>
+                  ) : null}
+                  <div className="min-w-0">
+                    <p className="text-lg leading-tight text-black sm:text-2xl">
+                      {item.authorName}
+                    </p>
+                    {item.authorCompany ? (
+                      <p className="mt-1 text-sm leading-snug text-black/60">
+                        {item.authorCompany}
+                      </p>
+                    ) : null}
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+
+        {pageCount > 1 ? (
+          <div
+            className="relative h-px w-full bg-black/10"
+            role="tablist"
+            aria-label="Testimonial slides"
+          >
+            <div
+              className="absolute left-0 top-0 h-full bg-black transition-all duration-500 ease-out motion-reduce:transition-none"
+              style={{
+                width: `${100 / pageCount}%`,
+                transform: `translateX(${activeSlide * 100}%)`,
+              }}
+            />
+            {Array.from({ length: pageCount }).map((_, index) => (
+              <button
+                key={index}
+                type="button"
+                role="tab"
+                aria-selected={index === activeSlide}
+                aria-label={`Go to slide ${index + 1}`}
+                onClick={() => goTo(index)}
+                className="absolute top-0 h-full transition-opacity duration-200 hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+                style={{
+                  left: `${(index / pageCount) * 100}%`,
+                  width: `${100 / pageCount}%`,
+                }}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+Testimonial01.propTypes = testimonial01PropTypes;
+
+export default Testimonial01;

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

@@ -0,0 +1,82 @@
+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,
+  authorCompany: PropTypes.string,
+  avatar: imageShape,
+  companyLogo: imageShape,
+});
+
+export const testimonial01PropTypes = {
+  /** 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,
+  className: PropTypes.string,
+};
+
+export const testimonial01DefaultProps = {
+  eyebrow: "Testimonial",
+  headline: "What Our Clients Say",
+  testimonials: [
+    {
+      id: "marcus-boyer",
+      quote:
+        "PASHA Group's electrical solutions deliver exactly what they promise — durable, reliable, and built to industrial standards. Their team has always been responsive and supportive from inquiry to delivery.",
+      authorName: "Marcus Boyer",
+      authorCompany: "Dhaka Electric Supply Company Limited (DESCO)",
+      avatar: {
+        src: "/testimonials/testimonial01/avatar-marcus.jpg",
+        alt: "Marcus Boyer",
+      },
+      companyLogo: {
+        src: "/testimonials/testimonial01/desco-logo.png",
+        alt: "DESCO logo",
+      },
+    },
+    {
+      id: "wilma-parker",
+      quote:
+        "We have partnered with PASHA Group on several infrastructure projects. Their products and service quality consistently exceed our expectations and help us meet project deadlines.",
+      authorName: "Wilma Parker",
+      authorCompany: "Dhaka Electric Supply Company Limited (DESCO)",
+      avatar: {
+        src: "/testimonials/testimonial01/avatar-wilma.jpg",
+        alt: "Wilma Parker",
+      },
+      companyLogo: {
+        src: "/testimonials/testimonial01/company-logo-icon.png",
+        alt: "DESCO icon",
+      },
+    },
+    {
+      id: "brooke-schmidt",
+      quote:
+        "PASHA Group's electrical solutions deliver exactly what they promise — durable, reliable, and built to industrial standards. Their team has always been responsive and supportive from inquiry to delivery.",
+      authorName: "Ms. Brooke Schmidt",
+      authorCompany: "Dhaka Electric Supply Company Limited (DESCO)",
+      avatar: {
+        src: "/testimonials/testimonial01/avatar-marcus.jpg",
+        alt: "Ms. Brooke Schmidt",
+      },
+      companyLogo: {
+        src: "/testimonials/testimonial01/desco-logo.png",
+        alt: "DESCO logo",
+      },
+    },
+  ],
+  activeSlide: 0,
+};

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

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

package/templates/components/organisms/Testimonial02/Testimonial02.jsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial02DefaultProps,
+  testimonial02PropTypes,
+} from "./Testimonial02.propTypes";
+
+function getCardsPerView() {
+  if (typeof window === "undefined") return 3;
+  if (window.matchMedia("(min-width: 1024px)").matches) return 3;
+  if (window.matchMedia("(min-width: 640px)").matches) return 2;
+  return 1;
+}
+
+function ChevronIcon({ className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M9 6l6 6-6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function NavButton({ direction, onClick, disabled }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={direction === "prev" ? "Previous testimonial" : "Next testimonial"}
+      className={[
+        "flex items-center justify-center rounded-full border border-[#343744] px-8 py-3",
+        "transition-opacity duration-200 ease-out hover:opacity-80",
+        "focus-visible:outline-2 focus-visible:outline-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        direction === "prev" ? "opacity-70" : "",
+      ].join(" ")}
+    >
+      <ChevronIcon
+        className={[
+          "size-6 text-white",
+          direction === "prev" ? "rotate-180" : "",
+        ].join(" ")}
+      />
+    </button>
+  );
+}
+
+/**
+ * Testimonial02 — Platform One dark hero with light quote cards and arrow navigation.
+ *
+ * @param {object} props - See Testimonial02.propTypes.js.
+ */
+export function Testimonial02({
+  eyebrow = testimonial02DefaultProps.eyebrow,
+  headline = testimonial02DefaultProps.headline,
+  backgroundImage = testimonial02DefaultProps.backgroundImage,
+  testimonials = testimonial02DefaultProps.testimonials,
+  activeSlide: activeSlideProp = testimonial02DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const [perView, setPerView] = useState(3);
+  const maxIndex = Math.max(0, testimonials.length - perView);
+  const { activeSlide, goTo, next, prev } = useCarousel({
+    count: maxIndex + 1,
+    initialIndex: activeSlideProp,
+    onChange: onSlideChange,
+  });
+
+  useEffect(() => {
+    const update = () => setPerView(getCardsPerView());
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  useEffect(() => {
+    goTo(Math.min(activeSlideProp, maxIndex));
+  }, [activeSlideProp, goTo, maxIndex]);
+
+  const stepPercent = 100 / perView;
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-[#020617]",
+        "px-4 py-16 sm:px-6 sm:py-20 md:px-10 lg:px-20 lg:py-[160px] xl:px-[80px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial02"
+    >
+      {backgroundImage?.src ? (
+        <div
+          className="pointer-events-none absolute inset-0 overflow-hidden"
+          aria-hidden="true"
+        >
+          <SafeImage
+            src={backgroundImage.src}
+            alt=""
+            fill
+            className="object-cover object-center opacity-80"
+            sizes="100vw"
+          />
+        </div>
+      ) : null}
+
+      <div className="relative mx-auto flex w-full max-w-[1600px] flex-col gap-12 lg:gap-[120px]">
+        <header className="max-w-3xl">
+          <p className="text-lg leading-[1.3] text-white sm:text-xl">
+            {eyebrow}
+          </p>
+          <h2 className="mt-2.5 text-3xl leading-[1.1] tracking-[-0.02em] text-white sm:text-4xl md:text-5xl lg:text-[70px]">
+            {headline}
+          </h2>
+        </header>
+
+        <div className="flex flex-col gap-10 lg:gap-[90px]">
+          <div className="overflow-hidden">
+            <div
+              className="flex gap-4 transition-transform duration-500 ease-out motion-reduce:transition-none"
+              style={{ transform: `translateX(-${activeSlide * stepPercent}%)` }}
+            >
+              {testimonials.map((item) => (
+                <article
+                  key={item.id ?? item.authorName}
+                  className={[
+                    "flex w-full shrink-0 flex-col justify-between rounded-2xl bg-[#f9fcff] p-6 sm:w-[calc(50%-8px)] sm:p-8",
+                    "lg:h-[436px] lg:w-[523px] lg:max-w-[523px] lg:p-10",
+                  ].join(" ")}
+                >
+                  <blockquote className="text-lg leading-[1.2] text-[#020617] sm:text-xl lg:text-2xl">
+                    &ldquo;{item.quote}&rdquo;
+                  </blockquote>
+
+                  <div className="mt-8 flex items-center gap-5">
+                    {item.avatar?.src ? (
+                      <div className="relative size-24 shrink-0 overflow-hidden rounded-full sm:size-32 lg:size-[160px]">
+                        <SafeImage
+                          src={item.avatar.src}
+                          alt={item.avatar.alt ?? item.authorName}
+                          fill
+                          className="object-cover object-center transition-transform duration-300 ease-out motion-reduce:transition-none"
+                          sizes="160px"
+                        />
+                      </div>
+                    ) : null}
+                    <div className="min-w-0">
+                      <p className="text-lg font-medium leading-[1.2] tracking-[-0.02em] text-[#020617] sm:text-xl lg:text-2xl">
+                        {item.authorName}
+                      </p>
+                      {item.authorRole ? (
+                        <p className="mt-2 text-sm leading-[1.2] tracking-wide text-[#343744] sm:text-base">
+                          {item.authorRole}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-end gap-2">
+            <NavButton
+              direction="prev"
+              onClick={prev}
+              disabled={activeSlide === 0}
+            />
+            <NavButton
+              direction="next"
+              onClick={next}
+              disabled={activeSlide >= maxIndex}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial02.propTypes = testimonial02PropTypes;
+
+export default Testimonial02;

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

@@ -0,0 +1,75 @@
+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 testimonial02PropTypes = {
+  /** Small label above the headline. */
+  eyebrow: PropTypes.string,
+  /** Section headline. */
+  headline: PropTypes.string,
+  /** Decorative background image behind the header area. */
+  backgroundImage: imageShape,
+  /** 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 testimonial02DefaultProps = {
+  eyebrow: "Testimonials",
+  headline: "What Experience-Led Growth Looks Like",
+  backgroundImage: {
+    src: "/testimonials/testimonial02/bg-gradient.png",
+    alt: "",
+  },
+  testimonials: [
+    {
+      id: "marie-towne",
+      quote:
+        "What stood out was the partnership. The Platform One team didn't just sell us software—they co-designed our program and stayed with us throughout.",
+      authorName: "Marie Towne",
+      authorRole: "CX Lead, EcoPower",
+      avatar: {
+        src: "/testimonials/testimonial02/avatar-marie.jpg",
+        alt: "Marie Towne",
+      },
+    },
+    {
+      id: "julia-tan",
+      quote:
+        "Platform One helped us build an always-on CX program that actually works. We went from scattered feedback to real-time visibility—across every touchpoint.",
+      authorName: "Julia Tan",
+      authorRole: "Head of Customer Strategy, RetailCo",
+      avatar: {
+        src: "/testimonials/testimonial02/avatar-julia.jpg",
+        alt: "Julia Tan",
+      },
+    },
+    {
+      id: "mark-evans",
+      quote:
+        "The ability to connect employee and customer experience on one platform gave us clarity we didn't know we needed.",
+      authorName: "Mark Evans",
+      authorRole: "Director of Experience, Axis Finance",
+      avatar: {
+        src: "/testimonials/testimonial02/avatar-mark.jpg",
+        alt: "Mark Evans",
+      },
+    },
+  ],
+  activeSlide: 0,
+};

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

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