blocks-dusted 0.1.12 → 0.1.13

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

@@ -1,140 +1,139 @@
-'use client'
-import React, { useRef, useState } from 'react'
-import * as LucideIcons from 'lucide-react'
-import { cn } from '@/utilities/ui'
-export type DDCardTemplate01Props = Record<string, any>
-
-// ─── SpotlightCard ────────────────────────────────────────────────────────────
-interface SpotlightCardProps {
-  children: React.ReactNode
-  className?: string
-  spotlightColor?: string
-  enableTilt?: boolean
-  style?: React.CSSProperties
-}
-
-function SpotlightCard({
-  children,
-  className,
-  spotlightColor = 'rgba(214,211,209,0.08)',
-  enableTilt = true,
-  style,
-}: SpotlightCardProps) {
-  const cardRef = useRef<HTMLDivElement>(null)
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
-  const [tilt, setTilt] = useState({ rx: 0, ry: 0 })
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return
-    const rect = cardRef.current.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    setPos({ x, y })
-    if (enableTilt) {
-      const rx = (y / rect.height - 0.5) * -10
-      const ry = (x / rect.width - 0.5) * 10
-      setTilt({ rx, ry })
-    }
-  }
-
-  const handleMouseLeave = () => {
-    setPos(null)
-    setTilt({ rx: 0, ry: 0 })
-  }
-
-  return (
-    <div
-      ref={cardRef}
-      className={cn('relative overflow-hidden', className)}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-      style={
-        enableTilt
-          ? {
-              ...style,
-              transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
-              transition: 'transform 0.1s ease',
-            }
-          : style
-      }
-    >
-      {pos && (
-        <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%)`,
-          }}
-        />
-      )}
-      <div className="relative z-10">{children}</div>
-    </div>
-  )
-}
-
-// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
-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} />
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
-  eyebrow,
-  headline,
-  description,
-  iconName = 'ShieldCheck',
-  glowColor = 'rgba(214,211,209,0.08)',
-  enableTilt = true,
-  minHeight = '220px',
-  className,
-  sectionId,
-  customCSS,
-}) => {
-  return (
-    <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-      <SpotlightCard
-        spotlightColor={glowColor ?? undefined}
-        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,
-        )}
-        style={{ minHeight: minHeight ?? '220px' }}
-      >
-        #BlockName-DDCardTemplate01
-        <div className="w-11 h-11 flex items-center justify-center rounded-xl border border-stone-300 text-stone-300 mb-6">
-          <DynamicIcon
-            className="text-stone-600 dark:text-stone-300"
-            name={iconName ?? 'ShieldCheck'}
-            size={20}
-          />
-        </div>
-        <div>
-          {eyebrow && (
-            <p className="text-xs font-semibold text-stone-600 dark:text-stone-400 tracking-widest uppercase mb-2">
-              {eyebrow}
-            </p>
-          )}
-          {headline && (
-            <h3 className="text-2xl font-semibold text-stone-900 dark:text-stone-50 mb-3">
-              {headline}
-            </h3>
-          )}
-          {description && (
-            <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed max-w-md">
-              {description}
-            </p>
-          )}
-        </div>
-      </SpotlightCard>
-    </div>
-  )
-}
-
-export default DDCardTemplate01
+'use client'
+import React, { useRef, useState } from 'react'
+import * as LucideIcons from 'lucide-react'
+import { cn } from '@/utilities/ui'
+export type DDCardTemplate01Props = Record<string, any>
+
+// ─── SpotlightCard ────────────────────────────────────────────────────────────
+interface SpotlightCardProps {
+  children: React.ReactNode
+  className?: string
+  spotlightColor?: string
+  enableTilt?: boolean
+  style?: React.CSSProperties
+}
+
+function SpotlightCard({
+  children,
+  className,
+  spotlightColor = 'rgba(214,211,209,0.08)',
+  enableTilt = true,
+  style,
+}: SpotlightCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+  const [tilt, setTilt] = useState({ rx: 0, ry: 0 })
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return
+    const rect = cardRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    setPos({ x, y })
+    if (enableTilt) {
+      const rx = (y / rect.height - 0.5) * -10
+      const ry = (x / rect.width - 0.5) * 10
+      setTilt({ rx, ry })
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setPos(null)
+    setTilt({ rx: 0, ry: 0 })
+  }
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn('relative overflow-hidden', className)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={
+        enableTilt
+          ? {
+              ...style,
+              transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
+              transition: 'transform 0.1s ease',
+            }
+          : style
+      }
+    >
+      {pos && (
+        <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%)`,
+          }}
+        />
+      )}
+      <div className="relative z-10">{children}</div>
+    </div>
+  )
+}
+
+// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
+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} />
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
+  eyebrow,
+  headline,
+  description,
+  iconName = 'ShieldCheck',
+  glowColor = 'rgba(214,211,209,0.08)',
+  enableTilt = true,
+  minHeight = '220px',
+  className,
+  sectionId,
+  customCSS,
+}) => {
+  return (
+    <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <SpotlightCard
+        spotlightColor={glowColor ?? undefined}
+        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,
+        )}
+        style={{ minHeight: minHeight ?? '220px' }}
+      >
+        <div className="w-11 h-11 flex items-center justify-center rounded-xl border border-stone-300 text-stone-300 mb-6">
+          <DynamicIcon
+            className="text-stone-600 dark:text-stone-300"
+            name={iconName ?? 'ShieldCheck'}
+            size={20}
+          />
+        </div>
+        <div>
+          {eyebrow && (
+            <p className="text-xs font-semibold text-stone-600 dark:text-stone-400 tracking-widest uppercase mb-2">
+              {eyebrow}
+            </p>
+          )}
+          {headline && (
+            <h3 className="text-2xl font-semibold text-stone-900 dark:text-stone-50 mb-3">
+              {headline}
+            </h3>
+          )}
+          {description && (
+            <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed max-w-md">
+              {description}
+            </p>
+          )}
+        </div>
+      </SpotlightCard>
+    </div>
+  )
+}
+
+export default DDCardTemplate01