@notionhive/testimonials 0.1.0

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

@@ -0,0 +1,90 @@
+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,
+  authorTitle: PropTypes.string,
+  image: imageShape.isRequired,
+  avatar: imageShape,
+});
+
+export const testimonial16PropTypes = {
+  headline: PropTypes.string,
+  slides: PropTypes.arrayOf(slideShape),
+  activeSlide: PropTypes.number,
+  onSlideChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const testimonial16DefaultProps = {
+  headline: "Whats our client say about us",
+  slides: [
+    {
+      id: "laura",
+      quote:
+        "Ergo Ventures played a pivotal role in modernizing our legacy systems with a seamless Odoo ERP integration. Their team was responsive, professional, and highly skilled.",
+      authorName: "Laura Mitchell",
+      authorTitle: "COO, Pacific Growth Supplies, USA",
+      image: {
+        src: "/testimonials/testimonial16/featured.jpg",
+        alt: "Two business professionals shaking hands",
+      },
+      avatar: {
+        src: "/testimonials/testimonial16/avatar.jpg",
+        alt: "Laura Mitchell",
+      },
+    },
+    {
+      id: "james",
+      quote:
+        "Their strategic guidance helped us scale operations while maintaining quality across every department.",
+      authorName: "James Porter",
+      authorTitle: "CEO, Northline Logistics",
+      image: {
+        src: "/testimonials/testimonial16/featured.jpg",
+        alt: "Business partnership",
+      },
+      avatar: {
+        src: "/testimonials/testimonial16/avatar.jpg",
+        alt: "James Porter",
+      },
+    },
+    {
+      id: "sarah",
+      quote:
+        "From discovery to deployment, the team delivered on time and exceeded our integration goals.",
+      authorName: "Sarah Nguyen",
+      authorTitle: "CTO, Brightfield Retail",
+      image: {
+        src: "/testimonials/testimonial16/featured.jpg",
+        alt: "Team collaboration",
+      },
+      avatar: {
+        src: "/testimonials/testimonial16/avatar.jpg",
+        alt: "Sarah Nguyen",
+      },
+    },
+    {
+      id: "michael",
+      quote:
+        "We saw measurable efficiency gains within the first quarter of working together.",
+      authorName: "Michael Torres",
+      authorTitle: "Operations Director, Apex Manufacturing",
+      image: {
+        src: "/testimonials/testimonial16/featured.jpg",
+        alt: "Operations review",
+      },
+      avatar: {
+        src: "/testimonials/testimonial16/avatar.jpg",
+        alt: "Michael Torres",
+      },
+    },
+  ],
+  activeSlide: 0,
+};

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

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

package/templates/components/organisms/Testimonial17/Testimonial17.jsx

@@ -0,0 +1,236 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial17DefaultProps,
+  testimonial17PropTypes,
+} from "./Testimonial17.propTypes";
+
+function DiamondIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M8 0 16 8 8 16 0 8 8 0z" />
+    </svg>
+  );
+}
+
+function StarIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M10 1.5 12.47 7.03 18.5 7.64 14 11.97 15.18 18 10 15.03 4.82 18 6 11.97 1.5 7.64 7.53 7.03 10 1.5z" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M12 4 6 10l6 6" />
+    </svg>
+  );
+}
+
+function GoogleIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>
+      <path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      />
+    </svg>
+  );
+}
+
+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;
+}
+
+/**
+ * Testimonial17 — Google-style review cards with star ratings and carousel navigation.
+ *
+ * @param {object} props - See Testimonial17.propTypes.js.
+ */
+export function Testimonial17({
+  eyebrow = testimonial17DefaultProps.eyebrow,
+  headline = testimonial17DefaultProps.headline,
+  reviews = testimonial17DefaultProps.reviews,
+  activeSlide: activeSlideProp = testimonial17DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const [perView, setPerView] = useState(3);
+  const maxIndex = Math.max(0, reviews.length - perView);
+
+  const isControlled = typeof activeSlideProp === "number";
+  const { activeSlide, goTo } = useCarousel({
+    count: maxIndex + 1,
+    initialIndex: activeSlideProp,
+    onChange: onSlideChange,
+  });
+  const current = isControlled ? activeSlideProp : activeSlide;
+
+  const setSlide = (index) => {
+    const next = Math.min(Math.max(index, 0), maxIndex);
+    if (isControlled) {
+      onSlideChange?.(next);
+    } else {
+      goTo(next);
+    }
+  };
+
+  useEffect(() => {
+    const update = () => setPerView(getCardsPerView());
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  useEffect(() => {
+    if (!isControlled) {
+      goTo(Math.min(activeSlideProp, maxIndex));
+    }
+  }, [activeSlideProp, goTo, isControlled, maxIndex]);
+
+  useEffect(() => {
+    if (!isControlled && current > maxIndex) {
+      goTo(maxIndex);
+    }
+  }, [current, goTo, isControlled, maxIndex]);
+
+  const stepPercent = 100 / perView;
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-gradient-to-b from-white to-[#f0f0f0]",
+        "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="testimonial17"
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-10 sm:gap-14 lg:gap-16">
+        <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
+          <div className="flex max-w-2xl flex-col gap-6 sm:gap-8">
+            <div className="flex items-center gap-4">
+              <DiamondIcon className="size-4 text-[#059fbb]" />
+              <p className="text-sm font-semibold uppercase tracking-[-0.01em] text-[#059fbb] sm:text-base">
+                {eyebrow}
+              </p>
+            </div>
+            <h2 className="text-3xl font-semibold uppercase leading-tight tracking-[-0.06em] text-[#0b1016] sm:text-4xl lg:text-[48px]">
+              {headline}
+            </h2>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <button
+              type="button"
+              aria-label="Previous reviews"
+              onClick={() => setSlide(current - 1)}
+              disabled={current === 0}
+              className="flex items-center rounded-full border-2 border-[#e1e1e1] p-2 text-[#0b1016]/40 transition-colors duration-200 ease-out hover:border-[#0b1016]/30 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
+            >
+              <ChevronIcon className="size-5" />
+            </button>
+            <button
+              type="button"
+              aria-label="Next reviews"
+              onClick={() => setSlide(current + 1)}
+              disabled={current >= maxIndex}
+              className="flex items-center rounded-full border-2 border-[#0b1016] p-2 text-[#0b1016] transition-colors duration-200 ease-out hover:bg-[#0b1016]/5 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <ChevronIcon className="size-5 rotate-180" />
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-hidden">
+          <div
+            className="flex gap-6 transition-transform duration-500 ease-out motion-reduce:transition-none"
+            style={{ transform: `translateX(-${current * stepPercent}%)` }}
+          >
+            {reviews.map((review) => (
+              <article
+                key={review.id ?? review.authorName}
+                className="flex w-full shrink-0 flex-col gap-6 rounded-3xl border border-white bg-white/80 p-8 sm:w-1/2 lg:w-1/3 lg:min-h-[368px]"
+              >
+                <div className="flex items-center gap-0.5 text-[#f47720]" aria-label={`${review.rating ?? 5} out of 5 stars`}>
+                  {Array.from({ length: review.rating ?? 5 }).map((_, index) => (
+                    <StarIcon key={index} className="size-5" />
+                  ))}
+                </div>
+
+                <blockquote className="flex-1 text-xl leading-snug tracking-[-0.04em] text-[#0b1016] sm:text-2xl">
+                  {review.quote}
+                </blockquote>
+
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex min-w-0 items-center gap-3.5">
+                    {review.avatar?.src ? (
+                      <div className="relative size-12 shrink-0 overflow-hidden rounded-full">
+                        <SafeImage
+                          src={review.avatar.src}
+                          alt={review.avatar.alt ?? review.authorName}
+                          fill
+                          className="object-cover object-center"
+                          sizes="48px"
+                        />
+                      </div>
+                    ) : null}
+                    <div className="min-w-0">
+                      <p className="text-lg font-semibold tracking-[-0.02em] text-[#0b1016]">
+                        {review.authorName}
+                      </p>
+                      {review.timeAgo ? (
+                        <p className="text-base text-[#4c4e51]">{review.timeAgo}</p>
+                      ) : null}
+                    </div>
+                  </div>
+
+                  {review.source === "google" ? (
+                    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-[#e1e1e1] bg-white shadow-sm">
+                      <GoogleIcon className="size-5" />
+                    </div>
+                  ) : null}
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial17.propTypes = testimonial17PropTypes;
+
+export default Testimonial17;

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

@@ -0,0 +1,98 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const reviewShape = PropTypes.shape({
+  id: PropTypes.string,
+  quote: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  timeAgo: PropTypes.string,
+  rating: PropTypes.number,
+  avatar: imageShape,
+  source: PropTypes.oneOf(["google", "none"]),
+});
+
+export const testimonial17PropTypes = {
+  eyebrow: PropTypes.string,
+  headline: PropTypes.string,
+  reviews: PropTypes.arrayOf(reviewShape),
+  activeSlide: PropTypes.number,
+  onSlideChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const testimonial17DefaultProps = {
+  eyebrow: "Common AC Problems",
+  headline: "AC Repair Customers Trust Breeze Brothers",
+  reviews: [
+    {
+      id: "james",
+      quote:
+        "Samantha arrived promptly and repaired the air conditioner without any hassle. She was friendly and left the area clean after the job.",
+      authorName: "James Allen",
+      timeAgo: "5 days ago",
+      rating: 5,
+      avatar: {
+        src: "/testimonials/testimonial17/avatar-1.jpg",
+        alt: "James Allen",
+      },
+      source: "google",
+    },
+    {
+      id: "carlos",
+      quote:
+        "Maria fixed my heating system quickly and professionally. She identified the problem right away and made sure everything was working before she left.",
+      authorName: "Carlos Mendez",
+      timeAgo: "3 days ago",
+      rating: 5,
+      avatar: {
+        src: "/testimonials/testimonial17/avatar-2.jpg",
+        alt: "Carlos Mendez",
+      },
+      source: "google",
+    },
+    {
+      id: "linda",
+      quote:
+        "Tom showed great patience explaining the options for my HVAC upgrade. His recommendations were sensible and fit my budget perfectly.",
+      authorName: "Linda Park",
+      timeAgo: "1 week ago",
+      rating: 5,
+      avatar: {
+        src: "/testimonials/testimonial17/avatar-3.jpg",
+        alt: "Linda Park",
+      },
+      source: "google",
+    },
+    {
+      id: "emma",
+      quote:
+        "Fast response and honest pricing. The technician explained everything clearly before starting the repair.",
+      authorName: "Emma Wright",
+      timeAgo: "2 weeks ago",
+      rating: 5,
+      avatar: {
+        src: "/testimonials/testimonial17/avatar-1.jpg",
+        alt: "Emma Wright",
+      },
+      source: "google",
+    },
+    {
+      id: "robert",
+      quote:
+        "Outstanding service from start to finish. Our AC has been running perfectly since the visit.",
+      authorName: "Robert Kim",
+      timeAgo: "3 weeks ago",
+      rating: 5,
+      avatar: {
+        src: "/testimonials/testimonial17/avatar-2.jpg",
+        alt: "Robert Kim",
+      },
+      source: "google",
+    },
+  ],
+  activeSlide: 0,
+};

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

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