FitLife is a static fitness-themed frontend landing page built with Svelte 5, TailwindCSS, and Svelte SPA Router. It is designed to showcase features, testimonials, pricing plans, and login/register forms in an interactive and responsive manner—ideal for demoing wellness or SaaS-based products.
FitLife was created to demonstrate a static landing page concept for health and fitness platforms. The project focuses on delivering an aesthetically pleasing, responsive, and single-page layout that highlights service benefits and encourages user engagement through CTAs and authentication UIs.
- Build a mobile-first, fully responsive landing page.
- Showcase a typical SaaS-style homepage with pricing, testimonials, and feature breakdowns.
- Simulate login and registration UI without backend logic.
- Apply TailwindCSS and Svelte transitions to demonstrate smooth interactive experience.
- Structuring modular UI components for dynamic sections like testimonials and pricing.
- Managing route transitions while preserving layout consistency.
- Applying utility-first Tailwind design within scoped Svelte components.
- Integrating scroll-based animations without breaking responsiveness.
Svelte 5 and svelte-spa-router were used to implement SPA navigation with lightweight performance. Components were built with bits-ui, styled via TailwindCSS, and enhanced using tailwind-variants for reusable variants. The project simulates form behavior using svelte-sonner for toast notifications and leverages AOS for elegant scroll effects.
- 🌟 Interactive Landing Page – Includes Hero, Features, Testimonials, Pricing, FAQ, and CTA sections.
- 📱 Fully Responsive Design – Mobile-first approach using TailwindCSS.
- 🧹 Single Page Application (SPA) – Routing handled via
svelte-spa-router. - 💬 Login & Register Forms – Frontend validation and toast demo using
svelte-sonner. - ✨ Scroll Animations – Powered by AOS for smooth section transitions.
- 🎨 Modern UI Styling – Utilizes
bits-ui,lucide-svelte, andtailwind-variantsfor modular component design.
- Svelte 5
- TailwindCSS
- Svelte SPA Router
- AOS (Animate on Scroll)
- Lucide Svelte Icons
- Svelte Sonner
- Bits UI
| Page | Path | Description |
|---|---|---|
| Home | / |
Main landing page |
| Login | /login |
Login form (demo only) |
| Register | /register |
Registration form (demo only) |
- Clone this repository
git clone https://github.com/yourusername/fitlife-landingpage.git
cd fitlife-landingpage- Install dependencies
npm install- Run the development server
npm run dev- Build for production
npm run build- Preview production build
npm run preview- The "Forgot Password" button only triggers a demo notification.
- All interactions like checkboxes and form validations utilize
svelte-sonnerfor toast feedback. - Login & Register forms are not connected to a backend; instead, they showcase frontend validation and success notifications.
- Medium: @foemry
- Instagram: @oemryfiqri
- Website: https://ahmadfiqrioemry.com
- LinkedIn: linkedin.com/in/ahmadfiqrioemry
This project is licensed under the MIT License – feel free to use and modify.
src/
├── components/ # UI components like Hero, CTA, Footer, etc.
├── pages/ # Main pages: Home, Login, Register
├── routes.ts # SPA routing setup
├── app.css # Global styles with Tailwind
└── main.ts # App entry point
