function MainComponent() { const handleSubmit = (event)=>{ event.preventDefault(); }; const images = [ "/big-apartment1.jpg", "/big-apartment2.jpg", "/big-apartment3.jpg" ]; const [currentSlide, setCurrentSlide] = React.useState(0); const nextSlide = ()=>{ const newIndex = currentSlide === images.length - 1 ? 0 : currentSlide + 1; setCurrentSlide(newIndex); }; React.useEffect(()=>{ const intervalId = setInterval(nextSlide, 3000); return ()=>clearInterval(intervalId); }, [ currentSlide ]); const slideStyles = { backgroundImage: `url(${images[currentSlide]})`, height: '300px', animation: 'slide 1s' }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center my-8 mx-4 md:mx-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-lg w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-red-500 shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-white font-roboto text-sm mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#121212] leading-tight focus:outline-none focus:shadow-outline", required: true, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phone", className: "block text-white font-roboto text-sm mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", id: "phone", className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#121212] leading-tight focus:outline-none focus:shadow-outline", required: true, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "job-title", className: "block text-white font-roboto text-sm mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Job Title"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "jobTitle", id: "job-title", className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#121212] leading-tight focus:outline-none focus:shadow-outline", required: true, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-white hover:bg-gray-200 text-[#121212] font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Submit")))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow md:flex max-w-lg w-full md:ml-8", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-auto shadow-lg rounded overflow-hidden", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", style: slideStyles, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` @keyframes slide { 0% { opacity: 0; } 100% { opacity: 1; } } `)); }