blocks-dusted 0.1.1 → 0.1.2

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

@@ -1,327 +1,266 @@
-"use client";
-import React from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { ArrowUpRight, CheckCheck } from "lucide-react";
-import { motion, type Variants } from "framer-motion";
-import * as LucideIcons from "lucide-react";
-export type DDSectionProps = Record<string, any>;
-type ServiceItem = {
-  id?: string | null;
-  iconName?: string | null;
-  title?: string | null;
-  description?: string | null;
-};
-type ButtonItem = {
-  href?: string | null;
-  class?: string | null;
-  label?: string | null;
-};
-
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
-}
-
-function SectionImagePlaceholder() {
-  return (
-    <svg
-      aria-hidden="true"
-      className="h-full w-full"
-      viewBox="0 0 900 700"
-      preserveAspectRatio="none"
-    >
-      <defs>
-        <linearGradient id="dd-section-placeholder" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0%" stopColor="#111827" />
-          <stop offset="50%" stopColor="#251644" />
-          <stop offset="100%" stopColor="#09090b" />
-        </linearGradient>
-        <pattern
-          id="dd-section-grid"
-          width="72"
-          height="72"
-          patternUnits="userSpaceOnUse"
-        >
-          <path
-            d="M 72 0 L 0 0 0 72"
-            fill="none"
-            stroke="#ffffff"
-            strokeOpacity="0.07"
-          />
-        </pattern>
-      </defs>
-      <rect width="900" height="700" fill="url(#dd-section-placeholder)" />
-      <rect width="900" height="700" fill="url(#dd-section-grid)" />
-      <rect
-        x="155"
-        y="150"
-        width="590"
-        height="360"
-        rx="32"
-        fill="#ffffff"
-        fillOpacity="0.08"
-      />
-      <rect
-        x="210"
-        y="215"
-        width="270"
-        height="28"
-        rx="14"
-        fill="#ffffff"
-        fillOpacity="0.18"
-      />
-      <rect
-        x="210"
-        y="275"
-        width="430"
-        height="22"
-        rx="11"
-        fill="#ffffff"
-        fillOpacity="0.12"
-      />
-      <rect
-        x="210"
-        y="325"
-        width="360"
-        height="22"
-        rx="11"
-        fill="#ffffff"
-        fillOpacity="0.1"
-      />
-      <rect
-        x="210"
-        y="410"
-        width="150"
-        height="46"
-        rx="23"
-        fill="#a3e635"
-        fillOpacity="0.16"
-      />
-    </svg>
-  );
-}
-
-const containerVariants: Variants = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
-};
-
-const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 20 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" } },
-};
-
-function DynamicIcon({
-  name,
-  ...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 {...props} />;
-}
-
-export const DDSection: React.FC<DDSectionProps> = ({
-  eyebrow,
-  headlineMain,
-  headlineAccent,
-  description,
-  ctaLabel,
-  ctaHref,
-  services,
-  image,
-  imageFallbackUrl,
-  imageAlt,
-  badgeTitle,
-  badgeSubtitle,
-  showBadge,
-  sectionId,
-  customCSS,
-  showButtons = true,
-  buttons = [
-    { variant: "v1", icon: "Goal", label: "Choose Lane" },
-    { variant: "v1", icon: "Feather", label: "How it works" },
-  ],
-}) => {
-  const serviceItems = (services ?? []) as ServiceItem[];
-  const buttonItems = buttons as ButtonItem[];
-  const imgSrc =
-    image && typeof image === "object" && "url" in image && image.url
-      ? image.url
-      : (imageFallbackUrl ?? "");
-  const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null;
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? "studio-section"} className="py-24 overflow-hidden">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-            {/* Left Content */}
-            <motion.div
-              variants={containerVariants}
-              initial="hidden"
-              whileInView="show"
-              viewport={{ once: false, amount: 0.15 }}
-            >
-              {eyebrow && (
-                <motion.p
-                  variants={itemVariants}
-                  className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption"
-                >
-                  {eyebrow}
-                </motion.p>
-              )}
-
-              <motion.h2
-                variants={itemVariants}
-                className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-6"
-              >
-                {headlineMain}
-                <br />
-                <span className="text-stone-400">{headlineAccent}</span>
-              </motion.h2>
-
-              {description && (
-                <motion.p
-                  variants={itemVariants}
-                  className="text-stone-700 dark:text-stone-300 text-base leading-relaxed mb-10"
-                >
-                  {description}
-                </motion.p>
-              )}
-
-              {serviceItems.length > 0 && (
-                <motion.div
-                  variants={containerVariants}
-                  className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-10"
-                >
-                  {serviceItems.map((svc) => (
-                    <motion.div
-                      key={svc.id ?? svc.title}
-                      variants={itemVariants}
-                      className="flex gap-3"
-                    >
-                      <div className="w-8 h-8 flex items-center justify-center rounded-lg bg-stone-200/50 dark:bg-stone-800/50 text-stone-400 shrink-0 mt-0.5 border border-stone-200 dark:border-stone-600 hover:border-lime-500 duration-150">
-                        <DynamicIcon
-                          className="text-stone-400"
-                          name={svc.iconName}
-                          size={14}
-                        />
-                      </div>
-                      <div>
-                        <h3 className="text-sm font-semibold text-stone-800 dark:text-stone-50 mb-1">
-                          {svc.title}
-                        </h3>
-                        <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed">
-                          {svc.description}
-                        </p>
-                      </div>
-                    </motion.div>
-                  ))}
-                </motion.div>
-              )}
-
-              {/* {ctaLabel && ctaHref && (
-                <motion.div variants={itemVariants}>
-                  <Link
-                    href={ctaHref}
-                    className="inline-flex items-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"
-                  >
-                    {ctaLabel}
-                    <ArrowUpRight size={15} />
-                  </Link>
-                </motion.div>
-              )} */}
-
-              {/* Dusted CTA Buttons */}
-              {showButtons && buttonItems.length > 0 && (
-                <motion.div
-                  className="dusted-hero-cta-col flex col-start-2 col-span-2 gap-4"
-                  variants={itemVariants}
-                >
-                  {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 hover:bg-indigo-600 group-hover:scale-[1.05] 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>
-              )}
-            </motion.div>
-
-            {/* Right Image */}
-            {(safeImgSrc || imgSrc) && (
-              <motion.div
-                className="relative"
-                initial={{ opacity: 0, x: 40 }}
-                whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: false, amount: 0.15 }}
-                transition={{ duration: 0.6, ease: "easeOut" }}
-              >
-                <div
-                  className="rounded-3xl overflow-hidden w-full h-125 relative shadow-xl"
-                  style={{ cornerShape: "squircle" } as React.CSSProperties}
-                >
-                  {safeImgSrc ? (
-                    <Image
-                      src={safeImgSrc}
-                      alt={imageAlt ?? "DesignsDusted Studio"}
-                      fill
-                      sizes="(max-width: 768px) 100vw, 50vw"
-                      className="object-cover object-top squircle"
-                      style={{ cornerShape: "squircle" } as React.CSSProperties}
-                    />
-                  ) : (
-                    <SectionImagePlaceholder />
-                  )}
-                  <div
-                    className="absolute inset-0 bg-linear-to-t from-stone-950/70 via-transparent to-transparent rounded-2xl"
-                    style={{ cornerShape: "squircle" } as React.CSSProperties}
-                  />
-                </div>
-
-                {showBadge && (
-                  <div
-                    className="absolute bottom-6 left-6 right-6 bg-indigo-900/50 shadow-inner backdrop-blur-sm rounded-2xl p-4 border border-indigo-700"
-                    style={{ cornerShape: "squircle" } as React.CSSProperties}
-                  >
-                    <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 flex items-center justify-center rounded-lg bg-stone-50 text-stone-900 shrink-0">
-                        <CheckCheck size={16} />
-                      </div>
-                      <div>
-                        {badgeTitle && (
-                          <div className="text-sm font-semibold text-stone-50 dark:text-stone-50">
-                            {badgeTitle}
-                          </div>
-                        )}
-                        {badgeSubtitle && (
-                          <div className="text-xs text-stone-300">
-                            {badgeSubtitle}
-                          </div>
-                        )}
-                      </div>
-                      <div className="ml-auto w-2 h-2 rounded-full bg-lime-400 animate-pulse shrink-0" />
-                    </div>
-                  </div>
-                )}
-              </motion.div>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
+'use client'
+import React from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { ArrowUpRight, CheckCheck } from 'lucide-react'
+import { motion, type Variants } from 'framer-motion'
+import * as LucideIcons from 'lucide-react'
+export type DDSectionProps = Record<string, any>
+type ServiceItem = {
+  id?: string | null
+  iconName?: string | null
+  title?: string | null
+  description?: string | null
+}
+type ButtonItem = { href?: string | null; class?: string | null; label?: string | null }
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+function SectionImagePlaceholder() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-full w-full"
+      viewBox="0 0 900 700"
+      preserveAspectRatio="none"
+    >
+      <defs>
+        <linearGradient id="dd-section-placeholder" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="#111827" />
+          <stop offset="50%" stopColor="#251644" />
+          <stop offset="100%" stopColor="#09090b" />
+        </linearGradient>
+        <pattern id="dd-section-grid" width="72" height="72" patternUnits="userSpaceOnUse">
+          <path d="M 72 0 L 0 0 0 72" fill="none" stroke="#ffffff" strokeOpacity="0.07" />
+        </pattern>
+      </defs>
+      <rect width="900" height="700" fill="url(#dd-section-placeholder)" />
+      <rect width="900" height="700" fill="url(#dd-section-grid)" />
+      <rect x="155" y="150" width="590" height="360" rx="32" fill="#ffffff" fillOpacity="0.08" />
+      <rect x="210" y="215" width="270" height="28" rx="14" fill="#ffffff" fillOpacity="0.18" />
+      <rect x="210" y="275" width="430" height="22" rx="11" fill="#ffffff" fillOpacity="0.12" />
+      <rect x="210" y="325" width="360" height="22" rx="11" fill="#ffffff" fillOpacity="0.1" />
+      <rect x="210" y="410" width="150" height="46" rx="23" fill="#a3e635" fillOpacity="0.16" />
+    </svg>
+  )
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
+}
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: 'easeOut' } },
+}
+
+function DynamicIcon({
+  name,
+  ...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 {...props} />
+}
+
+export const DDSection: React.FC<DDSectionProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  ctaLabel,
+  ctaHref,
+  services,
+  image,
+  imageFallbackUrl,
+  imageAlt,
+  badgeTitle,
+  badgeSubtitle,
+  showBadge,
+  sectionId,
+  customCSS,
+  showButtons = true,
+  buttons = [
+    { variant: 'v1', icon: 'Goal', label: 'Choose Lane' },
+    { variant: 'v1', icon: 'Feather', label: 'How it works' },
+  ],
+}) => {
+  const serviceItems = (services ?? []) as ServiceItem[]
+  const buttonItems = buttons as ButtonItem[]
+  const imgSrc =
+    image && typeof image === 'object' && 'url' in image && image.url
+      ? image.url
+      : (imageFallbackUrl ?? '')
+  const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? 'studio-section'} className="py-24 overflow-hidden">
+        #BlockName-DDSection
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            {/* Left Content */}
+            <motion.div
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: false, amount: 0.15 }}
+            >
+              {eyebrow && (
+                <motion.p
+                  variants={itemVariants}
+                  className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption"
+                >
+                  {eyebrow}
+                </motion.p>
+              )}
+
+              <motion.h2
+                variants={itemVariants}
+                className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-6"
+              >
+                {headlineMain}
+                <br />
+                <span className="text-stone-400">{headlineAccent}</span>
+              </motion.h2>
+
+              {description && (
+                <motion.p
+                  variants={itemVariants}
+                  className="text-stone-700 dark:text-stone-300 text-base leading-relaxed mb-10"
+                >
+                  {description}
+                </motion.p>
+              )}
+
+              {serviceItems.length > 0 && (
+                <motion.div
+                  variants={containerVariants}
+                  className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-10"
+                >
+                  {serviceItems.map((svc) => (
+                    <motion.div
+                      key={svc.id ?? svc.title}
+                      variants={itemVariants}
+                      className="flex gap-3"
+                    >
+                      <div className="w-8 h-8 flex items-center justify-center rounded-lg bg-stone-200/50 dark:bg-stone-800/50 text-stone-400 shrink-0 mt-0.5 border border-stone-200 dark:border-stone-600 hover:border-lime-500 duration-150">
+                        <DynamicIcon className="text-stone-400" name={svc.iconName} size={14} />
+                      </div>
+                      <div>
+                        <h3 className="text-sm font-semibold text-stone-800 dark:text-stone-50 mb-1">
+                          {svc.title}
+                        </h3>
+                        <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed">
+                          {svc.description}
+                        </p>
+                      </div>
+                    </motion.div>
+                  ))}
+                </motion.div>
+              )}
+
+              {/* {ctaLabel && ctaHref && (
+                <motion.div variants={itemVariants}>
+                  <Link
+                    href={ctaHref}
+                    className="inline-flex items-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"
+                  >
+                    {ctaLabel}
+                    <ArrowUpRight size={15} />
+                  </Link>
+                </motion.div>
+              )} */}
+
+              {/* Dusted CTA Buttons */}
+              {showButtons && buttonItems.length > 0 && (
+                <motion.div
+                  className="dusted-hero-cta-col flex col-start-2 col-span-2 gap-4"
+                  variants={itemVariants}
+                >
+                  {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 hover:bg-indigo-600 group-hover:scale-[1.05] 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>
+              )}
+            </motion.div>
+
+            {/* Right Image */}
+            {(safeImgSrc || imgSrc) && (
+              <motion.div
+                className="relative"
+                initial={{ opacity: 0, x: 40 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: false, amount: 0.15 }}
+                transition={{ duration: 0.6, ease: 'easeOut' }}
+              >
+                <div
+                  className="rounded-3xl overflow-hidden w-full h-125 relative shadow-xl"
+                  style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                >
+                  {safeImgSrc ? (
+                    <Image
+                      src={safeImgSrc}
+                      alt={imageAlt ?? 'DesignsDusted Studio'}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 50vw"
+                      className="object-cover object-top squircle"
+                      style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                    />
+                  ) : (
+                    <SectionImagePlaceholder />
+                  )}
+                  <div
+                    className="absolute inset-0 bg-linear-to-t from-stone-950/70 via-transparent to-transparent rounded-2xl"
+                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                  />
+                </div>
+
+                {showBadge && (
+                  <div
+                    className="absolute bottom-6 left-6 right-6 bg-indigo-900/50 shadow-inner backdrop-blur-sm rounded-2xl p-4 border border-indigo-700"
+                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 flex items-center justify-center rounded-lg bg-stone-50 text-stone-900 shrink-0">
+                        <CheckCheck size={16} />
+                      </div>
+                      <div>
+                        {badgeTitle && (
+                          <div className="text-sm font-semibold text-stone-50 dark:text-stone-50">
+                            {badgeTitle}
+                          </div>
+                        )}
+                        {badgeSubtitle && (
+                          <div className="text-xs text-stone-300">{badgeSubtitle}</div>
+                        )}
+                      </div>
+                      <div className="ml-auto w-2 h-2 rounded-full bg-lime-400 animate-pulse shrink-0" />
+                    </div>
+                  </div>
+                )}
+              </motion.div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}