function MainComponent() { const [menuVisible, setMenuVisible] = React.useState(false); // Effect to animate the appearance of menu items React.useEffect(()=>{ if (menuVisible) { const timer = setTimeout(()=>{ const items = document.querySelectorAll('.menu-item'); items.forEach((item)=>{ item.style.opacity = 1; }); }, 1000); return ()=>clearTimeout(timer); } }, [ menuVisible ]); // Function to trigger the menu animation and reveal items function revealMenu() { setMenuVisible(true); } // Trigger the menu reveal effect on mount React.useEffect(()=>{ revealMenu(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex w-full h-screen", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-full bg-white flex flex-col items-start justify-center pl-20 space-y-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "menu-item opacity-0 transition-opacity duration-700 ease-in-out", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-4xl ml-6", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right absolute right-20", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "menu-item opacity-0 transition-opacity duration-700 ease-in-out", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-xl", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-4xl ml-6", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Studio"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right absolute right-20", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "menu-item opacity-0 transition-opacity duration-700 ease-in-out", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-xl", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-4xl ml-6", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Service"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right absolute right-20", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "menu-item opacity-0 transition-opacity duration-700 ease-in-out", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-4xl ml-6", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Project"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right absolute right-20", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "menu-item opacity-0 transition-opacity duration-700 ease-in-out", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-xl", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "5"), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-4xl ml-6", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right absolute right-20", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-full bg-black flex flex-col items-start justify-between p-20 text-white", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-5xl tracking-widest", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "HORIZON STUDIO"), /*#__PURE__*/ React.createElement("p", { className: "mt-6 text-sm", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "323 Main Street, Los Angeles, CA 90001"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-sm", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "+1(555) 123-4567")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mr-10", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-semibold", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "A"), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mt-6", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Business"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "info@horizonstudio.com")), /*#__PURE__*/ React.createElement("div", { className: "mr-10", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-semibold", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mt-6", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Career"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "job@horizonstudio.com")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-semibold", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "C"), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mt-6", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Social"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Instagram"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Facebook"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "LinkedIn")), /*#__PURE__*/ React.createElement("div", { className: "ml-10", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-semibold", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "D"), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mt-6", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Legal"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Privacy"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Terms"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full items-end", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-light", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "*SITE INFO"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-light", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "©2024 ALL RIGHTS RESERVED")))); }