function MainComponent() { const [isVisible, setIsVisible] = React.useState({ home: false, services: false, about: false, contact: false }); const [bgImage, setBgImage] = React.useState(''); const [menuOpen, setMenuOpen] = React.useState(false); const fetchBgImage = async ()=>{ const res = await fetch('/integrations/dall-e-3/?prompt=photorealistic+image+of+many+skyscrapers%2C+looking+down+angle%2C+high+quality', { method: 'GET' }); const data = await res.json(); setBgImage(data.data[0]); }; const handleScroll = ()=>{ const scrollPosition = window.scrollY + window.innerHeight; const reveals = { home: document.getElementById('home').offsetTop + 200 < scrollPosition, services: document.getElementById('services').offsetTop + 200 < scrollPosition, about: document.getElementById('about').offsetTop + 200 < scrollPosition, contact: document.getElementById('contact').offsetTop + 200 < scrollPosition }; setIsVisible((prevVisibility)=>({ ...prevVisibility, ...reveals })); }; React.useEffect(()=>{ fetchBgImage(); window.addEventListener('scroll', handleScroll); handleScroll(); return ()=>window.removeEventListener('scroll', handleScroll); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white text-[#003366]", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex flex-col sm:flex-row justify-between items-center p-6 bg-[#003366]", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "CorpName"), /*#__PURE__*/ React.createElement("button", { className: "sm:hidden text-white text-2xl focus:outline-none", onClick: ()=>setMenuOpen(!menuOpen), __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: `${menuOpen ? 'block' : 'hidden'} sm:block mt-4 sm:mt-0`, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "text-white font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#services", className: "text-white font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "Services")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#about", className: "text-white font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "text-white font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Contact"))))), /*#__PURE__*/ React.createElement("section", { id: "home", className: `relative flex items-center justify-end text-right p-10 min-h-[400px] bg-cover bg-center bg-no-repeat transform transition duration-500 ${isVisible.home ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`, style: { backgroundImage: `url(${bgImage})` }, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-60 p-6 rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold mb-4 font-roboto text-[#003366]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Welcome to CorpName"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-6 font-roboto text-[#003366]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Leading the way in innovative solutions"), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 bg-[#003366] text-[#F8F8FF] rounded font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Get Started"))), /*#__PURE__*/ React.createElement("section", { id: "services", className: `p-10 bg-[#F8F8FF] transform transition duration-500 ${isVisible.services ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold mb-8 text-center font-roboto text-[#003366]", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Our Services"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-evenly", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[300px] m-4 p-6 bg-[#003366] text-white rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-3 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Service 1"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "High-quality service with focus on user satisfaction.")), /*#__PURE__*/ React.createElement("div", { className: "max-w-[300px] m-4 p-6 bg-[#003366] text-white rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-3 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Service 2"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Innovative solutions for all your business needs.")), /*#__PURE__*/ React.createElement("div", { className: "max-w-[300px] m-4 p-6 bg-[#003366] text-white rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-3 font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Service 3"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Expert support and guidance throughout.")))), /*#__PURE__*/ React.createElement("section", { id: "about", className: `p-10 bg-[#003366] transform transition duration-500 ${isVisible.about ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold mb-8 text-center font-roboto text-[#F8F8FF]", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("p", { className: "max-w-[800px] mx-auto text-center font-roboto text-[#F8F8FF]", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Founded in 2021, CorpName has been providing top-notch services and solutions to a wide range of clients. Our mission is to drive innovation and help businesses achieve their goals.")), /*#__PURE__*/ React.createElement("section", { id: "contact", className: `p-10 bg-[#F8F8FF] transform transition duration-500 ${isVisible.contact ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`, __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold mb-8 text-center font-roboto text-[#003366]", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("form", { className: "max-w-[600px] mx-auto space-y-4", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "name", type: "text", placeholder: "Your Name", className: "w-full p-2 rounded border border-gray-400 font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", placeholder: "Your Email", className: "w-full p-2 rounded border border-gray-400 font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Your Message", className: "w-full p-2 rounded border border-gray-400 font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-3 bg-[#003366] text-[#F8F8FF] rounded font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Send Message"))), /*#__PURE__*/ React.createElement("footer", { className: "p-6 bg-[#003366] text-center text-[#F8F8FF]", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "© 2023 CorpName. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, ` section { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; } `)); }