{isYouTube && (

YouTube

)}

{/* Video Container */}

{/* Poster Image (shown when video hasn't started) */} {!hasStarted && (

{poster ? ( Video thumbnail

) : isYouTube && youtubeId ? (

{ // Fallback to medium quality if maxresdefault is not available ;( e.target as HTMLImageElement ).src = \`https://img.youtube.com/vi/\${youtubeId}/mqdefault.jpg\` }} alt="YouTube thumbnail" className="w-full h-full object-cover" /> ) : (

)} {/* Play button overlay on poster */}

)} {/* Actual Video Players */} {(hasStarted || !poster) && isYouTube && youtubeId ? ( ) : (

)} {/* Play/Pause Overlay (only shown when video is playing) */} {hasStarted && (

{isPlaying ? ( ) : ( )}

)} {/* Controls */}

{size === "large" ? ( ) : ( )}

) } export function HeroSection() { return (

{/* Gradient Blob */}

Copy-Paste UI Component, made for Developers Make your website
more smooth Get more components Watch demo 60 Days free trial \xB7 No credit card required

) }`,__src__:"registry/default/example/sections/vedio.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { useEffect, useRef, useState } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { motion } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"framer-motion"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Maximize2, Minimize2, Pause, Play, Youtube } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lucide-react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"declare"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" global {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"Window"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"YT"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"any"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"onYouTubeIframeAPIReady"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"void"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Function to extract YouTube video ID from various YouTube URL formats"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getYouTubeVideoId"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"url"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"url) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Regular expressions to match different YouTube URL formats"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"regexps"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"/(?:youtube"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\."}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"com"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\/"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"watch"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"v="}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"youtu"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\."}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"be"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\/"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"youtube"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\."}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"com"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\/"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"embed"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\/"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:")("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"^"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"&?/]"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:")/"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"/youtube"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\."}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"com"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\/"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"watch"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\?"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"v=("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"^"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"&]"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:")/"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"/youtube"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\."}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"com"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\/"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"shorts"}),(0,e.jsx)(l.span,{style:{color:"#7EE787",fontStyle:"italic"},children:"\\/"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"^"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"?&/]"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:")/"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ]"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"for"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"regex"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"of"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" regexps) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"match"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" url."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"match"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(regex)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (match) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" match["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"VideoPlayerProps"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"poster"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"initialSize"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"small"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"medium"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"large"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"VideoPlayer"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"poster"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"initialSize"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"medium"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"VideoPlayerProps"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"isPlaying"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"setIsPlaying"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"setSize"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"small"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"medium"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"large"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">(initialSize)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"isYouTube"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"setIsYouTube"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"youtubeId"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"setYoutubeId"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"videoRef"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLVideoElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"youtubeRef"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLIFrameElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Add a new state to track if the video has been started"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"hasStarted"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"setHasStarted"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Detect YouTube URL and extract video ID"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getYouTubeVideoId"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(src)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (id) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setIsYouTube"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setYoutubeId"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(id)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"else"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setIsYouTube"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setYoutubeId"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, [src])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Handle YouTube API"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Load YouTube API if not already loaded"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (isYouTube "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"window."}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"YT"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"tag"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" document."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"createElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"script"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" tag.src "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://www.youtube.com/iframe_api"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"firstScriptTag"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" document."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getElementsByTagName"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"script"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" firstScriptTag.parentNode?."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"insertBefore"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(tag, firstScriptTag)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, [isYouTube])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Modify the togglePlay function to set hasStarted to true when play is clicked"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"togglePlay"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hasStarted) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setHasStarted"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (isYouTube "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" youtubeRef.current) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"try"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"iframe"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" youtubeRef.current"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"message"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" isPlaying"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:`'{"event":"command","func":"pauseVideo","args":""}'`})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:`'{"event":"command","func":"playVideo","args":""}'`})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" iframe.contentWindow?."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"postMessage"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(message, "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"*"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setIsPlaying"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isPlaying)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"catch"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (error) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" console."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Error controlling YouTube player:"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", error)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"else"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (videoRef.current) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (isPlaying) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" videoRef.current."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"pause"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"else"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" videoRef.current."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"play"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setIsPlaying"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isPlaying)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cycleSize"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"sizes"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"Array"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"small"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"medium"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"large"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"> "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"small"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"medium"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"large"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ]"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"currentIndex"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" sizes."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"indexOf"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(size)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"nextIndex"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (currentIndex "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"%"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" sizes."}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"length"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setSize"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(sizes[nextIndex])"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Size classes based on current size state"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"sizeClasses"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" small: "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-2xl"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" medium: "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-4xl"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" large: "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-6xl"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.6"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", delay: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.4"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`relative rounded-2xl overflow-hidden ${"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"sizeClasses"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"} mx-auto transition-all duration-300`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Browser Frame */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bg-gray-100 dark:bg-gray-800 p-4 flex items-center justify-between"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex space-x-2"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-3 h-3 rounded-full bg-red-500"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-3 h-3 rounded-full bg-yellow-500"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-3 h-3 rounded-full bg-green-500"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isYouTube "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center text-gray-600 dark:text-gray-400"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Youtube"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4 mr-1"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-xs font-medium"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">YouTube"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Video Container */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative bg-black aspect-video"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Poster Image (shown when video hasn't started) */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hasStarted "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute inset-0 z-10"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"poster "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"img"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"poster "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"/placeholder.svg"'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"alt"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Video thumbnail"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full h-full object-cover"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" isYouTube "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" youtubeId "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"img"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`https://img.youtube.com/vi/${"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"youtubeId"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}/maxresdefault.jpg`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onError"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// Fallback to medium quality if maxresdefault is not available"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ;("})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" e.target "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLImageElement"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ).src "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`https://img.youtube.com/vi/${"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"youtubeId"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}/mqdefault.jpg`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"alt"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"YouTube thumbnail"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full h-full object-cover"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full h-full bg-gray-900 flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Play"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-16 h-16 text-gray-400"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Play button overlay on poster */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute inset-0 flex items-center justify-center bg-black/30"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileHover"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1.1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileTap"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.9"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"togglePlay"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-20 h-20 flex items-center justify-center rounded-full bg-white/90 dark:bg-gray-800/90 text-black dark:text-white shadow-lg"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Play"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-8 h-8 ml-1"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Actual Video Players */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(hasStarted "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"poster) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" isYouTube "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" youtubeId "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"iframe"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"youtubeRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full h-full"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`https://www.youtube.com/embed/${"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"youtubeId"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}?enablejsapi=1&origin=${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"window"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!=="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"undefined"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"window"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"location"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"origin"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}&controls=0&rel=0&autoplay=${"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hasStarted"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"1"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"0"}`'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"YouTube video player"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"frameBorder"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"allow"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"allowFullScreen"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"video"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"videoRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full h-full object-cover"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"poster"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"poster"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"togglePlay"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"loop"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"playsInline"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"video/mp4"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Your browser does not support the video tag."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Play/Pause Overlay (only shown when video is playing) */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hasStarted "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileHover"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1.1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileTap"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.9"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"togglePlay"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute inset-0 z-20 flex items-center justify-center group"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-16 h-16 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 bg-white dark:bg-gray-800 text-black dark:text-white shadow-lg transition-opacity"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isPlaying "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Pause"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-6 h-6"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Play"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-6 h-6 ml-1"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Controls */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute bottom-0 inset-x-0 p-4 flex justify-end opacity-0 hover:opacity-100 transition-opacity z-30"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex space-x-2"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileHover"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1.1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileTap"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.9"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"cycleSize"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`Current size: ${"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}. Click to change size.`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"size "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"large"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Minimize2"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-5 h-5"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Maximize2"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-5 h-5"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"HeroSection"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"section"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative py-20 overflow-hidden bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Gradient Blob */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute inset-0 overflow-hidden pointer-events-none"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] opacity-30"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute inset-0 rounded-full bg-gradient-to-r from-blue-400 to-purple-400 blur-3xl animate-blob"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 blur-3xl animate-blob animation-delay-2000"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 to-blue-400 blur-3xl animate-blob animation-delay-4000"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative container mx-auto px-4 text-center"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.span"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.6"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"inline-block px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm font-medium mb-8"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Copy-Paste UI Component, made for Developers"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.h1"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.6"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", delay: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-8"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Make your website"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"br"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" more smooth"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.6"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", delay: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-col sm:flex-row items-center justify-center gap-4 mb-8"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.a"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileHover"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1.05"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileTap"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.95"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"#"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"px-8 py-4 bg-blue-600 dark:bg-blue-500 text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Get more components"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.a"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileHover"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1.05"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileTap"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.95"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"#"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"px-8 py-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Play"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-5 h-5"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Watch demo"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.p"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ duration: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.6"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", delay: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-gray-600 dark:text-gray-400 mb-12"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" 60 Days free trial \xB7 No credit card required"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"VideoPlayer"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://www.youtube.com/watch?v=j0UAaT1gHdY"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"poster"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"/home/dashboard.png"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"initialSize"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"medium"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsx)(r,{defaultValue:"manual",children:(0,e.jsx)(c,{value:"manual",children:(0,e.jsxs)(t,{children:[(0,e.jsx)(i,{children:"Install the following dependencies:"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install framer-motion lucide-react `,__npmCommand__:`npm install framer-motion lucide-react `,__yarnCommand__:`yarn add framer-motion lucide-react `,__pnpmCommand__:`pnpm add framer-motion lucide-react `,__bunCommand__:`bun add framer-motion lucide-react `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"npm install framer-motion lucide-react"})})})})}),(0,e.jsx)(i,{children:"Copy and paste the code into your project."})]})})})]})}function E(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(y,n)})):y(n)}var A=E;function o(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(v);})(); ;return Component;

Video Hero Sections

Installation

Install the following dependencies:

Copy and paste the code into your project.