Update src/app/register/page.tsx

Merge version_2 into main

src/app/dashboard/page.tsx

@@ -4,7 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import { Users, TrendingUp, Award, Settings, Bell, User, BarChart, Activity } from "lucide-react";
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { BarChart3, TrendingUp, Users, Clock, Award } from "lucide-react";
 
 export default function DashboardPage() {
   return (
@@ -22,65 +23,42 @@ export default function DashboardPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleCentered
+            <NavbarStyleCentered
             navItems={[
+              { name: "Home", id: "/" },
               { name: "Dashboard", id: "/dashboard" },
-              { name: "Reports", id: "#" },
-              { name: "Settings", id: "#" },
-              { name: "Profile", id: "#" }
+              { name: "Contact", id: "/contact" }
             ]}
             brandName="MentorEdge"
           />
         </div>
 
-        <main className="pt-20 pb-20 px-6">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div className="col-span-1 md:col-span-2">
-              <MetricCardThree
-                animationType="depth-3d"
-                textboxLayout="default"
-                useInvertedBackground={false}
-                metrics={[
-                  { id: "m1", title: "Total Active Mentees", value: "1,240", icon: Users },
-                  { id: "m2", title: "Monthly Growth", value: "12.5%", icon: TrendingUp },
-                  { id: "m3", title: "Engagement Score", value: "94", icon: Award }
-                ]}
-                title="Performance Overview"
-                description="Real-time data visualization of your mentorship activity."
-              />
-            </div>
-            <div className="bg-card p-6 rounded-lg shadow-lg border">
-              <h3 className="text-xl font-semibold mb-4 flex items-center gap-2"><Bell className="w-5 h-5" /> Notifications</h3>
-              <p className="text-muted-foreground">No pending alerts for your current mentorship sessions.</p>
-            </div>
-          </div>
+        <div className="pt-32 pb-20" id="dashboard-metrics">
+          <MetricCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "d1", title: "Total Sessions", value: "128", icon: Users },
+              { id: "d2", title: "Hours Mentored", value: "240h", icon: Clock },
+              { id: "d3", title: "Growth Score", value: "+24%", icon: TrendingUp },
+              { id: "d4", title: "Achievements", value: "14", icon: Award }
+            ]}
+            title="Your Dashboard"
+            description="Track your progress and mentorship activity at a glance."
+          />
+        </div>
 
