blocks-dusted 0.1.1 → 0.1.3

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

@@ -1,63 +1,60 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-"use client";
+'use client'
 
-import { useState, useEffect } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import dynamic from "next/dynamic";
-import { ArrowRight } from "lucide-react";
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import dynamic from 'next/dynamic'
+import { ArrowRight } from 'lucide-react'
 
 const DotLottieReact = dynamic(
-  () => import("@lottiefiles/dotlottie-react").then((m) => m.DotLottieReact),
+  () => import('@lottiefiles/dotlottie-react').then((m) => m.DotLottieReact),
   { ssr: false },
-);
+)
 
 /* ── Label color maps ─────────────────────────────────────────── */
 
 const labelColorMap: Record<string, string> = {
-  indigo: "text-indigo-400",
-  emerald: "text-emerald-400",
-  amber: "text-amber-400",
-  rose: "text-rose-400",
-  violet: "text-violet-400",
-  sky: "text-sky-400",
-};
-
-const exploreColorMap: Record<
-  string,
-  { base: string; hover: string; glow: string }
-> = {
+  indigo: 'text-indigo-400',
+  emerald: 'text-emerald-400',
+  amber: 'text-amber-400',
+  rose: 'text-rose-400',
+  violet: 'text-violet-400',
+  sky: 'text-sky-400',
+}
+
+const exploreColorMap: Record<string, { base: string; hover: string; glow: string }> = {
   indigo: {
-    base: "text-indigo-300",
-    hover: "group-hover:text-indigo-400",
-    glow: "rgba(99,102,241,0.08)",
+    base: 'text-indigo-300',
+    hover: 'group-hover:text-indigo-400',
+    glow: 'rgba(99,102,241,0.08)',
   },
   emerald: {
-    base: "text-emerald-300",
-    hover: "group-hover:text-emerald-400",
-    glow: "rgba(16,185,129,0.08)",
+    base: 'text-emerald-300',
+    hover: 'group-hover:text-emerald-400',
+    glow: 'rgba(16,185,129,0.08)',
   },
   amber: {
-    base: "text-amber-300",
-    hover: "group-hover:text-amber-400",
-    glow: "rgba(245,158,11,0.08)",
+    base: 'text-amber-300',
+    hover: 'group-hover:text-amber-400',
+    glow: 'rgba(245,158,11,0.08)',
   },
   rose: {
-    base: "text-rose-300",
-    hover: "group-hover:text-rose-400",
-    glow: "rgba(244,63,94,0.08)",
+    base: 'text-rose-300',
+    hover: 'group-hover:text-rose-400',
+    glow: 'rgba(244,63,94,0.08)',
   },
   violet: {
-    base: "text-violet-300",
-    hover: "group-hover:text-violet-400",
-    glow: "rgba(167,139,250,0.08)",
+    base: 'text-violet-300',
+    hover: 'group-hover:text-violet-400',
+    glow: 'rgba(167,139,250,0.08)',
   },
   sky: {
-    base: "text-sky-300",
-    hover: "group-hover:text-sky-400",
-    glow: "rgba(56,189,248,0.08)",
+    base: 'text-sky-300',
+    hover: 'group-hover:text-sky-400',
+    glow: 'rgba(56,189,248,0.08)',
   },
-};
+}
 
 /* ── Isometric SVG Icons ─────────────────────────────────────── */
 
