Akrati Jain Interiors
A 7-page marketing site for an interior design and civil consultancy studio in Depalpur, Indore, with a 4-theme switcher (Luxury, Minimal, Earthy, Bold) persisted via localStorage and a zero-flash reload.
Overview
Akrati Jain Interiors is a static, 7-page marketing site (Home, About, Services, Portfolio, Testimonials, FAQ, Contact) for an interior design and civil consultancy studio in Depalpur, Indore. Its defining feature is a 4-theme switcher (Luxury: noir and antique gold; Minimal: warm linen and stone; Earthy: terracotta and olive; Bold: emerald, brass, and ruby), letting the same layout present as boutique-luxury or approachable-minimal depending on the visitor, persisted via localStorage with an inline script in layout.tsx that sets data-theme before hydration so there's no flash of the wrong theme on reload.
Why it was built
A client project for a small interior design and civil consultancy studio with no prior web presence, brought on for both product design and development. Interior design is a visually subjective category where different clients respond to different aesthetics, which drove the decision to build a real multi-theme system rather than one fixed look, letting the site adapt to who's viewing it rather than betting everything on a single design direction.
4-Theme System, Zero-Flash
ThemeContext.tsx exposes useTheme() backed by a data-theme attribute on <html>, set synchronously by an inline script before React hydrates, so there's no visible flash of the default theme before the stored preference applies.
7 Fully-Built Pages
Home, About, Services, Portfolio, Testimonials, FAQ, and Contact are all real routes under src/app, each with its own metadata, rather than a single-page site with anchor-link sections.
No-Backend Contact Path
Contact is handled entirely through a floating WhatsApp button, Google Maps embed, and tap-to-call/email links rather than a form, so the site has no backend, no API route, and no environment variables required at all.
Tech Breakdown
A fully static 7-page site with no dynamic data needs no server at runtime; per-route metadata and generated sitemap/robots files come near-free from the framework.
ThemeContext.tsx keeps React state in sync with the DOM attribute the inline script already set, so components can read the active theme in JS (for the theme swatch picker UI) while the actual styling stays pure CSS custom properties.
Services, portfolio categories, testimonials, and FAQs live in typed arrays rather than scattered across components, so a content update (like swapping placeholder portfolio images for real photography before launch) touches one file.
Used for scroll-reveal animation across sections; kept as the single animation dependency rather than mixing CSS keyframes and a JS library for different pages.
- 1
A 4-theme system means every color reference across 7 pages and roughly a dozen components has to route through CSS custom properties rather than hardcoded Tailwind color classes, or themes partially break on any page that skipped the convention.
- 2
Preventing a flash of the wrong theme on load requires the theme to be set before React hydrates, which means an inline script in layout.tsx reading localStorage directly, outside of any component lifecycle.
Real portfolio photography needs to replace the icon-based placeholder tiles, and the illustrative testimonials need to be swapped for real client feedback with full attribution, both called out explicitly as pre-launch items rather than done.
See it live
Check out the deployed site.