-          <div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div className="bg-card p-6 rounded-lg shadow-lg border">
-              <h3 className="text-xl font-semibold mb-4 flex items-center gap-2"><BarChart className="w-5 h-5" /> Session Analytics</h3>
-              <div className="h-48 flex items-center justify-center border-dashed border-2 rounded">
-                <Activity className="w-12 h-12 text-primary opacity-50 animate-pulse" />
-              </div>
-            </div>
-            <div className="bg-card p-6 rounded-lg shadow-lg border">
-              <h3 className="text-xl font-semibold mb-4 flex items-center gap-2"><User className="w-5 h-5" /> User Profile</h3>
-              <div className="flex items-center gap-4">
-                <div className="w-16 h-16 rounded-full bg-accent"></div>
-                <div>
-                  <p className="font-bold">Senior Mentor</p>
-                  <p className="text-sm">Lead Software Architect</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-10">
-            <button className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-cta-text rounded">
-              <Settings className="w-4 h-4" /> Configure Dashboard Settings
-            </button>
-          </div>
-        </main>
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Dashboard", href: "/dashboard" }, { label: "Settings", href: "#" }] },
+              { items: [{ label: "Support", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+            logoText="MentorEdge"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/login/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function LoginPage() {
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  const handleLogin = (data: Record<string, string>) => {
+    if (!data.email || !data.password) {
+      setError("All fields are required.");
+      return;
+    }
+    console.log("Logging in:", data);
+    router.push("/dashboard");
+  };
+
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[{ name: "Home", id: "/" }, { name: "Register", id: "/register" }]} 
+        brandName="MentorEdge"
+      />
+      <div className="pt-32 pb-20">
+        <ContactSplitForm
+          title="Welcome Back"
+          description="Login to your mentor account"
+          inputs={[
+            { name: "email", type: "email", placeholder: "Email", required: true },
+            { name: "password", type: "password", placeholder: "Password", required: true }
+          ]}
+          buttonText="Login"
+          onSubmit={handleLogin}
+          useInvertedBackground={false}
+        />
+        {error && <p className="text-center text-red-500 mt-4">{error}</p>}
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -80,7 +80,7 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureCardTwentyFive
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
@@ -113,7 +113,7 @@ export default function LandingPage() {
 
   <div id="metrics" data-section="metrics">
       <MetricCardThree
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[

src/app/profile/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { User } from "lucide-react";
+
+export default function ProfilePage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLarge"
+        background="fluid"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Profile", id: "/profile" },
+              { name: "Settings", id: "/settings" },
+              { name: "Dashboard", id: "/dashboard" }
+            ]}
+            brandName="MentorEdge"
+          />
+        </div>
+
+        <main className="container mx-auto py-20 px-4">
+          <h1 className="text-4xl font-bold mb-8">User Profile</h1>
+          <div className="bg-card p-8 rounded-lg shadow-sm border border-border flex items-center gap-6">
+            <div className="w-24 h-24 rounded-full bg-accent/20 flex items-center justify-center">
+              <User className="w-12 h-12" />
+            </div>
+            <div>
+              <h2 className="text-2xl font-semibold">John Doe</h2>
+              <p className="text-muted-foreground">Senior Software Engineer at TechCorp</p>
+            </div>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Profile", href: "/profile" }, { label: "Settings", href: "/settings" }] },
+              { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+            logoText="MentorEdge"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/register/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function RegisterPage() {
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  const handleRegister = (data: Record<string, string>) => {
+    if (data.password !== data.confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+    console.log("Registering:", data);
+    router.push("/dashboard");
+  };
+
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered 
+        navItems={[{ name: "Home", id: "/" }, { name: "Login", id: "/login" }]} 
+        brandName="MentorEdge"
+      />
+      <div className="pt-32 pb-20">
+        <ContactSplitForm
+          title="Create an Account"
+          description="Start your mentorship journey today"
+          inputs={[
+            { name: "name", type: "text", placeholder: "Full Name", required: true },
+            { name: "email", type: "email", placeholder: "Email", required: true },
+            { name: "password", type: "password", placeholder: "Password", required: true },
+            { name: "confirmPassword", type: "password", placeholder: "Confirm Password", required: true }
+          ]}
+          buttonText="Register"
+          onSubmit={handleRegister}
+          useInvertedBackground={false}
+        />
+        {error && <p className="text-center text-red-500 mt-4">{error}</p>}
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/settings/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function SettingsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLarge"
+        background="fluid"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Profile", id: "/profile" },
+              { name: "Settings", id: "/settings" },
+              { name: "Dashboard", id: "/dashboard" }
+            ]}
+            brandName="MentorEdge"
+          />
+        </div>
+
+        <main className="container mx-auto py-20 px-4">
+          <h1 className="text-4xl font-bold mb-8">Account Settings</h1>
+          <div className="bg-card p-8 rounded-lg shadow-sm border border-border space-y-6">
+            <div className="space-y-2">
+              <label className="block font-medium">Display Name</label>
+              <input type="text" className="w-full p-2 border rounded" placeholder="John Doe" />
+            </div>
+            <div className="space-y-2">
+              <label className="block font-medium">Email Address</label>
+              <input type="email" className="w-full p-2 border rounded" placeholder="john@example.com" />
+            </div>
+            <button className="bg-primary text-primary-foreground px-6 py-2 rounded font-medium hover:opacity-90">
+              Save Changes
+            </button>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Profile", href: "/profile" }, { label: "Settings", href: "/settings" }] },
+              { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+            logoText="MentorEdge"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}