function MainComponent() { const handleMobileMenuClick = ()=>{ const mobileMenu = document.getElementById('mobileMenu'); mobileMenu.classList.toggle('hidden'); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] p-4 md:p-8", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center py-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold font-roboto pl-4", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Photographer Portfolio"), /*#__PURE__*/ React.createElement("nav", { id: "mobileMenu", className: "md:flex flex-col md:flex-row absolute md:relative inset-0 md:inset-auto bg-white md:bg-transparent z-10 md:z-auto hidden transition-transform duration-300 ease-in-out", style: { transform: 'translateY(-1000px)' }, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#work", className: "hover:text-[#555] text-lg font-roboto py-2 md:py-0 px-4 md:px-0 block", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Work"), /*#__PURE__*/ React.createElement("a", { href: "#about", className: "hover:text-[#555] text-lg font-roboto py-2 md:py-0 px-4 md:px-0 block", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "hover:text-[#555] text-lg font-roboto py-2 md:py-0 px-4 md:px-0 block", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { className: "md:hidden pr-4", onClick: handleMobileMenuClick, __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars fa-lg", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { id: "hero", className: "flex justify-center items-center pt-20 pb-40 bg-cover bg-center h-[300px] sm:h-[400px] md:h-[600px]", style: { backgroundImage: 'url(/images/photographer-hero.jpg)' }, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-4xl md:text-6xl font-bold font-roboto text-white", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Capturing Moments"), /*#__PURE__*/ React.createElement("a", { href: "#work", className: "bg-[#555] text-white py-2 px-6 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "View Work"))), /*#__PURE__*/ React.createElement("section", { id: "work", className: "py-20", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto mb-10 text-[#222]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "My Work"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-1.jpg", alt: "Stunning landscape", className: "w-full h-auto", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-2.jpg", alt: "Elegant wedding moment", className: "w-full h-auto", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-3.jpg", alt: "Intimate portrait", className: "w-full h-auto", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-4.jpg", alt: "Vibrant street life", className: "w-full h-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-5.jpg", alt: "Serene nature view", className: "w-full h-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-6.jpg", alt: "Urban architectural design", className: "w-full h-auto", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-7.jpg", alt: "Dynamic sports action", className: "w-full h-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/images/portfolio-8.jpg", alt: "Gentle candid capture", className: "w-full h-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { id: "about", className: "bg-white py-20", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4 lg:w-2/3 mx-auto text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto mb-6 text-[#222]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "About Me"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "I'm a passionate photographer with a love for catching the essence of the fleeting moments. With over 10 years of experience, I've mastered the art of storytelling through my lens."), /*#__PURE__*/ React.createElement("img", { src: "/images/photographer.jpg", alt: "Professional portrait of the photographer", className: "mx-auto rounded-full w-[150px] h-[150px] sm:w-[200px] sm:h-[200px] object-cover", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "py-20", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 lg:w-1/3 mx-auto bg-white p-8 shadow-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto mb-6 text-center text-[#222]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Get In Touch"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Name", className: "border-2 border-gray-300 p-2 text-lg font-roboto rounded-md", required: true, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "border-2 border-gray-300 p-2 text-lg font-roboto rounded-md", required: true, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Message", className: "border-2 border-gray-300 p-2 h-40 text-lg font-roboto rounded-md", required: true, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#555] text-white py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Send Message")))), /*#__PURE__*/ React.createElement("footer", { className: "py-4 text-center bg-[#222] text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "© 2023 Photographer Portfolio")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` @media (max-width: 768px) { #mobileMenu.hidden { display: none; } #mobileMenu { transform: translateY(0px); } } `)); }