feel free to hit this link
[https://arcana-architecture.netlify.app/

Most architecture studio sites open the same way: a full-bleed hero photo, a headline in a serif font, a grid of project thumbnails. It's fine. It's also completely forgettable. ARCANA opens differently — with a technical project sheet, coordinates and dimensions ticking past like a real drafting table, and a scroll sequence where a hand-drawn plan gradually resolves into a photograph of the finished building. It's the kind of first impression that makes a visitor stop scrolling for a second and actually look. Everything after that opening is built to keep that feeling going instead of dropping back into generic template territory.

The template ships as a complete seven-page Next.js site. The Home page carries the signature Blueprint → Reality scroll interaction, an editorial project index, material studies, studio philosophy, selected work and a journal teaser. The Projects index presents studio work as a dense, editorial list rather than a generic card grid. Each Project detail page is a full case study — project data, concept statement, and an interactive Plan / Elevation / Section / Detail drawing viewer that lets visitors flip between technical drawings the way an architect would pin them to a wall, plus the materials used and photography. Studio covers practice overview and a horizontal archive of studio artifacts, Approach walks through the five-stage methodology (Observe, Define, Draw, Test, Build), Journal holds studio notes on material and process, and Contact is a fully validated inquiry form with proper loading/success/error states.

Nothing here requires touching a backend. Every piece of content — projects, journal entries, materials, studio copy, navigation labels — lives in plain, readable TypeScript files under data/, so renaming a project, swapping a material, or rewriting the studio bio is a text edit, not a rebuild. Images are pulled through a small URL-builder helper so you can point any entry at your own photography or a hosted file in public/ in seconds. Colors are centralized as CSS custom properties, fonts are swapped in one file, and navigation is one array — the kind of structure that makes customization approachable even if you're not deeply fluent in React.

Under the hood: Next.js 16 (App Router) + TypeScript, Tailwind CSS 4, Framer Motion for UI and page transitions, GSAP + ScrollTrigger driving the signature scroll sequence, Lenis for smooth scrolling, and React Hook Form + Zod for contact form validation. The whole experience respects prefers-reduced-motion (GSAP/Lenis skip entirely, Framer transitions collapse), is built with accessibility in mind (real alt text, :focus-visible states, semantic markup), and is tuned for strong Core Web Vitals and clean SEO metadata out of the box. What you get: the full source code, seven fully built pages, all components and animations, self-hosted fonts, a written customer guide covering every editable piece, and a one-click Netlify deploy config (also deploys cleanly on Vercel or any Next.js host). What you're building on: a static, no-backend template — see Additional Details below for exactly what's not included.