Product Detail
A full product page with gallery, specs, reviews, and add to cart.
Badge
Button
Rating
Tabs
Avatar
Separator
Preview
In Stock
Wireless Headphones Pro
(128 reviews)
$129.99
$179.99
Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation, long battery life, and a comfortable over-ear design perfect for music lovers and professionals alike.
Color
Quantity
1
Active Noise Cancellation
30-Hour Battery Life
Bluetooth 5.3
The Wireless Headphones Pro deliver an immersive audio experience with custom-tuned 40mm drivers that produce rich, detailed sound across the entire frequency spectrum. Whether you're listening to music, podcasts, or taking calls, every detail comes through with stunning clarity.
Advanced active noise cancellation technology adapts to your environment in real-time, blocking out distractions so you can focus on what matters. With transparency mode, you can stay aware of your surroundings when needed without removing your headphones.
Code
<div class="w-full max-w-4xl space-y-8">
<div class="grid gap-8 md:grid-cols-2">
<!-- Left Column: Images -->
<div class="space-y-4">
<div class="flex h-80 items-center justify-center rounded-lg bg-muted">
<!-- package icon SVG -->
</div>
<div class="flex gap-2">
<div class="h-16 w-16 rounded border bg-muted"></div>
<div class="h-16 w-16 rounded border bg-muted"></div>
<div class="h-16 w-16 rounded border bg-muted"></div>
<div class="h-16 w-16 rounded border bg-muted"></div>
</div>
</div>
<!-- Right Column: Product Info -->
<div class="space-y-4">
<BbBadge>In Stock</BbBadge>
<h2 class="text-2xl font-bold">Wireless Headphones Pro</h2>
<div class="flex items-center gap-2">
<BbRating ReadOnly="true" Value="rating" Max="5" />
<span class="text-sm text-muted-foreground">(128 reviews)</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-3xl font-bold">$129.99</span>
<span class="text-lg text-muted-foreground line-through">$179.99</span>
</div>
<p class="text-muted-foreground">
Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation,
long battery life, and a comfortable over-ear design perfect for music lovers and professionals alike.
</p>
<BbSeparator />
<!-- Color Selection -->
<div class="space-y-2">
<p class="text-sm font-medium">Color</p>
<div class="flex gap-2">
<div class="h-8 w-8 cursor-pointer rounded-full bg-black ring-2 ring-primary ring-offset-2"></div>
<div class="h-8 w-8 cursor-pointer rounded-full border bg-white"></div>
<div class="h-8 w-8 cursor-pointer rounded-full bg-blue-500"></div>
<div class="h-8 w-8 cursor-pointer rounded-full bg-red-500"></div>
</div>
</div>
<!-- Quantity -->
<div class="space-y-2">
<p class="text-sm font-medium">Quantity</p>
<div class="flex items-center gap-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Icon" OnClick="() => { if (quantity > 1) quantity--; }">
<!-- minus icon SVG -->
</BbButton>
<span class="w-12 text-center font-medium">@quantity</span>
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Icon" OnClick="() => quantity++">
<!-- plus icon SVG -->
</BbButton>
</div>
</div>
<BbSeparator />
<!-- Action Buttons -->
<div class="space-y-2">
<BbButton class="w-full">
<!-- shopping-cart icon SVG -->
Add to Cart
</BbButton>
<BbButton Variant="ButtonVariant.Outline" class="w-full">
<!-- heart icon SVG -->
Add to Wishlist
</BbButton>
</div>
<!-- Features -->
<div class="space-y-2 pt-2">
<div class="flex items-center gap-2 text-sm">
<!-- circle-check icon SVG -->
<span>Active Noise Cancellation</span>
</div>
<div class="flex items-center gap-2 text-sm">
<!-- circle-check icon SVG -->
<span>30-Hour Battery Life</span>
</div>
<div class="flex items-center gap-2 text-sm">
<!-- circle-check icon SVG -->
<span>Bluetooth 5.3</span>
</div>
</div>
</div>
</div>
<!-- Tabs Section -->
<BbTabs DefaultValue="description">
<BbTabsList>
<BbTabsTrigger Value="description">Description</BbTabsTrigger>
<BbTabsTrigger Value="specifications">Specifications</BbTabsTrigger>
<BbTabsTrigger Value="reviews">Reviews</BbTabsTrigger>
</BbTabsList>
<BbTabsContent Value="description">
<div class="space-y-4 pt-4 text-sm text-muted-foreground">
<p>
The Wireless Headphones Pro deliver an immersive audio experience with custom-tuned 40mm drivers
that produce rich, detailed sound across the entire frequency spectrum. Whether you're listening to
music, podcasts, or taking calls, every detail comes through with stunning clarity.
</p>
<p>
Advanced active noise cancellation technology adapts to your environment in real-time, blocking out
distractions so you can focus on what matters. With transparency mode, you can stay aware of your
surroundings when needed without removing your headphones.
</p>
</div>
</BbTabsContent>
<BbTabsContent Value="specifications">
<div class="grid grid-cols-2 gap-4 pt-4 text-sm">
<div class="text-muted-foreground">Driver Size</div>
<div>40mm</div>
<div class="text-muted-foreground">Frequency Response</div>
<div>20Hz - 20kHz</div>
<div class="text-muted-foreground">Battery Life</div>
<div>30 hours</div>
<div class="text-muted-foreground">Charging Time</div>
<div>2 hours</div>
<div class="text-muted-foreground">Connectivity</div>
<div>Bluetooth 5.3</div>
<div class="text-muted-foreground">Weight</div>
<div>250g</div>
</div>
</BbTabsContent>
<BbTabsContent Value="reviews">
<div class="space-y-6 pt-4">
<div class="space-y-3">
<div class="flex items-center gap-3">
<BbAvatar>
<BbAvatarFallback>SM</BbAvatarFallback>
</BbAvatar>
<div>
<p class="text-sm font-medium">Sarah M.</p>
<BbRating ReadOnly="true" Value="5" Max="5" Size="RatingSize.Small" />
</div>
</div>
<p class="text-sm text-muted-foreground">
Absolutely love these headphones! The noise cancellation is incredible and the battery
lasts all week with my daily commute. Best purchase I've made this year.
</p>
</div>
<BbSeparator />
<div class="space-y-3">
<div class="flex items-center gap-3">
<BbAvatar>
<BbAvatarFallback>JD</BbAvatarFallback>
</BbAvatar>
<div>
<p class="text-sm font-medium">James D.</p>
<BbRating ReadOnly="true" Value="4" Max="5" Size="RatingSize.Small" />
</div>
</div>
<p class="text-sm text-muted-foreground">
Great sound quality and very comfortable for long listening sessions. The only reason
I'm not giving 5 stars is the carrying case could be sturdier.
</p>
</div>
<BbSeparator />
<div class="space-y-3">
<div class="flex items-center gap-3">
<BbAvatar>
<BbAvatarFallback>AL</BbAvatarFallback>
</BbAvatar>
<div>
<p class="text-sm font-medium">Amy L.</p>
<BbRating ReadOnly="true" Value="5" Max="5" Size="RatingSize.Small" />
</div>
</div>
<p class="text-sm text-muted-foreground">
Perfect for working from home. The microphone quality is excellent for video calls and
the Bluetooth connection is rock solid. Highly recommend!
</p>
</div>
</div>
</BbTabsContent>
</BbTabs>
</div>
@code {
private double rating = 4.5;
private int quantity = 1;
}