A modern, sophisticated homepage for a luxury shoe store with an elegant, airy design inspired by high-end fashion sites.
AeroStride - A clean, open design that focuses on bold imagery, soft gradients, and smooth animations to make products feel premium without being too busy.
- Full-screen lifestyle concept with soft blur overlays
- Elegant typography with "Style in Every Step" tagline
- Single call-to-action: "Shop the Collection"
- Soft background gradients and floating elements
- Smooth fade-in animations
- Horizontal scroll layout (like Apple's site) with large, minimal product cards
- Each card features shoe emojis on clean white backgrounds
- Product names, categories, descriptions, and prices
- Subtle drop shadows and hover lift effects
- Navigation arrows for easy browsing
- Curated fashion looks for different occasions
- Background with soft gradient overlays
- Glass-morphism effect with backdrop blur
- Hover animations and smooth transitions
- Smooth hover effects with product lifting
- Gentle shadow expansion on interaction
- Smooth page transitions between sections
- Responsive design for all devices
- Off-White: #FAFAFA
- Light Grey: #F5F5F5
- Soft Beige: #F5F5DC
- Soft Peach: #FFE4D6
- Gentle Lavender: #E6E6FA
- Light Blue: #E6F3FF
- Accent Peach: #FFB6A3
- Accent Lavender: #B8A9C9
- Accent Blue: #A8C5E6
- Dark Charcoal: #2C2C2C (primary text)
- Warm Grey: #8A8A8A (secondary text)
- Headings: Playfair Display (serif) - elegant and sophisticated
- Body Text: Inter (sans-serif) - modern and highly readable
- Font Weights: 300, 400, 500, 600, 700 for flexibility
- Fade In: Smooth entrance animations for sections
- Slide Up: Gentle upward movements
- Lift Effect: Hover animations with shadow expansion
- Float: Subtle floating animations for background elements
- Gentle Bounce: Soft bouncing effects for interactive elements
- Smooth Transitions: 300ms cubic-bezier transitions throughout
- Built with React 18 and Vite
- Tailwind CSS with custom color palette and animations
- Responsive design with mobile-first approach
- Custom CSS with glass-morphism effects
- Google Fonts integration
- Smooth scrolling and focus states
- Mobile-first approach
- Responsive grid layouts
- Mobile navigation menu
- Optimized for all screen sizes
- Touch-friendly interactions
- Navigate to the client directory
- Install dependencies:
npm install - Start development server:
npm run dev - Build for production:
npm run build
- Lifestyle-focused hero section
- Soft gradient backgrounds
- Floating abstract elements
- Elegant call-to-action
- Horizontal scrolling product grid
- Navigation arrows
- Hover lift effects
- Product information cards
- Weekly fashion curation
- Glass-morphism design
- Background overlays
- Interactive elements
- Transparent navbar with scroll effects
- Mobile-responsive menu
- Comprehensive footer with newsletter signup
- Social media integration
- Real product image integration
- Video backgrounds for style picks
- Advanced filtering and search
- Customer reviews and ratings
- Size guide and fitting tools
- Wishlist functionality
- Advanced cart system
I've made the theme easily customizable by modifying:
tailwind.config.js- Custom colors and animationssrc/index.css- Global styles and custom CSS- Component files for specific styling changes
- Color palette adjustments for brand consistency
AeroStride - Where every step tells a story of sophistication and comfort.