blocks-dusted 0.1.1 → 0.1.2

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

@@ -1,155 +1,149 @@
-"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-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}#BlockName-DDProcess
+          <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>
+    </>
+  )
+}