function HeroSection({ title = "Discover Your Path to Success", subtitle = "Find the perfect courses and resources to achieve your goals", onSearch = ()=>{} }) { const [searchQuery, setSearchQuery] = useState(""); const handleSearch = (e)=>{ e.preventDefault(); onSearch(searchQuery); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-[600px] bg-gradient-to-r from-[#2563eb] to-[#1e40af] flex items-center justify-center px-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto text-center", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-4 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-white mb-8 font-crimson-text", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, subtitle), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "max-w-2xl mx-auto mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search courses...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "flex-1 px-6 py-4 rounded-lg text-lg focus:outline-none", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#fbbf24] hover:bg-[#f59e0b] text-white font-bold px-8 py-4 rounded-lg text-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), "Search"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 justify-center", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#2563eb] hover:bg-gray-100 font-bold px-8 py-4 rounded-lg text-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book-open mr-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), "Browse Courses"), /*#__PURE__*/ React.createElement("button", { className: "bg-transparent border-2 border-white text-white hover:bg-white/10 font-bold px-8 py-4 rounded-lg text-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), "Get Started")))); } function HeroSectionStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HeroSection, { __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(HeroSection, { title: "Learn New Skills Today", subtitle: "Join thousands of students learning online", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); } function Navigation({ isDarkMode = false, onToggleTheme, userName = "User", userImage = "/default-avatar.png" }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const navItems = [ { name: "Home", href: "#" }, { name: "Courses", href: "#" }, { name: "Languages", href: "#" }, { name: "Code Editor", href: "#" }, { name: "Projects", href: "#" }, { name: "Certifications", href: "#" }, { name: "Community", href: "#" } ]; return /*#__PURE__*/ React.createElement("nav", { className: `fixed top-0 w-full z-50 ${isDarkMode ? "bg-[#121212] text-white" : "bg-white text-[#121212]"} shadow-lg`, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16 items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Website Logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.name, href: item.href, className: "font-roboto hover:text-blue-500 transition-colors", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, item.name))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onToggleTheme, className: "p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isDarkMode ? "fa-sun" : "fa-moon"}`, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "flex items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: userImage, alt: "User profile", className: "h-8 w-8 rounded-full object-cover", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: `absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 ${isDarkMode ? "bg-[#1E1E1E]" : "bg-white"}`, __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, "Sign out")))), /*#__PURE__*/ React.createElement("button", { className: "md:hidden", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden py-4", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.name, href: item.href, className: "block py-2 hover:text-blue-500", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, item.name))))); } function NavigationStory() { const [isDarkMode, setIsDarkMode] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: isDarkMode ? "bg-[#121212]" : "bg-white", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { isDarkMode: isDarkMode, onToggleTheme: ()=>setIsDarkMode(!isDarkMode), userName: "John Doe", userImage: "/default-avatar.png", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-screen pt-16", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { isDarkMode: true, onToggleTheme: ()=>{}, userName: "Dark Mode User", userImage: "/default-avatar.png", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }))); } function CourseCard({ image, title, description, difficulty, progress }) { const difficultyColors = { beginner: "bg-green-500", intermediate: "bg-yellow-500", advanced: "bg-red-500" }; return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-lg overflow-hidden max-w-sm bg-white", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[200px]", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Cover image for ${title} course`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `absolute top-4 right-4 ${difficultyColors[difficulty]} text-white text-sm px-3 py-1 rounded-full`, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, difficulty)), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm font-bold", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, progress, "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 rounded-full h-2", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }))))); } function CourseCardStory() { const sampleCourses = [ { image: "/sample-course-1.jpg", title: "Introduction to Web Development", description: "Learn the fundamentals of web development with HTML, CSS, and JavaScript.", difficulty: "beginner", progress: 75 }, { image: "/sample-course-2.jpg", title: "Advanced React Patterns", description: "Master advanced React concepts and design patterns.", difficulty: "advanced", progress: 30 }, { image: "/sample-course-3.jpg", title: "Responsive Design", description: "Create websites that work great on all devices.", difficulty: "intermediate", progress: 50 } ]; return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, sampleCourses.map((course, index)=>/*#__PURE__*/ React.createElement(CourseCard, { key: index, ...course, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }))); } function FeatureCard({ icon, title, description }) { return /*#__PURE__*/ React.createElement("div", { className: "p-6 rounded-lg shadow-lg bg-white hover:shadow-xl transition-shadow duration-300", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-2xl text-blue-500 mr-4`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-inter", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, description)))); } function FeatureCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FeatureCard, { icon: "fas fa-code", title: "Learn to Code", description: "Master programming fundamentals through hands-on projects and exercises", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FeatureCard, { icon: "fas fa-paint-brush", title: "UI/UX Design", description: "Create beautiful and intuitive user interfaces with modern design principles", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FeatureCard, { icon: "fas fa-chart-line", title: "Data Science", description: "Analyze and visualize data to make informed business decisions", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("section", { className: "py-20 px-4 md:px-8", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center mb-12 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Featured Courses"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("section", { className: "py-20 px-4 md:px-8 bg-gray-50", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center mb-12 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Learning Paths"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("section", { className: "py-20 px-4 md:px-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 text-center", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-blue-50 rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "50,000+"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Active Learners")), /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-green-50 rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-green-600", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "200+"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Expert-Led Courses")))))); }