51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T283d,"use client" import { Star, X } from "lucide-react" import * as React from "react" import { cn } from "@/lib/utils" // ============================================================================ // Marquee Component // ============================================================================ interface MarqueeProps { children: React.ReactNode className?: string speed?: number pauseOnHover?: boolean } function Marquee({ children, className, speed = 20, pauseOnHover = true, }: MarqueeProps) { return (

{children}

) } // ============================================================================ // PromoBanner Component // ============================================================================ interface PromoBannerProps { /** Campaign or promo title */ title?: string /** Main headline text or element */ headline: React.ReactNode /** Current price (optional) */ price?: number /** Original price (crossed out) */ originalPrice?: number /** Currency symbol */ currency?: string /** Call-to-action button text or element */ ctaText?: React.ReactNode /** Call-to-action href */ ctaHref?: string /** Text for the marquee banner */ marqueeText?: string /** Position of the banner */ position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" /** Product images to display */ images?: string[] /** Custom gradient colors */ gradientFrom?: string gradientTo?: string /** Close callback */ onClose?: () => void /** LocalStorage key for persistence */ storageKey?: string /** Delay before showing (ms) */ delay?: number /** Show by default or wait for trigger */ defaultOpen?: boolean /** Show diagonal lines pattern on background */ showPattern?: boolean /** Callback when CTA button is clicked */ onCtaClick?: () => void /** Custom className */ className?: string } export function PromoBanner({ title = "Special Offer", headline, price, originalPrice, currency = "$", ctaText = "Get Now", ctaHref = "#", marqueeText, position = "bottom-right", images, gradientFrom = "from-violet-600", gradientTo = "to-pink-600", onClose, storageKey, delay = 0, defaultOpen = true, showPattern = false, onCtaClick, className, }: PromoBannerProps) { const [isVisible, setIsVisible] = React.useState(false) const [isClosing, setIsClosing] = React.useState(false) const [isEntering, setIsEntering] = React.useState(true) React.useEffect(() => { // Check localStorage if storageKey is provided if (storageKey) { const dismissed = localStorage.getItem(storageKey) if (dismissed === "true") { return } } // Show with delay if (defaultOpen) { const timer = setTimeout(() => { setIsVisible(true) // Trigger entrance animation after a frame requestAnimationFrame(() => { requestAnimationFrame(() => { setIsEntering(false) }) }) }, delay) return () => clearTimeout(timer) } }, [storageKey, delay, defaultOpen]) const handleClose = React.useCallback(() => { setIsClosing(true) // Store dismissal in localStorage if (storageKey) { localStorage.setItem(storageKey, "true") } // Wait for animation to complete setTimeout(() => { setIsVisible(false) setIsClosing(false) onClose?.() }, 300) }, [storageKey, onClose]) if (!isVisible) return null const positionClasses = { "bottom-right": "bottom-4 right-4", "bottom-left": "bottom-4 left-4", "top-right": "top-4 right-4", "top-left": "top-4 left-4", } const discount = originalPrice && price !== undefined ? Math.round(((originalPrice - price) / originalPrice) * 100) : null return (