SI
SrotIndia

Product Showcase

Modern B2B Product Gallery with Color Variants

In Stock: 156 units

Premium Stainless Steel Water Bottle - Midnight Black
In Stock
Zoom

Color Options

Kitchen & Dining

Premium Stainless Steel Water Bottle

4.8 (2,547 reviews)
₹1,499
BestsellerEco-FriendlyFree Shipping30-Day Returns

Description

Premium quality stainless steel water bottle with double-wall insulation technology. Keeps beverages cold for 24 hours or hot for 12 hours. Lightweight, durable, and eco-friendly. Perfect for office, gym, and outdoor activities. Comes with leak-proof cap and ergonomic design for comfortable grip.

In Stock

156 units available

✓

Verified Seller

🚚

Free Shipping

â†Šī¸

Easy Returns

🔒

Secure Payment

✨ Key Features

🎨

Color Selection

Interactive color variants with visual swatches and hex codes

đŸ–ŧī¸

Image Gallery

Thumbnail gallery with smooth image transitions and zoom functionality

📱

Mobile Responsive

Perfect display on all devices - desktop, tablet, and mobile

⚡

Fast Loading

Optimized images and lazy loading for superior performance

đŸŽ¯

Product Details

Complete pricing, stock status, ratings, and trust badges

🔄

Dynamic Updates

Instant image updates when color variants are selected

đŸ› ī¸ Technical Features

Frontend Stack

  • ✓Next.js 16 with App Router
  • ✓React 19 with Hooks
  • ✓Tailwind CSS 3
  • ✓HeroIcons (hi2) Component Library
  • ✓Next.js Image Optimization

Component Features

  • ✓Image Zoom on Hover
  • ✓Smooth Animations
  • ✓State Management
  • ✓Responsive Design
  • ✓Accessibility Support

📝 How to Use

import ProductGallery from "@/components/ProductShowcase/ProductGallery";

const MyPage = () => {
  const product = {
    productId: "prod_001",
    productName: "Your Product",
    price: 1499,
    originalPrice: 2499,
    rating: 4.8,
    reviews: 2547,
    stock: 156,
    description: "Your product description",
    tags: ["Bestseller", "Free Shipping"],
    colorVariants: [
      {
        id: "color_1",
        name: "Black",
        hexCode: "#1a1a1a",
        image: "image-url",
        thumbnail: "thumbnail-url"
      },
      // ... more colors
    ]
  };

  return <ProductGallery {...product} />;
};