SpaGrow is a conversion-focused landing page for spa and wellness businesses worldwide. Built with a "Sage & Stone" design system and scroll-triggered storytelling, it guides visitors from awareness to action — turning passive browsers into paying clients.
- 🎨 Sage & Stone Design System: A curated, earthy colour palette with glassmorphism, soft shadows, and modern serif-sans typography pairing (Lora + Raleway).
- 🎭 Scroll-Triggered Storytelling: Framer Motion powers smooth scroll reveals, micro-interactions, and attention-guiding animations.
- 📱 Mobile-First UX: Seamless browsing and booking across all devices — because most spa clients discover you on their phone.
- 📊 Lead Generation Engine: Integrated contact form connected to Google Sheets via SheetDB API for instant lead capture.
- 🖼️ Portfolio Showcase: Live project previews (Aura Bern, Jenni Wellbeing) with hover effects and direct links.
- 🚀 Automated CI/CD: GitHub Actions build and deploy to GitHub Pages on every push to
main.
| Category | Technology |
|---|---|
| Framework | React 19 |
| Bundler | Vite 8 |
| Styling | Vanilla CSS (Sage & Stone Design System) |
| Animations | Framer Motion |
| Icons | Lucide React |
| Deployment | GitHub Pages |
| Lead Storage | SheetDB (Google Sheets Integration) |
-
Clone the repository:
git clone https://github.com/sahedalomsumit/spa-grow.git
-
Install dependencies:
npm install
-
Set up Environment Variables: Create a
.envfile in the root directory:VITE_SHEETDB_URL=your_sheetdb_api_endpoint
-
Start the development server:
npm run dev
To generate a production-ready bundle in the dist folder:
npm run buildspa-grow/
├── .github/workflows/ # CI/CD deployment pipeline
├── src/
│ ├── assets/ # Images (hero, profile, project screenshots, blob SVG)
│ ├── App.css # Component-specific style overrides
│ ├── App.jsx # All sections: Hero, Problem, Solution, Process, Projects, About, CTA
│ ├── index.css # Sage & Stone design system and global styles
│ └── main.jsx # React mounting point
├── index.html # SEO-optimised entry with meta tags
├── vite.config.js # Vite configuration
└── package.json # Scripts and dependencies
The page follows a deliberate conversion flow:
- Hero — Clear value proposition: more bookings without ads.
- Portfolio — Real project proof (Aura Bern, Jenni Wellbeing) builds credibility.
- Problem — Identifies the four hidden reasons spa websites lose clients.
- Solution — Shows what the redesign actually delivers (bookings, trust, mobile UX).
- Process — Transparent 7-step workflow removes fear of commitment.
- Limited Offer — 25% first-project discount creates urgency.
- Free Redesign — Zero-risk lead capture form with instant value.
- About — Personal story and direct contact info (email + WhatsApp).
- Final CTA — Before/after comparison reinforces the transformation.
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ by Sahed Alom Sumit