Immersive Overview

A full bleed product page with edge to edge imagery, floating details, and a sticky buy bar. Best for premium goods that sell on visual impact.

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

export default function ImmersiveOverview() {
  return (
    <div className="w-full">
      {/* Hero Section */}
      <div className="relative h-[30vh] md:h-[50vh] lg:h-[70vh] bg-muted">
        <img
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Modern watch with leather strap - Hero"
          className="object-cover w-full h-full"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent"></div>

        {/* Quick Actions */}
        <div className="absolute top-6 right-6 flex gap-2">
          <Button
            size="icon"
            variant="outline"
            className="rounded-full bg-background/80 backdrop-blur-sm"
          >
            <Share2 className="h-5 w-5" />
          </Button>
          <Button
            size="icon"
            variant="outline"
            className="rounded-full bg-background/80 backdrop-blur-sm"
          >
            <Heart className="h-5 w-5" />
          </Button>
        </div>

        {/* Video Preview */}
        <Button
          size="icon"
          variant="outline"
          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-16 w-16 rounded-full bg-background/80 backdrop-blur-sm"
        >
          <Play className="h-8 w-8" />
        </Button>
      </div>

      {/* Product Info */}
      <div className="max-w-7xl mx-auto px-6 -mt-20 relative z-10">
        <div className="bg-background border rounded-2xl p-8 shadow-lg">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* Main Info */}
            <div className="lg:col-span-2">
              <div className="flex items-center gap-4 mb-4">
                <span className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium">
                  Limited Edition
                </span>
                <div className="flex items-center gap-1">
                  <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>

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

              <div className="flex items-baseline gap-4 mb-6">
                <span className="text-3xl font-bold">$299.00</span>
                <span className="text-lg text-muted-foreground line-through">
                  $399.00
                </span>
                <span className="text-sm font-medium text-green-600">
                  Save 25%
                </span>
              </div>

              <Tabs defaultValue="overview" className="mb-8">
                <TabsList>
                  <TabsTrigger value="overview">Overview</TabsTrigger>
                  <TabsTrigger value="details">Details</TabsTrigger>
                  <TabsTrigger value="care">Care</TabsTrigger>
                </TabsList>
                <TabsContent value="overview" className="mt-4">
                  <div className="prose dark:prose-invert">
                    <p>
                      Elevate your style with our Classic Leather Watch.
                      Featuring premium materials, precise movement, and
                      timeless design that complements any outfit.
                    </p>
                    <ul>
                      <li>Swiss-made movement for precise timekeeping</li>
                      <li>Genuine leather strap with classic buckle</li>
                      <li>Sapphire crystal glass for durability</li>
                      <li>Water-resistant up to 30 meters</li>
                    </ul>
                  </div>
                </TabsContent>
                <TabsContent value="details" className="mt-4">
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="font-medium">Case Material</span>
                      <p className="text-muted-foreground">
                        316L Stainless Steel
                      </p>
                    </div>
                    <div>
                      <span className="font-medium">Movement</span>
                      <p className="text-muted-foreground">Swiss Automatic</p>
                    </div>
                    <div>
                      <span className="font-medium">Crystal</span>
                      <p className="text-muted-foreground">Sapphire</p>
                    </div>
                    <div>
                      <span className="font-medium">Water Resistance</span>
                      <p className="text-muted-foreground">30 Meters</p>
                    </div>
                  </div>
                </TabsContent>
                <TabsContent value="care" className="mt-4">
                  <div className="space-y-4 text-sm text-muted-foreground">
                    <p>
                      To ensure the longevity of your watch, follow these care
                      instructions:
                    </p>
                    <ul className="list-disc list-inside space-y-2">
                      <li>Clean regularly with a soft, dry cloth</li>
                      <li>Avoid exposure to extreme temperatures</li>
                      <li>Service every 3-5 years by a certified watchmaker</li>
                      <li>Store in a watch box when not in use</li>
                    </ul>
                  </div>
                </TabsContent>
              </Tabs>
            </div>

            {/* Purchase Options */}
            <div>
              <div className="bg-muted p-6 rounded-xl mb-6">
                <h3 className="font-medium mb-4">Select Options</h3>
                <div className="space-y-4">
                  <div>
                    <span className="text-sm font-medium">Color</span>
                    <div className="flex gap-2 mt-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>
                    <span className="text-sm font-medium">Size</span>
                    <div className="grid grid-cols-3 gap-2 mt-2">
                      <Button variant="outline" size="sm">
                        38mm
                      </Button>
                      <Button variant="outline" size="sm">
                        42mm
                      </Button>
                      <Button variant="outline" size="sm">
                        44mm
                      </Button>
                    </div>
                  </div>
                </div>
              </div>

              <Button className="w-full mb-3" size="lg">
                Add to Cart
              </Button>
              <Button variant="outline" className="w-full" size="lg">
                Buy Now
              </Button>

              <div className="mt-6 space-y-3">
                <Button variant="ghost" className="w-full justify-between">
                  Shipping Information
                  <ChevronRight className="h-4 w-4" />
                </Button>
                <Button variant="ghost" className="w-full justify-between">
                  Return Policy
                  <ChevronRight className="h-4 w-4" />
                </Button>
                <Button variant="ghost" className="w-full justify-between">
                  Size Guide
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Additional Images */}
      <div className="max-w-7xl mx-auto px-6 py-12">
        <div className="grid grid-cols-2 md: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>
    </div>
  );
}

