function MainComponent() { const [isZoomed, setIsZoomed] = React.useState(false); const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [formData, setFormData] = React.useState({ name: '', email: '', message: '' }); const [formErrors, setFormErrors] = React.useState({}); const handleImageClick = ()=>{ setIsZoomed(!isZoomed); }; const handleMenuToggle = ()=>{ setIsMenuOpen(!isMenuOpen); }; const handleInputChange = (event)=>{ const { name, value } = event.target; setFormData({ ...formData, [name]: value }); setFormErrors({ ...formErrors, [name]: '' }); }; const handleSubmit = (event)=>{ event.preventDefault(); const newErrors = {}; if (!formData.name.trim()) { newErrors.name = 'Name is required'; } if (!formData.email) { newErrors.email = 'Email is required'; } else if (!validateEmail(formData.email)) { newErrors.email = 'Email is invalid'; } if (!formData.message.trim()) { newErrors.message = 'Message is required'; } setFormErrors(newErrors); if (Object.keys(newErrors).length === 0) { console.log('Form is valid'); // Form submission logic here } }; const validateEmail = (email)=>{ const re = /^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f7f7f7] text-[#333]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#maincontent", className: "sr-only focus:not-sr-only", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "Skip to main content"), /*#__PURE__*/ React.createElement("header", { className: "bg-[#ffffff] p-4 shadow-md", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "max-w-6xl mx-auto flex items-center justify-between", "aria-label": "Main navigation", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#maincontent", className: "text-xl font-bold text-[#007acc]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Smyku", /*#__PURE__*/ React.createElement("span", { className: "text-[#ff6600]", __source: { fileName: "", lineNumber: 58, columnNumber: 18 }, __self: this }, ".pl")), /*#__PURE__*/ React.createElement("button", { type: "button", className: "md:hidden text-[#007acc] focus:outline-none", "aria-controls": "menu", "aria-expanded": isMenuOpen, onClick: handleMenuToggle, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "Menu", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "🍔")), /*#__PURE__*/ React.createElement("div", { className: `${isMenuOpen ? 'block' : 'hidden'} md:block`, id: "menu", "aria-hidden": !isMenuOpen, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#maincontent", className: "hover:text-[#007acc] block md:inline", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#services", className: "hover:text-[#007acc] block md:inline", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Services"), /*#__PURE__*/ React.createElement("a", { href: "#portfolio", className: "hover:text-[#007acc] block md:inline", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Portfolio"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "hover:text-[#007acc] block md:inline", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("main", { id: "maincontent", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-[#007acc] text-white p-8", "aria-labelledby": "hero-heading", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { id: "hero-heading", className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Professional Websites"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "User-friendly, fully responsive, and easy to navigate websites.")), /*#__PURE__*/ React.createElement("section", { className: "p-8", "aria-labelledby": "about-heading", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { id: "about-heading", className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "About Me"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "We are a team of enthusiasts united by one passion: crafting websites.")), /*#__PURE__*/ React.createElement("section", { className: "bg-[#f0f0f0] p-8", "aria-labelledby": "services-heading", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { id: "services-heading", className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Our Services"), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: handleImageClick, className: "cursor-zoom-in", role: "button", "aria-expanded": isZoomed, "aria-label": "Zoom image", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/service-web-design.jpg", alt: "Responsive web design service", className: `w-full h-auto transition-transform ${isZoomed ? 'scale-125' : 'scale-100'}`, __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold my-2", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, "Web Design"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, "Creating beautiful, responsive websites."))))), /*#__PURE__*/ React.createElement("section", { className: "p-8", "aria-labelledby": "portfolio-heading", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { id: "portfolio-heading", className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Portfolio")))); }