diff --git a/app/globals.css b/app/globals.css index 13d40b8..2db668c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,26 +2,13 @@ @tailwind components; @tailwind utilities; -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; -} - -@layer utilities { - .text-balance { - text-wrap: balance; +@layer base { + html { scroll-behavior: smooth; } + body { + background-color: #FBFAF7; + color: #0A1F44; + font-family: var(--font-inter), system-ui, sans-serif; + -webkit-font-smoothing: antialiased; } + ::selection { background: #D4AF37; color: #0A1F44; } } diff --git a/app/layout.tsx b/app/layout.tsx index a36cde0..fce9582 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,35 +1,19 @@ -import type { Metadata } from "next"; -import localFont from "next/font/local"; -import "./globals.css"; +import type { Metadata } from 'next'; +import { Inter } from 'next/font/google'; +import './globals.css'; -const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", - weight: "100 900", -}); -const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", - weight: "100 900", -}); +const inter = Inter({ subsets: ['latin'], weight: ['400', '600', '700', '900'], variable: '--font-inter', display: 'swap' }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: 'creeer · tu estratega de crecimiento', + description: 'Claridad estratégica para empresarios con tracción en punto de inflexión.', + // (SEO task expands this later) }; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - - {children} - + + {children} ); } diff --git a/lib/content.ts b/lib/content.ts new file mode 100644 index 0000000..52fccfe --- /dev/null +++ b/lib/content.ts @@ -0,0 +1,70 @@ +// 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: '.' }, +}; + +export const hero = { + eyebrow: '— tu estratega de crecimiento —', + // Headline broken into segments for emphasis styling + headline: { + line1: 'Tu negocio no necesita', + effort: 'más esfuerzo.', // gold (HV-1) or gold italic (V-a) + line3: 'Necesita', + clarity: 'más claridad.', // underlined gold + }, + cta: 'Define tu siguiente movimiento', +}; + +export const fraseAncla = { + quote: 'Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad.', +}; + +export const paraQuien = { + title: '¿Llegaste a tu punto de inflexión?', + lead: 'Esto es para ti si…', + criteria: [ + 'tienes tracción y ya demostraste que sabes crecer', + 'trabajar más ya no rinde como antes', + 'necesitas claridad para decidir el siguiente movimiento', + ], +}; + +export const mecanismo = { + eyebrow: 'el mecanismo único', + title: 'Cómo trabajo', + steps: [ + { n: '01', name: 'Inmersión', desc: 'Me sumerjo en tu empresa hasta comprenderla desde dentro.' }, + { n: '02', name: 'Desafiar supuestos', desc: 'Cuestiono lo que todos dan por hecho y frenan el crecimiento.' }, + { n: '03', name: 'Estrategia ejecutable', desc: 'Construimos, juntos, una estrategia que puedas ejecutar.' }, + ], +}; + +export const disciplinas = { + eyebrow: 'las herramientas', + title: 'Las disciplinas que uso', + lead: 'No son la promesa — son los medios.', + items: [ + { name: 'Comunicación', desc: 'Mensaje que alinea a tu equipo y a tu mercado.' }, + { name: 'Digital', desc: 'Presencia y procesos que escalan sin ti.' }, + { name: 'Experiencias', desc: 'Cada toque con tu marca construye confianza.' }, + ], +}; + +export const estratega = { + eyebrow: 'la mente detrás de creeer', + title: 'Sobre la estratega', + bio: 'Más de 30 años construyendo marcas. Hoy acompaño a empresarios que ya lograron tracción y necesitan claridad para su siguiente movimiento.', + quote: 'El tiempo no se compra, se invierte.', +}; + +export const cierre = { + quote: 'Devuélvele claridad al rumbo de tu empresa.', + cta: 'Define tu siguiente movimiento', + contact: { + whatsapp: { label: 'WhatsApp', href: 'https://wa.me/520000000000' }, // TODO dueña: real number + email: { label: 'Email', href: 'mailto:hola@creeer.com' }, // TODO dueña: real email + linkedin: { label: 'LinkedIn', href: 'https://linkedin.com/in/...' }, // TODO dueña: real URL + }, +}; diff --git a/lib/motion.ts b/lib/motion.ts new file mode 100644 index 0000000..560c0bb --- /dev/null +++ b/lib/motion.ts @@ -0,0 +1,21 @@ +import type { Variants } from 'framer-motion'; + +// EaseOutExpo — smooth editorial deceleration +export const easeOutExpo = [0.22, 1, 0.36, 1] as const; + +export const fadeInUp: Variants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: easeOutExpo } }, +}; + +export const fadeIn: Variants = { + hidden: { opacity: 0 }, + visible: { opacity: 1, transition: { duration: 0.4, ease: easeOutExpo } }, +}; + +export const staggerContainer: Variants = { + hidden: {}, + visible: { transition: { staggerChildren: 0.1 } }, +}; + +export const viewportOnce = { once: true, amount: 0.3 } as const; diff --git a/tailwind.config.ts b/tailwind.config.ts index d43da91..0bdaf76 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,16 +1,28 @@ -import type { Config } from "tailwindcss"; +import type { Config } from 'tailwindcss'; const config: Config = { - content: [ - "./pages/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", - "./app/**/*.{js,ts,jsx,tsx,mdx}", - ], + content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'], theme: { extend: { colors: { - background: "var(--background)", - foreground: "var(--foreground)", + 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) + bright: '#D4AF37', // dorado (sobre oscuro) + }, + muted: '#5a5168', + 'muted-dark': '#9aa6c2', + }, + fontFamily: { + sans: ['var(--font-inter)', 'system-ui', 'sans-serif'], + serif: ['Georgia', 'Cambria', 'Times New Roman', 'serif'], + }, + maxWidth: { + content: '1152px', }, }, },