From 242ed1101ec607fcf2e6e09abc3741ac9d9b2760 Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Tue, 14 Apr 2026 16:25:37 +0200
Subject: [PATCH] =?UTF-8?q?style(team):=20tighter=20card=20layout=20?=
 =?UTF-8?q?=E2=80=94=20equal=20height,=20equity=20pill,=20GitHub/LinkedIn?=
 =?UTF-8?q?=20detection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- grid items-stretch so cards match height
- Smaller avatar (16->64px) to free vertical space
- Equity moved to a top-right pill (compact); decimals collapsed via equityDisplay()
- Profile link icon auto-detects GitHub vs LinkedIn vs generic
- Expertise tags get their own divider strip at card bottom — cleaner hierarchy
- Card background lightened from 0.08 to 0.04 with subtle hover border

Bio text itself shortened on the data side (both draft versions via admin API).
---
 pitch-deck/components/slides/TeamSlide.tsx | 144 ++++++++++++---------
 1 file changed, 82 insertions(+), 62 deletions(-)

diff --git a/pitch-deck/components/slides/TeamSlide.tsx b/pitch-deck/components/slides/TeamSlide.tsx
index f50d033..48a578e 100644
--- a/pitch-deck/components/slides/TeamSlide.tsx
+++ b/pitch-deck/components/slides/TeamSlide.tsx
@@ -3,7 +3,7 @@
 import { motion } from 'framer-motion'
 import { Language, PitchTeamMember } from '@/lib/types'
 import { t } from '@/lib/i18n'
-import { User, Linkedin } from 'lucide-react'
+import { User, Linkedin, Github } from 'lucide-react'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
 import Image from 'next/image'
@@ -13,89 +13,109 @@ interface TeamSlideProps {
   team: PitchTeamMember[]
 }
 
+function equityDisplay(pct: number | string | null | undefined): string {
+  const n = Number(pct)
+  if (!Number.isFinite(n)) return '—'
+  return Number.isInteger(n) ? `${n}%` : `${n.toFixed(1)}%`
+}
+
+function detectProfileLink(url: string | null | undefined): { icon: typeof Linkedin | typeof Github; label: string } | null {
+  if (!url) return null
+  if (url.includes('github.com')) return { icon: Github, label: 'GitHub' }
+  if (url.includes('linkedin.com')) return { icon: Linkedin, label: 'LinkedIn' }
+  return { icon: Linkedin, label: 'Profile' }
+}
+
 export default function TeamSlide({ lang, team }: TeamSlideProps) {
   const i = t(lang)
 
   return (
     <div>
-      <FadeInView className="text-center mb-12">
+      <FadeInView className="text-center mb-8">
         <h2 className="text-4xl md:text-5xl font-bold mb-3">
           <GradientText>{i.team.title}</GradientText>
         </h2>
         <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.team.subtitle}</p>
       </FadeInView>
 
-      <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-        {team.map((member, idx) => (
-          <motion.div
-            key={member.id}
-            initial={{ opacity: 0, x: idx === 0 ? -40 : 40 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: 0.3 + idx * 0.2, duration: 0.6 }}
-            className="bg-white/[0.08] backdrop-blur-xl border border-white/10 rounded-3xl p-8"
-          >
-            <div className="flex items-start gap-5">
-              {/* Avatar — Foto oder Fallback */}
-              {member.photo_url ? (
-                <div className="w-20 h-20 rounded-2xl overflow-hidden shrink-0 shadow-lg">
-                  <Image
-                    src={member.photo_url}
-                    alt={member.name}
-                    width={80}
-                    height={80}
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              ) : (
-                <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600
-                  flex items-center justify-center shrink-0 shadow-lg">
-                  <User className="w-10 h-10 text-white" />
-                </div>
-              )}
+      <div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto items-stretch">
+        {team.map((member, idx) => {
+          const link = detectProfileLink(member.linkedin_url)
+          const LinkIcon = link?.icon
+          return (
+            <motion.div
+              key={member.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 + idx * 0.15, duration: 0.5 }}
+              className="bg-white/[0.04] backdrop-blur-xl border border-white/[0.08] rounded-2xl p-6 flex flex-col hover:border-indigo-500/20 transition-colors"
+            >
+              {/* Header: avatar + name + role */}
+              <div className="flex items-center gap-4 mb-5">
+                {member.photo_url ? (
+                  <div className="w-16 h-16 rounded-2xl overflow-hidden shrink-0 shadow-lg">
+                    <Image
+                      src={member.photo_url}
+                      alt={member.name}
+                      width={64}
+                      height={64}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shrink-0 shadow-lg shadow-indigo-500/20">
+                    <User className="w-8 h-8 text-white" />
+                  </div>
+                )}
 
-              <div className="flex-1">
-                <div className="flex items-center gap-2 mb-1">
-                  <h3 className="text-xl font-bold text-white">{member.name}</h3>
-                  {member.linkedin_url && (
-                    <a
-                      href={member.linkedin_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-1 text-white/30 hover:text-[#0A66C2] transition-colors"
-                      title="LinkedIn"
-                    >
-                      <Linkedin className="w-4 h-4" />
-                    </a>
-                  )}
-                </div>
-                <p className="text-indigo-400 text-sm font-medium mb-3">
-                  {lang === 'de' ? member.role_de : member.role_en}
-                </p>
-                <p className="text-sm text-white/50 leading-relaxed mb-4">
-                  {lang === 'de' ? member.bio_de : member.bio_en}
-                </p>
-
-                {/* Equity */}
-                <div className="flex items-center gap-2 mb-3">
-                  <span className="text-xs text-white/40">{i.team.equity}:</span>
-                  <span className="text-sm font-bold text-white">{member.equity_pct}%</span>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 mb-0.5 flex-wrap">
+                    <h3 className="text-xl font-bold text-white truncate">{member.name}</h3>
+                    {link && LinkIcon && (
+                      <a
+                        href={member.linkedin_url!}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-white/30 hover:text-indigo-300 transition-colors"
+                        title={link.label}
+                      >
+                        <LinkIcon className="w-4 h-4" />
+                      </a>
+                    )}
+                  </div>
+                  <p className="text-indigo-400 text-sm font-medium">
+                    {lang === 'de' ? member.role_de : member.role_en}
+                  </p>
                 </div>
 
-                {/* Expertise Tags */}
-                <div className="flex flex-wrap gap-1.5">
+                {/* Equity pill in top-right */}
+                <div className="text-right shrink-0">
+                  <div className="text-[10px] uppercase tracking-wider text-white/30">{i.team.equity}</div>
+                  <div className="text-base font-bold text-white tabular-nums">{equityDisplay(member.equity_pct)}</div>
+                </div>
+              </div>
+
+              {/* Bio */}
+              <p className="text-sm text-white/60 leading-relaxed mb-5 flex-1">
+                {lang === 'de' ? member.bio_de : member.bio_en}
+              </p>
+
+              {/* Expertise tags */}
+              {(member.expertise || []).length > 0 && (
+                <div className="flex flex-wrap gap-1.5 pt-4 border-t border-white/[0.06]">
                   {(member.expertise || []).map((skill, sidx) => (
                     <span
                       key={sidx}
-                      className="text-xs px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20"
+                      className="text-[11px] px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20"
                     >
                       {skill}
                     </span>
                   ))}
                 </div>
-              </div>
-            </div>
-          </motion.div>
-        ))}
+              )}
+            </motion.div>
+          )
+        })}
       </div>
     </div>
   )