blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,51 +1,54 @@
-import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
-
-import { cn } from '@/utilities/ui'
-import React from 'react'
-import RichText from '@/components/RichText'
-
-// Shared ::before overlay (lines.svg texture) applied to all banner variants
-const BANNER_BEFORE_CLS =
-  'relative z-0 ' +
-  "before:content-[''] before:absolute before:inset-0 before:z-[-1] " +
-  'before:bg-[url(/assets/svg/lines.svg)] before:bg-[length:10px_10px] ' +
-  'before:bg-repeat before:opacity-100 before:pointer-events-none'
-
-type Props = {
-  className?: string
-  wrapperClassName?: string
-} & BannerBlockProps
-
-export const BannerBlock: React.FC<Props> = ({ className, wrapperClassName, content, style }) => {
-  return (
-    <div className={cn('mx-auto my-8 w-full banner_container', className)}>
-      <div
-        className={cn(
-          wrapperClassName,
-          'border py-3 pl-0 pr-3 flex items-center rounded shadow-2xl banner_content',
-          BANNER_BEFORE_CLS,
-          {
-            'banner-info border-[var(--border)] bg-card text-[var(--black)] [box-shadow:inset_0_0_2px_0px_var(--border),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--border)]':
-              style === 'info',
-            'banner-error border-[var(--error-border)] bg-[var(--error)] text-[var(--white)] [box-shadow:inset_0_0_2px_0px_var(--error),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--error-border)] text-stone-200 dark:text-stone-200':
-              style === 'error',
-            'banner-success border-[var(--success-border)] bg-[var(--success)] text-[var(--white)] [box-shadow:inset_0_0_2px_0px_var(--success),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--success-border)] text-stone-200 dark:text-stone-200':
-              style === 'success',
-            'banner-warning border-[var(--warning-border)] bg-[var(--warning)] text-white [box-shadow:inset_0_0_2px_0px_var(--warning),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--warning-border)]':
-              style === 'warning',
-          }
-        )}
-      >
-        <RichText
-          data={content}
-          className="banner_richtext"
-          enableGutter={false}
-          enableProse={true}
-        />
-      </div>
-    </div>
-  )
-}
-
-export const DDBanner = BannerBlock
-export default DDBanner
+type BannerBlockProps = {
+  content?: any
+  style?: 'info' | 'warning' | 'error' | 'success'
+}
+
+import { cn } from '@/utilities/ui'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+// Shared ::before overlay (lines.svg texture) applied to all banner variants
+const BANNER_BEFORE_CLS =
+  'relative z-0 ' +
+  "before:content-[''] before:absolute before:inset-0 before:z-[-1] " +
+  'before:bg-lines before:bg-[length:10px_10px] ' +
+  'before:bg-repeat before:opacity-100 before:pointer-events-none'
+
+type Props = {
+  className?: string
+  wrapperClassName?: string
+} & BannerBlockProps
+
+export const BannerBlock: React.FC<Props> = ({ className, wrapperClassName, content, style }) => {
+  return (
+    <div className={cn('mx-auto my-8 w-full banner_container', className)}>
+      <div
+        className={cn(
+          wrapperClassName,
+          'border py-3 pl-0 pr-3 flex items-center rounded shadow-2xl banner_content',
+          BANNER_BEFORE_CLS,
+          {
+            'banner-info border-[var(--border)] bg-card text-[var(--black)] [box-shadow:inset_0_0_2px_0px_var(--border),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--border)]':
+              style === 'info',
+            'banner-error border-[var(--error-border)] bg-[var(--error)] text-[var(--white)] [box-shadow:inset_0_0_2px_0px_var(--error),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--error-border)] text-stone-800 dark:text-stone-200':
+              style === 'error',
+            'banner-success border-[var(--success-border)] bg-[var(--success)] text-[var(--white)] [box-shadow:inset_0_0_2px_0px_var(--success),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--success-border)] text-stone-800 dark:text-stone-200':
+              style === 'success',
+            'banner-warning border-[var(--warning-border)] bg-[var(--warning)] text-white [box-shadow:inset_0_0_2px_0px_var(--warning),var(--shadow-xl)] [&_blockquote]:!border-s-[var(--warning-border)]':
+              style === 'warning',
+          },
+        )}
+      >
+        <RichText
+          data={content}
+          className="banner_richtext"
+          enableGutter={false}
+          enableProse={true}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const DDBanner = BannerBlock
+export default DDBanner

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

@@ -8,8 +8,9 @@ import {
   Globe,
   Clock,
   AlertCircle,
-  CalendarCheck
+  CalendarCheck,
 } from 'lucide-react'
+import { Input } from '@/components/ui/input'
 import { getClientSideURL } from '@/utilities/getURL'
 
 type Status = 'idle' | 'submitting' | 'success' | 'error'
@@ -69,7 +70,7 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
   timeSlots,
   footerNote,
   sectionId,
-  customCSS
+  customCSS,
 }) => {
   const [status, setStatus] = useState<Status>('idle')
   const [selectedType, setSelectedType] = useState<string>(callTypes?.[0]?.value ?? 'discovery')
@@ -107,14 +108,14 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
       { field: 'call_type', value: selectedType },
       { field: 'preferred_date', value: selectedDate },
       { field: 'preferred_time', value: selectedSlot },
-      { field: 'notes', value: data.get('notes') }
+      { field: 'notes', value: data.get('notes') },
     ]
 
     try {
       const res = await fetch(`${getClientSideURL()}/api/form-submissions`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ form: formID, submissionData })
