Modern Product Page

A fully-featured product page implementation with interactive gallery, variants, modals and more.

Features

• Interactive product gallery with zoom
• Size chart and color comparison modals
• Product variants with color/size selection
• "Pairs well with" carousel
• Product bundle suggestions
• Information tabs
• Related products grid
• Fully responsive design
• Micro-interactions and animations

Running Locally

1. Clone or download the project
2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to the URL shown in the terminal (usually http://localhost:5173)

Development

The project uses:

• Vite for development server and building
• TypeScript for type safety
• React for UI components
• Tailwind CSS for styling
• Lucide React for icons

Project Structure

├── src/              # Source files
├── public/           # Static assets
├── css/             # Stylesheets
│   ├── gallery.css  # Product gallery styles
│   ├── modals.css   # Modal dialog styles
│   └── ...
└── js/              # JavaScript modules
    ├── gallery.js   # Gallery functionality
    ├── modals.js    # Modal handling
    └── ...