Waida Studio
An editorial, portfolio-first website for your studio — live in an afternoon.
STUDIO.ARCH is a complete architecture and interior-design studio theme built on Astro 7. Every page pre-renders to static HTML, so it loads instantly and deploys anywhere — and it ships zero framework JavaScript, just one small vanilla script.
Live demo: https://studioarch-astro.vercel.app
WHAT'S INSIDE
• 19 page templates — 40 static pages per build: home, about, projects, services, journal, pricing, store, contact, checkout, style guide, license, changelog, 401, 404
• Portfolio — 8 project case studies with a detail template: full-bleed hero, a Date / Location / Service / Client fact row, rich-text body and a three-image gallery closing on a "Get Started" tile. The grid layout itself is data, so rearranging the portfolio is an edit, not a refactor
• Services — 6 service pages, each a Markdown file split across the design's three rich-text regions
• Journal — 6 MDX posts with date, read-time and category meta, drop-cap openers and a frontmatter term list, plus 3 filterable category pages
• Commerce pages — two plan detail pages with an exclusive FAQ accordion, a working cart with modal drawer, checkout, PayPal checkout and order confirmation (localStorage-based; wire up Stripe or Lemon Squeezy when you're ready to sell)
• A store page — priced listings across four discipline tabs: interior, exterior, urban and office design
• Motion that earns its keep — a logo preloader curtain, the signature character-by-character split-text reveals, scroll reveals, magnetic buttons that track the cursor, project cards that scale as they pass, unrolling service panels and a testimonial carousel — all in one vanilla script, all respecting prefers-reduced-motion
• Edit content, not code — journal posts, projects and services are Markdown files with frontmatter; the grid layouts, category tabs, store listings and plans are JSON. Add an entry and the listings, detail pages and category pages update automatically
• Design-token system — the full palette, type scale (h1 100px down to small text 14px), line-height, weight, letter-spacing and spacing scales are CSS custom properties in one :root block; re-theme the whole site from there, with /style-guide previewing the result. No utility framework to learn
• Self-hosted fonts — Creato Display in six weights and styles as woff2, no CDN requests
• TypeScript throughout, zod-validated content schemas
TECH STACK
Astro 7 · MDX · TypeScript · the template's own hand-crafted CSS · one vanilla interaction script — no React, no Tailwind, no framework runtime
REQUIREMENTS
Node.js 22.12+ and npm. Deploys to Vercel, Netlify, Cloudflare Pages, GitHub Pages, or any static host — no server needed.
LICENSE
One license = one end product (your site or a client's). Building multiple sites? Buy one license per project. You may not resell or redistribute the source.
SUPPORT
Questions or stuck on setup? Email contact@kaziehsan.com — we answer every buyer.