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:T32ed,import { useState } from 'react'; import { ArrowRight, Play, Camera, MapPin, Cpu, Clock, Battery, Wind, } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; export default function VideoFeatureShowcase() { const [activeFeature, setActiveFeature] = useState('camera'); const features = { camera: { title: '4K HDR Camera System', description: 'Cinematic 4K/60fps video capture with 1/1.3" CMOS sensor, 12.7 stops of dynamic range, and advanced color science for professional results in any lighting condition.', image: 'https://images.unsplash.com/photo-1598240087368-5a06c7d81800?q=80&w=2053&auto=format&fit=crop', icon: , stats: [ { value: '4K', label: 'Resolution' }, { value: '60', label: 'FPS' }, { value: '3-Axis', label: 'Gimbal' }, ], videoSrc: 'https://static.videezy.com/system/resources/previews/000/021/842/original/P1033746.mp4', }, flight: { title: 'Intelligent Flight System', description: 'Advanced obstacle detection with omnidirectional sensors and APAS 5.0 technology for smooth, safe navigation through complex environments at speeds up to 42 mph.', image: 'https://images.unsplash.com/photo-1544052362-34c4d73a4ae9?q=80&w=2070&auto=format&fit=crop', icon: , stats: [ { value: '42', label: 'MPH Speed' }, { value: '360°', label: 'Detection' }, { value: '12', label: 'Sensors' }, ], videoSrc: 'https://static.videezy.com/system/resources/previews/000/051/347/original/Drone-107.mp4', }, tracking: { title: 'ActiveTrack 5.0', description: 'Next-generation subject tracking with improved recognition algorithms that can follow subjects with exceptional precision while navigating around obstacles autonomously.', image: 'https://images.unsplash.com/photo-1485849708507-9d0066e5ff22?q=80&w=1973&auto=format&fit=crop', icon: , stats: [ { value: '5.0', label: 'Version' }, { value: '33ft', label: 'Distance' }, { value: '10+', label: 'Modes' }, ], videoSrc: 'https://static.videezy.com/system/resources/previews/000/021/329/original/Flying_Above_Beach.mp4', }, processor: { title: 'Advanced AI Processor', description: 'Dedicated neural processing unit enables real-time computational photography, autonomous navigation, and intelligent flight features with minimal latency.', image: 'https://images.unsplash.com/photo-1506947411487-a56738267384?q=80&w=1974&auto=format&fit=crop', icon: , stats: [ { value: '2.4', label: 'TFLOPS' }, { value: 'NPU', label: 'AI Engine' }, { value: '10ms', label: 'Latency' }, ], videoSrc: 'https://static.videezy.com/system/resources/previews/000/052/131/original/Flycam.mp4', }, battery: { title: 'Extended Flight Time', description: 'High-capacity intelligent battery with optimized power management provides up to 38 minutes of flight time and real-time monitoring of cell health and status.', image: 'https://images.unsplash.com/photo-1506947411487-a56738267384?q=80&w=1974&auto=format&fit=crop', icon: , stats: [ { value: '38', label: 'Minutes' }, { value: '5000', label: 'mAh' }, { value: 'Fast', label: 'Charging' }, ], videoSrc: 'https://static.videezy.com/system/resources/previews/000/038/250/original/Landscape-59.mp4', }, transmission: { title: 'O3+ Video Transmission', description: 'Next-generation transmission system delivers 15km range with 1080p/60fps low-latency feed and strong anti-interference capabilities even in challenging RF environments.', image: 'https://images.unsplash.com/photo-1580835239846-5bb9ce0c949d?q=80&w=1974&auto=format&fit=crop', icon: , stats: [ { value: '15', label: 'KM Range' }, { value: '1080p', label: 'Feed' }, { value: '120', label: 'MS Latency' }, ], videoSrc: 'https://static.videezy.com/system/resources/previews/000/038/893/original/Mountains.mp4', }, }; // Type for accessing features by key type FeatureKey = keyof typeof features; const selectedFeature = features[activeFeature as FeatureKey]; return (

Professional Aerial Platform

Capture the world from above

Our flagship drone combines cutting-edge technology with intuitive controls for unparalleled aerial imaging capabilities.

{/* Main product image */}

Latest Model

AeroPro X9

Professional aerial imaging system

{/* Feature selector tabs */}

{(Object.keys(features) as Array).map((key) => ( ))}

{/* Feature content with video */}

{/* Video section */}

{/* Highlight feature cards */}

1-inch CMOS Sensor

Larger sensor captures more light for better low-light performance and greater dynamic range in challenging conditions.

Autonomous Navigation

Advanced obstacle avoidance and terrain following algorithms enable confident flight even in complex environments.

Intelligent Battery

Smart power management with real-time monitoring and predictive algorithms for optimized flight time and battery longevity.

{/* CTA section */}

Experience unparalleled aerial imaging with the AeroPro X9 drone, backed by our 2-year warranty and comprehensive pilot training program.

); } 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-video-feature-showcase.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/ecommerce-product-features-video-feature-showcase","itemId":"@shadcn-ui-blocks/ecommerce-product-features-video-feature-showcase"}],["$","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/video-feature-showcase.tsx","content":"$52","type":"registry:component","target":"components/blocks/ecommerce/product-features/video-feature-showcase.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"]}]

Capture the world from above

AeroPro X9

{selectedFeature.title}

1-inch CMOS Sensor

Autonomous Navigation

Intelligent Battery

Video Feature Showcase

Installation

Files

components

Styles