function MainComponent() { const [isOpen, setIsOpen] = React.useState(false); const toggleMenu = ()=>{ setIsOpen(!isOpen); }; const menuButton = isOpen ? "fa-times" : "fa-bars"; const mobileMenuVisibility = isOpen ? "block" : "hidden"; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f7f7f7] min-h-screen", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#0a2540] text-white p-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-semibold", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "ForeverLock"), /*#__PURE__*/ React.createElement("button", { className: `text-2xl p-2 md:hidden`, onClick: toggleMenu, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${menuButton}`, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `md:flex ${mobileMenuVisibility} absolute md:relative w-full md:w-auto bg-[#0a2540] md:bg-transparent p-4 md:p-0 z-10 md:z-auto transition-all ease-in-out duration-300`, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "block md:inline-block text-lg md:text-base py-2 md:py-0 md:mx-4 hover:text-blue-300 transition-colors duration-200", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#products", className: "block md:inline-block text-lg md:text-base py-2 md:py-0 md:mx-4 hover:text-blue-300 transition-colors duration-200", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Products"), /*#__PURE__*/ React.createElement("a", { href: "#about", className: "block md:inline-block text-lg md:text-base py-2 md:py-0 md:mx-4 hover:text-blue-300 transition-colors duration-200", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "block md:inline-block text-lg md:text-base py-2 md:py-0 md:mx-4 hover:text-blue-300 transition-colors duration-200", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("header", { className: "bg-cover bg-center h-[600px] relative", style: { backgroundImage: 'url("/images/lock-banner.jpg")' }, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black bg-opacity-50 w-full h-full flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-white font-bold mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Unbreakable Bond"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300 mb-8", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Securing your valuables forever"), /*#__PURE__*/ React.createElement("a", { href: "#products", className: "bg-blue-600 py-2 px-4 rounded text-white text-lg hover:bg-blue-700 transition-all duration-200", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Discover More"))), /*#__PURE__*/ React.createElement("section", { id: "home", className: "flex justify-center items-center text-center py-16", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl text-[#0a2540] font-semibold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Welcome to ForeverLock"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Experience the pinnacle of security with our state-of-the-art locking systems. Your peace of mind is our priority."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, ` .menu-entering, .menu-exiting { opacity: 0; } .menu-entered { opacity: 1; } `)); }