function MainComponent() { return /*#__PURE__*/ React.createElement("header", { className: "w-[1920px] h-[200px] relative overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-[#c6f1d6] to-[#b8dbed]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('/path/to/geometric-pattern.png')] bg-repeat opacity-50", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex items-center justify-between px-8 h-full", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-full flex items-center justify-start", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/tree-illustration.svg", alt: "Stylized green tree illustration with rounded edges and slightly curved trunk", className: "h-full w-auto transform opacity-0 transition-all duration-1000 ease-out translate-x-[-100%] tree-illustration", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-montserrat font-bold text-[48px] text-white mb-2 opacity-0 transition-all duration-1000 ease-out delay-1000 translate-y-[50px] hover:scale-110 company-name", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Eco Urban Co."), /*#__PURE__*/ React.createElement("p", { className: "font-open-sans text-[24px] text-white opacity-0 transition-all duration-1000 ease-out delay-1000 translate-y-[50px] hover:scale-110 tagline", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Harmonizing Nature and City")), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] h-full flex items-center justify-end", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/city-illustration.svg", alt: "Stylized modern city skyline illustration in dark blue with rounded corners on the buildings", className: "h-[400px] w-auto transform opacity-0 transition-all duration-1000 ease-out translate-x-[100%] city-illustration", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, ` .tree-illustration { filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); } .city-illustration { filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); } .company-name, .tagline { text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } header:hover .company-name, header:hover .tagline { transform: scale(1.1); } header:hover .geometric-pattern { opacity: 0.3; } .tree-illustration.animate, .city-illustration.animate, .company-name.animate, .tagline.animate { opacity: 1; transform: translateX(0) translateY(0); } @media (max-width: 768px) { header { width: 100%; height: auto; } .tree-illustration, .city-illustration { position: static; width: 100%; height: auto; } .tree-illustration { margin-bottom: 20px; } .company-name { font-size: 36px; } .tagline { font-size: 18px; } } `)); }