@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/footers/footer.tsx

@@ -2,23 +2,14 @@
 
 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 { 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";
 
-interface StrapiUser {
-  id: number;
-  authId: string;
-  email: string;
-  username: string;
-  businessAdminId?: string;
-  userRole?: string;
-}
-
 const baseLinks = [
   { href: "/", label: "Home" },
   { href: "/about", label: "About" },
@@ -30,17 +21,19 @@ const baseLinks = [
 
 export default function Footer() {
   const { isSignedIn } = useAuth();
-  const { user, authLoading, checkSession } = useStrapiAuth();
+  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 [error, setError] = useState<string | null>(null);
+  const hasSignedUp = useRef(false); 
 
   useEffect(() => {
     if (isSignedIn) {
       setIsLoginOpen(false);
       setIsSignupOpen(false);
       setIsAdminMenuOpen(false);
+      hasSignedUp.current = false; 
     }
   }, [isSignedIn]);
 
@@ -49,6 +42,7 @@ export default function Footer() {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "auto";
+      hasSignedUp.current = false;
     }
     return () => {
       document.body.style.overflow = "auto";
@@ -63,51 +57,59 @@ export default function Footer() {
   }, [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.");
+    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 {
-        setError(null);
-      }
+    } else if (isSignUpLoaded) {
+      console.warn("SignUp conditions not met:", {
+        isSignUpLoaded,
+        status: signUp?.status,
+        createdUserId: signUp?.createdUserId,
+        email: signUp?.emailAddress,
+        timestamp: new Date().toISOString(),
+      });
     }
-  }, [isSignedIn, user, authLoading, checkSession]);
+  }, [isSignUpLoaded, signUp, handlePostSignUp]);
 
   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">
+    <footer className="w-full bg-gray-600 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;
+          --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: 1px solid rgba(255, 255, 255, 0.2);
-          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+          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 {
@@ -115,139 +117,65 @@ export default function Footer() {
           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;
+          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;
-          max-height: 90vh;
-          overflow: hidden;
+        }
+
+        @supports not (backdrop-filter: blur(10px)) {
+          .glassmorphism,
+          .modal-glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
         }
 
         .gradient-text {
-          background: linear-gradient(90deg, var(--blue-500), var(--blue-600));
+          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
           -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;
+        @media (max-width: 768px) {
+          .mobile-contact {
+            display: flex;
           }
-
-          .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;
+          .desktop-contact {
+            display: none;
           }
         }
 
-        @supports not (backdrop-filter: blur(10px)) {
-          .glassmorphism,
-          .modal-glassmorphism {
-            background: rgba(255, 255, 255, 0.2);
+        @media (min-width: 769px) {
+          .mobile-contact {
+            display: none;
+          }
+          .desktop-contact {
+            display: flex;
           }
         }
       `}</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">
+      <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-20 rounded-full shadow-md transition-transform duration-300 ease-in-out transform hover:scale-105"
+                className="h-20 w-60 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 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 2xl:text-2xl font-bold gradient-text mb-6 uppercase tracking-tight">
+            <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">
@@ -255,7 +183,7 @@ export default function Footer() {
                 <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"
+                    className="text-sm sm:text-base lg:text-lg font-medium uppercase text-gray-300 hover:text-amber-400 transition-all"
                   >
                     {link.label}
                   </Link>
@@ -264,83 +192,116 @@ export default function Footer() {
             </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">
+          <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="flex space-x-4 2xl:hidden">
+            <ul className="mobile-contact flex flex-wrap justify-center gap-4 mb-6 lg: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
+                  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="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
+                  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://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"
+                  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 sm:h-8 sm:w-8 text-blue-500" />
+                  <MapPin className="h-6 w-6" />
                 </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"
+                  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 sm:h-8 sm:w-8 text-blue-500" />
+                  <Facebook className="h-6 w-6" />
                 </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>
+                <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 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
+              <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>
-              <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
+            </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 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
+              <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 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" />
+              <li>
                 <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"
+                  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"
                 >
-                  Facebook
+                  <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>
 
-        {/* Authentication Buttons Moved Above the Bordered Div */}
-        <div className="flex justify-center 2xl:justify-start mt-8 space-x-4 admin-menu-container">
+        <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">
@@ -358,6 +319,9 @@ export default function Footer() {
                   </SettingsButton>
                 )}
               </div>
+              {error && (
+                <p className="text-red-500 text-sm mt-2">{error}</p>
+              )}
             </SignedIn>
           )}
           {!authLoading && (
@@ -380,11 +344,10 @@ export default function Footer() {
           )}
         </div>
 
-        {/* Bordered Div Now Only Contains Copyright Text */}
-        <div className="mt-8 pt-6 border-t border-gray-700 relative">
+        <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 2xl:text-lg text-gray-400 font-medium text-center">
-              © {new Date().getFullYear()} DevVista Kit. All rights reserved.
+            <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>
@@ -414,7 +377,7 @@ export default function Footer() {
               >
                 <X className="h-6 w-6" />
               </button>
-              <SignIn routing="hash" />
+              <SignIn routing="hash" afterSignInUrl="/" />
             </motion.div>
           </motion.div>
         )}
@@ -441,7 +404,7 @@ export default function Footer() {
               >
                 <X className="h-6 w-6" />
               </button>
-              <SignUp routing="hash" />
+              <SignUp routing="hash" afterSignUpUrl="/" />
             </motion.div>
           </motion.div>
         )}

package/components/other/admin-menu.tsx

@@ -1,4 +1,3 @@
-// src/components/AdminMenu.tsx
 "use client";
 
 import Link from "next/link";
@@ -11,6 +10,7 @@ interface AdminMenuProps {
 }
 
 const menuItems = [
+  { href: "/admin-profile", label: "Admin Profile" },
   { href: "/analytics", label: "Analytics" },
   { href: "/blog", label: "Blog" },
   { href: "/adRequest", label: "Ad Requests" },