Add src/app/login/page.tsx

src/app/login/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function LoginPage() {
+  const [isLogin, setIsLogin] = useState(true);
+
+  return (
+    <ThemeProvider>
+      <NavbarLayoutFloatingOverlay
+        navItems={[{ name: "Home", id: "/" }, { name: "Login", id: "/login" }]}
+        brandName="SchoolPortal"
+      />
+      <div className="min-h-screen pt-24">
+        <ContactSplitForm
+          title={isLogin ? "Sign In to SchoolPortal" : "Create an Account"}
+          description={isLogin ? "Enter your credentials to access your dashboard." : "Join our community by registering below."}
+          inputs={[
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "password", type: "password", placeholder: "Password", required: true },
+            ...(!isLogin ? [{ name: "confirmPassword", type: "password", placeholder: "Confirm Password", required: true }] : [])
+          ]}
+          buttonText={isLogin ? "Sign In" : "Sign Up"}
+          onSubmit={(data) => console.log("Form submitted:", data)}
+        />
+        <div className="text-center mt-4">
+          <button onClick={() => setIsLogin(!isLogin)} className="text-blue-500 hover:underline">
+            {isLogin ? "Don't have an account? Sign Up" : "Already have an account? Sign In"}
+          </button>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}