function MainComponent() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState("home"); const [showNotification, setShowNotification] = useState(false); const [iframeLoaded, setIframeLoaded] = useState(false); const handleSectionChange = (section)=>{ setActiveSection(section); setIsMenuOpen(false); window.scrollTo({ top: 0, behavior: "smooth" }); }; const handleGetStarted = ()=>{ setShowNotification(true); setTimeout(()=>setShowNotification(false), 3000); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#6366f1] via-[#8b5cf6] to-[#d946ef] relative", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, showNotification && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 bg-[#fef08a] text-[#6366f1] px-6 py-3 rounded-lg shadow-lg z-50 animate-bounce", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "🎉 Welcome to SkillSwap! Sign up to get started."), /*#__PURE__*/ React.createElement("nav", { className: "bg-white/10 backdrop-blur-lg shadow-lg sticky top-0 z-40 border-b border-white/20", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-16", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center cursor-pointer", onClick: ()=>handleSectionChange("home"), __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-[#fef08a] font-poppins", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt mr-2 animate-spin-slow", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }), "SkillSwap")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: `font-medium cursor-pointer transition-colors text-white hover:text-[#fef08a] ${activeSection === "how-it-works" ? "text-[#fef08a]" : ""}`, onClick: ()=>handleSectionChange("how-it-works"), __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "How It Works"), /*#__PURE__*/ React.createElement("a", { className: `font-medium cursor-pointer transition-colors text-white hover:text-[#fef08a] ${activeSection === "browse-skills" ? "text-[#fef08a]" : ""}`, onClick: ()=>handleSectionChange("browse-skills"), __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Browse Skills"), /*#__PURE__*/ React.createElement("a", { className: `font-medium cursor-pointer transition-colors text-white hover:text-[#fef08a] ${activeSection === "community" ? "text-[#fef08a]" : ""}`, onClick: ()=>handleSectionChange("community"), __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Community"), /*#__PURE__*/ React.createElement("button", { onClick: handleGetStarted, className: "bg-[#fef08a] text-[#6366f1] px-6 py-2 rounded-full hover:bg-white transition-colors transform hover:scale-105 font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Get Started")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-white", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-2xl", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }))))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-white/10 backdrop-blur-lg shadow-lg", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 space-y-3", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "block font-medium text-white hover:text-[#fef08a]", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "How It Works"), /*#__PURE__*/ React.createElement("a", { className: "block font-medium text-white hover:text-[#fef08a]", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Browse Skills"), /*#__PURE__*/ React.createElement("a", { className: "block font-medium text-white hover:text-[#fef08a]", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Community"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#fef08a] text-[#6366f1] px-6 py-2 rounded-full hover:bg-white transition-colors font-bold", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Get Started"))), /*#__PURE__*/ React.createElement("main", { className: "relative", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, activeSection === "home" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "relative min-h-screen", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 w-full h-full", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://my.spline.design/roomrelaxingcopy-26ed31d926ff985749c0b9bcc1f0814c/", frameBorder: "0", width: "100%", height: "100%", className: `transition-opacity duration-500 ${iframeLoaded ? "opacity-100" : "opacity-0"}`, onLoad: ()=>setIframeLoaded(true), __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 max-w-7xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:w-1/2 text-center lg:text-left", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold mb-6 font-poppins text-white", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, "Learn Anything.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }), "Teach Everything.", /*#__PURE__*/ React.createElement("span", { className: "text-[#fef08a]", __source: { fileName: "", lineNumber: 115, columnNumber: 21 }, __self: this }, " For Free.")), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white/90 mb-8 max-w-2xl mx-auto lg:mx-0", __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, "Join the community where knowledge flows freely. Teach what you know, learn what you love – all through skill exchanges."), /*#__PURE__*/ React.createElement("button", { className: "bg-[#fef08a] text-[#6366f1] px-8 py-3 rounded-full text-lg hover:bg-white transition-colors transform hover:scale-105 font-bold shadow-lg", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, "Start Swapping Skills")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-4 rounded-lg shadow-lg hover:transform hover:scale-105 transition-all duration-300 border border-white/20", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-laptop-code text-2xl text-[#fef08a] mb-2", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, "Technology")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-4 rounded-lg shadow-lg hover:transform hover:scale-105 transition-all duration-300 border border-white/20", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-palette text-2xl text-[#fef08a] mb-2", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, "Arts")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-4 rounded-lg shadow-lg hover:transform hover:scale-105 transition-all duration-300 border border-white/20", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-2xl text-[#fef08a] mb-2", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, "Business")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-4 rounded-lg shadow-lg hover:transform hover:scale-105 transition-all duration-300 border border-white/20", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heartbeat text-2xl text-[#fef08a] mb-2", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, "Fitness")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-4 rounded-lg shadow-lg hover:transform hover:scale-105 transition-all duration-300 border border-white/20", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-language text-2xl text-[#fef08a] mb-2", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, "Languages")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-4 rounded-lg shadow-lg hover:transform hover:scale-105 transition-all duration-300 border border-white/20", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music text-2xl text-[#fef08a] mb-2", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, "Music")))), activeSection === "how-it-works" && /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, "How It Works – SkillSwap 🚀"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-[#fef08a] mb-8", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, "Learn. Teach. Connect."), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white/90 mb-12", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "SkillSwap makes skill-sharing easy and fun! Here's how it works:")), /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-xl border border-white/20", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-[#fef08a] mb-4", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, "1️⃣ Create Your Profile"), /*#__PURE__*/ React.createElement("ul", { className: "text-white/90 space-y-2", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, "Sign up and list the skills you can teach 🎓 and the skills you want to learn 📖"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this }, "Set your availability and learning preferences (online or in-person)"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-xl border border-white/20", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-[#fef08a] mb-4", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "2️⃣ Get Matched"), /*#__PURE__*/ React.createElement("ul", { className: "text-white/90 space-y-2", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, "Our smart AI matching system connects you with people who complement your skills"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this }, "Find local learners or global skill partners to start exchanging knowledge"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-xl border border-white/20", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-[#fef08a] mb-4", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, "3️⃣ Chat & Schedule Sessions"), /*#__PURE__*/ React.createElement("ul", { className: "text-white/90 space-y-2", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, "Use our built-in chat to discuss lessons and set up a learning plan"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 213, columnNumber: 19 }, __self: this }, "Schedule sessions with our integrated calendar & reminders"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-xl border border-white/20", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-[#fef08a] mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, "4️⃣ Learn & Teach in Real-Time"), /*#__PURE__*/ React.createElement("ul", { className: "text-white/90 space-y-2", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 224, columnNumber: 19 }, __self: this }, "Join video calls, live chats, or meet up for in-person learning"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this }, "Share resources, documents, and practice together"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-xl border border-white/20", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-[#fef08a] mb-4", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, "5️⃣ Earn Badges & Grow"), /*#__PURE__*/ React.createElement("ul", { className: "text-white/90 space-y-2", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this }, "Receive ratings & feedback from your learning partners"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 240, columnNumber: 19 }, __self: this }, "Unlock skill badges & XP points as you teach and learn more"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }, "Become a top mentor and help others on their journey!")))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-[#fef08a] mb-8", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, "✨ Join SkillSwap today and start your learning adventure! 🚀🔥"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#fef08a] text-[#6366f1] px-8 py-3 rounded-full text-lg hover:bg-white transition-colors transform hover:scale-105 font-bold shadow-lg", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, "Get Started Now"))), activeSection === "browse-skills" && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-8 text-white", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, "Browse Skills"), /*#__PURE__*/ React.createElement("p", { className: "text-white/80", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, "Content for Browse Skills section")), activeSection === "community" && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 269, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-8 text-white", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, "Community"), /*#__PURE__*/ React.createElement("p", { className: "text-white/80", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }, "Content for Community section"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white/10 backdrop-blur-lg text-white py-8 border-t border-white/20", __source: { fileName: "", lineNumber: 276, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-0", __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold text-[#fef08a]", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt mr-2", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }), "SkillSwap")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "hover:text-[#fef08a] transition-colors", __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { className: "hover:text-[#fef08a] transition-colors", __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }, "Terms"), /*#__PURE__*/ React.createElement("a", { className: "hover:text-[#fef08a] transition-colors", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, "Privacy"), /*#__PURE__*/ React.createElement("a", { className: "hover:text-[#fef08a] transition-colors", __source: { fileName: "", lineNumber: 289, columnNumber: 15 }, __self: this }, "Contact")))))); }

Learn Anything.Teach Everything. For Free.

Learn Anything.
Teach Everything. For Free.