@@ -69,32 +66,32 @@ function UIBlocksIcon({ hovered }: { hovered: boolean }) {
       xmlns="http://www.w3.org/2000/svg"
       className="w-full h-full"
       style={{
-        transition: "filter 0.4s ease",
-        filter: hovered ? "drop-shadow(0 0 12px rgba(99,102,241,0.7))" : "none",
+        transition: 'filter 0.4s ease',
+        filter: hovered ? 'drop-shadow(0 0 12px rgba(99,102,241,0.7))' : 'none',
       }}
     >
       <g
         style={{
-          transform: hovered ? "translateY(-4px)" : "translateY(0)",
-          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+          transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
+          transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
         }}
       >
         <polygon
           points="60,4 108,28 60,52 12,28"
-          fill={hovered ? "#312e81" : "#1e1b4b"}
-          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          fill={hovered ? '#312e81' : '#1e1b4b'}
+          stroke={hovered ? '#818cf8' : '#4f46e5'}
           strokeWidth="1.2"
         />
         <polygon
           points="12,28 12,58 60,82 60,52"
-          fill={hovered ? "#1e1b4b" : "#161430"}
-          stroke={hovered ? "#6366f1" : "#3730a3"}
+          fill={hovered ? '#1e1b4b' : '#161430'}
+          stroke={hovered ? '#6366f1' : '#3730a3'}
           strokeWidth="1.2"
         />
         <polygon
           points="108,28 108,58 60,82 60,52"
-          fill={hovered ? "#2e2a6e" : "#1a1740"}
-          stroke={hovered ? "#818cf8" : "#4338ca"}
+          fill={hovered ? '#2e2a6e' : '#1a1740'}
+          stroke={hovered ? '#818cf8' : '#4338ca'}
           strokeWidth="1.2"
         />
         <line
@@ -102,7 +99,7 @@ function UIBlocksIcon({ hovered }: { hovered: boolean }) {
           y1="4"
           x2="60"
           y2="52"
-          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          stroke={hovered ? '#818cf8' : '#4f46e5'}
           strokeWidth="0.6"
           strokeDasharray="3 3"
         />
@@ -111,7 +108,7 @@ function UIBlocksIcon({ hovered }: { hovered: boolean }) {
           y1="16"
           x2="84"
           y2="40"
-          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          stroke={hovered ? '#818cf8' : '#4f46e5'}
           strokeWidth="0.6"
           strokeDasharray="3 3"
         />
@@ -120,31 +117,31 @@ function UIBlocksIcon({ hovered }: { hovered: boolean }) {
           y1="16"
           x2="36"
           y2="40"
-          stroke={hovered ? "#818cf8" : "#4f46e5"}
+          stroke={hovered ? '#818cf8' : '#4f46e5'}
           strokeWidth="0.6"
           strokeDasharray="3 3"
         />
         <polygon
           points="60,14 78,23 60,32 42,23"
-          fill={hovered ? "#4f46e5" : "#312e81"}
-          stroke={hovered ? "#a5b4fc" : "#6366f1"}
+          fill={hovered ? '#4f46e5' : '#312e81'}
+          stroke={hovered ? '#a5b4fc' : '#6366f1'}
           strokeWidth="1"
         />
         <polygon
           points="42,23 42,33 60,42 60,32"
-          fill={hovered ? "#3730a3" : "#1e1b4b"}
-          stroke={hovered ? "#818cf8" : "#4338ca"}
+          fill={hovered ? '#3730a3' : '#1e1b4b'}
+          stroke={hovered ? '#818cf8' : '#4338ca'}
           strokeWidth="1"
         />
         <polygon
           points="78,23 78,33 60,42 60,32"
-          fill={hovered ? "#4338ca" : "#272466"}
-          stroke={hovered ? "#a5b4fc" : "#6366f1"}
+          fill={hovered ? '#4338ca' : '#272466'}
+          stroke={hovered ? '#a5b4fc' : '#6366f1'}
           strokeWidth="1"
         />
       </g>
     </svg>
-  );
+  )
 }
 
 function TemplatesIcon({ hovered }: { hovered: boolean }) {
@@ -155,32 +152,32 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
       xmlns="http://www.w3.org/2000/svg"
       className="w-full h-full"
       style={{
-        transition: "filter 0.4s ease",
-        filter: hovered ? "drop-shadow(0 0 12px rgba(16,185,129,0.6))" : "none",
+        transition: 'filter 0.4s ease',
+        filter: hovered ? 'drop-shadow(0 0 12px rgba(16,185,129,0.6))' : 'none',
       }}
     >
       <g
         style={{
-          transform: hovered ? "translateY(-4px)" : "translateY(0)",
-          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+          transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
+          transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
         }}
       >
         <polygon
           points="60,6 104,30 60,54 16,30"
-          fill={hovered ? "#064e3b" : "#022c22"}
-          stroke={hovered ? "#34d399" : "#059669"}
+          fill={hovered ? '#064e3b' : '#022c22'}
+          stroke={hovered ? '#34d399' : '#059669'}
           strokeWidth="1.2"
         />
         <polygon
           points="16,30 16,60 60,84 60,54"
-          fill={hovered ? "#022c22" : "#011a15"}
-          stroke={hovered ? "#10b981" : "#047857"}
+          fill={hovered ? '#022c22' : '#011a15'}
+          stroke={hovered ? '#10b981' : '#047857'}
           strokeWidth="1.2"
         />
         <polygon
           points="104,30 104,60 60,84 60,54"
-          fill={hovered ? "#043927" : "#011a15"}
-          stroke={hovered ? "#34d399" : "#059669"}
+          fill={hovered ? '#043927' : '#011a15'}
+          stroke={hovered ? '#34d399' : '#059669'}
           strokeWidth="1.2"
         />
         <line
@@ -188,7 +185,7 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
           y1="30"
           x2="60"
           y2="16"
-          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
           strokeWidth="1"
           opacity="0.7"
         />
@@ -197,7 +194,7 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
           y1="36"
           x2="60"
           y2="22"
-          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
           strokeWidth="0.8"
           opacity="0.5"
         />
@@ -206,7 +203,7 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
           y1="42"
           x2="52"
           y2="30"
-          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
           strokeWidth="0.8"
           opacity="0.4"
         />
@@ -215,7 +212,7 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
           y1="22"
           x2="96"
           y2="34"
-          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
           strokeWidth="1"
           opacity="0.7"
         />
@@ -224,7 +221,7 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
           y1="28"
           x2="90"
           y2="37"
-          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
           strokeWidth="0.8"
           opacity="0.5"
         />
@@ -233,7 +230,7 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
           y1="34"
           x2="84"
           y2="40"
-          stroke={hovered ? "#6ee7b7" : "#34d399"}
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
           strokeWidth="0.8"
           opacity="0.4"
         />
@@ -242,13 +239,13 @@ function TemplatesIcon({ hovered }: { hovered: boolean }) {
           y1="12"
           x2="66"
           y2="50"
-          stroke={hovered ? "#34d399" : "#059669"}
+          stroke={hovered ? '#34d399' : '#059669'}
           strokeWidth="0.8"
           strokeDasharray="2 2"
         />
       </g>
     </svg>
-  );
+  )
 }
 
 function UIKitIcon({ hovered }: { hovered: boolean }) {
@@ -259,133 +256,109 @@ function UIKitIcon({ hovered }: { hovered: boolean }) {
       xmlns="http://www.w3.org/2000/svg"
       className="w-full h-full"
       style={{
-        transition: "filter 0.4s ease",
-        filter: hovered ? "drop-shadow(0 0 12px rgba(245,158,11,0.6))" : "none",
+        transition: 'filter 0.4s ease',
+        filter: hovered ? 'drop-shadow(0 0 12px rgba(245,158,11,0.6))' : 'none',
       }}
     >
       <g
         style={{
-          transform: hovered ? "translateY(-4px)" : "translateY(0)",
-          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+          transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
+          transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
         }}
       >
         <polygon
           points="60,42 100,62 60,82 20,62"
-          fill={hovered ? "#451a03" : "#27100a"}
-          stroke={hovered ? "#f59e0b" : "#b45309"}
+          fill={hovered ? '#451a03' : '#27100a'}
+          stroke={hovered ? '#f59e0b' : '#b45309'}
           strokeWidth="1.2"
         />
         <polygon
           points="20,52 20,62 60,82 60,72"
-          fill={hovered ? "#27100a" : "#1a0a05"}
-          stroke={hovered ? "#d97706" : "#92400e"}
+          fill={hovered ? '#27100a' : '#1a0a05'}
+          stroke={hovered ? '#d97706' : '#92400e'}
           strokeWidth="1"
         />
         <polygon
           points="100,52 100,62 60,82 60,72"
-          fill={hovered ? "#3b1a06" : "#1a0a05"}
-          stroke={hovered ? "#f59e0b" : "#b45309"}
+          fill={hovered ? '#3b1a06' : '#1a0a05'}
+          stroke={hovered ? '#f59e0b' : '#b45309'}
           strokeWidth="1"
         />
         <polygon
           points="60,26 100,46 60,66 20,46"
-          fill={hovered ? "#78350f" : "#451a03"}
-          stroke={hovered ? "#fbbf24" : "#d97706"}
+          fill={hovered ? '#78350f' : '#451a03'}
+          stroke={hovered ? '#fbbf24' : '#d97706'}
           strokeWidth="1.2"
         />
         <polygon
           points="20,36 20,46 60,66 60,56"
-          fill={hovered ? "#451a03" : "#27100a"}
-          stroke={hovered ? "#f59e0b" : "#b45309"}
+          fill={hovered ? '#451a03' : '#27100a'}
+          stroke={hovered ? '#f59e0b' : '#b45309'}
           strokeWidth="1"
         />
         <polygon
           points="100,36 100,46 60,66 60,56"
-          fill={hovered ? "#5c2a07" : "#2d1108"}
-          stroke={hovered ? "#fbbf24" : "#d97706"}
+          fill={hovered ? '#5c2a07' : '#2d1108'}
+          stroke={hovered ? '#fbbf24' : '#d97706'}
           strokeWidth="1"
         />
         <polygon
           points="60,10 100,30 60,50 20,30"
-          fill={hovered ? "#92400e" : "#78350f"}
-          stroke={hovered ? "#fcd34d" : "#fbbf24"}
+          fill={hovered ? '#92400e' : '#78350f'}
+          stroke={hovered ? '#fcd34d' : '#fbbf24'}
           strokeWidth="1.2"
         />
         <polygon
           points="20,20 20,30 60,50 60,40"
-          fill={hovered ? "#78350f" : "#451a03"}
-          stroke={hovered ? "#fbbf24" : "#d97706"}
+          fill={hovered ? '#78350f' : '#451a03'}
+          stroke={hovered ? '#fbbf24' : '#d97706'}
           strokeWidth="1"
         />
         <polygon
           points="100,20 100,30 60,50 60,40"
-          fill={hovered ? "#7c3a0e" : "#4a2008"}
-          stroke={hovered ? "#fcd34d" : "#fbbf24"}
+          fill={hovered ? '#7c3a0e' : '#4a2008'}
+          stroke={hovered ? '#fcd34d' : '#fbbf24'}
           strokeWidth="1"
         />
-        <circle
-          cx="44"
-          cy="28"
-          r="2.5"
-          fill={hovered ? "#fcd34d" : "#fbbf24"}
-          opacity="0.9"
-        />
-        <circle
-          cx="60"
-          cy="20"
-          r="2.5"
-          fill={hovered ? "#fcd34d" : "#fbbf24"}
-          opacity="0.9"
-        />
-        <circle
-          cx="76"
-          cy="28"
-          r="2.5"
-          fill={hovered ? "#fcd34d" : "#fbbf24"}
-          opacity="0.9"
-        />
+        <circle cx="44" cy="28" r="2.5" fill={hovered ? '#fcd34d' : '#fbbf24'} opacity="0.9" />
+        <circle cx="60" cy="20" r="2.5" fill={hovered ? '#fcd34d' : '#fbbf24'} opacity="0.9" />
+        <circle cx="76" cy="28" r="2.5" fill={hovered ? '#fcd34d' : '#fbbf24'} opacity="0.9" />
       </g>
     </svg>
-  );
+  )
 }
 
 const iconMap: Record<string, React.FC<{ hovered: boolean }>> = {
   uiBlocks: UIBlocksIcon,
   templates: TemplatesIcon,
   uiKit: UIKitIcon,
-};
+}
 
 /* ── Icon renderer ───────────────────────────────────────────── */
 
 type MediaLike = {
-  url?: string | null;
-  mimeType?: string | null;
-  filename?: string | null;
-};
+  url?: string | null
+  mimeType?: string | null
+  filename?: string | null
+}
 
 function isLocalMediaSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
 }
 
