/* Crax Media — section components */ const { useState, useEffect, useRef, useMemo } = React; /* ---------- Decorative arch + sunset (animated SVG) ---------- */ function ArchSunset({ variant = "arch-sunset", className = "" }) { // animated gradient sky inside arch silhouette const archPath = "M 0 600 L 0 240 A 200 200 0 0 1 400 240 L 400 600 Z"; if (variant === "stripes") { return ( {Array.from({ length: 14 }).map((_, i) => )} ); } if (variant === "studio") { return ( ); } // default: arch-sunset return ( {/* mountains */} {/* grass foreground */} {/* subtle arch outline highlight */} ); } /* ---------- Concentric rings (from posts) ---------- */ function Rings({ count = 14, className = "" }) { return ( {Array.from({ length: count }).map((_, i) => )} ); } /* ---------- Sparkle icon ---------- */ function Sparkle({ size = 18, color = "currentColor" }) { return ( ); } /* ---------- NAV ---------- */ function Nav({ onContact }) { const [open, setOpen] = useState(false); const links = [ ["servicios", "Servicios"], ["portafolio", "Portafolio"], ["nosotros", "Nosotros"], ["contacto", "Contacto"]]; return (
Crax
); } /* ---------- HERO ---------- */ function Hero({ photoStyle }) { return (
{/* corner rings echo brand pattern */}
Agencia creativa · Bogotá / Remoto

Hacemos
crecer
tu marca

Estrategia, contenido y creatividad con propósito. Soluciones estratégicas para marcas que quieren destacar y conectar de verdad.

Cotizar mi proyecto → Ver portafolio
{/* metrics row */}
{[["+60", "marcas crecidas"], ["8", "años de experiencia"]].map(([n, l]) =>
{n}
{l}
)}
{/* arch frame */}
{/* sticker tagline */}
Ideas que vuelan alto
{/* small framed badge */}
01 · INICIO
); } /* ---------- SERVICIOS (carousel) ---------- */ const SERVICIOS = [ { n: "01", title: "Estrategia de marca", desc: "Definimos el rumbo. Posicionamiento, narrativa y arquitectura para marcas que quieren significar algo.", items: ["Branding", "Posicionamiento", "Identidad visual", "Arquitectura de marca"], dark: true }, { n: "02", title: "Contenido que conecta", desc: "Creamos contenido que atrae, comunica y convierte. Mensajes que se sienten humanos.", items: ["Producción para redes", "Copywriting", "Diseño gráfico", "Cubrimiento de eventos"], dark: false }, { n: "03", title: "Fotografía y video", desc: "Contamos historias que muestran lo mejor de tu marca con calidad cinematográfica.", items: ["Producción audiovisual", "Fotografía profesional", "Videos para redes", "Spots publicitarios"], dark: true }, { n: "04", title: "Gestión de redes", desc: "Nos encargamos de tu presencia digital. Estrategia, calendario y community 24/7.", items: ["Estrategia de contenido", "Calendario editorial", "Community management", "Reportes y análisis"], dark: false }, { n: "05", title: "Publicidad digital", desc: "Impulsamos tu marca con campañas que generan resultados medibles.", items: ["Meta Ads", "Google Ads", "TikTok Ads", "Estrategia de pauta"], dark: true }, { n: "06", title: "Web y e-commerce", desc: "Sitios y tiendas que cargan rápido, convierten alto y se sienten propios.", items: ["Landing pages", "E-commerce", "SEO técnico", "Mantenimiento"], dark: false }]; function Servicios({ photoStyle }) { const [idx, setIdx] = useState(0); const trackRef = useRef(null); const startX = useRef(null); const go = (n) => setIdx(Math.max(0, Math.min(SERVICIOS.length - 1, n))); const onPointerDown = (e) => {startX.current = e.clientX;}; const onPointerUp = (e) => { if (startX.current == null) return; const dx = e.clientX - startX.current; if (Math.abs(dx) > 60) go(idx + (dx < 0 ? 1 : -1)); startX.current = null; }; return (
02 · Servicios

Estos son nuestros
servicios

{SERVICIOS.map((s, i) => go(i)} /> )}
{SERVICIOS.map((_, i) =>
); } function navBtnStyle(disabled) { return { width: 48, height: 48, borderRadius: 999, border: "1.5px solid var(--ink)", background: "transparent", color: "var(--ink)", fontSize: 18, opacity: disabled ? 0.3 : 1, cursor: disabled ? "default" : "pointer", transition: "all .2s" }; } function ServiceCard({ svc, active, photoStyle, onClick }) { const isDark = svc.dark; return (
{/* arch image area */}
{/* overlay tint */}
{svc.n} / 06
{svc.n}

{svc.title}

{svc.desc}

    {svc.items.map((it) =>
  • {it}
    • )}
); } /* ---------- PORTAFOLIO ---------- */ const CASOS = [ { brand: "Verdal Café", tag: "Branding + Web", metric: "+312% ventas online", color: "#3a5a3f", accent: "#c9d8a8" }, { brand: "Estudio Lumen", tag: "Identidad visual", metric: "Rebrand completo", color: "#1a1714", accent: "#ee8021" }, { brand: "Casa Bermellón", tag: "Redes + Pauta", metric: "+85k seguidores", color: "#7a2418", accent: "#f8d6a0" }, { brand: "Norte Audio", tag: "Video + Spots", metric: "1.2M views", color: "#0c2840", accent: "#88c4ff" }]; function Portafolio() { const [hover, setHover] = useState(null); return (
03 · Portafolio

Marcas que ya
vuelan alto.

Una selección de proyectos donde estrategia, diseño y producción se encontraron.

{CASOS.map((c, i) =>
setHover(i)} onMouseLeave={() => setHover(null)} style={{ aspectRatio: "1/1.1", borderRadius: 22, overflow: "hidden", background: c.color, color: c.accent, position: "relative", cursor: "pointer", transition: "transform .4s", transform: hover === i ? "translateY(-6px)" : "translateY(0)" }}> {/* big number */}
{String(i + 1).padStart(2, "0")}
{/* placeholder visual */}
{c.tag}

{c.brand}

{c.metric}
)}
); } /* ---------- NOSOTROS ---------- */ function Nosotros() { return (
[ team photo ]
Hola,
somos Crax.
04 · Nosotros

Una manada
de creativos
con colmillo.

Somos estrategas, diseñadores, fotógrafos y planners que crecimos mirando cómo las marcas se quedaban sin voz en redes. Por eso nacimos: para devolverles ese ruido bonito que las hace memorables.

Trabajamos cerca, sin intermediarios, con la rigurosidad de una agencia grande y la velocidad de un equipo pequeño.

{[["Estrategia", "primero"], ["Producción", "in-house"], ["Resultados", "medibles"]].map(([a, b]) =>
{a}
{b}
)}
); } /* ---------- CONTACTO ---------- */ function Contacto() { const [data, setData] = useState({ name: "", email: "", company: "", budget: "5-10", services: [], message: "" }); const [sent, setSent] = useState(false); const [errors, setErrors] = useState({}); const set = (k, v) => setData((d) => ({ ...d, [k]: v })); const toggle = (s) => setData((d) => ({ ...d, services: d.services.includes(s) ? d.services.filter((x) => x !== s) : [...d.services, s] })); const submit = (e) => { e.preventDefault(); const er = {}; if (!data.name.trim()) er.name = "Nombre requerido"; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) er.email = "Email inválido"; if (!data.message.trim() || data.message.length < 10) er.message = "Cuéntanos un poco más"; setErrors(er); if (Object.keys(er).length === 0) setSent(true); }; if (sent) return (
🪶

¡Recibido,
{data.name.split(" ")[0]}!

Tu mensaje aterrizó en nuestra bandeja. Te respondemos en las próximas 24h hábiles con un primer brief y una propuesta de reunión.

); const inp = { width: "100%", padding: "14px 16px", borderRadius: 14, border: "1.5px solid var(--rule)", background: "var(--panel)", color: "var(--ink)", fontSize: 15, fontFamily: "inherit", outline: "none", transition: "border-color .2s" }; return (
05 · Contacto

Cuéntanos
tu idea.

Una propuesta inicial gratuita. Sin compromisos, sin formularios eternos.

{[ ["Email", "hola@craxmedia.co"], ["WhatsApp", "+57 300 123 4567"], ["Instagram", "@craxmedia"]]. map(([k, v]) =>
{k}
{v}
)}
set("name", e.target.value)} placeholder="María García" /> {errors.name && {errors.name}}
set("email", e.target.value)} placeholder="hola@empresa.com" /> {errors.email && {errors.email}}
set("company", e.target.value)} placeholder="(opcional)" />
{["Branding", "Contenido", "Video", "Redes", "Pauta", "Web"].map((s) => { const on = data.services.includes(s); return ( ); })}
{["<5", "5-10", "10-25", "25+"].map((b) => )}