blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,247 +1,247 @@
-'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>
-    </>
-  )
-}
+'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-4">
+        <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>
+    </>
+  )
+}