The platform we built for ourselves to our own drawings.

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

The short version

• 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.

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

How it started

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.

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

Results