function CategoryCard({ title, description, imageUrl, language = "en" }) { const [isHovered, setIsHovered] = useState(false); const buttonText = { en: "Explore Now", pt: "Explorar Agora" }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-xl overflow-hidden shadow-lg transition-all duration-500 hover:shadow-2xl bg-gradient-to-br from-white to-gray-50 hover:-translate-y-2 hover:scale-[1.02] relative group", onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-48 object-cover transition-all duration-700 group-hover:scale-110 group-hover:rotate-2", src: imageUrl, alt: title, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4 transform transition-all duration-300 group-hover:translate-y-[-4px]", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold text-xl mb-2 group-hover:text-blue-600", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700 text-base", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, description)), /*#__PURE__*/ React.createElement("div", { className: "px-6 pb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `font-roboto inline-block px-6 py-2.5 rounded-lg bg-blue-500 text-white transition-all duration-300 hover:bg-blue-600 transform group-hover:scale-105 ${isHovered ? "shadow-[0_0_30px_rgba(59,130,246,0.8)]" : ""}`, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, buttonText[language], /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2 transition-transform duration-300 transform group-hover:translate-x-1", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })))); } function CategoryCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CategoryCard, { title: "Audio Technology", description: "Premium sound systems and wireless audio solutions", imageUrl: "/images/category-audio.jpg", language: "en", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CategoryCard, { title: "Smart Cameras", description: "High-definition cameras and surveillance systems", imageUrl: "/images/category-cameras.jpg", language: "en", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CategoryCard, { title: "Smart Lighting", description: "Intelligent lighting solutions for modern living", imageUrl: "/images/category-lighting.jpg", language: "en", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` @keyframes pulse-light { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } } .animate-pulse-light { animation: pulse-light 2s infinite; } `)); } function Footer() { const [email, setEmail] = useState(""); const [isHovered, setIsHovered] = useState(null); const links = [ { text: "Home", href: "/" }, { text: "Audio Gadgets", href: "/audio-gadgets" }, { text: "Video Gadgets", href: "/video-gadgets" }, { text: "Smart Lighting", href: "/smart-lighting" }, { text: "Blog", href: "/blog" }, { text: "About Us", href: "/about" }, { text: "Contact", href: "/contact" } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-black text-white py-12 px-4", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hover-lift group", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-xl mb-4 glow-text", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot mr-2 animate-float", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }), "FutureGadgetHub"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 transform transition-all duration-500 group-hover:text-blue-400", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Pioneering tomorrow's technology today. Discover innovative solutions that transform your digital lifestyle.")), /*#__PURE__*/ React.createElement("div", { className: "hover-lift", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-xl mb-4 glow-text", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Navigation"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 columns-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, links.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "text-gray-300 hover:text-blue-400 link-hover", onMouseEnter: ()=>setIsHovered(index), onMouseLeave: ()=>setIsHovered(null), __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right mr-2 text-xs", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }), link.text, isHovered === index && /*#__PURE__*/ React.createElement("span", { className: "link-underline", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "hover-lift", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-xl mb-4 glow-text", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Connect"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, [ { icon: "youtube", url: "https://youtube.com", color: "#FF0000" }, { icon: "discord", url: "https://discord.com", color: "#5865F2" }, { icon: "github", url: "https://github.com", color: "#ffffff" }, { icon: "x-twitter", url: "https://twitter.com", color: "#1DA1F2" } ].map((social, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: social.url, className: "social-icon-link group", style: { "--hover-color": social.color }, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab fa-${social.icon} text-2xl group-hover:animate-bounce`, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "hover-lift group", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-xl mb-4 glow-text", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Newsletter"), /*#__PURE__*/ React.createElement("div", { className: "relative space-y-3", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Your email address", className: "w-full px-4 py-2 bg-gray-800 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 input-glow", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 button-glow transform hover:scale-[1.02] group-hover:animate-pulse", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Join Our Community", /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane ml-2 animate-slide-right", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 pt-8 border-t border-gray-800 text-center", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 hover-lift inline-block", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "© 2024 FutureGadgetHub. All rights reserved.", /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-blue-400", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart animate-beat", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, ` .hover-lift { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-5px); } .glow-text { text-shadow: 0 0 10px rgba(255,255,255,0.1); transition: text-shadow 0.3s ease; } .glow-text:hover { text-shadow: 0 0 15px rgba(96,165,250,0.5); } .link-hover { position: relative; display: inline-flex; align-items: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .link-hover:hover { transform: translateX(5px); } .link-underline { position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #60a5fa, transparent); animation: slideIn 0.3s ease forwards; } .social-icon-link { color: #9ca3af; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; } .social-icon-link:hover { color: var(--hover-color); transform: translateY(-5px) rotate(8deg) scale(1.2); } .social-icon-link:hover::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: blur(15px); background: var(--hover-color); opacity: 0.5; z-index: -1; animation: pulse 2s infinite; } @keyframes slideIn { from { width: 0; opacity: 0; } to { width: 100%; opacity: 1; } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 0.2; } } @keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes slide-right { 0% { transform: translateX(0); } 50% { transform: translateX(5px); } 100% { transform: translateX(0); } } .animate-beat { animation: beat 1s ease-in-out infinite; } .animate-float { animation: float 3s ease-in-out infinite; } .animate-slide-right { animation: slide-right 1s ease-in-out infinite; } `)); } function FooterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 214, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 215, columnNumber: 7 }, __self: this })); } function StepCard({ icon, title, description }) { return /*#__PURE__*/ React.createElement("div", { className: "relative p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 w-[300px] animate-float", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -top-6 left-1/2 transform -translate-x-1/2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg animate-pulse-glow", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-white text-xl`, __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-semibold mb-3 text-gray-800", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 text-sm", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, description))); } function StepCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-10 bg-gray-100 grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StepCard, { icon: "fa-shopping-cart", title: "Choose", description: "Select your favorite tech products", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StepCard, { icon: "fa-wifi", title: "Connect", description: "Easy setup and configuration", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StepCard, { icon: "fa-mobile-alt", title: "Control", description: "Manage everything from your app", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, ` @keyframes pulse-glow { 0% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); transform: scale(1); } 50% { box-shadow: 0 0 30px rgba(147, 51, 234, 0.6); transform: scale(1.05); } 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } .animate-float { animation: float 6s ease-in-out infinite; } `)); } function BlogCard({ thumbnail, title, excerpt }) { const [isHovered, setIsHovered] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-white/5 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg relative group", onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-all duration-500 rounded-xl", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative m-[2px] rounded-xl overflow-hidden transform transition-all duration-500 ease-out hover:translate-y-[-8px] hover:scale-[1.02]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: thumbnail, alt: title, className: "w-full h-[200px] object-cover transform transition-all duration-700 group-hover:scale-110", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white/10 backdrop-blur-sm", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-xl font-bold mb-2 text-white transform transition-all duration-500 group-hover:translate-x-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-300 mb-4 transform transition-all duration-500 delay-100 group-hover:translate-x-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, excerpt), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-montserrat text-blue-400 group-hover:text-blue-300 inline-flex items-center gap-2 relative overflow-hidden transition-all duration-300", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "transform transition-all duration-500 delay-200 group-hover:translate-x-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Read More"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right transform transition-all duration-500 group-hover:translate-x-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, ` @keyframes shine { from { transform: translateX(-100%) rotate(45deg); } to { transform: translateX(100%) rotate(45deg); } } .group:hover::after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.2), transparent ); animation: shine 1.5s linear infinite; } `)); } function BlogCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-900 flex gap-6 flex-wrap", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlogCard, { thumbnail: "/images/tech-future.jpg", title: "The Future of AI Technology", excerpt: "Exploring breakthrough developments in artificial intelligence and machine learning.", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BlogCard, { thumbnail: "/images/smart-living.jpg", title: "Smart Living Essentials", excerpt: "Discover how smart devices are transforming modern homes and lifestyles.", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BlogCard, { thumbnail: "/images/innovation.jpg", title: "Innovation in 2024", excerpt: "Latest trends and innovations shaping the technology landscape this year.", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this })); } function ProductCard({ image, name, description, price }) { const [isHovered, setIsHovered] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "perspective-[1000px] w-[300px]", onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative w-full rounded-lg border border-gray-200 overflow-hidden bg-white transform-gpu transition-all duration-300 ${isHovered ? "rotate-y-[10deg] shadow-2xl" : "rotate-y-0 shadow-sm"}`, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: name, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg font-bold", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "$ ", price), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 bg-blue-500 text-white rounded transform transition-all duration-300 hover:bg-blue-600 ${isHovered ? "scale-110 glow" : ""}`, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Add to Cart"))))); } function ProductCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ProductCard, { image: "/electronics.jpg", name: "Wireless Headphones", description: "Premium sound quality with active noise cancellation", price: "199.99", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProductCard, { image: "/camera.jpg", name: "4K Smart Camera", description: "Professional-grade imaging with AI features", price: "449.99", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ProductCard, { image: "/speaker.jpg", name: "Smart Speaker", description: "Room-filling sound with voice control", price: "129.99", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, ` @keyframes glow { 0% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); } 50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); } 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); } } .glow { animation: glow 1.5s ease-in-out infinite; } .rotate-y-10 { transform: rotateY(10deg); } `)); } function Navigation({ onSearchClick = ()=>{}, isSearchOpen = false }) { const [language, setLanguage] = useState("en"); const [isMenuOpen, setIsMenuOpen] = useState(false); const [activeLink, setActiveLink] = useState("/"); useEffect(()=>{ setActiveLink(window.location.pathname); }, []); const navLinks = [ { name: "Home", path: "/" }, { name: "Audio Gadgets", path: "/audio-gadgets" }, { name: "Video Gadgets", path: "/video-gadgets" }, { name: "Smart Lighting", path: "/smart-lighting" }, { name: "Blog", path: "/blog" }, { name: "About Us", path: "/about" }, { name: "Contact", path: "/contact" } ]; const handleNavigation = (e, path)=>{ e.preventDefault(); setActiveLink(path); setIsMenuOpen(false); window.history.pushState({}, "", path); }; return /*#__PURE__*/ React.createElement("nav", { className: "bg-black/95 backdrop-blur-sm p-4 fixed w-full top-0 z-50 border-b border-white/10", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", onClick: (e)=>handleNavigation(e, "/"), className: "text-white font-orbitron text-2xl flex items-center gap-2 animate-float hover:text-blue-400 transition-colors duration-300", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot animate-pulse", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), "FutureGadgetHub"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, navLinks.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: link.name, href: link.path, onClick: (e)=>handleNavigation(e, link.path), className: `text-gray-300 hover:text-white relative overflow-hidden group font-poppins animate-fade-in ${activeLink === link.path ? "text-blue-400" : ""}`, style: { animationDelay: `${index * 150}ms` }, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, link.name, /*#__PURE__*/ React.createElement("span", { className: `absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 transform transition-transform duration-500 ease-out origin-left ${activeLink === link.path ? "scale-x-100" : "scale-x-0 group-hover:scale-x-100"}`, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: onSearchClick, className: "text-gray-300 hover:text-white transition-all duration-500 transform hover:scale-110 animate-fade-in hover:rotate-12", style: { animationDelay: "1000ms" }, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-search ${isSearchOpen ? "text-blue-400" : ""}`, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "bg-transparent text-gray-300 border border-gray-700 rounded px-2 py-1 font-poppins focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 hover:border-white animate-fade-in cursor-pointer", style: { animationDelay: "1100ms" }, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", className: "bg-black", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "pt", className: "bg-black", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Portuguese"))), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-gray-300 hover:text-white transition-all duration-300 transform hover:scale-110 hover:rotate-180", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `md:hidden absolute top-full left-0 w-full bg-black/95 backdrop-blur-sm transition-all duration-500 ease-in-out ${isMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"}`, __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, navLinks.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: link.name, href: link.path, onClick: (e)=>handleNavigation(e, link.path), className: `block w-full text-left px-4 py-3 transition-all duration-300 font-poppins animate-slide-in ${activeLink === link.path ? "text-blue-400 bg-white/10" : "text-gray-300 hover:text-white hover:bg-white/5"}`, style: { animationDelay: `${index * 100}ms` }, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, link.name))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .animate-float { animation: float 3s ease-in-out infinite; } .animate-fade-in { animation: fade-in 0.6s ease-out forwards; } .animate-slide-in { animation: slide-in 0.4s ease-out forwards; } `)); } function NavigationStory() { const [isSearchOpen, setIsSearchOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 166, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { isSearchOpen: isSearchOpen, onSearchClick: ()=>setIsSearchOpen(!isSearchOpen), __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "pt-20", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center font-poppins", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, "Content will go here"))); } function MainComponent() { const products = [ { id: 1, name: "4K Smart Camera", price: "R$4.499", image: "/images/camera.jpg" }, { id: 2, name: "HD Webcam", price: "R$1.299", image: "/images/webcam.jpg" }, { id: 3, name: "Câmera de Ação", price: "R$2.499", image: "/images/action-cam.jpg" }, { id: 4, name: "Câmera de Segurança", price: "R$899", image: "/images/security-cam.jpg" }, { id: 5, name: "Filmadora Profissional", price: "R$8.999", image: "/images/pro-camera.jpg" }, { id: 6, name: "Câmera 360°", price: "R$3.299", image: "/images/360-camera.jpg" } ]; const [isSearchOpen, setIsSearchOpen] = useState(false); const [language, setLanguage] = useState("pt"); return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage(language === "en" ? "pt" : "en"), className: "bg-white/10 text-white px-4 py-2 rounded-full hover:bg-white/20", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, language === "en" ? "🇺🇸 EN" : "🇧🇷 PT")), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-24", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-montserrat text-4xl text-white text-center mb-12", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Produtos de Vídeo"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement(React.Fragment, null)); }