blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,149 +1,147 @@
-'use client'
-import React from 'react'
-import * as LucideIcons from 'lucide-react'
-import { motion, type Variants } from 'framer-motion'
-export type DDProcessProps = Record<string, any>
-type StepItem = {
-  id?: string | null
-  iconName?: string | null
-  title?: string | null
-  description?: string | null
-  duration?: string | null
-}
-
-function DynamicIcon({
-  name,
-  size = 24,
-  ...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} />
-}
-
-// Enumerate all possible classes so Tailwind doesn't purge them
-const gridColsMap: Record<number, string> = {
-  1: 'lg:grid-cols-1',
-  2: 'lg:grid-cols-2',
-  3: 'lg:grid-cols-3',
-  4: 'lg:grid-cols-4',
-  5: 'lg:grid-cols-5',
-  6: 'lg:grid-cols-6',
-}
-
-const containerVariants: Variants = {
-  hidden: {},
-  show: {
-    transition: {
-      staggerChildren: 0.1,
-      delayChildren: 0.05,
-    },
-  },
-}
-
-const stepVariants: Variants = {
-  hidden: { opacity: 0, y: 28 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
-}
-
-export const DDProcess: React.FC<DDProcessProps> = ({
-  eyebrow,
-  headlineMain,
-  headlineAccent,
-  description,
-  steps,
-  sectionId,
-  customCSS,
-}) => {
-  const stepItems = (steps ?? []) as StepItem[]
-  const colCount = Math.min(stepItems.length || 4, 6)
-  const lgCols = gridColsMap[colCount] ?? 'lg:grid-cols-4'
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? 'process'} className="py-24">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}
-          <div className="text-center max-w-2xl mx-auto mb-16">
-            {eyebrow && (
-              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
-                {eyebrow}
-              </p>
-            )}
-            <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-5">
-              {headlineMain}
-              <br />
-              <span className="text-stone-400">{headlineAccent}</span>
-            </h2>
-            {description && (
-              <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
-                {description}
-              </p>
-            )}
-          </div>
-          {/* Steps */}
-          {stepItems.length > 0 && (
-            <div className="relative steps-container mb-4">
-              {/* Single connector line spanning icon centres */}
-              <div
-                className="hidden lg:block absolute top-10 h-px bg-indigo-700  z-0"
-                style={{
-                  left: `calc(100% / ${colCount} / 2)`,
-                  right: `calc(100% / ${colCount} / 2)`,
-                }}
-              />
-
-              <motion.div
-                className={`grid grid-cols-2 sm:grid-cols-2 ${lgCols} gap-8 sm:gap-6 relative z-10`}
-                variants={containerVariants}
-                initial="hidden"
-                whileInView="show"
-                viewport={{ once: false, amount: 0.2 }}
-              >
-                {stepItems.map((step, i) => (
-                  <motion.div
-                    key={step.id ?? i}
-                    className="flex flex-col items-start md:items-center text-left md:text-center justify-start md:justify-center p-4 border-zinc-700/0 border focus:outline-none group bg-lines rounded-md hover:rounded-lg hover:border hover:bg-stone-100 dark:hover:bg-stone-950/90 hover:shadow-2xl hover:border-indigo-500 duration-300 hover:duration-300 transition-all card-bottom-lit"
-                    variants={stepVariants}
-                  >
-                    {/* Circular icon with numbered badge */}
-                    <div className="w-20 h-20 mx-auto flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border-2 border-indigo-700 group-hover:border-indigo-500 -border-stone-700 mb-5 relative shrink-0">
-                      <DynamicIcon
-                        className="dark:text-indigo-400 text-indigo-700 group-hover:dark:text-lime-400 duration-300 transition-all"
-                        name={step.iconName}
-                        size={24}
-                      />
-                      <span className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border border-indigo-700 text-[10px] font-mono text-indigo-700 dark:text-indigo-400">
-                        {i + 1}
-                      </span>
-                    </div>
-
-                    {/* Duration badge */}
-                    {step.duration && (
-                      <div className="inline-flex items-center gap-1 bg-7 bg-stone-800 border border-stone-700 rounded-full px-2.5 py-0.5 mb-3 group-hover:bg-indigo-800 group-hover:border-indigo-600 dark:group-hover:border-lime-500">
-                        <LucideIcons.Clock size={10} className="text-stone-300" />
-                        <span className="text-[10px] text-stone-300 font-medium">
-                          {step.duration}
-                        </span>
-                      </div>
-                    )}
-
-                    <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-2">
-                      {step.title}
-                    </h3>
-                    <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed pb-8">
-                      {step.description}
-                    </p>
-                  </motion.div>
-                ))}
-              </motion.div>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}
+'use client'
+import React from 'react'
+import * as LucideIcons from 'lucide-react'
+import { motion, type Variants } from 'framer-motion'
+export type DDProcessProps = Record<string, any>
+type StepItem = {
+  id?: string | null
+  iconName?: string | null
+  title?: string | null
+  description?: string | null
+  duration?: string | null
+}
+
+function DynamicIcon({
+  name,
+  size = 24,
+  ...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} />
+}
+
+// Enumerate all possible classes so Tailwind doesn't purge them
+const gridColsMap: Record<number, string> = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.05,
+    },
+  },
+}
+
+const stepVariants: Variants = {
+  hidden: { opacity: 0, y: 28 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+}
+
+export const DDProcess: React.FC<DDProcessProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  steps,
+  sectionId,
+  customCSS,
+}) => {
+  const stepItems = (steps ?? []) as StepItem[]
+  const colCount = Math.min(stepItems.length || 4, 6)
+  const lgCols = gridColsMap[colCount] ?? 'lg:grid-cols-4'
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? 'process'} className="py-4">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}
+          <div className="text-center max-w-2xl mx-auto mb-16">
+            {eyebrow && (
+              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                {eyebrow}
+              </p>
+            )}
+            <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-5">
+              {headlineMain}
+              <br />
+              <span className="text-stone-400">{headlineAccent}</span>
+            </h2>
+            {description && (
+              <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
+                {description}
+              </p>
+            )}
+          </div>
+          {/* Steps */}
+          {stepItems.length > 0 && (
+            <div className="relative steps-container mb-4">
+              {/* Single connector line spanning icon centres */}
+              <div
+                className="hidden lg:block absolute top-10 h-px bg-indigo-700  z-0"
+                style={{
+                  left: `calc(100% / ${colCount} / 2)`,
+                  right: `calc(100% / ${colCount} / 2)`,
+                }}
+              />
+
+              <motion.div
+                className={`grid grid-cols-2 sm:grid-cols-2 ${lgCols} gap-8 sm:gap-6 relative z-10`}
+                variants={containerVariants}
+                initial="hidden"
+                whileInView="show"
+                viewport={{ once: false, amount: 0.2 }}
+              >
+                {stepItems.map((step, i) => (
+                  <motion.div
+                    key={step.id ?? i}
+                    className="flex flex-col items-start md:items-center text-left md:text-center justify-start md:justify-center p-4 border-zinc-700/0 border focus:outline-none group bg-lines rounded-md hover:rounded-lg hover:border hover:bg-stone-100 dark:hover:bg-stone-950/90 hover:shadow-2xl hover:border-indigo-500 duration-300 hover:duration-300 transition-all card-bottom-lit"
+                    variants={stepVariants}
+                  >
+                    {/* Circular icon with numbered badge */}
+                    <div className="w-20 h-20 mx-auto flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border-2 border-indigo-700 group-hover:border-indigo-500 -border-stone-700 mb-5 relative shrink-0">
+                      <DynamicIcon
+                        className="dark:text-indigo-400 text-indigo-700 group-hover:dark:text-lime-400 duration-300 transition-all"
+                        name={step.iconName}
+                        size={24}
+                      />
+                      <span className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border border-indigo-700 text-xs font-mono text-indigo-700 dark:text-indigo-400">
+                        {i + 1}
+                      </span>
+                    </div>
+
+                    {/* Duration badge */}
+                    {step.duration && (
+                      <div className="inline-flex items-center gap-1 bg-7 bg-stone-800 border border-stone-700 rounded-full px-2.5 py-0.5 mb-3 group-hover:bg-indigo-800 group-hover:border-indigo-600 dark:group-hover:border-lime-500">
+                        <LucideIcons.Clock size={10} className="text-stone-300" />
+                        <span className="text-xs text-stone-300 font-medium">{step.duration}</span>
+                      </div>
+                    )}
+
+                    <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-2">
+                      {step.title}
+                    </h3>
+                    <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed pb-8">
+                      {step.description}
+                    </p>
+                  </motion.div>
+                ))}
+              </motion.div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -1,141 +1,156 @@
-'use client'
-
-import React from 'react'
-import { motion, useInView } from 'framer-motion'
-import { cn } from '@/utilities/ui'
-
-export interface SkillItem {
-  label: string
-  percentage: number
-  color?: string
-  showPercentage?: boolean
-  id?: string
-}
-
-export interface ProgressSkillBlockProps {
-  skills?: SkillItem[]
-  containerClass?: string
-  labelClass?: string
-  progressBarClass?: string
-  percentageClass?: string
-  animationDuration?: number
-  animationDelay?: number
-  blockType?: string
-}
-
-export const DDProgress: React.FC<ProgressSkillBlockProps> = ({
-  skills = [],
-  containerClass = '',
-  labelClass = '',
-  progressBarClass = '',
-  percentageClass = '',
-  animationDuration = 1.5,
-  animationDelay = 0.2
-}) => {
-  if (!skills || skills.length === 0) {
-    return null
-  }
-
-  return (
-    <div className={cn('progress-skill-block w-full space-y-6 py-8', containerClass)}>
-      {skills.map((skill, index) => (
-        <SkillProgressBar
-          key={skill.id || `skill-${index}`}
-          skill={skill}
-          index={index}
-          labelClass={labelClass}
-          progressBarClass={progressBarClass}
-          percentageClass={percentageClass}
-          animationDuration={animationDuration}
-          animationDelay={animationDelay}
-        />
-      ))}
-    </div>
-  )
-}
-
-interface SkillProgressBarProps {
-  skill: SkillItem
-  index: number
-  labelClass: string
-  progressBarClass: string
-  percentageClass: string
-  animationDuration: number
-  animationDelay: number
-}
-
-const SkillProgressBar: React.FC<SkillProgressBarProps> = ({
-  skill,
-  index,
-  labelClass,
-  progressBarClass,
-  percentageClass,
-  animationDuration,
-  animationDelay
-}) => {
-  const ref = React.useRef(null)
-  const isInView = useInView(ref, { once: false, amount: 0.3 })
-
-  const progressVariants = {
-    hidden: { width: '0%' },
-    visible: {
-      width: `${skill.percentage}%`,
-      transition: {
-        duration: animationDuration,
-        delay: index * animationDelay,
-        ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number]
-      }
-    }
-  }
-
-  const percentageVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        duration: 0.3,
-        delay: index * animationDelay + animationDuration * 0.8
-      }
-    }
-  }
-
-  // Create unique class name from label (slugified)
-  const uniqueClass =
-    skill.id ||
-    skill.label
-      .toLowerCase()
-      .replace(/\s+/g, '-')
-      .replace(/[^a-z0-9-]/g, '')
-
-  return (
-    <div ref={ref} className={cn('skill-item w-full', `skill-${uniqueClass}`)}>
-      {/* Label and Percentage Row */}
-      <div className="flex justify-between items-center mb-1">
-        <div className={cn('text-lg font-medium text-white', labelClass)}>{skill.label}</div>
-        {skill.showPercentage !== false && (
-          <motion.span
-            className={cn('text-sm font-semibold text-white', percentageClass)}
-            variants={percentageVariants}
-            initial="hidden"
-            animate={isInView ? 'visible' : 'hidden'}
-          >
-            {skill.percentage} %
-          </motion.span>
-        )}
-      </div>
-
-      {/* Progress Bar Container */}
-      <div className="progress-bar-container relative w-full h-1.5 bg-zinc-700 overflow-hidden">
-        <motion.div
-          className={cn('progress-bar-fill absolute top-0 left-0 h-full', progressBarClass)}
-          style={{
-            backgroundColor: skill.color || '#9ACD32'
-          }}
-          variants={progressVariants}
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        />
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import React from 'react'
+import { motion, useInView } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+
+export interface SkillItem {
+  label: string
+  percentage: number
+  color?: string
+  showPercentage?: boolean
+  id?: string
+}
+
+export interface ProgressSkillBlockProps {
+  skills?: SkillItem[]
+  containerClass?: string
+  labelClass?: string
+  progressBarClass?: string
+  percentageClass?: string
+  animationDuration?: number
+  animationDelay?: number
+  blockType?: string
+}
+
+export const DDProgress: React.FC<ProgressSkillBlockProps> = ({
+  skills = [],
+  containerClass = '',
+  labelClass = '',
+  progressBarClass = '',
+  percentageClass = '',
+  animationDuration = 1.5,
+  animationDelay = 0.2,
+}) => {
+  if (!skills || skills.length === 0) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'progress-skill-block w-full space-y-6 py-8',
+        'max-w-7xl mx-auto',
+        containerClass,
+      )}
+    >
+      {skills.map((skill, index) => (
+        <SkillProgressBar
+          key={skill.id || `skill-${index}`}
+          skill={skill}
+          index={index}
+          labelClass={labelClass}
+          progressBarClass={progressBarClass}
+          percentageClass={percentageClass}
+          animationDuration={animationDuration}
+          animationDelay={animationDelay}
+        />
+      ))}
+    </div>
+  )
+}
+
+interface SkillProgressBarProps {
+  skill: SkillItem
+  index: number
+  labelClass: string
+  progressBarClass: string
+  percentageClass: string
+  animationDuration: number
+  animationDelay: number
+}
+
+const SkillProgressBar: React.FC<SkillProgressBarProps> = ({
+  skill,
+  index,
+  labelClass,
+  progressBarClass,
+  percentageClass,
+  animationDuration,
+  animationDelay,
+}) => {
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false, amount: 0.3 })
+
+  const progressVariants = {
+    hidden: { width: '0%' },
+    visible: {
+      width: `${skill.percentage}%`,
+      transition: {
+        duration: animationDuration,
+        delay: index * animationDelay,
+        ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number],
+      },
+    },
+  }
+
+  const percentageVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        delay: index * animationDelay + animationDuration * 0.8,
+      },
+    },
+  }
+
+  // Create unique class name from label (slugified)
+  const uniqueClass =
+    skill.id ||
+    skill.label
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[^a-z0-9-]/g, '')
+
+  return (
+    <div ref={ref} className={cn('skill-item w-full', `skill-${uniqueClass}`)}>
+      {/* Label and Percentage Row */}
+      <div className="flex justify-between items-center mb-1">
+        <div className={cn('text-md font-medium text-stone-700 dark:text-stone-200', labelClass)}>
+          {skill.label}
+        </div>
+        {skill.showPercentage !== false && (
+          <motion.span
+            className={cn(
+              'text-xl font-semibold text-stone-700 dark:text-stone-200',
+              percentageClass,
+            )}
+            variants={percentageVariants}
+            initial="hidden"
+            animate={isInView ? 'visible' : 'hidden'}
+          >
+            {skill.percentage} %
+          </motion.span>
+        )}
+      </div>
+
+      {/* Progress Bar Container */}
+      <div className="progress-bar-container relative w-full h-1.5 bg-zinc-700/50 overflow-hidden">
+        <motion.div
+          className={cn(
+            'progress-bar-fill absolute top-0 left-0 h-full',
+            'bg-indigo-500',
+            progressBarClass,
+          )}
+          style={{
+            backgroundColor: skill.color || '#9ACD32',
+          }}
+          variants={progressVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        />
+      </div>
+    </div>
+  )
+}