feat: update dependencies and add new icons

- Added `lucide-react` dependency.
- Updated `next` version to 15.3.1.
- Added new icons: design-icon.png, home-icon.png, logo.png, menu-icon.png.
- Added recent images: recent-image-1.png, recent-image-2.png, recent-image-3.png, recent-image-4.png, recent-image-5.png.
- Updated devDependencies: added `@eslint/eslintrc`, `@tailwindcss/postcss`, and ensured `typescript` is included.

app/globals.css

@@ -8,6 +8,7 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sideNavColor:#010313;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

app/page.tsx

@@ -1,103 +1,8 @@
-import Image from "next/image";
-
+import SideNav from "@/components/sideNav";
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+    <div>
+      <SideNav />
     </div>
   );
 }

components/recentDesign.tsx

@@ -0,0 +1,81 @@
+import Image from "next/image";
+import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react';
+
+// Sample data for recent designs
+const recentDesigns = [
+  {
+    icon: "/recent-image-1.png",
+    title: "Good morning Gabe ...",
+  },
+  {
+    icon: "/recent-image-2.png",
+    title: "Daphne's first eBook...",
+  },
+  {
+    icon: "/recent-image-3.png",
+    title: "Story of my life (Story...",
+  },
+  {
+    icon: "/recent-image-4.png",
+    title: "Good morning Gabe ...",
+  },
+  {
+    icon: "/recent-image-5.png",
+    title: "A fantastic saga, the...",
+  },
+];
+
+/**
+ * RecentDesign Component
+ * Displays a sidebar with recent designs and a trash section
+ * @returns JSX.Element
+ */
+export default function RecentDesign() {
+  return (
+    <div className="border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
+      {/* Logo and Title Section */}
+      <div>
+        <div className="flex flex-col items-center mb-6 md:mb-12">
+          <img src="/logo.png" alt="Wodey logo" className="w-[120px] md:w-[157px] h-auto md:h-[53px]" />
+        </div>
+        
+        {/* Recent Designs Header */}
+        <div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div>
+        
+        {/* Recent Designs List */}
+        <div className="grid grid-cols-2 md:flex md:flex-col gap-2">
+          {recentDesigns.map((design, idx) => (
+            <div 
+              key={idx} 
+              className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
+            >
+              {/* Design Icon */}
+              <div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
+                <Image src={design.icon} alt="icon" width={24} height={24} className="w-5 h-5 md:w-7 md:h-7" />
+              </div>
+              
+              {/* Design Title */}
+              <span className="flex-1 text-[10px] text-[#27275A] truncate max-w-[100px] md:max-w-[120px] font-[400]">
+                {design.title}
+              </span>
+             
+              {/* Action Buttons */}
+              <button className="p-1 rounded hover:bg-gray-100 transition">
+                <div className="flex items-center gap-1 md:gap-2">
+                  <ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
+                  <Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
+                </div>
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Trash Section */}
+      <div className="flex items-center gap-2 pl-1 cursor-pointer hover:bg-[#F5F6FA] rounded-lg p-2 mt-4 md:mt-0">
+        <Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" />
+        <span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span>
+      </div>
+    </div>
+  );
+}

components/sideNav.tsx

@@ -0,0 +1,12 @@
+import Sidebar from "./sidebar";
+import RecentDesign from "./recentDesign";
+
+
+export default function SideNav() {
+    return (
+        <div className="flex flex-col md:flex-row">
+            <Sidebar />
+            <RecentDesign />
+        </div>
+    );
+}

components/sidebar.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+
+// Navigation links configuration
+const links = [
+  {
+    icon: "/home-icon.png",
+    label: "Home",
+    path: "/"
+  },
+  {
+    icon: "/design-icon.png",
+    label: "Design St.",
+    path: "/design"
+  }
+];
+
+/**
+ * Sidebar Component
+ * Displays a vertical navigation sidebar with icons and labels
+ * @returns JSX.Element
+ */
+export default function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <div className="bg-[#050616] w-full md:w-[80px] h-auto md:h-screen">
+      <div className="flex md:flex-col items-center justify-between md:justify-start gap-4 p-4 md:pt-10">
+        {/* Menu Icon */}
+        <Image 
+          src="/menu-icon.png" 
+          alt="logo" 
+          width={24} 
+          height={24} 
+          className="cursor-pointer" 
+        />
+        
+        {/* Navigation Links */}
+        <div className="flex md:flex-col items-center md:items-start gap-4 md:gap-6 md:mt-10 w-full md:w-auto px-4">
+          {links.map((link) => (
+            <div key={link.path} className="flex flex-col items-center md:items-start w-auto">
+              {/* Link Icon Container */}
+              <div className={`p-2 rounded-lg ${pathname === link.path ? 'bg-[#1a1c2b]' : ''}`}>
+                <Image 
+                  src={link.icon} 
+                  alt={link.label} 
+                  width={24} 
+                  height={24} 
+                  className="cursor-pointer" 
+                />
+              </div>
+              
+              {/* Link Label */}
+              <p className="text-white text-xs mt-1 hidden md:block">{link.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "lucide-react": "^0.503.0",
+    "next": "15.3.1",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.9",
     "class-variance-authority": "^0.7.1",
@@ -20,6 +22,8 @@
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",