feat: rebrand a Manual de Identidad Visual v1.0
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
1 parent
8fdfc1be5c
commit
60d3f22e6b
22 files changed
+212
-181
No files matched your search
@@ -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)
|
||||
|
||||
- **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.)
|
||||
- **Paleta:** navy `#0A1F44` + dorado tostado `#B8901f` (sobre claro) / dorado `#D4AF37` (sobre oscuro) + blanco cálido `#FBFAF7` / blanco `#FFFFFF`. **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).
|
||||
- **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:** 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:** **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.
|
||||
- **Sin escasez en el hero:** no mostrar cupos, cohorte ni "Generación Fundadora" arriba (decisión de la dueña).
|
||||
|
||||
|
||||
+5
-5
@@ -5,12 +5,12 @@
|
||||
@layer base {
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
background-color: #FBFAF7;
|
||||
color: #0A1F44;
|
||||
font-family: var(--font-inter), system-ui, sans-serif;
|
||||
background-color: #FFFFFF;
|
||||
color: #0A1D5D;
|
||||
font-family: 'Aptos', var(--font-inter), system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
::selection { background: #D4AF37; color: #0A1F44; }
|
||||
::selection { background: #C4942E; color: #FFFFFF; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
@layer base {
|
||||
a:focus-visible, button:focus-visible {
|
||||
outline: 3px solid #D4AF37;
|
||||
outline: 3px solid #C4942E;
|
||||
outline-offset: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@@ -4,11 +4,11 @@ import { footer } from '@/lib/content';
|
||||
|
||||
export function Footer() {
|
||||
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">
|
||||
<Wordmark size="sm" onDark />
|
||||
<p className="text-sm text-muted-dark">{footer.tagline}</p>
|
||||
<p className="text-xs text-muted-dark">{footer.legal}</p>
|
||||
<p className="text-sm text-gris-medio">{footer.tagline}</p>
|
||||
<p className="text-xs text-gris-medio">{footer.legal}</p>
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
|
||||
@@ -5,7 +5,7 @@ import { header } from '@/lib/content';
|
||||
|
||||
export function Header() {
|
||||
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">
|
||||
<a href="#top" aria-label="creeer — inicio">
|
||||
<Wordmark size="md" />
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Footer } from '../Footer';
|
||||
describe('<Footer />', () => {
|
||||
it('renders the tagline and the legal line', () => {
|
||||
render(<Footer />);
|
||||
expect(screen.getByText('tu estratega de crecimiento')).toBeInTheDocument();
|
||||
expect(screen.getByText('CLARIDAD · DIRECCIÓN · CRECIMIENTO')).toBeInTheDocument();
|
||||
expect(screen.getByText(/© 2026 creeer/)).toBeInTheDocument();
|
||||
});
|
||||
it('does not introduce a second h1', () => {
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Header } from '../Header';
|
||||
describe('<Header />', () => {
|
||||
it('renders the wordmark', () => {
|
||||
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', () => {
|
||||
render(<Header />);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
type Variant = 'light' | 'dark';
|
||||
const styles: Record<Variant, string> = {
|
||||
light: 'bg-ink text-cream hover:bg-ink/90',
|
||||
dark: 'bg-gold-bright text-ink hover:bg-gold-bright/90',
|
||||
light: 'bg-azul-profundo text-white hover:bg-azul-profundo/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 }) {
|
||||
|
||||
@@ -9,15 +9,14 @@ const sizeClass: Record<Size, string> = {
|
||||
};
|
||||
|
||||
export function Wordmark({ size = 'lg', onDark = false }: { size?: Size; onDark?: boolean }) {
|
||||
const { before, accent, after, dot } = wordmark.parts;
|
||||
const baseColor = onDark ? 'text-cream' : 'text-ink';
|
||||
const goldColor = onDark ? 'text-gold-bright' : 'text-gold';
|
||||
const { before, after } = wordmark.parts;
|
||||
const baseColor = onDark ? 'text-white' : 'text-azul-profundo';
|
||||
const goldColor = 'text-dorado';
|
||||
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}
|
||||
<span data-accent="true" className={`not-italic font-black ${goldColor}`}>{accent}</span>
|
||||
<span data-accent="true" className={goldColor}>≡</span>
|
||||
{after}
|
||||
<span className={goldColor}>{dot}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -6,13 +6,13 @@ describe('<Wordmark />', () => {
|
||||
it('renders the wordmark in lowercase', () => {
|
||||
render(<Wordmark />);
|
||||
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 accent = container.querySelector('[data-accent="true"]');
|
||||
expect(accent).not.toBeNull();
|
||||
expect(accent?.textContent).toBe('e');
|
||||
expect(accent?.textContent).toBe('≡');
|
||||
});
|
||||
it('never renders uppercase CREEER', () => {
|
||||
const { container } = render(<Wordmark />);
|
||||
|
||||
@@ -10,25 +10,25 @@ export function Cierre() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
const { whatsapp, email, linkedin } = cierre.contact;
|
||||
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">
|
||||
<motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||
className="flex flex-col items-center">
|
||||
<motion.div variants={fadeInUp}><Wordmark size="lg" onDark /></motion.div>
|
||||
<motion.blockquote variants={fadeInUp}
|
||||
className="mt-10 font-serif italic text-2xl md:text-4xl font-bold leading-snug max-w-3xl">
|
||||
<span className="text-gold-bright">“</span>{cierre.quote}<span className="text-gold-bright">”</span>
|
||||
className="mt-10 font-sans italic text-2xl md:text-4xl font-bold leading-snug max-w-3xl">
|
||||
<span className="text-dorado">“</span>{cierre.quote}<span className="text-dorado">”</span>
|
||||
</motion.blockquote>
|
||||
<motion.div variants={fadeInUp} className="mt-10">
|
||||
<CTA href={whatsapp.href} label={cierre.cta} variant="dark" />
|
||||
</motion.div>
|
||||
<motion.nav variants={fadeInUp} aria-label="Contacto" className="mt-12">
|
||||
<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 aria-hidden="true" className="text-muted-dark">·</li>
|
||||
<li><a href={email.href} className="hover:text-gold-bright transition-colors">{email.label}</a></li>
|
||||
<li aria-hidden="true" className="text-muted-dark">·</li>
|
||||
<li><a href={linkedin.href} className="hover:text-gold-bright transition-colors">{linkedin.label}</a></li>
|
||||
<li><a href={whatsapp.href} className="hover:text-dorado transition-colors">{whatsapp.label}</a></li>
|
||||
<li aria-hidden="true" className="text-gris-medio">·</li>
|
||||
<li><a href={email.href} className="hover:text-dorado transition-colors">{email.label}</a></li>
|
||||
<li aria-hidden="true" className="text-gris-medio">·</li>
|
||||
<li><a href={linkedin.href} className="hover:text-dorado transition-colors">{linkedin.label}</a></li>
|
||||
</ul>
|
||||
</motion.nav>
|
||||
</motion.div>
|
||||
|
||||
@@ -10,20 +10,20 @@ export function ComoEmpezar() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
const waHref = `${cierre.contact.whatsapp.href}?text=${encodeURIComponent(comoEmpezar.whatsappText)}`;
|
||||
return (
|
||||
<section className="bg-base">
|
||||
<section className="bg-white">
|
||||
<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">{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)}
|
||||
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)}
|
||||
className="mt-12 grid gap-10 md:grid-cols-3">
|
||||
{comoEmpezar.steps.map((step) => (
|
||||
<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">
|
||||
<div className="font-serif italic font-black text-5xl md:text-6xl text-gold leading-none">{step.n}</div>
|
||||
<h3 className="mt-4 font-sans font-bold text-xl text-ink">{step.name}</h3>
|
||||
<p className="mt-3 text-muted leading-relaxed">{step.desc}</p>
|
||||
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-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-azul-profundo">{step.name}</h3>
|
||||
<p className="mt-3 text-gris-medio leading-relaxed">{step.desc}</p>
|
||||
</motion.li>
|
||||
))}
|
||||
</motion.ol>
|
||||
|
||||
@@ -7,21 +7,21 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
|
||||
export function Disciplinas() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
return (
|
||||
<section className="bg-base">
|
||||
<section className="bg-white">
|
||||
<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>
|
||||
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)}
|
||||
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)}
|
||||
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)}
|
||||
className="mt-12 grid gap-8 md:grid-cols-3 list-none p-0">
|
||||
{disciplinas.items.map((item) => (
|
||||
<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">
|
||||
<h3 className="font-serif italic font-bold text-2xl text-ink">{item.name}</h3>
|
||||
<p className="mt-3 text-muted leading-relaxed">{item.desc}</p>
|
||||
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-sans font-bold text-2xl text-azul-profundo">{item.name}</h3>
|
||||
<p className="mt-3 text-gris-medio leading-relaxed">{item.desc}</p>
|
||||
</motion.li>
|
||||
))}
|
||||
</motion.ul>
|
||||
|
||||
@@ -7,21 +7,21 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
|
||||
export function Estratega() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
return (
|
||||
<section className="bg-base">
|
||||
<section className="bg-white">
|
||||
<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">
|
||||
{/* Portrait — placeholder gradient until dueña provides a photo */}
|
||||
<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"
|
||||
role="img"
|
||||
/>
|
||||
<div>
|
||||
<motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-deep">{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.p variants={fadeInUp} className="mt-6 text-lg text-muted 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.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-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-gris-medio leading-relaxed max-w-2xl">{estratega.bio}</motion.p>
|
||||
<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}
|
||||
</motion.blockquote>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ import { fadeInUp, viewportOnce, usePrefersReducedMotion, motionProps } from '@/
|
||||
export function FraseAncla() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
return (
|
||||
<section className="bg-base">
|
||||
<section className="bg-white">
|
||||
<Container className="py-24 md:py-32 text-center max-w-4xl">
|
||||
<motion.blockquote
|
||||
variants={fadeInUp}
|
||||
@@ -16,12 +16,12 @@ export function FraseAncla() {
|
||||
whileInView="visible"
|
||||
viewport={viewportOnce}
|
||||
{...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}{' '}
|
||||
<span className="text-gold">{fraseAncla.quote.accent}</span>
|
||||
<span className="text-gold">”</span>
|
||||
<span className="text-dorado">{fraseAncla.quote.accent}</span>
|
||||
<span className="text-dorado">”</span>
|
||||
</motion.blockquote>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
@@ -14,22 +14,22 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
|
||||
const isHormozi = variant === 'hormozi';
|
||||
const headlineBase = isHormozi
|
||||
? '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]';
|
||||
|
||||
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">
|
||||
<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 text-xs md:text-sm tracking-[0.3em] uppercase font-semibold text-dorado">
|
||||
{hero.eyebrow}
|
||||
</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}{' '}
|
||||
<span className="text-gold">{hero.headline.effort}</span>{' '}
|
||||
<span className="text-dorado">{hero.headline.effort}</span>{' '}
|
||||
{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}
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
@@ -8,20 +8,20 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
|
||||
export function Mecanismo() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
return (
|
||||
<section className="bg-bg-dark text-cream">
|
||||
<section className="bg-azul-profundo text-white">
|
||||
<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>
|
||||
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)}
|
||||
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)}
|
||||
className="mt-12 grid gap-10 md:grid-cols-3">
|
||||
{mecanismo.steps.map((step) => (
|
||||
<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">
|
||||
<div className="font-serif italic font-black text-5xl md:text-6xl text-gold-bright leading-none">{step.n}</div>
|
||||
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-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>
|
||||
<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.ol>
|
||||
|
||||
@@ -8,18 +8,18 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
|
||||
export function ParaQuien() {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
return (
|
||||
<section className="bg-base">
|
||||
<section className="bg-white">
|
||||
<Container className="py-24 md:py-32">
|
||||
<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}
|
||||
</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">
|
||||
{paraQuien.criteria.map((c) => (
|
||||
<li key={c} className="flex items-start gap-3">
|
||||
<span className="text-gold font-bold mt-1" aria-hidden="true">✓</span>
|
||||
<span className="text-ink text-lg">{c}</span>
|
||||
<span className="text-dorado font-bold mt-1" aria-hidden="true">✓</span>
|
||||
<span className="text-azul-profundo text-lg">{c}</span>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
+78
-53
@@ -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
|
||||
- Blanco cálido `#FBFAF7` / Blanco puro `#FFFFFF` (fondos)
|
||||
- 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)
|
||||
### Filosofía de marca
|
||||
> *"Transformamos la complejidad en claridad estratégica para construir ecosistemas empresariales que crecen con dirección y propósito."*
|
||||
|
||||
### 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):**
|
||||
- Dorado `#D4AF37` → **siempre BOLD, para títulos y énfasis** (Master Class, Agenda, sección, "Gracias", y la "e" del wordmark)
|
||||
- Navy `#0A1F44` → **body text** (peso regular)
|
||||
- Blanco implícito (fondos)
|
||||
**Versiones del logotipo:**
|
||||
| Versión | Descripción |
|
||||
|---------|-------------|
|
||||
| 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:**
|
||||
- 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**.
|
||||
**Tamaño mínimo:** impreso 20 mm, digital 120 px.
|
||||
|
||||
**Escala tipográfica (extraída de los slides reales):**
|
||||
| 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 |
|
||||
### Paleta de colores
|
||||
|
||||
**Wordmark `cre`+`e`+`er` (confirmado a múltiples tamaños):**
|
||||
- "Cre" + "e" (BOLD + `#D4AF37`) + "er"
|
||||
- La **2ª "e"** (la del medio) va en dorado + negrita
|
||||
- Aparece en 14pt (slide 1) y 28pt (slide 2)
|
||||
**Colores principales:**
|
||||
| Nombre | Hex | Pantone | RGB | Uso |
|
||||
|--------|-----|---------|-----|-----|
|
||||
| **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:**
|
||||
- `center` (align=ctr) → hero / títulos de impacto
|
||||
- `right` (align=r) → momentos asimétricos (slide 2)
|
||||
- `left` (align=l) → contenido, citas, cierre
|
||||
**Regla:** NO amarillo eléctrico tipo Hormozi (rompe cercanía).
|
||||
|
||||
**Recursos visuales recurrentes:**
|
||||
- Separador de disciplinas: **" • "** (Comunicación • Digital • Experiencias)
|
||||
- Listas numeradas: **"1. " "2. " "3. "** (sin bullets)
|
||||
- Smart quotes **"" ""** para citas institucionales
|
||||
### Tipografía
|
||||
|
||||
| Tipo | Fuente | Pesos disponibles | Uso |
|
||||
|------|--------|--------------------|-----|
|
||||
| **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
|
||||
|
||||
**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
|
||||
- SIEMPRE en minúsculas: `creeer`
|
||||
- La "e" central (2ª de las 3) en dorado + bold
|
||||
- Termina con punto dorado: `creeer.`
|
||||
## Restricciones fijadas (decisiones bloqueadas)
|
||||
|
||||
Estas decisiones **no se reabren sin consultar a la dueña.**
|
||||
|
||||
### Copy
|
||||
- Voz en **segunda persona ("tú")** — nunca "el empresario", siempre "tu negocio"
|
||||
- Sin jerga corporativa
|
||||
- "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
|
||||
- One-page (single page)
|
||||
- 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
|
||||
- **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?
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -35,65 +35,68 @@ Landing page **one-page** para **creeer**, marca personal de una estratega de cr
|
||||
|
||||
## 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
|
||||
|
||||
Tokens de color (Tailwind):
|
||||
|
||||
| Token | Hex | Uso |
|
||||
|---|---|---|
|
||||
| `bg-base` | `#FBFAF7` | Fondo base (blanco cálido) |
|
||||
| `bg-pure` | `#FFFFFF` | Secciones limpias / hero |
|
||||
| `bg-dark` | `#0A1F44` | Secciones oscuras (04 y 07) |
|
||||
| `text-primary` | `#0A1F44` | Texto principal (navy) |
|
||||
| `text-on-dark` | `#F5EBD0` | Texto sobre fondo oscuro (marfil) |
|
||||
| `accent-gold` | `#B8901f` | Dorado tostado — acentos sobre claro |
|
||||
| `accent-gold-bright` | `#D4AF37` | Dorado — acentos sobre oscuro |
|
||||
| `text-muted` | `#5a5168` | Texto secundario sobre claro |
|
||||
| `text-muted-dark` | `#9aa6c2` | Texto secundario sobre oscuro |
|
||||
| `bg-white` | `#FFFFFF` | Fondo base y hero |
|
||||
| `bg-azul-profundo` | `#0A1D5D` | Secciones oscuras (04 y 07) |
|
||||
| `text-azul-profundo` | `#0A1D5D` | Texto principal |
|
||||
| `text-white` | `#FFFFFF` | Texto sobre fondo oscuro |
|
||||
| `text-dorado` / `bg-dorado` | `#C4942E` | Dorado Estratégico — acentos, títulos, símbolo ≡ |
|
||||
| `bg-azul-claro` | `#C8EEF5` | Fondos alternativos, secciones suaves |
|
||||
| `bg-gris-claro` | `#F2F2F2` | Fondos neutros, separadores |
|
||||
| `text-gris-medio` | `#AAAAAA` | Texto secundario / placeholders |
|
||||
|
||||
**NO usar amarillo eléctrico tipo Hormozi** — rompe la cercanía.
|
||||
|
||||
### 3.2 Tipografía
|
||||
|
||||
Sistema híbrido (decisión final):
|
||||
|
||||
| Uso | Familia | Pesos | Estilo |
|
||||
|---|---|---|---|
|
||||
| Wordmark + citas institucionales | **Georgia** (system serif) | 700 / 900 | italic |
|
||||
| Headlines (Hormozi punch, si HV-1) | **Inter** (Google Fonts) | 900 | uppercase |
|
||||
| Body / eyebrow / CTA / UI | **Inter** | 400 / 600 / 700 | normal |
|
||||
| Headlines, body, CTA, UI | **Aptos** | Light–Black | normal |
|
||||
| Taglines, subtítulos compactos | **Aptos Narrow** | Light–Black | 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 |
|
||||
|---|---|---|
|
||||
| Hero headline | 32px / 48px | 700 italic (V-a) o 900 uppercase (HV-1) |
|
||||
| Sección título | 28px / 36px | 700 |
|
||||
| Cita ancla | 24px / 32px | 700 italic |
|
||||
| Subtítulo / body large | 18px / 24px | 400 |
|
||||
| Body | 16px / 18px | 400 |
|
||||
| Eyebrow / label | 11px / 12px | 600 uppercase (tracking +3px) |
|
||||
| Caption / métricas label | 10px / 11px | 600 uppercase |
|
||||
| Hero headline | 32px / 48px | Bold o Black |
|
||||
| Sección título | 28px / 36px | Bold |
|
||||
| Cita ancla | 24px / 32px | Bold italic |
|
||||
| Subtítulo / body large | 18px / 24px | Regular |
|
||||
| Body | 16px / 18px | Regular |
|
||||
| Eyebrow / label | 11px / 12px | Medium uppercase (tracking +3px) |
|
||||
| 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` en navy `#0A1F44` (sobre claro) o marfil `#F5EBD0` (sobre oscuro)
|
||||
- **`e`** (la 2ª de las 3 "e") en **peso 900 + dorado**
|
||||
**`cre≡er`** — siempre en minúsculas, Aptos (o Inter como fallback):
|
||||
- `cre` en Azul Profundo `#0A1D5D` (sobre claro) o blanco `#FFFFFF` (sobre oscuro)
|
||||
- **`≡`** (símbolo de tres líneas, reemplaza la "e" central) en **Dorado Estratégico `#C4942E`**
|
||||
- `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)
|
||||
- Listas numeradas: **"1." "2." "3."** (sin bullets)
|
||||
- Smart quotes **"" ""** para citas institucionales
|
||||
- Flecha **"→"** en CTAs
|
||||
- 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
|
||||
|
||||
@@ -104,8 +107,8 @@ Principio: **serif = voz de marca**, **sans = voz funcional**. Georgia no requie
|
||||
|
||||
### 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 **oscuras** (04, 07): fondo navy `#0A1F44` con texto marfil y acentos dorado `#D4AF37`
|
||||
- Secciones **claras**: fondo blanco `#FFFFFF`. Alternar con `#F2F2F2` (gris claro) o `#C8EEF5` (azul claro) para ritmo visual.
|
||||
- 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)
|
||||
|
||||
---
|
||||
@@ -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:
|
||||
|
||||
- Wordmark `cre`**`e`**`er.` (Georgia italic)
|
||||
- Logotipo `cre≡er` (Aptos / Inter)
|
||||
- Eyebrow: `— tu estratega de crecimiento —`
|
||||
- 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`
|
||||
- Sin escasez (sin cupos/cohorte)
|
||||
|
||||
### 4.1 HV-1 · Hormozi ligero
|
||||
- Headline en **Inter 900 uppercase**
|
||||
- "más esfuerzo" en dorado tostado, "más claridad" subrayado en dorado
|
||||
- Headline en **Aptos Black uppercase**
|
||||
- "más esfuerzo" en dorado, "más claridad" subrayado en dorado
|
||||
- + punch / conversión, − cercanía
|
||||
|
||||
### 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
|
||||
- + cercanía / limpieza, − punch
|
||||
|
||||
|
||||
+4
-3
@@ -1,8 +1,8 @@
|
||||
// Source of truth for all copy. Edit here, not in JSX.
|
||||
|
||||
export const wordmark = {
|
||||
// cre[e]er. — 'cre' + gold 'e' + 'er' + gold '.'
|
||||
parts: { before: 'cre', accent: 'e', after: 'er', dot: '.' },
|
||||
// cre[≡]er — 'cre' + dorado symbol '≡' + 'er'
|
||||
parts: { before: 'cre', accent: '≡', after: 'er' },
|
||||
};
|
||||
|
||||
export const hero = {
|
||||
@@ -90,6 +90,7 @@ export const header = {
|
||||
};
|
||||
|
||||
export const footer = {
|
||||
tagline: 'tu estratega de crecimiento',
|
||||
tagline: 'CLARIDAD · DIRECCIÓN · CRECIMIENTO',
|
||||
eslogan: 'Estrategia que transforma.',
|
||||
legal: '© 2026 creeer',
|
||||
};
|
||||
+15
-13
@@ -5,22 +5,24 @@ const config: Config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
base: '#FBFAF7', // blanco cálido (fondo base)
|
||||
'bg-pure': '#FFFFFF', // blanco puro (hero)
|
||||
'bg-dark': '#0A1F44', // navy (secciones oscuras)
|
||||
ink: '#0A1F44', // texto principal
|
||||
cream: '#F5EBD0', // texto sobre oscuro (marfil)
|
||||
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)
|
||||
// — Manual de Identidad Visual v1.0 (mayo 2026) —
|
||||
// Colores principales
|
||||
'azul-profundo': '#0A1D5D', // Pantone 2965 C — texto, fondos oscuros, CTAs
|
||||
'dorado': {
|
||||
DEFAULT: '#C4942E', // Pantone 872 C — acentos, títulos, símbolo ≡
|
||||
},
|
||||
muted: '#5a5168',
|
||||
'muted-dark': '#9aa6c2',
|
||||
// Colores neutros
|
||||
'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: {
|
||||
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
|
||||
serif: ['Georgia', 'Cambria', 'Times New Roman', 'serif'],
|
||||
// Aptos (principal) — autoalojar .woff2; Inter como fallback web
|
||||
sans: ['Aptos', 'var(--font-inter)', 'system-ui', 'sans-serif'],
|
||||
narrow: ['Aptos Narrow', 'var(--font-inter)', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
maxWidth: {
|
||||
content: '1152px',
|
||||
|
||||
Reference in new issue
Block a user