Yakuso Wellness is a production-ready, premium informational website for a luxury Ayurvedic wellness brand. It has five fully responsive pages (Home, About, Services, Gallery, Contact) built around enquiry-driven conversations rather than online sales — visitors browse the brand's philosophy, services and botanical story, then get in touch. It includes a working contact form connected to a real backend API and database, with validation, rate limiting and error handling, plus SEO, accessibility and performance work throughout.

Full version (for detailed submission fields)

What we built

A premium, editorial-style website for YAKUSO WELLNESS — a luxury Ayurvedic wellness brand featuring sacred botanicals, Indian heritage, and a modern premium aesthetic. The site is informational and enquiry-driven by design: there is no e-commerce anywhere (no cart, checkout, payments, prices, or products). The goal is brand credibility and conversation — visitors learn about the services and then enquire.

Pages (5)

Home (/) — Hero with brand positioning, brand introduction, preview of five service areas (Ayurvedic Wellness, Botanical Skincare, Hair & Scalp Wellness, Herbal Formulations, Wellness Consultation), "Why Yakuso" principles, heritage story, botanical provenance, testimonials placeholder, and a closing enquiry call-to-action.

About (/about) — Brand story, philosophy, mission, vision, approach, and heritage sections.

Services (/services) — An informational showcase of the five service areas presented as editorial articles — explicitly not a shop. Each section links to the enquiry form.

Gallery (/gallery) — A responsive masonry-style editorial photo grid with a fully accessible lightbox (keyboard arrow navigation, Escape to close, focus management).

Contact (/contact) — Contact details, enquiry form (Name, Email, Phone, Area of interest, Message) with client-side validation and inline error messages, map section, and social links.

Design system

A consistent luxury visual language: warm alabaster background, deep forest greens with champagne-gold accents, elegant serif display type (Cormorant Garamond) paired with a clean sans-serif (Plus Jakarta Sans). Custom photography (10 AI-generated botanical still-life images) keeps the look cohesive with no invented people or products. Subtle reveal animations that respect users who prefer reduced motion.

Backend & data

REST API with a /api/health endpoint (reports app + database status) and a /api/contact endpoint that stores enquiries in a PostgreSQL database (Contact model: name, email, phone, message, timestamp).

Security: input validation on both client and server, body size limits, same-origin request checks, per-visitor rate limiting (5 enquiries per 10 minutes), centralized error handling, and strict row-level security on the database so only the trusted server can write enquiries.

Content separation: all copy, services, gallery and contact data live in separate data files, so text can be replaced without touching the design.

Honesty & content policy

Because no verified business details existed (address, phone, email, hours, reviews, founder info), every unknown is a clearly marked placeholder — nothing was invented. Testimonials explicitly state no reviews are published yet. This is deliberate: no fake certifications, awards, statistics, or medical claims.

SEO, accessibility & performance

Unique titles, descriptions, canonical URLs and Open Graph tags on every page; sitemap, robots.txt, favicon and share image.

Semantic HTML, keyboard navigation throughout (skip link, focus trapping in the mobile menu and lightbox), labelled form fields with inline errors, alt text on all images, and reduced-motion support.

Optimized images (30–45% smaller, lazy-loaded below the fold), lean JavaScript bundle, and a clean production build.

Quality assurance

All five pages tested across mobile (320px), tablet (768px) and desktop (1440px+) viewports. The complete enquiry flow was tested end to end — form validation, submission, database storage, success/error/rate-limit states — with no errors in the production build.

What's pending before launch

Real business details (phone, email, address, hours, social links) to replace the placeholders, and optionally storing the form's "Area of interest" selection in the database.

Tech-stack version (if the form asks technically)

Frontend: React 19 with TanStack Start (full-stack React framework with SSR), TypeScript, Tailwind CSS v4, shadcn-style UI components.

Backend: Server functions and server routes (REST contract: GET /api/health, POST /api/contact) running on an edge runtime — chosen deliberately because a Node/Express server can't run there; the routes deliver the same REST architecture the original plan called for.

Database: Cloud-hosted PostgreSQL with a contacts table (UUID, validation constraints, timestamps, index) and row-level security; writes go through the trusted server only.

Validation: Zod schemas shared between client-side form validation and server-side API validation.

Quality: Type-checked codebase, production build verified, Lighthouse-minded optimizations (lazy images, minimal client JS, preloaded fonts).