SVELTE LUXE - Premium Women's Gym Wear Ecommerce

A luxury ecommerce platform for premium women's gym wear, built with Next.js 14, TypeScript, and Tailwind CSS.

Features

• Premium Design: Minimal, elegant luxury aesthetic with black, white, and gray color palette
• Responsive Layout: Mobile-first design that works seamlessly on all devices
• Product Catalog: 12 featured products with detailed information
• Advanced Filtering: Filter products by category, price, color, and size
• Product Pages: Individual product pages with images, sizes, colors, and features
• Shopping Cart: Full cart functionality (ready for Stripe integration)
• Multiple Pages:
  • Home page with featured collection
  • Shop page with comprehensive filters
  • Individual product pages
  • About page
  • Contact page with form
  • Shopping cart
• Smooth Animations: Scroll animations and hover effects throughout
• Sticky Navbar: Easy navigation with dropdown menus
• Newsletter Signup: Email subscription forms
• Performance Optimized: Built for speed with Next.js optimization

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Deployment: Vercel-ready

Getting Started

Prerequisites

• Node.js 18+ and npm 9+

Installation

1. Clone the repository or navigate to the project directory

cd "Svelte Luxe"

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Open http://localhost:3000 in your browser

Available Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm start - Start the production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript type checking

Project Structure

src/
├── app/                    # Next.js app directory
│   ├── page.tsx            # Home page
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   ├── shop/               # Shop page
│   ├── product/[id]/       # Product detail page
│   ├── cart/               # Cart page
│   ├── about/              # About page
│   └── contact/            # Contact page
├── components/
│   ├── layout/             # Layout components (Navbar, Footer)
│   ├── product/            # Product components (ProductCard, ProductGrid)
│   └── common/             # Common components (HeroSection)
├── lib/
│   └── products.ts         # Product data and utilities
├── types/
│   └── index.ts            # TypeScript types
└── public/                 # Static assets

Product Data

The application includes 12 sample products across categories:

• Tops: Sports bras, tanks, crop tops
• Bottoms: Leggings, shorts, sweatpants
• Outerwear: Hoodies and jackets
• Accessories: Scrunchies, backpacks, water bottles

All product data is stored in src/lib/products.ts and can be easily replaced with API calls.

Customization

Colors

Edit tailwind.config.ts to customize the color palette:

colors: {
  primary: "#000000",
  secondary: "#FFFFFF",
  accent: "#F5F5F5",
}

Products

Update product data in src/lib/products.ts:

export const products: Product[] = [
  // Add your products here
];

Styling

All components use Tailwind CSS classes. Global styles are in src/app/globals.css.

Deployment

Deploy to Vercel

1. Push your code to GitHub

2. Import the repository in Vercel

3. Vercel will automatically detect the Next.js project

4. Click "Deploy"

Your site will be live at https://your-project.vercel.app

Future Enhancements

• User authentication (NextAuth.js)
• Shopping cart with local storage
• Payment integration (Stripe)
• Product reviews and ratings
• Wishlist functionality
• Admin dashboard for inventory management
• Email notifications
• Analytics integration
• Search functionality
• Size guide with images

Performance

• Optimized images with next/image
• Code splitting with dynamic imports
• CSS minification with Tailwind
• TypeScript for type safety

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

This project is licensed under the MIT License.

Support

For support, email support@svelteluxe.com or visit our contact page.

---

Built with ❤️ for athletes who demand excellence