@imansi/templates 0.1.0

package/src/marketing/HomePage.jsx

@@ -0,0 +1,702 @@
+import { Link } from 'react-router-dom';
+import {
+  Avatar,
+  AvatarFallback,
+  Button,
+  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>
+  ),
+  mapPin: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  ),
+  clock: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  ),
+  phone: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+    </svg>
+  ),
+  mail: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+      <path d="m22 6-10 7L2 6" />
+    </svg>
+  ),
+};
+
+export function HomePage({
+  brandName = 'El Trigal',
+  brandLogo,
+  navLinks = [],
+  headerCTA = { label: 'Reservar', href: '/reservar' },
+  headerSecondaryCTA = { label: 'Ver menú', href: '/menu' },
+  footerColumns = [],
+
+  /* Hero */
+  heroBadge = 'Panadería artesanal desde 1985',
+  heroTitle = 'El pan que tu mesa merece',
+  heroHighlight = 'tu mesa',
+  heroSubtitle = 'Horneamos cada mañana con masa madre, harinas orgánicas y tres generaciones de tradición.',
+  heroImage = '',
+  heroPrimaryCTA = { label: 'Ver menú', href: '/menu' },
+  heroSecondaryCTA = { label: 'Reservar mesa', href: '/reservar' },
+  heroCaption = 'Abierto de lunes a domingo · 7:00 a 21:00',
+
+  /* Logos / prensa */
+  pressLabel = 'Nuestro pan fue destacado en',
+  pressLogos = [],
+
+  /* Stats */
+  stats = [],
+
+  /* About */
+  aboutLabel = 'Nuestra historia',
+  aboutTitle = 'Tres generaciones horneando',
+  aboutText = [],
+  aboutImage = '',
+  aboutSign = '',
+  aboutCTA = { label: 'Conocer más', href: '/nosotros' },
+
+  /* Products */
+  productsLabel = 'Nuestro menú',
+  productsTitle = 'Frescos cada mañana',
+  productsSubtitle = 'Todo lo que sale del horno está hecho el mismo día con ingredientes locales.',
+  productsCTA = { label: 'Ver menú completo', href: '/menu' },
+  products = [],
+
+  /* Gallery */
+  galleryLabel = 'Galería',
+  galleryTitle = 'Un paseo por el local',
+  gallerySubtitle = 'Un espacio cálido para compartir.',
+  gallery = [],
+
+  /* Testimonials */
+  testimonialsLabel = 'Testimonios',
+  testimonialsTitle = 'Nuestros clientes opinan',
+  testimonialsSubtitle = 'Más de 4,200 reseñas con 4.9 estrellas.',
+  testimonials = [],
+
+  /* Visit */
+  visitLabel = 'Visitanos',
+  visitTitle = 'Te esperamos',
+  visitSubtitle = 'En el corazón del barrio, a metros del parque.',
+  visitAddress = '',
+  visitHours = [],
+  visitPhone = '',
+  visitEmail = '',
+  visitImage = '',
+  visitCTA = { label: 'Cómo llegar', href: '#' },
+
+  /* CTA final */
+  ctaTitle = 'Hacé tu pedido',
+  ctaSubtitle = 'Pedí online y pasá a retirar, o reservá una mesa para disfrutar en el local.',
+  ctaPrimary = { label: 'Pedir online', href: '#' },
+  ctaSecondary = { label: 'Llamar', href: 'tel:+54' },
+}) {
+  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-[-20%] left-1/2 -translate-x-1/2 w-[900px] sm:w-[1400px] h-[600px] sm:h-[900px]"
+            style={{
+              background: `radial-gradient(ellipse at center, var(--color-primary) 0%, transparent 55%)`,
+              opacity: 0.12,
+              filter: 'blur(100px)',
+            }}
+          />
+        </div>
+
+        <div className="relative imansi-container pt-20 pb-16 sm:pt-28 sm:pb-20 lg:pt-32 lg:pb-24">
+          <div className="max-w-3xl mx-auto text-center">
+            {heroBadge && (
+              <div className="mb-6 sm:mb-8 flex justify-center">
+                <span 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 text-muted-foreground">
+                  <span className="flex h-1.5 w-1.5 rounded-full bg-primary" />
+                  {heroBadge}
+                </span>
+              </div>
+            )}
+
+            <h1 className="text-h1 sm:text-display font-bold tracking-[-0.035em] leading-[1.05] mb-5 sm:mb-6">
+              {renderTitle(heroTitle, heroHighlight)}
+            </h1>
+
+            <p className="text-small sm:text-body text-muted-foreground leading-relaxed max-w-2xl mx-auto mb-8 sm:mb-10">
+              {heroSubtitle}
+            </p>
+
+            <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-3 mb-4 sm:mb-5">
+              {heroPrimaryCTA && (
+                <Link to={heroPrimaryCTA.href} className="w-full sm:w-auto">
+                  <Button size="lg" className="gap-2 w-full sm:w-auto">
+                    {heroPrimaryCTA.label}
+                    {Icons.arrow}
+                  </Button>
+                </Link>
+              )}
+              {heroSecondaryCTA && (
+                <Link to={heroSecondaryCTA.href} className="w-full sm:w-auto">
+                  <Button size="lg" variant="outline" className="w-full sm:w-auto">
+                    {heroSecondaryCTA.label}
+                  </Button>
+                </Link>
+              )}
+            </div>
+
+            {heroCaption && (
+              <p className="text-[11px] sm:text-caption text-muted-foreground">
+                {heroCaption}
+              </p>
+            )}
+          </div>
+
+          {/* Imagen del hero */}
+          {heroImage && (
+            <div className="relative mt-14 sm:mt-20 lg:mt-24 max-w-6xl mx-auto">
+              <div
+                className="absolute -inset-4 sm:-inset-8 pointer-events-none"
+                style={{
+                  background: `radial-gradient(ellipse at center, var(--color-primary) 0%, transparent 60%)`,
+                  opacity: 0.12,
+                  filter: 'blur(60px)',
+                }}
+                aria-hidden="true"
+              />
+              <div className="relative rounded-2xl overflow-hidden border border-border shadow-2xl shadow-black/20">
+                <img
+                  src={heroImage}
+                  alt={brandName}
+                  className="w-full aspect-[16/10] sm:aspect-[21/9] object-cover"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* ============================================================
+          PRENSA
+          ============================================================ */}
+      {pressLogos.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">
+              {pressLabel}
+            </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">
+              {pressLogos.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>
+      )}
+
+      {/* ============================================================
+          STATS
+          ============================================================ */}
+      {stats.length > 0 && (
+        <section className="imansi-container py-14 sm:py-20">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 sm:gap-10 max-w-5xl mx-auto">
+            {stats.map((stat, i) => (
+              <div key={i} className="text-center space-y-2">
+                <p className="text-h1 sm:text-display font-bold tracking-tight text-primary">
+                  {stat.value}
+                </p>
+                <p className="text-small font-semibold">{stat.label}</p>
+                {stat.description && (
+                  <p className="text-caption text-muted-foreground">
+                    {stat.description}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* ============================================================
+          ABOUT — side by side en desktop, apilado en mobile
+          ============================================================ */}
+      {aboutImage && (
+        <section className="border-y border-border/60 bg-muted/20">
+          <div className="imansi-container py-20 sm:py-24 lg:py-28">
+            <div className="grid gap-10 lg:gap-16 lg:grid-cols-2 items-center max-w-6xl mx-auto">
+              {/* Imagen */}
+              <div className="relative order-1 lg:order-1">
+                <div className="relative rounded-2xl overflow-hidden border border-border shadow-xl">
+                  <img
+                    src={aboutImage}
+                    alt={aboutTitle}
+                    className="w-full aspect-[4/3] object-cover"
+                  />
+                </div>
+              </div>
+
+              {/* Texto */}
+              <div className="order-2 lg:order-2 space-y-5 sm:space-y-6">
+                <div className="space-y-3 sm:space-y-4">
+                  {aboutLabel && (
+                    <p className="text-caption uppercase tracking-[0.2em] text-primary font-semibold">
+                      {aboutLabel}
+                    </p>
+                  )}
+                  <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+                    {aboutTitle}
+                  </h2>
+                </div>
+
+                {aboutText.length > 0 && (
+                  <div className="space-y-4">
+                    {aboutText.map((paragraph, i) => (
+                      <p
+                        key={i}
+                        className="text-small sm:text-body text-muted-foreground leading-relaxed"
+                      >
+                        {paragraph}
+                      </p>
+                    ))}
+                  </div>
+                )}
+
+                {aboutSign && (
+                  <p className="text-small italic text-muted-foreground border-l-2 border-primary/30 pl-4">
+                    {aboutSign}
+                  </p>
+                )}
+
+                {aboutCTA && (
+                  <div className="pt-2">
+                    <Link to={aboutCTA.href}>
+                      <Button variant="outline" className="gap-2">
+                        {aboutCTA.label}
+                        {Icons.arrow}
+                      </Button>
+                    </Link>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ============================================================
+          PRODUCTS / MENU
+          ============================================================ */}
+      {products.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">
+            {productsLabel && (
+              <p className="text-caption uppercase tracking-[0.2em] text-primary font-semibold">
+                {productsLabel}
+              </p>
+            )}
+            <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+              {productsTitle}
+            </h2>
+            <p className="text-small sm:text-body text-muted-foreground leading-relaxed">
+              {productsSubtitle}
+            </p>
+          </div>
+
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
+            {products.map((product, i) => (
+              <div
+                key={i}
+                className="group rounded-2xl border border-border bg-card overflow-hidden transition-all hover:shadow-xl hover:-translate-y-0.5"
+              >
+                {product.image && (
+                  <div className="aspect-[4/3] overflow-hidden bg-muted">
+                    <img
+                      src={product.image}
+                      alt={product.name}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                    />
+                  </div>
+                )}
+                <div className="p-5 sm:p-6 space-y-3">
+                  <div className="flex items-start justify-between gap-3">
+                    <h3 className="text-h4 font-semibold tracking-tight">
+                      {product.name}
+                    </h3>
+                    {product.price && (
+                      <span className="text-small font-semibold text-primary whitespace-nowrap">
+                        {product.price}
+                      </span>
+                    )}
+                  </div>
+                  {product.description && (
+                    <p className="text-small text-muted-foreground leading-relaxed">
+                      {product.description}
+                    </p>
+                  )}
+                  {product.tags?.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5 pt-1">
+                      {product.tags.map((tag, j) => (
+                        <span
+                          key={j}
+                          className="inline-flex items-center rounded-full border border-border bg-muted/50 px-2.5 py-0.5 text-[10px] font-medium text-muted-foreground"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {productsCTA && (
+            <div className="text-center mt-12 sm:mt-14">
+              <Link to={productsCTA.href}>
+                <Button size="lg" variant="outline" className="gap-2">
+                  {productsCTA.label}
+                  {Icons.arrow}
+                </Button>
+              </Link>
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* ============================================================
+          GALLERY
+          ============================================================ */}
+      {gallery.length > 0 && (
+        <section className="border-y border-border/60 bg-muted/20">
+          <div 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 space-y-3 sm:space-y-4">
+              {galleryLabel && (
+                <p className="text-caption uppercase tracking-[0.2em] text-primary font-semibold">
+                  {galleryLabel}
+                </p>
+              )}
+              <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+                {galleryTitle}
+              </h2>
+              {gallerySubtitle && (
+                <p className="text-small sm:text-body text-muted-foreground leading-relaxed">
+                  {gallerySubtitle}
+                </p>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4 max-w-5xl mx-auto">
+              {gallery.map((item, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    'group rounded-xl overflow-hidden border border-border bg-muted transition-all hover:shadow-lg',
+                    // La primera imagen ocupa 2x2 en desktop
+                    i === 0 && 'col-span-2 md:row-span-2 aspect-square md:aspect-auto',
+                    i > 0 && 'aspect-square'
+                  )}
+                >
+                  <img
+                    src={item.image}
+                    alt={item.alt || ''}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                  />
+                </div>
+              ))}
+            </div>
+          </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>
+            {testimonialsSubtitle && (
+              <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"
+              >
+                {/* Estrellas */}
+                <div className="flex justify-center gap-0.5 text-warning">
+                  {Array.from({ length: 5 }).map((_, j) => (
+                    <svg
+                      key={j}
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                    >
+                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                    </svg>
+                  ))}
+                </div>
+
+                <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>
+      )}
+
+      {/* ============================================================
+          VISIT — Info del local
+          ============================================================ */}
+      {visitAddress && (
+        <section className="border-y border-border/60 bg-muted/20">
+          <div className="imansi-container py-20 sm:py-24 lg:py-28">
+            <div className="grid gap-10 lg:gap-16 lg:grid-cols-2 items-center max-w-6xl mx-auto">
+              {/* Info */}
+              <div className="space-y-6 sm:space-y-8">
+                <div className="space-y-3 sm:space-y-4">
+                  {visitLabel && (
+                    <p className="text-caption uppercase tracking-[0.2em] text-primary font-semibold">
+                      {visitLabel}
+                    </p>
+                  )}
+                  <h2 className="text-h1 sm:text-display font-bold tracking-[-0.025em] leading-[1.1]">
+                    {visitTitle}
+                  </h2>
+                  {visitSubtitle && (
+                    <p className="text-small sm:text-body text-muted-foreground leading-relaxed">
+                      {visitSubtitle}
+                    </p>
+                  )}
+                </div>
+
+                {/* Info items */}
+                <div className="space-y-5">
+                  <div className="flex items-start gap-4">
+                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-primary">
+                      {Icons.mapPin}
+                    </div>
+                    <div className="space-y-1 pt-1">
+                      <p className="text-caption font-semibold uppercase tracking-wider text-muted-foreground">
+                        Dirección
+                      </p>
+                      <p className="text-small leading-relaxed whitespace-pre-line">
+                        {visitAddress}
+                      </p>
+                    </div>
+                  </div>
+
+                  {visitHours.length > 0 && (
+                    <div className="flex items-start gap-4">
+                      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-primary">
+                        {Icons.clock}
+                      </div>
+                      <div className="space-y-2 pt-1 flex-1">
+                        <p className="text-caption font-semibold uppercase tracking-wider text-muted-foreground">
+                          Horarios
+                        </p>
+                        <ul className="space-y-1.5">
+                          {visitHours.map((h, i) => (
+                            <li
+                              key={i}
+                              className="flex justify-between gap-4 text-small"
+                            >
+                              <span className="text-muted-foreground">
+                                {h.day}
+                              </span>
+                              <span className="font-medium">{h.hours}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </div>
+                  )}
+
+                  {(visitPhone || visitEmail) && (
+                    <div className="flex items-start gap-4">
+                      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-primary">
+                        {visitPhone ? Icons.phone : Icons.mail}
+                      </div>
+                      <div className="space-y-2 pt-1 flex-1">
+                        <p className="text-caption font-semibold uppercase tracking-wider text-muted-foreground">
+                          Contacto
+                        </p>
+                        <div className="space-y-1">
+                          {visitPhone && (
+                            <a
+                              href={`tel:${visitPhone.replace(/\s/g, '')}`}
+                              className="block text-small hover:text-primary transition-colors"
+                            >
+                              {visitPhone}
+                            </a>
+                          )}
+                          {visitEmail && (
+                            <a
+                              href={`mailto:${visitEmail}`}
+                              className="block text-small hover:text-primary transition-colors"
+                            >
+                              {visitEmail}
+                            </a>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {visitCTA && (
+                  <div className="pt-2">
+                    <Link to={visitCTA.href}>
+                      <Button className="gap-2">
+                        {visitCTA.label}
+                        {Icons.arrow}
+                      </Button>
+                    </Link>
+                  </div>
+                )}
+              </div>
+
+              {/* Mapa o imagen */}
+              {visitImage && (
+                <div className="relative">
+                  <div className="relative rounded-2xl overflow-hidden border border-border shadow-xl">
+                    <img
+                      src={visitImage}
+                      alt="Ubicación"
+                      className="w-full aspect-[4/3] object-cover"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ============================================================
+          CTA FINAL
+          ============================================================ */}
+      <section className="imansi-container py-20 sm:py-24 lg:pb-28 lg:pt-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>
+  );
+}