@notionhive/testimonials 0.1.0

package/templates/components/organisms/Testimonial03/Testimonial03.jsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial03DefaultProps,
+  testimonial03PropTypes,
+} from "./Testimonial03.propTypes";
+
+function getCardsPerView() {
+  if (typeof window === "undefined") return 2;
+  if (window.matchMedia("(min-width: 1024px)").matches) return 2;
+  return 1;
+}
+
+function ArrowIcon({ direction, className = "" }) {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d={direction === "prev" ? "M12 5l-5 5 5 5" : "M8 5l5 5-5 5"}
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function NavButton({ direction, onClick, disabled, active }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={direction === "prev" ? "Previous testimonial" : "Next testimonial"}
+      className={[
+        "flex size-10 items-center justify-center rounded-full border transition-colors duration-200 ease-out",
+        "focus-visible:outline-2 focus-visible:outline-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        active
+          ? "border-white/20 bg-white/30 text-white hover:bg-white/40"
+          : "border-white/20 bg-transparent text-white hover:bg-white/10",
+      ].join(" ")}
+    >
+      <ArrowIcon direction={direction} className="size-5" />
+    </button>
+  );
+}
+
+/**
+ * Testimonial03 — Axentec dark glassmorphism testimonial carousel with globe backdrop.
+ *
+ * @param {object} props - See Testimonial03.propTypes.js.
+ */
+export function Testimonial03({
+  eyebrow = testimonial03DefaultProps.eyebrow,
+  headline = testimonial03DefaultProps.headline,
+  description = testimonial03DefaultProps.description,
+  backgroundImage = testimonial03DefaultProps.backgroundImage,
+  testimonials = testimonial03DefaultProps.testimonials,
+  activeSlide: activeSlideProp = testimonial03DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const [perView, setPerView] = useState(2);
+  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-[#221e1f]",
+        "px-4 py-16 sm:px-6 sm:py-20 md:px-10 lg:px-[70px] lg:py-24 xl:px-[70px]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial03"
+    >
+      {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-30 mix-blend-lighten"
+            sizes="100vw"
+          />
+        </div>
+      ) : null}
+
+      <div className="relative mx-auto flex w-full max-w-[1300px] flex-col gap-10 lg:gap-16">
+        <div className="flex flex-col gap-5 text-[#fffeff] lg:max-w-xl">
+          <div>
+            <p className="text-base font-medium tracking-[-0.02em] sm:text-lg">
+              {eyebrow}
+            </p>
+            <h2 className="text-3xl font-semibold leading-tight tracking-[-0.02em] sm:text-4xl lg:text-[56px] lg:leading-[70px]">
+              {headline}
+            </h2>
+          </div>
+          {description ? (
+            <p className="text-base leading-relaxed sm:text-lg lg:leading-[30px]">
+              {description}
+            </p>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <div className="flex justify-end gap-1">
+            <NavButton
+              direction="prev"
+              onClick={prev}
+              disabled={activeSlide === 0}
+              active={false}
+            />
+            <NavButton
+              direction="next"
+              onClick={next}
+              disabled={activeSlide >= maxIndex}
+              active
+            />
+          </div>
+
+          <div className="overflow-hidden">
+            <div
+              className="flex gap-5 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-center rounded-[20px] border border-[#221e1f] p-5 backdrop-blur-sm sm:p-6",
+                    "bg-gradient-to-br from-[rgba(34,30,31,0.2)] to-[rgba(93,93,97,0.2)]",
+                    perView === 2 ? "lg:w-1/2" : "",
+                  ].join(" ")}
+                >
+                  <div className="flex flex-col gap-10 lg:gap-[74px]">
+                    <blockquote className="text-base leading-[30px] text-[#fffeff]/70 sm:text-lg">
+                      {item.quote}
+                    </blockquote>
+
+                    <div className="flex items-center gap-4">
+                      {item.avatar?.src ? (
+                        <div className="relative size-11 shrink-0 overflow-hidden rounded-full sm:size-[46px]">
+                          <SafeImage
+                            src={item.avatar.src}
+                            alt={item.avatar.alt ?? item.authorName}
+                            fill
+                            className="object-cover object-center"
+                            sizes="46px"
+                          />
+                        </div>
+                      ) : null}
+                      <div className="min-w-0">
+                        <p className="text-base text-[#fffeff] sm:text-lg">
+                          {item.authorName}
+                        </p>
+                        {item.authorRole ? (
+                          <p className="text-sm text-white/60 sm:text-base">
+                            {item.authorRole}
+                          </p>
+                        ) : null}
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial03.propTypes = testimonial03PropTypes;
+
+export default Testimonial03;

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

@@ -0,0 +1,90 @@
+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 testimonial03PropTypes = {
+  /** Small label above the headline. */
+  eyebrow: PropTypes.string,
+  /** Section headline. */
+  headline: PropTypes.string,
+  /** Supporting description below the headline. */
+  description: PropTypes.string,
+  /** Decorative globe background image. */
+  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 testimonial03DefaultProps = {
+  eyebrow: "Success Stories from",
+  headline: "Our Valued Clients",
+  description:
+    "Hear directly from our clients about the impact of our secure cloud, server management, and data security services.",
+  backgroundImage: {
+    src: "/testimonials/testimonial03/globe-bg.png",
+    alt: "",
+  },
+  testimonials: [
+    {
+      id: "david-lee-1",
+      quote:
+        "The custom solutions provided by Axentec have significantly improved our workflow efficiency and customer service capabilities. Their approach to problem-solving and dedication to excellence has greatly benefited our organization.",
+      authorName: "David Lee,",
+      authorRole: "Director of IT, Healthcare Trust",
+      avatar: {
+        src: "/testimonials/testimonial03/avatar-david.jpg",
+        alt: "David Lee",
+      },
+    },
+    {
+      id: "david-lee-2",
+      quote:
+        "The custom solutions provided by Axentec have significantly improved our workflow efficiency and customer service capabilities. Their approach to problem-solving and dedication to excellence has greatly benefited our organization.",
+      authorName: "David Lee,",
+      authorRole: "Director of IT, Healthcare Trust",
+      avatar: {
+        src: "/testimonials/testimonial03/avatar-david.jpg",
+        alt: "David Lee",
+      },
+    },
+    {
+      id: "david-lee-3",
+      quote:
+        "The custom solutions provided by Axentec have significantly improved our workflow efficiency and customer service capabilities. Their approach to problem-solving and dedication to excellence has greatly benefited our organization.",
+      authorName: "David Lee,",
+      authorRole: "Director of IT, Healthcare Trust",
+      avatar: {
+        src: "/testimonials/testimonial03/avatar-david.jpg",
+        alt: "David Lee",
+      },
+    },
+    {
+      id: "david-lee-4",
+      quote:
+        "The custom solutions provided by Axentec have significantly improved our workflow efficiency and customer service capabilities. Their approach to problem-solving and dedication to excellence has greatly benefited our organization.",
+      authorName: "David Lee,",
+      authorRole: "Director of IT, Healthcare Trust",
+      avatar: {
+        src: "/testimonials/testimonial03/avatar-david.jpg",
+        alt: "David Lee",
+      },
+    },
+  ],
+  activeSlide: 0,
+};

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

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

package/templates/components/organisms/Testimonial04/Testimonial04.jsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  testimonial04DefaultProps,
+  testimonial04PropTypes,
+} from "./Testimonial04.propTypes";
+
+function StarIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 22 12 18.27 5.8 22l1.2-7.86-5-4.87 7.1-1.01L12 2z" />
+    </svg>
+  );
+}
+
+function ArrowIcon({ direction, className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      {direction === "prev" ? (
+        <>
+          <path
+            d="M15 6l-6 6 6 6"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9 12h10"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          />
+        </>
+      ) : (
+        <>
+          <path
+            d="M9 6l6 6-6 6"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5 12h10"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          />
+        </>
+      )}
+    </svg>
+  );
+}
+
+function NavButton({ direction, onClick, disabled, active }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={direction === "prev" ? "Previous review" : "Next review"}
+      className={[
+        "flex items-center justify-center rounded-full border p-3 transition-colors duration-200 ease-out",
+        "focus-visible:outline-2 focus-visible:outline-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        active
+          ? "border-[#e31d4a] text-[#e31d4a] hover:bg-[#e31d4a]/5"
+          : "border-[#f5c2ce] text-[#f5c2ce] hover:bg-[#f5c2ce]/10",
+      ].join(" ")}
+    >
+      <ArrowIcon direction={direction} className="size-6" />
+    </button>
+  );
+}
+
+function CardWave({ className = "" }) {
+  return (
+    <div
+      className={["pointer-events-none absolute rounded-full opacity-20", className].join(" ")}
+      aria-hidden="true"
+      style={{
+        background:
+          "radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%)",
+      }}
+    />
+  );
+}
+
+/**
+ * Testimonial04 — Travel review cards with star ratings and teal gradient panels.
+ *
+ * @param {object} props - See Testimonial04.propTypes.js.
+ */
+export function Testimonial04({
+  headline = testimonial04DefaultProps.headline,
+  testimonials = testimonial04DefaultProps.testimonials,
+  activeSlide: activeSlideProp = testimonial04DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const trackRef = useRef(null);
+  const [slideOffsets, setSlideOffsets] = useState([0]);
+  const maxIndex = Math.max(0, testimonials.length - 1);
+  const { activeSlide, goTo, next, prev } = useCarousel({
+    count: testimonials.length,
+    initialIndex: activeSlideProp,
+    onChange: onSlideChange,
+  });
+
+  useEffect(() => {
+    goTo(Math.min(activeSlideProp, maxIndex));
+  }, [activeSlideProp, goTo, maxIndex]);
+
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    if (!track) return undefined;
+
+    const measure = () => {
+      const cards = track.querySelectorAll("[data-carousel-card]");
+      const offsets = Array.from(cards).map((card) => card.offsetLeft);
+      setSlideOffsets(offsets.length ? offsets : [0]);
+    };
+
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [testimonials.length]);
+
+  return (
+    <section
+      className={[
+        "relative w-full overflow-hidden bg-[#fdf9f6]",
+        "px-4 py-12 sm:px-6 sm:py-16 md:px-10 lg:px-10 lg:py-20",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-testimonial="testimonial04"
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8 lg:gap-10">
+        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-end">
+          <h2 className="text-2xl font-bold leading-tight text-[#18191a] sm:text-3xl lg:text-[34px] lg:leading-10">
+            {headline}
+          </h2>
+          <div className="flex shrink-0 items-center gap-2">
+            <NavButton
+              direction="prev"
+              onClick={prev}
+              disabled={activeSlide === 0}
+              active={false}
+            />
+            <NavButton
+              direction="next"
+              onClick={next}
+              disabled={activeSlide >= maxIndex}
+              active
+            />
+          </div>
+        </div>
+
+        <div className="overflow-hidden">
+          <div
+            ref={trackRef}
+            data-carousel-track
+            className="flex w-max gap-3 transition-transform duration-500 ease-out motion-reduce:transition-none"
+            style={{ transform: `translateX(-${slideOffsets[activeSlide] ?? 0}px)` }}
+          >
+            {testimonials.map((item) => (
+              <article
+                key={item.id ?? item.authorName}
+                data-carousel-card
+                className={[
+                  "relative flex shrink-0 flex-col overflow-hidden rounded-[40px] bg-[#1a8b8d] text-white",
+                  item.variant === "narrow"
+                    ? "h-[380px] w-[min(85vw,385px)] sm:h-[421px]"
+                    : "h-[400px] w-[min(90vw,540px)] sm:h-[422px]",
+                ].join(" ")}
+              >
+                <CardWave className="-right-16 -top-32 size-72 sm:size-96" />
+                <CardWave className="bottom-0 left-1/2 size-80 -translate-x-1/2 sm:size-[28rem]" />
+
+                <div className="relative flex flex-1 flex-col items-center justify-between gap-6 px-6 py-10 sm:px-8 sm:py-14 lg:px-14">
+                  <div className="flex w-full flex-col items-center gap-4 text-center">
+                    {item.rating ? (
+                      <div className="flex items-center gap-1.5" aria-label={`${item.rating} out of 5 stars`}>
+                        {Array.from({ length: item.rating }).map((_, i) => (
+                          <StarIcon key={i} className="size-5 text-white sm:size-6" />
+                        ))}
+                      </div>
+                    ) : null}
+
+                    <div className="flex w-full flex-col gap-4">
+                      {item.title ? (
+                        <h3 className="text-xl font-bold leading-8 sm:text-2xl">
+                          {item.title}
+                        </h3>
+                      ) : null}
+                      {item.quote ? (
+                        <p className="text-sm leading-6 sm:text-base">
+                          &ldquo;{item.quote}&rdquo;
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+
+                  <hr className="w-full border-white/30" />
+
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    {item.avatar?.src ? (
+                      <div className="relative size-12 overflow-hidden rounded-full">
+                        <SafeImage
+                          src={item.avatar.src}
+                          alt={item.avatar.alt ?? item.authorName}
+                          fill
+                          className="object-cover object-center"
+                          sizes="48px"
+                        />
+                      </div>
+                    ) : null}
+                    <p className="text-sm font-semibold leading-5">{item.authorName}</p>
+                    {item.dateLabel ? (
+                      <p className="text-sm leading-5 text-white/90">{item.dateLabel}</p>
+                    ) : null}
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Testimonial04.propTypes = testimonial04PropTypes;
+
+export default Testimonial04;

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

@@ -0,0 +1,81 @@
+import PropTypes from "prop-types";
+
+const imageShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+const testimonialItemShape = PropTypes.shape({
+  id: PropTypes.string,
+  /** Short headline above the quote. */
+  title: PropTypes.string,
+  quote: PropTypes.string,
+  authorName: PropTypes.string.isRequired,
+  /** e.g. "6 Months 2 weeks ago". */
+  dateLabel: PropTypes.string,
+  /** Star rating 1–5. */
+  rating: PropTypes.number,
+  avatar: imageShape,
+  /** Card width variant — "wide" or "narrow". */
+  variant: PropTypes.oneOf(["wide", "narrow"]),
+});
+
+export const testimonial04PropTypes = {
+  /** 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 testimonial04DefaultProps = {
+  headline: "What Our Travelers Say",
+  testimonials: [
+    {
+      id: "carlos-tokyo",
+      title: "The Best Way to See Tokyo",
+      quote:
+        "The Hokkaido nature tour was breathtaking. Our guide knew everything about the area and made the experience so special.",
+      authorName: "Carlos P. Traveled to Tokyo",
+      dateLabel: "6 Months 2 weeks ago",
+      rating: 5,
+      variant: "wide",
+      avatar: {
+        src: "/testimonials/testimonial04/avatar-carlos.jpg",
+        alt: "Carlos P.",
+      },
+    },
+    {
+      id: "sabbir-hiroshima",
+      title: "Amazing guide! We saw hidden spots we'd never find ourselves.",
+      quote: "",
+      authorName: "Sabbir H. Traveled to Hiroshima",
+      dateLabel: "2 weeks ago",
+      rating: 5,
+      variant: "narrow",
+      avatar: {
+        src: "/testimonials/testimonial04/avatar-sabbir.jpg",
+        alt: "Sabbir H.",
+      },
+    },
+    {
+      id: "john-tokyo",
+      title: 'A Truly Unforgettable Experience!"',
+      quote:
+        "Our guide took us to places we never would have found. From hidden street food spots to quiet temples Highly recommended!",
+      authorName: "John K. Traveled to Tokyo",
+      dateLabel: "6 Months 2 weeks ago",
+      rating: 5,
+      variant: "wide",
+      avatar: {
+        src: "/testimonials/testimonial04/avatar-john.jpg",
+        alt: "John K.",
+      },
+    },
+  ],
+  activeSlide: 0,
+};

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

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