SEO7.ES — a turnkey digital studio.

seo7.es is not a business-card site but our own full-cycle platform: a trilingual website, a blog with AI article generation tuned for SEO/AEO/GEO, a portfolio of cases, an interactive service calculator with a cart, an AI briefing and an admin panel — all on a single backend.

We built for ourselves what we build for clients: a website that brings in leads on its own. The showcase of our capabilities is, at the same time, the studio's working tool.

Tech stack

• Frontend: React 18 + Vite + TypeScript + Tailwind CSS v3
• Backend: Node.js (Express) + Prisma ORM + MySQL
• AI: cascaded article generation and translation, a language QA gate against locale mixing
• SEO infrastructure: SPA prerendering (SSG) for search engines and AI crawlers, sitemap, robots, llms.txt, JSON-LD Schema.org
• Design: golden ratio, framer-motion animations, self-hosted fonts (Manrope), no render-blocking
• Deployment: static frontend, backend on a VPS, CI with auto-deploy

Full list of features

🌐 Website and pages

• Home page with an animated hero: golden ratio, word rotator with a shine, running strip of real cases
• A “SEO7.ES” brand preloader with a moving shimmer before the app loads
• Separate mobile and desktop hero components (not a “squeezed desktop”)
• Top menu (CardNav) with locales, search and login, a logo that collapses on scroll
• “About the studio”, “Contact” pages, a footer with a white logo
• Scroll indicator and smooth transitions between sections
• Responsive at 375 / 768 / 1024 / 1440, no horizontal scroll

🧭 6 service pages

• Web development, SEO, AI-SEO, ads/traffic, AI bots, automation
• Each one: per-locale H2/lead, packages, a micro-service grid, a targeted CTA
• Tier-marked features (Start / Pro / Max) with a legend and colour scale
• Package expansion into 3–4 columns with a ~1 s animation, tooltips on stages
• Local selling points in topFeatures, measurable KPIs in the guarantees

🧮 Service calculator and cart

• Interactive selection of micro-services across 6 areas, price in real time
• A global “Your set” cart (PricingCartContext), a side panel (Drawer)
• Studio gifts: the cheapest of the chosen items + a base bonus pool
• Checkboxes on stage rows, deep-link to the expanded service card
• A /precios page with 6 areas and a special-offers table

📝 Blog powered by AI

• Automatic article generation in the “etalon” format: SEO + AEO + GEO in one structure
• ES base language → translation into RU/EN with a language QA gate (Cyrillic detection in es/en)
• Atomic 40–60-word blocks, a Quick Answer, definition boxes, expert quotes
• An FAQ block with FAQPage Schema, related articles, internal linking
• An article = one record with three locales (etalonData), draft/published
• Automated publishing, cover generation, scheduled jobs

💼 Portfolio and cases

• A project showcase: cards with real screenshots (laptop + phone, DeviceDuo)
• Case page: split-hero, 2×2 highlights, a device block, a feature list, FAQ
• A running project strip on the home page (desktop — hover tooltips, mobile — swipe)
• A /portfolio listing with JSON-LD ItemList / CollectionPage
• The case sitemap is generated from the registry at build time

🌍 Multilingual (RU / ES / EN)

• Three full locales, language auto-detection by route
• hreflang between locales, canonical URLs, tracking-parameter cleanup
• Dedicated content on every page, no machine-translation feel
• Protection against one language leaking into another's fields (at generation and validation)

🔍 SEO

• A <SEO>/PageSeo component: title, description, OG/Twitter, canonical, robots
• sitemap.xml and robots.txt, sitemap generated from the data at build time
• A single Schema.org graph (@graph): Organization, WebSite, BreadcrumbList
• Page prerendering into static HTML for search-engine indexing

🤖 GEO / AI search

• llms.txt to control LLM access to the content
• Content structure tuned for citability in ChatGPT, Perplexity, AI Overviews
• JSON-LD rendered into the DOM (outside Helmet) — visible to crawlers without JS
• Schema.org Article + FAQPage on blog articles

♿ Accessibility (WCAG 2.2 AA)

• One h1 per screen (visual headings are divs, the SEO h1 is sr-only)
• Visible focus states, aria labels on icon buttons, alt on images
• AA contrast, tooltips dismissable with Escape, aria-hidden on decoration
• prefers-reduced-motion respected across all animations (rotator, strip, shines)

⚡ Performance

• Self-hosted fonts (Manrope) with no render-blocking Google Fonts
• Lazy image loading, width/height against layout shift (CLS)
• Route-level code-splitting, animations only on transform/opacity
• Prerender of key pages → a fast first paint

🎨 Design system and animations

• Design tokens (--c-*), a single 1400px layout, Manrope typography
• Golden-ratio proportions (φ≈1.618): rhythm, shine timings, split columns
• Orchestrated animations: word → word shine → button shines → change
• An online /style-guide page as the source of truth for the style

🗂 Backend and API

• Express + Prisma ORM + MySQL, a service key for automations
• Endpoints for the blog, article generation, briefing and requests
• Field truncation to DB limits, idempotent regeneration by slug
• Frontend error logging with throttling into the admin

🛠 Admin panel

• A separate panel for content, blog and lead management
• Locale tabs while editing, draft/published statuses
• Frontend error logs, settings and service operations

📦 DevOps and deployment

• Static frontend + backend on a VPS, CI with auto-deploy on push
• Healthcheck after deploy, database backups
• Separate environments (dev / prod), env variables with no secrets in the code