Raunak Arts — a static Next.js site for an interior design and contracting studio

Raunak Arts has designed and built homes, false ceilings, kitchens, showrooms and restaurants since 2018, but its presence was an Instagram feed and a directory listing. The studio needed a site that presents design and contracting as one service, shows its own project photographs, and turns interest into a conversation — without a server, a CMS or a login for the owner to look after.

Client site · Interior designer & contractor, Rewa (MP)

Approach

• Treat the site as a static product: every page is a server component and every fact — phones, address, listing links, project types, materials, navigation — lives in one file, so nothing about the business is scattered through markup.
• Own the design system in one stylesheet: tokens, four surface themes (forest, deep, bone, sand), type, buttons, header, dialogs and sections. Tailwind is loaded without preflight so the stylesheet keeps control of base styles.
• Keep motion in a small vanilla script — preloader and page curtain, hero slideshow, scroll reveals, a pinned horizontal gallery, parallax, lightbox, project filters — and use React only for islands adapted from 21st.dev: text reveal, number ticker, marquee, accordion FAQ, image comparison and a sticky process scroll.
• Route enquiries to WhatsApp: the enquiry panel preselects the type of space, validates in the browser and opens a prefilled chat on the visitor's own phone.

A statically rendered Next.js 16 app. Server components render every route from typed content files; one stylesheet carries the design system; a cached vanilla script adds the motion layer and leaves the React islands alone. There is no API and no database — the enquiry form hands off to WhatsApp.

• 01Next.js 16 App Router with React 19; Prata, Manrope and Monsieur La Doulaise self-hosted through next/font.
• 02Six services, the studio's own site photographs and a twelve-post Instagram grid defined in typed content files, each with responsive image sets sized for its use (photos at 1800 and 1000 px, grid thumbnails at 420 px, service thumbnails at 240 px).
• 03Dialogs make the page behind them inert and keep Tab inside; in-page links move keyboard focus; touch screens get in-view states in place of hover.
• 04Security headers in next.config: a Content-Security-Policy, nosniff, referrer and permissions policies, HSTS, no X-Powered-By, and a week of browser cache for public assets.
• 05Per-page metadata with canonical URLs and Open Graph images, a sitemap and robots; a production audit covered build, lint, a full-site crawl, HTML validation, CSP violations, keyboard use of the dialogs, JavaScript-off and reduced-motion rendering, and Lighthouse on a simulated slow-4G phone.

raunakarts.up.railway.app

This project did not use AI — a deliberate choice. Not every system needs a model.

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS 4
• Motion
• next/font
• Railway

Outcome to be added. Results are only published here when they can be stated factually — no estimated metrics.

• A one-file content model is what lets a small business keep its own site accurate — the phone number changes in one place.
• Vanilla motion plus a few React islands is lighter, and easier to audit, than making the whole page a client bundle.
• WhatsApp is the right 'backend' for a local studio: the enquiry lands where the owner already answers customers.