function MainComponent() { const handleSmoothScroll = (e)=>{ e.preventDefault(); const targetId = e.currentTarget.getAttribute("href"); const targetElement = document.querySelector(targetId); targetElement.scrollIntoView({ behavior: "smooth" }); }; return /*#__PURE__*/ React.createElement("div", { className: "font-opensans bg-[#f5f5f5] text-[#333333]", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#3498db] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto font-bold", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "HabitTracker"), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#hero", className: "mx-4", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#features", className: "mx-4", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("a", { href: "#calendar", className: "mx-4", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Calendar"), /*#__PURE__*/ React.createElement("a", { href: "#testimonials", className: "mx-4", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Testimonials")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#e74c3c] text-white px-4 py-2 rounded-[4px]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Get Started")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "hero", className: "text-center p-20 bg-[#3498db] text-white", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[36px] font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Track Habits, Achieve Goals"), /*#__PURE__*/ React.createElement("p", { className: "text-[16px] mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Simple and effective habit tracking tool"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#e74c3c] text-white px-6 py-3 rounded-[4px]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Start for Free")), /*#__PURE__*/ React.createElement("section", { id: "features", className: "py-20 px-5%", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[28px] font-roboto font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Features")), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar-alt text-[#3498db] text-3xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Calendar View"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Track your habits on a calendar view for an overview.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chart-line text-[#3498db] text-3xl mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Progress Analysis"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Analyze your progress over time to stay motivated.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell text-[#3498db] text-3xl mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Set Reminders"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Set reminders to keep track of your daily habits.")))), /*#__PURE__*/ React.createElement("section", { id: "calendar", className: "py-20 px-5%", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[28px] font-roboto font-bold", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Calendar")), /*#__PURE__*/ React.createElement("div", { id: "calendarComponent", className: "bg-white p-6 rounded shadow", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "eventPopup", className: "hidden fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Add New Event"), /*#__PURE__*/ React.createElement("form", { id: "eventForm", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "title", type: "text", placeholder: "Event Title", className: "w-full mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { id: "eventDate", name: "date", type: "date", className: "w-full mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3498db] text-white px-6 py-2 rounded-[4px]", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "Add Event")))))), /*#__PURE__*/ React.createElement("section", { id: "testimonials", className: "py-20 px-5%", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[28px] font-roboto font-bold", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Testimonials")), /*#__PURE__*/ React.createElement("div", { id: "testimonialCarousel", className: "flex space-x-4 overflow-hidden", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-min-w-[300px]", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, '"This app has transformed my habits!"'), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-bold", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "- Alex")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-min-w-[300px]", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, '"Easy to use and very effective."'), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-bold", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "- Bailey")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-min-w-[300px]", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, '"I love tracking my progress."'), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-bold", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "- Charlie")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#333333] text-white py-10 px-5%", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Sitemap"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#hero", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 96, columnNumber: 21 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#features", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, "Features")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#calendar", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 98, columnNumber: 21 }, __self: this }, "Calendar")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#testimonials", onClick: handleSmoothScroll, __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, "Testimonials")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Legal Info"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, "Privacy Policy"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "Terms of Use"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Social Media"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-square text-xl", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter-square text-xl", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-xl", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-bold mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "Newsletter"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", placeholder: "Your Email", className: "w-full mb-4 p-2 border rounded", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#e74c3c] text-white px-6 py-2 rounded-[4px]", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "Subscribe")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, ` #testimonialCarousel { animation: carousel 10s infinite; } @keyframes carousel { 0%, 33.3%, 100% { transform: translateX(0); } 33.4%, 66.6% { transform: translateX(-100%); } 66.7%, 99.9% { transform: translateX(-200%); } } `)); } document.addEventListener("DOMContentLoaded", ()=>{ const calendarEl = document.getElementById("calendarComponent"); const calendar = new FullCalendar.Calendar(calendarEl, { initialView: "dayGridMonth", dateClick: function(info) { document.getElementById("eventPopup").classList.remove("hidden"); document.getElementById("eventDate").value = info.dateStr; } }); calendar.render(); document.getElementById("eventForm").addEventListener("submit", function(e) { e.preventDefault(); const title = e.target.title.value; const date = e.target.date.value; if (title && date) { calendar.addEvent({ title, start: date }); document.getElementById("eventPopup").classList.add("hidden"); } }); });