AuraCare (Aura Wellness) is a high-end, cinematic web application that brings a premium, editorial sanctuary experience to the digital space. Built with cutting-edge web technologies, it features an expertly crafted "Curated Sanctuary" design system with fluid micro-interactions, stunning asymmetrical layouts, and a calming aesthetic.
- Cinematic Experience: Smooth, luxury-eased
[0.16, 1, 0.3, 1]Framer Motion animations create an interactive flow that feels alive. - Bespoke Design System: A Material Design 3-inspired semantic color system centered around muted earth tones and deep, restorative contrasts.
- Editorial Typography: Pairing Noto Serif for elegant headlines and Inter for readable, precise body text.
- Fluid & Responsive Architecture: Built to adapt seamlessly across all devices, featuring dynamic Top and Bottom Navigation bars.
- Next-Gen Tech Stack: Harnessing the absolute latest features of React 19 and Next.js 16 (App Router) combined with Tailwind CSS v4's new architecture.
- Framework: Next.js 16.2.4 (App Router)
- Library: React 19.2.4
- Language: TypeScript 5.x
- Styling: Tailwind CSS 4.x (Variables driven)
- Animations: Framer Motion 12.38.0
- Icons: Material Symbols Outlined
Follow these steps to run the AuraCare sanctuary on your local machine:
Make sure you have Node.js 20+ installed.
-
Clone the repository and navigate into the directory:
git clone <repository-url> cd auracare
-
Install dependencies:
npm install # or yarn install # or pnpm install
-
Run the development server:
npm run dev # or yarn dev # or pnpm dev
-
Open http://localhost:3000 to view the application.
auracare/
├── app/ # Next.js 16 App Router pages
│ ├── portal/ # User account and profile
│ ├── schedule/ # Booking and scheduling system
│ ├── store/ # Services and products
│ ├── globals.css # Core design tokens and Tailwind setup
│ └── layout.tsx # Global UI (Header, Footer, Navs)
├── components/ # Shared React components (TopAppBar, BottomNavBar)
└── public/ # Static assets
AuraCare embraces a "Curated Sanctuary" aesthetic. Every pixel is intentional.
- Colors: Dominated by earthy primary tones (
#6c5e06), deep secondaries, and pristine surface colors to simulate a calming real-world spa environment. - Animations: Standardized to use "staggered container" and "fade in up" variants to ensure elements materialize softly and gracefully.
- Interactions: Subtle magnetic hover effects and scale-downs on tap to provide premium tactile feedback.
"True luxury is the space to breathe deeply, surrounded by intentional beauty and unparalleled care."