+        body: JSON.stringify({ form: formID, submissionData }),
       })
 
       if (res.ok) {
@@ -137,7 +138,7 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
 
       <section
         id={sectionId ?? 'book-call'}
-        className="container-fluid mx-auto py-28 relative overflow-hidden"
+        className="py-28 bg-stone-50 dark:bg-stone-950 relative overflow-hidden"
       >
         {/* Background gradients – light & dark variants */}
         <div
@@ -156,7 +157,7 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
       bg-size-[60px_60px]"
         />
 
-        <div className="relative max-w-7xl lg:max-w-8xl mx-auto px-4 md:px-6">
+        <div className="relative max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
           {/* Header */}
           <div className="text-center mb-16">
             {eyebrow && (
@@ -405,12 +406,12 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
                         <label className="block text-xs text-stone-500 dark:text-stone-500 mb-1.5">
                           Time Zone
                         </label>
-                        <div className="flex h-10 w-full items-center gap-2.5 rounded-2xl squircle border border-stone-300 bg-stone-50/80 px-3 py-2 text-sm text-stone-900 outline-none backdrop-blur-[22px] transition-all duration-300 dark:border-stone-600 dark:bg-[#0e0e13] dark:text-stone-200">
+                        <div className="flex items-center gap-2.5 w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 backdrop-blur-[22px]">
                           <Globe
                             size={14}
                             className="text-stone-400 dark:text-stone-500 shrink-0"
                           />
-                          <span className="truncate text-sm text-stone-900 dark:text-stone-200">
+                          <span className="text-sm text-stone-700 dark:text-stone-400 truncate">
                             {Intl.DateTimeFormat().resolvedOptions().timeZone}
                           </span>
                         </div>
@@ -431,7 +432,7 @@ export const DDBookCall: React.FC<DDBookCallProps> = ({
                               onClick={() => setSelectedSlot(slot)}
                               className={`py-2 rounded-lg text-xs font-medium border transition-all cursor-pointer whitespace-nowrap ${
                                 selectedSlot === slot
-                                  ? 'bg-stone-900 dark:!bg-lime-950/50 text-stone-50 dark:text-lime-500 border-stone-900 dark:border-lime-500'
+                                  ? 'bg-stone-900 dark:bg-stone-50 text-stone-50 dark:text-stone-900 border-stone-900 dark:border-white'
                                   : 'bg-stone-100 dark:bg-stone-950 border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 hover:border-stone-300 dark:hover:border-stone-500 hover:text-stone-900 dark:hover:text-stone-200'
                               }`}
                             >

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

@@ -1,117 +1,118 @@
-'use client'
-
-import React, { useState, useRef } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { useClickOutside } from '@/hooks/useClickOutside'
-import { useBodyScrollLock } from '@/hooks/useBodyScrollLock'
-import { cn } from '@/utilities/ui'
-import RichText from '@/components/RichText'
-import DustSvg from './svg-icons/Dust2'
-
-interface PopButtonProps {
-  buttonLabel: string
-  richTextData: any
-  width?: string
-  height?: string
-  position?: 'left' | 'center' | 'right'
-  openMode?: 'popover' | 'modal'
-}
-
-export const DDButtonPop: React.FC<PopButtonProps> = ({
-  buttonLabel,
-  richTextData,
-  width = '360px',
-  height = '240px',
-  position = 'center',
-  openMode = 'popover'
-}) => {
-  const [open, setOpen] = useState(false)
-  const wrapperRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>
-
-  useClickOutside(wrapperRef, () => setOpen(false))
-
-  // Lock body scroll when modal mode is open
-  useBodyScrollLock(open && openMode === 'modal', 'buttonPopScrollY')
-
-  const alignmentClass =
-    position === 'left' ? 'justify-start' : position === 'right' ? 'justify-end' : 'justify-center'
-
-  return (
-    <div
-      className={cn('relative flex', alignmentClass)}
-      style={{ paddingBottom: open ? '50vh' : '1rem' }}
-    >
-      <motion.button
-        key={buttonLabel} // Fixed: Use buttonLabel as key instead of undefined idx
-        onClick={() => setOpen(true)}
-        className="rounded-md border bg-card px-4 py-2 text-sm font-medium shadow"
-      >
-        {buttonLabel}
-      </motion.button>
-
-      <AnimatePresence>
-        {open &&
-          (openMode === 'popover' ? (
-            <>
-              <motion.div
-                ref={wrapperRef}
-                key="popover"
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -10 }}
-                transition={{ duration: 0.2 }}
-                className={cn(
-                  'absolute z-20 rounded-sm bg-card p-4 shadow-lg border border-border'
-                )}
-                style={{ width, height, maxWidth: '100%', maxHeight: '100%' }}
-              >
-                <RichText data={richTextData} enableGutter={false} />
-              </motion.div>
-              {/* <TextFade direction="up" className="absolute z-10 w-full max-w-[8rem] h-auto"> */}
-              {/* <LottieFeathers className="absolute right-0 -top-[80px] z-0 rotate-[80deg] lottie-wrapper lottie popper-lottie" /> */}
-              {/* </TextFade> */}
-            </>
-          ) : (
-            <>
-              <motion.div
-                ref={wrapperRef}
-                key="modal"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
-                style={{ backdropFilter: 'blur(4px)' }}
-              >
-                <div className="card-wrapper relative flex items-center justify-center mx-4 p-1 bgTransBlur-light rounded-lg ">
-                  <div
-                    className="pop-modal-card transition-all duration-300 ease-in-out group relative"
-                    style={{
-                      width: width || '80%',
-                      maxWidth: '500px',
-                      maxHeight: '90vh',
-                      overflowY: 'auto'
-                    }}
-                  >
-                    <button
-                      onClick={() => setOpen(false)}
-                      className="relative right-0 ml-auto flex justify-end text-sm text-gray-500 transition-colors duration-150 hover:text-gray-700"
-                      style={{ background: 'none', border: 'none', cursor: 'pointer' }}
-                    >
-                      Close
-                    </button>
-                    <RichText
-                      data={richTextData}
-                      className="pop-modal-richtext"
-                      enableGutter={false}
-                    />
-                    <DustSvg className="dustsvg dust-svg-modal absolute opacity-0 -z-10 -mt-24 ml-32 scale-0 transition-all duration-300 ease-in-out group-hover:scale-[3] group-hover:opacity-100" />
-                  </div>
-                </div>
-              </motion.div>
-            </>
-          ))}
-      </AnimatePresence>
-    </div>
-  )
-}
+'use client'
+
+import React, { useState, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { useClickOutside } from '@/hooks/useClickOutside'
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock'
+import { cn } from '@/utilities/ui'
+import RichText from '@/components/RichText'
+import DustSvg from './svg-icons/Dust2'
+
+interface PopButtonProps {
+  buttonLabel: string
+  richTextData: any
+  width?: string
+  height?: string
+  position?: 'left' | 'center' | 'right'
+  openMode?: 'popover' | 'modal'
+}
+
+export const DDButtonPop: React.FC<PopButtonProps> = ({
+  buttonLabel,
+  richTextData,
+  width = '360px',
+  height = '240px',
+  position = 'center',
+  openMode = 'popover',
+}) => {
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>
+
+  useClickOutside(wrapperRef, () => setOpen(false))
+
+  // Lock body scroll when modal mode is open
+  useBodyScrollLock(open && openMode === 'modal', 'buttonPopScrollY')
+
+  const alignmentClass =
+    position === 'left' ? 'justify-start' : position === 'right' ? 'justify-end' : 'justify-center'
+
+  return (
+    <div
+      className={cn('relative flex', alignmentClass)}
+      style={{ paddingBottom: open ? '50vh' : '1rem' }}
+    >
+      <motion.button
+        key={buttonLabel} // Fixed: Use buttonLabel as key instead of undefined idx
+        onClick={() => setOpen(true)}
+        className="rounded-md border bg-card px-4 py-2 text-sm font-medium shadow"
+      >
+        {buttonLabel}
+      </motion.button>
+
+      <AnimatePresence>
+        {open &&
+          (openMode === 'popover' ? (
+            <>
+              <motion.div
+                ref={wrapperRef}
+                key="popover"
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.2 }}
+                className={cn(
+                  'absolute z-20 rounded-sm bg-card p-4 shadow-lg border border-border',
+                )}
+                style={{ width, height, maxWidth: '100%', maxHeight: '100%' }}
+              >
+                <RichText data={richTextData} enableGutter={false} />
+              </motion.div>
+              {/* <TextFade direction="up" className="absolute z-10 w-full max-w-[8rem] h-auto"> */}
+              {/* <LottieFeathers className="absolute right-0 -top-[80px] z-0 rotate-[80deg] lottie-wrapper lottie popper-lottie" /> */}
+              {/* </TextFade> */}
+            </>
+          ) : (
+            <>
+              <motion.div
+                ref={wrapperRef}
+                key="modal"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+                style={{ backdropFilter: 'blur(4px)' }}
+              >
+                <div className="card-wrapper relative flex justify-center mx-4 backdrop-blur-md rounded-lg min-h-fit items-start overflow-clip bg-[var(--background)] p-0">
+                  <div
+                    className="pop-modal-card transition-all duration-300 ease-in-out group relative p-4"
+                    style={{
+                      width: width || '80%',
+                      maxWidth: '500px',
+                      maxHeight: '90vh',
+                      overflowY: 'auto',
+                    }}
+                  >
+                    <button
+                      onClick={() => setOpen(false)}
+
+                      className="relative right-0 ml-auto flex justify-end text-sm text-gray-500 cursor-pointer rounded-[14px] border-0 bg-[#00000091] px-1 py-0.5 hover:text-[#af0000] backdrop-blur-[10px] drop-shadow-[2px_4px_6px_black] transition-colors duration-150"
+                      style={{ background: 'none', border: 'none', cursor: 'pointer' }}
+                    >
+                      Close
+                    </button>
+                    <RichText
+                      data={richTextData}
+                      className="pop-modal-richtext"
+                      enableGutter={false}
+                    />
+                    <DustSvg className="dustsvg dust-svg-modal absolute opacity-0 -z-10 -mt-24 ml-32 scale-0 transition-all duration-300 ease-in-out group-hover:scale-[3] group-hover:opacity-100" />
+                  </div>
+                </div>
+              </motion.div>
+            </>
+          ))}
+      </AnimatePresence>
+    </div>
+  )
+}

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

@@ -146,7 +146,7 @@ export const DDCard: React.FC<CardBlockProps> = ({
 }) => {
   if (!cards || cards.length === 0) return null
 
-  const baseClasses = ['card-block', 'flex', 'flex-wrap', 'justify-center', 'gap-0']
+  const baseClasses = ['card-block', 'mx-auto', 'grid', 'w-full', 'max-w-7xl', 'grid-cols-1', 'gap-6', 'sm:grid-cols-2', 'lg:grid-cols-3']
   const customBlockClasses = cards
     .map((card) => card.cardBlockClass || '')
     .join(' ')
@@ -166,7 +166,7 @@ export const DDCard: React.FC<CardBlockProps> = ({
         const CardContent = (
           <motion.div
             className={cn(
-              'border-0 mt-2 mb-2 shadow-md bg-card hover:cursor-pointer overflow-hidden rounded-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-lg w-full max-w-sm mx-auto',
+              'border-0 mt-2 mb-2 w-full overflow-hidden rounded-lg bg-card shadow-md transition-all duration-300 hover:cursor-pointer hover:scale-[1.02] hover:shadow-lg',
               card.customClass || card.cardBlockClass
             )}
             initial={{ opacity: 0, y: 40 }}
@@ -216,7 +216,7 @@ export const DDCard: React.FC<CardBlockProps> = ({
             <Link
               key={`card-link-${index}`}
               href={linkUrl}
-              className="card-block-content block"
+              className="card-block-content block w-full"
               style={{ textDecoration: 'none' }}
             >
               <motion.div data-scroll data-scroll-speed={cardScrollSpeed} className="card-wrapper">
@@ -235,7 +235,7 @@ export const DDCard: React.FC<CardBlockProps> = ({
             href={linkUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="card-external-content block"
+            className="card-external-content block w-full"
             style={{ textDecoration: 'none' }}
           >
             <motion.div data-scroll data-scroll-speed={cardScrollSpeed} className="card-wrapper">

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

@@ -18,7 +18,7 @@ function SpotlightCard({
   className,
   spotlightColor = 'rgba(214,211,209,0.08)',
   enableTilt = true,
-  style
+  style,
 }: SpotlightCardProps) {
   const cardRef = useRef<HTMLDivElement>(null)
   const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
@@ -53,7 +53,7 @@ function SpotlightCard({
           ? {
               ...style,
               transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
-              transition: 'transform 0.1s ease'
+              transition: 'transform 0.1s ease',
             }
           : style
       }
@@ -62,7 +62,7 @@ function SpotlightCard({
         <div
           className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
           style={{
-            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`
+            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`,
           }}
         />
       )}
@@ -93,7 +93,7 @@ export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
   minHeight = '220px',
   className,
   sectionId,
-  customCSS
+  customCSS,
 }) => {
   return (
     <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
@@ -103,7 +103,7 @@ export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
         enableTilt={enableTilt ?? true}
         className={cn(
           'border border-stone-50 dark:border-stone-950 bg-stone-100 dark:bg-stone-900 hover:shadow-2xl transition-all hover:transition-all duration-900 hover:duration-900 flex flex-col justify-between p-6 max-w-[100rem] mx-auto',
-          className
+          className,
         )}
         style={{ minHeight: minHeight ?? '220px' }}
       >