Qevron — Architecture Studio Next.js Template · Pixels71
Qevron — Architecture Studio Next.js Template
A Next.js template for architecture and interior design studios, with a floor plan that draws itself on scroll, WebGL project cards and a map view of the work.
Or get this and every other template for $99 with the All-Access Pass.
About this template
About this template
QEVRØN is a Next.js template for architecture practices, interior designers and landscape studios. Instrument Serif accents sit next to light Archivo and small Geist Mono labels on white, with one burnt orange accent and large building photography.
Projects, articles and the two legal pages are Markdown files, and the copy for every other page lives in typed data files, so the site grows without touching a component. It is built with Next.js 16 (App Router), React 19, Tailwind CSS v4, GSAP, Lenis and TypeScript.
Pages
Home: intro loader, full-screen hero whose backdrop scales and blurs as you scroll, about statement, scattered project cards, a floor plan that assembles on scroll, client logo marquee, services, testimonials on a hanging wire, awards list, journal, FAQ and a call to action.
Work: nine projects in grid, list and map views, with filters for Residential, Hospitality, Cultural and Interiors.
Project detail: header and hero image, facts table, intro, image pair, client quote, detail split, credits and a next-project link.
Studio: story with animated numbers, values and the team.
Services: four disciplines, each with its deliverables, plus an FAQ.
Journal: featured article and a grid of the other articles, nine in all.
Article: article header, Markdown body and related articles.
Contact: enquiry form with selectable pills, studio details and a Google Maps embed that switches between two studios.
Terms and Privacy: two legal pages written in Markdown.
404: a designed not-found page.
Built in
Floor plan on scroll: an SVG courtyard house assembles from its walls, windows, furniture and labels in a sticky section.
WebGL project cards: the home page project images tilt and bend with the pointer on desktop.
Three views of the work: grid, list and an inline SVG map of Europe with pins, plus category filters.
Hanging testimonials: cards hang from a wire that bends under the pointer, with autoplay that pauses on hover.
Scroll motion: GSAP ScrollTrigger reveals, text and image reveals, drawn arrows, NumberFlow counters and Lenis smooth scroll.
Reduced motion: visitors who ask for less motion get a still page with all content visible.
Easy to edit
Site name, URL, contact details and footer labels are in src/data/site.ts, menus in src/data/menu.ts, and the copy for each page in its own file in src/data/ (home.ts, studio.ts, services-page.ts and so on). Colours, breakpoints and easing are tokens in src/styles/variable.css, and the fonts load through next/font in src/utils/font.ts.
Add one Markdown file to src/data/work/ or src/data/journal/ and the build gives it a page, a listing card and a sitemap entry. Each page sets its own title, description, canonical URL and Open Graph tags, and the app writes sitemap.xml and robots.txt.
Good to know
Images: the download has grey placeholders at the exact demo sizes, so the layout holds until you add your own.
Forms: the contact, footer and header forms are front end only. Connect them to your form service.
Output: every route is prerendered at build time.
Hosting: Vercel, any Node host, or Cloudflare Workers through OpenNext (wrangler.jsonc is included).
Requirements: Node.js 20.9 or newer. npm and Bun both work.
The download includes a documentation page that covers setup, content, tokens, images, motion and deployment.
