// ============================================================ // ESTUDIO RETÓRICA · Home // ============================================================ const RETORICA_IMAGES = { logo: getRetoricaAssetUrl('assets/retorica-logo.png'), diada: getRetoricaAssetUrl('assets/Proyecto-nuevo-1.png'), redbuzz: getRetoricaAssetUrl('assets/Proyecto-nuevo.jpg'), signature: getRetoricaAssetUrl('assets/Proyecto-nuevo-3.png'), matrix: getRetoricaAssetUrl('assets/matrix-events-1.png'), disruptivos: getRetoricaAssetUrl('assets/Logo-Disruptivos-1.png'), tucanes: getRetoricaAssetUrl('assets/los-tucanes.png'), cultural: getRetoricaAssetUrl('assets/cultural-bytes.png'), eco: getRetoricaAssetUrl('assets/Eco3Planet-03.jpg'), editorial: getRetoricaAssetUrl('assets/1.png'), radical: getRetoricaAssetUrl('assets/3-1.png'), }; const WHATSAPP_NUMBER = '34617492461'; const BRIEF_LINK = '/brief/'; const bgImage = (url, overlay = 'linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.30) 100%)') => ({ backgroundImage: `${overlay}, url(${url})`, }); const serviceCards = [ { title: 'Branding e identidad corporativa', text: 'Retórica construye marcas con criterio, personalidad y coherencia para que cada punto de contacto se sienta sólido, recordable y comercialmente útil.', image: RETORICA_IMAGES.radical, }, { title: 'Diseño y desarrollo web', text: 'Creamos sitios web que ordenan la oferta, elevan la percepción de marca y convierten visitas en oportunidades reales de contacto y venta.', image: RETORICA_IMAGES.eco, }, { title: 'Marketing, contenido y audiovisual', text: 'Desde redes sociales y posicionamiento hasta piezas audiovisuales, podcast y campañas, articulamos contenido para que la marca mantenga presencia y tracción.', image: RETORICA_IMAGES.disruptivos, }, ]; const clients = [ { name: 'Matrix Events', image: RETORICA_IMAGES.matrix }, { name: 'Radical Trainer', image: RETORICA_IMAGES.radical }, { name: 'Disruptivos', image: RETORICA_IMAGES.disruptivos }, { name: 'Diada Tec', image: RETORICA_IMAGES.diada }, { name: 'Cultural Bytes', image: RETORICA_IMAGES.cultural }, { name: 'Eco3Planet', image: RETORICA_IMAGES.eco }, { name: 'Redbuzz', image: RETORICA_IMAGES.redbuzz }, { name: 'Proyecto firma', image: RETORICA_IMAGES.signature }, { name: 'Los Tucanes', image: RETORICA_IMAGES.tucanes }, ]; const portfolioCards = [ { slug: 'matrix-events', meta: 'Branding y activaciones', title: 'Matrix Events', text: 'Sistema visual de alto impacto para eventos, piezas promocionales y comunicación de marca con lectura inmediata.', image: RETORICA_IMAGES.matrix, span: 'medium', }, { slug: 'radical-trainer', meta: 'Identidad corporativa', title: 'Radical Trainer', text: 'Marca con carácter deportivo y comercial, diseñada para ganar reconocimiento en fachada, piezas y medios digitales.', image: RETORICA_IMAGES.radical, span: 'medium', }, { slug: 'disruptivos', meta: 'Contenido y audiovisual', title: 'Disruptivos', text: 'Identidad flexible para covers, clips, podcast y activos digitales dentro de una comunicación más expresiva.', image: RETORICA_IMAGES.disruptivos, span: 'medium', }, { slug: 'diada-tec', meta: 'Marca corporativa', title: 'Diada Tec', text: 'Lenguaje visual limpio para una percepción técnica, actual y más confiable frente a clientes y aliados.', image: RETORICA_IMAGES.diada, span: 'medium', }, { slug: 'cultural-bytes', meta: 'Digital y comunidad', title: 'Cultural Bytes', text: 'Activos visuales orientados a educación, comunidad y posicionamiento digital con una voz más cercana.', image: RETORICA_IMAGES.cultural, span: 'medium', }, { slug: 'eco3planet', meta: 'Diseño web y presentación', title: 'Eco3Planet', text: 'Puesta en escena digital para reforzar innovación, producto y claridad comercial en la presentación de valor.', image: RETORICA_IMAGES.eco, span: 'medium', }, ]; const trustStats = [ { value: 10, suffix: '+', label: 'Proyectos y clientes visibles', detail: 'El portafolio aporta respaldo visual desde el primer recorrido por la home.' }, { value: 6, suffix: '', label: 'Líneas de servicio claras', detail: 'Identidad, diseño web, redes, audiovisual, activaciones y marketing dentro de una misma narrativa.' }, { value: 3, suffix: '', label: 'Rutas directas de contacto', detail: 'Portafolio, brief y WhatsApp reducen fricción para iniciar una conversación.' }, { value: 1, suffix: '', label: 'Lenguaje de marca consistente', detail: 'La experiencia mantiene una dirección visual sólida entre home, servicios, casos y contacto.' }, ]; const conversionBlocks = [ { icon: 'eye', title: 'Oferta mejor explicada', text: 'Desde Retórica, cada servicio se presenta como parte de una propuesta integral de marca, web, marketing y contenido.', }, { icon: 'layers', title: 'Autoridad desde el portafolio', text: 'Los proyectos funcionan como evidencia de criterio, capacidad de ejecución y variedad de soluciones para distintos tipos de cliente.', }, { icon: 'star', title: 'Más intención comercial', text: 'La navegación, el brief y el acceso directo a WhatsApp acompañan mejor la decisión de pedir propuesta o iniciar una conversación.', }, ]; const processSteps = [ { n: '01', title: 'Diagnóstico', text: 'Leemos el estado de la marca, el objetivo comercial, el público y los canales donde necesita ganar claridad o presencia.' }, { n: '02', title: 'Dirección retórica', text: 'Definimos el mensaje central, la jerarquía de contenido y la línea visual que ordenará la comunicación del proyecto.' }, { n: '03', title: 'Diseño, desarrollo y producción', text: 'Construimos identidad, sitio web, piezas, campañas o contenidos con una ejecución alineada a la estrategia planteada.' }, { n: '04', title: 'Salida al mercado', text: 'Entregamos una base lista para publicar, presentar y convertir mejor en medios digitales, sociales o comerciales.' }, ]; const featuredCases = [ { name: 'Matrix Events', slug: 'matrix-events', category: 'Branding y activaciones', image: RETORICA_IMAGES.matrix, headline: 'Un sistema visual de alto impacto para eventos, piezas promocionales y escenarios donde la marca debe entrar con fuerza desde el primer vistazo.', bullets: ['Marca visible en entornos exigentes', 'Aplicación rápida en formatos promocionales', 'Mayor recordación en activaciones'], }, { name: 'Radical Trainer', slug: 'radical-trainer', category: 'Identidad corporativa', image: RETORICA_IMAGES.radical, headline: 'Una marca de energía alta, diseñada para sostener presencia comercial en fachada, piezas físicas y comunicación digital.', bullets: ['Lenguaje deportivo y comercial', 'Lectura sólida en gran formato', 'Mayor fuerza de marca'], }, { name: 'Cultural Bytes', slug: 'cultural-bytes', category: 'Digital y comunidad', image: RETORICA_IMAGES.cultural, headline: 'Activos visuales pensados para educación, comunidad y presencia digital continua con una comunicación más clara y cercana.', bullets: ['Ecosistema visual para contenido', 'Mejor conexión con comunidad', 'Identidad adaptable para digital'], }, ]; const trustMessages = [ { tag: 'Centro', title: 'Retórica no es solo el nombre del estudio: es la forma de ordenar una marca para que diga mejor lo que vale.', text: 'La web parte de esa idea y convierte cada sección en una extensión del discurso comercial, visual y estratégico de la agencia.', }, { tag: 'Oferta', title: 'Branding, desarrollo web, marketing digital, contenido y audiovisual dentro de un mismo relato.', text: 'La experiencia deja ver que la agencia puede acompañar desde la construcción de marca hasta su activación en medios y canales digitales.', }, { tag: 'Conversión', title: 'Primero se entiende la propuesta, luego se validan los proyectos y finalmente se facilita el contacto.', text: 'Ese orden ayuda a que el visitante llegue mejor preparado a pedir una propuesta o iniciar una conversación.', }, ]; const serviceList = [ { n: '01', title: 'Estrategia de marca e identidad corporativa', desc: 'Definimos el corazón visual y verbal de la marca para que cada pieza tenga coherencia, intención y una mejor percepción comercial.', items: ['Naming y dirección conceptual', 'Logo y sistema visual', 'Paleta, tipografía y tono', 'Piezas institucionales y comerciales'], }, { n: '02', title: 'Diseño y desarrollo web', desc: 'Construimos sitios que presentan mejor el valor de la empresa y convierten el tráfico en oportunidades de negocio.', items: ['Arquitectura de contenido', 'Diseño UI y experiencia', 'Desarrollo de páginas comerciales', 'Portafolio, formularios y CTA'], }, { n: '03', title: 'Marketing digital y posicionamiento', desc: 'Alineamos contenido, SEO, campañas y social media para darle mayor visibilidad a la marca en canales digitales.', items: ['Gestión de redes sociales', 'SEO y contenido estratégico', 'Campañas digitales', 'Landing pages y captación'], }, { n: '04', title: 'Contenido, audiovisual y activaciones', desc: 'Producimos piezas que sostienen la presencia de la marca en video, podcast, fotografía, calle y formatos editoriales.', items: ['Producción audiovisual y podcast', 'Fotografía y video de marca', 'Piezas para campañas', 'Buzoneo y street marketing'], }, ]; const briefBenefits = [ 'Aclara objetivos, alcance y prioridad comercial.', 'Permite cotizar con más contexto y mejor criterio.', 'Ordena referencias, públicos, tiempos y entregables.', 'Hace que la conversación inicial con Retórica sea más ágil y productiva.', ]; const faqItems = [ { q: '¿Qué tipo de agencia es Retórica?', a: 'Retórica se presenta como un estudio que articula branding, diseño y desarrollo web, marketing digital, contenido, audiovisual y activaciones dentro de una misma propuesta de comunicación.', }, { q: '¿Cómo se inicia un proyecto con la agencia?', a: 'La forma más rápida es compartir el contexto por WhatsApp o correo y, si el proyecto ya tiene una idea clara, completar el brief para acelerar la propuesta.', }, { q: '¿Se pueden integrar branding, web y marketing en un mismo alcance?', a: 'Sí. La lógica del sitio y de la oferta parte de que Retórica puede acompañar la marca desde su definición hasta su activación digital y comercial.', }, { q: '¿Retórica también trabaja producción audiovisual y campañas?', a: 'Sí. La agencia puede cubrir piezas audiovisuales, podcast, fotografía, campañas, contenido social y activaciones de marca según la necesidad del proyecto.', }, ]; const buildWhatsappUrl = ({ name, email, service, message }) => { const text = [ 'Hola, quiero hablar con Estudio Retórica.', '', `Nombre: ${name || ''}`, `Email: ${email || ''}`, `Servicio de interés: ${service || ''}`, 'Mensaje:', message || '', ].join('\n'); return `https://api.whatsapp.com/send/?app_absent=0&phone=${WHATSAPP_NUMBER}&text=${encodeURIComponent(text)}&type=phone_number`; }; const Hero = () => (
); const Logos = () => (
Portafolio activo

Algunos proyectos y clientes que aportan respaldo visual desde la primera visita.

Marcas, campañas y proyectos que ya pasaron por Retórica y hoy sirven como prueba visible de criterio, ejecución y versatilidad.

{[...clients, ...clients].map((client, index) => (
{client.name} {client.name}
))}
); const useSurfacePointer = (ref) => { React.useEffect(() => { const node = ref.current; if (!node) return; const setPosition = (clientX, clientY) => { const rect = node.getBoundingClientRect(); const x = clientX - rect.left; const y = clientY - rect.top; const px = rect.width ? x / rect.width : 0.5; const py = rect.height ? y / rect.height : 0.5; node.style.setProperty('--mx', `${(px * 100).toFixed(2)}%`); node.style.setProperty('--my', `${(py * 100).toFixed(2)}%`); node.style.setProperty('--rx', `${(py - 0.5) * -10}deg`); node.style.setProperty('--ry', `${(px - 0.5) * 12}deg`); }; const reset = () => { node.style.setProperty('--mx', '50%'); node.style.setProperty('--my', '50%'); node.style.setProperty('--rx', '0deg'); node.style.setProperty('--ry', '0deg'); }; reset(); const onMove = (event) => setPosition(event.clientX, event.clientY); const onTouchMove = (event) => { const touch = event.touches && event.touches[0]; if (touch) setPosition(touch.clientX, touch.clientY); }; node.addEventListener('mousemove', onMove); node.addEventListener('touchmove', onTouchMove, { passive: true }); node.addEventListener('mouseleave', reset); return () => { node.removeEventListener('mousemove', onMove); node.removeEventListener('touchmove', onTouchMove); node.removeEventListener('mouseleave', reset); }; }, [ref]); }; const ShaderWallpaperCard = ({ variant, title, text, meta, chips = [] }) => { const ref = React.useRef(null); useSurfacePointer(ref); return (
); }; const InteractiveWallpapers = () => (
Interacción visual

Interacción con carácter para que la marca se sienta viva, memorable y actual.

Cada superficie responde al movimiento para transmitir energía, dirección y una sensación premium alineada con una agencia que convierte estrategia, diseño y contenido en presencia de marca.

); const Results = () => (
Lo que mejora el sitio

Una web más clara para vender mejor lo que hace Retórica como agencia.

La meta no es solo verse bien. La meta es dejar claro qué resuelve la agencia, respaldarlo con proyectos y facilitar el inicio de una conversación comercial.

{trustStats.map((item) => (
0{item.suffix}
{item.label}

{item.detail}

))}
); const Manifesto = () => (
Qué hace más atractiva la experiencia

Movimiento sutil, mejor jerarquía y una propuesta de agencia más fácil de entender.

Retórica gana una presencia más contundente: se entiende rápido, se siente sólida y deja claro cómo una marca puede crecer desde el branding hasta su activación digital.

{conversionBlocks.map((item) => (

{item.title}

{item.text}

))}
); const Work = () => (
Proyectos

Proyectos que muestran cómo Retórica convierte ideas en marcas con presencia, ritmo y peso comercial.

Explorar proyectos
{portfolioCards.map((card, index) => (
{card.meta}
{card.title}

{card.text}

 ))}
); const Process = () => (
Ruta de trabajo

De la idea inicial a una marca lista para salir al mercado con forma, discurso y dirección.

Cada etapa aterriza la propuesta con más claridad, más valor percibido y una ejecución lista para competir mejor en digital y en el mundo real.

{processSteps.map((item) => (
{item.n}

{item.title}

{item.text}

))}
); const Spotlight = () => { const [active, setActive] = React.useState(0); const current = featuredCases[active]; return (
Casos destacados

Casos que convierten curiosidad en confianza y confianza en intención de compra.

Cada caso resume una misma promesa: cuando Retórica entra en una marca, la propuesta se vuelve más clara, más visible y más fácil de elegir.

{featuredCases.map((item, index) => ( ))}
{current.category}

{current.name}

{current.headline}

    {current.bullets.map((bullet) => (
  • {bullet}
    • ))}
); }; const LeadMagnet = () => (
Recurso útil

Descarga el brief inicial y llega a la conversación con más contexto.

Cuando el brief llega claro, la propuesta sale más precisa, el alcance se define mejor y la conversación avanza con más velocidad.

Abrir brief Ver canales de contacto
Brief inicial descargable

Útil para branding, web, campañas o contenido.

    {briefBenefits.map((item) => (
  • {item}
    • ))}
Descargar recurso
); const Services = () => (
Servicios

Una oferta más clara para marcas que necesitan crecer con mejor branding, mejor web y mejor comunicación.

Retórica reúne estrategia, diseño, desarrollo y contenido en una sola conversación para que la marca no solo se vea bien: también avance con dirección.

{serviceList.map((item) => (
{item.n}

{item.title}

{item.desc}

    {item.items.map((sub) => (
  • {sub}
    • ))}
))}
); const Testimonials = () => { const [open, setOpen] = React.useState(0); return (
Preguntas frecuentes

Preguntas frecuentes para que la decisión se sienta más simple y el siguiente paso esté más cerca.

Resolvemos lo esencial de forma directa para que la conversación pase rápido del interés a la acción.

{faqItems.map((item, index) => { const isOpen = open === index; return (
); })}
Siguiente paso

Portafolio, brief y contacto directo dentro de una misma experiencia.

Todo el recorrido está pensado para que una marca descubra el valor de Retórica, vea resultados reales y llegue al contacto con ganas de avanzar.

Hablemos Descargar brief
); }; const Contact = () => { const [sent, setSent] = React.useState(false); const [waUrl, setWaUrl] = React.useState(''); const [form, setForm] = React.useState({ name: '', email: '', service: 'Identidad corporativa', message: '', }); const handleChange = (key, value) => setForm((prev) => ({ ...prev, [key]: value })); const handleSubmit = (e) => { e.preventDefault(); const url = buildWhatsappUrl(form); setWaUrl(url); setSent(true); window.open(url, '_blank', 'noopener'); }; return (
Contacto

Hablemos del siguiente paso para tu marca.

Completa el formulario y se abrirá WhatsApp con un mensaje estructurado para iniciar la conversación con Retórica con más contexto y mejor enfoque.

Correo
direccion@estudioretorica.com
WhatsApp
+34 617492461
Recurso
Brief inicial
{!sent ? ( <>
handleChange('name', e.target.value)} required />
handleChange('email', e.target.value)} required />
{['Identidad corporativa', 'Diseño web', 'Redes sociales', 'Audiovisual / podcast', 'SEO / marketing'].map((b) => ( ))}