blocks-dusted 0.1.0

package/templates/blocks/DD-StackCards/Component.tsx

@@ -0,0 +1,496 @@
+"use client";
+
+import React, { useLayoutEffect, useRef, useState } from "react";
+import Image from "next/image";
+import * as LucideIcons from "lucide-react";
+import { ArrowRight } from "lucide-react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+type Media = { url?: string | null; alt?: string | null; [key: string]: any };
+
+import RichText from "@/components/RichText";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+const ACCENTS = {
+  lime: { hex: "#84cc16", rgb: "132,204,22" },
+  purple: { hex: "#9803e2", rgb: "152,3,226" },
+} as const;
+
+type AccentVariant = keyof typeof ACCENTS;
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+function DynamicIcon({
+  name,
+  size = 22,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, "name">) {
+  if (!name) return null;
+
+  const Icon = (
+    LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>
+  )[name];
+
+  if (!Icon) return null;
+
+  return <Icon size={size} {...props} />;
+}
+
+interface TagItem {
+  id?: string | null;
+  tag: string;
+}
+
+interface CardItem {
+  id?: string | null;
+  iconName?: string | null;
+  number?: string | null;
+  title?: string | null;
+  content?: unknown;
+  statValue?: string | null;
+  statLabel?: string | null;
+  tags?: TagItem[] | null;
+  ctaLabel?: string | null;
+  ctaHref?: string | null;
+  accentVariant?: AccentVariant | null;
+  image?: Media | string | null;
+}
+
+interface DDStackCardsProps {
+  cards?: CardItem[] | null;
+
+  cardOffset?: number | null;
+  initialStickyTop?: number | null;
+  depthZ?: number | null;
+  scaleStep?: number | null;
+
+  cardOffsetTablet?: number | null;
+  initialStickyTopTablet?: number | null;
+  depthZTablet?: number | null;
+  scaleStepTablet?: number | null;
+
+  cardOffsetMobile?: number | null;
+  initialStickyTopMobile?: number | null;
+  depthZMobile?: number | null;
+  scaleStepMobile?: number | null;
+
+  sectionId?: string | null;
+  [key: string]: unknown;
+}
+
+type ResponsiveStackValues = {
+  cardOffset: number;
+  initialStickyTop: number;
+  depthZ: number;
+  scaleStep: number;
+};
+
+function getResponsiveStackValues({
+  cardOffset,
+  initialStickyTop,
+  depthZ,
+  scaleStep,
+  cardOffsetTablet,
+  initialStickyTopTablet,
+  depthZTablet,
+  scaleStepTablet,
+  cardOffsetMobile,
+  initialStickyTopMobile,
+  depthZMobile,
+  scaleStepMobile,
+}: DDStackCardsProps): ResponsiveStackValues {
+  const desktopValues = {
+    cardOffset: typeof cardOffset === "number" ? cardOffset : 14,
+    initialStickyTop:
+      typeof initialStickyTop === "number" ? initialStickyTop : 0,
+    depthZ: typeof depthZ === "number" ? depthZ : 40,
+    scaleStep: typeof scaleStep === "number" ? scaleStep : 0.18,
+  };
+
+  if (typeof window === "undefined") return desktopValues;
+
+  const tabletValues = {
+    cardOffset:
+      typeof cardOffsetTablet === "number"
+        ? cardOffsetTablet
+        : Math.max(8, desktopValues.cardOffset * 0.75),
+    initialStickyTop:
+      typeof initialStickyTopTablet === "number"
+        ? initialStickyTopTablet
+        : desktopValues.initialStickyTop,
+    depthZ:
+      typeof depthZTablet === "number"
+        ? depthZTablet
+        : Math.max(16, desktopValues.depthZ * 0.65),
+    scaleStep:
+      typeof scaleStepTablet === "number"
+        ? scaleStepTablet
+        : Math.min(desktopValues.scaleStep, 0.08),
+  };
+
+  const mobileValues = {
+    cardOffset:
+      typeof cardOffsetMobile === "number"
+        ? cardOffsetMobile
+        : Math.max(6, desktopValues.cardOffset * 0.5),
+    initialStickyTop:
+      typeof initialStickyTopMobile === "number"
+        ? initialStickyTopMobile
+        : desktopValues.initialStickyTop,
+    depthZ:
+      typeof depthZMobile === "number"
+        ? depthZMobile
+        : Math.max(8, desktopValues.depthZ * 0.35),
+    scaleStep:
+      typeof scaleStepMobile === "number"
+        ? scaleStepMobile
+        : Math.min(desktopValues.scaleStep, 0.045),
+  };
+
+  if (window.matchMedia("(max-width: 767px)").matches) return mobileValues;
+  if (window.matchMedia("(max-width: 1023px)").matches) return tabletValues;
+
+  return desktopValues;
+}
+
+export function DDStackCards(props: DDStackCardsProps) {
+  const { cards, sectionId } = props;
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const cardRefs = useRef<(HTMLElement | null)[]>([]);
+  const [layoutValues, setLayoutValues] = useState<ResponsiveStackValues>(
+    () => ({
+      cardOffset: typeof props.cardOffset === "number" ? props.cardOffset : 14,
+      initialStickyTop:
+        typeof props.initialStickyTop === "number" ? props.initialStickyTop : 0,
+      depthZ: typeof props.depthZ === "number" ? props.depthZ : 40,
+      scaleStep: typeof props.scaleStep === "number" ? props.scaleStep : 0.18,
+    }),
+  );
+
+  useLayoutEffect(() => {
+    const updateValues = () => {
+      setLayoutValues(getResponsiveStackValues(props));
+    };
+
+    updateValues();
+
+    window.addEventListener("resize", updateValues);
+
+    return () => {
+      window.removeEventListener("resize", updateValues);
+    };
+  }, [
+    props.cardOffset,
+    props.initialStickyTop,
+    props.depthZ,
+    props.scaleStep,
+    props.cardOffsetTablet,
+    props.initialStickyTopTablet,
+    props.depthZTablet,
+    props.scaleStepTablet,
+    props.cardOffsetMobile,
+    props.initialStickyTopMobile,
+    props.depthZMobile,
+    props.scaleStepMobile,
+  ]);
+
+  useLayoutEffect(() => {
+    const timer = window.setTimeout(() => {
+      const wrapper = wrapperRef.current;
+      const cardEls = cardRefs.current.filter(Boolean) as HTMLDivElement[];
+
+      if (!wrapper || !cardEls.length) return;
+
+      const ctx = gsap.context(() => {
+        gsap.set(wrapper, {
+          autoAlpha: 1,
+          willChange: "opacity",
+        });
+
+        gsap.set(cardEls, {
+          transformPerspective: 1200,
+          transformOrigin: "top center",
+        });
+
+        cardEls.forEach((card, i) => {
+          for (let j = i + 1; j < cardEls.length; j++) {
+            const step = j - i;
+            const prevStep = step - 1;
+            const triggerStickyTop =
+              layoutValues.initialStickyTop + (j - 1) * layoutValues.cardOffset;
+
+            gsap.fromTo(
+              card,
+              {
+                scale: 1 - prevStep * layoutValues.scaleStep,
+                z: -prevStep * layoutValues.depthZ,
+              },
+              {
+                scale: 1 - step * layoutValues.scaleStep,
+                z: -step * layoutValues.depthZ,
+                force3D: true,
+                filter: `brightness(${Math.max(0.65, 1 - step * 0.06)})`,
+                borderRadius: "20px",
+                immediateRender: false,
+                scrollTrigger: {
+                  trigger: cardEls[j],
+                  start: `top ${triggerStickyTop + layoutValues.cardOffset}px`,
+                  end: `top ${triggerStickyTop}px`,
+                  scrub: true,
+                  invalidateOnRefresh: true,
+                },
+              },
+            );
+          }
+        });
+
+        const lastCard = cardEls[cardEls.length - 1];
+
+        gsap.to(wrapper, {
+          autoAlpha: 0,
+          ease: "none",
+          scrollTrigger: {
+            trigger: lastCard,
+            start: "top top",
+            end: () => `+=${window.innerHeight * 0.3}`,
+            scrub: true,
+            invalidateOnRefresh: true,
+          },
+        });
+
+        requestAnimationFrame(() => {
+          ScrollTrigger.refresh();
+        });
+      }, wrapper);
+
+      return () => ctx.revert();
+    }, 120);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [
+    layoutValues.cardOffset,
+    layoutValues.initialStickyTop,
+    layoutValues.depthZ,
+    layoutValues.scaleStep,
+  ]);
+
+  if (!cards?.length) return null;
+
+  const totalCards = cards.length;
+
+  return (
+    <section
+      ref={wrapperRef}
+      className="stack-cards-block relative w-full invert-[0.95] brightness-110 contrast-125 dark:brightness-100 dark:contrast-100 dark:invert-[0]"
+    >
+      {cards.map((card, i) => {
+        const accent = ACCENTS[card.accentVariant ?? "lime"];
+        const cardMedia =
+          card.image && typeof card.image === "object"
+            ? (card.image as Media)
+            : null;
+
+        return (
+          <section
+            key={card.id ?? i}
+            id={i === 0 ? (sectionId ?? undefined) : undefined}
+            ref={(el) => {
+              cardRefs.current[i] = el;
+            }}
+            className="stack-card renderblock-container sticky! w-full overflow-hidden px-4 py-16 sm:px-6 lg:py-32"
+            style={{
+              top: `${layoutValues.initialStickyTop + i * layoutValues.cardOffset}px`,
+              zIndex: i + 1,
+              willChange: "transform",
+            }}
+          >
+            <div
+              className="relative mx-auto w-full max-w-5xl overflow-hidden rounded-2xl"
+              style={{
+                background: "rgb(8 8 10 / 90%)",
+                border: "1px solid rgba(255,255,255,0.07)",
+                backdropFilter: "blur(8px)",
+              }}
+            >
+              <div
+                className="absolute left-0 right-0 top-0 h-px"
+                style={{
+                  background: `linear-gradient(90deg, transparent, rgba(${accent.rgb},0.5), transparent)`,
+                }}
+              />
+
+              <div className="grid min-h-70 grid-cols-[1fr_5.5rem] sm:grid-cols-[1fr_8rem] md:min-h-85 md:grid-cols-[1fr_auto]">
+                <div className="stackcard-bg flex flex-col justify-between p-6 md:p-10 lg:p-14">
+                  <div>
+                    <div className="mb-6 flex items-start justify-between md:mb-8">
+                      <div className="flex items-center gap-3 md:gap-4">
+                        <div
+                          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl md:h-12 md:w-12"
+                          style={{
+                            background: `rgba(${accent.rgb},0.1)`,
+                            border: `1px solid rgba(${accent.rgb},0.25)`,
+                          }}
+                        >
+                          <span style={{ color: accent.hex }}>
+                            <DynamicIcon
+                              className="shrink-0"
+                              name={card.iconName}
+                              size={20}
+                            />
+                          </span>
+                        </div>
+
+                        <div>
+                          {card.number && (
+                            <div
+                              className="mb-0.5 text-[10px] font-black uppercase tracking-widest md:text-xs"
+                              style={{ color: `rgba(${accent.rgb},0.6)` }}
+                            >
+                              {card.number} /{" "}
+                              {String(totalCards).padStart(2, "0")}
+                            </div>
+                          )}
+
+                          {card.title && (
+                            <h3 className="text-xl font-extrabold tracking-tight text-stone-50/80 md:text-2xl lg:text-3xl">
+                              {card.title}
+                            </h3>
+                          )}
+                        </div>
+                      </div>
+
+                      {(card.statValue || card.statLabel) && (
+                        <div className="hidden flex-col items-end md:flex">
+                          {card.statValue && (
+                            <span
+                              className="text-4xl font-black leading-none"
+                              style={{ color: accent.hex }}
+                            >
+                              {card.statValue}
+                            </span>
+                          )}
+
+                          {card.statLabel && (
+                            <span
+                              className="mt-1 text-xs"
+                              style={{ color: "rgba(255,255,255,0.3)" }}
+                            >
+                              {card.statLabel}
+                            </span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    {card.content ? (
+                      <RichText
+                        data={card.content as any}
+                        enableProse={false}
+                        enableGutter={false}
+                        className="max-w-xl text-sm leading-relaxed text-stone-200 dark:text-stone-200 md:text-base"
+                        style={{ color: "rgba(255,255,255,0.45)" }}
+                      />
+                    ) : null}
+                  </div>
+
+                  <div className="mt-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center md:mt-8">
+                    {card.tags && card.tags.length > 0 && (
+                      <div className="flex flex-wrap gap-2">
+                        {card.tags.map((tagItem, ti) => (
+                          <span
+                            key={tagItem.id ?? ti}
+                            className="rounded-full px-3 py-1 text-xs font-semibold"
+                            style={{
+                              background: `rgba(${accent.rgb},0.07)`,
+                              border: `1px solid rgba(${accent.rgb},0.18)`,
+                              color: accent.hex,
+                            }}
+                          >
+                            {tagItem.tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+
+                    {card.ctaLabel && (
+                      <a
+                        href={card.ctaHref ?? "#"}
+                        className="group flex cursor-pointer items-center gap-2 whitespace-nowrap text-xs font-black uppercase tracking-widest"
+                        style={{ color: accent.hex }}
+                      >
+                        {card.ctaLabel}
+                        <ArrowRight
+                          size={14}
+                          className="transition-transform group-hover:translate-x-1"
+                          style={{ color: accent.hex }}
+                        />
+                      </a>
+                    )}
+                  </div>
+                </div>
+
+                <div
+                  className="relative flex w-22 items-center justify-center overflow-hidden sm:w-32 md:w-48 lg:w-64 xl:w-80"
+                  style={{
+                    borderLeft: `1px solid rgba(${accent.rgb},0.08)`,
+                    background: `linear-gradient(135deg, rgba(${accent.rgb},0.04) 0%, transparent 100%)`,
+                  }}
+                >
+                  <div
+                    className="absolute inset-0"
+                    style={{
+                      background: `radial-gradient(ellipse at 50% 50%, rgba(${accent.rgb},0.25) 0%, transparent 70%)`,
+                    }}
+                  />
+
+                  {isLocalImageSrc(cardMedia?.url) ? (
+                    <Image
+                      src={cardMedia.url}
+                      alt={cardMedia.alt ?? card.title ?? ""}
+                      fill
+                      className="relative z-10 object-cover opacity-80"
+                      sizes="(max-width: 640px) 88px, (max-width: 768px) 128px, (max-width: 1280px) 192px, 320px"
+                    />
+                  ) : (
+                    <>
+                      <span
+                        className="relative z-10"
+                        style={{ color: `rgba(${accent.rgb},1)` }}
+                      >
+                        <DynamicIcon
+                          className="shrink-0"
+                          name={card.iconName}
+                          size={96}
+                        />
+                      </span>
+
+                      {card.number && (
+                        <div
+                          className="absolute bottom-4 right-6 select-none font-black leading-none"
+                          style={{
+                            fontSize: "80px",
+                            color: `rgba(${accent.rgb},0.2)`,
+                          }}
+                        >
+                          {card.number}
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          </section>
+        );
+      })}
+    </section>
+  );
+}