Bsl 30 Apply Page UI

app/admin/login/page.tsx

@@ -1,77 +1,58 @@
 "use client";
 
-import { useSession, signIn } from "next-auth/react";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
 
 export default function AdminLoginPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
 
-  useEffect(() => {
-    if (session) {
-      router.push("/admin");
-    }
-  }, [session, router]);
-
-  if (status === "loading" || status === "authenticated") {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-white">
-        Loading...
-      </div>
-    );
-  }
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log({ email, password });
+  };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white">
-      <div
-        style={{
-          background: "#dff0f5",
-          borderRadius: "20px",
-          padding: "48px 40px",
-          width: "100%",
-          maxWidth: "400px",
-          textAlign: "center",
-        }}
-      >
-        <h1
-          style={{
-            fontSize: "24px",
-            fontWeight: "700",
-            color: "#111",
-            marginBottom: "8px",
-          }}
-        >
-          Admin Login
-        </h1>
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <div className="w-full max-w-md space-y-8 rounded-lg border border-border bg-card p-8 shadow-sm">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold tracking-tight">Admin Login</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign in to access the admin dashboard
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="admin@example.com"
+              required
+            />
+          </div>
 
-        <p style={{ fontSize: "14px", color: "#555", marginBottom: "28px" }}>
-          Sign in to access the dashboard
-        </p>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+            />
+          </div>
 
-        <button
-          onClick={() => signIn("google", { callbackUrl: "/admin" })}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "10px",
-            width: "100%",
-            padding: "12px",
-            background: "#111",
-            color: "#fff",
-            border: "none",
-            borderRadius: "8px",
-            fontSize: "14px",
-            fontWeight: "600",
-            cursor: "pointer",
-            letterSpacing: "0.05em",
-            textTransform: "uppercase",
-          }}
-        >
-          <img src="/google.svg" width={22} height={22} alt="Google" />
-          Sign in with Google
-        </button>
+          <Button type="submit" className="w-full">
+            Sign In
+          </Button>
+        </form>
       </div>
     </div>
   );

app/apply/page.tsx

@@ -1,30 +1,45 @@
-import Link from "next/link";
-import PublicLayout from "@/components/layout/PublicLayout";
+import { useState } from "react";
 
-export default function ApplyPage() {
+const cards = [
+  { id: "startup", label: "STARTUP\nAPPLICATION", href: "/apply/startup" },
+  { id: "org", label: "ORG/COMPANY\nPROJECT FORM", href: "/apply/org" },
+  { id: "student", label: "STUDENT/PRODUCT\nTEAM SKILLS FORM [Mock for now]", href: "#" },
+];
+
+export default function StrategicLeadersPage() {
   return (
-    <PublicLayout>
-      <div className="mx-auto max-w-4xl px-6 py-12">
-        <h1 className="text-4xl font-semibold tracking-tight">Apply</h1>
-        <p className="text-gray-700 leading-relaxed mt-3">
-          Choose the application you want to start.
+    <div className="relative min-h-screen bg-white overflow-hidden flex flex-col items-center px-6 py-16">
+
+      <div className="absolute top-0 left-0 w-64 h-64 bg-rose-100 rounded-full -translate-x-1/3 -translate-y-1/4 opacity-70" />
+      <div className="absolute bottom-0 right-0 w-56 h-56 bg-rose-100 rounded-full translate-x-1/4 translate-y-1/4 opacity-70" />
+
+      <div className="relative z-10 text-center max-w-2xl mb-4">
+        <h1 className="text-4xl font-black text-black leading-tight mb-3">
+          Apply to Join a Private<br />
+          <span className="relative inline-block">
+            Network of Strategic Leaders
+            <span className="absolute left-0 -bottom-1 w-full h-0.5 bg-cyan-400" />
+          </span>
+        </h1>
+        <p className="text-gray-500 text-lg mt-4 leading-relaxed">
+          Learn from our executive strategy playbook<br />
+          and get access to our network of strategic leaders.
         </p>
+      </div>
 
-        <section className="mt-10">
-          <h2 className="text-2xl font-semibold mb-3">Application Types</h2>
-          <div className="flex flex-col gap-4">
-            <Link href="/apply/startup" className="underline text-gray-700 hover:text-black">
-              Startup Application
-            </Link>
-            <Link href="/apply/org" className="underline text-gray-700 hover:text-black">
-              Org Application
-            </Link>
-            <Link href="/apply/team" className="underline text-gray-700 hover:text-black">
-              Team Application
-            </Link>
-          </div>
-        </section>
+      <div className="relative z-10 flex flex-col sm:flex-row gap-6 mt-10 w-full max-w-4xl justify-center">
+        {cards.map((card) => (
+          <a
+            key={card.id}
+            href={card.href}
+            className="flex-1 min-h-96 bg-sky-100 rounded-3xl flex items-start justify-start p-6 hover:bg-sky-200 hover:shadow-md transition-all duration-200 group"
+          >
+            <span className="text-black font-bold text-lg uppercase tracking-wide leading-snug whitespace-pre-line group-hover:text-cyan-700 transition-colors">
+              {card.label}
+            </span>
+          </a>
+        ))}
       </div>
-    </PublicLayout>
+    </div>
   );
 }

app/leaders/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import LeaderCard2 from '@/components/ui/LeaderCard2';
 import PublicLayout from '@/components/layout/PublicLayout';
@@ -55,7 +57,6 @@ const team = [
 
 export default function Leaders() {
   return (
-    <PublicLayout>
     <div style={{
       minHeight: '100vh',
       backgroundColor: '#ffffff',