blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-Separator",
+  "label": "Separator Gradient",
+  "sourceName": "SeparatorGradient",
+  "portableName": "DD-Separator",
+  "slug": "DD-Separator",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/SeparatorGradient",
+    "originalSlug": "separatorGradient",
+    "originalConfigExport": "SeparatorGradient",
+    "originalComponentExport": "SeparatorGradient",
+    "originalInterfaceName": "DDSeparator"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Separator/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Separator/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDSeparator in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Separator in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDSeparator in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Separator in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDSeparator } from '@/blocks/DD-Separator/config' and add DDSeparator to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Separator in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from ROUND-TWO-CONVERSION as a portable Dusted template.",
+    "Project-specific imports were replaced with local, dependency-light rendering where required."
+  ],
+  "exportName": "DDSeparator",
+  "interfaceName": "DDSeparator"
+}

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

@@ -1,176 +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 */}#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>
-    </>
-  )
-}
+'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>
+    </>
+  )
+}