Modern Overview

A contemporary product page mixing a bold image grid, accent typography, and clear pricing. Suits fashion and lifestyle brands that want a fresh look.

import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Heart, Share2, Star } from "lucide-react";

export default function ModernOverview() {
  return (
    <div className="w-full max-w-7xl mx-auto p-6">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        {/* Product Images */}
        <div className="lg:col-span-7 space-y-4">
          <div className="aspect-[4/3] bg-muted rounded-xl overflow-hidden">
            <img
              src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
              alt="Modern watch with leather strap - Main view"
              className="object-cover w-full h-full"
            />
          </div>
          <div className="grid grid-cols-4 gap-4">
            {[1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="aspect-square bg-muted rounded-lg overflow-hidden"
              >
                <img
                  src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
                  alt={`Product view ${i}`}
                  className="object-cover w-full h-full hover:scale-105 transition-transform"
                />
              </div>
            ))}
          </div>
        </div>

        {/* Product Info */}
        <div className="lg:col-span-5">
          <div className="sticky top-8">
            <div className="flex items-center justify-between mb-6">
              <span className="text-sm font-medium text-primary">
                Luxury Collection
              </span>
              <div className="flex gap-2">
                <Button size="icon" variant="ghost">
                  <Share2 className="h-5 w-5" />
                </Button>
                <Button size="icon" variant="ghost">
                  <Heart className="h-5 w-5" />
                </Button>
              </div>
            </div>

            <h1 className="text-4xl font-bold mb-4">Classic Leather Watch</h1>

            <div className="flex items-center gap-2 mb-6">
              <div className="flex">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="h-4 w-4 fill-primary text-primary" />
                ))}
              </div>
              <span className="text-sm font-medium">4.9</span>
              <span className="text-sm text-muted-foreground">(128)</span>
            </div>

            <div className="mb-8">
              <div className="text-3xl font-bold mb-2">$299.00</div>
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground line-through">
                  $399.00
                </span>
                <span className="bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-sm font-medium px-2 py-0.5 rounded">
                  25% Off
                </span>
              </div>
            </div>

            <Tabs defaultValue="description" className="mb-8">
              <TabsList className="w-full grid grid-cols-3">
                <TabsTrigger value="description">Description</TabsTrigger>
                <TabsTrigger value="features">Features</TabsTrigger>
                <TabsTrigger value="shipping">Shipping</TabsTrigger>
              </TabsList>
              <TabsContent value="description" className="mt-4">
                <p className="text-muted-foreground">
                  Elevate your style with our Classic Leather Watch. Featuring
                  premium materials, precise movement, and timeless design that
                  complements any outfit.
                </p>
              </TabsContent>
              <TabsContent value="features" className="mt-4">
                <ul className="text-muted-foreground space-y-2">
                  <li>• Swiss-made movement</li>
                  <li>• Genuine leather strap</li>
                  <li>• Sapphire crystal glass</li>
                  <li>• Water-resistant up to 30m</li>
                </ul>
              </TabsContent>
              <TabsContent value="shipping" className="mt-4">
                <p className="text-muted-foreground">
                  Free standard shipping on all orders. Express delivery
                  available. 30-day return policy with money-back guarantee.
                </p>
              </TabsContent>
            </Tabs>

            <div className="space-y-4">
              <div className="flex flex-col gap-2">
                <span className="font-medium">Color</span>
                <div className="flex gap-2">
                  <button className="w-8 h-8 rounded-full bg-black ring-2 ring-offset-2 ring-black"></button>
                  <button className="w-8 h-8 rounded-full bg-brown-500"></button>
                  <button className="w-8 h-8 rounded-full bg-slate-200"></button>
                </div>
              </div>

              <div className="flex flex-col gap-2">
                <span className="font-medium">Size</span>
                <div className="grid grid-cols-3 gap-2">
                  <Button variant="outline">38mm</Button>
                  <Button variant="outline">42mm</Button>
                  <Button variant="outline">44mm</Button>
                </div>
              </div>
            </div>

            <div className="flex gap-4 mt-8">
              <Button size="lg" className="flex-1">
                Add to Cart
              </Button>
              <Button size="lg" variant="outline" className="flex-1">
                Buy Now
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Modern Overview is a two-column product page. The left column takes up roughly seven twelfths of the width and leads with a large landscape image followed by a four-up row of square thumbnails. The right column holds a sticky details rail: a collection label and share/wishlist icon buttons at the top, a bold product name, a five-star rating row with a score and review count, a price line showing the current figure alongside a struck through original and a green discount badge, a three-tab panel (Description, Features, Shipping), colour swatches, size buttons, and finally side-by-side Add to Cart and Buy Now buttons.

Every piece of copy in the block is standalone. The collection label, product name, rating, prices, tab text, colour options, and size labels can each be updated without affecting the rest. The thumbnail row always renders four items but can be trimmed or extended by adjusting the array. The three tabs are independent panels, so you can remove a tab or rename it without changing the others.

When to use

Reach for this layout when your product page needs to present pricing transparency alongside variant selection in a single compact column. The discount badge and the separate current and original prices make the value case instantly readable, which suits financial products, premium credit card offers, or subscription plan comparisons where showing a "was/now" figure builds confidence. It handles more detail than the Minimal Overview without the full gallery weight of Gallery Overview, sitting between the two when you need informative but not overwhelming.

A natural flow around it on an Ecommerce page:

Before

Category Filters to let a shopper narrow to the product before landing here
Product List so visitors arrive from a browsable catalog

After

Customer Reviews to support the star rating already visible in the block
Bundle Upsells to present complementary items immediately below the purchase buttons

What you can customize

The block separates its visual and informational layers cleanly, so most changes are targeted swaps:

Images. Replace the main and thumbnail images with your own product shots; the thumbnail row scales uniformly so all four update in one pass.
Pricing display. Swap the current price, original price, and discount label to match your offer, or remove the struck through price entirely if no discount applies.
Tab content. Each tab panel is independent prose or a list, so you can rename tabs, reorder them, or cut one down to two panels for simpler products.

Tip: the details column is sticky, so keep the tab content concise enough that the full panel stays visible without scrolling on typical viewports.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

Category Filters to let a shopper narrow to the product before landing here
Product List so visitors arrive from a browsable catalog

After

Customer Reviews to support the star rating already visible in the block
Bundle Upsells to present complementary items immediately below the purchase buttons

What you can customize

The block separates its visual and informational layers cleanly, so most changes are targeted swaps:

Images. Replace the main and thumbnail images with your own product shots; the thumbnail row scales uniformly so all four update in one pass.
Pricing display. Swap the current price, original price, and discount label to match your offer, or remove the struck through price entirely if no discount applies.
Tab content. Each tab panel is independent prose or a list, so you can rename tabs, reorder them, or cut one down to two panels for simpler products.

Tip: the details column is sticky, so keep the tab content concise enough that the full panel stays visible without scrolling on typical viewports.

Modern Overview

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize