function PixelifySansButton({ text, variant = "default", onClick }) { const baseClasses = "group relative font-pixelify-sans px-6 py-3 active:translate-y-[2px] active:translate-x-[-2px]"; const textClasses = variant === "filled" ? "text-white" : "text-[#333] group-hover:text-black"; const bgClasses = variant === "filled" ? "bg-black" : "bg-transparent"; return /*#__PURE__*/ React.createElement("button", { className: `${baseClasses} ${bgClasses}`, onClick: onClick, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `relative z-10 ${textClasses}`, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, text), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[6px] left-[6px] right-[6px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[4px] left-[6px] right-[6px] h-[2px] bg-[#f1f1f1]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute bottom-[-2px] left-[4px] right-[4px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute left-[-2px] top-[4px] bottom-[4px] w-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }))); } function PixelifySansButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Default Button", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Filled Button", variant: "filled", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [language, setLanguage] = useState("en"); const [translations, setTranslations] = useState({}); const content = { en: { learn: "Learn", practice: "Practice", resources: "Resources", aboutUs: "About Us", hero: "Your AI Learning Companion", subHero: "Personalized learning, anytime, anywhere", getStarted: "Get Started", personalizedLearning: "Personalized Learning", personalizedDesc: "Tailored to your unique learning style", access: "24/7 Access", accessDesc: "Learn at your own pace, anytime", expertGuidance: "Expert Guidance", expertDesc: "Access knowledge from top experts", quizzes: "Interactive Quizzes", quizzesDesc: "Reinforce with hands-on practice", contactUs: "Contact Us", followUs: "Follow Us", legal: "Legal", privacy: "Privacy Policy", terms: "Terms of Service", rights: "All rights reserved." } }; const getText = (key)=>{ if (language === "en") return content.en[key]; return translations[key] || content.en[key]; }; useEffect(()=>{ const translateContent = async ()=>{ if (language !== "en") { const newTranslations = {}; for (const [key, value] of Object.entries(content.en)){ const translated = await translate(value, { from: "en", to: language }); newTranslations[key] = translated; } setTranslations(newTranslations); } }; translateContent(); }, [ language ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 right-0 p-4 z-20", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "bg-white border border-gray-300 rounded-md px-3 py-1", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "ar", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "العربية"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Français"))), /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-sm fixed w-full z-10", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-[#2563eb]", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "LearnAI")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-gray-600 hover:text-[#2563eb]", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, getText("learn")), /*#__PURE__*/ React.createElement("a", { className: "text-gray-600 hover:text-[#2563eb]", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, getText("practice")), /*#__PURE__*/ React.createElement("a", { className: "text-gray-600 hover:text-[#2563eb]", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, getText("resources")), /*#__PURE__*/ React.createElement("a", { className: "text-gray-600 hover:text-[#2563eb]", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, getText("aboutUs"))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "text-gray-600", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`, __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }))))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-2 pt-2 pb-3 space-y-1", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "block px-3 py-2 text-gray-600", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, getText("learn")), /*#__PURE__*/ React.createElement("a", { className: "block px-3 py-2 text-gray-600", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, getText("practice")), /*#__PURE__*/ React.createElement("a", { className: "block px-3 py-2 text-gray-600", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, getText("resources")), /*#__PURE__*/ React.createElement("a", { className: "block px-3 py-2 text-gray-600", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, getText("aboutUs"))))), /*#__PURE__*/ React.createElement("main", { className: "pt-16", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "relative h-[600px] flex items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/ai-learning.jpg", alt: "AI Learning Platform Hero Image", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black opacity-50", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, getText("hero")), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white mb-8", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, getText("subHero")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#2563eb] text-white px-8 py-3 rounded-lg hover:bg-[#1d4ed8] transition-colors", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, getText("getStarted")))), /*#__PURE__*/ React.createElement("section", { className: "py-16 bg-gray-50", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-brain text-[#2563eb] text-3xl mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, getText("personalizedLearning")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, getText("personalizedDesc"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-[#2563eb] text-3xl mb-4", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, getText("access")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, getText("accessDesc"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-graduate text-[#2563eb] text-3xl mb-4", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, getText("expertGuidance")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, getText("expertDesc"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tasks text-[#2563eb] text-3xl mb-4", __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, getText("quizzes")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, getText("quizzesDesc")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-8", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, getText("contactUs")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, "Email: info@learnai.com"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, "Phone: (555) 123-4567")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, getText("followUs")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-xl", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-xl", __source: { fileName: "", lineNumber: 189, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin text-xl", __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, getText("legal")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, getText("privacy")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, getText("terms"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, "© 2024 LearnAI. ", getText("rights")))))))); }