deepspace 0.3.10 → 0.4.0

package/features/landing/src/sections/FeaturesGridSection.tsx

@@ -0,0 +1,311 @@
+/**
+ * Landing Section: Features Grid
+ *
+ * Bento-style 2-column grid with 4 feature cards.
+ */
+
+import { type ReactNode } from 'react'
+import { motion } from 'framer-motion'
+import { Zap, Shield, BarChart3, Sparkles, Check } from 'lucide-react'
+import {
+  ScrollReveal,
+  StaggerContainer,
+  staggerChild,
+  GlassCard,
+  PlaceholderImage,
+  SectionHeading,
+  cn,
+} from '../primitives'
+
+// ============================================================================
+// Configuration
+// ============================================================================
+
+const FEATURES: Array<{
+  icon: typeof Zap
+  title: string
+  description: string
+  gradient: string
+  iconColor: string
+  borderGlow: string
+  image: string
+  Visual: (() => ReactNode) | null
+}> = [
+  {
+    icon: Zap,
+    title: 'Lightning Fast',
+    description: 'Real-time sync and instant updates across all devices.',
+    gradient: 'from-amber-500/20 to-orange-500/20',
+    iconColor: 'text-amber-400',
+    borderGlow: 'group-hover:shadow-[0_0_30px_rgba(245,158,11,0.15)]',
+    image: '',
+    Visual: null,
+  },
+  {
+    icon: Shield,
+    title: 'Secure by Default',
+    description: 'Enterprise-grade security with role-based access and encryption.',
+    gradient: 'from-emerald-500/20 to-teal-500/20',
+    iconColor: 'text-emerald-400',
+    borderGlow: 'group-hover:shadow-[0_0_30px_rgba(16,185,129,0.15)]',
+    image: '',
+    Visual: ShieldVisual,
+  },
+  {
+    icon: BarChart3,
+    title: 'Powerful Analytics',
+    description: 'Built-in dashboards and real-time insights for better decisions.',
+    gradient: 'from-blue-500/20 to-cyan-500/20',
+    iconColor: 'text-blue-400',
+    borderGlow: 'group-hover:shadow-[0_0_30px_rgba(59,130,246,0.15)]',
+    image: '',
+    Visual: BarChartVisual,
+  },
+  {
+    icon: Sparkles,
+    title: 'AI-Powered',
+    description: 'Smart automation that learns from your workflow.',
+    gradient: 'from-violet-500/20 to-purple-500/20',
+    iconColor: 'text-violet-400',
+    borderGlow: 'group-hover:shadow-[0_0_30px_rgba(139,92,246,0.15)]',
+    image: '',
+    Visual: null,
+  },
+]
+
+// ============================================================================
+// Decorative Visuals
+// ============================================================================
+
+function SpeedPulseVisual() {
+  return (
+    <div className="relative h-24 w-full overflow-hidden rounded-lg bg-foreground/[0.02]">
+      <div className="absolute inset-0 flex items-center justify-center gap-[3px]">
+        {[0.3, 0.7, 0.5, 1, 0.6, 0.85, 0.45, 0.9, 0.35, 0.75, 0.55, 0.95, 0.4, 0.8, 0.65].map((h, i) => (
+          <motion.div
+            key={i}
+            className="w-[4px] rounded-full bg-gradient-to-t from-amber-500/60 to-orange-400/30"
+            initial={{ height: '10%' }}
+            whileInView={{ height: `${h * 80}%` }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.04, duration: 0.6, ease: 'easeOut' }}
+          />
+        ))}
+      </div>
+      <div className="absolute bottom-0 inset-x-0 h-8 bg-gradient-to-t from-background/90 to-transparent" />
+    </div>
+  )
+}
+
+function ShieldVisual() {
+  const checkItems = ['Encryption', 'RBAC', 'Audit Log']
+  return (
+    <div className="relative h-24 w-full overflow-hidden rounded-lg bg-foreground/[0.02]">
+      <div className="flex flex-col gap-2 px-4 py-3">
+        {checkItems.map((item, i) => (
+          <motion.div
+            key={item}
+            className="flex items-center gap-2.5"
+            initial={{ opacity: 0, x: -12 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.15 + i * 0.12, duration: 0.4 }}
+          >
+            <div className="w-5 h-5 rounded-md bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center shrink-0">
+              <Check className="w-3 h-3 text-emerald-400" />
+            </div>
+            <span className="text-xs text-muted-foreground/60 font-medium">{item}</span>
+            <div className="flex-1 h-px bg-foreground/[0.04]" />
+            <span className="text-[10px] text-emerald-400/60 font-medium">Active</span>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function BarChartVisual() {
+  const bars = [
+    { h: 35, label: 'Mon' },
+    { h: 58, label: 'Tue' },
+    { h: 42, label: 'Wed' },
+    { h: 78, label: 'Thu' },
+    { h: 65, label: 'Fri' },
+    { h: 88, label: 'Sat' },
+    { h: 52, label: 'Sun' },
+  ]
+  return (
+    <div className="relative h-24 w-full overflow-hidden rounded-lg bg-foreground/[0.02]">
+      <div className="absolute inset-0 flex items-end justify-center gap-2 px-4 pb-5 pt-2">
+        {bars.map((bar, i) => (
+          <div key={bar.label} className="flex flex-col items-center gap-1.5 flex-1">
+            <motion.div
+              className="w-full max-w-[24px] rounded-t-sm bg-gradient-to-t from-blue-500/50 to-cyan-400/30"
+              initial={{ height: 0 }}
+              whileInView={{ height: `${bar.h}%` }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.06, duration: 0.5, ease: 'easeOut' }}
+            />
+            <span className="text-[8px] text-muted-foreground/60 font-medium">{bar.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function SparkleVisual() {
+  const nodes = [
+    { x: 20, y: 30, delay: 0 },
+    { x: 50, y: 15, delay: 0.1 },
+    { x: 80, y: 35, delay: 0.2 },
+    { x: 35, y: 65, delay: 0.15 },
+    { x: 65, y: 55, delay: 0.25 },
+    { x: 50, y: 80, delay: 0.3 },
+  ]
+  const connections = [
+    [0, 1], [1, 2], [0, 3], [1, 4], [2, 4], [3, 5], [4, 5],
+  ]
+  return (
+    <div className="relative h-24 w-full overflow-hidden rounded-lg bg-foreground/[0.02]">
+      <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+        {connections.map(([a, b], i) => (
+          <motion.line
+            key={i}
+            x1={nodes[a].x}
+            y1={nodes[a].y}
+            x2={nodes[b].x}
+            y2={nodes[b].y}
+            stroke="url(#sparkleGrad)"
+            strokeWidth="0.5"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 0.4 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.2 + i * 0.05, duration: 0.5 }}
+          />
+        ))}
+        <defs>
+          <linearGradient id="sparkleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="rgb(139,92,246)" stopOpacity="0.6" />
+            <stop offset="100%" stopColor="rgb(168,85,247)" stopOpacity="0.3" />
+          </linearGradient>
+        </defs>
+        {nodes.map((node, i) => (
+          <motion.circle
+            key={i}
+            cx={node.x}
+            cy={node.y}
+            r="3"
+            fill="rgba(139,92,246,0.4)"
+            stroke="rgba(139,92,246,0.6)"
+            strokeWidth="0.5"
+            initial={{ scale: 0, opacity: 0 }}
+            whileInView={{ scale: 1, opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: node.delay + 0.1, duration: 0.4, ease: 'easeOut' }}
+          />
+        ))}
+        {nodes.map((node, i) => (
+          <motion.circle
+            key={`glow-${i}`}
+            cx={node.x}
+            cy={node.y}
+            r="5"
+            fill="none"
+            stroke="rgba(139,92,246,0.15)"
+            strokeWidth="1"
+            initial={{ scale: 0 }}
+            whileInView={{ scale: [1, 1.8, 1] }}
+            viewport={{ once: true }}
+            transition={{ delay: node.delay + 0.5, duration: 2, repeat: Infinity, ease: 'easeInOut' }}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}
+
+// ============================================================================
+// Feature Card
+// ============================================================================
+
+function BentoFeatureCard({
+  feature,
+  size = 'normal',
+}: {
+  feature: (typeof FEATURES)[number]
+  size?: 'large' | 'normal'
+}) {
+  const isLarge = size === 'large'
+
+  return (
+    <motion.div variants={staggerChild} className={isLarge ? 'md:col-span-2' : ''}>
+      <GlassCard className={cn('h-full overflow-hidden', feature.borderGlow)}>
+        <div
+          className={cn(
+            'absolute inset-0 opacity-[0.15] group-hover:opacity-100 transition-opacity duration-700',
+            'bg-gradient-to-br',
+            feature.gradient,
+          )}
+        />
+        <div className={cn('relative z-10 flex flex-col', isLarge ? 'p-8 md:p-10' : 'p-7')}>
+          <div className="flex items-start gap-5">
+            <div
+              className={cn(
+                'shrink-0 rounded-xl flex items-center justify-center',
+                'bg-foreground/[0.06] border border-foreground/[0.08]',
+                'group-hover:scale-110 transition-transform duration-500',
+                isLarge ? 'w-14 h-14' : 'w-11 h-11',
+              )}
+            >
+              <feature.icon className={cn(feature.iconColor, isLarge ? 'w-7 h-7' : 'w-5 h-5')} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <h3 className={cn('text-foreground font-semibold mb-2', isLarge ? 'text-xl' : 'text-base')}>
+                {feature.title}
+              </h3>
+              <p className={cn('text-muted-foreground leading-relaxed', isLarge ? 'text-base' : 'text-sm')}>
+                {feature.description}
+              </p>
+            </div>
+          </div>
+          {feature.Visual ? (
+            <div className={cn(isLarge ? 'mt-8' : 'mt-5')}>
+              <feature.Visual />
+            </div>
+          ) : isLarge ? (
+            <div className="mt-8">
+              <PlaceholderImage label="Add Image" src={feature.image || undefined} aspectRatio="aspect-[16/10]" />
+            </div>
+          ) : null}
+        </div>
+      </GlassCard>
+    </motion.div>
+  )
+}
+
+// ============================================================================
+// Section
+// ============================================================================
+
+export default function FeaturesGridSection() {
+  return (
+    <section id="features" className="relative py-28 md:py-36">
+      <div className="max-w-6xl mx-auto px-6">
+        <SectionHeading
+          tag="Features"
+          title="Everything you need"
+          titleHighlight="all in one place"
+          subtitle="Powerful features designed to streamline your workflow."
+        />
+
+        <StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-5" staggerDelay={0.08}>
+          <BentoFeatureCard feature={FEATURES[0]} size="large" />
+          <BentoFeatureCard feature={FEATURES[1]} />
+          <BentoFeatureCard feature={FEATURES[2]} />
+          <BentoFeatureCard feature={FEATURES[3]} size="large" />
+        </StaggerContainer>
+      </div>
+    </section>
+  )
+}

package/features/landing/src/sections/HowItWorksSection.tsx

@@ -0,0 +1,62 @@
+/**
+ * Landing Section: How It Works
+ *
+ * Numbered 3-step horizontal flow.
+ */
+
+import { motion } from 'framer-motion'
+import { StaggerContainer, staggerChild, SectionHeading } from '../primitives'
+
+const STEPS = [
+  {
+    number: '01',
+    title: 'Sign Up',
+    description: 'Create your account in seconds. No credit card required, no complicated setup.',
+  },
+  {
+    number: '02',
+    title: 'Set Up',
+    description: 'Configure your workspace and invite your team. Everything is guided step by step.',
+  },
+  {
+    number: '03',
+    title: 'Go',
+    description: 'Start using the app right away. Everything you need is ready from day one.',
+  },
+]
+
+export default function HowItWorksSection() {
+  return (
+    <section id="how-it-works" className="relative py-28 md:py-36">
+      <div className="max-w-5xl mx-auto px-6">
+        <SectionHeading
+          tag="How It Works"
+          title="Up and running in minutes"
+          subtitle="Three simple steps to get started."
+        />
+
+        <StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-6 relative" staggerDelay={0.15}>
+          <div className="hidden md:block absolute top-[36px] left-[16.67%] right-[16.67%] h-px">
+            <div className="w-full h-full bg-gradient-to-r from-primary/40 via-violet-400/40 to-primary/40" />
+          </div>
+
+          {STEPS.map(step => (
+            <motion.div key={step.number} variants={staggerChild}>
+              <div className="relative text-center">
+                <div className="relative z-10 w-[72px] h-[72px] mx-auto mb-6 rounded-2xl bg-background/80 border border-foreground/[0.1] flex items-center justify-center shadow-lg">
+                  <span className="text-2xl font-bold bg-gradient-to-br from-primary to-violet-400 bg-clip-text text-transparent">
+                    {step.number}
+                  </span>
+                </div>
+                <h3 className="text-xl font-semibold text-foreground mb-3">{step.title}</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed max-w-[280px] mx-auto">
+                  {step.description}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </StaggerContainer>
+      </div>
+    </section>
+  )
+}

package/features/landing/src/sections/LogoCloudSection.tsx

@@ -0,0 +1,58 @@
+/**
+ * Landing Section: Logo Cloud
+ *
+ * Responsive grid of partner/integration logos.
+ */
+
+import { ScrollReveal, SectionHeading, cn } from '../primitives'
+
+interface Logo {
+  name: string
+  imageUrl?: string
+}
+
+const LOGOS: Logo[] = [
+  { name: 'Acme Corp' },
+  { name: 'Globex' },
+  { name: 'Initech' },
+  { name: 'Umbrella' },
+  { name: 'Stark Ind.' },
+  { name: 'Wayne Ent.' },
+]
+
+export default function LogoCloudSection() {
+  return (
+    <section className="relative py-20 md:py-28">
+      <div className="max-w-5xl mx-auto px-6">
+        <SectionHeading tag="Trusted By" title="Used by teams you know" />
+
+        <ScrollReveal>
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
+            {LOGOS.map(logo => (
+              <div
+                key={logo.name}
+                className={cn(
+                  'flex items-center justify-center h-20 rounded-xl',
+                  'bg-foreground/[0.03] border border-foreground/[0.06]',
+                  'opacity-50 hover:opacity-100 transition-opacity duration-300',
+                )}
+              >
+                {logo.imageUrl ? (
+                  <img
+                    src={logo.imageUrl}
+                    alt={logo.name}
+                    className="max-h-10 max-w-[80%] object-contain brightness-0 invert opacity-60"
+                  />
+                ) : (
+                  <span className="text-sm font-medium text-muted-foreground tracking-wide">
+                    {logo.name}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  )
+}

package/features/landing/src/sections/ShowcaseSection.tsx

@@ -0,0 +1,63 @@
+/**
+ * Landing Section: Showcase
+ *
+ * Alternating left/right product blocks.
+ */
+
+import { ArrowRight } from 'lucide-react'
+import { ScrollReveal, BrowserMockup, cn } from '../primitives'
+
+const SHOWCASE_ITEMS = [
+  {
+    label: 'Overview',
+    title: 'See everything at a glance',
+    description: 'A clear, organized view of what matters most. Stay on top of your work without the clutter.',
+    image: '',
+  },
+  {
+    label: 'Workflow',
+    title: 'Work the way you want',
+    description: 'Flexible tools that adapt to your process. Set things up once and let the app handle the rest.',
+    image: '',
+  },
+]
+
+export default function ShowcaseSection() {
+  return (
+    <section className="relative py-28 md:py-36">
+      <div className="max-w-6xl mx-auto px-6 space-y-24 md:space-y-32">
+        {SHOWCASE_ITEMS.map((item, idx) => {
+          const isReversed = idx % 2 !== 0
+          return (
+            <div
+              key={item.title}
+              className={cn(
+                'flex flex-col gap-10 md:gap-16 items-center',
+                isReversed ? 'md:flex-row-reverse' : 'md:flex-row',
+              )}
+            >
+              <ScrollReveal className="flex-1 w-full" direction={isReversed ? 'right' : 'left'} delay={0.1}>
+                <BrowserMockup label={item.label} src={item.image || undefined} />
+              </ScrollReveal>
+              <ScrollReveal className="flex-1 w-full md:max-w-md" direction={isReversed ? 'left' : 'right'} delay={0.2}>
+                <span className="inline-block text-xs font-semibold tracking-[0.2em] uppercase text-primary/80 mb-3">
+                  {item.label}
+                </span>
+                <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold text-foreground leading-tight tracking-[-0.01em]">
+                  {item.title}
+                </h3>
+                <p className="mt-4 text-muted-foreground text-base md:text-lg leading-relaxed">
+                  {item.description}
+                </p>
+                <button className="mt-6 inline-flex items-center gap-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors group">
+                  Learn more
+                  <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
+                </button>
+              </ScrollReveal>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

package/features/landing/src/sections/StatsSection.tsx

@@ -0,0 +1,31 @@
+/**
+ * Landing Section: Stats Band
+ *
+ * Full-width gradient band with animated counter stats.
+ */
+
+import { StaggerContainer, AnimatedStat } from '../primitives'
+
+const STATS = [
+  { value: '99.9%', label: 'Uptime' },
+  { value: '10x', label: 'Faster' },
+  { value: '50K+', label: 'Users' },
+  { value: '<50ms', label: 'Response Time' },
+]
+
+export default function StatsSection() {
+  return (
+    <section className="relative py-20 overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-r from-primary/[0.08] via-violet-500/[0.06] to-primary/[0.08]" />
+      <div className="absolute inset-0 border-y border-foreground/[0.06]" />
+
+      <div className="relative max-w-5xl mx-auto px-6">
+        <StaggerContainer className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4" staggerDelay={0.08}>
+          {STATS.map(stat => (
+            <AnimatedStat key={stat.label} value={stat.value} label={stat.label} />
+          ))}
+        </StaggerContainer>
+      </div>
+    </section>
+  )
+}

package/features/landing/src/sections/TeamSection.tsx

@@ -0,0 +1,86 @@
+/**
+ * Landing Section: Team / About
+ *
+ * Responsive grid of team member cards.
+ */
+
+import { motion } from 'framer-motion'
+import { Twitter, Github, Linkedin } from 'lucide-react'
+import { StaggerContainer, staggerChild, GlassCard, SectionHeading, cn } from '../primitives'
+
+interface TeamMember {
+  name: string
+  role: string
+  socials?: {
+    twitter?: string
+    github?: string
+    linkedin?: string
+  }
+}
+
+const TEAM_MEMBERS: TeamMember[] = [
+  { name: 'Alex Rivera', role: 'Founder & CEO', socials: { twitter: '#', linkedin: '#' } },
+  { name: 'Jordan Lee', role: 'Head of Engineering', socials: { github: '#', linkedin: '#' } },
+  { name: 'Sam Patel', role: 'Lead Designer', socials: { twitter: '#' } },
+  { name: 'Morgan Chen', role: 'Product Manager', socials: { linkedin: '#' } },
+]
+
+const SOCIAL_ICONS = { twitter: Twitter, github: Github, linkedin: Linkedin } as const
+
+export default function TeamSection() {
+  return (
+    <section id="team" className="relative py-28 md:py-36">
+      <div className="max-w-6xl mx-auto px-6">
+        <SectionHeading
+          tag="Team"
+          title="Meet the people behind the product"
+          subtitle="A small team with big ambitions, building something we believe in."
+        />
+
+        <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" staggerDelay={0.08}>
+          {TEAM_MEMBERS.map(member => (
+            <motion.div key={member.name} variants={staggerChild}>
+              <GlassCard className="p-6 text-center" hoverEffect>
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary/30 to-violet-500/30 border border-foreground/[0.1] flex items-center justify-center">
+                  <span className="text-lg font-semibold text-muted-foreground">
+                    {member.name.split(' ').map(n => n[0]).join('')}
+                  </span>
+                </div>
+                <h3 className="text-base font-semibold text-foreground">{member.name}</h3>
+                <p className="text-sm text-muted-foreground mt-1">{member.role}</p>
+
+                {member.socials && Object.keys(member.socials).length > 0 && (
+                  <div className="flex items-center justify-center gap-2 mt-4">
+                    {(Object.entries(member.socials) as Array<[keyof typeof SOCIAL_ICONS, string]>).map(
+                      ([platform, url]) => {
+                        const Icon = SOCIAL_ICONS[platform]
+                        if (!url) return null
+                        return (
+                          <a
+                            key={platform}
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={cn(
+                              'w-8 h-8 rounded-lg flex items-center justify-center',
+                              'bg-foreground/[0.04] border border-foreground/[0.08]',
+                              'text-muted-foreground/60 hover:text-muted-foreground hover:bg-foreground/[0.08]',
+                              'transition-all duration-200',
+                            )}
+                            aria-label={platform}
+                          >
+                            <Icon className="w-3.5 h-3.5" />
+                          </a>
+                        )
+                      },
+                    )}
+                  </div>
+                )}
+              </GlassCard>
+            </motion.div>
+          ))}
+        </StaggerContainer>
+      </div>
+    </section>
+  )
+}

package/features/landing/src/sections/TestimonialsSection.tsx

@@ -0,0 +1,68 @@
+/**
+ * Landing Section: Testimonials
+ *
+ * 3-column grid of testimonial cards.
+ */
+
+import { motion } from 'framer-motion'
+import { Star } from 'lucide-react'
+import { StaggerContainer, staggerChild, GlassCard, SectionHeading } from '../primitives'
+
+const TESTIMONIALS = [
+  {
+    quote: 'This completely changed how I work. Everything is faster and more organized now.',
+    name: 'Alex Johnson',
+    role: 'Product Manager',
+    rating: 5,
+  },
+  {
+    quote: 'The simplicity is what sold me. I was up and running in minutes, not hours.',
+    name: 'Sarah Chen',
+    role: 'Designer',
+    rating: 5,
+  },
+  {
+    quote: 'Finally an app that works the way I think. The flexibility is incredible.',
+    name: 'Marcus Williams',
+    role: 'Developer',
+    rating: 5,
+  },
+]
+
+export default function TestimonialsSection() {
+  return (
+    <section id="testimonials" className="relative py-28 md:py-36">
+      <div className="max-w-6xl mx-auto px-6">
+        <SectionHeading tag="Testimonials" title="Loved by people everywhere" />
+
+        <StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-6" staggerDelay={0.12}>
+          {TESTIMONIALS.map(t => (
+            <motion.div key={t.name} variants={staggerChild}>
+              <GlassCard className="p-7 h-full flex flex-col" hoverEffect={false}>
+                <div className="flex gap-1 mb-5">
+                  {Array.from({ length: t.rating }).map((_, i) => (
+                    <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />
+                  ))}
+                </div>
+                <p className="text-muted-foreground text-sm leading-relaxed flex-1">
+                  &ldquo;{t.quote}&rdquo;
+                </p>
+                <div className="flex items-center gap-3 mt-6 pt-5 border-t border-foreground/[0.06]">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary/30 to-violet-500/30 border border-foreground/[0.1] flex items-center justify-center">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      {t.name.split(' ').map(n => n[0]).join('')}
+                    </span>
+                  </div>
+                  <div>
+                    <div className="text-sm font-medium text-foreground">{t.name}</div>
+                    <div className="text-xs text-muted-foreground/60">{t.role}</div>
+                  </div>
+                </div>
+              </GlassCard>
+            </motion.div>
+          ))}
+        </StaggerContainer>
+      </div>
+    </section>
+  )
+}