function Navigation({ links = [] }) { const [isOpen, setIsOpen] = useState(false); return /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-16", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex-shrink-0 flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, "Logo"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-10 flex items-center space-x-4", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, links.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.href, className: "text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, link.text)))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }))))), isOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-2 pt-2 pb-3 space-y-1 sm:px-3", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, links.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.href, className: "text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, link.text))))); } function NavigationStory() { const demoLinks = [ { href: "#home", text: "Home" }, { href: "#about", text: "About" }, { href: "#services", text: "Services" }, { href: "#contact", text: "Contact" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { links: demoLinks, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this })); } function MainComponent() { const [currentAIImage, setCurrentAIImage] = useState(0); const aiImages = [ "/images/ai-1.jpg", "/images/ai-2.jpg", "/images/ai-3.jpg" ]; const aiTools = [ { name: "ChatGPT", icon: "fas fa-comments", description: "Advanced conversational AI" }, { name: "DALL·E 3", icon: "fas fa-paint-brush", description: "AI-powered image generation" }, { name: "Stable Diffusion", icon: "fas fa-image", description: "Create stunning visuals" }, { name: "Google Translate", icon: "fas fa-language", description: "Real-time translation" }, { name: "Google Search", icon: "fas fa-search", description: "Smart search integration" }, { name: "GPT-4 Vision", icon: "fas fa-eye", description: "Visual understanding AI" }, { name: "Web Scraper", icon: "fas fa-spider", description: "Automated data extraction" }, { name: "QR Code", icon: "fas fa-qrcode", description: "Generate QR codes" } ]; useEffect(()=>{ const timer = setInterval(()=>{ setCurrentAIImage((prev)=>(prev + 1) % aiImages.length); }, 3000); return ()=>clearInterval(timer); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#0a0a0a] to-[#1a1a1a]", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("section", { className: "relative h-[90vh] flex items-center justify-center", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 overflow-hidden", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: aiImages[currentAIImage], alt: "AI technology visualization", className: "w-full h-full object-cover opacity-50", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 text-center max-w-4xl mx-auto px-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white font-roboto mb-6", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "The Future of AI Development"), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-gray-300 font-inter mb-8", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Harness the power of artificial intelligence with our comprehensive suite of tools"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#3a86ff] hover:bg-[#2563eb] text-white font-semibold py-3 px-8 rounded-lg text-lg transition-colors", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Get Started"))), /*#__PURE__*/ React.createElement("section", { className: "py-20 px-4 bg-[#111111]", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-white text-center font-roboto mb-16", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Available AI Tools"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, aiTools.map((tool)=>/*#__PURE__*/ React.createElement("div", { key: tool.name, className: "bg-[#1a1a1a] p-6 rounded-xl hover:transform hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${tool.icon} text-4xl text-[#3a86ff] mb-4`, __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2 font-inter", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, tool.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, tool.description)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } img { animation: fadeIn 0.5s ease-in; } `)); }