Trajectfi · DanielEmmanuel1 · May 3, 2025
diff --git a/dapp/public/images/bg-image.png b/dapp/public/images/bg-image.png
diff --git a/dapp/public/images/trajectifi-logo-text.png b/dapp/public/images/trajectifi-logo-text.png
diff --git a/dapp/public/images/trajectifi-logo.png b/dapp/public/images/trajectifi-logo.png
diff --git a/dapp/src/app/components/navbar.tsx b/dapp/src/app/components/navbar.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { 
+  Search as SearchIcon, 
+  Bell as BellIcon, 
+  HelpCircle as HelpIcon 
+} from "lucide-react";
+
+export default function Navbar() {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-800">
+      <div className="flex-1"></div>
+      <div className="flex items-center space-x-4">
+        <div className="relative">
+          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+            <SearchIcon className="w-4 h-4 text-gray-400" />
+          </div>
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="bg-gray-800 text-white rounded-lg pl-10 pr-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500"
+            placeholder="Search"
+          />
+        </div>
+        <button className="p-2 rounded-full hover:bg-gray-800">
+          <BellIcon className="w-6 h-6" />
+        </button>
+        <button className="p-2 rounded-full hover:bg-gray-800">
+          <HelpIcon className="w-6 h-6" />
+        </button>
+        <Link href="#" className="ml-4">
+          <button className="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
+            Connect Wallet
+          </button>
+        </Link>
+      </div>
+    </nav>
+  );
+}
diff --git a/dapp/src/app/components/sidebar.tsx b/dapp/src/app/components/sidebar.tsx
@@ -0,0 +1,163 @@
+"use client";
+import Image from "next/image";
+import trajectifylogo from "../../../public/images/trajectifi-logo.png";
+import trajectword from "../../../public/images/trajectifi-logo-text.png";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import {
+  LayoutGrid as AssetsIcon,
+  CreditCard as LoanIcon,
+  Search as SearchIcon,
+} from "lucide-react";
+
+export default function Sidebar() {
+  const [isCollapsed, setIsCollapsed] = useState(true); // Default to collapsed
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Auto-collapse on mobile, maintain collapsed state on larger screens
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setIsCollapsed(true);
+      }
+    };
+
+    // Set initial state
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // Toggle sidebar expanded/collapsed state
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  // Determine if sidebar should be expanded
+  const expanded = !isCollapsed || isHovered;
+
+  return (
+    <aside
+      className={`bg-[#080a1f] border-r border-gray-800 transition-all duration-300 flex flex-col ${
+        expanded ? "w-60" : "w-16"
+      } h-screen sticky top-0`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={toggleSidebar}
+    >
+      <div className="p-4 flex items-center">
+        <Link
+          href="/"
+          className="flex items-center"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {expanded ? (
+            <div className="flex items-center space-x-2">
+              <Image
+                src={trajectifylogo}
+                width={40}
+                height={40}
+                alt="trajectify-logo"
+              />
+              <Image
+                src={trajectword}
+                width={70}
+                height={40}
+                alt="trajectify-logo-text"
+              />
+            </div>
+          ) : (
+            <Image
+            src={trajectifylogo}
+              width={40}
+              height={40}
+              alt="trajectify-logo"
+            />
+          )}
+        </Link>
+      </div>
+
+      <div className="mt-6 px-3">
+        {expanded && (
+          <div className="relative mb-4" onClick={(e) => e.stopPropagation()}>
+            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+              <SearchIcon className="w-4 h-4 text-gray-400" />
+            </div>
+            <input
+              type="text"
+              className="bg-gray-800 text-white rounded-lg pl-10 pr-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500"
+              placeholder="Search"
+            />
+          </div>
+        )}
+
+        <nav className="space-y-1">
+          <SidebarItem
+            href="/my_assets"
+            icon={<AssetsIcon />}
+            text="My Assets"
+            expanded={expanded}
+            active={true}
+          />
+          <SidebarItem
+            href="/get-loan"
+            icon={<LoanIcon />}
+            text="Get a Loan"
+            expanded={expanded}
+          />
+          <SidebarItem
+            href="/give-loan"
+            icon={<LoanIcon />}
+            text="Give a Loan"
+            expanded={expanded}
+          />
+        </nav>
+      </div>
+    </aside>
+  );
+}
+
+interface SidebarItemProps {
+  href: string;
+  icon: React.ReactNode;
+  text: string;
+  expanded: boolean;
+  active?: boolean;
+}
+
+interface SidebarItemProps {
+  href: string;
+  icon: React.ReactNode;
+  text: string;
+  expanded: boolean;
+  active?: boolean;
+}
+
+function SidebarItem({
+  href,
+  icon,
+  text,
+  expanded,
+  active = false,
+}: SidebarItemProps) {
+  return (
+    <Link
+      href={href}
+      className={`flex items-center justify-center p-3 rounded-lg ${
+        active ? "bg-purple-600 text-white" : "text-gray-300 hover:bg-gray-800"
+      }`}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {expanded ? (
+        <div className="flex items-center w-full">
+          <span className="text-xl">{icon}</span>
+          <span className="ml-3">{text}</span>
+        </div>
+      ) : (
+        <span className="text-xl flex justify-center">{icon}</span>
+      )}
+    </Link>
+  );
+}
diff --git a/dapp/src/app/globals.css b/dapp/src/app/globals.css
@@ -15,7 +15,12 @@
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  color: rgb(var(--foreground-rgb));
+  background-color: #b56203;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
 }
diff --git a/dapp/src/app/layout.tsx b/dapp/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navbar from "../app/components/navbar";
+import Sidebar from "../app/components/sidebar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -25,9 +27,15 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#080a1f] text-white`}
       >
-        {children}
+        <div className="flex min-h-screen">
+          <Sidebar />
+          <div className="flex-1">
+            <Navbar />
+            <main>{children}</main>
+          </div>
+        </div>
       </body>
     </html>
   );

diff --git a/dapp/src/app/page.tsx b/dapp/src/app/page.tsx
@@ -1,7 +1,37 @@
-const Home = () => {
-    return ( 
-        <div></div>
-     );
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+export default function Home() {
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-6">My Assets</h1>
+
+      <div className="border border-gray-800 rounded-xl overflow-hidden">
+        <div
+          className="relative flex items-center justify-center py-20"
+          style={{
+            backgroundImage: "url('/nft-collage-bg.png')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        >
+          <div className="text-center z-10 px-4 bg-page-bg bg-cover bg-no-repeat rounded-lg h-[700px] w-full flex flex-col items-center justify-center">
+            <h2 className="text-4xl font-bold mb-4">Connect Your Wallet</h2>
+            <p className="text-gray-300 mb-8">
+              To view your assets, please connect your wallet.
+            </p>
+            <Link href="#">
+              <button className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg flex items-center justify-center mx-auto">
+                Connect Wallet
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </button>
+            </Link>
+          </div>
+
+          {/* Dark overlay */}
+          <div className="absolute"></div>
+        </div>
+      </div>
+    </div>
+  );
 }
-
-export default Home;
diff --git a/dapp/tailwind.config.ts b/dapp/tailwind.config.ts
@@ -11,6 +11,17 @@ export default {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        purple: {
+          500: "#8855FF",
+          600: "#7040E0",
+          700: "#5C30C0",
+        },
+        gray: {
+          800: "#1A1A2E",
+        },
+      },
+      backgroundImage: {
+        'page-bg': "url('/images/bg-image.png')",
       },
     },
   },