blocks-dusted 0.1.0

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

@@ -0,0 +1,120 @@
+import type { Block } from "payload";
+
+export const DDTestimonials: Block = {
+  slug: "DD-Testimonials",
+  interfaceName: "DDTestimonials",
+  labels: {
+    singular: "Studio Testimonials",
+    plural: "Studio Testimonials Sections",
+  },
+  fields: [
+    {
+      type: "tabs",
+      tabs: [
+        {
+          label: "Header",
+          fields: [
+            {
+              name: "eyebrow",
+              type: "text",
+              label: "Eyebrow Label",
+              defaultValue: "Client Stories",
+            },
+            {
+              name: "headline",
+              type: "text",
+              label: "Headline",
+              required: true,
+              defaultValue: "Don't take our word for it",
+            },
+          ],
+        },
+        {
+          label: "Testimonials",
+          fields: [
+            // Reconnect option:
+            // If the target project has a Testimonials collection, replace the standalone
+            // array below with this relationship field.
+            // {
+            //   name: 'testimonials',
+            //   type: 'relationship',
+            //   relationTo: 'testimonials',
+            //   hasMany: true,
+            //   label: 'Select Testimonials',
+            //   admin: {
+            //     description:
+            //       'Pick from the Testimonials collection. Fields used: quote, author, role, avatar, fallbackAvatarUrl, rating.'
+            //   }
+            // },
+            {
+              name: "testimonials",
+              type: "array",
+              label: "Testimonials",
+              fields: [
+                {
+                  name: "title",
+                  type: "text",
+                  label: "Author",
+                  required: true,
+                },
+                {
+                  name: "content",
+                  type: "richText",
+                  label: "Quote",
+                },
+                {
+                  name: "designation",
+                  type: "richText",
+                  label: "Designation",
+                },
+                {
+                  name: "companyLogo",
+                  type: "upload",
+                  relationTo: "media",
+                  label: "Avatar / Logo",
+                },
+                {
+                  name: "fallbackAvatarUrl",
+                  type: "text",
+                  label: "Fallback Avatar URL",
+                },
+                {
+                  name: "rating",
+                  type: "number",
+                  label: "Rating",
+                  defaultValue: 5,
+                  min: 1,
+                  max: 5,
+                },
+              ],
+              defaultValue: [
+                {
+                  title: "DesignsDusted Client",
+                  fallbackAvatarUrl: "",
+                  rating: 5,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "Settings",
+          fields: [
+            {
+              name: "sectionId",
+              type: "text",
+              label: "Section ID",
+              defaultValue: "testimonials",
+            },
+            {
+              name: "customCSS",
+              type: "code",
+              label: "Custom CSS",
+              admin: { language: "css" },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,87 @@
+{
+  "type": "block",
+  "name": "DD-Testimonials",
+  "label": "Studio Testimonials Block",
+  "sourceName": "StudioTestimonialsBlock",
+  "portableName": "DD-Testimonials",
+  "slug": "DD-Testimonials",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioTestimonialsBlock",
+    "originalSlug": "studioTestimonialsBlock",
+    "originalConfigExport": "StudioTestimonialsBlock",
+    "originalComponentExport": "StudioTestimonialsBlock",
+    "originalInterfaceName": "StudioTestimonialsBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Testimonials/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Testimonials/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": [
+    "RichText rendering was replaced with fallback markup; reconnect the target project RichText renderer manually if needed.",
+    "If your project has a Testimonials collection, replace the standalone testimonials array with the commented relationship field and regenerate Payload types.",
+    "Register DDTestimonials in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Testimonials in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "RichText rendering was replaced with fallback markup; reconnect the target project RichText renderer manually if needed.",
+    "If your project has a Testimonials collection, replace the standalone testimonials array with the commented relationship field and regenerate Payload types.",
+    "Register DDTestimonials in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Testimonials 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 { DDTestimonials } from '@/blocks/DD-Testimonials/config' and add DDTestimonials to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Testimonials in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioTestimonialsBlock.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files.",
+    "Project-specific RichText setup is intentionally not bundled."
+  ],
+  "exportName": "DDTestimonials",
+  "interfaceName": "DDTestimonials"
+}

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

@@ -0,0 +1,328 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+
+import React, { useRef, useState } from "react";
+import Image from "next/image";
+import { BarChart2, ExternalLink } from "lucide-react";
+import { motion, type Variants } from "framer-motion";
+
+import { cn } from "@/utilities/ui";
+export type DDWorkProps = Record<string, any>;
+type Media = { url?: string | null; alt?: string | null; [key: string]: any };
+type CategoryItem = { id?: string | null; label?: string | null };
+type TagItem = { id?: string | null; tag?: string | null };
+type ProjectItem = {
+  id?: string | null;
+  title?: string | null;
+  category?: string | null;
+  description?: string | null;
+  highlight?: string | null;
+  year?: string | null;
+  image?: Media | string | null;
+  imageFallbackUrl?: string | null;
+  tags?: TagItem[] | null;
+  link?: string | null;
+};
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+// ─── SpotlightCard ────────────────────────────────────────────────────────────
+interface SpotlightCardProps {
+  children: React.ReactNode;
+  className?: string;
+  spotlightColor?: string;
+}
+
+function SpotlightCard({
+  children,
+  className,
+  spotlightColor = "rgba(214,211,209,0.08)",
+}: 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}
+    >
+      {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">{children}</div>
+    </div>
+  );
+}
+
+// ─── 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 DDWork: React.FC<DDWorkProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  categories,
+  projects,
+  sectionId,
+  customCSS,
+}) => {
+  const categoryItems = (categories ?? []) as CategoryItem[];
+  const projectItems = (projects ?? []) as ProjectItem[];
+  const allLabel = categoryItems[0]?.label ?? "All";
+  const [activeCategory, setActiveCategory] = useState(allLabel);
+
+  const filtered =
+    activeCategory === allLabel
+      ? projectItems
+      : projectItems.filter((p) => p.category === activeCategory);
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? "work"} className="py-24">
+        <div className="mx-auto max-w-6xl lg:max-w-7xl px-6">
+          {/* Header */}
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.2 }}
+            className="mb-12 flex flex-col gap-6 overflow-hidden md:flex-row md:items-end md:justify-between px-0 md:px-4"
+          >
+            <motion.div variants={itemVariants}>
+              {eyebrow && (
+                <p className="top-caption mb-3 text-sm font-semibold uppercase tracking-widest text-stone-500 dark:text-stone-400">
+                  {eyebrow}
+                </p>
+              )}
+
+              <h2 className="text-4xl font-bold leading-tight text-stone-900 dark:text-stone-50 md:text-5xl">
+                {headlineMain}
+                {headlineAccent && (
+                  <>
+                    <br />
+                    <span className="text-stone-600 dark:text-stone-400">
+                      {headlineAccent}
+                    </span>
+                  </>
+                )}
+              </h2>
+            </motion.div>
+
+            {/* Filter tabs */}
+            {categoryItems.length > 1 && (
+              <motion.div
+                variants={itemVariants}
+                className="flex flex-wrap gap-2 py-4"
+              >
+                {categoryItems.map((cat, i) => {
+                  const categoryLabel = cat.label ?? "";
+
+                  return (
+                    <button
+                      key={cat.id ?? i}
+                      onClick={() => setActiveCategory(categoryLabel)}
+                      className={cn(
+                        "cursor-pointer whitespace-nowrap rounded-full px-4 py-1.5 text-xs font-medium transition-all duration-300",
+                        activeCategory === categoryLabel
+                          ? "border-indigo-500 bg-indigo-800 text-stone-200 shadow-lg shadow-blue-500/20"
+                          : "border-stone-300 dark:border-stone-700 bg-stone-50/80 dark:bg-stone-900/80 text-stone-600 dark:text-stone-400 hover:border-stone-400 dark:hover:border-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800 hover:text-stone-900 dark:hover:text-stone-50",
+                      )}
+                    >
+                      {categoryLabel}
+                    </button>
+                  );
+                })}
+              </motion.div>
+            )}
+          </motion.div>
+
+          {/* Projects Grid */}
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: false, amount: 0.1 }}
+            className="grid grid-cols-1 gap-5 py-4 md:grid-cols-2 lg:grid-cols-3"
+          >
+            {filtered.map((project, i) => {
+              const projectTitle = project.title ?? "";
+              const projectDescription = project.description ?? "";
+              const projectCategory = project.category ?? "";
+              const projectYear = project.year ?? "";
+              const projectHighlight = project.highlight ?? "";
+              const projectLink = project.link ?? "";
+              const imgSrc =
+                project.image && typeof project.image === "object"
+                  ? ((project.image as Media).url ??
+                    project.imageFallbackUrl ??
+                    undefined)
+                  : (project.imageFallbackUrl ?? undefined);
+              const safeImgSrc = isLocalImageSrc(imgSrc) ? imgSrc : null;
+
+              const CardInner = (
+                <SpotlightCard
+                  spotlightColor="rgba(214,211,209,0.08)"
+                  className="group h-full overflow-hidden rounded-3xl border border-stone-200 dark:border-stone-800 bg-stone-50 dark:bg-stone-900 shadow-md outline-none transition-colors duration-300 hover:border-indigo-500 hover:shadow-2xl hover:outline-4 hover:outline-stone-200/10 dark:hover:outline-stone-200/10"
+                  style={{ cornerShape: "squircle" } as React.CSSProperties}
+                >
+                  {/* Image */}
+                  <div className="relative h-52 w-full overflow-hidden rounded-t-2xl">
+                    {safeImgSrc ? (
+                      <Image
+                        src={safeImgSrc}
+                        alt={projectTitle}
+                        fill
+                        className="studio-card-image corner-squircle scale-105 rounded-[2.5rem] object-cover object-top transition-transform duration-500 group-hover:scale-110"
+                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                        priority={false}
+                        style={
+                          { cornerShape: "squircle" } as React.CSSProperties
+                        }
+                      />
+                    ) : (
+                      <div className="h-full w-full bg-stone-200 dark:bg-stone-800" />
+                    )}
+
+                    <div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent dark:from-stone-950/80 dark:via-stone-950/20 dark:to-transparent" />
+
+                    {projectCategory && (
+                      <span className="absolute top-2 left-2 z-20 border bg-lime-500/50 border-lime-500 text-stone-50 text-xs font-semibold px-2.5 py-1 rounded-full">
+                        {projectCategory}
+                      </span>
+                    )}
+
+                    {projectYear && (
+                      <span className="absolute top-2 right-2 z-20 border bg-stone-900/70 border-stone-700 text-stone-300 text-xs font-mono px-2.5 py-1 rounded-full">
+                        {projectYear}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Content */}
+                  <div className="card-content relative z-5 mx-2 mb-2 -mt-6 rounded-2xl bg-stone-50/90 dark:bg-stone-950/50 p-4 backdrop-blur-md drop-shadow-md transition-all duration-300 group-hover:-translate-y-1 group-hover:brightness-110 group-hover:shadow-2xl hover:duration-300 corner-squircle">
+                    <div className="mb-4 flex items-start justify-between gap-4">
+                      <div>
+                        <h3 className="mb-2 text-lg font-bold text-stone-900 dark:text-stone-50">
+                          {projectTitle}
+                        </h3>
+
+                        {projectDescription && (
+                          <p className="text-md mb-5 leading-relaxed text-stone-800 dark:text-stone-400">
+                            {projectDescription}
+                          </p>
+                        )}
+                      </div>
+
+                      {projectLink && (
+                        <ExternalLink className="mt-1 h-4 w-4 shrink-0 text-stone-400 dark:text-stone-400 transition-colors duration-300 group-hover:text-indigo-800" />
+                      )}
+                    </div>
+
+                    {/* Highlight */}
+                    {projectHighlight && (
+                      <div className="mb-4 flex items-center gap-2 rounded-lg border border-stone-200 dark:border-stone-800 bg-stone-100/60 group-hover:bg-stone-300 group-hover:shadow-xl dark:bg-stone-800/60 p-2.5">
+                        <BarChart2
+                          size={14}
+                          className="shrink-0 text-indigo-800 dark:text-indigo-400"
+                        />
+                        <span className="text-xs font-medium text-indigo-800 dark:text-indigo-400">
+                          {projectHighlight}
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Tags */}
+                    {project.tags && project.tags.length > 0 && (
+                      <div className="flex flex-wrap gap-1.5">
+                        {project.tags.map((t, ti) => (
+                          <span
+                            key={t.id ?? ti}
+                            className="rounded-full border border-stone-200 dark:border-indigo-700 bg-stone-100 dark:bg-indigo-900/50 px-2 py-0.5 text-[11.5px] text-stone-700 dark:text-stone-300 transition-all duration-300"
+                          >
+                            {t.tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </SpotlightCard>
+              );
+
+              return (
+                <motion.div
+                  key={project.id ?? i}
+                  variants={itemVariants}
+                  className="h-full"
+                >
+                  {projectLink ? (
+                    <a
+                      href={projectLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block h-full"
+                    >
+                      {CardInner}
+                    </a>
+                  ) : (
+                    CardInner
+                  )}
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DDWork;

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

@@ -0,0 +1,165 @@
+import type { Block } from 'payload'
+
+export const DDWork: Block = {
+  slug: 'DD-Work',
+  interfaceName: 'DDWork',
+  labels: {
+    singular: 'Studio Work',
+    plural: 'Studio Work Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Selected Work'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              defaultValue: "Projects we're",
+              required: false
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'proud of',
+              required: false
+            }
+          ]
+        },
+        {
+          label: 'Projects',
+          fields: [
+            {
+              name: 'categories',
+              type: 'array',
+              label: 'Filter Categories',
+              admin: {
+                description: 'First item is the "show all" tab. e.g. All, Web App, Design System'
+              },
+              fields: [
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Category Label',
+                  required: true
+                }
+              ],
+              defaultValue: [
+                { label: 'All' },
+                { label: 'Web App' },
+                { label: 'Design System' },
+                { label: 'CMS' },
+                { label: 'Consulting' }
+              ]
+            },
+            {
+              name: 'projects',
+              type: 'array',
+              label: 'Projects',
+              minRows: 1,
+              fields: [
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Project Title',
+                  required: true
+                },
+                {
+                  name: 'category',
+                  type: 'text',
+                  label: 'Category',
+                  required: true,
+                  admin: {
+                    description: 'Must match one of the filter categories above.'
+                  }
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                  required: true
+                },
+                {
+                  name: 'highlight',
+                  type: 'text',
+                  label: 'Highlight Stat',
+                  admin: {
+                    description: 'e.g. +40% conversion rate, 200+ components'
+                  }
+                },
+                {
+                  name: 'year',
+                  type: 'text',
+                  label: 'Year'
+                },
+                {
+                  name: 'image',
+                  type: 'upload',
+                  relationTo: 'media',
+                  label: 'Project Image'
+                },
+                {
+                  name: 'imageFallbackUrl',
+                  type: 'text',
+                  label: 'Image Fallback URL',
+                  admin: {
+                    placeholder: '/assets/placeholder/01.png',
+                    description: 'Used when no image is uploaded.'
+                  }
+                },
+                {
+                  name: 'tags',
+                  type: 'array',
+                  label: 'Tags',
+                  fields: [
+                    {
+                      name: 'tag',
+                      type: 'text',
+                      label: 'Tag',
+                      required: true
+                    }
+                  ]
+                },
+                {
+                  name: 'link',
+                  type: 'text',
+                  label: 'Project Link (optional)',
+                  admin: {
+                    description: 'URL to the live project or case study.'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'work'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}