blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-GooeyInfo/config.ts

@@ -1,135 +1,136 @@
-import type { Block } from 'payload'
-import { BlocksFeature } from '@payloadcms/richtext-lexical'
-
-import { MediaBlock } from '@/blocks/MediaBlock/config'
-import { DDIcon } from '@/blocks/DD-Icon/config'
-import { DDAnimText } from '@/blocks/DD-AnimText/config'
-import { DDIconButton } from '@/blocks/DD-IconButton/config'
-import { defaultLexical } from '@/fields/defaultLexical'
-
-export const DDGooeyInfo: Block = {
-  slug: 'DD-GooeyInfo',
-  interfaceName: 'DDGooeyInfo',
-  labels: {
-    singular: 'Button Gooey Info',
-    plural: 'Button Gooey Info Blocks'
-  },
-  fields: [
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'buttonLabel',
-          type: 'text',
-          label: 'Button Label/Icon',
-          defaultValue: 'i',
-          admin: {
-            width: '50%',
-            description: 'Text or single character to display on button (e.g., "i", "?", "N")'
-          }
-        },
-        {
-          name: 'xOffset',
-          type: 'number',
-          label: 'Panel X Offset',
-          defaultValue: 110,
-          admin: {
-            width: '50%',
-            description: 'Horizontal distance from button to panel in pixels'
-          }
-        }
-      ]
-    },
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'panelWidth',
-          type: 'text',
-          label: 'Panel Width',
-          defaultValue: '16rem',
-          admin: {
-            width: '33.33%',
-            description: 'Width of info panel (e.g., 16rem, 300px)'
-          }
-        },
-        {
-          name: 'buttonBgColor',
-          type: 'text',
-          label: 'Button Background',
-          defaultValue: 'black',
-          admin: {
-            width: '33.33%',
-            description: 'CSS color (e.g., black, #000, var(--primary))'
-          }
-        },
-        {
-          name: 'buttonTextColor',
-          type: 'text',
-          label: 'Button Text Color',
-          defaultValue: 'white',
-          admin: {
-            width: '33.33%',
-            description: 'CSS color for button text'
-          }
-        }
-      ]
-    },
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'panelBgColor',
-          type: 'text',
-          label: 'Panel Background',
-          defaultValue: 'black',
-          admin: {
-            width: '50%',
-            description: 'CSS color for panel background'
-          }
-        },
-        {
-          name: 'panelTextColor',
-          type: 'text',
-          label: 'Panel Text Color',
-          defaultValue: 'white',
-          admin: {
-            width: '50%',
-            description: 'CSS color for panel text'
-          }
-        }
-      ]
-    },
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'className',
-          type: 'text',
-          label: 'Container CSS Classes',
-          admin: {
-            width: '50%',
-            description: 'Additional CSS classes for the outer container'
-          }
-        },
-        {
-          name: 'panelClassName',
-          type: 'text',
-          label: 'Panel CSS Classes',
-          admin: {
-            width: '50%',
-            description: 'Additional CSS classes for the info panel'
-          }
-        }
-      ]
-    },
-    {
-      name: 'richTextData',
-      type: 'richText',
-      editor: defaultLexical,
-      label: 'Panel Content'
-    }
-  ]
-}
-
-export default DDGooeyInfo
+import type { Block } from 'payload'
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { DDIcon } from '@/blocks/DD-Icon/config'
+import { DDAnimText } from '@/blocks/DD-AnimText/config'
+import { DDIconButton } from '@/blocks/DD-IconButton/config'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDGooeyInfo: Block = {
+  slug: 'DD-GooeyInfo',
+  interfaceName: 'DDGooeyInfo',
+  labels: {
+    singular: 'Button Gooey Info',
+    plural: 'Button Gooey Info Blocks',
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'buttonLabel',
+          type: 'text',
+          label: 'Button Label/Icon',
+          defaultValue: 'i',
+          admin: {
+            width: '50%',
+            description: 'Text or single character to display on button (e.g., "i", "?", "N")',
+          },
+        },
+        {
+          name: 'xOffset',
+          type: 'number',
+          label: 'Panel X Offset',
+          defaultValue: 48,
+          admin: {
+            width: '50%',
+            description:
+              'Horizontal panel offset in pixels. Keep at or below 48 so the panel stays connected to the button',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelWidth',
+          type: 'text',
+          label: 'Panel Width',
+          defaultValue: '16rem',
+          admin: {
+            width: '33.33%',
+            description: 'Width of info panel (e.g., 16rem, 300px)',
+          },
+        },
+        {
+          name: 'buttonBgColor',
+          type: 'text',
+          label: 'Button Background',
+          defaultValue: 'black',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color (e.g., black, #000, var(--primary))',
+          },
+        },
+        {
+          name: 'buttonTextColor',
+          type: 'text',
+          label: 'Button Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color for button text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelBgColor',
+          type: 'text',
+          label: 'Panel Background',
+          defaultValue: 'black',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel background',
+          },
+        },
+        {
+          name: 'panelTextColor',
+          type: 'text',
+          label: 'Panel Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'className',
+          type: 'text',
+          label: 'Container CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the outer container',
+          },
+        },
+        {
+          name: 'panelClassName',
+          type: 'text',
+          label: 'Panel CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the info panel',
+          },
+        },
+      ],
+    },
+    {
+      name: 'richTextData',
+      type: 'richText',
+      editor: defaultLexical,
+      label: 'Panel Content',
+    },
+  ],
+}
+
+export default DDGooeyInfo

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

