blocks-dusted 0.1.11 → 0.1.12

package/templates/blocks/DDHG-StatsFAQ/Component.tsx

@@ -11,7 +11,7 @@ import {
   RefreshCw,
   ShieldCheck,
   User,
-  UserStar
+  UserStar,
 } from 'lucide-react'
 import React, { useState } from 'react'
 
@@ -69,33 +69,33 @@ const defaultTrustBadges: TrustBadge[] = [
   {
     icon: 'shieldCheck',
     title: 'Transparent Pricing',
-    description: 'Every quote is itemized. No hidden fees, no surprise charges at the end.'
+    description: 'Every quote is itemized. No hidden fees, no surprise charges at the end.',
   },
   {
     icon: 'calendarCheck',
     title: 'Fixed Timeline Guarantee',
-    description: 'We commit to a delivery date and stick to it. If we miss it, you get a credit.'
+    description: 'We commit to a delivery date and stick to it. If we miss it, you get a credit.',
   },
   {
     icon: 'userStar',
     title: 'Dedicated Project Lead',
-    description: 'One senior designer owns your project from kickoff to handover. No handoffs.'
+    description: 'One senior designer owns your project from kickoff to handover. No handoffs.',
   },
   {
     icon: 'fileText',
     title: 'Full Documentation',
-    description: 'Every finish, fixture, and specification is documented for future reference.'
+    description: 'Every finish, fixture, and specification is documented for future reference.',
   },
   {
     icon: 'refreshCw',
     title: 'Revision Rounds Included',
-    description: 'Three structured revision cycles are included in every engagement.'
+    description: 'Three structured revision cycles are included in every engagement.',
   },
   {
     icon: 'handHeart',
     title: 'Post-Completion Support',
-    description: '30 days of complimentary support after handover. We stand by our work.'
-  }
+    description: '30 days of complimentary support after handover. We stand by our work.',
+  },
 ]
 
 const defaultTestimonials: TestimonialItem[] = [
@@ -103,42 +103,42 @@ const defaultTestimonials: TestimonialItem[] = [
     quote:
       'They delivered exactly what they promised, on the date they promised it, at the price they quoted. That alone is rare in this industry.',
     author: 'Margaret Chen',
-    role: 'Director of Operations, Meridian Holdings'
+    role: 'Director of Operations, Meridian Holdings',
   },
   {
     quote:
       'The transparency throughout the process was remarkable. We knew exactly where we stood at every phase. No surprises.',
     author: 'James Oduya',
-    role: 'Founder, The Atelier Collective'
-  }
+    role: 'Founder, The Atelier Collective',
+  },
 ]
 
 const defaultFaqs: FAQItem[] = [
   {
     question: 'How long does a typical project take?',
     answer:
-      'Project timelines vary based on scope. A residential interior typically takes 8-16 weeks from concept to completion. Commercial fit-outs range from 12-24 weeks. We provide detailed timelines during our initial consultation.'
+      'Project timelines vary based on scope. A residential interior typically takes 8-16 weeks from concept to completion. Commercial fit-outs range from 12-24 weeks. We provide detailed timelines during our initial consultation.',
   },
   {
     question: 'Do you handle both design and construction?',
     answer:
-      'Yes, our Turn-Key Services cover the complete journey from initial concept through construction to final handover. We coordinate all contractors and trades, ensuring the design vision is executed faithfully.'
+      'Yes, our Turn-Key Services cover the complete journey from initial concept through construction to final handover. We coordinate all contractors and trades, ensuring the design vision is executed faithfully.',
   },
   {
     question: 'Can you work with existing furniture and art?',
     answer:
-      'Absolutely. Our Atmospheric Curation service specializes in integrating existing pieces into new designs. We view heirlooms and collected art as anchors of identity within the space.'
+      'Absolutely. Our Atmospheric Curation service specializes in integrating existing pieces into new designs. We view heirlooms and collected art as anchors of identity within the space.',
   },
   {
     question: 'What is your fee structure?',
     answer:
-      'We offer both fixed-fee and percentage-based pricing depending on project type. Design Consultancy is typically fixed-fee, while Turn-Key projects use a percentage of construction cost. We provide transparent quotes upfront.'
+      'We offer both fixed-fee and percentage-based pricing depending on project type. Design Consultancy is typically fixed-fee, while Turn-Key projects use a percentage of construction cost. We provide transparent quotes upfront.',
   },
   {
     question: 'Do you offer sustainability-focused design?',
     answer:
-      'Sustainability is woven into our material selection and spatial planning. We prioritize low-VOC finishes, responsibly sourced materials, energy-efficient lighting, and biophilic elements that reduce environmental impact.'
-  }
+      'Sustainability is woven into our material selection and spatial planning. We prioritize low-VOC finishes, responsibly sourced materials, energy-efficient lighting, and biophilic elements that reduce environmental impact.',
+  },
 ]
 
 const iconMap = {
@@ -148,13 +148,13 @@ const iconMap = {
   fileText: FileText,
   refreshCw: RefreshCw,
   handHeart: HandHeart,
-  clipboardList: ClipboardList
+  clipboardList: ClipboardList,
 }
 
 function RevealBlock({
   children,
   className,
-  delay = 0
+  delay = 0,
 }: {
   children: React.ReactNode
   className?: string
@@ -190,7 +190,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
   faqEyebrowEmphasis = 'questions',
   faqHeading = 'FAQ',
   showFaqDivider = true,
-  faqs
+  faqs,
 }) => {
   const [openFAQ, setOpenFAQ] = useState<number | null>(null)
   const testimonialItems = getItems(testimonials, defaultTestimonials)
@@ -213,29 +213,29 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
               {testimonialItems.map((testimonial, i) => (
                 <div
                   key={testimonial.id || `testimonial-${i}`}
-                  className="z-plane-1 chamfer-accent p-6 md:p-8"
+                  className="z-plane-1 chamfer-accent rounded-md squircle border border-stone-300 bg-stone-100/50 p-6 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50 md:p-8"
                 >
                   <div className="mb-4 h-px w-8 bg-[#C4A882]" />
                   {testimonial.quote && (
-                    <p className="mb-6 text-[13px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                    <p className="mb-6 text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
                       &ldquo;{testimonial.quote}&rdquo;
                     </p>
                   )}
                   <div className="flex items-center gap-3">
                     <div
                       className="flex h-8 w-8 items-center justify-center bg-stone-500"
-                      style={{ borderRadius: '2px' }}
+                      style={{ borderRadius: '6px' }}
                     >
                       <User className="h-3.5 w-3.5 text-stone-50" strokeWidth={1.6} />
                     </div>
                     <div>
                       {testimonial.author && (
-                        <p className="text-[13px] font-medium text-stone-700 dark:text-stone-200">
+                        <p className="text-base font-medium text-stone-700 dark:text-stone-200">
                           {testimonial.author}
                         </p>
                       )}
                       {testimonial.role && (
-                        <p className="text-[13px] text-stone-600 dark:text-stone-300">
+                        <p className="text-base text-stone-600 dark:text-stone-300">
                           {testimonial.role}
                         </p>
                       )}
@@ -249,10 +249,10 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
 
         {badgeItems.length > 0 && (
           <RevealBlock className="whytrustus-section mb-16">
-            <div className="z-plane-1 p-6 md:p-8">
+            <div className="z-plane-1 rounded-md squircle border border-stone-300 bg-stone-100/50 p-6 dark:border-stone-700/10 dark:bg-stone-900/50 md:p-8">
               <div className="mb-6">
                 {commitmentLabel && (
-                  <p className="mb-2 font-mono text-[13px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                  <p className="mb-2 font-mono text-base uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
                     {commitmentLabel}
                   </p>
                 )}
@@ -269,19 +269,19 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                   return (
                     <div
                       key={badge.id || `${badge.title || 'badge'}-${i}`}
-                      className="arch-edge-sm flex items-start gap-3 border border-[#D9D7D1] p-4"
+                      className="arch-edge-sm flex items-start gap-3 rounded-md squircle border border-stone-300 bg-stone-100/50 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-stone-700/10 dark:bg-stone-900/50"
                     >
-                      <div className="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center">
+                      <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center">
                         <Icon className="h-4 w-4 text-[#C4A882]" strokeWidth={1.7} />
                       </div>
                       <div>
                         {badge.title && (
-                          <p className="mb-1 text-[13px] font-medium text-stone-700 dark:text-stone-200">
+                          <p className="mb-1 text-base font-medium text-stone-700 dark:text-stone-200">
                             {badge.title}
                           </p>
                         )}
                         {description && (
-                          <p className="text-[10px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                          <p className="text-xs font-light leading-relaxed text-stone-700 dark:text-stone-200">
                             {description}
                           </p>
                         )}
@@ -296,7 +296,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
 
         <RevealBlock className="faq-section max-w-4xl mx-auto mb-10">
           {(faqEyebrowPrefix || faqEyebrowEmphasis) && (
-            <p className="mb-2 text-[10px] uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
+            <p className="mb-2 text-xs uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
               {faqEyebrowPrefix && <span className="font-light">{faqEyebrowPrefix} </span>}
               {faqEyebrowEmphasis && <span className="font-medium">{faqEyebrowEmphasis}</span>}
             </p>
@@ -320,9 +320,9 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                 <RevealBlock key={faq.id || `${question || 'faq'}-${i}`} delay={i * 0.06}>
                   <div
                     className={cn(
-                      'accordion-card z-plane-1 border-border border chamfer-accent transition-all duration-300',
+                      'accordion-card z-plane-1 rounded-md squircle border-border border chamfer-accent bg-stone-100/50 transition-all duration-300 dark:bg-stone-900/50',
                       isOpen &&
-                        'border-border border z-depth-hover hover:shadow-2xl hover:-translate-y-2'
+                        'border-border border z-depth-hover hover:shadow-2xl hover:-translate-y-2',
                     )}
                   >
                     <button
@@ -332,7 +332,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                       aria-expanded={isOpen}
                     >
                       <div className="flex items-center gap-4">
-                        <span className="font-mono text-[13px] text-stone-600 dark:text-stone-300">
+                        <span className="font-mono text-base text-stone-600 dark:text-stone-300">
                           {String(i + 1).padStart(2, '0')}
                         </span>
                         {question && (
@@ -343,15 +343,15 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                       </div>
                       <div
                         className={cn(
-                          'ml-4 flex h-6 w-6 flex-shrink-0 items-center justify-center border border-[#D9D7D1] transition-all duration-300',
-                          isOpen && 'border-[#292524] bg-[#292524]'
+                          'ml-4 flex h-6 w-6 shrink-0 items-center justify-center rounded-md squircle border border-stone-300 dark:border-stone-700/10 transition-all duration-300',
+                          isOpen && 'border-[#292524] bg-[#292524]',
                         )}
-                        style={{ borderRadius: '2px' }}
+                        style={{ borderRadius: '6px' }}
                       >
                         <ToggleIcon
                           className={cn(
                             'h-3 w-3',
-                            isOpen ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300'
+                            isOpen ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300',
                           )}
                           strokeWidth={1.8}
                         />
@@ -368,7 +368,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                         >
                           <div className="px-5 pb-5 pl-14 md:px-6 md:pb-6 md:pl-16">
                             <div className="mb-4 h-px w-full bg-stone-500" />
-                            <p className="text-[13px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                            <p className="text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
                               {answer}
                             </p>
                           </div>

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

@@ -1,131 +1,169 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { Globe, Briefcase, Camera } from 'lucide-react'
-import { cn } from '@/utilities/ui'
-import { getMediaUrl } from '@/utilities/getMediaUrl'
-
-type MediaDoc = {
-  url?: string | null
-  alt?: string | null
-}
-
-type TeamMember = {
-  name?: string | null
-  role?: string | null
-  bio?: string | null
-  image?: number | MediaDoc | null
-  priority?: boolean | null
-  facebookUrl?: string | null
-  linkedinUrl?: string | null
-  instagramUrl?: string | null
-  id?: string | null
-}
-
-export type DDHGTeamCardsProps = {
-  sectionId?: string | null
-  customClassName?: string | null
-  customCSS?: string | null
-  members?: TeamMember[] | null
-}
-
-function getMediaDoc(img?: number | MediaDoc | null): MediaDoc | null {
-  if (!img || typeof img === 'number') return null
-  return img
-}
-
-export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
-  sectionId,
-  customClassName,
-  customCSS,
-  members,
-}) => {
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.querySelectorAll<HTMLElement>('.reveal').forEach((el, i) => {
-              setTimeout(() => {
-                el.style.opacity = '1'
-                el.style.transform = 'translateY(0)'
-              }, i * 100)
-            })
-            observer.unobserve(entry.target)
-          }
-        })
-      },
-      { threshold: 0.1 },
-    )
-    if (ref.current) observer.observe(ref.current)
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <div id={sectionId ?? undefined} className={cn('px-5 md:px-8 py-8', customClassName)} ref={ref}>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-      <div className="max-w-7xl mx-auto">
-        {members && members.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
-            {members.map((member, i) => {
-              const imageDoc = getMediaDoc(member.image)
-              const imageUrl = getMediaUrl(imageDoc?.url)
-              const socials = [
-                { Icon: Globe, url: member.facebookUrl, label: 'Facebook' },
-                { Icon: Briefcase, url: member.linkedinUrl, label: 'LinkedIn' },
-                { Icon: Camera, url: member.instagramUrl, label: 'Instagram' },
-              ].filter((s) => !!s.url)
-
-              return (
-                <div
-                  key={member.id != null ? `id-${member.id}` : `idx-${i}`}
-                  className="reveal group relative overflow-hidden cursor-pointer bg-transparent h-[28rem] md:h-[32rem]"
-                  style={{ opacity: 0, transform: 'translateY(20px)', transition: `opacity 0.9s ease ${i * 0.1}s, transform 0.9s ease ${i * 0.1}s` }}
-                >
-                  {imageDoc && imageUrl && (
-                    <div className="relative w-full h-full overflow-hidden brightness-100 group-hover:brightness-50">
-                      <Image
-                        src={imageUrl}
-                        alt={imageDoc.alt ?? member.name ?? ''}
-                        fill
-                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                        priority={Boolean(member.priority)}
-                        className="team-member object-cover object-top brightness-100 group-hover:brightness-50 group-hover:scale-110 transition-transform duration-500 ease-out"
-                      />
-                    </div>
-                  )}
-                  <div className="pattern-overlay absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 20px)' }} />
-                  <div className="gradient-overlay absolute inset-0 bg-gradient-to-t from-black/80 via-black/80 to-transparent group-hover:from-black/90 transition-all duration-300 group-hover:backdrop-brightness-50" />
-                  <div className="content-card absolute inset-0 flex flex-col justify-end p-3 text-white">
-                    <div className="z-10 text-center mb-3">
-                      {member.name && <h3 className="text-xl md:text-2xl font-bold mb-1 text-white drop-shadow-lg" style={{ fontFamily: 'Outfit, sans-serif', fontWeight: 700 }}>{member.name}</h3>}
-                      {member.role && <p className="text-xs md:text-sm font-medium uppercase tracking-wider text-stone-200 dark:text-stone-200 drop-shadow-md" style={{ fontFamily: "'Inter', sans-serif", fontWeight: 500 }}>{member.role}</p>}
-                    </div>
-                    <div className="hover-panel transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out p-4" style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)' }}>
-                      {member.bio && <p className="text-[13px] text-white/70 leading-relaxed mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">{member.bio}</p>}
-                      {socials.length > 0 && (
-                        <div className="socials-map flex gap-3 justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
-                          {socials.map(({ Icon, url, label }) => (
-                            <Link key={label} href={url!} target="_blank" rel="noopener noreferrer" aria-label={`${member.name} on ${label}`} className="text-white/70 hover:text-white hover:scale-110 transition-all duration-200 p-2 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm">
-                              <Icon size={14} />
-                            </Link>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default DDHGTeamCards
+'use client'
+
+import { useEffect, useRef } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Globe, Briefcase, Camera } from 'lucide-react'
+import { cn } from '@/utilities/ui'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+
+type MediaDoc = {
+  url?: string | null
+  alt?: string | null
+}
+
+type TeamMember = {
+  name?: string | null
+  role?: string | null
+  bio?: string | null
+  image?: number | MediaDoc | null
+  priority?: boolean | null
+  facebookUrl?: string | null
+  linkedinUrl?: string | null
+  instagramUrl?: string | null
+  id?: string | null
+}
+
+export type DDHGTeamCardsProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  members?: TeamMember[] | null
+}
+
+function getMediaDoc(img?: number | MediaDoc | null): MediaDoc | null {
+  if (!img || typeof img === 'number') return null
+  return img
+}
+
+export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  members,
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.querySelectorAll<HTMLElement>('.reveal').forEach((el, i) => {
+              setTimeout(() => {
+                el.style.opacity = '1'
+                el.style.transform = 'translateY(0)'
+              }, i * 100)
+            })
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      { threshold: 0.1 },
+    )
+    if (ref.current) observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div id={sectionId ?? undefined} className={cn('px-5 md:px-8 py-8', customClassName)} ref={ref}>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="max-w-7xl mx-auto">
+        {members && members.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
+            {members.map((member, i) => {
+              const imageDoc = getMediaDoc(member.image)
+              const imageUrl = getMediaUrl(imageDoc?.url)
+              const socials = [
+                { Icon: Globe, url: member.facebookUrl, label: 'Facebook' },
+                { Icon: Briefcase, url: member.linkedinUrl, label: 'LinkedIn' },
+                { Icon: Camera, url: member.instagramUrl, label: 'Instagram' },
+              ].filter((s) => !!s.url)
+
+              return (
+                <div
+                  key={member.id != null ? `id-${member.id}` : `idx-${i}`}
+                  className="reveal group relative overflow-hidden cursor-pointer rounded-md squircle border-none border-stone-300/0 bg-stone-100/50 transition-all duration-300 hover:shadow-2xl dark:border-stone-700/0 dark:bg-stone-900/50 h-112 md:h-128"
+                  style={{
+                    opacity: 0,
+                    transform: 'translateY(20px)',
+                    transition: `opacity 0.9s ease ${i * 0.1}s, transform 0.9s ease ${i * 0.1}s`,
+                  }}
+                >
+                  {imageDoc && imageUrl && (
+                    <div className="relative w-full h-full overflow-hidden brightness-100 group-hover:brightness-50 transition-all duration-300">
+                      <Image
+                        src={imageUrl}
+                        alt={imageDoc.alt ?? member.name ?? ''}
+                        fill
+                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                        priority={Boolean(member.priority)}
+                        className="team-member object-cover object-top brightness-100 group-hover:brightness-50 group-hover:scale-110 transition-transform duration-500 ease-out"
+                      />
+                    </div>
+                  )}
+                  <div
+                    className="pattern-overlay absolute inset-0 opacity-[0.03] pointer-events-none"
+                    style={{
+                      backgroundImage:
+                        'repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 20px)',
+                    }}
+                  />
+                  <div className="gradient-overlay absolute inset-0 bg-linear-to-t from-black/80 via-black/80 to-transparent group-hover:from-black/90 transition-all duration-300 group-hover:backdrop-brightness-50" />
+                  <div className="content-card absolute inset-0 flex flex-col justify-end p-3 text-white">
+                    <div className="z-10 text-center mb-3">
+                      {member.name && (
+                        <h3
+                          className="text-xl md:text-2xl font-bold mb-1 text-white drop-shadow-lg"
+                          style={{ fontFamily: 'Outfit, sans-serif', fontWeight: 700 }}
+                        >
+                          {member.name}
+                        </h3>
+                      )}
+                      {member.role && (
+                        <p
+                          className="text-xs md:text-sm font-medium uppercase tracking-wider text-stone-200 dark:text-stone-200 drop-shadow-md"
+                          style={{ fontFamily: "'Inter', sans-serif", fontWeight: 500 }}
+                        >
+                          {member.role}
+                        </p>
+                      )}
+                    </div>
+                    <div
+                      className="hover-panel transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out p-4"
+                      style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)' }}
+                    >
+                      {member.bio && (
+                        <p className="text-sm text-white/70 leading-relaxed mb-4 opacity-0 group-hover:opacity-100 transition-all duration-300 delay-100">
+                          {member.bio}
+                        </p>
+                      )}
+                      {socials.length > 0 && (
+                        <div className="socials-map flex gap-3 justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 delay-200">
+                          {socials.map(({ Icon, url, label }) => (
+                            <Link
+                              key={label}
+                              href={url!}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              aria-label={`${member.name} on ${label}`}
+                              className="text-white/70 hover:text-white hover:scale-110 transition-all duration-200 p-2 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm"
+                            >
+                              <Icon size={14} />
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DDHGTeamCards