About this block

Immersive Overview opens with a tall full-bleed hero image that fades into the page background via a gradient overlay. Centered on the hero are a play button for a video preview and two floating icon buttons for sharing and wishlisting. Below the fold, a rounded card lifts out of the hero and holds all product detail in a two-column grid: a wide left column with a badge, a star rating, the product name, a sale price with a strikethrough original, and a three-tab panel (Overview, Details, Care); a narrower right column with color swatches, size buttons, an Add to Cart button, a Buy Now button, and three ghost links for shipping, returns, and sizing. A four-image square grid closes the block.

Each zone is independent. The hero image, gradient, and play button are separate from the detail card, so you can swap the product photo without touching copy. Tab count, swatch colors, and size options are all inline and straightforward to adjust. The lower image grid accepts any number of shots of the product.

When to use

Reach for this layout when visual impact is the primary sales argument. It suits a premium or limited-edition product whose photography can carry the first impression before shoppers read a single word. For an ecommerce storefront brand selling high-value goods such as watches, leather goods, or artisan accessories, the large hero frame and the floating card signal quality before the price is seen. The Gallery Overview works better when shoppers need to study multiple angles in a side-by-side format; this layout trades that control for atmosphere.

A natural flow around it on an Ecommerce page:

Before

Category Filters to let shoppers arrive already narrowed to the right product line
Category Preview as a visual entry point that leads into an individual product

After

Customer Reviews to back up the star rating shown in the card with full review text
Cross Sells to surface related items once the shopper has read the product detail

What you can customize

All three content zones can be edited independently to match your catalog:

Hero image and actions. Swap the photo for any product shot and remove the play button if no video exists; the share and wishlist buttons can be kept or dropped without affecting the detail card below.
Tab panels. The three tabs cover narrative copy, a spec grid, and care instructions; rename or remove individual tabs to match the depth of information your product actually needs.
Purchase sidebar. Color swatches, size options, and the policy links are all inline lists; replace them with whatever variants and policies apply to your item.

Tip: if your product has no video, remove the centered play button and let the hero image stand alone so the overlay gradient reads as pure atmosphere rather than a broken affordance.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

Category Filters to let shoppers arrive already narrowed to the right product line
Category Preview as a visual entry point that leads into an individual product

After

Customer Reviews to back up the star rating shown in the card with full review text
Cross Sells to surface related items once the shopper has read the product detail

What you can customize

All three content zones can be edited independently to match your catalog:

Hero image and actions. Swap the photo for any product shot and remove the play button if no video exists; the share and wishlist buttons can be kept or dropped without affecting the detail card below.
Tab panels. The three tabs cover narrative copy, a spec grid, and care instructions; rename or remove individual tabs to match the depth of information your product actually needs.
Purchase sidebar. Color swatches, size options, and the policy links are all inline lists; replace them with whatever variants and policies apply to your item.

Tip: if your product has no video, remove the centered play button and let the hero image stand alone so the overlay gradient reads as pure atmosphere rather than a broken affordance.

Immersive 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