refactor(contact): remove SPA behavior, embed in landing page

Author: debloper

src/App.tsx

@@ -9,7 +9,6 @@ import NotFound from "./pages/NotFound";
 import SolarPanels from "./pages/SolarPanels";
 import HybridInverters from "./pages/HybridInverters";
 import BatteryStorage from "./pages/BatteryStorage";
-import ContactUs from "./pages/ContactUs";
 import PrivacyPolicy from "./pages/PrivacyPolicy";
 import TermsOfService from "./pages/TermsOfService";
 import { ThemeProvider } from "./contexts/ThemeContext";
@@ -28,7 +27,6 @@ const App = () => (
             <Route path="/solar-panels" element={<SolarPanels />} />
             <Route path="/hybrid-inverters" element={<HybridInverters />} />
             <Route path="/battery-storage" element={<BatteryStorage />} />
-            <Route path="/contact" element={<ContactUs />} />
             <Route path="/privacy-policy" element={<PrivacyPolicy />} />
             <Route path="/terms-of-service" element={<TermsOfService />} />
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}

src/components/ContactSection.tsx

@@ -1,67 +1,59 @@
 
-import React from "react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
+import React, { useEffect } from "react";
+
+declare global {
+  interface Window {
+    Tally?: {
+      loadEmbeds: () => void;
+    };
+  }
+}
 
 const ContactSection = () => {
+  useEffect(() => {
+    const scriptUrl = "https://tally.so/widgets/embed.js";
+    if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
+      const script = document.createElement("script");
+      script.src = scriptUrl;
+      script.onload = () => {
+        if (typeof window.Tally !== "undefined") {
+          window.Tally!.loadEmbeds();
+        } else {
+          const iframes = document.querySelectorAll("iframe[data-tally-src]:not([src])") as NodeListOf<HTMLIFrameElement>;
+          iframes.forEach((iframe) => {
+            iframe.src = iframe.dataset.tallySrc!;
+          });
+        }
+      };
+      script.onerror = () => {
+        const iframes = document.querySelectorAll("iframe[data-tally-src]:not([src])") as NodeListOf<HTMLIFrameElement>;
+        iframes.forEach((iframe) => {
+          iframe.src = iframe.dataset.tallySrc!;
+        });
+      };
+      document.body.appendChild(script);
+    } else {
+      if (typeof window.Tally !== "undefined") {
+        window.Tally!.loadEmbeds();
+      } else {
+        const iframes = document.querySelectorAll("iframe[data-tally-src]:not([src])") as NodeListOf<HTMLIFrameElement>;
+        iframes.forEach((iframe) => {
+          iframe.src = iframe.dataset.tallySrc!;
+        });
+      }
+    }
+  }, []);
+
   return (
-    <section id="contact" className="solar-section bg-solar-blue text-white">
+    <section id="contact" className="solar-section bg-gray-50 dark:bg-gray-900">
       <div className="solar-container">
-        <div className="text-center max-w-3xl mx-auto mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold mb-6 md:mb-10">Visit Our Store</h2>
-          <p className="text-lg text-gray-100">
-            Come see our products in person and speak with our solar experts. 
-            We're here to help you find the perfect solar solution for your needs.
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-2 gap-8 items-center">
-          <Card className="bg-white text-solar-blue overflow-hidden">
-            <CardContent className="p-0">
-              <div className="aspect-[16/9]">
-                {/* Replace with actual map or embedded Google Maps */}
-                <iframe 
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215976753674!2d-73.9878584!3d40.7484405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1590619166098!5m2!1sen!2sus" 
-                  width="100%" 
-                  height="100%" 
-                  style={{ border: 0 }} 
-                  allowFullScreen 
-                  loading="lazy"
-                  title="Store Location"
-                ></iframe>
-              </div>
-            </CardContent>
-          </Card>
-
-          <div className="bg-white text-solar-blue rounded-lg p-8">
-            <h3 className="text-2xl font-bold mb-6">Store Information</h3>
-            <div className="space-y-4">
-{/*               <div>
-                <p className="font-semibold">Address:</p>
-                <p>123 Solar Street, Greenville, CA 94536</p>
-              </div>
-              <div>
-                <p className="font-semibold">Hours:</p>
-                <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
-                <p>Saturday: 10:00 AM - 4:00 PM</p>
-                <p>Sunday: Closed</p>
-              </div>
-              <div>
-                <p className="font-semibold">Phone:</p>
-                <p>(555) 123-4567</p>
-              </div> */}
-              <div>
-                <p className="font-semibold">Email:</p>
-                <p>contact@solveenergy.com</p>
-              </div>
-              <div className="pt-4">
-                <Button className="bg-solar-gold hover:bg-opacity-90 text-solar-blue w-full">
-                  Get Directions
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <iframe
+          data-tally-src="https://tally.so/embed/QKoBLk?alignLeft=1&transparentBackground=1&dynamicHeight=1"
+          loading="lazy"
+          width="100%"
+          height="1643"
+          title="Contact us"
+        ></iframe>
       </div>
     </section>
   );

src/components/Footer.tsx

@@ -1,8 +1,22 @@
 import React from "react";
 import { Sun } from "lucide-react";
 import { Link } from "react-router-dom";
