blocks-dusted 0.1.0

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

@@ -0,0 +1,188 @@
+"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>
+    </>
+  );
+};

package/templates/blocks/DD-Services/config.ts

@@ -0,0 +1,149 @@
+import type { Block } from 'payload'
+
+export const DDServices: Block = {
+  slug: 'DD-Services',
+  interfaceName: 'DDServices',
+  labels: {
+    singular: 'Studio Services',
+    plural: 'Studio Services Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'What We Do'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              defaultValue: 'Services built for',
+              required: true
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent / Second Line)',
+              defaultValue: 'modern teams',
+              required: true
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'We specialize in the intersection of design and engineering — where beautiful interfaces meet robust, scalable code.'
+            }
+          ]
+        },
+        {
+          label: 'Services',
+          fields: [
+            {
+              name: 'services',
+              type: 'array',
+              label: 'Services',
+              minRows: 1,
+              fields: [
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  required: true,
+                  admin: {
+                    description: 'e.g. PenTool, Code2, Database, Lightbulb, Zap, RefreshCw'
+                  }
+                },
+                {
+                  name: 'number',
+                  type: 'text',
+                  label: 'Number Label',
+                  admin: {
+                    description: 'e.g. 01, 02 — displayed top right of the card'
+                  }
+                },
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Title',
+                  required: true
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                  required: true
+                },
+                {
+                  name: 'tags',
+                  type: 'array',
+                  label: 'Tags',
+                  fields: [
+                    {
+                      name: 'tag',
+                      type: 'text',
+                      label: 'Tag',
+                      required: true
+                    }
+                  ]
+                }
+              ],
+              defaultValue: [
+                {
+                  iconName: 'PenTool',
+                  number: '01',
+                  title: 'UX/UI Design',
+                  description:
+                    'User research, wireframing, prototyping, and high-fidelity design systems built for developer handoff.',
+                  tags: [
+                    { tag: 'Figma' },
+                    { tag: 'Design Systems' },
+                    { tag: 'Prototyping' },
+                    { tag: 'User Research' }
+                  ]
+                },
+                {
+                  iconName: 'Code2',
+                  number: '02',
+                  title: 'Web Application Development',
+                  description:
+                    'Full-stack Next.js applications with Payload CMS, TypeScript, and modern deployment pipelines.',
+                  tags: [
+                    { tag: 'Next.js' },
+                    { tag: 'TypeScript' },
+                    { tag: 'Payload CMS' },
+                    { tag: 'Vercel' }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'services'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/templates/blocks/DD-Services/manifest.json

@@ -0,0 +1,95 @@
+{
+  "type": "block",
+  "name": "DD-Services",
+  "label": "Studio Services Block",
+  "sourceName": "StudioServicesBlock",
+  "portableName": "DD-Services",
+  "slug": "DD-Services",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioServicesBlock",
+    "originalSlug": "studioServicesBlock",
+    "originalConfigExport": "StudioServicesBlock",
+    "originalComponentExport": "StudioServicesBlock",
+    "originalInterfaceName": "StudioServicesBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Services/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Services/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "framer-motion"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/components/ui/anims/fade.tsx",
+      "to": "src/components/ui/anims/fade.tsx",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Block uses cn from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDServices in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Services in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDServices in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Services in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDServices } from '@/blocks/DD-Services/config' and add DDServices to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Services in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioServicesBlock.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files.",
+    "Includes shared TextFade animation component because component imports @/components/ui/anims/fade."
+  ],
+  "exportName": "DDServices",
+  "interfaceName": "DDServices"
+}