@devvistatech/devvista-kit 0.0.1

package/components/footers/footer.tsx

@@ -0,0 +1,454 @@
+"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/FitStop.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'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">
+              24/7 Fitness Access & Diverse Classes
+            </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 315-415-4043">
+                  <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 215 W. Manlius St, East Syracuse, NY 13057 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/KathyCaiellosFitStop"
+                  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">
+                215 W. Manlius St, East Syracuse, NY 13057
+              </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">
+                  315-214-5466
+                </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">
+                  315-415-4043
+                </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/KathyCaiellosFitStop"
+                  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>
+  );
+}