From 748497e4ca0012c8ceb8d10e6bd1f2f2ac36b674 Mon Sep 17 00:00:00 2001
From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com>
Date: Mon, 10 Feb 2025 21:43:59 +0530
Subject: [PATCH 1/3] Fixed dashboard navbar

---
 app/dashboard/layout.tsx                      | 14 ++-
 app/dashboard/page.tsx                        | 89 +++++++++++--------
 app/layout.tsx                                |  2 -
 components/AuthComponent/Logout.tsx           | 62 +++++++++++++
 components/dashboardComponents/AppSidebar.tsx | 29 +-----
 .../dashboardComponents/DashboardNavbar.tsx   | 89 +++++++++++++++++++
 components/ui/button.tsx                      |  6 +-
 7 files changed, 213 insertions(+), 78 deletions(-)
 create mode 100644 components/AuthComponent/Logout.tsx
 create mode 100644 components/dashboardComponents/DashboardNavbar.tsx

diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index d1252b9..988b927 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -1,4 +1,5 @@
 import { AppSidebar } from "@/components/dashboardComponents/AppSidebar";
+import { DashboardNavbar } from "@/components/dashboardComponents/DashboardNavbar";
 import MobileSidear from "@/components/dashboardComponents/MobileSidebar";
 import type { Metadata } from "next";
 export const metadata: Metadata = {
@@ -11,14 +12,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main className="flex min-h-screen overflow-hidden md:gap-3 md:p-3 h-full">
-      <div className="md:block hidden">
-        <AppSidebar />
+    <main className="min-h-screen max-w-7xl mx-auto px-3">
+      <DashboardNavbar />
+      <div className="w-full dark:bg-neutral-900 md:p-6 p-3 bg-neutral-200 md:rounded-xl rounded-sm">
+        {children}
       </div>
-      <div className="md:hidden block fixed top-1 left-1 w-full z-50">
-        <MobileSidear/>
-      </div>
-      <div className="w-full dark:bg-neutral-900 md:p-6 p-3 bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index b58c5de..bba9d75 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -17,9 +17,8 @@ import {
   Trophy,
   TrendingUp,
   CheckCircle,
-  XCircle,
-  Calendar
 } from "lucide-react";
