Spaço Bellas 💜

Spaço Bellas is a professional, high-performance web platform for a luxury Beauty & Wellness Spa. Built with a modern tech stack, it features multiple specialized landing pages, a membership program, and corporate wellness solutions, all optimized for conversion and mobile-first user experience.

🚀 Key Features

• Mobile-First Linktree Entry: A centralized hub for social media traffic, directing users to specific services and contact channels.
• Specialized Landing Pages: Dedicated experiences for:
  • Spa Day Individual: Basic and Premium solo relaxation packages.
  • Spa Day Couples: Romantic and immersive experiences for two.
  • Spa Day Celebrities: The flagship "Star Day" experience with professional photo shoots and VIP treatment.
  • Spa Day Brides: Custom "Dia da Noiva" packages for the big day.
• VIP Bellas Membership: A recurring subscription program ("Mensal Bellas") offering exclusive benefits and monthly treatments.
• Bella Empresas: B2B wellness plans designed for corporate teams to boost performance and employee satisfaction.
• Seamless WhatsApp Integration: Context-aware redirection to WhatsApp with pre-filled messages based on the selected package.
• Modern UI/UX: Smooth animations with Framer Motion, accessible components via Radix UI, and a refined aesthetic.

🛠 Tech Stack

Frontend

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS (Utility-first CSS)
• Animations: Framer Motion
• Components: Radix UI (Headless UI primitives) & Lucide React (Icons)
• Routing: wouter & React Router
• State Management: TanStack Query (React Query)
• Forms: React Hook Form with Zod validation

Backend & Database (Infrastructure)

• ORM: Drizzle ORM
• Database: PostgreSQL (Supabase)
• Server: Express.js (API & Middleware support)

📂 Project Structure

The project follows a Feature-Based Architecture, making it highly scalable and easy to maintain.

src/
├── assets/             # Global images, brand assets, and styling
├── components/         # Shared UI components and layout elements
│   ├── layout/         # Header, Footer
│   ├── shared/         # Reusable business components (CTA, Testimonials)
│   └── ui/             # Atomic Shadcn-like UI primitives (Button, Card, etc.)
├── config/             # Global constants and contact configurations
├── data/               # Static content for packages, plans, and testimonials
├── features/           # Domain-driven features (The heart of the app)
│   ├── corporate/      # B2B "Bella Empresas" logic and components
│   ├── home/           # Institutional Home page features
│   ├── membership/     # "VIP Bellas" subscription program
│   └── spa-day/        # Specialized Spa Day components
├── hooks/              # Custom React hooks (scroll-spy, intersection-observer)
├── lib/                # Third-party library configurations (utils, queryClient)
└── pages/              # Route-level components

🏁 Getting Started

Prerequisites

• Node.js (LTS or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/emanuellcs/spaco-bellas.git
   cd spaco-bellas

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Building for Production

npm run build

Developed with 💜 for Spaço Bellas.