added sticky banner overlay

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "superrevive",

src/components/molecules/StickySupportBanner.tsx

@@ -0,0 +1,135 @@
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { getContactLink, getPhoneNumber } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+const StickySupportBanner = () => {
+    const [isOpen, _] = useState(true);
+    const isMobile = useIsMobile();
+    const contactLink = getContactLink("default");
+    const phoneNumber = getPhoneNumber("default");
+
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className={cn(
+                "fixed z-9999 transition-all duration-300",
+                isMobile
+                    ? "inset-0 bg-white"
+                    : "right-4 bottom-4 w-auto shadow-lg md:right-8 md:bottom-8 md:max-w-[350px] lg:max-w-[400px]",
+            )}
+        >
+            <div
+                className={cn(
+                    "flex flex-col",
+                    isMobile
+                        ? "h-full w-full"
+                        : "w-full overflow-hidden rounded-xl border border-gray-200 bg-white md:min-w-[320px]",
+                )}
+            >
+                {/* Header section */}
+                <div
+                    className={cn(
+                        "bg-linear-to-r from-blue-900 via-blue-800 to-blue-900 text-center text-white",
+                        isMobile ? "p-6" : "p-3",
+                    )}
+                >
+                    <a
+                        href={contactLink}
+                        className="flex items-center justify-center font-medium hover:underline"
+                    >
+                        <span className={isMobile ? "text-lg" : ""}>
+                            Need Help?{" "}
+                        </span>
+                        <span
+                            className={cn(
+                                "ml-1 font-bold",
+                                isMobile ? "text-lg" : "",
+                            )}
+                        >
+                            We're Here For You
+                        </span>
+                    </a>
+                </div>
+
+                {/* Center section with logo */}
+                <div
+                    className={cn(
+                        "flex flex-col items-center justify-center",
+                        isMobile ? "flex-1 px-6 py-10" : "p-4",
+                    )}
+                >
+                    <img
+                        src="/assets/spectrum.png"
+                        alt="Spectrum Support"
+                        className={isMobile ? "mb-8 h-16" : "mb-3 h-12"}
+                    />
+                    <p
+                        className={cn(
+                            "mb-8 text-center font-medium text-gray-700",
+                            isMobile ? "max-w-xs text-2xl" : "text-md",
+                        )}
+                    >
+                        Get the best Spectrum deals with zero hassle. Our team
+                        handles everything from setup to billing.
+                    </p>
+
+                    <a
+                        href={contactLink}
+                        className={cn(
+                            "mb-4 text-center",
+                            isMobile
+                                ? "text-2xl font-bold"
+                                : "text-xl font-bold",
+                        )}
+                    >
+                        {phoneNumber}
+                    </a>
+
+                    <a
+                        href={contactLink}
+                        className={isMobile ? "w-full max-w-xs" : "w-full"}
+                    >
+                        <Button
+                            variant="blue"
+                            size={isMobile ? "lg" : "default"}
+                            className="w-full py-6"
+                            onClick={() => {
+                                // @ts-ignore
+                                if (
+                                    typeof gtag_report_conversion === "function"
+                                ) {
+                                    gtag_report_conversion();
+                                }
+                            }}
+                        >
+                            Call Us Now
+                        </Button>
+                    </a>
+                </div>
+
+                {/* Footer section */}
+                <div
+                    className={cn(
+                        "border-t border-gray-200 bg-gray-50 text-center",
+                        isMobile ? "p-6" : "p-3",
+                    )}
+                >
+                    <a
+                        href={contactLink}
+                        className={cn(
+                            "font-medium text-blue-800 hover:underline",
+                            isMobile ? "text-base" : "text-sm",
+                        )}
+                    >
+                        Get the best Spectrum deals with zero hassle—call now!
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StickySupportBanner;

src/hooks/use-mobile.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+        undefined,
+    );
+
+    React.useEffect(() => {
+        const mql = window.matchMedia(
+            `(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
+        );
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+
+    return !!isMobile;
+}

src/pages/index.astro

@@ -12,7 +12,7 @@ import Stats from "@/components/Stats.astro";
 import Testimonials from "@/components/Testimonials.astro";
 import Packages from "@/components/Packages.astro";
 import { cn } from "@/lib/utils";
-import { CONTACT_EMAIL, getContactLink } from "@/lib/constants";
+import { getContactLink } from "@/lib/constants";
 import {
     Wifi,
     Tv,
@@ -24,6 +24,7 @@ import {
     Headphones,
 } from "lucide-react";
 import CallButton from "@/components/molecules/CallButton";
+import StickySupportBanner from "@/components/molecules/StickySupportBanner";
 
 const page = "default";
 ---
@@ -563,6 +564,7 @@ const page = "default";
         </MaxWidthWrapper>
 
         <Footer variant="blue" page={page} />
+        <StickySupportBanner client:load />
     </body>
 </html>