Add src/app/admin/login/page.tsx

src/app/admin/login/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function AdminLoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const router = useRouter();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (email === "admin@demo.com" && password === "Admin@123") {
+      localStorage.setItem('adminToken', 'mock-admin-token');
+      document.cookie = 'adminToken=mock-admin-token; path=/; max-age=3600;';
+      router.push('/admin/dashboard');
+    } else {
+      setError('Invalid email or password.');
+    }
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact", id: "/contact" },
+    { name: "Admin Login", id: "/admin/login" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="large"
+      background="grid"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
+          logoAlt="SocBoost Logo"
+          brandName="SocBoost"
+          button={{
+            text: "Register",            href: "/register"
+          }}
+        />
+      </div>
+
+      <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
+        <div className="w-full max-w-md p-8 space-y-6 bg-card rounded-lg shadow-lg">
+          <h2 className="text-2xl font-bold text-center text-foreground">Admin Login</h2>
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
+              <input
+                type="email"
+                id="email"
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm text-black"
+                placeholder="admin@demo.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground">Password</label>
+              <input
+                type="password"
+                id="password"
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm text-black"
+                placeholder="Admin@123"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            {error && <p className="text-red-500 text-sm text-center">{error}</p>}
+            <button
+              type="submit"
+              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+            >
+              Log In
+            </button>
+          </form>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}