blocks-dusted 0.1.0

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

@@ -0,0 +1,107 @@
+{
+  "type": "block",
+  "name": "DD-Contact",
+  "label": "Studio Contact Block",
+  "sourceName": "StudioContactBlock",
+  "portableName": "DD-Contact",
+  "slug": "DD-Contact",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioContactBlock",
+    "originalSlug": "studioContactBlock",
+    "originalConfigExport": "StudioContactBlock",
+    "originalComponentExport": "StudioContactBlock",
+    "originalInterfaceName": "StudioContactBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Contact/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Contact/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/components/ui/input.tsx",
+      "to": "src/components/ui/input.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/utilities/getURL.ts",
+      "to": "src/utilities/getURL.ts",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/utilities/canUseDOM.ts",
+      "to": "src/utilities/canUseDOM.ts",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Shared Input component uses the cn utility. If missing, add cn or replace the Input component classes."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Uncomment and reconnect the `forms` relationship only after Payload Form Builder or a compatible forms collection exists.",
+    "Create/select a Payload form with fields named name, email, company, service, budget, timeline, and message.",
+    "Register DDContact in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Contact in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Uncomment and reconnect the `forms` relationship only after Payload Form Builder or a compatible forms collection exists.",
+    "Create/select a Payload form with fields named name, email, company, service, budget, timeline, and message.",
+    "Register DDContact in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Contact 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 { DDContact } from '@/blocks/DD-Contact/config' and add DDContact to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Contact in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioContactBlock.",
+    "Installer must not overwrite existing target files.",
+    "The generated Payload type import was replaced with a local portable props type so the block can be copied before payload generate:types."
+  ],
+  "exportName": "DDContact",
+  "interfaceName": "DDContact"
+}

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

@@ -0,0 +1,361 @@
+"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;

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

@@ -0,0 +1,204 @@
+import type { Block } from 'payload'
+
+export const DDFeatCat: Block = {
+  slug: 'DD-FeatCat',
+  interfaceName: 'DDFeatCat',
+  labels: {
+    singular: 'Featured Categories',
+    plural: 'Featured Categories'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'What we offer'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              required: true,
+              defaultValue: 'Everything you need'
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'to ship faster'
+            },
+            {
+              name: 'subtext',
+              type: 'textarea',
+              label: 'Subtext',
+              defaultValue:
+                'From individual UI blocks to complete website systems — and the studio team to build it all for you.'
+            }
+          ]
+        },
+        {
+          label: 'Categories',
+          fields: [
+            {
+              name: 'categories',
+              type: 'array',
+              label: 'Category Cards',
+              minRows: 1,
+              maxRows: 6,
+              defaultValue: [
+                {
+                  title: 'UI Components',
+                  description:
+                    'Production-ready blocks for hero sections, navigation, pricing, forms, and more. Drop into any Next.js project.',
+                  link: '/components',
+                  linkLabel: 'Browse Components',
+                  iconName: 'LayoutGrid',
+                  count: '120+ blocks',
+                  imageFallbackUrl:
+                    'https://readdy.ai/api/search-image?query=collection%20of%20UI%20component%20blocks%20showing%20hero%2C%20pricing%2C%20navigation%2C%20and%20form%20elements%20arranged%20in%20a%20clean%20grid%20layout%20on%20dark%20background%2C%20modern%20developer%20tool%20aesthetic%2C%20dark%20theme&width=800&height=500&seq=cat1&orientation=landscape',
+                  iconColorClass: 'text-amber-400',
+                  iconBgClass: 'bg-amber-500/20'
+                },
+                {
+                  title: 'Website Templates',
+                  description:
+                    'Full-site starters for SaaS, agencies, blogs, and e-commerce. Powered by Next.js and Payload CMS.',
+                  link: '/templates',
+                  linkLabel: 'Explore Templates',
+                  iconName: 'FileStack',
+                  count: '24+ templates',
+                  imageFallbackUrl:
+                    'https://readdy.ai/api/search-image?query=website%20template%20previews%20showing%20SaaS%20landing%20page%2C%20agency%20portfolio%2C%20and%20blog%20layouts%20in%20a%20clean%20mockup%20display%20on%20dark%20background%2C%20professional%20web%20design%20showcase%2C%20dark%20theme&width=800&height=500&seq=cat2&orientation=landscape',
+                  iconColorClass: 'text-stone-300',
+                  iconBgClass: 'bg-stone-600/40'
+                },
+                {
+                  title: 'Studio Services',
+                  description:
+                    'Custom UX/UI design, web development, CMS architecture, and digital product consulting from our expert team.',
+                  link: '/studio',
+                  linkLabel: 'Hire the Studio',
+                  iconName: 'Users',
+                  count: 'Custom projects',
+                  imageFallbackUrl:
+                    'https://readdy.ai/api/search-image?query=design%20studio%20workspace%20with%20wireframes%2C%20design%20mockups%2C%20and%20development%20tools%20on%20a%20clean%20desk%2C%20professional%20creative%20agency%20environment%2C%20dark%20minimal%20aesthetic&width=800&height=500&seq=cat3&orientation=landscape',
+                  iconColorClass: 'text-emerald-400',
+                  iconBgClass: 'bg-emerald-500/20'
+                }
+              ],
+              fields: [
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Title',
+                  required: true
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                  required: true
+                },
+                {
+                  name: 'link',
+                  type: 'text',
+                  label: 'Link URL',
+                  required: true
+                },
+                {
+                  name: 'linkLabel',
+                  type: 'text',
+                  label: 'Link Label',
+                  required: true
+                },
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  admin: {
+                    description:
+                      'Lucide icon name e.g. LayoutGrid, FileStack, Users, Zap. Ignored if Icon Image is set.'
+                  }
+                },
+                {
+                  name: 'iconImage',
+                  type: 'upload',
+                  label: 'Icon Image (SVG / PNG)',
+                  relationTo: 'media',
+                  admin: {
+                    description:
+                      'Upload a custom SVG or image to use as the icon. Overrides Lucide Icon Name.'
+                  }
+                },
+                {
+                  name: 'count',
+                  type: 'text',
+                  label: 'Count / Badge Label',
+                  admin: {
+                    description: 'e.g. "120+ blocks", "Custom projects"'
+                  }
+                },
+                {
+                  name: 'image',
+                  type: 'upload',
+                  label: 'Card Image',
+                  relationTo: 'media'
+                },
+                {
+                  name: 'imageFallbackUrl',
+                  type: 'text',
+                  label: 'Image Fallback URL',
+                  admin: {
+                    placeholder: '/assets/placeholder/01.png',
+                    description: 'Used if no uploaded image is set'
+                  }
+                },
+                {
+                  name: 'iconColorClass',
+                  type: 'text',
+                  label: 'Icon Color Class',
+                  defaultValue: 'text-amber-400',
+                  admin: {
+                    description: 'Tailwind text-color class for the icon e.g. text-amber-400'
+                  }
+                },
+                {
+                  name: 'iconBgClass',
+                  type: 'text',
+                  label: 'Icon Background Class',
+                  defaultValue: 'bg-amber-500/20',
+                  admin: {
+                    description: 'Tailwind bg class for the icon container e.g. bg-amber-500/20'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'featured-categories'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}