blocks-dusted 0.1.12 → 0.1.13

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

@@ -1,585 +1,584 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-'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'
-
-const DotLottieReact = dynamic(
-  () => 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: {
-    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)',
-  },
-  amber: {
-    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)',
-  },
-  violet: {
-    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)',
-  },
-}
-
-/* ── Isometric SVG Icons ─────────────────────────────────────── */
-
-function UIBlocksIcon({ hovered }: { hovered: boolean }) {
-  return (
-    <svg
-      viewBox="0 0 120 90"
-      fill="none"
-      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',
-      }}
-    >
-      <g
-        style={{
-          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'}
-          strokeWidth="1.2"
-        />
-        <polygon
-          points="12,28 12,58 60,82 60,52"
-          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'}
-          strokeWidth="1.2"
-        />
-        <line
-          x1="60"
-          y1="4"
-          x2="60"
-          y2="52"
-          stroke={hovered ? '#818cf8' : '#4f46e5'}
-          strokeWidth="0.6"
-          strokeDasharray="3 3"
-        />
-        <line
-          x1="36"
-          y1="16"
-          x2="84"
-          y2="40"
-          stroke={hovered ? '#818cf8' : '#4f46e5'}
-          strokeWidth="0.6"
-          strokeDasharray="3 3"
-        />
-        <line
-          x1="84"
-          y1="16"
-          x2="36"
-          y2="40"
-          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'}
-          strokeWidth="1"
-        />
-        <polygon
-          points="42,23 42,33 60,42 60,32"
-          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'}
-          strokeWidth="1"
-        />
-      </g>
-    </svg>
-  )
-}
-
-function TemplatesIcon({ hovered }: { hovered: boolean }) {
-  return (
-    <svg
-      viewBox="0 0 120 90"
-      fill="none"
-      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',
-      }}
-    >
-      <g
-        style={{
-          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'}
-          strokeWidth="1.2"
-        />
-        <polygon
-          points="16,30 16,60 60,84 60,54"
-          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'}
-          strokeWidth="1.2"
-        />
-        <line
-          x1="30"
-          y1="30"
-          x2="60"
-          y2="16"
-          stroke={hovered ? '#6ee7b7' : '#34d399'}
-          strokeWidth="1"
-          opacity="0.7"
-        />
-        <line
-          x1="30"
-          y1="36"
-          x2="60"
-          y2="22"
-          stroke={hovered ? '#6ee7b7' : '#34d399'}
-          strokeWidth="0.8"
-          opacity="0.5"
-        />
-        <line
-          x1="30"
-          y1="42"
-          x2="52"
-          y2="30"
-          stroke={hovered ? '#6ee7b7' : '#34d399'}
-          strokeWidth="0.8"
-          opacity="0.4"
-        />
-        <line
-          x1="72"
-          y1="22"
-          x2="96"
-          y2="34"
-          stroke={hovered ? '#6ee7b7' : '#34d399'}
-          strokeWidth="1"
-          opacity="0.7"
-        />
-        <line
-          x1="72"
-          y1="28"
-          x2="90"
-          y2="37"
-          stroke={hovered ? '#6ee7b7' : '#34d399'}
-          strokeWidth="0.8"
-          opacity="0.5"
-        />
-        <line
-          x1="72"
-          y1="34"
-          x2="84"
-          y2="40"
-          stroke={hovered ? '#6ee7b7' : '#34d399'}
-          strokeWidth="0.8"
-          opacity="0.4"
-        />
-        <line
-          x1="66"
-          y1="12"
-          x2="66"
-          y2="50"
-          stroke={hovered ? '#34d399' : '#059669'}
-          strokeWidth="0.8"
-          strokeDasharray="2 2"
-        />
-      </g>
-    </svg>
-  )
-}
-
-function UIKitIcon({ hovered }: { hovered: boolean }) {
-  return (
-    <svg
-      viewBox="0 0 120 90"
-      fill="none"
-      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',
-      }}
-    >
-      <g
-        style={{
-          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'}
-          strokeWidth="1.2"
-        />
-        <polygon
-          points="20,52 20,62 60,82 60,72"
-          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'}
-          strokeWidth="1"
-        />
-        <polygon
-          points="60,26 100,46 60,66 20,46"
-          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'}
-          strokeWidth="1"
-        />
-        <polygon
-          points="100,36 100,46 60,66 60,56"
-          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'}
-          strokeWidth="1.2"
-        />
-        <polygon
-          points="20,20 20,30 60,50 60,40"
-          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'}
-          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" />
-      </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
-}
-
-function isLocalMediaSrc(src?: string | null): src is string {
-  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 ?? ''
-  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')
-
-  if (!safeUrl) return null
-
-  if (isDotLottie || isJson) {
-    return (
-      <DotLottieReact
-        src={safeUrl}
-        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)',
-        }}
-      />
-    )
-  }
-
-  // SVG or raster image
-  return (
-    <Image
-      src={safeUrl}
-      alt=""
-      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)',
-      }}
-    />
-  )
-}
-
-/* ── Card ────────────────────────────────────────────────────── */
-
-type CardData = { [key: string]: any }
-
-function FeatureCard({
-  card,
-  index,
-  isLast,
-  totalCards,
-  isMobile,
-}: {
-  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 iconMedia =
-    card.iconMedia && typeof card.iconMedia === 'object' && (card.iconMedia as MediaLike).url
-      ? (card.iconMedia as MediaLike)
-      : null
-
-  // On mobile, last card is full-width if total is odd
-  const isFullWidthOnMobile = isMobile && totalCards % 2 !== 0 && isLast
-
-  let borderStyle: React.CSSProperties = {}
-  if (isMobile) {
-    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',
-    }
-  } else {
-    borderStyle = {
-      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 innerContent = (
-    <>
-      {/* Hover bg glow */}
-      <div
-        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
-        style={{
-          background: `radial-gradient(ellipse at 30% 50%, ${colors.glow} 0%, transparent 70%)`,
-        }}
-      />
-
-      {/* Icon */}
-      <div
-        className="relative shrink-0 w-14 h-11 sm:w-20 sm:h-16"
-        style={
-          !iconMedia
-            ? {
-                transform: hovered ? 'scale(1.08)' : 'scale(1)',
-                transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
-              }
-            : undefined
-        }
-      >
-        {iconMedia ? (
-          <CardIconMedia media={iconMedia} hovered={hovered} />
-        ) : (
-          <FallbackIcon hovered={hovered} />
-        )}
-      </div>
-
-      {/* Text */}
-      <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' }}
-        >
-          {card.label}
-        </span>
-        <p className="text-sm md:text-md text-stone-700 dark:text-stone-400 leading-relaxed  transition-colors duration-300">
-          {card.description}
-        </p>
-        {card.href && (
-          <span
-            className={`inline-flex items-center gap-1 text-sm font-medium mt-4 transition-all duration-300 ${colors.base} ${colors.hover}`}
-          >
-            Explore
-            <ArrowRight
-              size={14}
-              style={{
-                transform: hovered ? 'translateX(4px)' : 'translateX(0)',
-                transition: 'transform 0.3s ease',
-              }}
-            />
-          </span>
-        )}
-      </div>
-    </>
-  )
-
-  if (card.href) {
-    return (
-      <Link
-        href={card.href}
-        className={cardClass}
-        style={borderStyle}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-      >
-        {innerContent}
-      </Link>
-    )
-  }
-
-  return (
-    <div
-      className={cardClass}
-      style={borderStyle}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {innerContent}
-    </div>
-  )
-}
-
-/* ── Block ───────────────────────────────────────────────────── */
-
-export type DDFeatStripProps = Record<string, any>
-
-export const DDFeatStrip: React.FC<DDFeatStripProps> = ({
-  cards,
-  containerClass,
-  sectionId,
-  customCSS,
-}) => {
-  if (!cards || cards.length === 0) return null
-
-  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 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 || ''}`}
-        >
-          <div
-            className="grid grid-cols-1"
-            style={
-              !isMobile
-                ? {
-                    gridTemplateColumns: `repeat(${totalCards}, minmax(0, 1fr))`,
-                  }
-                : undefined
-            }
-          >
-            {cardItems.map((card, i) => (
-              <FeatureCard
-                key={card.id ?? i}
-                card={card}
-                index={i}
-                isLast={i === totalCards - 1}
-                totalCards={totalCards}
-                isMobile={isMobile}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
+/* eslint-disable react-hooks/rules-of-hooks */
+'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'
+
+const DotLottieReact = dynamic(
+  () => 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: {
+    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)',
+  },
+  amber: {
+    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)',
+  },
+  violet: {
+    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)',
+  },
+}
+
+/* ── Isometric SVG Icons ─────────────────────────────────────── */
+
+function UIBlocksIcon({ hovered }: { hovered: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 120 90"
+      fill="none"
+      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',
+      }}
+    >
+      <g
+        style={{
+          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'}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="12,28 12,58 60,82 60,52"
+          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'}
+          strokeWidth="1.2"
+        />
+        <line
+          x1="60"
+          y1="4"
+          x2="60"
+          y2="52"
+          stroke={hovered ? '#818cf8' : '#4f46e5'}
+          strokeWidth="0.6"
+          strokeDasharray="3 3"
+        />
+        <line
+          x1="36"
+          y1="16"
+          x2="84"
+          y2="40"
+          stroke={hovered ? '#818cf8' : '#4f46e5'}
+          strokeWidth="0.6"
+          strokeDasharray="3 3"
+        />
+        <line
+          x1="84"
+          y1="16"
+          x2="36"
+          y2="40"
+          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'}
+          strokeWidth="1"
+        />
+        <polygon
+          points="42,23 42,33 60,42 60,32"
+          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'}
+          strokeWidth="1"
+        />
+      </g>
+    </svg>
+  )
+}
+
+function TemplatesIcon({ hovered }: { hovered: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 120 90"
+      fill="none"
+      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',
+      }}
+    >
+      <g
+        style={{
+          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'}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="16,30 16,60 60,84 60,54"
+          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'}
+          strokeWidth="1.2"
+        />
+        <line
+          x1="30"
+          y1="30"
+          x2="60"
+          y2="16"
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
+          strokeWidth="1"
+          opacity="0.7"
+        />
+        <line
+          x1="30"
+          y1="36"
+          x2="60"
+          y2="22"
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
+          strokeWidth="0.8"
+          opacity="0.5"
+        />
+        <line
+          x1="30"
+          y1="42"
+          x2="52"
+          y2="30"
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
+          strokeWidth="0.8"
+          opacity="0.4"
+        />
+        <line
+          x1="72"
+          y1="22"
+          x2="96"
+          y2="34"
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
+          strokeWidth="1"
+          opacity="0.7"
+        />
+        <line
+          x1="72"
+          y1="28"
+          x2="90"
+          y2="37"
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
+          strokeWidth="0.8"
+          opacity="0.5"
+        />
+        <line
+          x1="72"
+          y1="34"
+          x2="84"
+          y2="40"
+          stroke={hovered ? '#6ee7b7' : '#34d399'}
+          strokeWidth="0.8"
+          opacity="0.4"
+        />
+        <line
+          x1="66"
+          y1="12"
+          x2="66"
+          y2="50"
+          stroke={hovered ? '#34d399' : '#059669'}
+          strokeWidth="0.8"
+          strokeDasharray="2 2"
+        />
+      </g>
+    </svg>
+  )
+}
+
+function UIKitIcon({ hovered }: { hovered: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 120 90"
+      fill="none"
+      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',
+      }}
+    >
+      <g
+        style={{
+          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'}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="20,52 20,62 60,82 60,72"
+          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'}
+          strokeWidth="1"
+        />
+        <polygon
+          points="60,26 100,46 60,66 20,46"
+          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'}
+          strokeWidth="1"
+        />
+        <polygon
+          points="100,36 100,46 60,66 60,56"
+          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'}
+          strokeWidth="1.2"
+        />
+        <polygon
+          points="20,20 20,30 60,50 60,40"
+          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'}
+          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" />
+      </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
+}
+
+function isLocalMediaSrc(src?: string | null): src is string {
+  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 ?? ''
+  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')
+
+  if (!safeUrl) return null
+
+  if (isDotLottie || isJson) {
+    return (
+      <DotLottieReact
+        src={safeUrl}
+        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)',
+        }}
+      />
+    )
+  }
+
+  // SVG or raster image
+  return (
+    <Image
+      src={safeUrl}
+      alt=""
+      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)',
+      }}
+    />
+  )
+}
+
+/* ── Card ────────────────────────────────────────────────────── */
+
+type CardData = { [key: string]: any }
+
+function FeatureCard({
+  card,
+  index,
+  isLast,
+  totalCards,
+  isMobile,
+}: {
+  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 iconMedia =
+    card.iconMedia && typeof card.iconMedia === 'object' && (card.iconMedia as MediaLike).url
+      ? (card.iconMedia as MediaLike)
+      : null
+
+  // On mobile, last card is full-width if total is odd
+  const isFullWidthOnMobile = isMobile && totalCards % 2 !== 0 && isLast
+
+  let borderStyle: React.CSSProperties = {}
+  if (isMobile) {
+    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',
+    }
+  } else {
+    borderStyle = {
+      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 innerContent = (
+    <>
+      {/* Hover bg glow */}
+      <div
+        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+        style={{
+          background: `radial-gradient(ellipse at 30% 50%, ${colors.glow} 0%, transparent 70%)`,
+        }}
+      />
+
+      {/* Icon */}
+      <div
+        className="relative shrink-0 w-14 h-11 sm:w-20 sm:h-16"
+        style={
+          !iconMedia
+            ? {
+                transform: hovered ? 'scale(1.08)' : 'scale(1)',
+                transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
+              }
+            : undefined
+        }
+      >
+        {iconMedia ? (
+          <CardIconMedia media={iconMedia} hovered={hovered} />
+        ) : (
+          <FallbackIcon hovered={hovered} />
+        )}
+      </div>
+
+      {/* Text */}
+      <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' }}
+        >
+          {card.label}
+        </span>
+        <p className="text-sm md:text-md text-stone-700 dark:text-stone-400 leading-relaxed  transition-colors duration-300">
+          {card.description}
+        </p>
+        {card.href && (
+          <span
+            className={`inline-flex items-center gap-1 text-sm font-medium mt-4 transition-all duration-300 ${colors.base} ${colors.hover}`}
+          >
+            Explore
+            <ArrowRight
+              size={14}
+              style={{
+                transform: hovered ? 'translateX(4px)' : 'translateX(0)',
+                transition: 'transform 0.3s ease',
+              }}
+            />
+          </span>
+        )}
+      </div>
+    </>
+  )
+
+  if (card.href) {
+    return (
+      <Link
+        href={card.href}
+        className={cardClass}
+        style={borderStyle}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        {innerContent}
+      </Link>
+    )
+  }
+
+  return (
+    <div
+      className={cardClass}
+      style={borderStyle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {innerContent}
+    </div>
+  )
+}
+
+/* ── Block ───────────────────────────────────────────────────── */
+
+export type DDFeatStripProps = Record<string, any>
+
+export const DDFeatStrip: React.FC<DDFeatStripProps> = ({
+  cards,
+  containerClass,
+  sectionId,
+  customCSS,
+}) => {
+  if (!cards || cards.length === 0) return null
+
+  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 totalCards = cardItems.length
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? undefined} className="py-4">
+        <div
+          className={`w-full bg-stone-100 dark:bg-stone-950 border-t border-b border-white/6 ${containerClass || ''}`}
+        >
+          <div
+            className="grid grid-cols-1"
+            style={
+              !isMobile
+                ? {
+                    gridTemplateColumns: `repeat(${totalCards}, minmax(0, 1fr))`,
+                  }
+                : undefined
+            }
+          >
+            {cardItems.map((card, i) => (
+              <FeatureCard
+                key={card.id ?? i}
+                card={card}
+                index={i}
+                isLast={i === totalCards - 1}
+                totalCards={totalCards}
+                isMobile={isMobile}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}