blocks-dusted 0.1.0

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

@@ -0,0 +1,327 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ArrowUpRight, CheckCheck } from "lucide-react";
+import { motion, type Variants } from "framer-motion";
+import * as LucideIcons from "lucide-react";
+export type DDSectionProps = Record<string, any>;
+type ServiceItem = {
+  id?: string | null;
+  iconName?: string | null;
+  title?: string | null;
+  description?: string | null;
+};
+type ButtonItem = {
+  href?: string | null;
+  class?: string | null;
+  label?: string | null;
+};
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+function SectionImagePlaceholder() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-full w-full"
+      viewBox="0 0 900 700"
+      preserveAspectRatio="none"
+    >
+      <defs>
+        <linearGradient id="dd-section-placeholder" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="#111827" />
+          <stop offset="50%" stopColor="#251644" />
+          <stop offset="100%" stopColor="#09090b" />
+        </linearGradient>
+        <pattern
+          id="dd-section-grid"
+          width="72"
+          height="72"
+          patternUnits="userSpaceOnUse"
+        >
+          <path
+            d="M 72 0 L 0 0 0 72"
+            fill="none"
+            stroke="#ffffff"
+            strokeOpacity="0.07"
+          />
+        </pattern>
+      </defs>
+      <rect width="900" height="700" fill="url(#dd-section-placeholder)" />
+      <rect width="900" height="700" fill="url(#dd-section-grid)" />
+      <rect
+        x="155"
+        y="150"
+        width="590"
+        height="360"
+        rx="32"
+        fill="#ffffff"
+        fillOpacity="0.08"
+      />
+      <rect
+        x="210"
+        y="215"
+        width="270"
+        height="28"
+        rx="14"
+        fill="#ffffff"
+        fillOpacity="0.18"
+      />
+      <rect
+        x="210"
+        y="275"
+        width="430"
+        height="22"
+        rx="11"
+        fill="#ffffff"
+        fillOpacity="0.12"
+      />
+      <rect
+        x="210"
+        y="325"
+        width="360"
+        height="22"
+        rx="11"
+        fill="#ffffff"
+        fillOpacity="0.1"
+      />
+      <rect
+        x="210"
+        y="410"
+        width="150"
+        height="46"
+        rx="23"
+        fill="#a3e635"
+        fillOpacity="0.16"
+      />
+    </svg>
+  );
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" } },
+};
+
+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} />;
+}
+
+export const DDSection: React.FC<DDSectionProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  ctaLabel,
+  ctaHref,
+  services,
+  image,
+  imageFallbackUrl,
+  imageAlt,
+  badgeTitle,
+  badgeSubtitle,
+  showBadge,
+  sectionId,
+  customCSS,
+  showButtons = true,
+  buttons = [
+    { variant: "v1", icon: "Goal", label: "Choose Lane" },
+    { variant: "v1", icon: "Feather", label: "How it works" },
+  ],
+}) => {
+  const serviceItems = (services ?? []) as ServiceItem[];
+  const buttonItems = buttons as ButtonItem[];
+  const imgSrc =
+    image && typeof image === "object" && "url" in image && image.url
+      ? image.url
+      : (imageFallbackUrl ?? "");
+  const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null;
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? "studio-section"} className="py-24 overflow-hidden">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            {/* Left Content */}
+            <motion.div
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: false, amount: 0.15 }}
+            >
+              {eyebrow && (
+                <motion.p
+                  variants={itemVariants}
+                  className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption"
+                >
+                  {eyebrow}
+                </motion.p>
+              )}
+
+              <motion.h2
+                variants={itemVariants}
+                className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-6"
+              >
+                {headlineMain}
+                <br />
+                <span className="text-stone-400">{headlineAccent}</span>
+              </motion.h2>
+
+              {description && (
+                <motion.p
+                  variants={itemVariants}
+                  className="text-stone-700 dark:text-stone-300 text-base leading-relaxed mb-10"
+                >
+                  {description}
+                </motion.p>
+              )}
+
+              {serviceItems.length > 0 && (
+                <motion.div
+                  variants={containerVariants}
+                  className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-10"
+                >
+                  {serviceItems.map((svc) => (
+                    <motion.div
+                      key={svc.id ?? svc.title}
+                      variants={itemVariants}
+                      className="flex gap-3"
+                    >
+                      <div className="w-8 h-8 flex items-center justify-center rounded-lg bg-stone-200/50 dark:bg-stone-800/50 text-stone-400 shrink-0 mt-0.5 border border-stone-200 dark:border-stone-600 hover:border-lime-500 duration-150">
+                        <DynamicIcon
+                          className="text-stone-400"
+                          name={svc.iconName}
+                          size={14}
+                        />
+                      </div>
+                      <div>
+                        <h3 className="text-sm font-semibold text-stone-800 dark:text-stone-50 mb-1">
+                          {svc.title}
+                        </h3>
+                        <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed">
+                          {svc.description}
+                        </p>
+                      </div>
+                    </motion.div>
+                  ))}
+                </motion.div>
+              )}
+
+              {/* {ctaLabel && ctaHref && (
+                <motion.div variants={itemVariants}>
+                  <Link
+                    href={ctaHref}
+                    className="inline-flex items-center gap-2 bg-stone-50 text-stone-900 px-6 py-3 rounded-lg text-sm font-semibold hover:bg-stone-100 transition-colors cursor-pointer whitespace-nowrap"
+                  >
+                    {ctaLabel}
+                    <ArrowUpRight size={15} />
+                  </Link>
+                </motion.div>
+              )} */}
+
+              {/* Dusted CTA Buttons */}
+              {showButtons && buttonItems.length > 0 && (
+                <motion.div
+                  className="dusted-hero-cta-col flex col-start-2 col-span-2 gap-4"
+                  variants={itemVariants}
+                >
+                  {buttonItems.map((button, index) => (
+                    <a
+                      key={index}
+                      href={(button as any).href ?? "#"}
+                      className={
+                        button.class ??
+                        "inline-flex items-center gap-1.5 bg-indigo-700 text-stone-50 text-xs font-semibold px-3 py-1.5 rounded-lg hover:bg-indigo-600 group-hover:scale-[1.05] hover:shadow-xl transition-all duration-150 whitespace-nowrap"
+                      }
+                      style={{ cornerShape: "squircle" } as React.CSSProperties}
+                    >
+                      {/* TODO: Reconnect ButtonDustedFluid if this project provides it. */}
+                      {button.label || "Button"}
+                    </a>
+                  ))}
+                </motion.div>
+              )}
+            </motion.div>
+
+            {/* Right Image */}
+            {(safeImgSrc || imgSrc) && (
+              <motion.div
+                className="relative"
+                initial={{ opacity: 0, x: 40 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: false, amount: 0.15 }}
+                transition={{ duration: 0.6, ease: "easeOut" }}
+              >
+                <div
+                  className="rounded-3xl overflow-hidden w-full h-125 relative shadow-xl"
+                  style={{ cornerShape: "squircle" } as React.CSSProperties}
+                >
+                  {safeImgSrc ? (
+                    <Image
+                      src={safeImgSrc}
+                      alt={imageAlt ?? "DesignsDusted Studio"}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 50vw"
+                      className="object-cover object-top squircle"
+                      style={{ cornerShape: "squircle" } as React.CSSProperties}
+                    />
+                  ) : (
+                    <SectionImagePlaceholder />
+                  )}
+                  <div
+                    className="absolute inset-0 bg-linear-to-t from-stone-950/70 via-transparent to-transparent rounded-2xl"
+                    style={{ cornerShape: "squircle" } as React.CSSProperties}
+                  />
+                </div>
+
+                {showBadge && (
+                  <div
+                    className="absolute bottom-6 left-6 right-6 bg-indigo-900/50 shadow-inner backdrop-blur-sm rounded-2xl p-4 border border-indigo-700"
+                    style={{ cornerShape: "squircle" } as React.CSSProperties}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 flex items-center justify-center rounded-lg bg-stone-50 text-stone-900 shrink-0">
+                        <CheckCheck size={16} />
+                      </div>
+                      <div>
+                        {badgeTitle && (
+                          <div className="text-sm font-semibold text-stone-50 dark:text-stone-50">
+                            {badgeTitle}
+                          </div>
+                        )}
+                        {badgeSubtitle && (
+                          <div className="text-xs text-stone-300">
+                            {badgeSubtitle}
+                          </div>
+                        )}
+                      </div>
+                      <div className="ml-auto w-2 h-2 rounded-full bg-lime-400 animate-pulse shrink-0" />
+                    </div>
+                  </div>
+                )}
+              </motion.div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,214 @@
+import type { Block } from 'payload'
+
+export const DDSection: Block = {
+  slug: 'DD-Section',
+  interfaceName: 'DDSection',
+  labels: {
+    singular: 'Studio Section',
+    plural: 'Studio Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Left Content',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Studio Services'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              required: true,
+              defaultValue: 'We build what'
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              required: true,
+              defaultValue: 'you imagine'
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'DesignsDusted Studio is a small, focused team of designers and developers. We take on select projects where we can make a real impact — from product design to full-stack delivery.'
+            },
+            // Cta links
+            {
+              hidden: true,
+              name: 'ctaLabel',
+              type: 'text',
+              label: 'CTA Button Label',
+              defaultValue: 'Start a Project'
+            },
+            {
+              hidden: true,
+              name: 'ctaHref',
+              type: 'text',
+              label: 'CTA Button URL',
+              defaultValue: '/studio'
+            },
+            // DustedFluidButtons
+            {
+              hidden: true,
+              name: 'showButtons',
+              type: 'checkbox',
+              label: 'Show CTA Buttons',
+              defaultValue: true
+            },
+            {
+              name: 'buttons',
+              type: 'array',
+              label: 'CTA Buttons',
+              maxRows: 3,
+              // admin: {
+              //   condition: (data) => data?.showButtons
+              // },
+              fields: [
+                {
+                  name: 'variant',
+                  type: 'select',
+                  label: 'Button Variant',
+                  options: [
+                    { label: 'V1', value: 'v1' },
+                    { label: 'V2', value: 'v2' },
+                    { label: 'V3', value: 'v3' }
+                  ],
+                  defaultValue: 'v1'
+                },
+                {
+                  name: 'icon',
+                  type: 'text',
+                  label: 'Icon Name (Lucide)',
+                  defaultValue: 'Goal',
+                  admin: {
+                    description: 'Enter a Lucide icon name. (e.g., ArrowRight, ChevronRight)'
+                  }
+                },
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Button Label',
+                  required: true
+                },
+                {
+                  name: 'class',
+                  type: 'text',
+                  label: 'Extra CSS Class'
+                }
+              ],
+              defaultValue: [
+                { variant: 'v1', icon: 'Goal', label: 'Choose Lane' },
+                { variant: 'v1', icon: 'Feather', label: 'How it works' }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Services',
+          fields: [
+            {
+              name: 'services',
+              type: 'array',
+              label: 'Service Cards',
+              minRows: 1,
+              fields: [
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  required: true,
+                  defaultValue: 'Pen',
+                  admin: {
+                    description: 'Lucide icon name e.g. Pen, Code, Database, Lightbulb'
+                  }
+                },
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Service Title',
+                  required: true
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Service Description',
+                  required: true
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Image',
+          fields: [
+            {
+              name: 'image',
+              type: 'upload',
+              label: 'Studio 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: 'imageAlt',
+              type: 'text',
+              label: 'Image Alt Text',
+              defaultValue: 'DesignsDusted Studio'
+            },
+            {
+              name: 'badgeTitle',
+              type: 'text',
+              label: 'Floating Badge Title',
+              defaultValue: 'Currently accepting projects'
+            },
+            {
+              name: 'badgeSubtitle',
+              type: 'text',
+              label: 'Floating Badge Subtitle',
+              defaultValue: 'Limited spots available for Q2 2026'
+            },
+            {
+              name: 'showBadge',
+              type: 'checkbox',
+              label: 'Show Floating Badge',
+              defaultValue: true
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'studio-section'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,85 @@
+{
+  "type": "block",
+  "name": "DD-Section",
+  "label": "Studio Section Block",
+  "sourceName": "StudioSectionBlock",
+  "portableName": "DD-Section",
+  "slug": "DD-Section",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioSectionBlock",
+    "originalSlug": "studioSectionBlock",
+    "originalConfigExport": "StudioSectionBlock",
+    "originalComponentExport": "StudioSectionBlock",
+    "originalInterfaceName": "StudioSectionBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Section/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Section/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "framer-motion"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Replaced ButtonDustedFluid with portable fallback links; reconnect project ButtonDustedFluid manually if desired.",
+    "Register DDSection in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Section in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Replaced ButtonDustedFluid with portable fallback links; reconnect project ButtonDustedFluid manually if desired.",
+    "Register DDSection in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Section 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 { DDSection } from '@/blocks/DD-Section/config' and add DDSection to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Section in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioSectionBlock.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files.",
+    "Project-specific ButtonDustedFluid is intentionally not bundled."
+  ],
+  "exportName": "DDSection",
+  "interfaceName": "DDSection"
+}