-function CardIconMedia({
-  media,
-  hovered,
-}: {
-  media: MediaLike;
-  hovered: boolean;
-}) {
-  const url = media.url ?? "";
-  const safeUrl = isLocalMediaSrc(url) ? url : "";
-  const mime = media.mimeType ?? "";
-  const filename = media.filename ?? "";
+function CardIconMedia({ media, hovered }: { media: MediaLike; hovered: boolean }) {
+  const url = media.url ?? ''
+  const safeUrl = isLocalMediaSrc(url) ? url : ''
+  const mime = media.mimeType ?? ''
+  const filename = media.filename ?? ''
   const isLottie =
-    mime === "application/json" ||
-    filename.endsWith(".lottie") ||
-    (mime === "application/octet-stream" && filename.endsWith(".lottie"));
-  const isDotLottie = filename.endsWith(".lottie");
-  const isJson = mime === "application/json" || filename.endsWith(".json");
+    mime === 'application/json' ||
+    filename.endsWith('.lottie') ||
+    (mime === 'application/octet-stream' && filename.endsWith('.lottie'))
+  const isDotLottie = filename.endsWith('.lottie')
+  const isJson = mime === 'application/json' || filename.endsWith('.json')
 
-  if (!safeUrl) return null;
+  if (!safeUrl) return null
 
   if (isDotLottie || isJson) {
     return (
@@ -394,13 +367,13 @@ function CardIconMedia({
         loop
         autoplay
         style={{
-          width: "100%",
-          height: "100%",
-          transform: hovered ? "scale(1.08)" : "scale(1)",
-          transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+          width: '100%',
+          height: '100%',
+          transform: hovered ? 'scale(1.08)' : 'scale(1)',
+          transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
         }}
       />
-    );
+    )
   }
 
   // SVG or raster image
@@ -411,16 +384,16 @@ function CardIconMedia({
       fill
       className="object-contain"
       style={{
-        transform: hovered ? "scale(1.08)" : "scale(1)",
-        transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+        transform: hovered ? 'scale(1.08)' : 'scale(1)',
+        transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
       }}
     />
-  );
+  )
 }
 
 /* ── Card ────────────────────────────────────────────────────── */
 
-type CardData = { [key: string]: any };
+type CardData = { [key: string]: any }
 
 function FeatureCard({
   card,
@@ -429,47 +402,43 @@ function FeatureCard({
   totalCards,
   isMobile,
 }: {
-  card: CardData;
-  index: number;
-  isLast: boolean;
-  totalCards: number;
-  isMobile: boolean;
+  card: CardData
+  index: number
+  isLast: boolean
+  totalCards: number
+  isMobile: boolean
 }) {
-  const [hovered, setHovered] = useState(false);
-  const colorKey = card.labelColor || "indigo";
-  const colors = exploreColorMap[colorKey] || exploreColorMap.indigo;
-  const labelClass = labelColorMap[colorKey] || labelColorMap.indigo;
-  const FallbackIcon = iconMap[card.iconType || "uiBlocks"] || UIBlocksIcon;
+  const [hovered, setHovered] = useState(false)
+  const colorKey = card.labelColor || 'indigo'
+  const colors = exploreColorMap[colorKey] || exploreColorMap.indigo
+  const labelClass = labelColorMap[colorKey] || labelColorMap.indigo
+  const FallbackIcon = iconMap[card.iconType || 'uiBlocks'] || UIBlocksIcon
   const iconMedia =
-    card.iconMedia &&
-    typeof card.iconMedia === "object" &&
-    (card.iconMedia as MediaLike).url
+    card.iconMedia && typeof card.iconMedia === 'object' && (card.iconMedia as MediaLike).url
       ? (card.iconMedia as MediaLike)
-      : null;
+      : null
 
   // On mobile, last card is full-width if total is odd
-  const isFullWidthOnMobile = isMobile && totalCards % 2 !== 0 && isLast;
+  const isFullWidthOnMobile = isMobile && totalCards % 2 !== 0 && isLast
 
-  let borderStyle: React.CSSProperties = {};
+  let borderStyle: React.CSSProperties = {}
   if (isMobile) {
-    const isEvenPosition = index % 2 === 0;
-    const isSecondRowOrLater = index >= 2;
+    const isEvenPosition = index % 2 === 0
+    const isSecondRowOrLater = index >= 2
     borderStyle = {
       borderRight:
         isEvenPosition && index + 1 < totalCards && !isFullWidthOnMobile
-          ? "1px solid rgba(255,255,255,0.07)"
-          : "none",
-      borderTop: isSecondRowOrLater
-        ? "1px solid rgba(255,255,255,0.07)"
-        : "none",
-    };
+          ? '1px solid rgba(255,255,255,0.07)'
+          : 'none',
+      borderTop: isSecondRowOrLater ? '1px solid rgba(255,255,255,0.07)' : 'none',
+    }
   } else {
     borderStyle = {
-      borderRight: !isLast ? "1px solid rgba(255,255,255,0.07)" : "none",
-    };
+      borderRight: !isLast ? '1px solid rgba(255,255,255,0.07)' : 'none',
+    }
   }
 
-  const cardClass = `group relative flex flex-col sm:flex-row items-start gap-4 sm:gap-6 px-5 py-7 sm:px-8 sm:py-10${card.href ? " cursor-pointer" : ""}${isFullWidthOnMobile ? "col-span-1" : ""}`;
+  const cardClass = `group relative flex flex-col sm:flex-row items-start gap-4 sm:gap-6 px-5 py-7 sm:px-8 sm:py-10${card.href ? ' cursor-pointer' : ''}${isFullWidthOnMobile ? 'col-span-1' : ''}`
 
   const innerContent = (
     <>
@@ -487,8 +456,8 @@ function FeatureCard({
         style={
           !iconMedia
             ? {
-                transform: hovered ? "scale(1.08)" : "scale(1)",
-                transition: "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)",
+                transform: hovered ? 'scale(1.08)' : 'scale(1)',
+                transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
               }
             : undefined
         }
@@ -504,7 +473,7 @@ function FeatureCard({
       <div className="relative flex flex-col gap-2 pt-1">
         <span
           className={`text-sm font-bold tracking-[0.15em] uppercase ${labelClass} transition-all duration-300`}
-          style={{ letterSpacing: hovered ? "0.2em" : "0.15em" }}
+          style={{ letterSpacing: hovered ? '0.2em' : '0.15em' }}
         >
           {card.label}
         </span>
@@ -519,15 +488,15 @@ function FeatureCard({
             <ArrowRight
               size={14}
               style={{
-                transform: hovered ? "translateX(4px)" : "translateX(0)",
-                transition: "transform 0.3s ease",
+                transform: hovered ? 'translateX(4px)' : 'translateX(0)',
+                transition: 'transform 0.3s ease',
               }}
             />
           </span>
         )}
       </div>
     </>
-  );
+  )
 
   if (card.href) {
     return (
@@ -540,7 +509,7 @@ function FeatureCard({
       >
         {innerContent}
       </Link>
-    );
+    )
   }
 
   return (
@@ -552,12 +521,12 @@ function FeatureCard({
     >
       {innerContent}
     </div>
-  );
+  )
 }
 
 /* ── Block ───────────────────────────────────────────────────── */
 
-export type DDFeatStripProps = Record<string, any>;
+export type DDFeatStripProps = Record<string, any>
 
 export const DDFeatStrip: React.FC<DDFeatStripProps> = ({
   cards,
@@ -565,27 +534,28 @@ export const DDFeatStrip: React.FC<DDFeatStripProps> = ({
   sectionId,
   customCSS,
 }) => {
-  if (!cards || cards.length === 0) return null;
+  if (!cards || cards.length === 0) return null
 
-  const cardItems = cards as CardData[];
-  const [isMobile, setIsMobile] = useState(false);
+  const cardItems = cards as CardData[]
+  const [isMobile, setIsMobile] = useState(false)
 
   useEffect(() => {
-    const check = () => setIsMobile(window.innerWidth < 768);
-    check();
-    window.addEventListener("resize", check);
-    return () => window.removeEventListener("resize", check);
-  }, []);
+    const check = () => setIsMobile(window.innerWidth < 768)
+    check()
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [])
 
-  const totalCards = cardItems.length;
+  const totalCards = cardItems.length
 
   return (
     <>
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
 
       <div id={sectionId ?? undefined} className="py-24">
+        #BlockName-DDFeatStrip
         <div
-          className={`w-full bg-stone-100 dark:bg-stone-950 border-t border-b border-white/6 ${containerClass || ""}`}
+          className={`w-full bg-stone-100 dark:bg-stone-950 border-t border-b border-white/6 ${containerClass || ''}`}
         >
           <div
             className="grid grid-cols-1"
@@ -611,5 +581,5 @@ export const DDFeatStrip: React.FC<DDFeatStripProps> = ({
         </div>
       </div>
     </>
-  );
-};
+  )
+}