+import { off } from "process";
 
 const Footer = () => {
+  const scrollToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      const offsetTop = section.offsetTop - 64; // 64px extra padding
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
+      // Update URL hash
+      window.history.replaceState(null, '', `#${sectionId}`);
+    }
+  };
+
   return (
     <footer className="bg-solar-blue text-white py-12">
       <div className="container mx-auto px-4">
@@ -39,7 +53,18 @@ const Footer = () => {
 
           {/* Contact Info & Social */}
           <div className="space-y-4">
-            <Link to="/contact" className="text-gray-300 hover:text-solar-gold transition-colors">Contact Us</Link>
+            <Link
+              to="/#contact"
+              className="text-gray-300 hover:text-solar-gold transition-colors"
+              onClick={(e) => {
+                if (window.location.pathname === '/') {
+                  e.preventDefault();
+                  scrollToSection("contact");
+                }
+              }}
+            >
+              Contact Us
+            </Link>
             <div className="space-y-3">
               <a className="text-gray-300 hover:text-solar-gold transition-colors" href="mailto:contact@solvenergy.in">contact@solvenergy.in</a>
                 <div className="flex gap-4">

src/components/HeroSection.tsx

@@ -19,7 +19,13 @@ const HeroSection = () => {
   const scrollToNextSection = () => {
     const nextSection = document.getElementById('calculator');
     if (nextSection) {
-      nextSection.scrollIntoView({ behavior: 'smooth' });
+      const offsetTop = nextSection.offsetTop - 64; // 64px extra padding
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
+      // Update URL hash
+      window.history.replaceState(null, '', '#calculator');
     }
   };
 

src/components/LoadCalculatorSection.tsx

@@ -29,6 +29,19 @@ const LoadCalculatorSection = () => {
     hours: 1
   });
 
+  const scrollToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      const offsetTop = section.offsetTop - 64; // 64px extra padding
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
+      // Update URL hash
+      window.history.replaceState(null, '', `#${sectionId}`);
+    }
+  };
+
   const commonAppliances = [
     { name: 'LED Bulb (9W)', wattage: 9 },
     { name: 'CFL Bulb (18W)', wattage: 18 },
@@ -307,7 +320,16 @@ const LoadCalculatorSection = () => {
               </CardContent>
             </Card>
 
-            <Link to="/contact" className="block">
+            <Link
+              to="/#contact"
+              className="block"
+              onClick={(e) => {
+                if (window.location.pathname === '/') {
+                  e.preventDefault();
+                  scrollToSection("contact");
+                }
+              }}
+            >
               <Button className="w-full bg-solar-gold hover:bg-opacity-90 text-solar-blue font-semibold text-xl py-8 transition-transform hover:scale-105 duration-300">
                 Contact us for quotations!
               </Button>

src/components/Navbar.tsx

@@ -33,10 +33,22 @@ const Navbar = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    // Update URL to remove hash
+    window.history.replaceState(null, '', window.location.pathname);
+  };
+
   const scrollToSection = (sectionId: string) => {
     const section = document.getElementById(sectionId);
     if (section) {
-      section.scrollIntoView({ behavior: 'smooth' });
+      const offsetTop = section.offsetTop - 64; // 64px extra padding
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
+      // Update URL hash
+      window.history.replaceState(null, '', `#${sectionId}`);
     }
   };
 
@@ -50,7 +62,15 @@ const Navbar = () => {
     >
       <div className="container mx-auto px-4 flex justify-between items-center">
         <div className="flex items-center">
-          <Link to="/">
+          <Link
+            to="/"
+            onClick={(e) => {
+              if (window.location.pathname === '/') {
+                e.preventDefault();
+                scrollToTop();
+              }
+            }}
+          >
             <svg width="192" height="108" viewBox="0 0 1920 1080" version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg">
               <g id="g2" transform="translate(-6.0890488)">
                 <path className="stroke-[#000000] dark:stroke-[#ffffff] dark:fill-[#ffffff]" aria-label="S" d="m 179.83784,471.73318 h 99.49886 v 11.43469 h -99.49886 q -10.58136,0 -18.0907,7.50935 -7.50935,7.50934 -7.50935,18.0907 0,10.58135 7.50935,18.0907 7.50934,7.33868 18.0907,7.33868 h 62.46412 q 15.36003,0 26.11206,10.92269 10.92268,10.75202 10.92268,26.11205 0,15.36003 -10.92268,26.28272 -10.75203,10.75202 -26.11206,10.75202 H 142.8031 V 596.8321 h 99.49886 q 10.58136,0 18.09071,-7.50935 7.50934,-7.50935 7.50934,-18.09071 0,-10.58135 -7.50934,-17.92003 -7.50935,-7.50935 -18.09071,-7.50935 h -62.46412 q -15.36003,0 -26.28272,-10.75202 -10.75202,-10.92269 -10.75202,-26.28272 0,-15.36003 10.75202,-26.11205 10.92269,-10.92269 26.28272,-10.92269 z" />
@@ -154,7 +174,11 @@ const Navbar = () => {
           <div className="container mx-auto px-4 flex flex-col space-y-4">
             <Link
               to="/#calculator"
-              onClick={() => {
+              onClick={(e) => {
+                if (window.location.pathname === '/') {
+                  e.preventDefault();
+                  scrollToSection("calculator");
+                }
                 setMobileMenuOpen(false);
               }}
               className="text-solar-blue dark:text-white font-medium py-2 transition-colors text-left"
@@ -188,9 +212,15 @@ const Navbar = () => {
               </Link>
             </div>
             <Link
-              to="/contact"
+              to="/#contact"
+              onClick={(e) => {
+                if (window.location.pathname === '/') {
+                  e.preventDefault();
+                  scrollToSection("contact");
+                }
+                setMobileMenuOpen(false);
+              }}
               className="text-solar-blue dark:text-white font-medium py-2 transition-colors"
-              onClick={() => setMobileMenuOpen(false)}
             >
               Contact Us
             </Link>