blocks-dusted 0.1.0

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

@@ -0,0 +1,265 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
+import { motion, type Variants } from "framer-motion";
+export type DDTeamProps = Record<string, any>;
+type Media = { url?: string | null };
+type SkillItem = { skill?: string | null };
+type MemberItem = {
+  id?: string | null;
+  name?: string | null;
+  role?: string | null;
+  bio?: string | null;
+  photo?: Media | string | null;
+  fallbackPhotoUrl?: string | null;
+  skills?: SkillItem[] | null;
+  twitterUrl?: string | null;
+  githubUrl?: string | null;
+  linkedinUrl?: string | null;
+};
+type ClientItem = { name?: string | null };
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+function TeamPhotoPlaceholder({ name }: { name: string }) {
+  const initials = name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <div className="w-full h-64 overflow-hidden relative bg-[#12151f]">
+      <svg
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full"
+        viewBox="0 0 600 520"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <linearGradient id="dd-team-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-team-grid"
+            width="56"
+            height="56"
+            patternUnits="userSpaceOnUse"
+          >
+            <path
+              d="M 56 0 L 0 0 0 56"
+              fill="none"
+              stroke="#ffffff"
+              strokeOpacity="0.07"
+            />
+          </pattern>
+        </defs>
+        <rect width="600" height="520" fill="url(#dd-team-placeholder)" />
+        <rect width="600" height="520" fill="url(#dd-team-grid)" />
+        <circle cx="300" cy="210" r="92" fill="#ffffff" fillOpacity="0.1" />
+        <path
+          d="M 150 485 C 180 350 420 350 450 485 Z"
+          fill="#ffffff"
+          fillOpacity="0.1"
+        />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center text-4xl font-semibold text-stone-200/80">
+        {initials || "DD"}
+      </div>
+    </div>
+  );
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 28 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+};
+
+export const DDTeam: React.FC<DDTeamProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  members,
+  showClients,
+  clientsLabel,
+  clients,
+  sectionId,
+  customCSS,
+}) => {
+  const memberItems = (members ?? []) as MemberItem[];
+  const clientItems = (clients ?? []) as ClientItem[];
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? "team"} className="py-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}
+          <div className="text-center max-w-2xl mx-auto mb-16">
+            {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 mb-5">
+              {headlineMain}
+              <br />
+              <span className="text-stone-400">{headlineAccent}</span>
+            </h2>
+            {description && (
+              <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {/* Team Cards */}
+          {memberItems.length > 0 && (
+            <motion.div
+              className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20"
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: false, amount: 0.15 }}
+            >
+              {memberItems.map((member, i) => {
+                const memberName = member.name ?? "";
+                const photoUrl =
+                  typeof member.photo === "object" && member.photo?.url
+                    ? member.photo.url
+                    : (member.fallbackPhotoUrl ?? null);
+                const safePhotoUrl = isLocalImageSrc(photoUrl)
+                  ? photoUrl
+                  : null;
+
+                return (
+                  <motion.div
+                    key={member.id ?? i}
+                    className="rounded-2xl bg-stone-100/50 dark:bg-stone-800/50 border border-stone-200 dark:border-stone-700 overflow-hidden group hover:shadow-2xl transition-all duration-300"
+                    variants={cardVariants}
+                  >
+                    {/* Photo */}
+                    {safePhotoUrl ? (
+                      <div className="w-full h-64 overflow-hidden relative">
+                        <Image
+                          src={safePhotoUrl}
+                          alt={memberName}
+                          fill
+                          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                          className="object-cover object-top group-hover:scale-105 transition-transform duration-500 studio-card-image"
+                        />
+                      </div>
+                    ) : (
+                      <TeamPhotoPlaceholder name={memberName} />
+                    )}
+
+                    {/* Info */}
+                    <div className="p-6">
+                      <h3 className="text-base font-semibold text-stone-900 dark:text-stone-50 mb-0.5">
+                        {memberName}
+                      </h3>
+                      <p className="text-xs  text-stone-700 dark:text-stone-400 mb-6">
+                        {member.role}
+                      </p>
+                      {member.bio && (
+                        <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed mb-4">
+                          {member.bio}
+                        </p>
+                      )}
+
+                      {/* Skills */}
+                      {member.skills && member.skills.length > 0 && (
+                        <div className="flex flex-wrap gap-1.5 mb-4">
+                          {member.skills.map((s, si) => (
+                            <span
+                              key={si}
+                              className="text-[11.5px] mt-4 px-2.5 py-0.5 rounded-full bg-stone-50  dark:bg-stone-700 text-stone-700  dark:text-stone-300 border border-stone-200 dark:border-stone-600"
+                            >
+                              {s.skill}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Social */}
+                      <div className="relative flex items-center justify-end gap-2">
+                        {member.twitterUrl && (
+                          <a
+                            href={member.twitterUrl}
+                            rel="nofollow noreferrer"
+                            target="_blank"
+                            aria-label={`Follow ${memberName} on Twitter`}
+                            className="w-7 h-7 flex items-center justify-center rounded-lg dark:bg-stone-700  text-stone-500 dark:text-stone-400 hover:text-stone-50 hover:bg-stone-600  transition-all duration-150 border border-stone-200 dark:border-stone-600"
+                          >
+                            <FaTwitter size={12} />
+                          </a>
+                        )}
+                        {member.githubUrl && (
+                          <a
+                            href={member.githubUrl}
+                            rel="nofollow noreferrer"
+                            target="_blank"
+                            aria-label={`View ${memberName}'s GitHub profile`}
+                            className="w-7 h-7 flex items-center justify-center rounded-lg dark:bg-stone-700  text-stone-500 dark:text-stone-400 hover:text-stone-50 hover:bg-stone-600  transition-all duration-150 border border-stone-200 dark:border-stone-600"
+                          >
+                            <FaGithub size={12} />
+                          </a>
+                        )}
+                        {member.linkedinUrl && (
+                          <a
+                            href={member.linkedinUrl}
+                            rel="nofollow noreferrer"
+                            target="_blank"
+                            aria-label={`Connect with ${memberName} on LinkedIn`}
+                            className="w-7 h-7 flex items-center justify-center rounded-lg dark:bg-stone-700  text-stone-500 dark:text-stone-400 hover:text-stone-50 hover:bg-stone-600 transition-all duration-150 border border-stone-200 dark:border-stone-600"
+                          >
+                            <FaLinkedin size={12} />
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          )}
+
+          {/* Clients */}
+          {showClients && clientItems.length > 0 && (
+            <div className="border-t border-stone-200 dark:border-stone-700 pt-12">
+              {clientsLabel && (
+                <p className="text-xs font-semibold text-stone-400 tracking-widest uppercase text-center mb-8">
+                  {clientsLabel}
+                </p>
+              )}
+              <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-0">
+                {clientItems.map((c, i) => (
+                  <span
+                    key={i}
+                    className="-mt-4 text-4xl font-semibold text-stone-500 hover:text-stone-300 transition-colors cursor-default"
+                  >
+                    {c.name}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,173 @@
+import type { Block } from 'payload'
+
+export const DDTeam: Block = {
+  slug: 'DD-Team',
+  interfaceName: 'DDTeam',
+  labels: {
+    singular: 'Studio Team',
+    plural: 'Studio Team Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'The Team'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              required: true,
+              defaultValue: 'Small team,'
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              required: true,
+              defaultValue: 'big output'
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                "We're a tight-knit team of three. No account managers, no junior handoffs — you work directly with the people building your product."
+            }
+          ]
+        },
+        {
+          label: 'Members',
+          fields: [
+            {
+              name: 'members',
+              type: 'array',
+              label: 'Team Members',
+              fields: [
+                {
+                  name: 'name',
+                  type: 'text',
+                  label: 'Name',
+                  required: true
+                },
+                {
+                  name: 'role',
+                  type: 'text',
+                  label: 'Role / Title',
+                  required: true
+                },
+                {
+                  name: 'bio',
+                  type: 'textarea',
+                  label: 'Short Bio'
+                },
+                {
+                  name: 'photo',
+                  type: 'upload',
+                  label: 'Photo',
+                  relationTo: 'media'
+                },
+                {
+                  name: 'fallbackPhotoUrl',
+                  type: 'text',
+                  label: 'Fallback Photo URL',
+                  admin: {
+                    description: 'Used if no media upload is provided'
+                  }
+                },
+                {
+                  name: 'skills',
+                  type: 'array',
+                  label: 'Skills / Tags',
+                  fields: [
+                    {
+                      name: 'skill',
+                      type: 'text',
+                      label: 'Skill',
+                      required: true
+                    }
+                  ]
+                },
+                {
+                  name: 'twitterUrl',
+                  type: 'text',
+                  label: 'Twitter / X URL'
+                },
+                {
+                  name: 'githubUrl',
+                  type: 'text',
+                  label: 'GitHub URL'
+                },
+                {
+                  name: 'linkedinUrl',
+                  type: 'text',
+                  label: 'LinkedIn URL'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Clients',
+          fields: [
+            {
+              name: 'showClients',
+              type: 'checkbox',
+              label: 'Show Clients Section',
+              defaultValue: true
+            },
+            {
+              name: 'clientsLabel',
+              type: 'text',
+              label: 'Clients Label',
+              defaultValue: 'Trusted by teams at',
+              admin: {
+                condition: (_, s) => s?.showClients
+              }
+            },
+            {
+              name: 'clients',
+              type: 'array',
+              label: 'Client Names',
+              admin: {
+                condition: (_, s) => s?.showClients
+              },
+              fields: [
+                {
+                  name: 'name',
+                  type: 'text',
+                  label: 'Client Name',
+                  required: true
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'team'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,82 @@
+{
+  "type": "block",
+  "name": "DD-Team",
+  "label": "Studio Team Block",
+  "sourceName": "StudioTeamBlock",
+  "portableName": "DD-Team",
+  "slug": "DD-Team",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioTeamBlock",
+    "originalSlug": "studioTeamBlock",
+    "originalConfigExport": "StudioTeamBlock",
+    "originalComponentExport": "StudioTeamBlock",
+    "originalInterfaceName": "StudioTeamBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Team/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Team/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "framer-motion"
+    },
+    {
+      "name": "react-icons"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDTeam in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Team 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 DDTeam in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Team 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 { DDTeam } from '@/blocks/DD-Team/config' and add DDTeam to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Team in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioTeamBlock.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDTeam",
+  "interfaceName": "DDTeam"
+}