@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/footers/footer.tsx

@@ -1,454 +1,417 @@
-"use client";
-
-import Link from "next/link";
-import Image from "next/image";
-import { Mail, Phone, MapPin, Facebook, LogIn, UserPlus, X, Settings, LogOut } from "lucide-react";
-import { useState, useEffect } from "react";
-import { SignIn, SignUp, SignedIn, SignedOut, SignOutButton as ClerkSignOutButton, useAuth } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { motion, AnimatePresence } from "framer-motion";
-import AdminMenu from "../other/admin-menu";
-import { SignInButton, SignUpButton, SignOutButton, SettingsButton } from "../other/button";
-
-interface StrapiUser {
-  id: number;
-  authId: string;
-  email: string;
-  username: string;
-  businessAdminId?: string;
-  userRole?: string;
-}
-
-const baseLinks = [
-  { href: "/", label: "Home" },
-  { href: "/about", label: "About" },
-  { href: "/contact", label: "Contact" },
-  { href: "/gallery", label: "Gallery" },
-  { href: "/schedule", label: "Schedule & Rates" },
-  { href: "/faq", label: "FAQ" },
-];
-
-export default function Footer() {
-  const { isSignedIn } = useAuth();
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const [isLoginOpen, setIsLoginOpen] = useState(false);
-  const [isSignupOpen, setIsSignupOpen] = useState(false);
-  const [isAdminMenuOpen, setIsAdminMenuOpen] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (isSignedIn) {
-      setIsLoginOpen(false);
-      setIsSignupOpen(false);
-      setIsAdminMenuOpen(false);
-    }
-  }, [isSignedIn]);
-
-  useEffect(() => {
-    if (isLoginOpen || isSignupOpen || isAdminMenuOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isLoginOpen, isSignupOpen, isAdminMenuOpen]);
-
-  useEffect(() => {
-    const event = new CustomEvent("modalStateChange", {
-      detail: { isOpen: isLoginOpen || isSignupOpen || isAdminMenuOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isLoginOpen, isSignupOpen, isAdminMenuOpen]);
-
-  useEffect(() => {
-    if (!authLoading) {
-      if (isSignedIn && !user) {
-        checkSession().catch((err) => {
-          console.error("Footer: Failed to sync user data", err);
-          setError("Failed to load user data. Please try logging out and back in.");
-        });
-      } else {
-        setError(null);
-      }
-    }
-  }, [isSignedIn, user, authLoading, checkSession]);
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId && user?.userRole === "admin";
-
-  if (authLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (error) {
-    return <div className="text-red-500">Error: {error}</div>;
-  }
-
-  return (
-    <footer className="w-full bg-[#2D2D2D] text-gray-300 border-t border-gray-700">
-      <style jsx>{`
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
-
-        :root {
-          --caviar: #2D2D2D;
-          --natural-white: #F7F7F7;
-          --blue-500: #3B82F6;
-          --blue-600: #2563EB;
-          --blue-700: #1D4ED8;
-        }
-
-        * {
-          font-family: 'Inter', sans-serif;
-        }
-
-        .glassmorphism {
-          background: rgba(255, 255, 255, 0.08);
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-        }
-
-        .modal-glassmorphism {
-          background: rgba(255, 255, 255, 0.08);
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-          border: 2px solid transparent;
-          border-image: linear-gradient(45deg, var(--blue-500), var(--blue-600), var(--blue-700)) 1;
-          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
-          border-radius: 2rem;
-          max-height: 90vh;
-          overflow: hidden;
-        }
-
-        .gradient-text {
-          background: linear-gradient(90deg, var(--blue-500), var(--blue-600));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-        }
-
-        .contact-icon {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          padding: 0.75rem;
-          border-radius: 0.5rem;
-          background: rgba(255, 255, 255, 0.1);
-          transition: color 0.2s ease, transform 0.2s ease;
-        }
-
-        .contact-icon:hover {
-          color: var(--blue-500);
-          transform: scale(1.1);
-        }
-
-        .cl-signIn-root,
-        .cl-signUp-root {
-          background: rgba(17, 24, 39, 0.95);
-          border: 1px solid #374151;
-          border-radius: 0.5rem;
-          color: white;
-          font-family: 'Inter', sans-serif;
-          max-height: 80vh;
-          overflow-y: auto;
-          max-width: 90vw;
-          box-sizing: border-box;
-        }
-
-        .cl-button {
-          background: var(--blue-500);
-        }
-
-        .cl-button:hover {
-          background: var(--blue-600);
-        }
-
-        .admin-menu-container {
-          position: relative;
-        }
-
-        @media (max-width: 640px) {
-          .cl-signIn-root,
-          .cl-signUp-root {
-            max-width: 95vw;
-            max-height: 80vh;
-            overflow-y: auto;
-            padding: 0.5rem;
-          }
-
-          .cl-signIn-root .cl-main,
-          .cl-signUp-root .cl-main {
-            font-size: 0.9rem;
-          }
-
-          .cl-signIn-root .cl-headerTitle,
-          .cl-signUp-root .cl-headerTitle {
-            font-size: 1.25rem;
-          }
-
-          .cl-signIn-root .cl-formFieldInput,
-          .cl-signUp-root .cl-formFieldInput {
-            padding: 0.5rem;
-            font-size: 0.9rem;
-            background: #1f2937;
-            color: #ffffff;
-            border: 1px solid #4b5563;
-          }
-
-          .cl-button {
-            padding: 0.5rem;
-            font-size: 0.9rem;
-          }
-
-          .modal-glassmorphism {
-            backdrop-filter: none;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 1rem;
-            max-height: 85vh;
-          }
-        }
-
-        @supports not (backdrop-filter: blur(10px)) {
-          .glassmorphism,
-          .modal-glassmorphism {
-            background: rgba(255, 255, 255, 0.2);
-          }
-        }
-      `}</style>
-
-      <div className="w-full px-4 sm:px-6 lg:px-8 2xl:px-24 py-12 sm:py-16 glassmorphism">
-        <div className="grid grid-cols-1 2xl:grid-cols-3 gap-8 sm:gap-12">
-          <div className="flex flex-col items-center 2xl:items-start">
-            <Link href="/" className="flex items-center space-x-4 mb-6">
-              <Image
-                src="/images/test.png"
-                alt="DevVista Kit Logo"
-                width={64}
-                height={64}
-                className="h-20 w-20 rounded-full shadow-md transition-transform duration-300 ease-in-out transform hover:scale-105"
-                quality={80}
-                loading="lazy"
-              />
-              <div>
-                <span className="text-lg sm:text-xl 2xl:text-2xl font-extrabold text-blue-500 uppercase tracking-tight">
-                  DevVista&apos;s
-                </span>
-                <br />
-                <span className="text-2xl sm:text-3xl 2xl:text-4xl font-extrabold text-blue-500 uppercase tracking-tight">
-                  Kit
-                </span>
-              </div>
-            </Link>
-            <p className="text-sm sm:text-base 2xl:text-lg text-gray-400 text-center 2xl:text-left font-medium">
-              The Official DevVista Kit
-            </p>
-          </div>
-
-          <div className="flex flex-col items-center">
-            <h3 className="text-lg sm:text-xl 2xl:text-2xl font-bold gradient-text mb-6 uppercase tracking-tight">
-              Quick Links
-            </h3>
-            <ul className="grid grid-cols-2 gap-x-4 gap-y-3 text-center">
-              {baseLinks.map((link) => (
-                <li key={link.href}>
-                  <Link
-                    href={link.href}
-                    className="text-sm sm:text-base 2xl:text-lg font-medium uppercase text-gray-300 hover:text-blue-400 transition-all"
-                  >
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className="flex flex-col items-center 2xl:items-end">
-            <h3 className="text-lg sm:text-xl 2xl:text-2xl font-bold gradient-text mb-6 uppercase tracking-tight">
-              Reach Out
-            </h3>
-            <ul className="flex space-x-4 2xl:hidden">
-              <li>
-                <a href="tel:3154154043" className="contact-icon text-gray-300" aria-label="Call 123-456-7892">
-                  <Phone className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500" />
-                </a>
-              </li>
-              <li>
-                <a href="mailto:devvistainfo@gmail.com" className="contact-icon text-gray-300" aria-label="Email devvistainfo@gmail.com">
-                  <Mail className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.google.com/maps/place/215+W+Manlius+St,+East+Syracuse,+NY+13057"
-                  className="contact-icon text-gray-300"
-                  aria-label="View 123 Syracuse, NY 12345 on Google Maps"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <MapPin className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500" />
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.facebook.com/"
-                  className="contact-icon text-gray-300"
-                  aria-label="Visit our Facebook page"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Facebook className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500" />
-                </a>
-              </li>
-            </ul>
-            <ul className="space-y-3 text-center 2xl:text-right hidden 2xl:block">
-              <li className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium">
-                123 Syracuse, NY 12345
-              </li>
-              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
-                <Phone className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500" />
-                <a href="tel:3152145466" className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all">
-                  123-456-7891
-                </a>
-              </li>
-              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
-                <Phone className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500" />
-                <a href="tel:3154154043" className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all">
-                  123-456-7892
-                </a>
-              </li>
-              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
-                <Mail className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500" />
-                <a href="mailto:devvistainfo@gmail.com" className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all">
-                  devvistainfo@gmail.com
-                </a>
-              </li>
-              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
-                <Facebook className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500" />
-                <a
-                  href="https://www.facebook.com/"
-                  className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Facebook
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Authentication Buttons Moved Above the Bordered Div */}
-        <div className="flex justify-center 2xl:justify-start mt-8 space-x-4 admin-menu-container">
-          {!authLoading && (
-            <SignedIn>
-              <div className="flex items-center space-x-2">
-                <ClerkSignOutButton redirectUrl="/">
-                  <SignOutButton size="sm" aria-label="Logout">
-                    Logout
-                  </SignOutButton>
-                </ClerkSignOutButton>
-                {isAdmin && (
-                  <SettingsButton
-                    size="sm"
-                    onClick={() => setIsAdminMenuOpen(true)}
-                    aria-label="Admin Menu"
-                  >
-                  </SettingsButton>
-                )}
-              </div>
-            </SignedIn>
-          )}
-          {!authLoading && (
-            <SignedOut>
-              <SignInButton
-                size="sm"
-                onClick={() => setIsLoginOpen(true)}
-                aria-label="Login"
-              >
-                Login
-              </SignInButton>
-              <SignUpButton
-                size="sm"
-                onClick={() => setIsSignupOpen(true)}
-                aria-label="Sign Up"
-              >
-                Sign Up
-              </SignUpButton>
-            </SignedOut>
-          )}
-        </div>
-
-        {/* Bordered Div Now Only Contains Copyright Text */}
-        <div className="mt-8 pt-6 border-t border-gray-700 relative">
-          <div className="flex justify-center items-center w-full mx-auto max-w-full">
-            <p className="text-sm sm:text-base 2xl:text-lg text-gray-400 font-medium text-center">
-              © {new Date().getFullYear()} DevVista Kit. All rights reserved.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <AnimatePresence>
-        {isLoginOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
-            onClick={() => setIsLoginOpen(false)}
-          >
-            <motion.div
-              initial={{ scale: 0.9, y: 20 }}
-              animate={{ scale: 1, y: 0 }}
-              exit={{ scale: 0.9, y: 20 }}
-              transition={{ type: "spring", damping: 25, stiffness: 300 }}
-              className="relative max-w-md w-full mx-4 modal-glassmorphism"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <button
-                onClick={() => setIsLoginOpen(false)}
-                className="absolute right-2 md:right-14 top-2 z-50 text-gray-600 hover:text-white hover:bg-gray-700/50 rounded-full p-3 transition-all duration-200 w-12 h-12 flex items-center justify-center"
-                aria-label="Close login modal"
-              >
-                <X className="h-6 w-6" />
-              </button>
-              <SignIn routing="hash" />
-            </motion.div>
-          </motion.div>
-        )}
-        {isSignupOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
-            onClick={() => setIsSignupOpen(false)}
-          >
-            <motion.div
-              initial={{ scale: 0.9, y: 20 }}
-              animate={{ scale: 1, y: 0 }}
-              exit={{ scale: 0.9, y: 20 }}
-              transition={{ type: "spring", damping: 25, stiffness: 300 }}
-              className="relative max-w-md w-full mx-4 modal-glassmorphism"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <button
-                onClick={() => setIsSignupOpen(false)}
-                className="absolute right-2 md:right-14 top-2 z-50 text-gray-600 hover:text-white hover:bg-gray-700/50 rounded-full p-3 transition-all duration-200 w-12 h-12 flex items-center justify-center"
-                aria-label="Close signup modal"
-              >
-                <X className="h-6 w-6" />
-              </button>
-              <SignUp routing="hash" />
-            </motion.div>
-          </motion.div>
-        )}
-        {isAdminMenuOpen && isAdmin && (
-          <AdminMenu onClose={() => setIsAdminMenuOpen(false)} />
-        )}
-      </AnimatePresence>
-    </footer>
-  );
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { Mail, Phone, MapPin, Facebook, X, Linkedin } from "lucide-react";
+import { useState, useEffect, useRef } from "react";
+import { SignIn, SignUp, SignedIn, SignedOut, SignOutButton as ClerkSignOutButton, useAuth, useSignUp } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { motion, AnimatePresence } from "framer-motion";
+import AdminMenu from "../other/admin-menu";
+import { SignInButton, SignUpButton, SignOutButton, SettingsButton } from "../other/button";
+
+const baseLinks = [
+  { href: "/", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/contact", label: "Contact" },
+  { href: "/gallery", label: "Gallery" },
+  { href: "/schedule", label: "Schedule & Rates" },
+  { href: "/faq", label: "FAQ" },
+];
+
+export default function Footer() {
+  const { isSignedIn } = useAuth();
+  const { user, authLoading, error, handlePostSignUp } = useStrapiAuth();
+  const { signUp, isLoaded: isSignUpLoaded } = useSignUp();
+  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const [isSignupOpen, setIsSignupOpen] = useState(false);
+  const [isAdminMenuOpen, setIsAdminMenuOpen] = useState(false);
+  const hasSignedUp = useRef(false); 
+
+  useEffect(() => {
+    if (isSignedIn) {
+      setIsLoginOpen(false);
+      setIsSignupOpen(false);
+      setIsAdminMenuOpen(false);
+      hasSignedUp.current = false; 
+    }
+  }, [isSignedIn]);
+
+  useEffect(() => {
+    if (isLoginOpen || isSignupOpen || isAdminMenuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+      hasSignedUp.current = false;
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isLoginOpen, isSignupOpen, isAdminMenuOpen]);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", {
+      detail: { isOpen: isLoginOpen || isSignupOpen || isAdminMenuOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isLoginOpen, isSignupOpen, isAdminMenuOpen]);
+
+  useEffect(() => {
+    if (
+      isSignUpLoaded &&
+      signUp?.status === "complete" &&
+      signUp?.createdUserId &&
+      signUp?.emailAddress &&
+      !hasSignedUp.current
+    ) {
+      hasSignedUp.current = true;
+    
+      handlePostSignUp(
+        signUp.createdUserId,
+        signUp.emailAddress,
+        signUp.username || `user_${signUp.createdUserId.slice(0, 8)}`
+      )
+        .then(() => {
+      
+          setIsSignupOpen(false);
+        })
+        .catch((error) => {
+          console.error("handlePostSignUp failed:", error, {
+            timestamp: new Date().toISOString(),
+          });
+        });
+    } else if (isSignUpLoaded) {
+      console.warn("SignUp conditions not met:", {
+        isSignUpLoaded,
+        status: signUp?.status,
+        createdUserId: signUp?.createdUserId,
+        email: signUp?.emailAddress,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }, [isSignUpLoaded, signUp, handlePostSignUp]);
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId && user?.userRole === "admin";
+
+  return (
+    <footer className="w-full bg-gray-600 text-gray-300 border-t border-gray-700">
+      <style jsx>{`
+        :root {
+          --jubilee: #F47C7C;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+          --brown-accent: #8B4513;
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal-glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+          border-radius: 2rem;
+        }
+
+        @supports not (backdrop-filter: blur(10px)) {
+          .glassmorphism,
+          .modal-glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+
+        .gradient-text {
+          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+
+        @media (max-width: 768px) {
+          .mobile-contact {
+            display: flex;
+          }
+          .desktop-contact {
+            display: none;
+          }
+        }
+
+        @media (min-width: 769px) {
+          .mobile-contact {
+            display: none;
+          }
+          .desktop-contact {
+            display: flex;
+          }
+        }
+      `}</style>
+
+      <div className="w-full px-4 sm:px-6 lg:px-24 py-12 sm:py-16 glassmorphism">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 sm:gap-12">
+          <div className="flex flex-col items-center lg:items-start">
+            <Link href="/" className="flex items-center space-x-4 mb-6">
+              <Image
+                src="/images/test.png"
+                alt="DevVista Kit Logo"
+                width={64}
+                height={64}
+                className="h-20 w-60 transition-transform duration-300 ease-in-out transform hover:scale-105"
+                quality={80}
+                loading="lazy"
+              />
+            </Link>
+            <p className="text-sm sm:text-base lg:text-lg text-gray-300 text-center lg:text-left font-medium">
+             The Official DevVista Kit
+            </p>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg sm:text-xl lg:text-2xl font-bold gradient-text mb-6 uppercase tracking-tight">
+              Quick Links
+            </h3>
+            <ul className="grid grid-cols-2 gap-x-4 gap-y-3 text-center">
+              {baseLinks.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-sm sm:text-base lg:text-lg font-medium uppercase text-gray-300 hover:text-amber-400 transition-all"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg sm:text-xl lg:text-2xl font-bold gradient-text mb-6 uppercase tracking-tight">
+              Reach Out
+            </h3>
+            <ul className="mobile-contact flex flex-wrap justify-center gap-4 mb-6 lg:hidden">
+              <li>
+                <a
+                  href="mailto:test@gmail.com"
+                  className="text-gray-300 hover:text-amber-400 transition-all"
+                  aria-label="Email DevVista"
+                >
+                  <Mail className="h-6 w-6" />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="tel:+13154875931"
+                  className="text-gray-300 hover:text-amber-400 transition-all"
+                  aria-label="Call Devvista"
+                >
+                  <Phone className="h-6 w-6" />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://maps.app.goo.gl/aTvx3qA7r7vL3fGi8"
+                  className="text-gray-300 hover:text-amber-400 transition-all"
+                  aria-label="View Devvista on Google Maps"
+                >
+                  <MapPin className="h-6 w-6" />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://facebook.com"
+                  className="text-gray-300 hover:text-amber-400 transition-all"
+                  aria-label="Visit Devvista on Facebook"
+                >
+                  <Facebook className="h-6 w-6" />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://x.com"
+                  className="text-gray-300 hover:text-amber-400 transition-all"
+                  aria-label="Visit Devvista on X"
+                >
+                  <X className="h-6 w-6" />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://linkedin.com"
+                  className="text-gray-300 hover:text-amber-400 transition-all"
+                  aria-label="Visit DevVista on LinkedIn"
+                >
+                  <Linkedin className="h-6 w-6" />
+                </a>
+              </li>
+            </ul>
+            <ul className="desktop-contact flex-wrap justify-center gap-4 mb-6 hidden lg:flex">
+              <li>
+                <a
+                  href="mailto:test@gmail.com"
+                  className="flex items-center text-sm sm:text-base lg:text-lg font-medium text-gray-300 hover:text-amber-400 transition-all"
+                >
+                  <Mail className="h-5 w-5 mr-2" />
+                  test@gmail.com
+                </a>
+              </li>
+              <li>
+                <a
+                  href="tel:+13154875931"
+                  className="flex items-center text-sm sm:text-base lg:text-lg font-medium text-gray-300 hover:text-amber-400 transition-all"
+                >
+                  <Phone className="h-5 w-5 mr-2" />
+                  (315) 487-5931
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://maps.app.goo.gl/aTvx3qA7r7vL3fGi8"
+                  className="flex items-center text-sm sm:text-base lg:text-lg font-medium text-gray-300 hover:text-amber-400 transition-all"
+                >
+                  <MapPin className="h-5 w-5 mr-2" />
+                  123 Vista Road, Syracuse, NY
+                </a>
+              </li>
+            </ul>
+            <ul className="space-y-3 text-center">
+              <li className="text-sm sm:text-base lg:text-lg text-stone-100 font-medium opacity-90">
+                123 Vista Road Syracuse, NY, Syracuse, NY 13219
+              </li>
+              <li className="text-sm sm:text-base lg:text-lg text-stone-100 font-medium opacity-90">
+                <strong style={{ color: "var(--brown-accent)" }}>Summer Hours</strong> (Mar 1 – Dec 31):<br />
+                Mon–Fri: 8:00AM – 5:00PM
+                <br />
+                <strong style={{ color: "var(--brown-accent)" }}>Winter Hours</strong> (Jan 1 – Feb 28):<br />
+                Mon–Fri: 9:00AM – 4:00PM
+                <br />
+                <hr className="my-2 border-stone-400 opacity-50 w-3/4 mx-auto" />
+                Sat: 9:00AM – 2:00PM
+                <br />
+                Sun: Closed
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="desktop-auth flex justify-center lg:justify-start mt-8 space-x-4 admin-menu-container">
+          {!authLoading && (
+            <SignedIn>
+              <div className="flex items-center space-x-2">
+                <ClerkSignOutButton redirectUrl="/">
+                  <SignOutButton size="sm" aria-label="Logout">
+                    Logout
+                  </SignOutButton>
+                </ClerkSignOutButton>
+                {isAdmin && (
+                  <SettingsButton
+                    size="sm"
+                    onClick={() => setIsAdminMenuOpen(true)}
+                    aria-label="Admin Menu"
+                  >
+                  </SettingsButton>
+                )}
+              </div>
+              {error && (
+                <p className="text-red-500 text-sm mt-2">{error}</p>
+              )}
+            </SignedIn>
+          )}
+          {!authLoading && (
+            <SignedOut>
+              <SignInButton
+                size="sm"
+                onClick={() => setIsLoginOpen(true)}
+                aria-label="Login"
+              >
+                Login
+              </SignInButton>
+              <SignUpButton
+                size="sm"
+                onClick={() => setIsSignupOpen(true)}
+                aria-label="Sign Up"
+              >
+                Sign Up
+              </SignUpButton>
+            </SignedOut>
+          )}
+        </div>
+
+        <div className="mt-8 pt-6 border-t border-gray-800 relative">
+          <div className="flex justify-center items-center w-full mx-auto max-w-full">
+            <p className="text-sm sm:text-base lg:text-lg text-gray-300 font-medium text-center">
+              © {new Date().getFullYear()} DevVista. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {isLoginOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+            onClick={() => setIsLoginOpen(false)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, y: 20 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 20 }}
+              transition={{ type: "spring", damping: 25, stiffness: 300 }}
+              className="relative max-w-md w-full mx-4 modal-glassmorphism"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                onClick={() => setIsLoginOpen(false)}
+                className="absolute right-2 md:right-14 top-2 z-50 text-gray-600 hover:text-white hover:bg-gray-700/50 rounded-full p-3 transition-all duration-200 w-12 h-12 flex items-center justify-center"
+                aria-label="Close login modal"
+              >
+                <X className="h-6 w-6" />
+              </button>
+              <SignIn routing="hash" afterSignInUrl="/" />
+            </motion.div>
+          </motion.div>
+        )}
+        {isSignupOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+            onClick={() => setIsSignupOpen(false)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, y: 20 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 20 }}
+              transition={{ type: "spring", damping: 25, stiffness: 300 }}
+              className="relative max-w-md w-full mx-4 modal-glassmorphism"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                onClick={() => setIsSignupOpen(false)}
+                className="absolute right-2 md:right-14 top-2 z-50 text-gray-600 hover:text-white hover:bg-gray-700/50 rounded-full p-3 transition-all duration-200 w-12 h-12 flex items-center justify-center"
+                aria-label="Close signup modal"
+              >
+                <X className="h-6 w-6" />
+              </button>
+              <SignUp routing="hash" afterSignUpUrl="/" />
+            </motion.div>
+          </motion.div>
+        )}
+        {isAdminMenuOpen && isAdmin && (
+          <AdminMenu onClose={() => setIsAdminMenuOpen(false)} />
+        )}
+      </AnimatePresence>
+    </footer>
+  );
 }