The platform we built for ourselves to our own drawings.

In brief: seo7.es is our own full-cycle platform. A trilingual website, a blog fed by an AI article factory, a portfolio of cases, a service calculator with a cart, an AI briefing and an admin panel all run on one backend. We built for ourselves exactly what we build for clients, so the studio’s showcase doubles as its working tool.

Client: SEO7’s own project · Site: https://seo7.es · Category: studio platform

What matters most in this project?

• Three languages out of the box: Russian, Spanish and English, with a language gate against mixed locales.
• A blog with an AI article factory tuned for classic search, answer boxes and neural networks.
• A service calculator with a cart: the client assembles a quote and sees the price before any conversation.
• Prerendered pages for search and AI crawlers, which barely execute JavaScript.
• Six service-area pages and a case portfolio with internal pages.
• Our own admin panel for content, the blog and enquiries.

What is the project built with?

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

How did it start?

The studio needed proof rather than a website. Anyone can show screenshots of other people’s projects; handing over a link to your own platform and saying “yours will work like this” is a different matter.

So our own platform was built by the same rules as the client ones: performance, accessibility, markup, three languages and prerendering for crawlers. Everything we normally defend in other people’s projects had to hold up on ours.

The second purpose is practical. The calculator produces a quote without us, the AI briefing captures the task in the client’s own words, the blog is filled by the article factory and enquiries land in the admin panel. The showcase works as a tool, not as a folder of screenshots.

What was built?

🌐 What pages does the site have?

• 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

🧭 How are the 6 service pages built?

• 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

🧮 How do the service calculator and cart work?

• 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

📝 How does the AI-powered blog work?

• 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

💼 How are the portfolio and cases presented?

• 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

🌍 How is the site 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)

🔍 What was done for 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

🤖 What was done for GEO and 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

♿ How is accessibility ensured (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)

⚡ How was the site made faster?

• 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

🎨 How do the design system and animations work?

• 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

🗂 What powers the 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

🛠 What does the admin panel do?

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

📦 How do DevOps and deployment work?

• 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

What is the result?