function MainComponent() { const [isVisible, setIsVisible] = React.useState({ story: true, mission: true, features: true, contact: true }); React.useEffect(()=>{ // Set all sections to visible by default setIsVisible({ story: true, mission: true, features: true, contact: true }); const handleScroll = ()=>{ // Apply parallax effect to elements with parallax class const parallaxElements = document.querySelectorAll(".parallax-element"); parallaxElements.forEach((element)=>{ const speed = element.getAttribute("data-speed") || 0.2; const yPos = -(window.scrollY * speed); element.style.transform = `translateY(${yPos}px)`; }); }; window.addEventListener("scroll", handleScroll); // Trigger once on load handleScroll(); return ()=>{ window.removeEventListener("scroll", handleScroll); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFF0F5]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16 parallax-element", "data-speed": "0.1", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Contact Hearts & Harmony"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "We're here to help you on your journey to finding love")), /*#__PURE__*/ React.createElement("div", { id: "story-section", className: "max-w-4xl mx-auto mb-16 transition-all duration-1000 opacity-100", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-8 md:p-12 hover-float", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-800 mb-6 text-center parallax-element", "data-speed": "0.15", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Get In Touch"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center mb-8", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 mb-6 md:mb-0 md:pr-8 parallax-element", "data-speed": "0.2", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80", alt: "Contact Us", className: "rounded-lg shadow-md w-full hover-grow", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4 parallax-element", "data-speed": "0.25", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "We value your feedback and are here to answer any questions you may have about our services. Please don't hesitate to reach out to us."), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 parallax-element", "data-speed": "0.3", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, "Our dedicated team is available Monday through Friday, 9am to 5pm EST."))))), /*#__PURE__*/ React.createElement("div", { id: "mission-section", className: "max-w-4xl mx-auto mb-16 transition-all duration-1000 opacity-100", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg p-8 md:p-12 hover-float", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-800 mb-6 text-center parallax-element", "data-speed": "0.15", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Contact Form"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "parallax-element", "data-speed": "0.2", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "firstName", className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, "First Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "firstName", className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF69B4] transition-all", placeholder: "Your first name", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "parallax-element", "data-speed": "0.25", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "lastName", className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, "Last Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "lastName", className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF69B4] transition-all", placeholder: "Your last name", __source: { fileName: "", lineNumber: 123, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "parallax-element", "data-speed": "0.3", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF69B4] transition-all", placeholder: "Your email address", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "parallax-element", "data-speed": "0.35", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "subject", className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, "Subject"), /*#__PURE__*/ React.createElement("select", { id: "subject", className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF69B4] transition-all", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }, "Select a subject"), /*#__PURE__*/ React.createElement("option", { value: "general", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, "General Inquiry"), /*#__PURE__*/ React.createElement("option", { value: "support", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, "Technical Support"), /*#__PURE__*/ React.createElement("option", { value: "billing", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, "Billing Question"), /*#__PURE__*/ React.createElement("option", { value: "feedback", __source: { fileName: "", lineNumber: 154, columnNumber: 19 }, __self: this }, "Feedback"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, "Other"))), /*#__PURE__*/ React.createElement("div", { className: "parallax-element", "data-speed": "0.4", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { id: "message", rows: "5", className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#FF69B4] transition-all", placeholder: "Your message", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center parallax-element", "data-speed": "0.45", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#FF69B4] text-white px-8 py-3 rounded-lg hover:bg-[#FF1493] transition-colors text-lg font-medium hover-grow", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, "Send Message"))))), /*#__PURE__*/ React.createElement("div", { id: "features-section", className: "max-w-4xl mx-auto mb-16 transition-all duration-1000 opacity-100", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-800 mb-8 text-center parallax-element", "data-speed": "0.15", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, "Other Ways to Reach Us"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 hover-float parallax-element", "data-speed": "0.2", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#FF69B4] text-4xl mb-4 text-center", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-3 text-center", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Email Us"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "mailto:support@heartsandharmony.com", className: "text-gray-600 hover:text-[#FF69B4] transition-colors", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, "support@heartsandharmony.com"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 hover-float parallax-element", "data-speed": "0.25", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#FF69B4] text-4xl mb-4 text-center", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-alt", __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-3 text-center", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, "Call Us"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-center", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }, "+1 (555) 123-4567")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 hover-float parallax-element", "data-speed": "0.3", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#FF69B4] text-4xl mb-4 text-center", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-3 text-center", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, "Visit Us"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-center", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, "123 Love Lane", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }), "Harmony City, HC 12345")))), /*#__PURE__*/ React.createElement("div", { id: "contact-section", className: "max-w-4xl mx-auto text-center mb-16 transition-all duration-1000 opacity-100", __source: { fileName: "", lineNumber: 242, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-800 mb-6 parallax-element", "data-speed": "0.15", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }, "Connect With Us"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-8 max-w-2xl mx-auto parallax-element", "data-speed": "0.2", __source: { fileName: "", lineNumber: 252, columnNumber: 11 }, __self: this }, "Follow us on social media for updates, tips, and success stories"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-6 mb-8 parallax-element", "data-speed": "0.25", __source: { fileName: "", lineNumber: 258, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#FF69B4] text-3xl hover:text-[#FF1493] transition-colors hover-grow", __source: { fileName: "", lineNumber: 262, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#FF69B4] text-3xl hover:text-[#FF1493] transition-colors hover-grow", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#FF69B4] text-3xl hover:text-[#FF1493] transition-colors hover-grow", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#FF69B4] text-3xl hover:text-[#FF1493] transition-colors hover-grow", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "text-center text-gray-600 py-8 border-t border-gray-200 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 289, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, "© 2025 Hearts & Harmony. All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mt-4", __source: { fileName: "", lineNumber: 291, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/About Us", className: "text-gray-500 hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("a", { href: "/Terms", className: "text-gray-500 hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }, "Terms"), /*#__PURE__*/ React.createElement("a", { href: "/Privacy", className: "text-gray-500 hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 298, columnNumber: 13 }, __self: this }, "Privacy"), /*#__PURE__*/ React.createElement("a", { href: "/subscriptions", className: "text-gray-500 hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("a", { href: "/Contact", className: "text-gray-500 hover:text-[#FF69B4]", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 313, columnNumber: 7 }, __self: this }, ` @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-section { animation: fadeInUp 0.8s ease-out forwards; } .hover-float { transition: transform 0.3s ease; } .hover-float:hover { transform: translateY(-5px); } .hover-grow { transition: transform 0.3s ease; } .hover-grow:hover { transform: scale(1.05); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } `)); }