blocks-dusted 0.1.9 → 0.1.11

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

@@ -1,173 +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' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+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-TeamCards/Component.tsx

@@ -0,0 +1,251 @@
+'use client'
+
+import React, { useRef } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { cn } from '@/utilities/ui'
+import type { Media } from '@/payload-types'
+import { motion, useScroll, useTransform, useSpring } from 'framer-motion'
+
+export interface TeamMember {
+  id?: string
+  name: string
+  position: string
+  image: Media | string
+  bio?: string
+  socialLinks?: {
+    facebook?: string
+    linkedin?: string
+    twitter?: string
+    instagram?: string
+    behance?: string
+    website?: string
+  }
+}
+
+export interface TeamCardsBlockProps {
+  blockName?: string
+  teamMembers: TeamMember[]
+  columnsPerRow?: '2' | '3' | '4'
+  cardStyle?: 'default' | 'rounded' | 'shadow' | 'bordered'
+  showBio?: boolean
+  showSocialLinks?: boolean
+  centerAlign?: boolean
+  equalHeight?: boolean
+  containerClass?: string
+  cardClass?: string
+  customContainerStyle?: React.CSSProperties
+  customCardStyle?: React.CSSProperties
+}
+
+const TeamCardsComponent: React.FC<TeamCardsBlockProps> = ({
+  teamMembers = [],
+  columnsPerRow = '3',
+  cardStyle = 'default',
+  showBio = true,
+  showSocialLinks = true,
+  centerAlign = true,
+  equalHeight = true,
+  containerClass,
+  cardClass,
+  customContainerStyle,
+  customCardStyle
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end start']
+  })
+
+  const y = useTransform(scrollYProgress, [0, 1], [-50, 50])
+  const smoothY = useSpring(y, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001
+  })
+
+  if (!teamMembers || teamMembers.length === 0) {
+    return null
+  }
+
+  const getImageUrl = (image: Media | string): string => {
+    if (typeof image === 'string') return image
+    if (image && typeof image === 'object' && 'url' in image) {
+      return image.url || ''
+    }
+    return '/placeholder.webp'
+  }
+
+  const getGridColumns = () => {
+    switch (columnsPerRow) {
+      case '2':
+        return 'grid-cols-1 md:grid-cols-2'
+      case '3':
+        return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+      case '4':
+        return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+      default:
+        return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+    }
+  }
+
+  const getCardStyleClasses = () => {
+    switch (cardStyle) {
+      case 'rounded':
+        return 'overflow-hidden rounded-xl'
+      case 'shadow':
+        return 'shadow-lg transition-shadow duration-300 hover:shadow-xl'
+      case 'bordered':
+        return 'border border-gray-200 transition-colors hover:border-gray-300'
+      default:
+        return ''
+    }
+  }
+
+  const getSocialIcon = (platform: string) => {
+    const icons = {
+      facebook: (
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+        </svg>
+      ),
+      linkedin: (
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+        </svg>
+      ),
+      twitter: (
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+        </svg>
+      ),
+      instagram: (
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987 6.62 0 11.987-5.367 11.987-11.987C24.014 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.348-1.051-2.348-2.348s1.051-2.348 2.348-2.348 2.348 1.051 2.348 2.348-1.051 2.348-2.348 2.348zm7.718 0c-1.297 0-2.348-1.051-2.348-2.348s1.051-2.348 2.348-2.348 2.348 1.051 2.348 2.348-1.051 2.348-2.348 2.348z" />
+        </svg>
+      ),
+      behance: (
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M22 7h-7v-2h7v2zm1.726 10c-.442 1.297-2.029 2-5.101 2-2.981 0-5.329-1.058-5.329-4.437 0-3.329 2.212-4.663 5.329-4.663 3.329 0 5.329 1.334 5.329 4.663 0 .191-.007.381-.014.572h-8.198c.039 1.674.98 2.511 2.329 2.511 1.297 0 1.985-.3 2.329-1.297h2.329c-.726 2.329-2.726 2.651-5.329 2.651-2.726 0-5.329-1.297-5.329-4.664 0-3.329 2.212-4.664 5.329-4.664 3.329 0 5.329 1.334 5.329 4.664 0 .191-.007.381-.014.572h-8.198c.039 1.674.98 2.511 2.329 2.511 1.297 0 1.985-.3 2.329-1.297h2.329zm-11.726-9h-9v2h9v-2z" />
+        </svg>
+      ),
+      website: (
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 0c-6.627 0-12 5.373-12 12 0 6.627 5.373 12 12 12 6.627 0 12-5.373 12-12 0-6.627-5.373-12-12-12zm-2 16l-4-4 1.41-1.41L10 13.17l6.59-6.59L18 8l-8 8z" />
+        </svg>
+      )
+    }
+
+    return icons[platform as keyof typeof icons] || null
+  }
+
+  return (
+    <section
+      ref={ref}
+      className={cn('team-cards w-full py-8 md:py-10 lg:py-12', containerClass)}
+      style={customContainerStyle}
+    >
+      <div className="mx-auto w-full max-w-6xl px-4">
+        <div
+          className={cn('grid gap-8 p-0', getGridColumns(), equalHeight && 'items-stretch')}
+          style={{
+            padding: '0rem'
+          }}
+        >
+          {teamMembers.map((member, index) => (
+            <div
+              key={member.id || index}
+              className={cn(
+                'team-card group relative min-h-[520px] cursor-pointer overflow-hidden bg-transparent transition-all duration-300 ease-in-out hover:-translate-y-2 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)]',
+                '[&_.card-name-title]:translate-y-24 [&_.card-name-title]:text-white [&_.card-name-title]:invert [&_.card-name-title]:transition-all [&_.card-name-title]:duration-300 [&_.card-name-title]:ease-in-out',
+                'hover:[&_.card-name-title]:-translate-y-16',
+                '[&_.hover-bio-container]:bg-[#f0f8ff1c] [&_.hover-bio-container]:backdrop-blur-lg [&_.hover-bio-container]:invert-0',
+                '[&_.bg-overlay-pattern]:bottom-0 [&_.bg-overlay-pattern]:z-[1] [&_.bg-overlay-pattern]:mt-auto [&_.bg-overlay-pattern]:h-48',
+                getCardStyleClasses(),
+                equalHeight && 'h-full',
+                'h-[30rem] md:h-[32rem]',
+                cardClass
+              )}
+              style={customCardStyle}
+            >
+              <div
+                className="relative h-full w-full overflow-hidden"
+                style={{ mixBlendMode: 'darken' }}
+              >
+                <motion.div style={{ y: smoothY }} className="relative h-[110%] w-full">
+                  <Image
+                    src={getImageUrl(member.image)}
+                    alt={member.name}
+                    fill
+                    className="object-cover transition-transform duration-500 ease-out group-hover:scale-110"
+                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  />
+                </motion.div>
+              </div>
+
+              <div className="bg-overlay-pattern absolute inset-x-0 bg-lines" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent transition-all duration-300 group-hover:from-black/90" />
+
+              <div className="absolute inset-0 flex flex-col justify-end p-2 text-white">
+                <div
+                  className={cn(
+                    'card-name-title z-10 bg-lines-light',
+                    centerAlign && 'text-center'
+                  )}
+                >
+                  <h3 className="mb-1 bg-lines-light text-xl font-bold text-white drop-shadow-lg md:text-xl">
+                    {member.name}
+                  </h3>
+                  <p
+                    className="color-alt text-shadow mb-4 bg-lines-light text-sm font-semibold uppercase drop-shadow-md md:text-base"
+                    style={{ textShadow: '1px 1px 16px #000000' }}
+                  >
+                    {member.position}
+                  </p>
+                </div>
+
+                <div className="hover-bio-container translate-y-full p-4 leading-relaxed shadow-xl transition-transform duration-300 ease-out group-hover:translate-y-0 group-hover:shadow-2xl">
+                  {showBio && member.bio && (
+                    <p className="hg-color-50 mb-4 text-xs leading-relaxed opacity-0 transition-opacity delay-100 duration-300 group-hover:opacity-100">
+                      {member.bio}
+                    </p>
+                  )}
+
+                  {showSocialLinks && member.socialLinks && (
+                    <div
+                      className={cn(
+                        'flex scale-90 gap-3 opacity-0 transition-opacity delay-200 duration-300 group-hover:opacity-100',
+                        centerAlign ? 'justify-center' : 'justify-start'
+                      )}
+                    >
+                      {Object.entries(member.socialLinks).map(([platform, url]) => {
+                        if (!url) return null
+
+                        return (
+                          <Link
+                            key={platform}
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="rounded-full bg-white/10 p-2 text-white/80 backdrop-blur-sm transition-all duration-200 hover:scale-110 hover:bg-white/20 hover:text-white"
+                            aria-label={`${member.name} on ${platform}`}
+                          >
+                            {getSocialIcon(platform)}
+                          </Link>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export const DDTeamCards = TeamCardsComponent
+export default TeamCardsComponent

package/templates/blocks/DD-TeamCards/README.md

@@ -0,0 +1,4 @@
+# DD-TeamCards
+
+Portable first-pass conversion of `TeamCards` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+