Cattleya Tattoo — studio website (Salamanca)

The brief #s1

A small studio running its bookings through Instagram DMs loses requests, can't quote consistently, and is invisible to local search. The goal was to fix all three without adding monthly cost: the only recurring expense is the domain.

• • Local SEO — be the first result for "tatuajes Salamanca" and related searches.
• • Structured intake — replace freeform DMs with a guided "tell us your idea in 3 steps" flow that funnels into WhatsApp today and a real form later.
• • Room to grow — a phased roadmap toward artist pages, portfolio, a booking form, auth + admin, and Stripe deposits, without rewrites.

Stack & decisions #s2

Next.js 16 App Router on Vercel, with an aggressively server-first posture: data and rendering happen on the server, and "use client" is reserved for the few interactions that genuinely need it. The landing ships almost no interactive JavaScript, which is most of why it feels instant.

TypeScript with explicit typing on domain-meaningful boundaries, Tailwind 4 for styling, pnpm, and Prettier + ESLint wired into git hooks so the repo stays consistent.

Local SEO from the first line #s3

SEO wasn't bolted on at the end — it shaped the first page. Everything a search engine and a social preview need is generated server-side and validated in production.

• • Metadata API: metadataBase, a title template + default, OpenGraph, Twitter summary_large_image, robots directives and a canonical alternate.
• • Structured data: TattooParlor JSON-LD (name, address, geo, telephone, sameAs, employee) plus FAQPage for the questions section.
• • Crawl surface: sitemap.ts and robots.ts serving /sitemap.xml and /robots.txt, with the domain property verified in Google Search Console.
• • Dynamic OG image rendered at request time with next/og ImageResponse (1200×630) — no static asset to keep in sync.

Performance #s4

Because the landing is server-rendered and ships almost no client JS, the numbers come out clean in production without special tuning.