blocks-dusted 0.1.1 → 0.1.3

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

@@ -1,361 +1,302 @@
-"use client";
-import React, { useRef, useState } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { ArrowRight } from "lucide-react";
-import * as LucideIcons from "lucide-react";
-import { motion, type Variants } from "framer-motion";
-import { cn } from "@/utilities/ui";
-export type DDFeatCatProps = Record<string, any>;
-type Media = { url?: string | null };
-type CategoryItem = {
-  id?: string | null;
-  title?: string | null;
-  description?: string | null;
-  link?: string | null;
-  linkLabel?: string | null;
-  iconName?: string | null;
-  iconImage?: Media | string | null;
-  iconColorClass?: string | null;
-  iconBgClass?: string | null;
-  count?: string | null;
-  image?: Media | string | null;
-  imageFallbackUrl?: string | null;
-};
-
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
-}
-
-function CategoryPlaceholder({ title }: { title: string }) {
-  return (
-    <div
-      className="w-full h-48 overflow-hidden rounded-t-2xl relative bg-[#12151f]"
-      style={{ cornerShape: "squircle" } as React.CSSProperties}
-    >
-      <svg
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full"
-        viewBox="0 0 800 500"
-        preserveAspectRatio="none"
-      >
-        <defs>
-          <linearGradient
-            id="dd-featcat-placeholder"
-            x1="0"
-            y1="0"
-            x2="1"
-            y2="1"
-          >
-            <stop offset="0%" stopColor="#1f2937" />
-            <stop offset="48%" stopColor="#251644" />
-            <stop offset="100%" stopColor="#0f172a" />
-          </linearGradient>
-          <pattern
-            id="dd-featcat-grid"
-            width="64"
-            height="64"
-            patternUnits="userSpaceOnUse"
-          >
-            <path
-              d="M 64 0 L 0 0 0 64"
-              fill="none"
-              stroke="#ffffff"
-              strokeOpacity="0.08"
-              strokeWidth="1"
-            />
-          </pattern>
-        </defs>
-        <rect width="800" height="500" fill="url(#dd-featcat-placeholder)" />
-        <rect width="800" height="500" fill="url(#dd-featcat-grid)" />
-        <rect
-          x="90"
-          y="105"
-          width="190"
-          height="120"
-          rx="18"
-          fill="#ffffff"
-          fillOpacity="0.1"
-        />
-        <rect
-          x="310"
-          y="105"
-          width="190"
-          height="120"
-          rx="18"
-          fill="#ffffff"
-          fillOpacity="0.16"
-        />
-        <rect
-          x="530"
-          y="105"
-          width="190"
-          height="120"
-          rx="18"
-          fill="#ffffff"
-          fillOpacity="0.1"
-        />
-        <rect
-          x="160"
-          y="260"
-          width="190"
-          height="120"
-          rx="18"
-          fill="#ffffff"
-          fillOpacity="0.14"
-        />
-        <rect
-          x="450"
-          y="260"
-          width="190"
-          height="120"
-          rx="18"
-          fill="#ffffff"
-          fillOpacity="0.12"
-        />
-      </svg>
-      <div className="absolute inset-x-4 bottom-4 text-xs font-medium uppercase tracking-widest text-stone-300/70">
-        {title || "Category"}
-      </div>
-    </div>
-  );
-}
-
-// ─── SpotlightCard ────────────────────────────────────────────────────────────
-interface SpotlightCardProps {
-  children: React.ReactNode;
-  className?: string;
-  spotlightColor?: string;
-  style?: React.CSSProperties;
-}
-
-function SpotlightCard({
-  children,
-  className,
-  spotlightColor = "rgba(214,211,209,0.08)",
-  style,
-}: SpotlightCardProps) {
-  const cardRef = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return;
-    const rect = cardRef.current.getBoundingClientRect();
-    setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-  };
-
-  const handleMouseLeave = () => setPos(null);
-
-  return (
-    <div
-      ref={cardRef}
-      className={cn("relative overflow-hidden", className)}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-      style={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 h-[57%]">{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} />;
-}
-
-// ─── Animation variants ───────────────────────────────────────────────────────
-const containerVariants: Variants = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
-};
-
-const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 24 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" } },
-};
-
-// ─── Component ────────────────────────────────────────────────────────────────
-export const DDFeatCat: React.FC<DDFeatCatProps> = ({
-  eyebrow = "What we offer",
-  headlineMain = "Everything you need",
-  headlineAccent = "to ship faster",
-  subtext = "From individual UI blocks to complete website systems — and the studio team to build it all for you.",
-  categories = [],
-  sectionId = "featured-categories",
-  customCSS,
-}) => {
-  const categoryItems = categories as CategoryItem[];
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId} className="py-24">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: false, amount: 0.2 }}
-            className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-14 px-0 md:px-4 overflow-hidden"
-          >
-            <motion.div variants={itemVariants}>
-              {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">
-                {headlineMain}
-                {headlineAccent && (
-                  <>
-                    <br />
-                    <span className="text-stone-400">{headlineAccent}</span>
-                  </>
-                )}
-              </h2>
-            </motion.div>
-
-            {subtext && (
-              <motion.p
-                variants={itemVariants}
-                className="text-stone-700 dark:text-stone-300 text-base leading-relaxed max-w-sm lg:text-right"
-              >
-                {subtext}
-              </motion.p>
-            )}
-          </motion.div>
-
-          {/* Cards */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: false, amount: 0.1 }}
-            className="grid grid-cols-1 md:grid-cols-3 gap-5"
-          >
-            {categoryItems.map((cat, index) => {
-              const title = cat.title ?? "";
-              const description = cat.description ?? "";
-              const link = cat.link ?? "#";
-              const linkLabel = cat.linkLabel ?? "";
-              const imgSrc =
-                cat.image && typeof cat.image === "object" && cat.image.url
-                  ? cat.image.url
-                  : (cat.imageFallbackUrl ?? "");
-              const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null;
-              const iconSrc =
-                cat.iconImage &&
-                typeof cat.iconImage === "object" &&
-                isLocalImageSrc((cat.iconImage as { url?: string }).url)
-                  ? (cat.iconImage as { url: string }).url
-                  : null;
-
-              return (
-                <motion.div key={cat.id ?? index} variants={itemVariants}>
-                  <SpotlightCard
-                    spotlightColor="rgba(214,211,209,0.08)"
-                    className="border border-stone-800 bg-stone-900 group transition-colors duration-300 h-full rounded-2xl hover:border-lime-500 corner-squircle overflow-hidden shadow-md outline-none hover:outline-stone-200/10 hover:outline-4 hover:shadow-2xl"
-                    style={{ cornerShape: "squircle" } as React.CSSProperties}
-                  >
-                    {/* Image */}
-                    {safeImgSrc ? (
-                      <div className="w-full h-48 overflow-hidden relative">
-                        <Image
-                          src={safeImgSrc}
-                          alt={title}
-                          fill
-                          className="object-cover object-top group-hover:scale-110 transition-transform duration-500 studio-card-image rounded-2xl corner-squircle overflow-hidden scale-105"
-                          sizes="(max-width: 768px) 100vw, 33vw"
-                          priority={false}
-                          style={
-                            { cornerShape: "squircle" } as React.CSSProperties
-                          }
-                        />
-                      </div>
-                    ) : (
-                      <CategoryPlaceholder title={title} />
-                    )}
-                    {/* Content */}
-                    <div
-                      className="card-content bg-stone-100/90 dark:bg-stone-950/90 backdrop-blur-md -mt-6 mx-2 mb-2 p-4 relative z-5 drop-shadow-md rounded-2xl h-full corner-squircle group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:brightness-110 transition-all duration-300"
-                      style={{ cornerShape: "squircle" } as React.CSSProperties}
-                    >
-                      <div className="flex items-center gap-3 mb-4">
-                        <div
-                          className={cn(
-                            "w-9 h-9 flex items-center justify-center rounded-lg shrink-0",
-                            cat.iconBgClass ?? "bg-stone-700",
-                          )}
-                        >
-                          {iconSrc ? (
-                            <Image
-                              src={iconSrc}
-                              alt={title}
-                              width={16}
-                              height={16}
-                              className={cn(
-                                "w-4 h-4 object-contain",
-                                cat.iconColorClass,
-                              )}
-                            />
-                          ) : (
-                            <DynamicIcon
-                              name={cat.iconName ?? ""}
-                              size={16}
-                              className={cat.iconColorClass ?? "text-stone-300"}
-                            />
-                          )}
-                        </div>
-                        {cat.count && (
-                          <span className="text-xs font-medium text-stone-700  dark:text-stone-400">
-                            {cat.count}
-                          </span>
-                        )}
-                      </div>
-
-                      <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-2">
-                        {title}
-                      </h3>
-                      <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed mb-5">
-                        {description}
-                      </p>
-
-                      <Link
-                        href={link}
-                        className="inline-flex items-center gap-1.5 text-sm font-semibold text-stone-700 dark:text-stone-300 hover:text-indigo-950  dark:hover:text-stone-50 hover:gap-2.5 transition-all duration-200 cursor-pointer"
-                      >
-                        {linkLabel}
-                        <ArrowRight className="w-4 h-4" />
-                      </Link>
-                    </div>
-                  </SpotlightCard>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default DDFeatCat;
+'use client'
+import React, { useRef, useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { ArrowRight } from 'lucide-react'
+import * as LucideIcons from 'lucide-react'
+import { motion, type Variants } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+export type DDFeatCatProps = Record<string, any>
+type Media = { url?: string | null }
+type CategoryItem = {
+  id?: string | null
+  title?: string | null
+  description?: string | null
+  link?: string | null
+  linkLabel?: string | null
+  iconName?: string | null
+  iconImage?: Media | string | null
+  iconColorClass?: string | null
+  iconBgClass?: string | null
+  count?: string | null
+  image?: Media | string | null
+  imageFallbackUrl?: string | null
+}
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === 'string' && src.startsWith('/api/media/file/')
+}
+
+function CategoryPlaceholder({ title }: { title: string }) {
+  return (
+    <div
+      className="w-full h-48 overflow-hidden rounded-t-2xl relative bg-[#12151f]"
+      style={{ cornerShape: 'squircle' } as React.CSSProperties}
+    >
+      <svg
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full"
+        viewBox="0 0 800 500"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <linearGradient id="dd-featcat-placeholder" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" stopColor="#1f2937" />
+            <stop offset="48%" stopColor="#251644" />
+            <stop offset="100%" stopColor="#0f172a" />
+          </linearGradient>
+          <pattern id="dd-featcat-grid" width="64" height="64" patternUnits="userSpaceOnUse">
+            <path
+              d="M 64 0 L 0 0 0 64"
+              fill="none"
+              stroke="#ffffff"
+              strokeOpacity="0.08"
+              strokeWidth="1"
+            />
+          </pattern>
+        </defs>
+        <rect width="800" height="500" fill="url(#dd-featcat-placeholder)" />
+        <rect width="800" height="500" fill="url(#dd-featcat-grid)" />
+        <rect x="90" y="105" width="190" height="120" rx="18" fill="#ffffff" fillOpacity="0.1" />
+        <rect x="310" y="105" width="190" height="120" rx="18" fill="#ffffff" fillOpacity="0.16" />
+        <rect x="530" y="105" width="190" height="120" rx="18" fill="#ffffff" fillOpacity="0.1" />
+        <rect x="160" y="260" width="190" height="120" rx="18" fill="#ffffff" fillOpacity="0.14" />
+        <rect x="450" y="260" width="190" height="120" rx="18" fill="#ffffff" fillOpacity="0.12" />
+      </svg>
+      <div className="absolute inset-x-4 bottom-4 text-xs font-medium uppercase tracking-widest text-stone-300/70">
+        {title || 'Category'}
+      </div>
+    </div>
+  )
+}
+
+// ─── SpotlightCard ────────────────────────────────────────────────────────────
+interface SpotlightCardProps {
+  children: React.ReactNode
+  className?: string
+  spotlightColor?: string
+  style?: React.CSSProperties
+}
+
+function SpotlightCard({
+  children,
+  className,
+  spotlightColor = 'rgba(214,211,209,0.08)',
+  style,
+}: SpotlightCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return
+    const rect = cardRef.current.getBoundingClientRect()
+    setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+  }
+
+  const handleMouseLeave = () => setPos(null)
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn('relative overflow-hidden', className)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={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 h-[57%]">{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} />
+}
+
+// ─── Animation variants ───────────────────────────────────────────────────────
+const containerVariants: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
+}
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 24 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: 'easeOut' } },
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDFeatCat: React.FC<DDFeatCatProps> = ({
+  eyebrow = 'What we offer',
+  headlineMain = 'Everything you need',
+  headlineAccent = 'to ship faster',
+  subtext = 'From individual UI blocks to complete website systems — and the studio team to build it all for you.',
+  categories = [],
+  sectionId = 'featured-categories',
+  customCSS,
+}) => {
+  const categoryItems = categories as CategoryItem[]
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId} className="py-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}#BlockName-DDFeatCat
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.2 }}
+            className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-14 px-0 md:px-4 overflow-hidden"
+          >
+            <motion.div variants={itemVariants}>
+              {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">
+                {headlineMain}
+                {headlineAccent && (
+                  <>
+                    <br />
+                    <span className="text-stone-400">{headlineAccent}</span>
+                  </>
+                )}
+              </h2>
+            </motion.div>
+
+            {subtext && (
+              <motion.p
+                variants={itemVariants}
+                className="text-stone-700 dark:text-stone-300 text-base leading-relaxed max-w-sm lg:text-right"
+              >
+                {subtext}
+              </motion.p>
+            )}
+          </motion.div>
+          {/* Cards */}
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.1 }}
+            className="grid grid-cols-1 md:grid-cols-3 gap-5"
+          >
+            {categoryItems.map((cat, index) => {
+              const title = cat.title ?? ''
+              const description = cat.description ?? ''
+              const link = cat.link ?? '#'
+              const linkLabel = cat.linkLabel ?? ''
+              const imgSrc =
+                cat.image && typeof cat.image === 'object' && cat.image.url
+                  ? cat.image.url
+                  : (cat.imageFallbackUrl ?? '')
+              const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null
+              const iconSrc =
+                cat.iconImage &&
+                typeof cat.iconImage === 'object' &&
+                isLocalImageSrc((cat.iconImage as { url?: string }).url)
+                  ? (cat.iconImage as { url: string }).url
+                  : null
+
+              return (
+                <motion.div key={cat.id ?? index} variants={itemVariants}>
+                  <SpotlightCard
+                    spotlightColor="rgba(214,211,209,0.08)"
+                    className="border border-stone-800 bg-stone-900 group transition-colors duration-300 h-full rounded-2xl hover:border-lime-500 corner-squircle overflow-hidden shadow-md outline-none hover:outline-stone-200/10 hover:outline-4 hover:shadow-2xl"
+                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                  >
+                    {/* Image */}
+                    {safeImgSrc ? (
+                      <div className="w-full h-48 overflow-hidden relative">
+                        <Image
+                          src={safeImgSrc}
+                          alt={title}
+                          fill
+                          className="object-cover object-top group-hover:scale-110 transition-transform duration-500 studio-card-image rounded-2xl corner-squircle overflow-hidden scale-105"
+                          sizes="(max-width: 768px) 100vw, 33vw"
+                          priority={false}
+                          style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                        />
+                      </div>
+                    ) : (
+                      <CategoryPlaceholder title={title} />
+                    )}
+                    {/* Content */}
+                    <div
+                      className="card-content bg-stone-100/90 dark:bg-stone-950/90 backdrop-blur-md -mt-6 mx-2 mb-2 p-4 relative z-5 drop-shadow-md rounded-2xl h-full corner-squircle group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:brightness-110 transition-all duration-300"
+                      style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                    >
+                      <div className="flex items-center gap-3 mb-4">
+                        <div
+                          className={cn(
+                            'w-9 h-9 flex items-center justify-center rounded-lg shrink-0',
+                            cat.iconBgClass ?? 'bg-stone-700',
+                          )}
+                        >
+                          {iconSrc ? (
+                            <Image
+                              src={iconSrc}
+                              alt={title}
+                              width={16}
+                              height={16}
+                              className={cn('w-4 h-4 object-contain', cat.iconColorClass)}
+                            />
+                          ) : (
+                            <DynamicIcon
+                              name={cat.iconName ?? ''}
+                              size={16}
+                              className={cat.iconColorClass ?? 'text-stone-300'}
+                            />
+                          )}
+                        </div>
+                        {cat.count && (
+                          <span className="text-xs font-medium text-stone-700  dark:text-stone-400">
+                            {cat.count}
+                          </span>
+                        )}
+                      </div>
+
+                      <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-2">
+                        {title}
+                      </h3>
+                      <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed mb-5">
+                        {description}
+                      </p>
+
+                      <Link
+                        href={link}
+                        className="inline-flex items-center gap-1.5 text-sm font-semibold text-stone-700 dark:text-stone-300 hover:text-indigo-950  dark:hover:text-stone-50 hover:gap-2.5 transition-all duration-200 cursor-pointer"
+                      >
+                        {linkLabel}
+                        <ArrowRight className="w-4 h-4" />
+                      </Link>
+                    </div>
+                  </SpotlightCard>
+                </motion.div>
+              )
+            })}
+          </motion.div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default DDFeatCat