4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T3740,import { useState } from 'react'; import { ArrowRight, Plus, Minus } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; export default function ExpandableFeaturesGrid() { // State to track which feature is expanded const [expandedId, setExpandedId] = useState(null); const toggleExpand = (id: number) => { if (expandedId === id) { setExpandedId(null); } else { setExpandedId(id); } }; const features = [ { id: 1, title: 'Advanced Noise Cancellation', description: 'Industry-leading ANC technology blocks out surrounding noise for immersive listening.', expandedDescription: 'Our proprietary noise cancellation algorithm analyzes sound 200 times per second to create the perfect anti-noise wave, effectively canceling both constant background noise and sudden loud sounds. The dual microphone array works in tandem to provide up to 35dB of noise reduction across a wide frequency range.', image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=2070&auto=format&fit=crop', icon: ( ), }, { id: 2, title: 'Premium Audio Drivers', description: 'Custom-engineered 40mm drivers deliver rich, detailed audio across the frequency spectrum.', expandedDescription: 'Our custom-designed 40mm dynamic drivers feature a titanium-coated diaphragm for lightning-fast response and minimal distortion. The acoustic chamber is precision-tuned to enhance bass response while maintaining clarity in the mid and high ranges. Frequency response ranges from 4Hz to 40kHz, exceeding high-resolution audio standards.', image: 'https://images.unsplash.com/photo-1558089687-f282ffcbc126?q=80&w=2070&auto=format&fit=crop', icon: ( ), }, { id: 3, title: 'Multi-Device Connectivity', description: 'Seamlessly connect and switch between multiple devices without interruptions.', expandedDescription: "Our advanced Bluetooth 5.3 chipset supports simultaneous connection to two devices, allowing you to effortlessly switch between your phone, tablet, or laptop with just a tap. The intelligent pairing system remembers up to 8 devices and automatically connects to your most frequently used ones. With aptX HD, aptX Low Latency, and AAC codec support, you'll get the best audio quality regardless of your device.", image: 'https://images.unsplash.com/photo-1563770660582-377e2030888a?q=80&w=2070&auto=format&fit=crop', icon: ( ), }, { id: 4, title: 'Adaptive EQ', description: 'Automatically adjusts audio equalization based on your listening environment and preferences.', expandedDescription: "Our Adaptive EQ technology uses microphones to continuously monitor the audio seal created by the ear cushions and automatically tunes the low and mid frequencies to compensate for variations in fit. The companion app allows you to select from 5 preset EQ settings or create your own custom profile with the 10-band equalizer. Your preferences are saved to the headphones and applied regardless of which device you're using.", image: 'https://images.unsplash.com/photo-1616530940355-351fabd9524b?q=80&w=2075&auto=format&fit=crop', icon: ( ), }, { id: 5, title: 'Extended Battery Life', description: 'Up to 30 hours of playback with ANC enabled, and a quick 15-minute charge for 5 hours of use.', expandedDescription: 'The integrated lithium-polymer battery delivers up to 30 hours of playback with noise cancellation enabled and up to 40 hours with it disabled. Our fast-charging technology provides 5 hours of playback from just a 15-minute charge. The intelligent power management system preserves battery by automatically detecting when the headphones are removed and entering a low-power standby mode. Battery health monitoring in the app ensures optimal performance over time.', image: 'https://images.unsplash.com/photo-1606143134196-4b3e6d1d4d27?q=80&w=2070&auto=format&fit=crop', icon: ( ), }, { id: 6, title: 'Premium Comfort', description: 'Lightweight design with memory foam ear cushions and adjustable headband for all-day wear.', expandedDescription: "The headband frame uses a lightweight but durable magnesium alloy structure that applies minimal clamping force while maintaining a secure fit. The ear cushions are covered in ultra-soft protein leather and filled with slow-rebound memory foam that adapts to your ear shape. The innovative weight distribution system spreads pressure evenly across the headband, while the rotating ear cups ensure a perfect fit for any head shape. At just 250 grams, you'll barely notice you're wearing them even after hours of use.", image: 'https://images.unsplash.com/photo-1618562629342-c1a720af5b5e?q=80&w=2072&auto=format&fit=crop', icon: ( ), }, ]; return (

{/* Background decorative elements */}

Premium Audio

Experience sound like never before

Our flagship headphones combine cutting-edge technology with premium materials for unparalleled audio performance.

{/* Product image */}

Crafted with precision for audiophiles

{/* Expandable features grid */}

{features.map((feature) => (

expandedId !== feature.id && toggleExpand(feature.id) } > {expandedId === feature.id ? (

{feature.icon}

{feature.title}

{feature.expandedDescription}

) : (

{feature.icon}

{feature.title}

{feature.description}

)}

))}

{/* CTA section */}

Experience premium sound quality with our flagship headphones, backed by our 2-year warranty and 30-day satisfaction guarantee.

); } 53:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 54:Td06,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const buttonVariants = cva( "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5", lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-9", "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/ecommerce-product-features-expandable-features-grid.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/ecommerce-product-features-expandable-features-grid","itemId":"@shadcn-ui-blocks/ecommerce-product-features-expandable-features-grid"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/blocks/ecommerce/product-features/expandable-features-grid.tsx","content":"$52","type":"registry:component","target":"components/blocks/ecommerce/product-features/expandable-features-grid.tsx"},{"path":"components/ui/badge.tsx","content":"$53","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/button.tsx","content":"$54","type":"registry:ui","target":"components/ui/button.tsx"}]}]]}],"$L55"]}]

Expandable Features Grid

Installation

Files

components

Styles