blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,251 +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
+'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 .7a11.3 11.3 0 0 0-3.57 22.03c.57.1.78-.25.78-.55v-2.16c-3.18.69-3.85-1.35-3.85-1.35-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.25 3.33.96.1-.74.4-1.25.73-1.54-2.54-.29-5.21-1.27-5.21-5.65 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.14 1.17A10.9 10.9 0 0 1 12 6.01c.97 0 1.94.13 2.85.38 2.18-1.48 3.14-1.17 3.14-1.17.62 1.57.23 2.73.11 3.02.73.8 1.18 1.82 1.18 3.07 0 4.39-2.68 5.35-5.22 5.64.41.35.77 1.04.77 2.1v3.12c0 .3.21.66.79.55A11.3 11.3 0 0 0 12 .7Z" />
+        </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]:transition-all [&_.card-name-title]:duration-300 [&_.card-name-title]:ease-in-out',
+                'hover:[&_.card-name-title]:translate-y-0 hover:[&_.card-name-title]:bg-black/75 hover:[&_.card-name-title]:px-4 hover:[&_.card-name-title]:py-3 hover:[&_.card-name-title]:backdrop-blur-sm',
+                '[&_.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="text-shadow mb-4 bg-lines-light text-sm font-bold uppercase text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.95)] 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 === 'website' ? 'GitHub' : platform}`}
+                          >
+                            {getSocialIcon(platform)}
+                          </Link>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export const DDTeamCards = TeamCardsComponent
+export default TeamCardsComponent