A beautifully designed workout split application featuring a modern, clean aesthetic inspired by Nexus UI. Built with React, Tailwind CSS, and Radix UI components for a premium user experience.
- Dark Theme: Professional dark color scheme as default
- Gradient Effects: Smooth color transitions with subtle glows
- Typography: Clean Inter font with proper hierarchy
- Color Palette: Primary purple-blue (#6366F1) with accent colors
- Spacing: Generous whitespace for modern feel
- Animations: Smooth transitions and micro-interactions
- Navigation: Fixed navbar with smooth animations and theme toggle
- Hero Section: Large impactful headings with gradient text effects
- Cards: Clean workout cards with hover effects and shadows
- Accordion: Expandable workout sections for organization
- Modals: Exercise detail overlays with backdrop blur
- Responsive: Mobile-first responsive design
- React 19 - Latest React with modern hooks
- Tailwind CSS - Utility-first styling system
- Radix UI - Accessible component primitives
- Framer Motion - Smooth animations and transitions
- Vite - Fast build tool and development server
- Lucide React - Beautiful modern icons
- Push Day - Chest, shoulders, and triceps workouts
- Pull Day - Back and biceps training routines
- Leg Day - Complete lower body development
- Interactive Exercise Library - Detailed exercise information
- Responsive Design - Optimized for all devices
- Dark/Light Theme - Toggle between themes
- Smooth Animations - Enhanced user interactions
- Accessibility - WCAG compliant components
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/kunal4419/Workout-Split-Web.git cd workout-split -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser
http://localhost:5173
npm run build
npm run previewsrc/
├── components/ # Reusable UI components
│ ├── Navbar.jsx # Navigation with theme toggle
│ └── Footer.jsx # Footer with links
├── pages/ # Page components
│ ├── Home.jsx # Hero section with features
│ ├── Workouts.jsx # Accordion workout selection
│ ├── PushDay.jsx # Push workout details
│ ├── PullDay.jsx # Pull workout details
│ └── LegDay.jsx # Leg workout details
├── lib/ # Utilities
│ └── utils.js # Helper functions
├── App.jsx # Main app component
├── main.jsx # Entry point
└── index.css # Global styles
Primary: #6366F1 (Indigo)
Background: #0a0a0a (Deep Black)
Secondary: #111111 (Dark Gray)
Accent: #18181b (Charcoal)
Text: #ffffff (White)
Muted: #a1a1aa (Light Gray)- Push Day: Red to Pink gradient
- Pull Day: Blue to Cyan gradient
- Leg Day: Green to Emerald gradient
- Hero section with gradient text effects
- Feature cards highlighting workout splits
- Stats display and call-to-action
- Background animations and effects
- Accordion-style workout selection
- Exercise counts and difficulty indicators
- Expandable details with tips and duration
- Smooth hover and expand animations
- Exercise library with modal details
- Sets, reps, and muscle targeting info
- Exercise tips and proper form guidance
- Color-coded by workout type
The design system is built with CSS custom properties:
- Colors: Defined in
tailwind.config.js - Animations: Custom keyframes and transitions
- Components: Utility classes in
lib/utils.js - Spacing: Consistent scale using Tailwind
- Build the project:
npm run build - Deploy the
distfolder to Netlify - Configure build command:
npm run build - Set publish directory:
dist
The app works with any static hosting service:
- Vercel
- GitHub Pages
- Firebase Hosting
- AWS S3 + CloudFront
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
MIT License - see LICENSE file for details
- Design inspired by Nexus UI
- Icons by Lucide
- Fonts by Google Fonts