@@ -68,19 +68,9 @@ function DynamicIcon({
 
 export const DDHero: React.FC<DDHeroProps> = ({
   badge,
-  eyebrow,
   headlineMain,
   headlineAccent,
   description,
-  headlineText,
-  accentText,
-  subText,
-  phase1,
-  phase2,
-  phase3,
-  phase1Desc,
-  phase2Desc,
-  phase3Desc,
   // primaryCta,
   // secondaryCta,
   stats,
@@ -100,20 +90,8 @@ export const DDHero: React.FC<DDHeroProps> = ({
   const bgUrl = bgMedia?.url ?? backgroundImageFallbackUrl ?? undefined
   const safeBgUrl = isLocalAssetSrc(bgUrl) ? bgUrl : null
   const isVideo = Boolean(safeBgUrl && (bgMedia?.mimeType?.startsWith('video/') ?? false))
-  const resolvedBadge = badge?.text ?? eyebrow
-  const resolvedHeadlineMain = headlineMain ?? headlineText ?? 'Launch-ready digital products'
-  const resolvedHeadlineAccent = headlineAccent ?? accentText ?? 'with sharper positioning'
-  const resolvedDescription =
-    description ??
-    subText ??
-    'A hero section for selling a focused offer with clear messaging, visual depth, and direct action.'
-  const phaseStats = [
-    phase1 && { value: phase1, label: phase1Desc },
-    phase2 && { value: phase2, label: phase2Desc },
-    phase3 && { value: phase3, label: phase3Desc }
-  ].filter(Boolean) as StatItem[]
   const buttonItems = buttons as ButtonItem[]
-  const statItems = ((stats?.length ? stats : phaseStats) ?? []) as StatItem[]
+  const statItems = (stats ?? []) as StatItem[]
 
   const [bgLoaded, setBgLoaded] = useState(false)
 
@@ -126,7 +104,7 @@ export const DDHero: React.FC<DDHeroProps> = ({
 
       <div
         id={sectionId ?? undefined}
-        className="relative flex min-h-[72vh] w-full items-center overflow-hidden rounded-2xl"
+        className="relative min-h-screen flex items-center overflow-hidden"
       >
         {/* Background Image */}
         <div className="absolute inset-0">
@@ -164,20 +142,20 @@ export const DDHero: React.FC<DDHeroProps> = ({
         </div>
 
         {/* Content */}
-        <div className="relative z-10 mx-auto flex w-full max-w-6xl items-center px-6 py-20 md:px-10 lg:px-14">
-          <div className="max-w-3xl">
+        <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">
-                  {resolvedBadge}
+                  {badge.text}
                 </span>
               </div>
             )} */}
 
             {/* Badge - to convert to dynamic */}
-            {(badge?.show ?? Boolean(resolvedBadge)) && resolvedBadge && (
+            {badge?.show && badge.text && (
               <motion.div
                 variants={{
                   hidden: { opacity: 0, y: -20, filter: 'blur(6px)' },
@@ -188,16 +166,16 @@ export const DDHero: React.FC<DDHeroProps> = ({
                 <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" />
-                  {resolvedBadge}
+                  {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">
-              {resolvedHeadlineMain}
+              {headlineMain}
               <br />
-              <span className="text-stone-400">{resolvedHeadlineAccent}</span>
+              <span className="text-stone-400">{headlineAccent}</span>
             </h1> */}
 
             {/* Headline */}
@@ -211,9 +189,9 @@ export const DDHero: React.FC<DDHeroProps> = ({
               transition={{ duration: 0.6, ease: 'easeOut' }}
               style={{ filter: 'drop-shadow(3px 3px 1px #151515)' }}
             >
-              <span className="block text-left text-5xl font-semibold tracking-tight text-lime-300 drop-shadow-lg sm:text-6xl md:text-7xl">
+              <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. */}
-                {resolvedHeadlineMain}
+                {headlineMain}
               </span>
             </motion.div>
             <motion.div
@@ -226,18 +204,16 @@ export const DDHero: React.FC<DDHeroProps> = ({
               transition={{ duration: 0.6, ease: 'easeOut' }}
               style={{ filter: 'drop-shadow(3px 3px 1px #151515)' }}
             >
-              <span className="block text-left text-5xl font-semibold tracking-tight text-stone-50 drop-shadow-lg sm:text-6xl md:text-7xl">
+              <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. */}
-                {resolvedHeadlineAccent}
+                {headlineAccent}
               </span>
             </motion.div>
 
             {/* Description */}
             <TextFade direction="down" className="mt-10" delay={0.5}>
-              {resolvedDescription && (
-                <p className="mt-4 mb-0 max-w-2xl text-lg leading-relaxed text-stone-50/75">
-                  {resolvedDescription}
-                </p>
+              {description && (
+                <p className="text-stone-50/65 leading-relaxed mt-4 mb-0 max-w-xl">{description}</p>
               )}
             </TextFade>
 
@@ -279,7 +255,7 @@ export const DDHero: React.FC<DDHeroProps> = ({
                     href={(button as any).href ?? '#'}
                     className={
                       button.class ??
-                      'inline-flex items-center justify-center gap-2 rounded-full bg-lime-400 px-5 py-2.5 text-sm font-semibold text-stone-950 shadow-[0_0_28px_rgba(132,204,22,0.35)] transition-all duration-150 hover:bg-lime-300 hover:scale-[1.03] whitespace-nowrap'
+                      '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}
                   >

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

@@ -0,0 +1,50 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { Suspense } from 'react'
+
+import { cn } from '@/utilities/ui'
+
+const ThreeScene = dynamic(() => import('./ThreeScene'), {
+  ssr: false,
+})
+
+function LoadingDots() {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center gap-2">
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="w-2 h-2 rounded-full bg-indigo-500 dark:bg-indigo-300 animate-bounce"
+          style={{ animationDelay: `${i * 0.15}s` }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export type DDHeroPlasProps = {
+  blockType?: 'DD-HeroPlas'
+  blockName?: string | null
+  containerClass?: string
+}
+
+export function DDHeroPlas(props: DDHeroPlasProps) {
+  const { containerClass } = props
+
+  return (
+    <div
+      suppressHydrationWarning
+      className={cn(
+        'relative h-[520px] w-full overflow-hidden bg-stone-100 text-stone-900 dark:bg-stone-950 dark:text-stone-100',
+        containerClass,
+      )}
+    >
+      <Suspense fallback={<LoadingDots />}>
+        <ThreeScene />
+      </Suspense>
+    </div>
+  )
+}
+
+export default DDHeroPlas

package/templates/blocks/DD-HeroPlas/ThreeScene.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useState, useRef, type RefObject } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { BakeShadows, SoftShadows, useCursor } from '@react-three/drei'
+
+export default function ThreeScene({
+  eventSource,
+}: {
+  eventSource?: HTMLElement | RefObject<HTMLElement> | null
+}) {
+  return (
+    <div className="relative h-full w-full">
+      <Canvas
+        shadows
+        dpr={1.5}
+        camera={{ position: [-10, 10, 2], fov: 45 }}
+        // Allow the scene to stay interactive even when the canvas is visually "behind" other content.
+        // Pointer events are captured from `eventSource` (hero container), but the canvas itself
+        // does not block clicks on buttons/links.
+        eventSource={eventSource ?? undefined}
+        eventPrefix="client"
+        style={{ position: 'absolute', inset: 0, pointerEvents: eventSource ? 'none' : 'auto' }}
+      >
+        {/* Softer PCSS-style shadows (client-side) */}
+        <SoftShadows size={25} samples={12} focus={0.4} />
+        <Stage />
+        {Array.from({ length: 12 }, (_, i) => (
+          <Stair
+            key={i}
+            name={'stair-' + (i + 1)}
+            rotation={[-Math.PI / 2, 0, i / Math.PI / 2]}
+            position={[2 - Math.sin(i / 5) * 5, i * 0.5, 2 - Math.cos(i / 5) * 5]}
+            defaultColor={[5, 8, 9].includes(i) ? '#4f46e5' : i === 6 ? '#818cf8' : null}
+          />
+        ))}
+      </Canvas>
+    </div>
+  )
+}
+
+function Stair({
+  defaultColor = null,
+  ...props
+}: {
+  defaultColor?: string | null
+  [key: string]: any
+}) {
+  const ref = useRef()
+  const [hovered, setHovered] = useState(false)
+  const [clicked, setClicked] = useState<string | null>(defaultColor)
+  useFrame((state) =>
+    ref.current.scale.setScalar(hovered ? 1 + Math.sin(state.clock.elapsedTime * 10) / 50 : 1),
+  )
+  // Sets document.body.style.cursor: useCursor(flag, onPointerOver = 'pointer', onPointerOut = 'auto')
+  useCursor(hovered)
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      receiveShadow
+      castShadow
+      onClick={(e) => (
+        e.stopPropagation(),
+        setClicked((c) => (c === '#4f46e5' ? '#818cf8' : '#4f46e5'))
+      )}
+      onPointerOver={(e) => (e.stopPropagation(), setHovered(true))}
+      onPointerOut={(e) => setHovered(false)}
+    >
+      <boxGeometry args={[5, 8, 0.075]} />
+      <meshStandardMaterial
+        roughness={1}
+        transparent
+        opacity={0.6}
+        color={clicked ?? (hovered ? '#818cf8' : '#f5f5f4')}
+      />
+    </mesh>
+  )
+}
+
+function Stage() {
+  return (
+    <>
+      {/* Fill */}
+      <ambientLight intensity={0.4} />
+      {/* Main */}
+      <directionalLight
+        position={[1, 10, -2]}
+        intensity={1.5}
+        shadow-camera-far={70}
+        shadow-camera-left={-10}
+        shadow-camera-right={10}
+        shadow-camera-top={10}
+        shadow-camera-bottom={-10}
+        shadow-mapSize={[512, 512]}
+        castShadow
+      />
+      {/* Strip */}
+      <directionalLight position={[-10, -10, 2]} intensity={3} />
+      {/* Ground */}
+      <mesh receiveShadow rotation-x={-Math.PI / 2} position={[0, -0.75, 0]}>
+        <planeGeometry args={[20, 20]} />
+        <shadowMaterial opacity={0.25} />
+      </mesh>
+      {/* This freezes the shadow map, which is fast, but the model has to be static  */}
+      <BakeShadows />
+    </>
+  )
+}

package/templates/blocks/DD-HeroPlas/config.ts

@@ -0,0 +1,33 @@
+import type { Block } from 'payload'
+
+export const DDHeroPlas: Block = {
+  slug: 'DD-HeroPlas',
+  labels: {
+    singular: 'DD Hero Plastics',
+    plural: 'DD Hero Plastics',
+  },
+  interfaceName: 'DDHeroPlas',
+  fields: [
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class',
+      },
+      type: 'collapsible',
+      label: 'Add container class',
+      fields: [
+        {
+          name: 'containerClass',
+          type: 'textarea',
+          label: false,
+          required: false,
+          admin: {
+            description: 'Optional Tailwind/CSS classes applied to the block container.',
+          },
+        },
+      ],
+    },
+  ],
+}
+
+export default DDHeroPlas