blocks-dusted 0.1.1 → 0.1.3

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

@@ -1,188 +1,176 @@
-"use client";
-import React, { useRef, useState } from "react";
-import * as LucideIcons from "lucide-react";
-import { TextFade } from "@/components/ui/anims/fade";
-import { cn } from "@/utilities/ui";
-export type DDServicesProps = Record<string, any>;
-type TagItem = { id?: string | null; tag?: string | null };
-type ServiceItem = {
-  id?: string | null;
-  iconName?: string | null;
-  number?: string | null;
-  title?: string | null;
-  description?: string | null;
-  tags?: TagItem[] | null;
-};
-
-// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
-function DynamicIcon({
-  name,
-  size = 20,
-  ...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} />;
-}
-
-// ─── Spotlight Hover Card ─────────────────────────────────────────────────────
-function SpotlightCard({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
-
-  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    setPos({
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
-    });
-  };
-
-  const onLeave = () => setPos(null);
-
-  return (
-    <div
-      ref={ref}
-      onMouseMove={onMove}
-      onMouseLeave={onLeave}
-      className={cn(
-        "relative overflow-hidden transition-all duration-300",
-        className,
-      )}
-    >
-      {/* spotlight */}
-      {pos && (
-        <div
-          className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
-          style={{
-            background: `radial-gradient(500px circle at ${pos.x}px ${pos.y}px, rgba(132,204,22,0.12), transparent 60%)`,
-          }}
-        />
-      )}
-
-      {/* animated border glow */}
-      <div className="absolute inset-0 rounded-3xl border border-stone-100 dark:border-stone-800 group-hover:border-lime-500/60 transition-colors duration-300" />
-
-      {/* subtle noise / sheen */}
-      <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-[linear-gradient(120deg,transparent,rgba(255,255,255,0.05),transparent)]" />
-
-      <div className="relative z-10">{children}</div>
-    </div>
-  );
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-export const DDServices: React.FC<DDServicesProps> = ({
-  eyebrow,
-  headlineMain,
-  headlineAccent,
-  description,
-  services,
-  sectionId,
-  customCSS,
-}) => {
-  const serviceItems = (services ?? []) as ServiceItem[];
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? "services"} className="py-24">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}
-          <div className="max-w-2xl mb-16">
-            <TextFade direction="right" className="text-base" delay={0}>
-              {eyebrow && (
-                <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
-                  {eyebrow}
-                </p>
-              )}
-            </TextFade>
-
-            <TextFade direction="up" className="mt-0" delay={0.3}>
-              <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-5">
-                {headlineMain}
-              </h2>
-            </TextFade>
-
-            <TextFade direction="up" className="-mt-6" delay={0.3}>
-              <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-400 leading-tight mb-5">
-                {headlineAccent}
-              </h2>
-            </TextFade>
-
-            <TextFade direction="down" className="px-1" delay={0.5}>
-              {description && (
-                <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
-                  {description}
-                </p>
-              )}
-            </TextFade>
-          </div>
-
-          {/* Services Grid */}
-          {serviceItems.length > 0 && (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-              {serviceItems.map((svc, i) => (
-                <SpotlightCard
-                  key={svc.id ?? i}
-                  className="group bg-[#19171ca4] backdrop-blur-md rounded-3xl shadow-md hover:shadow-2xl hover:-translate-y-1 transition-all duration-300"
-                >
-                  <div className="bg-dots h-full w-full shadow-inner brightness-90 absolute p-6 md:p-8">
-                    {/* Icon Row */}
-                    <div className="flex items-start justify-between mb-6">
-                      <div className="w-12 h-12 flex items-center justify-center rounded-xl bg-stone-800/10 bg-lines border border-stone-600 group-hover:bg-stone-700 group-hover:scale-110 transition-all duration-300">
-                        <DynamicIcon
-                          className="text-stone-300 group-hover:text-lime-400 transition-colors duration-300"
-                          name={svc.iconName}
-                          size={20}
-                        />
-                      </div>
-
-                      {svc.number && (
-                        <span className="text-xs font-mono text-stone-400 group-hover:text-lime-400 transition-colors duration-300">
-                          {svc.number}
-                        </span>
-                      )}
-                    </div>
-                    {/* Title */}
-                    <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-3 group-hover:text-lime-300 transition-colors duration-300">
-                      {svc.title}
-                    </h3>
-                    {/* Description */}
-                    <p className="text-md text-stone-400 leading-relaxed mb-5 group-hover:text-stone-300 transition-colors duration-300">
-                      {svc.description}
-                    </p>
-                    {/* Tags */}
-                    {svc.tags && svc.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-2">
-                        {svc.tags.map((t, ti) => (
-                          <span
-                            key={t.id ?? ti}
-                            className="text-xs px-2.5 py-1 rounded-full bg-stone-800/10 bg-lines text-stone-400 border border-stone-700 group-hover:border-lime-500/40 group-hover:text-lime-300 transition-all duration-300"
-                          >
-                            {t.tag}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                </SpotlightCard>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
+'use client'
+import React, { useRef, useState } from 'react'
+import * as LucideIcons from 'lucide-react'
+import { TextFade } from '@/components/ui/anims/fade'
+import { cn } from '@/utilities/ui'
+export type DDServicesProps = Record<string, any>
+type TagItem = { id?: string | null; tag?: string | null }
+type ServiceItem = {
+  id?: string | null
+  iconName?: string | null
+  number?: string | null
+  title?: string | null
+  description?: string | null
+  tags?: TagItem[] | null
+}
+
+// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
+function DynamicIcon({
+  name,
+  size = 20,
+  ...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} />
+}
+
+// ─── Spotlight Hover Card ─────────────────────────────────────────────────────
+function SpotlightCard({ children, className }: { children: React.ReactNode; className?: string }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+
+  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!ref.current) return
+    const rect = ref.current.getBoundingClientRect()
+    setPos({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    })
+  }
+
+  const onLeave = () => setPos(null)
+
+  return (
+    <div
+      ref={ref}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      className={cn('relative overflow-hidden transition-all duration-300', className)}
+    >
+      {/* spotlight */}
+      {pos && (
+        <div
+          className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
+          style={{
+            background: `radial-gradient(500px circle at ${pos.x}px ${pos.y}px, rgba(132,204,22,0.12), transparent 60%)`,
+          }}
+        />
+      )}
+
+      {/* animated border glow */}
+      <div className="absolute inset-0 rounded-3xl border border-stone-100 dark:border-stone-800 group-hover:border-lime-500/60 transition-colors duration-300" />
+
+      {/* subtle noise / sheen */}
+      <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-[linear-gradient(120deg,transparent,rgba(255,255,255,0.05),transparent)]" />
+
+      <div className="relative z-10">{children}</div>
+    </div>
+  )
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDServices: React.FC<DDServicesProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  services,
+  sectionId,
+  customCSS,
+}) => {
+  const serviceItems = (services ?? []) as ServiceItem[]
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? 'services'} className="py-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}#BlockName-DDServices
+          <div className="max-w-2xl mb-16">
+            <TextFade direction="right" className="text-base" delay={0}>
+              {eyebrow && (
+                <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                  {eyebrow}
+                </p>
+              )}
+            </TextFade>
+
+            <TextFade direction="up" className="mt-0" delay={0.3}>
+              <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-5">
+                {headlineMain}
+              </h2>
+            </TextFade>
+
+            <TextFade direction="up" className="-mt-6" delay={0.3}>
+              <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-400 leading-tight mb-5">
+                {headlineAccent}
+              </h2>
+            </TextFade>
+
+            <TextFade direction="down" className="px-1" delay={0.5}>
+              {description && (
+                <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
+                  {description}
+                </p>
+              )}
+            </TextFade>
+          </div>
+          {/* Services Grid */}
+          {serviceItems.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+              {serviceItems.map((svc, i) => (
+                <SpotlightCard
+                  key={svc.id ?? i}
+                  className="group bg-[#19171ca4] backdrop-blur-md rounded-3xl shadow-md hover:shadow-2xl hover:-translate-y-1 transition-all duration-300"
+                >
+                  <div className="bg-dots h-full w-full shadow-inner brightness-90 absolute p-6 md:p-8">
+                    {/* Icon Row */}
+                    <div className="flex items-start justify-between mb-6">
+                      <div className="w-12 h-12 flex items-center justify-center rounded-xl bg-stone-800/10 bg-lines border border-stone-600 group-hover:bg-stone-700 group-hover:scale-110 transition-all duration-300">
+                        <DynamicIcon
+                          className="text-stone-300 group-hover:text-lime-400 transition-colors duration-300"
+                          name={svc.iconName}
+                          size={20}
+                        />
+                      </div>
+
+                      {svc.number && (
+                        <span className="text-xs font-mono text-stone-400 group-hover:text-lime-400 transition-colors duration-300">
+                          {svc.number}
+                        </span>
+                      )}
+                    </div>
+                    {/* Title */}
+                    <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-3 group-hover:text-lime-300 transition-colors duration-300">
+                      {svc.title}
+                    </h3>
+                    {/* Description */}
+                    <p className="text-md text-stone-400 leading-relaxed mb-5 group-hover:text-stone-300 transition-colors duration-300">
+                      {svc.description}
+                    </p>
+                    {/* Tags */}
+                    {svc.tags && svc.tags.length > 0 && (
+                      <div className="flex flex-wrap gap-2">
+                        {svc.tags.map((t, ti) => (
+                          <span
+                            key={t.id ?? ti}
+                            className="text-xs px-2.5 py-1 rounded-full bg-stone-800/10 bg-lines text-stone-400 border border-stone-700 group-hover:border-lime-500/40 group-hover:text-lime-300 transition-all duration-300"
+                          >
+                            {t.tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </SpotlightCard>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}