@imansi/templates 0.1.0

package/src/marketing/LandingPage.jsx

@@ -0,0 +1,755 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Avatar,
+  AvatarFallback,
+  Button,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  cn,
+} from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+const Icons = {
+  arrow: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M5 12h14" />
+      <path d="M12 5l7 7-7 7" />
+    </svg>
+  ),
+  check: (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="4,12 10,18 20,6" />
+    </svg>
+  ),
+};
+
+/* ============================================================
+   Mockup tipo Linear — RESPONSIVE
+   - Mobile: solo contenido (sin sidebar)
+   - Tablet+: sidebar + contenido
+   ============================================================ */
+function AppMockup({ view = 'issues' }) {
+  return (
+    <div className="rounded-xl border border-border bg-card overflow-hidden shadow-2xl shadow-black/20">
+      {/* Title bar */}
+      <div className="flex items-center gap-2 px-3 sm:px-4 py-2.5 sm:py-3 border-b border-border bg-muted/20">
+        <div className="flex gap-1.5">
+          <span className="h-2.5 w-2.5 rounded-full bg-muted-foreground/25" />
+          <span className="h-2.5 w-2.5 rounded-full bg-muted-foreground/25" />
+          <span className="h-2.5 w-2.5 rounded-full bg-muted-foreground/25" />
+        </div>
+        <div className="flex-1 flex justify-center min-w-0">
+          <div className="inline-flex items-center gap-1.5 text-[9px] sm:text-[10px] text-muted-foreground font-mono bg-background/50 px-2 sm:px-2.5 py-1 rounded-md truncate">
+            <span className="h-1.5 w-1.5 rounded-full bg-success shrink-0" />
+            <span className="truncate">app.imansi.com</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Grid: 1 col en mobile, sidebar + content en md+ */}
+      <div className="grid md:grid-cols-[180px_1fr] min-h-[360px] md:min-h-[420px]">
+        {/* Sidebar — solo en md+ */}
+        <aside className="hidden md:block border-r border-border bg-muted/10 p-3 space-y-5">
+          <div className="flex items-center gap-2 px-1.5 py-1">
+            <div className="h-6 w-6 rounded-md bg-primary flex items-center justify-center text-[10px] font-bold text-primary-foreground">
+              I
+            </div>
+            <span className="text-[11px] font-semibold">Imansi</span>
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-muted-foreground ml-auto">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </div>
+
+          <div className="space-y-0.5">
+            <p className="px-2 pb-1 text-[9px] uppercase tracking-wider text-muted-foreground/60 font-semibold">
+              Workspace
+            </p>
+            {[
+              { label: 'Inbox', badge: '3' },
+              { label: 'My Issues', active: true },
+              { label: 'Backlog' },
+            ].map((item) => (
+              <div
+                key={item.label}
+                className={cn(
+                  'flex items-center gap-2 px-2 py-1.5 rounded-md text-[11px] transition-colors',
+                  item.active
+                    ? 'bg-primary/10 text-foreground font-medium'
+                    : 'text-muted-foreground'
+                )}
+              >
+                <span
+                  className={cn(
+                    'h-1.5 w-1.5 rounded-full',
+                    item.active ? 'bg-primary' : 'bg-muted-foreground/40'
+                  )}
+                />
+                <span>{item.label}</span>
+                {item.badge && (
+                  <span className="ml-auto text-[9px] bg-muted rounded px-1.5 py-0.5">
+                    {item.badge}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="space-y-0.5">
+            <p className="px-2 pb-1 text-[9px] uppercase tracking-wider text-muted-foreground/60 font-semibold">
+              Teams
+            </p>
+            {['Design', 'Engineering', 'Product'].map((team) => (
+              <div
+                key={team}
+                className="flex items-center gap-2 px-2 py-1.5 rounded-md text-[11px] text-muted-foreground"
+              >
+                <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/40" />
+                <span>{team}</span>
+              </div>
+            ))}
+          </div>
+        </aside>
+
+        {/* Main */}
+        <div className="bg-background/20 min-w-0">
+          {view === 'issues' && (
+            <div>
+              <div className="flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-3 sm:py-3.5 border-b border-border">
+                <span className="text-[11px] sm:text-[12px] font-semibold">
+                  My Issues
+                </span>
+                <span className="text-[9px] sm:text-[10px] text-muted-foreground bg-muted/60 rounded-md px-1.5 py-0.5">
+                  12
+                </span>
+                <div className="ml-auto flex -space-x-1.5">
+                  {['A', 'J', 'M'].map((initial, i) => (
+                    <div
+                      key={i}
+                      className={cn(
+                        'h-5 w-5 rounded-full border-2 border-background flex items-center justify-center text-[8px] font-bold',
+                        i === 0 && 'bg-primary text-primary-foreground',
+                        i === 1 && 'bg-success text-success-foreground',
+                        i === 2 && 'bg-warning text-warning-foreground'
+                      )}
+                    >
+                      {initial}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="divide-y divide-border/60">
+                {[
+                  { id: 'ISS-101', title: 'Design tokens migration', status: 'progress', priority: 'high', assignee: 'A' },
+                  { id: 'ISS-102', title: 'Landing page redesign', status: 'todo', priority: 'med', assignee: 'J' },
+                  { id: 'ISS-103', title: 'Auth flow error handling', status: 'progress', priority: 'high', assignee: 'M' },
+                  { id: 'ISS-104', title: 'Component library docs', status: 'done', priority: 'low', assignee: 'A' },
+                  { id: 'ISS-105', title: 'Dashboard charts perf', status: 'todo', priority: 'med', assignee: 'C' },
+                  { id: 'ISS-106', title: 'Search command palette', status: 'progress', priority: 'med', assignee: 'J' },
+                ].map((issue) => (
+                  <div
+                    key={issue.id}
+                    className="flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2.5 text-[10px] sm:text-[11px] hover:bg-muted/30 transition-colors"
+                  >
+                    <span className="text-[8px] sm:text-[9px] text-muted-foreground font-mono w-12 sm:w-14 shrink-0">
+                      {issue.id}
+                    </span>
+                    <span
+                      className={cn(
+                        'h-2.5 w-2.5 sm:h-3 sm:w-3 rounded-full shrink-0',
+                        issue.status === 'done' && 'bg-success',
+                        issue.status === 'progress' && 'border-2 border-dashed border-primary',
+                        issue.status === 'todo' && 'border-2 border-muted-foreground/40'
+                      )}
+                    />
+                    <span className="flex-1 truncate text-foreground/90">
+                      {issue.title}
+                    </span>
+                    {issue.priority === 'high' && (
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-destructive shrink-0">
+                        <path d="M12 19V5M5 12l7-7 7 7" />
+                      </svg>
+                    )}
+                    <div className="h-4 w-4 rounded-full bg-primary/20 text-primary flex items-center justify-center text-[8px] font-bold shrink-0">
+                      {issue.assignee}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {view === 'command' && (
+            <div className="p-4 sm:p-8">
+              <div className="rounded-lg border border-border bg-card shadow-xl max-w-md mx-auto">
+                <div className="flex items-center gap-2 sm:gap-2.5 px-3 sm:px-3.5 py-2.5 sm:py-3 border-b border-border">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-muted-foreground shrink-0">
+                    <circle cx="11" cy="11" r="8" />
+                    <path d="m21 21-4.3-4.3" />
+                  </svg>
+                  <span className="text-[10px] sm:text-[11px] text-muted-foreground flex-1 truncate">
+                    Type a command or search...
+                  </span>
+                  <kbd className="text-[8px] sm:text-[9px] bg-muted px-1.5 py-0.5 rounded font-mono shrink-0">
+                    ESC
+                  </kbd>
+                </div>
+                <div className="p-1.5 space-y-0.5">
+                  {[
+                    { label: 'Create new issue', shortcut: 'C', active: true },
+                    { label: 'Change theme', shortcut: 'T' },
+                    { label: 'Invite teammate', shortcut: 'I' },
+                    { label: 'Open settings', shortcut: 'S' },
+                    { label: 'Toggle sidebar', shortcut: 'B' },
+                  ].map((item) => (
+                    <div
+                      key={item.label}
+                      className={cn(
+                        'flex items-center gap-2 sm:gap-2.5 px-2 sm:px-2.5 py-1.5 sm:py-2 rounded-md text-[10px] sm:text-[11px]',
+                        item.active
+                          ? 'bg-primary/10 text-foreground'
+                          : 'text-muted-foreground'
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          'h-3.5 w-3.5 sm:h-4 sm:w-4 rounded border shrink-0',
+                          item.active
+                            ? 'bg-primary border-primary'
+                            : 'border-muted-foreground/30'
+                        )}
+                      />
+                      <span className="flex-1 truncate">{item.label}</span>
+                      <kbd className="text-[8px] sm:text-[9px] bg-muted px-1.5 py-0.5 rounded font-mono shrink-0">
+                        {item.shortcut}
+                      </kbd>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {view === 'themes' && (
+            <div className="p-4 sm:p-8 space-y-4">
+              <div className="text-center">
+                <p className="text-[11px] sm:text-[12px] font-semibold mb-1">Tema</p>
+                <p className="text-[9px] sm:text-[10px] text-muted-foreground">
+                  Cambiá el tema sin tocar componentes.
+                </p>
+              </div>
+              <div className="grid grid-cols-2 gap-2 sm:gap-2.5 max-w-md mx-auto">
+                {['minimal', 'modern', 'compact', 'warm'].map((theme) => (
+                  <div
+                    key={theme}
+                    data-theme={theme}
+                    data-mode="dark"
+                    className="rounded-lg border border-border bg-background p-2.5 sm:p-3 space-y-2 sm:space-y-2.5"
+                  >
+                    <div className="flex gap-1 sm:gap-1.5">
+                      <div className="h-3.5 w-3.5 sm:h-4 sm:w-4 rounded-md bg-primary" />
+                      <div className="h-3.5 w-3.5 sm:h-4 sm:w-4 rounded-md bg-success" />
+                      <div className="h-3.5 w-3.5 sm:h-4 sm:w-4 rounded-md bg-warning" />
+                      <div className="h-3.5 w-3.5 sm:h-4 sm:w-4 rounded-md bg-destructive" />
+                    </div>
+                    <p className="text-[9px] sm:text-[10px] capitalize text-muted-foreground font-medium">
+                      {theme}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ============================================================
+   LandingPage
+   ============================================================ */
+export function LandingPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA = { label: 'Empezar', href: '/registro' },
+  headerSecondaryCTA = { label: 'Iniciar sesión', href: '/login' },
+  footerColumns = [],
+
+  badge = 'v0.2.0 disponible',
+  badgeHref = '/changelog',
+  title = 'Software para construir software',
+  titleHighlight = 'construir software',
+  subtitle = 'Un design system completo con 50+ componentes, 6 temas y 28 páginas. Todo lo que necesitás para lanzar tu producto.',
+  primaryCTA = { label: 'Empezar gratis', href: '/registro' },
+  secondaryCTA = { label: 'Ver demo', href: '/login' },
+  caption = 'Sin tarjeta de crédito · Cancelá cuando quieras',
+
+  logosLabel = 'Usado por equipos de',
+  logos = ['Acme', 'Globex', 'Initech', 'Umbrella', 'Soylent', 'Hooli'],
+
+  featuresLabel = 'Features',
+  featuresTitle = 'Una base sólida para cada decisión',
+  featuresSubtitle = 'Diseñado con las mejores prácticas. Nada de deuda técnica.',
+  features = [],
+
+  productLabel = 'Producto',
+  productTitle = 'Hacé más con menos',
+  productSubtitle = 'Mirá cómo se ve en la práctica.',
+  productTabs = [],
+
+  testimonialsLabel = 'Testimonios',
+  testimonialsTitle = 'Amado por los equipos',
+  testimonialsSubtitle = 'Lo que dicen los que ya construyeron con Imansi.',
+  testimonials = [],
+
+  ctaTitle = 'Empezá ahora',
+  ctaSubtitle = 'Unite a los equipos que ya están construyendo con Imansi.',
+  ctaPrimary = { label: 'Crear cuenta', href: '/registro' },
+  ctaSecondary = { label: 'Documentación', href: '/docs' },
+}) {
+  const [activeTab, setActiveTab] = useState(productTabs[0]?.value || '');
+
+  function renderTitle(text, highlight) {
+    if (!highlight) return text;
+    const parts = text.split(highlight);
+    if (parts.length < 2) return text;
+    return (
+      <>
+        {parts[0]}
+        <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+          {highlight}
+        </span>
+        {parts[1]}
+      </>
+    );
+  }
+
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* ============================================================
+          HERO
+          ============================================================ */}
+      <section className="relative overflow-hidden">
+        <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
+          <div
+            className="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[900px] sm:w-[1400px] h-[700px] sm:h-[1000px]"
+            style={{
+              background: `radial-gradient(ellipse at center, var(--color-primary) 0%, transparent 55%)`,
+              opacity: 0.16,
+              filter: 'blur(100px)',
+            }}
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage: `
+                linear-gradient(currentColor 1px, transparent 1px),
+                linear-gradient(90deg, currentColor 1px, transparent 1px)
+              `,
+              backgroundSize: '48px 48px',
+              opacity: 0.02,
+              maskImage: 'radial-gradient(ellipse 70% 55% at 50% 35%, black 30%, transparent 80%)',
+            }}
+          />
+        </div>
+
+        <div className="relative imansi-container pt-20 pb-16 sm:pt-28 sm:pb-24 lg:pt-36 lg:pb-28">
+          <div className="max-w-3xl mx-auto text-center">
+            {badge && (
+              <div className="mb-6 sm:mb-8 flex justify-center">
+                <Link
+                  to={badgeHref}
+                  className="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 backdrop-blur px-3 sm:px-3.5 py-1.5 text-[11px] sm:text-caption font-medium transition-colors hover:border-primary/40 group"
+                >
+                  <span className="flex h-1.5 w-1.5 rounded-full bg-primary" />
+                  <span>{badge}</span>
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="transition-transform group-hover:translate-x-0.5"
+                  >
+                    <path d="M9 18l6-6-6-6" />
+                  </svg>
+                </Link>
+              </div>
+            )}
+
+            <h1 className="text-h1 sm:text-display font-bold tracking-[-0.035em] leading-[1.05] mb-5 sm:mb-6">
+              {renderTitle(title, titleHighlight)}
+            </h1>
+
+            <p className="text-small sm:text-body text-muted-foreground leading-relaxed max-w-2xl mx-auto mb-8 sm:mb-10">
+              {subtitle}
+            </p>
+
+            <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-3 mb-4 sm:mb-5">
+              {primaryCTA && (
+                <Link to={primaryCTA.href} className="w-full sm:w-auto">
+                  <Button size="lg" className="gap-2 w-full sm:w-auto">
+                    {primaryCTA.label}
+                    {Icons.arrow}
+                  </Button>
+                </Link>
+              )}
+              {secondaryCTA && (
+                <Link to={secondaryCTA.href} className="w-full sm:w-auto">
+                  <Button size="lg" variant="outline" className="w-full sm:w-auto">
+                    {secondaryCTA.label}
+                  </Button>
+                </Link>
+              )}
+            </div>
+
+            {caption && (
+              <p className="text-[11px] sm:text-caption text-muted-foreground">{caption}</p>
+            )}
+          </div>
+
+          {/* Mockup */}
+          <div className="relative mt-14 sm:mt-20 lg:mt-24 max-w-6xl mx-auto">
+            <div
+              className="absolute -inset-x-4 sm:-inset-x-12 -top-8 sm:-top-12 -bottom-12 sm:-bottom-20 pointer-events-none"
+              style={{
+                background: `radial-gradient(ellipse at center, var(--color-primary) 0%, transparent 60%)`,
+                opacity: 0.14,
+                filter: 'blur(60px)',
+              }}
+              aria-hidden="true"
+            />
+
+            <div className="relative">
+              <AppMockup view="issues" />
+            </div>
+
+            {/* Floating cards — solo desktop grande */}
+            <div className="absolute -top-4 -left-8 hidden xl:block">
+              <div className="rounded-lg border border-border bg-card p-3 shadow-2xl shadow-black/30 backdrop-blur">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-9 w-9 items-center justify-center rounded-md bg-success/10 text-success">
+                    {Icons.check}
+                  </div>
+                  <div>
+                    <p className="text-[11px] font-semibold leading-none mb-1">
+                      Deploy successful
+                    </p>
+                    <p className="text-[10px] text-muted-foreground leading-none">
+                      hace 2 minutos
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="absolute -bottom-4 -right-8 hidden xl:block">
+              <div className="rounded-lg border border-border bg-card p-3.5 shadow-2xl shadow-black/30 backdrop-blur">
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium mb-2.5">
+                  Equipo
+                </p>
+                <div className="flex -space-x-2">
+                  {['A', 'J', 'M', 'C'].map((initial, i) => (
+                    <div
+                      key={i}
+                      className={cn(
+                        'h-6 w-6 rounded-full border-2 border-card flex items-center justify-center text-[9px] font-bold',
+                        i === 0 && 'bg-primary text-primary-foreground',
+                        i === 1 && 'bg-success text-success-foreground',
+                        i === 2 && 'bg-warning text-warning-foreground',
+                        i === 3 && 'bg-destructive text-destructive-foreground'
+                      )}
+                    >
+                      {initial}
+                    </div>
+                  ))}
+                  <div className="h-6 w-6 rounded-full bg-muted border-2 border-card flex items-center justify-center text-[9px] font-medium">
+                    +8
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ============================================================
+          LOGOS
+          ============================================================ */}
+      {logos.length > 0 && (
+        <section className="border-y border-border/60">
+          <div className="imansi-container py-10 sm:py-14">
+            <p className="text-center text-[10px] sm:text-[11px] uppercase tracking-[0.2em] text-muted-foreground/70 font-medium mb-6 sm:mb-10">
+              {logosLabel}
+            </p>
+            <div className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-12 lg:gap-x-16 gap-y-4 sm:gap-y-6">
+              {logos.map((logo) => (
+                <span
+                  key={logo}
+                  className="text-h4 font-bold tracking-tight text-muted-foreground/30 hover:text-muted-foreground/60 transition-colors"
+                >
+                  {logo}
+                </span>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ============================================================
+          FEATURES
+          ============================================================ */}
+      {features.length > 0 && (
+        <section className="imansi-container py-20 sm:py-24 lg:py-28">
+          <div className="max-w-2xl mx-auto text-center mb-14 sm:mb-16 lg:mb-20 space-y-3 sm:space-y-4">
+            {featuresLabel && (
+              <p className="text-caption uppercase tracking-[0.2em] text-primary font-semibold">
+                {featuresLabel}
+              </p>
+            )}
+            <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+              {featuresTitle}
+            </h2>
+            <p className="text-small sm:text-body text-muted-foreground leading-relaxed">
+              {featuresSubtitle}
+            </p>
+          </div>
+
+          <div className="grid gap-x-8 lg:gap-x-10 gap-y-12 lg:gap-y-14 md:grid-cols-3 max-w-5xl mx-auto">
+            {features.map((feature, i) => (
+              <div key={i} className="text-center space-y-4 sm:space-y-5">
+                <div className="flex h-12 w-12 sm:h-14 sm:w-14 items-center justify-center rounded-xl border border-border bg-card text-foreground mx-auto">
+                  {feature.icon}
+                </div>
+                <div className="space-y-2.5 sm:space-y-3">
+                  <h3 className="text-h4 font-semibold tracking-tight">
+                    {feature.title}
+                  </h3>
+                  <p className="text-small text-muted-foreground leading-relaxed max-w-xs mx-auto">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* ============================================================
+          PRODUCT TABS
+          ============================================================ */}
+      {productTabs.length > 0 && (
+        <section className="relative border-y border-border/60 bg-muted/20 overflow-hidden">
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundImage: `
+                linear-gradient(currentColor 1px, transparent 1px),
+                linear-gradient(90deg, currentColor 1px, transparent 1px)
+              `,
+              backgroundSize: '48px 48px',
+              opacity: 0.02,
+            }}
+            aria-hidden="true"
+          />
+
+          <div className="relative imansi-container py-20 sm:py-24 lg:py-28">
+            <div className="max-w-2xl mx-auto text-center mb-12 sm:mb-14 lg:mb-16 space-y-3 sm:space-y-4">
+              {productLabel && (
+                <p className="text-caption uppercase tracking-[0.2em] text-primary font-semibold">
+                  {productLabel}
+                </p>
+              )}
+              <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+                {productTitle}
+              </h2>
+              <p className="text-small sm:text-body text-muted-foreground leading-relaxed">
+                {productSubtitle}
+              </p>
+            </div>
+
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="max-w-5xl mx-auto">
+              {/* TabsList — centrada con scroll horizontal en mobile */}
+              <div className="flex justify-center mb-10 sm:mb-12 overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
+                <TabsList className="bg-card border border-border shrink-0">
+                  {productTabs.map((tab) => (
+                    <TabsTrigger key={tab.value} value={tab.value}>
+                      {tab.label}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </div>
+
+              {productTabs.map((tab) => (
+                <TabsContent key={tab.value} value={tab.value}>
+                  <div className="space-y-8 sm:space-y-10 lg:space-y-12">
+                    <div className="max-w-2xl mx-auto text-center space-y-2.5 sm:space-y-3">
+                      <h3 className="text-h2 font-bold tracking-tight">
+                        {tab.title}
+                      </h3>
+                      <p className="text-small sm:text-body text-muted-foreground leading-relaxed">
+                        {tab.description}
+                      </p>
+                    </div>
+
+                    <div className="relative">
+                      <div
+                        className="absolute -inset-4 sm:-inset-6 pointer-events-none"
+                        style={{
+                          background: `radial-gradient(ellipse at center, var(--color-primary) 0%, transparent 65%)`,
+                          opacity: 0.12,
+                          filter: 'blur(40px)',
+                        }}
+                        aria-hidden="true"
+                      />
+                      <div className="relative">
+                        <AppMockup view={tab.mockupView} />
+                      </div>
+                    </div>
+
+                    {tab.features?.length > 0 && (
+                      <ul className="grid gap-3 sm:grid-cols-2 max-w-2xl mx-auto pt-2">
+                        {tab.features.map((f, j) => (
+                          <li
+                            key={j}
+                            className="flex items-start gap-2.5 text-small text-muted-foreground"
+                          >
+                            <span className="mt-0.5 text-primary shrink-0">
+                              {Icons.check}
+                            </span>
+                            <span>{f}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                </TabsContent>
+              ))}
+            </Tabs>
+          </div>
+        </section>
+      )}
+
+      {/* ============================================================
+          TESTIMONIALS
+          ============================================================ */}
+      {testimonials.length > 0 && (
+        <section className="imansi-container py-20 sm:py-24 lg:py-28">
+          <div className="max-w-2xl mx-auto text-center mb-14 sm:mb-16 lg:mb-20 space-y-3 sm:space-y-4">
+            {testimonialsLabel && (
+              <p className="text-caption uppercase tracking-[0.2em] text-primary font-semibold">
+                {testimonialsLabel}
+              </p>
+            )}
+            <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+              {testimonialsTitle}
+            </h2>
+            <p className="text-small sm:text-body text-muted-foreground leading-relaxed">
+              {testimonialsSubtitle}
+            </p>
+          </div>
+
+          <div className="grid gap-5 sm:gap-6 md:grid-cols-3 max-w-5xl mx-auto">
+            {testimonials.map((t, i) => (
+              <div
+                key={i}
+                className="rounded-xl border border-border bg-card p-5 sm:p-6 space-y-5 sm:space-y-6 flex flex-col text-center"
+              >
+                <p className="text-small leading-relaxed text-foreground flex-1">
+                  "{t.quote}"
+                </p>
+                <div className="flex items-center justify-center gap-3 pt-4 sm:pt-5 border-t border-border">
+                  <Avatar size="sm">
+                    <AvatarFallback>
+                      {t.author?.charAt(0)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="text-left">
+                    <p className="text-caption font-semibold">
+                      {t.author}
+                    </p>
+                    <p className="text-[10px] text-muted-foreground">
+                      {t.role}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* ============================================================
+          CTA FINAL
+          ============================================================ */}
+      <section className="imansi-container pb-20 sm:pb-24 lg:pb-28">
+        <div className="relative overflow-hidden rounded-2xl border border-border bg-card p-8 sm:p-14 lg:p-24">
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundImage: `
+                radial-gradient(circle at 15% 15%, var(--color-primary) 0%, transparent 40%),
+                radial-gradient(circle at 85% 85%, var(--color-accent) 0%, transparent 40%)
+              `,
+              opacity: 0.14,
+            }}
+            aria-hidden="true"
+          />
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundImage: `
+                linear-gradient(currentColor 1px, transparent 1px),
+                linear-gradient(90deg, currentColor 1px, transparent 1px)
+              `,
+              backgroundSize: '40px 40px',
+              opacity: 0.03,
+            }}
+            aria-hidden="true"
+          />
+
+          <div className="relative max-w-2xl mx-auto text-center space-y-5 sm:space-y-6">
+            <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+              {ctaTitle}
+            </h2>
+            <p className="text-small sm:text-body text-muted-foreground leading-relaxed max-w-xl mx-auto">
+              {ctaSubtitle}
+            </p>
+            <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-3 pt-3 sm:pt-4">
+              {ctaPrimary && (
+                <Link to={ctaPrimary.href} className="w-full sm:w-auto">
+                  <Button size="lg" className="gap-2 w-full sm:w-auto">
+                    {ctaPrimary.label}
+                    {Icons.arrow}
+                  </Button>
+                </Link>
+              )}
+              {ctaSecondary && (
+                <Link to={ctaSecondary.href} className="w-full sm:w-auto">
+                  <Button size="lg" variant="outline" className="w-full sm:w-auto">
+                    {ctaSecondary.label}
+                  </Button>
+                </Link>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+}