function MainComponent() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [imageLoaded, setImageLoaded] = useState(false); const [email, setEmail] = useState(""); const [status, setStatus] = useState(""); const [loading, setLoading] = useState(false); useEffect(()=>{ const img = new Image(); img.src = "https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80"; img.onload = ()=>setImageLoaded(true); }, []); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); try { const response = await fetch("/api/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, source: "courses_page" }) }); const data = await response.json(); if (data.error) { setStatus(data.error); } else { setStatus("Thanks for subscribing!"); setEmail(""); } } catch (error) { setStatus("Something went wrong. Please try again."); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen font-['Montserrat']", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { id: "sticky-header", className: "fixed w-full top-0 z-50 bg-gradient-to-b from-white/90 to-white/50 backdrop-blur-sm border-b border-gray-200/20 shadow-sm", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-20", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center gap-3 group", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-12 h-12", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#0055B8] rounded-tl-2xl rounded-tr-2xl rounded-br-2xl transform rotate-[-45deg] opacity-0 group-hover:opacity-100 transition-opacity duration-500", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-white rounded-tl-2xl rounded-tr-2xl rounded-br-2xl transform rotate-[-45deg] group-hover:opacity-0 transition-opacity duration-500", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-1", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1 h-4 bg-black rounded-full animate-soundwave group-hover:h-5 transition-all duration-300", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1 h-4 bg-[#DE0000] rounded-full animate-soundwave animation-delay-200 group-hover:h-5 transition-all duration-300", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1 h-4 bg-[#FFCC00] rounded-full animate-soundwave animation-delay-400 group-hover:h-5 transition-all duration-300", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-[#333333]", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "MyBeruf")), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.myberuf.com/courses", className: "text-[#333333] hover:text-[#0055B8] font-medium transition-colors", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Courses"), /*#__PURE__*/ React.createElement("a", { href: "https://www.myberuf.com/resources", className: "text-[#333333] hover:text-[#0055B8] font-medium transition-colors", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Resources"), /*#__PURE__*/ React.createElement("a", { href: "https://www.myberuf.com/exercises", className: "text-[#333333] hover:text-[#0055B8] font-medium transition-colors", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Exercises")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "md:hidden text-[#333333]", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `md:hidden ${isMenuOpen ? "block" : "hidden"} absolute left-0 right-0 top-full bg-gradient-to-b from-white via-white to-gray-50 border-b border-gray-100 shadow-lg`, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex flex-col space-y-4 p-6", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.myberuf.com/courses", className: "text-[#333333] hover:text-[#0055B8] font-medium transition-colors", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "Courses"), /*#__PURE__*/ React.createElement("a", { href: "https://www.myberuf.com/resources", className: "text-[#333333] hover:text-[#0055B8] font-medium transition-colors", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, "Resources"), /*#__PURE__*/ React.createElement("a", { href: "https://www.myberuf.com/exercises", className: "text-[#333333] hover:text-[#0055B8] font-medium transition-colors", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Exercises"))))), /*#__PURE__*/ React.createElement("main", { className: "relative min-h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-0", style: { backgroundImage: 'url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80")', backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundAttachment: "fixed", opacity: imageLoaded ? 0.1 : 0, transition: "opacity 0.3s ease-in" }, __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-6 py-24 relative z-10", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto text-center", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-6xl font-bold text-[#333333] mb-6", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, "Courses Coming ", /*#__PURE__*/ React.createElement("span", { className: "text-[#0055B8]", __source: { fileName: "", lineNumber: 143, columnNumber: 32 }, __self: this }, "Soon")), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-8", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, "Master workplace German with our practical, industry-focused courses")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-8 mb-12", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#333333] mb-6", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, "What to Expect"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-[#0055B8] text-xl mr-3", __source: { fileName: "", lineNumber: 159, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }, "Video Lessons")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, "On-demand lessons focused on real workplace scenarios")), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt text-[#0055B8] text-xl mr-3", __source: { fileName: "", lineNumber: 169, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 170, columnNumber: 21 }, __self: this }, "Practice Materials")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }, "Downloadable worksheets and conversation scripts")), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-industry text-[#0055B8] text-xl mr-3", __source: { fileName: "", lineNumber: 179, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 180, columnNumber: 21 }, __self: this }, "Industry Focus")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, "Specialized content for IT, healthcare, and more")), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-certificate text-[#0055B8] text-xl mr-3", __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 190, columnNumber: 21 }, __self: this }, "Certification")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, "Course completion certificates for your portfolio")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#0055B8] rounded-2xl shadow-xl p-8", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, "Get Early Access"), /*#__PURE__*/ React.createElement("p", { className: "text-white/90 mb-6", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, "Subscribe now for launch notifications and exclusive discounts"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "flex-1 px-6 py-3 rounded-full text-gray-800 placeholder-gray-400 focus:outline-none", required: true, __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "px-8 py-3 bg-white text-[#0055B8] rounded-full font-medium hover:bg-gray-100 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }, loading ? "Subscribing..." : "Subscribe")), status && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-white/90 text-sm", __source: { fileName: "", lineNumber: 227, columnNumber: 19 }, __self: this }, status))))))); }

Courses Coming Soon

What to Expect

Video Lessons

Practice Materials

Industry Focus

Certification

Get Early Access