Hold on. Wait a minute.
Setting up your experience...
logo
[Project]

JM Wellness Centre Web Application

ByVidhura Neethika
CategoryWeb
Full ProjectView
JM Wellness Centre Web Application
This project is the official web application for JM Wellness Centre, a luxury Ayurvedic spa and wellness sanctuary in Sri Lanka. It provides a serene, comprehensive digital platform to showcase authentic Ayurvedic therapies, certified massage treatments, signature packages, and customized wellness experiences. Designed with a focus on deep relaxation, natural aesthetics, and user accessibility, the website features an interactive online booking system with therapist gender selection and door-to-door transport requests.

Problem Statement

Traditional wellness centers often lack a modern, cohesive digital presence that effectively communicates authentic healing practices and luxury sanctuary branding. Potential clients struggled to explore specialized Ayurvedic treatments (such as Shirodhara and Swedana herbal steam baths), customize therapist preferences, or request seamless transport services on mobile devices.

Goals & Objectives

The main objective was to create a modern, high-performance, and visually captivating website for JM Wellness Centre. Key goals included developing a detailed service & package catalog with category filtering, engineering an instant multi-step booking modal integrated with FormSubmit AJAX and WhatsApp fallback, allowing therapist gender preference selection, enabling luxury pick & drop requests, and implementing smooth scroll kinetics using Lenis and Framer Motion.

My Role

As the sole web developer and UI designer, I designed and developed the entire application from concept to deployment. This included crafting the luxury brand layout, building modular Next.js components, styling with Tailwind CSS v4, programming interactive state management for booking workflows, and optimizing responsiveness across all screen sizes.

Challenge and Solutions

The key challenge was capturing the peaceful essence of an authentic Ayurvedic sanctuary while maintaining fast page performance and dynamic interactive workflows. The solution leveraged Next.js 16 (App Router) and React 19 for a fast, modular architecture, Tailwind CSS v4 for elegant, custom styling, Framer Motion for scroll-triggered micro-animations, Lenis for smooth scrolling physics, and Radix UI primitives for accessible form controls.

Users & Characteristics

Sanctuary Clients & VisitorsClients use the web app to browse Ayurvedic treatment catalogs, filter services by type (massage, ayurveda, facial/body), review signature wellness packages, select preferred therapist gender (male or female), request pick & drop transport, and instantly schedule appointments via online booking or WhatsApp.
Sanctuary ManagementSanctuary administrators receive comprehensive, real-time booking notifications complete with client contact details, selected treatments, appointment time slots, therapist gender preferences, and transport pick-up locations for instant confirmation.

Process of the Project

  1. 01

    Requirement Analysis and Sanctuary Strategy

    Defined the digital scope for JM Wellness Centre by auditing client booking flows, Ayurvedic treatment categories, and luxury spa visual standards. Created a cohesive design language using warm natural tones, serene typography (Noto Serif Display & Plus Jakarta Sans), and intuitive service cards.
  2. 02

    Design & Component Architecture

    Built a modern UI design using Next.js App Router and Tailwind CSS v4. Developed reusable components for service filter tabs, signature package showcases, real result highlights, client testimonials, and accessible modal dialogs.
  3. 03

    Implementation & Booking Integration

    Implemented the frontend using Next.js 16, React 19, and TypeScript. Integrated Framer Motion for scroll animations and Lenis for smooth kinetic scrolling. Built an instant booking modal with dual notification pathways via FormSubmit API and direct WhatsApp hotline connection.
Sanctuary story
Holistic yoga
Modal
About us page
packages

Key Features

Authentic Ayurvedic Service Showcase
Interactive Category Filtering
Signature Wellness Packages
Multi-Step Booking Modal
Therapist Gender Selection (Male/Female)
Door-to-Door Pick & Drop Transport Requests
Lenis Smooth Scroll Kinetics
FormSubmit & WhatsApp Booking Fallback
Responsive Luxury UI/UX

Technologies and Frameworks

HTML
CSS
NextJS
TypeScript
React
NodeJS
Tailwind
Framer Motion
Lenis
Radix UI
Lucide Icons

Tools

Antigravity IDE
Visual Studio Code

Tags

#web design#web development#ayurveda#spa website#wellness center#booking system#nextjs

Conclusion

The JM Wellness Centre Web Application successfully bridges traditional Ayurvedic healing traditions with modern web development. Its tranquil aesthetic, smooth kinetic interactions, comprehensive service showcase, and user-centric booking modal establish a premium digital identity for the sanctuary.
View full project

Contact Me

Let's build something amazing together

Have an Idea? Let’s Make it Real

I'm currently available for freelance projects and open to full-time opportunities. If you have a project that needs some creative touch, or just want to say hi, feel free to drop a message.

Email Addressvidhuraneethika000@gmail.com
Phone Number+94 76 18 21 354
LocationKurunegala, Sri Lanka
Vidhura