+import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
 
 export default function Dashboard() {
   const { fetchLeetcodeUserProfile, leetcodeUserProfile } = useLeetcodeStore();
@@ -32,6 +31,7 @@ export default function Dashboard() {
   }
   return (
     <div className="flex flex-col p-4 sm:p-6 md:p-8">
+      <V2Navbar />
       <Card className="w-full max-w-4xl mx-auto shadow-xl border-none">
         <CardHeader className="flex flex-col sm:flex-row items-center gap-6 pb-6 border-b">
           <div className="relative w-32 h-32 sm:w-40 sm:h-40">
@@ -76,21 +76,23 @@ export default function Dashboard() {
                   <StatItem
                     icon={<Book className="w-5 h-5 text-blue-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[0].count ||
-                      0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[0]
+                        .count || 0
                     }
                     label="Total Solved"
                     subtitle={`${(
-                      (leetcodeUserProfile.submitStats.acSubmissionNum[0].count /
-                        leetcodeUserProfile.submitStats.totalSubmissionNum[0].count) *
+                      (leetcodeUserProfile.submitStats.acSubmissionNum[0]
+                        .count /
+                        leetcodeUserProfile.submitStats.totalSubmissionNum[0]
+                          .count) *
                       100
                     ).toFixed(1)}% success rate`}
                   />
                   <StatItem
                     icon={<Target className="w-5 h-5 text-green-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[1].count ||
-                      0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[1]
+                        .count || 0
                     }
                     label="Easy Problems"
                     subtitle={`${leetcodeUserProfile.submitStats.acSubmissionNum[1].submissions} submissions`}
@@ -98,8 +100,8 @@ export default function Dashboard() {
                   <StatItem
                     icon={<Target className="w-5 h-5 text-yellow-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[2].count ||
-                      0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[2]
+                        .count || 0
                     }
                     label="Medium Problems"
                     subtitle={`${leetcodeUserProfile.submitStats.acSubmissionNum[2].submissions} submissions`}
@@ -107,8 +109,8 @@ export default function Dashboard() {
                   <StatItem
                     icon={<Target className="w-5 h-5 text-red-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[3].count ||
-                      0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[3]
+                        .count || 0
                     }
                     label="Hard Problems"
                     subtitle={`${leetcodeUserProfile.submitStats.acSubmissionNum[3].submissions} submissions`}
@@ -131,7 +133,10 @@ export default function Dashboard() {
                     icon={<Star className="w-5 h-5 text-yellow-500" />}
                     value={leetcodeUserProfile.profile.starRating}
                     label="Contest Rating"
-                    subtitle={`Level ${Math.floor(leetcodeUserProfile.profile.starRating / 500) + 1}`}
+                    subtitle={`Level ${
+                      Math.floor(leetcodeUserProfile.profile.starRating / 500) +
+                      1
+                    }`}
                   />
                   <StatItem
                     icon={<CheckCircle className="w-5 h-5 text-green-500" />}
@@ -143,32 +148,32 @@ export default function Dashboard() {
               </div>
             </div>
             <br></br>
-          {/* Original Badges */}
-          <div className="grid gap-6 md:grid-cols-3">
-            <div className="space-y-4">
-              <h3 className="text-xl font-semibold mb-6">Recent Badges</h3>
-              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-                {leetcodeUserProfile.badges.slice(0, 5).map((badge) => (
-                  <div
-                    key={badge.id}
-                    className="flex flex-col items-center p-2 bg-secondary rounded-lg"
-                  >
-                    <div className="relative w-12 h-12 mb-2">
-                      <Image
-                        src={badge.icon}
-                        alt={badge.displayName}
-                        fill
-                        className="object-contain"
-                      />
+            {/* Original Badges */}
+            <div className="grid gap-6 md:grid-cols-3">
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold mb-6">Recent Badges</h3>
+                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                  {leetcodeUserProfile.badges.slice(0, 5).map((badge) => (
+                    <div
+                      key={badge.id}
+                      className="flex flex-col items-center p-2 bg-secondary rounded-lg"
+                    >
+                      <div className="relative w-12 h-12 mb-2">
+                        <Image
+                          src={badge.icon}
+                          alt={badge.displayName}
+                          fill
+                          className="object-contain"
+                        />
+                      </div>
+                      <span className="text-xs text-center">
+                        {badge.displayName}
+                      </span>
                     </div>
-                    <span className="text-xs text-center">
-                      {badge.displayName}
-                    </span>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
             </div>
-          </div>
             {/* Submission Timeline */}
             <div className="mt-8">
               <h3 className="text-xl font-semibold mb-4 flex items-center">
@@ -179,8 +184,14 @@ export default function Dashboard() {
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                   <TimelineStat
                     label="All Time"
-                    value={leetcodeUserProfile.submitStats.totalSubmissionNum[0].count}
-                    total={leetcodeUserProfile.submitStats.totalSubmissionNum[0].count}
+                    value={
+                      leetcodeUserProfile.submitStats.totalSubmissionNum[0]
+                        .count
+                    }
+                    total={
+                      leetcodeUserProfile.submitStats.totalSubmissionNum[0]
+                        .count
+                    }
                   />
                 </div>
               </div>
@@ -306,4 +317,4 @@ function DashboardSkeleton() {
       </Card>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 7e00d5d..b6a169c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,6 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
-import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,7 +19,6 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <V2Navbar />
           {children}
         </ThemeProvider>
       </body>
diff --git a/components/AuthComponent/Logout.tsx b/components/AuthComponent/Logout.tsx
new file mode 100644
index 0000000..a2ab121
--- /dev/null
+++ b/components/AuthComponent/Logout.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
+import { LogOut } from "lucide-react";
+import { signout } from "@/app/actions/action";
+import { useRouter } from "next/navigation";
+import { Button } from "../ui/button";
+
+type buttonVariant =
+  | "link"
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | null
+  | undefined;
+
+export default function Logout({ variant = "default" }: { variant?: buttonVariant }) {
+  const router = useRouter();
+  const handleLogout = async () => {
+    try {
+      signout();
+      router.push("/auth/signin");
+    } catch (error) {
+      console.error("Sign out error:", error);
+    }
+  };
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>
+        <Button variant={variant} size={"sm"}>
+          Logout
+          <LogOut />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action will Logout you from the application.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleLogout}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/components/dashboardComponents/AppSidebar.tsx b/components/dashboardComponents/AppSidebar.tsx
index c8db18f..548e02e 100644
--- a/components/dashboardComponents/AppSidebar.tsx
+++ b/components/dashboardComponents/AppSidebar.tsx
@@ -27,21 +27,14 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog"
+import Logout from "../AuthComponent/Logout";
 
 
 export function AppSidebar() {
   const { setTheme, theme } = useTheme();
   const pathname = usePathname();
-  const router = useRouter();
   const [isCollapsed, setIsCollapsed] = React.useState(false);
-  const handleLogout = async () => {
-    try {
-      signout();
-      router.push('/auth/signin');
-    } catch (error) {
-      console.error("Sign out error:", error);
-    }
-  };
+
 
   return (
     <aside
@@ -107,23 +100,7 @@ export function AppSidebar() {
             <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span className="sr-only">Toggle theme</span>
           </Button>
-          <AlertDialog>
-            <AlertDialogTrigger>
-              <LogOut className="cursor-pointer h-[1.8rem] w-[1.8rem] bg-grey " />
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This action will Logout you from the application.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction onClick={handleLogout}>Continue</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+          <Logout/>
         </div>
       </div>
     </aside>
diff --git a/components/dashboardComponents/DashboardNavbar.tsx b/components/dashboardComponents/DashboardNavbar.tsx
new file mode 100644
index 0000000..edcbe1c
--- /dev/null
+++ b/components/dashboardComponents/DashboardNavbar.tsx
@@ -0,0 +1,89 @@
+"use client";
+import { Menu } from "lucide-react";
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../ui/sheet";
+import { Separator } from "../ui/separator";
+import { Button } from "../ui/button";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { ToggleTheme } from "../DashboardV2/ToggleTheme";
+import Logout from "../AuthComponent/Logout";
+import { SidebarData } from "@/data/SidebarData";
+
+export const DashboardNavbar = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <header className="shadow-inner w-full my-3 lg:max-w-screen-xl top-5 mx-auto  border border-secondary z-40 rounded-2xl flex justify-between items-center p-2 bg-secondary/30 backdrop-blur-md">
+      <Link href="/" className="flex items-center font-semibold">
+        <Avatar>
+          <AvatarImage src="/logo.png" />
+          <AvatarFallback>LC</AvatarFallback>
+        </Avatar>
+        Leetcode Journal
+      </Link>
+      {/* <!-- Mobile --> */}
+      <div className="flex items-center lg:hidden">
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger asChild>
+            <Menu
+              onClick={() => setIsOpen(!isOpen)}
+              className="cursor-pointer lg:hidden"
+            />
+          </SheetTrigger>
+
+          <SheetContent
+            side="left"
+            className="flex flex-col justify-between rounded-tr-2xl rounded-br-2xl bg-card border-secondary"
+          >
+            <div>
+              <SheetHeader className="mb-4 ml-4">
+                <SheetTitle className="flex items-center">
+                  <Link href="/" className="flex items-center">
+                    <Avatar>
+                      <AvatarImage src="/logo.png" />
+                      <AvatarFallback>LC</AvatarFallback>
+                    </Avatar>
+                    Leetcode Journal
+                  </Link>
+                </SheetTitle>
+              </SheetHeader>
+
+              <div className="flex flex-col gap-2">
+                {SidebarData.map(({ href, title }) => (
+                  <Button
+                    key={href}
+                    onClick={() => setIsOpen(false)}
+                    asChild
+                    variant="ghost"
+                    className="justify-start text-base"
+                  >
+                    <Link href={href}>{title}</Link>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            <SheetFooter className="flex-col sm:flex-col justify-start items-start">
+              <Separator className="mb-2" />
+
+              <ToggleTheme />
+              <Logout variant={"destructive"} />
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      <div className="hidden lg:flex gap-2">
+        <ToggleTheme />
+        <Logout />
+      </div>
+    </header>
+  );
+};
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 36496a2..0672e9b 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -21,8 +21,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        sm: "h-9 rounded-2xl px-3",
+        lg: "h-11 rounded-2xl px-8",
         icon: "h-10 w-10",
       },
     },

From a2c1ee39e1accde74cb70035a38521a86cbb035e Mon Sep 17 00:00:00 2001
From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com>
Date: Mon, 10 Feb 2025 21:47:44 +0530
Subject: [PATCH 2/3] Pr fix

---
 app/dashboard/layout.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index 988b927..c5aba37 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -14,9 +14,10 @@ export default function RootLayout({
   return (
     <main className="min-h-screen max-w-7xl mx-auto px-3">
       <DashboardNavbar />
-      <div className="w-full dark:bg-neutral-900 md:p-6 p-3 bg-neutral-200 md:rounded-xl rounded-sm">
-        {children}
+      <div className="md:hidden block fixed top-1 left-1 w-full z-50">
+        <MobileSidear/>
       </div>
+      <div className="w-full dark:bg-neutral-900 bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
     </main>
   );
 }

From f467245c4e76c90547e8807f4a423ab30ac8f594 Mon Sep 17 00:00:00 2001
From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com>
Date: Mon, 10 Feb 2025 21:50:51 +0530
Subject: [PATCH 3/3] Pr fix

---
 app/dashboard/page.tsx | 87 ++++++++++++++++++------------------------
 app/page.tsx           |  2 +
 2 files changed, 39 insertions(+), 50 deletions(-)

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index bba9d75..d64016d 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -18,7 +18,6 @@ import {
   TrendingUp,
   CheckCircle,
 } from "lucide-react";
-import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
 
 export default function Dashboard() {
   const { fetchLeetcodeUserProfile, leetcodeUserProfile } = useLeetcodeStore();
@@ -31,7 +30,6 @@ export default function Dashboard() {
   }
   return (
     <div className="flex flex-col p-4 sm:p-6 md:p-8">
-      <V2Navbar />
       <Card className="w-full max-w-4xl mx-auto shadow-xl border-none">
         <CardHeader className="flex flex-col sm:flex-row items-center gap-6 pb-6 border-b">
           <div className="relative w-32 h-32 sm:w-40 sm:h-40">
@@ -76,23 +74,21 @@ export default function Dashboard() {
                   <StatItem
                     icon={<Book className="w-5 h-5 text-blue-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[0]
-                        .count || 0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[0].count ||
+                      0
                     }
                     label="Total Solved"
                     subtitle={`${(
-                      (leetcodeUserProfile.submitStats.acSubmissionNum[0]
-                        .count /
-                        leetcodeUserProfile.submitStats.totalSubmissionNum[0]
-                          .count) *
+                      (leetcodeUserProfile.submitStats.acSubmissionNum[0].count /
+                        leetcodeUserProfile.submitStats.totalSubmissionNum[0].count) *
                       100
                     ).toFixed(1)}% success rate`}
                   />
                   <StatItem
                     icon={<Target className="w-5 h-5 text-green-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[1]
-                        .count || 0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[1].count ||
+                      0
                     }
                     label="Easy Problems"
                     subtitle={`${leetcodeUserProfile.submitStats.acSubmissionNum[1].submissions} submissions`}
@@ -100,8 +96,8 @@ export default function Dashboard() {
                   <StatItem
                     icon={<Target className="w-5 h-5 text-yellow-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[2]
-                        .count || 0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[2].count ||
+                      0
                     }
                     label="Medium Problems"
                     subtitle={`${leetcodeUserProfile.submitStats.acSubmissionNum[2].submissions} submissions`}
@@ -109,8 +105,8 @@ export default function Dashboard() {
                   <StatItem
                     icon={<Target className="w-5 h-5 text-red-500" />}
                     value={
-                      leetcodeUserProfile.submitStats.acSubmissionNum[3]
-                        .count || 0
+                      leetcodeUserProfile.submitStats.acSubmissionNum[3].count ||
+                      0
                     }
                     label="Hard Problems"
                     subtitle={`${leetcodeUserProfile.submitStats.acSubmissionNum[3].submissions} submissions`}
@@ -133,10 +129,7 @@ export default function Dashboard() {
                     icon={<Star className="w-5 h-5 text-yellow-500" />}
                     value={leetcodeUserProfile.profile.starRating}
                     label="Contest Rating"
-                    subtitle={`Level ${
-                      Math.floor(leetcodeUserProfile.profile.starRating / 500) +
-                      1
-                    }`}
+                    subtitle={`Level ${Math.floor(leetcodeUserProfile.profile.starRating / 500) + 1}`}
                   />
                   <StatItem
                     icon={<CheckCircle className="w-5 h-5 text-green-500" />}
@@ -148,32 +141,32 @@ export default function Dashboard() {
               </div>
             </div>
             <br></br>
-            {/* Original Badges */}
-            <div className="grid gap-6 md:grid-cols-3">
-              <div className="space-y-4">
-                <h3 className="text-xl font-semibold mb-6">Recent Badges</h3>
-                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-                  {leetcodeUserProfile.badges.slice(0, 5).map((badge) => (
-                    <div
-                      key={badge.id}
-                      className="flex flex-col items-center p-2 bg-secondary rounded-lg"
-                    >
-                      <div className="relative w-12 h-12 mb-2">
-                        <Image
-                          src={badge.icon}
-                          alt={badge.displayName}
-                          fill
-                          className="object-contain"
-                        />
-                      </div>
-                      <span className="text-xs text-center">
-                        {badge.displayName}
-                      </span>
+          {/* Original Badges */}
+          <div className="grid gap-6 md:grid-cols-3">
+            <div className="space-y-4">
+              <h3 className="text-xl font-semibold mb-6">Recent Badges</h3>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                {leetcodeUserProfile.badges.slice(0, 5).map((badge) => (
+                  <div
+                    key={badge.id}
+                    className="flex flex-col items-center p-2 bg-secondary rounded-lg"
+                  >
+                    <div className="relative w-12 h-12 mb-2">
+                      <Image
+                        src={badge.icon}
+                        alt={badge.displayName}
+                        fill
+                        className="object-contain"
+                      />
                     </div>
-                  ))}
-                </div>
+                    <span className="text-xs text-center">
+                      {badge.displayName}
+                    </span>
+                  </div>
+                ))}
               </div>
             </div>
+          </div>
             {/* Submission Timeline */}
             <div className="mt-8">
               <h3 className="text-xl font-semibold mb-4 flex items-center">
@@ -184,14 +177,8 @@ export default function Dashboard() {
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                   <TimelineStat
                     label="All Time"
-                    value={
-                      leetcodeUserProfile.submitStats.totalSubmissionNum[0]
-                        .count
-                    }
-                    total={
-                      leetcodeUserProfile.submitStats.totalSubmissionNum[0]
-                        .count
-                    }
+                    value={leetcodeUserProfile.submitStats.totalSubmissionNum[0].count}
+                    total={leetcodeUserProfile.submitStats.totalSubmissionNum[0].count}
                   />
                 </div>
               </div>
@@ -317,4 +304,4 @@ function DashboardSkeleton() {
       </Card>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index b1abbdb..9267ade 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,6 +9,7 @@ import { PricingSection } from "@/components/DashboardV2/PricingSection";
 import { ServicesSection } from "@/components/DashboardV2/ServicesSection";
 import { TeamSection } from "@/components/DashboardV2/TeamSection";
 import { TestimonialSection } from "@/components/DashboardV2/TestimonialSection";
+import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
 
 export const metadata = {
   title: "LeetCode Journal - Your Coding Companion",
@@ -41,6 +42,7 @@ export const metadata = {
 export default function Home() {
   return (
     <div className="w-full">
+      <V2Navbar/>
       <HeroSection />
       <BenefitsSection />
       <FeaturesSection />