blocks-dusted 0.1.1 → 0.1.3

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

@@ -1,317 +1,297 @@
-"use client";
-
-import React, { useState } from "react";
-import Image from "next/image";
-import { motion } from "framer-motion";
-import { TextFade } from "@/components/ui/anims/fade";
-import * as LucideIcons from "lucide-react";
-
-export type DDHeroProps = Record<string, any>;
-type Media = { url?: string | null; alt?: string | null; [key: string]: any };
-type ButtonItem = {
-  href?: string | null;
-  class?: string | null;
-  label?: string | null;
-};
-type StatItem = { value?: string | null; label?: string | null };
-
-function isLocalAssetSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
-}
-
-function HeroPlaceholder() {
-  return (
-    <svg
-      aria-hidden="true"
-      className="h-full w-full"
-      viewBox="0 0 1600 900"
-      preserveAspectRatio="none"
-    >
-      <defs>
-        <linearGradient id="dd-hero-placeholder" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0%" stopColor="#09090b" />
-          <stop offset="45%" stopColor="#241244" />
-          <stop offset="100%" stopColor="#111827" />
-        </linearGradient>
-        <pattern
-          id="dd-hero-grid"
-          width="80"
-          height="80"
-          patternUnits="userSpaceOnUse"
-        >
-          <path
-            d="M 80 0 L 0 0 0 80"
-            fill="none"
-            stroke="#ffffff"
-            strokeOpacity="0.06"
-            strokeWidth="1"
-          />
-        </pattern>
-      </defs>
-      <rect width="1600" height="900" fill="url(#dd-hero-placeholder)" />
-      <rect width="1600" height="900" fill="url(#dd-hero-grid)" />
-      <path
-        d="M 1040 140 C 1260 220 1380 390 1320 570 C 1240 800 910 790 760 640 C 620 500 790 260 1040 140 Z"
-        fill="#ffffff"
-        fillOpacity="0.08"
-      />
-      <path
-        d="M 180 620 C 360 470 570 490 690 640 C 810 790 600 900 360 840 C 210 800 90 740 180 620 Z"
-        fill="#a3e635"
-        fillOpacity="0.08"
-      />
-    </svg>
-  );
-}
-
-function DynamicIcon({
-  name,
-  size = 16,
-  ...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} />;
-}
-
-export const DDHero: React.FC<DDHeroProps> = ({
-  badge,
-  headlineMain,
-  headlineAccent,
-  description,
-  // primaryCta,
-  // secondaryCta,
-  stats,
-  backgroundImage,
-  backgroundImageFallbackUrl,
-  sectionId,
-  showScrollIndicator,
-  customCSS,
-  showButtons = true,
-  buttons = [
-    { variant: "v1", icon: "Goal", label: "Choose Lane" },
-    { variant: "v1", icon: "Feather", label: "How it works" },
-  ],
-}) => {
-  const bgMedia =
-    backgroundImage && typeof backgroundImage === "object"
-      ? (backgroundImage as Media)
-      : null;
-  const bgUrl = bgMedia?.url ?? backgroundImageFallbackUrl ?? undefined;
-  const safeBgUrl = isLocalAssetSrc(bgUrl) ? bgUrl : null;
-  const isVideo = Boolean(
-    safeBgUrl && (bgMedia?.mimeType?.startsWith("video/") ?? false),
-  );
-  const buttonItems = buttons as ButtonItem[];
-  const statItems = (stats ?? []) as StatItem[];
-
-  const [bgLoaded, setBgLoaded] = useState(false);
-
-  // Get dynamic icon component
-  const ChipIcon = LucideIcons.Sparkles;
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div
-        id={sectionId ?? undefined}
-        className="relative min-h-screen flex items-center overflow-hidden"
-      >
-        {/* Background Image */}
-        <div className="absolute inset-0">
-          {safeBgUrl ? (
-            <>
-              {!bgLoaded && (
-                <div className="absolute inset-0 bg-stone-900 animate-pulse" />
-              )}
-              {isVideo ? (
-                <video
-                  src={safeBgUrl}
-                  autoPlay
-                  muted
-                  loop
-                  playsInline
-                  preload="none"
-                  className="w-full h-full object-cover object-top"
-                  onLoadedData={() => setBgLoaded(true)}
-                />
-              ) : (
-                <Image
-                  src={safeBgUrl}
-                  alt="Studio hero background"
-                  fill
-                  priority
-                  loading="eager"
-                  className="object-cover object-top"
-                  onLoad={() => setBgLoaded(true)}
-                />
-              )}
-            </>
-          ) : (
-            <HeroPlaceholder />
-          )}
-          <div className="absolute inset-0 bg-gradient-to-r from-stone-950/95 via-stone-950/80 to-stone-950/40" />
-          <div className="absolute inset-0 bg-linear-to-t from-stone-950/60 via-transparent to-transparent" />
-        </div>
-
-        {/* Content */}
-        <div className="relative z-10 w-full max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6 pt-28 pb-24">
-          <div className="max-w-2xl">
-            {/* Badge */}
-            {/* {badge?.show && badge.text && (
-              <div className="inline-flex items-center gap-2 bg-stone-50/10 border border-white/20 rounded-full px-4 py-1.5 mb-8">
-                <span className="w-1.5 h-1.5 rounded-full bg-lime-400 animate-pulse" />
-                <span className="text-stone-50/80 text-xs font-medium tracking-wide">
-                  {badge.text}
-                </span>
-              </div>
-            )} */}
-
-            {/* Badge - to convert to dynamic */}
-            {badge?.show && badge.text && (
-              <motion.div
-                variants={{
-                  hidden: { opacity: 0, y: -20, filter: "blur(6px)" },
-                  visible: { opacity: 1, y: 0, filter: "none" },
-                }}
-                transition={{ duration: 0.5, ease: "easeOut" }}
-              >
-                <span className="inline-flex items-center gap-2 rounded-full border border-lime-500 bg-black/70 px-4 py-1.5 text-xs text-lime-100">
-                  {/* TODO: Reconnect Badge/AnimatedShinyText if this project provides them. */}
-                  <ChipIcon className="mr-2 h-3.5 w-3.5" />
-                  {badge.text}
-                </span>
-              </motion.div>
-            )}
-
-            {/* Headline */}
-            {/* <h1 className="text-5xl md:text-6xl lg:text-7xl font-semibold text-stone-900 dark:text-stone-50 leading-[1.05] tracking-tight mb-6">
-              {headlineMain}
-              <br />
-              <span className="text-stone-400">{headlineAccent}</span>
-            </h1> */}
-
-            {/* Headline */}
-            <motion.div
-              className="relative mt-4 z-50 headline-main"
-              variants={{
-                hidden: { opacity: 0, y: 40 },
-                visible: { opacity: 1, y: 0 },
-              }}
-              viewport={{ once: false, amount: 0.3 }}
-              transition={{ duration: 0.6, ease: "easeOut" }}
-              style={{ filter: "drop-shadow(3px 3px 1px #151515)" }}
-            >
-              <span className="block text-6xl sm:text-6xl font-semibold text-left tracking-tight md:text-7xl text-purple-600 dark:text-violet-600 hyphens-auto">
-                {/* TODO: Reconnect SplittingText animation if this project provides it. */}
-                {headlineMain}
-              </span>
-            </motion.div>
-            <motion.div
-              className="relative z-50 headline-accent"
-              variants={{
-                hidden: { opacity: 0, y: 40 },
-                visible: { opacity: 1, y: 0 },
-              }}
-              viewport={{ once: false, amount: 0.3 }}
-              transition={{ duration: 0.6, ease: "easeOut" }}
-              style={{ filter: "drop-shadow(3px 3px 1px #151515)" }}
-            >
-              <span className="block text-6xl sm:text-6xl font-semibold text-left tracking-tight md:text-7xl text-purple-900 dark:text-violet-900 hyphens-auto">
-                {/* TODO: Reconnect SplittingText animation if this project provides it. */}
-                {headlineAccent}
-              </span>
-            </motion.div>
-
-            {/* Description */}
-            <TextFade direction="down" className="mt-10" delay={0.5}>
-              {description && (
-                <p className="text-stone-50/65 leading-relaxed mt-4 mb-0 max-w-xl">
-                  {description}
-                </p>
-              )}
-            </TextFade>
-
-            {/* CTA Buttons */}
-            {/* <div className="flex flex-col sm:flex-row gap-3 mx-4">
-              {primaryCta?.label && (
-                <a
-                  href={primaryCta.href ?? '#'}
-                  className="inline-flex items-center justify-center gap-2 bg-stone-50 text-stone-900 px-6 py-3 rounded-lg text-sm font-semibold hover:bg-stone-100 transition-colors cursor-pointer whitespace-nowrap"
-                >
-                  <DynamicIcon className="shrink-0" name={primaryCta.iconName} size={16} />
-                  {primaryCta.label}
-                </a>
-              )}
-              {secondaryCta?.label && (
-                <a
-                  href={secondaryCta.href ?? '#'}
-                  className="inline-flex items-center justify-center gap-2 bg-stone-50/10 border border-white/20 text-stone-50 px-6 py-3 rounded-lg text-sm font-semibold hover:bg-stone-50/20 transition-colors cursor-pointer whitespace-nowrap"
-                >
-                  <DynamicIcon className="shrink-0" name={secondaryCta.iconName} size={16} />
-                  {secondaryCta.label}
-                </a>
-              )}
-            </div> */}
-
-            {/* Dusted CTA Buttons */}
-            {showButtons && buttonItems.length > 0 && (
-              <motion.div
-                className="dusted-hero-cta-col mt-8 relative flex col-start-2 col-span-2 gap-4"
-                variants={{
-                  hidden: { opacity: 0, y: 20 },
-                  visible: { opacity: 1, y: 0 },
-                }}
-                transition={{ duration: 0.6, ease: "easeOut" }}
-              >
-                {buttonItems.map((button, index) => (
-                  <a
-                    key={index}
-                    href={(button as any).href ?? "#"}
-                    className={
-                      button.class ??
-                      "inline-flex items-center gap-1.5 bg-indigo-700 text-stone-50 text-xs font-semibold px-3 py-1.5 rounded-lg group-hover:bg-indigo-600 group-hover:scale-[1.05] group-hover:shadow-xl transition-all duration-150 whitespace-nowrap"
-                    }
-                    style={{ cornerShape: "squircle" } as React.CSSProperties}
-                  >
-                    {/* TODO: Reconnect ButtonDustedFluid if this project provides it. */}
-                    {button.label || "Button"}
-                  </a>
-                ))}
-              </motion.div>
-            )}
-
-            {/* Stats */}
-            {statItems.length > 0 && (
-              <div className="flex items-center gap-8 mt-24 pt-8 border-t border-white/10">
-                {statItems.map((stat, index) => (
-                  <div key={stat.label ?? index}>
-                    <div className="text-4xl font-semibold text-stone-100/50 dark:text-stone-50">
-                      {stat.value}
-                    </div>
-                    <div className="text-xs text-stone-50/75 mt-0.5">
-                      {stat.label}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Scroll indicator */}
-        {showScrollIndicator && (
-          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce">
-            <div className="w-5 h-8 border border-white/30 rounded-full flex items-start justify-center pt-1.5">
-              <div className="w-1 h-2 bg-stone-50/50 rounded-full" />
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
+'use client'
+
+import React, { useState } from 'react'
+import Image from 'next/image'
+import { motion } from 'framer-motion'
+import { TextFade } from '@/components/ui/anims/fade'
+import * as LucideIcons from 'lucide-react'
+
+export type DDHeroProps = Record<string, any>
+type Media = { url?: string | null; alt?: string | null; [key: string]: any }
+type ButtonItem = { href?: string | null; class?: string | null; label?: string | null }
+type StatItem = { value?: string | null; label?: string | null }
+
+function isLocalAssetSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+function HeroPlaceholder() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-full w-full"
+      viewBox="0 0 1600 900"
+      preserveAspectRatio="none"
+    >
+      <defs>
+        <linearGradient id="dd-hero-placeholder" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="#09090b" />
+          <stop offset="45%" stopColor="#241244" />
+          <stop offset="100%" stopColor="#111827" />
+        </linearGradient>
+        <pattern id="dd-hero-grid" width="80" height="80" patternUnits="userSpaceOnUse">
+          <path
+            d="M 80 0 L 0 0 0 80"
+            fill="none"
+            stroke="#ffffff"
+            strokeOpacity="0.06"
+            strokeWidth="1"
+          />
+        </pattern>
+      </defs>
+      <rect width="1600" height="900" fill="url(#dd-hero-placeholder)" />
+      <rect width="1600" height="900" fill="url(#dd-hero-grid)" />
+      <path
+        d="M 1040 140 C 1260 220 1380 390 1320 570 C 1240 800 910 790 760 640 C 620 500 790 260 1040 140 Z"
+        fill="#ffffff"
+        fillOpacity="0.08"
+      />
+      <path
+        d="M 180 620 C 360 470 570 490 690 640 C 810 790 600 900 360 840 C 210 800 90 740 180 620 Z"
+        fill="#a3e635"
+        fillOpacity="0.08"
+      />
+    </svg>
+  )
+}
+
+function DynamicIcon({
+  name,
+  size = 16,
+  ...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} />
+}
+
+export const DDHero: React.FC<DDHeroProps> = ({
+  badge,
+  headlineMain,
+  headlineAccent,
+  description,
+  // primaryCta,
+  // secondaryCta,
+  stats,
+  backgroundImage,
+  backgroundImageFallbackUrl,
+  sectionId,
+  showScrollIndicator,
+  customCSS,
+  showButtons = true,
+  buttons = [
+    { variant: 'v1', icon: 'Goal', label: 'Choose Lane' },
+    { variant: 'v1', icon: 'Feather', label: 'How it works' },
+  ],
+}) => {
+  const bgMedia =
+    backgroundImage && typeof backgroundImage === 'object' ? (backgroundImage as Media) : null
+  const bgUrl = bgMedia?.url ?? backgroundImageFallbackUrl ?? undefined
+  const safeBgUrl = isLocalAssetSrc(bgUrl) ? bgUrl : null
+  const isVideo = Boolean(safeBgUrl && (bgMedia?.mimeType?.startsWith('video/') ?? false))
+  const buttonItems = buttons as ButtonItem[]
+  const statItems = (stats ?? []) as StatItem[]
+
+  const [bgLoaded, setBgLoaded] = useState(false)
+
+  // Get dynamic icon component
+  const ChipIcon = LucideIcons.Sparkles
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div
+        id={sectionId ?? undefined}
+        className="relative min-h-screen flex items-center overflow-hidden"
+      >
+        {/* Background Image */}
+        <div className="absolute inset-0">
+          {safeBgUrl ? (
+            <>
+              {!bgLoaded && <div className="absolute inset-0 bg-stone-900 animate-pulse" />}
+              {isVideo ? (
+                <video
+                  src={safeBgUrl}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
+                  preload="none"
+                  className="w-full h-full object-cover object-top"
+                  onLoadedData={() => setBgLoaded(true)}
+                />
+              ) : (
+                <Image
+                  src={safeBgUrl}
+                  alt="Studio hero background"
+                  fill
+                  priority
+                  loading="eager"
+                  className="object-cover object-top"
+                  onLoad={() => setBgLoaded(true)}
+                />
+              )}
+            </>
+          ) : (
+            <HeroPlaceholder />
+          )}
+          <div className="absolute inset-0 bg-gradient-to-r from-stone-950/95 via-stone-950/80 to-stone-950/40" />
+          <div className="absolute inset-0 bg-linear-to-t from-stone-950/60 via-transparent to-transparent" />
+        </div>
+
+        {/* Content */}
+        <div className="relative z-10 w-full max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6 pt-28 pb-24">
+          #BlockName-DDHero
+          <div className="max-w-2xl">
+            {/* Badge */}
+            {/* {badge?.show && badge.text && (
+              <div className="inline-flex items-center gap-2 bg-stone-50/10 border border-white/20 rounded-full px-4 py-1.5 mb-8">
+                <span className="w-1.5 h-1.5 rounded-full bg-lime-400 animate-pulse" />
+                <span className="text-stone-50/80 text-xs font-medium tracking-wide">
+                  {badge.text}
+                </span>
+              </div>
+            )} */}
+
+            {/* Badge - to convert to dynamic */}
+            {badge?.show && badge.text && (
+              <motion.div
+                variants={{
+                  hidden: { opacity: 0, y: -20, filter: 'blur(6px)' },
+                  visible: { opacity: 1, y: 0, filter: 'none' },
+                }}
+                transition={{ duration: 0.5, ease: 'easeOut' }}
+              >
+                <span className="inline-flex items-center gap-2 rounded-full border border-lime-500 bg-black/70 px-4 py-1.5 text-xs text-lime-100">
+                  {/* TODO: Reconnect Badge/AnimatedShinyText if this project provides them. */}
+                  <ChipIcon className="mr-2 h-3.5 w-3.5" />
+                  {badge.text}
+                </span>
+              </motion.div>
+            )}
+
+            {/* Headline */}
+            {/* <h1 className="text-5xl md:text-6xl lg:text-7xl font-semibold text-stone-900 dark:text-stone-50 leading-[1.05] tracking-tight mb-6">
+              {headlineMain}
+              <br />
+              <span className="text-stone-400">{headlineAccent}</span>
+            </h1> */}
+
+            {/* Headline */}
+            <motion.div
+              className="relative mt-4 z-50 headline-main"
+              variants={{
+                hidden: { opacity: 0, y: 40 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              viewport={{ once: false, amount: 0.3 }}
+              transition={{ duration: 0.6, ease: 'easeOut' }}
+              style={{ filter: 'drop-shadow(3px 3px 1px #151515)' }}
+            >
+              <span className="block text-6xl sm:text-6xl font-semibold text-left tracking-tight md:text-7xl text-purple-600 dark:text-violet-600 hyphens-auto">
+                {/* TODO: Reconnect SplittingText animation if this project provides it. */}
+                {headlineMain}
+              </span>
+            </motion.div>
+            <motion.div
+              className="relative z-50 headline-accent"
+              variants={{
+                hidden: { opacity: 0, y: 40 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              viewport={{ once: false, amount: 0.3 }}
+              transition={{ duration: 0.6, ease: 'easeOut' }}
+              style={{ filter: 'drop-shadow(3px 3px 1px #151515)' }}
+            >
+              <span className="block text-6xl sm:text-6xl font-semibold text-left tracking-tight md:text-7xl text-purple-900 dark:text-violet-900 hyphens-auto">
+                {/* TODO: Reconnect SplittingText animation if this project provides it. */}
+                {headlineAccent}
+              </span>
+            </motion.div>
+
+            {/* Description */}
+            <TextFade direction="down" className="mt-10" delay={0.5}>
+              {description && (
+                <p className="text-stone-50/65 leading-relaxed mt-4 mb-0 max-w-xl">{description}</p>
+              )}
+            </TextFade>
+
+            {/* CTA Buttons */}
+            {/* <div className="flex flex-col sm:flex-row gap-3 mx-4">
+              {primaryCta?.label && (
+                <a
+                  href={primaryCta.href ?? '#'}
+                  className="inline-flex items-center justify-center gap-2 bg-stone-50 text-stone-900 px-6 py-3 rounded-lg text-sm font-semibold hover:bg-stone-100 transition-colors cursor-pointer whitespace-nowrap"
+                >
+                  <DynamicIcon className="shrink-0" name={primaryCta.iconName} size={16} />
+                  {primaryCta.label}
+                </a>
+              )}
+              {secondaryCta?.label && (
+                <a
+                  href={secondaryCta.href ?? '#'}
+                  className="inline-flex items-center justify-center gap-2 bg-stone-50/10 border border-white/20 text-stone-50 px-6 py-3 rounded-lg text-sm font-semibold hover:bg-stone-50/20 transition-colors cursor-pointer whitespace-nowrap"
+                >
+                  <DynamicIcon className="shrink-0" name={secondaryCta.iconName} size={16} />
+                  {secondaryCta.label}
+                </a>
+              )}
+            </div> */}
+
+            {/* Dusted CTA Buttons */}
+            {showButtons && buttonItems.length > 0 && (
+              <motion.div
+                className="dusted-hero-cta-col mt-8 relative flex col-start-2 col-span-2 gap-4"
+                variants={{
+                  hidden: { opacity: 0, y: 20 },
+                  visible: { opacity: 1, y: 0 },
+                }}
+                transition={{ duration: 0.6, ease: 'easeOut' }}
+              >
+                {buttonItems.map((button, index) => (
+                  <a
+                    key={index}
+                    href={(button as any).href ?? '#'}
+                    className={
+                      button.class ??
+                      'inline-flex items-center gap-1.5 bg-indigo-700 text-stone-50 text-xs font-semibold px-3 py-1.5 rounded-lg group-hover:bg-indigo-600 group-hover:scale-[1.05] group-hover:shadow-xl transition-all duration-150 whitespace-nowrap'
+                    }
+                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                  >
+                    {/* TODO: Reconnect ButtonDustedFluid if this project provides it. */}
+                    {button.label || 'Button'}
+                  </a>
+                ))}
+              </motion.div>
+            )}
+
+            {/* Stats */}
+            {statItems.length > 0 && (
+              <div className="flex items-center gap-8 mt-24 pt-8 border-t border-white/10">
+                {statItems.map((stat, index) => (
+                  <div key={stat.label ?? index}>
+                    <div className="text-4xl font-semibold text-stone-100/50 dark:text-stone-50">
+                      {stat.value}
+                    </div>
+                    <div className="text-xs text-stone-50/75 mt-0.5">{stat.label}</div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Scroll indicator */}
+        {showScrollIndicator && (
+          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce">
+            <div className="w-5 h-8 border border-white/30 rounded-full flex items-start justify-center pt-1.5">
+              <div className="w-1 h-2 bg-stone-50/50 rounded-full" />
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}