seo7.es no es una web de presentación, sino nuestra propia plataforma de ciclo completo: web trilingüe, blog con generación de artículos por IA optimizada para SEO/AEO/GEO, portafolio de casos, calculadora interactiva de servicios con cesta, briefing con IA y panel de administración — todo en un solo backend.
Construimos para nosotros lo que construimos para los clientes: una web que atrae solicitudes por sí sola. El escaparate de nuestras capacidades es, a la vez, la herramienta de trabajo del estudio.
Stack tecnológico
- Frontend: React 18 + Vite + TypeScript + Tailwind CSS v3
- Backend: Node.js (Express) + Prisma ORM + MySQL
- IA: generación y traducción de artículos en cascada, control de calidad lingüística contra la mezcla de idiomas
- Infraestructura SEO: prerenderizado de la SPA (SSG) para buscadores y crawlers de IA, sitemap, robots, llms.txt, JSON-LD Schema.org
- Diseño: proporción áurea, animaciones framer-motion, fuentes self-hosted (Manrope), sin render-blocking
- Despliegue: frontend estático, backend en VPS, CI con autodespliegue
Lista completa de funciones
🌐 Web y páginas
- Portada con hero animado: proporción áurea, rotador de palabra con brillo, cinta de casos reales
- Preloader de marca «SEO7.ES» con brillo en movimiento antes de cargar la aplicación
- Componentes hero separados para móvil y escritorio (no un «escritorio comprimido»)
- Menú superior (CardNav) con idiomas, búsqueda y login, logo que se contrae al hacer scroll
- Página «Sobre el estudio», «Contacto», pie con logo en blanco
- Indicador de scroll y transiciones suaves entre secciones
- Adaptable a 375 / 768 / 1024 / 1440, sin scroll horizontal
🧭 6 páginas de servicios
- Creación de webs, SEO, IA-SEO, publicidad/tráfico, IA-bots, automatización
- En cada una: H2/lead por idioma, paquetes, rejilla de micro-servicios, CTA dirigido
- Funciones marcadas por niveles (Start / Pro / Max) con leyenda y escala de color
- Despliegue del paquete en 3–4 columnas con animación ~1 s, tooltips en las etapas
- Ventajas locales en topFeatures, KPI medibles en las garantías
🧮 Calculadora de servicios y cesta
- Selección interactiva de micro-servicios de 6 áreas, precio en tiempo real
- Cesta global «Tu conjunto» (PricingCartContext), panel lateral (Drawer)
- Regalos del estudio: los más económicos de lo elegido + un pool base de bonos
- Casillas en las líneas de etapa, deep-link a la ficha de servicio desplegada
- Página
/precioscon 6 áreas y tabla de ofertas especiales
📝 Blog con inteligencia artificial
- Generación automática de artículos en formato «etalon»: SEO + AEO + GEO en una estructura
- Idioma base ES → traducción a RU/EN con control de calidad lingüística (detección de cirílico en es/en)
- Bloques atómicos de 40–60 palabras, Quick Answer, definition boxes, citas de expertos
- Bloque FAQ con Schema FAQPage, artículos relacionados, enlazado interno
- Artículo = una entrada con tres idiomas (etalonData), draft/published
- Automatización de publicación, generación de portadas, jobs programados
💼 Portafolio y casos
- Escaparate de proyectos: tarjetas con capturas reales (portátil + móvil, DeviceDuo)
- Página de caso: split-hero, fichas 2×2, bloque de dispositivos, lista de funciones, FAQ
- Cinta de proyectos en la portada (escritorio — tooltips al pasar, móvil — swipe)
- Listado
/portfoliocon JSON-LD ItemList / CollectionPage - El sitemap de casos se genera desde el registro en el build
🌍 Multilingüismo (RU / ES / EN)
- Tres idiomas completos, autodetección de idioma por ruta
- hreflang entre idiomas, URLs canónicas, limpieza de parámetros de tracking
- Contenido propio en cada página, sin «tufo» a traducción automática
- Protección contra la filtración de un idioma en los campos de otro (en generación y validación)
🔍 SEO
- Componente
<SEO>/PageSeo: title, description, OG/Twitter, canonical, robots - sitemap.xml y robots.txt, generación del sitemap desde los datos en el build
- Grafo único Schema.org (@graph): Organization, WebSite, BreadcrumbList
- Prerenderizado de páginas a HTML estático para la indexación en buscadores
🤖 GEO / Búsqueda con IA
- llms.txt para controlar el acceso de los LLM al contenido
- Estructura de contenido pensada para ser citada en ChatGPT, Perplexity, AI Overviews
- JSON-LD renderizado en el DOM (fuera de Helmet) — visible para crawlers sin JS
- Schema.org Article + FAQPage en los artículos del blog
♿ Accesibilidad (WCAG 2.2 AA)
- Un solo h1 por pantalla (títulos visuales en div, el h1 SEO en sr-only)
- Estados de foco visibles, etiquetas aria en botones de icono, alt en las imágenes
- Contraste según AA, cierre de tooltips con Escape, aria-hidden en lo decorativo
- Respeto a prefers-reduced-motion en todas las animaciones (rotador, cinta, brillos)
⚡ Rendimiento
- Fuentes self-hosted (Manrope) sin Google Fonts render-blocking
- Carga lazy de imágenes, width/height contra saltos de layout (CLS)
- Code-splitting por rutas, animaciones solo con transform/opacity
- Prerender de páginas clave → primer pintado rápido
🎨 Sistema de diseño y animaciones
- Tokens de diseño (
--c-*), layout único de 1400px, tipografía Manrope - Proporciones por número áureo (φ≈1.618): ritmo, timings de brillos, columnas split
- Animaciones orquestadas: palabra → brillo de la palabra → brillos de botones → cambio
- Página online
/style-guidecomo fuente de verdad del estilo
🗂 Backend y API
- Express + Prisma ORM + MySQL, clave de servicio para las automatizaciones
- Endpoints de blog, generación de artículos, briefing y solicitudes
- Truncado de campos a los límites de la BD, regeneración idempotente por slug
- Registro de errores de frontend con throttling en el panel
🛠 Panel de administración
- Panel independiente de gestión de contenido, blog y solicitudes
- Pestañas de idioma al editar, estados draft/published
- Logs de errores de frontend, ajustes y operaciones de servicio
📦 DevOps y despliegue
- Frontend estático + backend en VPS, CI con autodespliegue por push
- Healthcheck tras el despliegue, copias de seguridad de la base
- Entornos separados (dev / prod), variables de entorno sin secretos en el código