From cb4097a76abcc6d620f1db8123ce7caad69a6b32 Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Wed, 22 Jul 2026 10:39:58 -0600
Subject: [PATCH] feat: BenditaRed-inspired concepts adapted to creeer tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero: subtle ink grid texture (radial-masked) + gold glow blob
- Hero kicker: small gold dot before the eyebrow
- Header: desktop anchor nav (Método/Disciplinas/La estratega) with
  scroll-elevation shadow; mobile keeps wordmark + CTA only
- Sections gain ids + scroll-mt-24 as anchor targets
- CTA: subtle hover lift, gated with motion-reduce

Concepts studied from ~/dev/BenditaRed (grid+glow hero background,
kicker-with-dot, scrolled navbar state, pill hover lift). Animated
stats were skipped — no real metrics from the owner to show.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 components/layout/Header.tsx        | 34 +++++++++++++++++++++++++++--
 components/primitives/CTA.tsx       |  2 +-
 components/sections/Disciplinas.tsx |  2 +-
 components/sections/Estratega.tsx   |  2 +-
 components/sections/Hero.tsx        | 21 ++++++++++++++++--
 components/sections/Mecanismo.tsx   |  2 +-
 lib/content.ts                      |  5 +++++
 7 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 1703f39..59c3ad3 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -1,16 +1,46 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import { Wordmark } from '@/components/primitives/Wordmark';
 import { CTA } from '@/components/primitives/CTA';
 import { Container } from '@/components/primitives/Container';
 import { header } from '@/lib/content';
 
 export function Header() {
+  // Sombra sutil cuando la página deja de estar arriba (concepto BenditaRed)
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 12);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
   return (
-    <header className="sticky top-0 z-50 border-b border-ink/10 bg-base/80 backdrop-blur">
+    <header
+      className={`sticky top-0 z-50 border-b bg-base/80 backdrop-blur transition-shadow duration-300 ${
+        scrolled ? 'border-ink/10 shadow-[0_6px_24px_-18px_rgba(10,31,68,0.5)]' : 'border-ink/5'
+      }`}
+    >
       <Container className="flex items-center justify-between py-3">
+        {/* #top: fragmento especial del navegador — scrollea al inicio sin necesitar un id */}
         <a href="#top" aria-label="creeer — inicio">
           <Wordmark size="md" />
         </a>
-        <nav aria-label="Principal">
+        <nav aria-label="Principal" className="flex items-center gap-8">
+          {/* Anchors solo en desktop; en mobile el CTA basta (sin hamburguesa) */}
+          <div className="hidden md:flex items-center gap-8">
+            {header.nav.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className="text-xs tracking-[0.2em] uppercase font-semibold text-muted transition-colors hover:text-gold-deep"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
           <CTA href="#contacto" label={header.cta} variant="light" />
         </nav>
       </Container>
diff --git a/components/primitives/CTA.tsx b/components/primitives/CTA.tsx
index 81ef72b..dd2f0cd 100644
--- a/components/primitives/CTA.tsx
+++ b/components/primitives/CTA.tsx
@@ -8,7 +8,7 @@ export function CTA({ href, label, variant = 'light', className = '' }: { href:
   return (
     <a
       href={href}
-      className={`group inline-block font-sans font-bold uppercase tracking-wider px-7 py-3.5 text-sm transition-colors ${styles[variant]} ${className}`}
+      className={`group inline-block font-sans font-bold uppercase tracking-wider px-7 py-3.5 text-sm transition-all duration-300 hover:-translate-y-0.5 motion-reduce:transform-none motion-reduce:transition-none ${styles[variant]} ${className}`}
     >
       {label}{' '}
       <span aria-hidden="true" className="inline-block transition-transform duration-300 ease-out group-hover:translate-x-1 motion-reduce:transform-none motion-reduce:transition-none">→</span>
diff --git a/components/sections/Disciplinas.tsx b/components/sections/Disciplinas.tsx
index 5b84b70..9e1f3e3 100644
--- a/components/sections/Disciplinas.tsx
+++ b/components/sections/Disciplinas.tsx
@@ -7,7 +7,7 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
 export function Disciplinas() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-base">
+    <section id="disciplinas" className="bg-base scroll-mt-24">
       <Container className="py-24 md:py-32">
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-deep">{disciplinas.eyebrow}</motion.p>
diff --git a/components/sections/Estratega.tsx b/components/sections/Estratega.tsx
index 718e558..8d38ea2 100644
--- a/components/sections/Estratega.tsx
+++ b/components/sections/Estratega.tsx
@@ -7,7 +7,7 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
 export function Estratega() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-base">
+    <section id="estratega" className="bg-base scroll-mt-24">
       <Container className="py-24 md:py-32">
         <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="grid gap-12 md:grid-cols-[auto_1fr] md:items-center">
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
index 5b6bbf9..f036670 100644
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -18,11 +18,28 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
   const headlineSize = 'text-4xl md:text-6xl leading-[1.1]';
 
   return (
-    <section className="bg-bg-pure">
+    <section className="relative overflow-hidden bg-bg-pure">
+      {/* Fondo: retícula sutil + resplandor dorado (conceptos BenditaRed, en tokens creeer) */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -z-10"
+        style={{
+          backgroundImage:
+            'linear-gradient(to right, rgba(10,31,68,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,31,68,0.045) 1px, transparent 1px)',
+          backgroundSize: '56px 56px',
+          maskImage: 'radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 100%)',
+          WebkitMaskImage: 'radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 100%)',
+        }}
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -right-40 -top-40 -z-10 h-[32rem] w-[32rem] rounded-full bg-gold/10 blur-3xl"
+      />
       <Container className="min-h-[88vh] flex flex-col items-center justify-center text-center py-24">
         <motion.div variants={staggerContainer} initial="hidden" animate="visible" {...motionProps(reduced)} className="flex flex-col items-center">
           <motion.div variants={fadeInUp}><Wordmark size="xl" /></motion.div>
-          <motion.p variants={fadeInUp} className="mt-6 text-xs md:text-sm tracking-[0.3em] uppercase font-semibold text-gold-deep">
+          <motion.p variants={fadeInUp} className="mt-6 inline-flex items-center gap-2 text-xs md:text-sm tracking-[0.3em] uppercase font-semibold text-gold-deep">
+            <span aria-hidden className="h-1.5 w-1.5 rounded-full bg-gold" />
             {hero.eyebrow}
           </motion.p>
           <motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-ink`}>
diff --git a/components/sections/Mecanismo.tsx b/components/sections/Mecanismo.tsx
index 2a45fdf..c4baf34 100644
--- a/components/sections/Mecanismo.tsx
+++ b/components/sections/Mecanismo.tsx
@@ -8,7 +8,7 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
 export function Mecanismo() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-bg-dark text-cream">
+    <section id="metodo" className="bg-bg-dark text-cream scroll-mt-24">
       <Container className="py-24 md:py-32">
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-bright">{mecanismo.eyebrow}</motion.p>
diff --git a/lib/content.ts b/lib/content.ts
index 571911d..f9f1276 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -87,6 +87,11 @@ export const cierre = {
 
 export const header = {
   cta: 'Hablemos',   // short nav CTA → #contacto (the full CTA lives in Hero/Cierre)
+  nav: [
+    { href: '#metodo', label: 'Método' },
+    { href: '#disciplinas', label: 'Disciplinas' },
+    { href: '#estratega', label: 'La estratega' },
+  ],
 };
 
 export const footer = {