ErikGH/Creeer-Web
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: rebrand a Manual de Identidad Visual v1.0

Browse Source 
Migra todo el sitio a la marca oficial aprobada por la dueña:
- Logotipo cre≡er (el símbolo ≡ reemplaza la 'e' central, en dorado)
- Paleta: Azul Profundo #0A1D5D + Dorado Estratégico #C4942E + Blanco + neutros
- Tipografía: Aptos (Inter como fallback web), fin del sistema híbrido Georgia/Inter
- Tagline 'CLARIDAD · DIRECCIÓN · CRECIMIENTO' + eslogan 'Estrategia que transforma.'

Componentes, tokens de Tailwind, lib/content.ts, docs (dueña-directrices + spec)
y tests actualizados. Typecheck, lint, 27/27 tests y build estática verdes.

Basado en docs/branding.jpeg (Manual v1.0, mayo 2026).
This commit is contained in:
erikgh committed 2026-07-28 10:51:48 -06:00
1 parent 8fdfc1be5c
commit 60d3f22e6b
22 files changed
+212 -181
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

AGENTS.md
+4 -3
View File
@@ -13,9 +13,10 @@ One-page landing para **creeer**, marca personal de una estratega de crecimiento
## Decisiones bloqueadas (no reabrir sin consultar a la dueña) ## Decisiones bloqueadas (no reabrir sin consultar a la dueña)
- **Tono maestro:** "seguridad + cercanía" + "simple, directo, limpio". - **Tono maestro:** "seguridad + cercanía" + "simple, directo, limpio".
- **Wordmark:** `cre`**`e`**`er.` **SIEMPRE minúsculas**, Georgia 700 italic, la 2ª "e" en peso 900 + dorado, punto final dorado. **Nunca** `CREEER`, `Creeer`, sans-serif, ni mayúsculas. (Es la regla más fácil de romper por defecto.) - **Logotipo:** `cre≡er` — **SIEMPRE minúsculas**, la "e" central reemplazada por el **símbolo ≡** (tres líneas) en dorado. **Nunca** `CREEER`, `Creeer`, ni mayúsculas.
- **Paleta:** navy `#0A1F44` + dorado tostado `#B8901f` (sobre claro) / dorado `#D4AF37` (sobre oscuro) + blanco cálido `#FBFAF7` / blanco `#FFFFFF`. **Sin amarillo eléctrico** tipo Hormozi. - **Paleta:** Azul Profundo `#0A1D5D` + Dorado Estratégico `#C4942E` + Blanco `#FFFFFF` + neutros (Azul Claro `#C8EEF5`, Gris `#F2F2F2`, Gris Medio `#AAAAAA`). **Sin amarillo eléctrico** tipo Hormozi.
- **Tipografía híbrida:** Georgia italic = voz de marca (wordmark + citas); Inter 400/600/900 = voz funcional (headlines Hormozi + body + UI). - **Tipografía:** **Aptos** (principal) + **Aptos Narrow** (secundaria). En web: autoalojar .woff2 o usar Inter como fallback métricamente similar.
- **Tagline de marca:** "CLARIDAD · DIRECCIÓN · CRECIMIENTO". Eslogan: "Estrategia que transforma."
- **Voz:** segunda persona ("tú"/"tu negocio"), sin jerga corporativa. - **Voz:** segunda persona ("tú"/"tu negocio"), sin jerga corporativa.
- **Sin escasez en el hero:** no mostrar cupos, cohorte ni "Generación Fundadora" arriba (decisión de la dueña). - **Sin escasez en el hero:** no mostrar cupos, cohorte ni "Generación Fundadora" arriba (decisión de la dueña).
app/globals.css
+5 -5
View File
@@ -5,12 +5,12 @@
@layer base { @layer base {
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { body {
background-color: #FBFAF7; background-color: #FFFFFF;
color: #0A1F44; color: #0A1D5D;
font-family: var(--font-inter), system-ui, sans-serif; font-family: 'Aptos', var(--font-inter), system-ui, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
::selection { background: #D4AF37; color: #0A1F44; } ::selection { background: #C4942E; color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; } html { scroll-behavior: auto; }
@@ -19,7 +19,7 @@
@layer base { @layer base {
a:focus-visible, button:focus-visible { a:focus-visible, button:focus-visible {
outline: 3px solid #D4AF37; outline: 3px solid #C4942E;
outline-offset: 3px; outline-offset: 3px;
border-radius: 2px; border-radius: 2px;
} }
components/layout/Footer.tsx
+3 -3
View File
@@ -4,11 +4,11 @@ import { footer } from '@/lib/content';
export function Footer() { export function Footer() {
return ( return (
<footer className="bg-bg-dark text-cream border-t border-cream/10"> <footer className="bg-azul-profundo text-white border-t border-white/10">
<Container className="flex flex-col items-center gap-3 py-10 text-center md:flex-row md:justify-between md:text-left"> <Container className="flex flex-col items-center gap-3 py-10 text-center md:flex-row md:justify-between md:text-left">
<Wordmark size="sm" onDark /> <Wordmark size="sm" onDark />
<p className="text-sm text-muted-dark">{footer.tagline}</p> <p className="text-sm text-gris-medio">{footer.tagline}</p>
<p className="text-xs text-muted-dark">{footer.legal}</p> <p className="text-xs text-gris-medio">{footer.legal}</p>
</Container> </Container>
</footer> </footer>
); );
components/layout/Header.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { header } from '@/lib/content';
export function Header() { export function Header() {
return ( 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 border-azul-profundo/10 bg-white/80 backdrop-blur">
<Container className="flex items-center justify-between py-3"> <Container className="flex items-center justify-between py-3">
<a href="#top" aria-label="creeer — inicio"> <a href="#top" aria-label="creeer — inicio">
<Wordmark size="md" /> <Wordmark size="md" />
components/layout/__tests__/Footer.test.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { Footer } from '../Footer';
describe('<Footer />', () => { describe('<Footer />', () => {
it('renders the tagline and the legal line', () => { it('renders the tagline and the legal line', () => {
render(<Footer />); render(<Footer />);
expect(screen.getByText('tu estratega de crecimiento')).toBeInTheDocument(); expect(screen.getByText('CLARIDAD · DIRECCIÓN · CRECIMIENTO')).toBeInTheDocument();
expect(screen.getByText(/© 2026 creeer/)).toBeInTheDocument(); expect(screen.getByText(/© 2026 creeer/)).toBeInTheDocument();
}); });
it('does not introduce a second h1', () => { it('does not introduce a second h1', () => {
components/layout/__tests__/Header.test.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { Header } from '../Header';
describe('<Header />', () => { describe('<Header />', () => {
it('renders the wordmark', () => { it('renders the wordmark', () => {
const { container } = render(<Header />); const { container } = render(<Header />);
expect(container.textContent).toContain('creeer'); expect(container.textContent).toContain('cre≡er');
}); });
it('renders a persistent CTA linking to the contact section', () => { it('renders a persistent CTA linking to the contact section', () => {
render(<Header />); render(<Header />);
components/primitives/CTA.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
type Variant = 'light' | 'dark'; type Variant = 'light' | 'dark';
const styles: Record<Variant, string> = { const styles: Record<Variant, string> = {
light: 'bg-ink text-cream hover:bg-ink/90', light: 'bg-azul-profundo text-white hover:bg-azul-profundo/90',
dark: 'bg-gold-bright text-ink hover:bg-gold-bright/90', dark: 'bg-dorado text-white hover:bg-dorado/90',
}; };
export function CTA({ href, label, variant = 'light', className = '' }: { href: string; label: string; variant?: Variant; className?: string }) { export function CTA({ href, label, variant = 'light', className = '' }: { href: string; label: string; variant?: Variant; className?: string }) {
components/primitives/Wordmark.tsx
+5 -6
View File
@@ -9,15 +9,14 @@ const sizeClass: Record<Size, string> = {
}; };
export function Wordmark({ size = 'lg', onDark = false }: { size?: Size; onDark?: boolean }) { export function Wordmark({ size = 'lg', onDark = false }: { size?: Size; onDark?: boolean }) {
const { before, accent, after, dot } = wordmark.parts; const { before, after } = wordmark.parts;
const baseColor = onDark ? 'text-cream' : 'text-ink'; const baseColor = onDark ? 'text-white' : 'text-azul-profundo';
const goldColor = onDark ? 'text-gold-bright' : 'text-gold'; const goldColor = 'text-dorado';
return ( return (
<span className={`font-serif italic font-bold tracking-tight leading-none ${sizeClass[size]} ${baseColor}`}> <span className={`font-sans font-bold tracking-tight leading-none ${sizeClass[size]} ${baseColor}`}>
{before} {before}
<span data-accent="true" className={`not-italic font-black ${goldColor}`}>{accent}</span> <span data-accent="true" className={goldColor}>≡</span>
{after} {after}
<span className={goldColor}>{dot}</span>
</span> </span>
); );
} }
components/primitives/__tests__/Wordmark.test.tsx
+3 -3
View File
@@ -6,13 +6,13 @@ describe('<Wordmark />', () => {
it('renders the wordmark in lowercase', () => { it('renders the wordmark in lowercase', () => {
render(<Wordmark />); render(<Wordmark />);
const text = screen.getByText(/cre/).closest('span')?.textContent; const text = screen.getByText(/cre/).closest('span')?.textContent;
expect(text?.toLowerCase()).toBe('creeer.'); expect(text?.toLowerCase()).toBe('cre≡er');
}); });
it('renders the accent "e" separately for gold styling', () => { it('renders the accent "≡" symbol separately for dorado styling', () => {
const { container } = render(<Wordmark />); const { container } = render(<Wordmark />);
const accent = container.querySelector('[data-accent="true"]'); const accent = container.querySelector('[data-accent="true"]');
expect(accent).not.toBeNull(); expect(accent).not.toBeNull();
expect(accent?.textContent).toBe('e'); expect(accent?.textContent).toBe('≡');
}); });
it('never renders uppercase CREEER', () => { it('never renders uppercase CREEER', () => {
const { container } = render(<Wordmark />); const { container } = render(<Wordmark />);
components/sections/Cierre.tsx
+8 -8
View File
@@ -10,25 +10,25 @@ export function Cierre() {
const reduced = usePrefersReducedMotion(); const reduced = usePrefersReducedMotion();
const { whatsapp, email, linkedin } = cierre.contact; const { whatsapp, email, linkedin } = cierre.contact;
return ( return (
<section id="contacto" className="bg-bg-dark text-cream scroll-mt-24"> <section id="contacto" className="bg-azul-profundo text-white scroll-mt-24">
<Container className="py-24 md:py-32 text-center"> <Container className="py-24 md:py-32 text-center">
<motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="flex flex-col items-center"> className="flex flex-col items-center">
<motion.div variants={fadeInUp}><Wordmark size="lg" onDark /></motion.div> <motion.div variants={fadeInUp}><Wordmark size="lg" onDark /></motion.div>
<motion.blockquote variants={fadeInUp} <motion.blockquote variants={fadeInUp}
className="mt-10 font-serif italic text-2xl md:text-4xl font-bold leading-snug max-w-3xl"> className="mt-10 font-sans italic text-2xl md:text-4xl font-bold leading-snug max-w-3xl">
<span className="text-gold-bright">&ldquo;</span>{cierre.quote}<span className="text-gold-bright">&rdquo;</span> <span className="text-dorado">&ldquo;</span>{cierre.quote}<span className="text-dorado">&rdquo;</span>
</motion.blockquote> </motion.blockquote>
<motion.div variants={fadeInUp} className="mt-10"> <motion.div variants={fadeInUp} className="mt-10">
<CTA href={whatsapp.href} label={cierre.cta} variant="dark" /> <CTA href={whatsapp.href} label={cierre.cta} variant="dark" />
</motion.div> </motion.div>
<motion.nav variants={fadeInUp} aria-label="Contacto" className="mt-12"> <motion.nav variants={fadeInUp} aria-label="Contacto" className="mt-12">
<ul className="flex flex-wrap justify-center gap-6 text-sm"> <ul className="flex flex-wrap justify-center gap-6 text-sm">
<li><a href={whatsapp.href} className="hover:text-gold-bright transition-colors">{whatsapp.label}</a></li> <li><a href={whatsapp.href} className="hover:text-dorado transition-colors">{whatsapp.label}</a></li>
<li aria-hidden="true" className="text-muted-dark">·</li> <li aria-hidden="true" className="text-gris-medio">·</li>
<li><a href={email.href} className="hover:text-gold-bright transition-colors">{email.label}</a></li> <li><a href={email.href} className="hover:text-dorado transition-colors">{email.label}</a></li>
<li aria-hidden="true" className="text-muted-dark">·</li> <li aria-hidden="true" className="text-gris-medio">·</li>
<li><a href={linkedin.href} className="hover:text-gold-bright transition-colors">{linkedin.label}</a></li> <li><a href={linkedin.href} className="hover:text-dorado transition-colors">{linkedin.label}</a></li>
</ul> </ul>
</motion.nav> </motion.nav>
</motion.div> </motion.div>
components/sections/ComoEmpezar.tsx
+7 -7
View File
@@ -10,20 +10,20 @@ export function ComoEmpezar() {
const reduced = usePrefersReducedMotion(); const reduced = usePrefersReducedMotion();
const waHref = `${cierre.contact.whatsapp.href}?text=${encodeURIComponent(comoEmpezar.whatsappText)}`; const waHref = `${cierre.contact.whatsapp.href}?text=${encodeURIComponent(comoEmpezar.whatsappText)}`;
return ( return (
<section className="bg-base"> <section className="bg-white">
<Container className="py-24 md:py-32"> <Container className="py-24 md:py-32">
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-deep">{comoEmpezar.eyebrow}</motion.p> className="text-xs tracking-[0.3em] uppercase font-semibold text-dorado">{comoEmpezar.eyebrow}</motion.p>
<motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="mt-4 font-serif italic font-bold text-3xl md:text-5xl text-ink">{comoEmpezar.title}</motion.h2> className="mt-4 font-sans font-bold text-3xl md:text-5xl text-azul-profundo">{comoEmpezar.title}</motion.h2>
<motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="mt-12 grid gap-10 md:grid-cols-3"> className="mt-12 grid gap-10 md:grid-cols-3">
{comoEmpezar.steps.map((step) => ( {comoEmpezar.steps.map((step) => (
<motion.li key={step.n} variants={fadeInUp} <motion.li key={step.n} variants={fadeInUp}
className="border-t border-gold/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold/70 motion-reduce:transform-none motion-reduce:transition-none"> className="border-t border-dorado/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-dorado/70 motion-reduce:transform-none motion-reduce:transition-none">
<div className="font-serif italic font-black text-5xl md:text-6xl text-gold leading-none">{step.n}</div> <div className="font-sans font-black text-5xl md:text-6xl text-dorado leading-none">{step.n}</div>
<h3 className="mt-4 font-sans font-bold text-xl text-ink">{step.name}</h3> <h3 className="mt-4 font-sans font-bold text-xl text-azul-profundo">{step.name}</h3>
<p className="mt-3 text-muted leading-relaxed">{step.desc}</p> <p className="mt-3 text-gris-medio leading-relaxed">{step.desc}</p>
</motion.li> </motion.li>
))} ))}
</motion.ol> </motion.ol>
components/sections/Disciplinas.tsx
+7 -7
View File
@@ -7,21 +7,21 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
export function Disciplinas() { export function Disciplinas() {
const reduced = usePrefersReducedMotion(); const reduced = usePrefersReducedMotion();
return ( return (
<section className="bg-base"> <section className="bg-white">
<Container className="py-24 md:py-32"> <Container className="py-24 md:py-32">
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <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> className="text-xs tracking-[0.3em] uppercase font-semibold text-dorado">{disciplinas.eyebrow}</motion.p>
<motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="mt-4 font-serif italic font-bold text-3xl md:text-5xl text-ink">{disciplinas.title}</motion.h2> className="mt-4 font-sans font-bold text-3xl md:text-5xl text-azul-profundo">{disciplinas.title}</motion.h2>
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="mt-4 text-muted text-lg">{disciplinas.lead}</motion.p> className="mt-4 text-gris-medio text-lg">{disciplinas.lead}</motion.p>
<motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="mt-12 grid gap-8 md:grid-cols-3 list-none p-0"> className="mt-12 grid gap-8 md:grid-cols-3 list-none p-0">
{disciplinas.items.map((item) => ( {disciplinas.items.map((item) => (
<motion.li key={item.name} variants={fadeInUp} <motion.li key={item.name} variants={fadeInUp}
className="border-t-2 border-gold pt-5 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-deep motion-reduce:transform-none motion-reduce:transition-none"> className="border-t-2 border-dorado pt-5 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-dorado motion-reduce:transform-none motion-reduce:transition-none">
<h3 className="font-serif italic font-bold text-2xl text-ink">{item.name}</h3> <h3 className="font-sans font-bold text-2xl text-azul-profundo">{item.name}</h3>
<p className="mt-3 text-muted leading-relaxed">{item.desc}</p> <p className="mt-3 text-gris-medio leading-relaxed">{item.desc}</p>
</motion.li> </motion.li>
))} ))}
</motion.ul> </motion.ul>
components/sections/Estratega.tsx
+6 -6
View File
@@ -7,21 +7,21 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
export function Estratega() { export function Estratega() {
const reduced = usePrefersReducedMotion(); const reduced = usePrefersReducedMotion();
return ( return (
<section className="bg-base"> <section className="bg-white">
<Container className="py-24 md:py-32"> <Container className="py-24 md:py-32">
<motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="grid gap-12 md:grid-cols-[auto_1fr] md:items-center"> className="grid gap-12 md:grid-cols-[auto_1fr] md:items-center">
{/* Portrait — placeholder gradient until dueña provides a photo */} {/* Portrait — placeholder gradient until dueña provides a photo */}
<motion.div variants={fadeInUp} <motion.div variants={fadeInUp}
className="w-40 h-40 md:w-56 md:h-56 rounded-full flex-shrink-0 bg-gradient-to-br from-ink to-gold" className="w-40 h-40 md:w-56 md:h-56 rounded-full flex-shrink-0 bg-gradient-to-br from-azul-profundo to-dorado"
aria-label="Retrato de la estratega" aria-label="Retrato de la estratega"
role="img" role="img"
/> />
<div> <div>
<motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-deep">{estratega.eyebrow}</motion.p> <motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-semibold text-dorado">{estratega.eyebrow}</motion.p>
<motion.h2 variants={fadeInUp} className="mt-4 font-serif italic font-bold text-3xl md:text-5xl text-ink">{estratega.title}</motion.h2> <motion.h2 variants={fadeInUp} className="mt-4 font-sans font-bold text-3xl md:text-5xl text-azul-profundo">{estratega.title}</motion.h2>
<motion.p variants={fadeInUp} className="mt-6 text-lg text-muted leading-relaxed max-w-2xl">{estratega.bio}</motion.p> <motion.p variants={fadeInUp} className="mt-6 text-lg text-gris-medio leading-relaxed max-w-2xl">{estratega.bio}</motion.p>
<motion.blockquote variants={fadeInUp} className="mt-6 font-serif italic text-xl md:text-2xl text-ink border-l-4 border-gold pl-4"> <motion.blockquote variants={fadeInUp} className="mt-6 font-sans italic text-xl md:text-2xl text-azul-profundo border-l-4 border-dorado pl-4">
{estratega.quote} {estratega.quote}
</motion.blockquote> </motion.blockquote>
</div> </div>
components/sections/FraseAncla.tsx
+5 -5
View File
@@ -8,7 +8,7 @@ import { fadeInUp, viewportOnce, usePrefersReducedMotion, motionProps } from '@/
export function FraseAncla() { export function FraseAncla() {
const reduced = usePrefersReducedMotion(); const reduced = usePrefersReducedMotion();
return ( return (
<section className="bg-base"> <section className="bg-white">
<Container className="py-24 md:py-32 text-center max-w-4xl"> <Container className="py-24 md:py-32 text-center max-w-4xl">
<motion.blockquote <motion.blockquote
variants={fadeInUp} variants={fadeInUp}
@@ -16,12 +16,12 @@ export function FraseAncla() {
whileInView="visible" whileInView="visible"
viewport={viewportOnce} viewport={viewportOnce}
{...motionProps(reduced)} {...motionProps(reduced)}
className="font-serif italic text-2xl md:text-4xl font-bold leading-snug text-ink" className="font-sans italic text-2xl md:text-4xl font-bold leading-snug text-azul-profundo"
> >
<span className="text-gold">“</span> <span className="text-dorado">“</span>
{fraseAncla.quote.before}{' '} {fraseAncla.quote.before}{' '}
<span className="text-gold">{fraseAncla.quote.accent}</span> <span className="text-dorado">{fraseAncla.quote.accent}</span>
<span className="text-gold">”</span> <span className="text-dorado">”</span>
</motion.blockquote> </motion.blockquote>
</Container> </Container>
</section> </section>
components/sections/Hero.tsx
+6 -6
View File
@@ -14,22 +14,22 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
const isHormozi = variant === 'hormozi'; const isHormozi = variant === 'hormozi';
const headlineBase = isHormozi const headlineBase = isHormozi
? 'font-sans font-black uppercase tracking-tight' ? 'font-sans font-black uppercase tracking-tight'
: 'font-serif italic font-bold'; : 'font-sans font-bold';
const headlineSize = 'text-4xl md:text-6xl leading-[1.1]'; const headlineSize = 'text-4xl md:text-6xl leading-[1.1]';
return ( return (
<section className="bg-bg-pure"> <section className="bg-white">
<Container className="min-h-[88vh] flex flex-col items-center justify-center text-center py-24"> <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={staggerContainer} initial="hidden" animate="visible" {...motionProps(reduced)} className="flex flex-col items-center">
<motion.div variants={fadeInUp}><Wordmark size="xl" /></motion.div> <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 text-xs md:text-sm tracking-[0.3em] uppercase font-semibold text-dorado">
{hero.eyebrow} {hero.eyebrow}
</motion.p> </motion.p>
<motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-ink`}> <motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-azul-profundo`}>
{hero.headline.line1}{' '} {hero.headline.line1}{' '}
<span className="text-gold">{hero.headline.effort}</span>{' '} <span className="text-dorado">{hero.headline.effort}</span>{' '}
{hero.headline.line3}{' '} {hero.headline.line3}{' '}
<span style={{ borderBottom: isHormozi ? '5px solid #B8901f' : '3px solid #B8901f', paddingBottom: 2 }}> <span style={{ borderBottom: isHormozi ? '5px solid #C4942E' : '3px solid #C4942E', paddingBottom: 2 }}>
{hero.headline.clarity} {hero.headline.clarity}
</span> </span>
</motion.h1> </motion.h1>
components/sections/Mecanismo.tsx
+6 -6
View File
@@ -8,20 +8,20 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
export function Mecanismo() { export function Mecanismo() {
const reduced = usePrefersReducedMotion(); const reduced = usePrefersReducedMotion();
return ( return (
<section className="bg-bg-dark text-cream"> <section className="bg-azul-profundo text-white">
<Container className="py-24 md:py-32"> <Container className="py-24 md:py-32">
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <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> className="text-xs tracking-[0.3em] uppercase font-semibold text-dorado">{mecanismo.eyebrow}</motion.p>
<motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="mt-4 font-serif italic font-bold text-3xl md:text-5xl">{mecanismo.title}</motion.h2> className="mt-4 font-sans font-bold text-3xl md:text-5xl">{mecanismo.title}</motion.h2>
<motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} <motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
className="mt-12 grid gap-10 md:grid-cols-3"> className="mt-12 grid gap-10 md:grid-cols-3">
{mecanismo.steps.map((step) => ( {mecanismo.steps.map((step) => (
<motion.li key={step.n} variants={fadeInUp} <motion.li key={step.n} variants={fadeInUp}
className="border-t border-gold-bright/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-bright/70 motion-reduce:transform-none motion-reduce:transition-none"> className="border-t border-dorado/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-dorado/70 motion-reduce:transform-none motion-reduce:transition-none">
<div className="font-serif italic font-black text-5xl md:text-6xl text-gold-bright leading-none">{step.n}</div> <div className="font-sans font-black text-5xl md:text-6xl text-dorado leading-none">{step.n}</div>
<h3 className="mt-4 font-sans font-bold text-xl">{step.name}</h3> <h3 className="mt-4 font-sans font-bold text-xl">{step.name}</h3>
<p className="mt-3 text-muted-dark leading-relaxed">{step.desc}</p> <p className="mt-3 text-gris-medio leading-relaxed">{step.desc}</p>
</motion.li> </motion.li>
))} ))}
</motion.ol> </motion.ol>
components/sections/ParaQuien.tsx
+5 -5
View File
@@ -8,18 +8,18 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
export function ParaQuien() { export function ParaQuien() {
const reduced = usePrefersReducedMotion(); const reduced = usePrefersReducedMotion();
return ( return (
<section className="bg-base"> <section className="bg-white">
<Container className="py-24 md:py-32"> <Container className="py-24 md:py-32">
<motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} className="max-w-3xl"> <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)} className="max-w-3xl">
<motion.h2 variants={fadeInUp} className="font-serif italic font-bold text-3xl md:text-5xl text-ink leading-tight"> <motion.h2 variants={fadeInUp} className="font-sans font-bold text-3xl md:text-5xl text-azul-profundo leading-tight">
{paraQuien.title} {paraQuien.title}
</motion.h2> </motion.h2>
<motion.p variants={fadeInUp} className="mt-6 text-lg text-muted">{paraQuien.lead}</motion.p> <motion.p variants={fadeInUp} className="mt-6 text-lg text-gris-medio">{paraQuien.lead}</motion.p>
<motion.ul variants={fadeInUp} className="mt-8 space-y-3"> <motion.ul variants={fadeInUp} className="mt-8 space-y-3">
{paraQuien.criteria.map((c) => ( {paraQuien.criteria.map((c) => (
<li key={c} className="flex items-start gap-3"> <li key={c} className="flex items-start gap-3">
<span className="text-gold font-bold mt-1" aria-hidden="true">✓</span> <span className="text-dorado font-bold mt-1" aria-hidden="true">✓</span>
<span className="text-ink text-lg">{c}</span> <span className="text-azul-profundo text-lg">{c}</span>
</li> </li>
))} ))}
</motion.ul> </motion.ul>
docs/branding.jpeg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 KiB

docs/dueña-directrices.md
+78 -53
View File
@@ -94,80 +94,104 @@ Empresarios que **ya lograron tracción**, pero llegaron al punto donde **trabaj
--- ---
## Restricciones fijadas (decisiones ya tomadas) ## Sistema de diseño oficial — Manual de Identidad Visual v1.0 (mayo 2026)
Estas son decisiones bloqueadas durante el brainstorming. **No reabrir sin consultar.** > **Fuente:** `docs/branding.jpeg` — Manual de Identidad Visual aprobado por la dueña (28/jul/2026). **Reemplaza** todas las decisiones previas de paleta, tipografía y logotipo del brainstorming y del pptx.
### Paleta ### Filosofía de marca
- Blanco cálido `#FBFAF7` / Blanco puro `#FFFFFF` (fondos) > *"Transformamos la complejidad en claridad estratégica para construir ecosistemas empresariales que crecen con dirección y propósito."*
- Navy `#0A1F44` (texto principal + CTAs)
- Dorado tostado `#B8901f` (acentos sobre claro) / Dorado `#D4AF37` (acentos sobre oscuro)
- **NO amarillo eléctrico tipo Hormozi** (rompe cercanía)
### Sistema de diseño extraído del pptx (BASE) Proceso visual: **Complejidad** (múltiples variables) → **Enfoque** (priorizamos y alineamos lo esencial) → **Claridad** (una estrategia, una dirección, resultados extraordinarios).
El pptx `CREEER_Plantilla_Presentacion.pptx` es la **base visual oficial** de la marca. Estos datos se extrajeron parseando el archivo y deben respetarse: ### Símbolo principal
- **Tres líneas horizontales** (≡) que representan el proceso de transformar lo complejo en lo esencial
- Las líneas van de muchas/desordenadas (complejidad) a pocas/alineadas (claridad)
- Significado: "una estrategia clara, con dirección y propósito"
**Formato:** 16:9 widescreen (33.87 × 19.05 cm) ### Logotipo
- Wordmark: **`cre≡er`** — la "e" central se reemplaza por el **símbolo de tres líneas** (≡) en dorado
- SIEMPRE en minúsculas
- Tagline debajo: `CLARIDAD · DIRECCIÓN · CRECIMIENTO`
- Eslogan: *"Estrategia que transforma."*
**Paleta usada en el pptx (100% confirmada):** **Versiones del logotipo:**
- Dorado `#D4AF37` → **siempre BOLD, para títulos y énfasis** (Master Class, Agenda, sección, "Gracias", y la "e" del wordmark) | Versión | Descripción |
- Navy `#0A1F44` → **body text** (peso regular) |---------|-------------|
- Blanco implícito (fondos) | Principal | `cre≡er` + tagline "CLARIDAD · DIRECCIÓN · CRECIMIENTO" |
| Secundaria | `cre≡er` sin tagline |
| Ícono | Solo el símbolo ≡ (tres líneas) |
| Negativa | Fondo navy, logotipo en blanco + dorado |
| Negativo (ícono) | Símbolo ≡ en dorado sobre navy |
| Escala de grises | Todo en grises |
**Tipografía del pptx:** **Tamaño mínimo:** impreso 20 mm, digital 120 px.
- Fuente: **Calibri** (sans-serif) — majorFont y minorFont del tema
- **Decisión RESUELTA (sistema híbrido):**
- **Wordmark** `cre`**`e`**`er.` → **Georgia 700 italic** (minúscula, "e" central en peso 900 + dorado, punto final dorado). El usuario prefiere la elegancia del wordmark serif sobre la fidelidad estricta al pptx sans-serif. El wordmark es la firma de marca.
- **Headlines** → **Inter 900** (Google Fonts) uppercase — punch Hormozi.
- **Body / eyebrow / CTA** → Inter 400/600.
- **Citas institucionales** → Georgia italic (anclan con el wordmark).
- Principio: **serif = voz de marca**, **sans = voz funcional**.
**Escala tipográfica (extraída de los slides reales):** ### Paleta de colores
| Uso | Tamaño | Estilo | Color |
|---|---|---|---|
| Caption/tagline | 14pt | regular | navy |
| Subtítulo | 24pt | regular | navy |
| Body / lista | 28pt | regular | navy |
| Cierre | 32pt | regular | dorado |
| Título de sección | 36pt | **BOLD** | dorado |
| Título grande / cita | 40pt | **BOLD** | navy o dorado |
| Hero | 48pt | **BOLD** | dorado |
**Wordmark `cre`+`e`+`er` (confirmado a múltiples tamaños):** **Colores principales:**
- "Cre" + "e" (BOLD + `#D4AF37`) + "er" | Nombre | Hex | Pantone | RGB | Uso |
- La **2ª "e"** (la del medio) va en dorado + negrita |--------|-----|---------|-----|-----|
- Aparece en 14pt (slide 1) y 28pt (slide 2) | **Azul Profundo** | `#0A1D5D` | 2965 C | 10, 29, 61 | Texto principal, fondos oscuros, CTAs |
| **Dorado Estratégico** | `#C4942E` | 872 C | 196, 154, 46 | Acentos, títulos, símbolo ≡, énfasis |
**Logo PNG:** `image1.png` — 1200×400 px, aspect **3:1 horizontal**. En slide 1 ocupa 27.38 × 9.13 cm (es el **protagonista visual**, no un detalle pequeño). **Colores neutros:**
| Nombre | Hex | RGB | Uso |
|--------|-----|-----|-----|
| Azul Claro | `#C8EEF5` | 222, 226, 245 | Fondos alternativos, secciones suaves |
| Gris Claro | `#F2F2F2` | 242, 242, 242 | Fondos neutros, separadores |
| Gris Medio | `#AAAAAA` | 166, 166, 166 | Texto secundario, placeholders |
| Blanco | `#FFFFFF` | 255, 255, 255 | Fondo principal |
**Patrones de alineación:** **Regla:** NO amarillo eléctrico tipo Hormozi (rompe cercanía).
- `center` (align=ctr) → hero / títulos de impacto
- `right` (align=r) → momentos asimétricos (slide 2)
- `left` (align=l) → contenido, citas, cierre
**Recursos visuales recurrentes:** ### Tipografía
- Separador de disciplinas: **" • "** (Comunicación • Digital • Experiencias)
- Listas numeradas: **"1. " "2. " "3. "** (sin bullets) | Tipo | Fuente | Pesos disponibles | Uso |
- Smart quotes **"" ""** para citas institucionales |------|--------|--------------------|-----|
| **Principal** | **Aptos** | Light, Book, Regular, Medium, Bold, Black | Headlines, body, CTA, UI general |
| **Secundaria** | **Aptos Narrow** | Light, Book, Regular, Medium, Bold, Black | Taglines, subtítulos, texto compacto |
> ⚠️ **Nota para web:** Aptos es una fuente de Microsoft sin versión Google Fonts. Para la landing se debe: (a) autoalojar los archivos .woff2 con `@font-face`, o (b) usar un fallback con métricas similares (ej. **Inter** para body, que es visualmente cercana). Decisión a confirmar con la dueña.
### Iconografía
- Estilo: **líneas simples, geométricas, consistentes en grosor**
- Iconos definidos: Análisis, Enfoque, Estrategia, Crecimiento, Alineación, Resultados
- Colores: Azul Profundo + Dorado Estratégico
### Recursos visuales
- **Patrón de puntos** (grid de puntos dorados)
- **Líneas y divisores** (horizontales, en dorado o navy)
- **Recurso gráfico** (las tres líneas del símbolo en diversas orientaciones y escalas)
### Patrones de alineación
- `center` → hero / títulos de impacto
- `right` → momentos asimétricos
- `left` → contenido, citas, cierre
- Mucho aire/whitespace alrededor de los textos - Mucho aire/whitespace alrededor de los textos
**Anclas de copy del pptx (verbatim):** ---
- Tagline: *"creeer en ti, en mi, en el proyecto"* (slide 1 y 2)
- Cita institucional: *"El tiempo no se compra, se invierte"* (slide 6, 40pt bold navy)
- Cierre: *"Gracias por tu tiempo"* + *"CREEER - Comunicación • Digital • Experiencias"* (slide 7)
### Wordmark ## Restricciones fijadas (decisiones bloqueadas)
- SIEMPRE en minúsculas: `creeer`
- La "e" central (2ª de las 3) en dorado + bold Estas decisiones **no se reabren sin consultar a la dueña.**
- Termina con punto dorado: `creeer.`
### Copy ### Copy
- Voz en **segunda persona ("tú")** — nunca "el empresario", siempre "tu negocio" - Voz en **segunda persona ("tú")** — nunca "el empresario", siempre "tu negocio"
- Sin jerga corporativa - Sin jerga corporativa
- "Simple, directo, limpio" aplica al copy también - "Simple, directo, limpio" aplica al copy también
### Frases-ancla aprobadas
- *"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad."*
- *"Cuando el esfuerzo ya no alcanza, la estrategia se vuelve indispensable."*
- *"El tiempo no se compra, se invierte."* (institucional)
- *"Devuélvele claridad al rumbo de tu empresa."* (promesa)
- *"Estrategia que transforma."* (eslogan oficial)
### Taglines
- **Eslogan oficial:** *"Estrategia que transforma."*
- **Tagline de marca:** *"CLARIDAD · DIRECCIÓN · CRECIMIENTO"*
- **Tagline emocional:** *"creeer en ti, creeer en mí, creeer en el proyecto."*
### Estructura ### Estructura
- One-page (single page) - One-page (single page)
- Sin backend, contacto por enlaces directos (WhatsApp, email, LinkedIn) - Sin backend, contacto por enlaces directos (WhatsApp, email, LinkedIn)
@@ -175,6 +199,7 @@ El pptx `CREEER_Plantilla_Presentacion.pptx` es la **base visual oficial** de la
### Pendiente de decisión de la dueña ### Pendiente de decisión de la dueña
- **Hero final:** HV-1 (bold sans sin cajas) vs HV-2 (palabras en caja) — ver `docs/hero-finalists.md` - **Hero final:** HV-1 (bold sans sin cajas) vs HV-2 (palabras en caja) — ver `docs/hero-finalists.md`
- **Tipografía web:** ¿Alojar Aptos como web font o usar Inter como fallback?
--- ---
docs/superpowers/specs/2026-07-20-creeer-landing-design.md
+40 -37
View File
@@ -35,65 +35,68 @@ Landing page **one-page** para **creeer**, marca personal de una estratega de cr
## 3. Sistema de diseño ## 3. Sistema de diseño
> **Actualizado 28/jul/2026** — Basado en el Manual de Identidad Visual v1.0 (mayo 2026). Ver `docs/branding.jpeg` y `docs/dueña-directrices.md`.
### 3.1 Paleta ### 3.1 Paleta
Tokens de color (Tailwind): Tokens de color (Tailwind):
| Token | Hex | Uso | | Token | Hex | Uso |
|---|---|---| |---|---|---|
| `bg-base` | `#FBFAF7` | Fondo base (blanco cálido) | | `bg-white` | `#FFFFFF` | Fondo base y hero |
| `bg-pure` | `#FFFFFF` | Secciones limpias / hero | | `bg-azul-profundo` | `#0A1D5D` | Secciones oscuras (04 y 07) |
| `bg-dark` | `#0A1F44` | Secciones oscuras (04 y 07) | | `text-azul-profundo` | `#0A1D5D` | Texto principal |
| `text-primary` | `#0A1F44` | Texto principal (navy) | | `text-white` | `#FFFFFF` | Texto sobre fondo oscuro |
| `text-on-dark` | `#F5EBD0` | Texto sobre fondo oscuro (marfil) | | `text-dorado` / `bg-dorado` | `#C4942E` | Dorado Estratégico — acentos, títulos, símbolo ≡ |
| `accent-gold` | `#B8901f` | Dorado tostado — acentos sobre claro | | `bg-azul-claro` | `#C8EEF5` | Fondos alternativos, secciones suaves |
| `accent-gold-bright` | `#D4AF37` | Dorado — acentos sobre oscuro | | `bg-gris-claro` | `#F2F2F2` | Fondos neutros, separadores |
| `text-muted` | `#5a5168` | Texto secundario sobre claro | | `text-gris-medio` | `#AAAAAA` | Texto secundario / placeholders |
| `text-muted-dark` | `#9aa6c2` | Texto secundario sobre oscuro |
**NO usar amarillo eléctrico tipo Hormozi** — rompe la cercanía. **NO usar amarillo eléctrico tipo Hormozi** — rompe la cercanía.
### 3.2 Tipografía ### 3.2 Tipografía
Sistema híbrido (decisión final):
| Uso | Familia | Pesos | Estilo | | Uso | Familia | Pesos | Estilo |
|---|---|---|---| |---|---|---|---|
| Wordmark + citas institucionales | **Georgia** (system serif) | 700 / 900 | italic | | Headlines, body, CTA, UI | **Aptos** | Light–Black | normal |
| Headlines (Hormozi punch, si HV-1) | **Inter** (Google Fonts) | 900 | uppercase | | Taglines, subtítulos compactos | **Aptos Narrow** | Light–Black | normal |
| Body / eyebrow / CTA / UI | **Inter** | 400 / 600 / 700 | normal |
Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requiere import (system font). Inter se carga desde Google Fonts. > **Nota web:** Aptos (Microsoft) no está en Google Fonts. Se autoaloja como .woff2 o se usa **Inter** como fallback métricamente similar (cargado desde Google Fonts como respaldo).
### 3.3 Escala tipográfica (extraída del pptx) ### 3.3 Escala tipográfica
| Rol | Tamaño (móvil / desktop) | Peso | | Rol | Tamaño (móvil / desktop) | Peso |
|---|---|---| |---|---|---|
| Hero headline | 32px / 48px | 700 italic (V-a) o 900 uppercase (HV-1) | | Hero headline | 32px / 48px | Bold o Black |
| Sección título | 28px / 36px | 700 | | Sección título | 28px / 36px | Bold |
| Cita ancla | 24px / 32px | 700 italic | | Cita ancla | 24px / 32px | Bold italic |
| Subtítulo / body large | 18px / 24px | 400 | | Subtítulo / body large | 18px / 24px | Regular |
| Body | 16px / 18px | 400 | | Body | 16px / 18px | Regular |
| Eyebrow / label | 11px / 12px | 600 uppercase (tracking +3px) | | Eyebrow / label | 11px / 12px | Medium uppercase (tracking +3px) |
| Caption / métricas label | 10px / 11px | 600 uppercase | | Caption / métricas label | 10px / 11px | Medium uppercase |
### 3.4 Wordmark ### 3.4 Wordmark / Logotipo
`cre`**`e`**`er.` — siempre en minúsculas, Georgia 700 italic: **`cre≡er`** — siempre en minúsculas, Aptos (o Inter como fallback):
- `cre` en navy `#0A1F44` (sobre claro) o marfil `#F5EBD0` (sobre oscuro) - `cre` en Azul Profundo `#0A1D5D` (sobre claro) o blanco `#FFFFFF` (sobre oscuro)
- **`e`** (la 2ª de las 3 "e") en **peso 900 + dorado** - **`≡`** (símbolo de tres líneas, reemplaza la "e" central) en **Dorado Estratégico `#C4942E`**
- `er` en el color del "cre" - `er` en el color del "cre"
- **`.`** (punto final) en dorado
**Tamaño:** base 32–48px según contexto. Es la firma de marca, va en serif italic SIEMPRE (no en sans, no en mayúsculas). **Tagline debajo:** `CLARIDAD · DIRECCIÓN · CRECIMIENTO`
**Eslogan:** *"Estrategia que transforma."*
### 3.5 Recursos visuales recurrentes (del pptx) **Tamaño:** base 32–48px según contexto. Es la firma de marca, siempre en minúsculas.
### 3.5 Recursos visuales recurrentes
- Separador de disciplinas: **" • "** (Comunicación • Digital • Experiencias) - Separador de disciplinas: **" • "** (Comunicación • Digital • Experiencias)
- Listas numeradas: **"1." "2." "3."** (sin bullets) - Listas numeradas: **"1." "2." "3."** (sin bullets)
- Smart quotes **"" ""** para citas institucionales - Smart quotes **"" ""** para citas institucionales
- Flecha **"→"** en CTAs - Flecha **"→"** en CTAs
- Mucho aire/whitespace - Mucho aire/whitespace
- **Patrón de puntos** (grid de puntos dorados) — recurso del branding
- **Líneas y divisores** en dorado o azul profundo
- **Iconografía:** líneas simples, geométricas, consistentes en grosor
### 3.6 Espaciado y ritmo ### 3.6 Espaciado y ritmo
@@ -104,8 +107,8 @@ Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requie
### 3.7 Layout de secciones ### 3.7 Layout de secciones
- Secciones **claras**: hero (01) usa **blanco puro `#FFFFFF`**; el resto (02, 03, 05, 06) usa **blanco cálido `#FBFAF7`**. El contraste sutil separa el hero del cuerpo. - Secciones **claras**: fondo blanco `#FFFFFF`. Alternar con `#F2F2F2` (gris claro) o `#C8EEF5` (azul claro) para ritmo visual.
- Secciones **oscuras** (04, 07): fondo navy `#0A1F44` con texto marfil y acentos dorado `#D4AF37` - Secciones **oscuras** (04, 07): fondo Azul Profundo `#0A1D5D` con texto blanco y acentos Dorado `#C4942E`
- Esto da **ritmo visual** al scroll y enmarca las partes estratégicas (mecanismo + cierre) - Esto da **ritmo visual** al scroll y enmarca las partes estratégicas (mecanismo + cierre)
--- ---
@@ -114,20 +117,20 @@ Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requie
Dos finalistas guardados en `docs/hero-finalists.md`. La dueña elige uno. Ambos comparten: Dos finalistas guardados en `docs/hero-finalists.md`. La dueña elige uno. Ambos comparten:
- Wordmark `cre`**`e`**`er.` (Georgia italic) - Logotipo `cre≡er` (Aptos / Inter)
- Eyebrow: `— tu estratega de crecimiento —` - Eyebrow: `— tu estratega de crecimiento —`
- Headline copy: *"Tu negocio no necesita más esfuerzo. Necesita más claridad."* - Headline copy: *"Tu negocio no necesita más esfuerzo. Necesita más claridad."*
- CTA: `Define tu siguiente movimiento →` (navy, white text, chunky) - CTA: `Define tu siguiente movimiento →` (Azul Profundo, white text, chunky)
- Fondo blanco `#FFFFFF` - Fondo blanco `#FFFFFF`
- Sin escasez (sin cupos/cohorte) - Sin escasez (sin cupos/cohorte)
### 4.1 HV-1 · Hormozi ligero ### 4.1 HV-1 · Hormozi ligero
- Headline en **Inter 900 uppercase** - Headline en **Aptos Black uppercase**
- "más esfuerzo" en dorado tostado, "más claridad" subrayado en dorado - "más esfuerzo" en dorado, "más claridad" subrayado en dorado
- + punch / conversión, − cercanía - + punch / conversión, − cercanía
### 4.2 V-a · Editorial minimal ### 4.2 V-a · Editorial minimal
- Headline en **Georgia 700 italic** (todo serif) - Headline en **Aptos Bold**
- Sin subhead, sin métricas. Solo wordmark → eyebrow → headline → CTA - Sin subhead, sin métricas. Solo wordmark → eyebrow → headline → CTA
- + cercanía / limpieza, − punch - + cercanía / limpieza, − punch
lib/content.ts
+4 -3
View File
@@ -1,8 +1,8 @@
// Source of truth for all copy. Edit here, not in JSX. // Source of truth for all copy. Edit here, not in JSX.
export const wordmark = { export const wordmark = {
// cre[e]er. — 'cre' + gold 'e' + 'er' + gold '.' // cre[≡]er — 'cre' + dorado symbol '≡' + 'er'
parts: { before: 'cre', accent: 'e', after: 'er', dot: '.' }, parts: { before: 'cre', accent: '≡', after: 'er' },
}; };
export const hero = { export const hero = {
@@ -90,6 +90,7 @@ export const header = {
}; };
export const footer = { export const footer = {
tagline: 'tu estratega de crecimiento', tagline: 'CLARIDAD · DIRECCIÓN · CRECIMIENTO',
eslogan: 'Estrategia que transforma.',
legal: '© 2026 creeer', legal: '© 2026 creeer',
}; };
tailwind.config.ts
+15 -13
View File
@@ -5,22 +5,24 @@ const config: Config = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
base: '#FBFAF7', // blanco cálido (fondo base) // — Manual de Identidad Visual v1.0 (mayo 2026) —
'bg-pure': '#FFFFFF', // blanco puro (hero) // Colores principales
'bg-dark': '#0A1F44', // navy (secciones oscuras) 'azul-profundo': '#0A1D5D', // Pantone 2965 C — texto, fondos oscuros, CTAs
ink: '#0A1F44', // texto principal 'dorado': {
cream: '#F5EBD0', // texto sobre oscuro (marfil) DEFAULT: '#C4942E', // Pantone 872 C — acentos, títulos, símbolo ≡
gold: {
DEFAULT: '#B8901f', // dorado tostado (sobre claro) — usar solo en texto grande/decorativo
deep: '#7A5F15', // dorado profundo (AA 4.5:1 sobre claro para texto pequeño)
bright: '#D4AF37', // dorado (sobre oscuro)
}, },
muted: '#5a5168', // Colores neutros
'muted-dark': '#9aa6c2', 'azul-claro': '#C8EEF5', // fondos alternativos, secciones suaves
'gris-claro': '#F2F2F2', // fondos neutros, separadores
'gris-medio': '#AAAAAA', // texto secundario, placeholders
// Aliases semánticos (backward compat + legibilidad en componentes)
ink: '#0A1D5D', // texto principal
'bg-dark': '#0A1D5D', // secciones oscuras
}, },
fontFamily: { fontFamily: {
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'], // Aptos (principal) — autoalojar .woff2; Inter como fallback web
serif: ['Georgia', 'Cambria', 'Times New Roman', 'serif'], sans: ['Aptos', 'var(--font-inter)', 'system-ui', 'sans-serif'],
narrow: ['Aptos Narrow', 'var(--font-inter)', 'system-ui', 'sans-serif'],
}, },
maxWidth: { maxWidth: {
content: '1152px', content: '1152px',