feat: updates

src/app/globals.css

@@ -126,3 +126,22 @@
     @apply bg-background text-foreground;
   }
 }
+
+@keyframes scrollUp {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-33.33%);
+  }
+}
+
+.loan-scroll-container {
+  display: flex;
+  flex-direction: column;
+  animation: scrollUp 30s linear infinite;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}

src/components/layouts/header/Header.tsx

@@ -1,28 +1,66 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { SidebarTrigger } from "@/components/ui/sidebar";
 import { LogOut } from "lucide-react";
-import ThemeToggle from "./ThemeToggle";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { useWallet } from "@/components/modules/auth/wallet/hooks/wallet.hook";
 
 export function Header() {
-  const { handleDisconnect } = useWallet();
+  const router = useRouter();
+  const [walletConnected, setWalletConnected] = useState(false);
+  const { handleConnect, handleDisconnect } = useWallet();
+
+  useEffect(() => {
+    const stellarWallet = localStorage.getItem("address-wallet");
+    const metamaskWallet = localStorage.getItem("metamask-wallet");
+
+    if (stellarWallet || metamaskWallet) {
+      setWalletConnected(true);
+    }
+  }, []);
+
+  const handleDisconnectWallet = () => {
+    handleDisconnect();
+    localStorage.removeItem("address-wallet");
+    localStorage.removeItem("@StellarWalletsKit/usedWalletsIds");
+    setWalletConnected(false);
+    console.log("Wallet disconnected");
+    router.push("/");
+  };
+
+  const handleConnectWallet = () => {
+    handleConnect();
+    setWalletConnected(true);
+    console.log("Wallet connected");
+  };
 
   return (
     <header className="flex h-14 items-center justify-between border-b bg-muted/40 px-4 lg:px-6">
-      <div className="flex items-center gap-4">
-        <SidebarTrigger />
-      </div>
-      <div className="flex items-center gap-2">
-        <Button
-          variant="ghost"
-          onClick={handleDisconnect}
-          size="icon"
-          className="h-9 w-9"
-        >
-          <LogOut className="text-red-500 h-4 w-4" />
-        </Button>
+      <div className="flex flex-1 items-center gap-4">
+        <div className="ml-auto flex items-center gap-2">
+          {walletConnected ? (
+            <Button
+              variant="outline"
+              size="sm"
+              className="bg-transparent border-white/10 text-white hover:bg-white/10 hover:text-gray-200 hidden sm:flex"
+              onClick={handleDisconnectWallet}
+            >
+              <LogOut className="h-3.5 w-3.5 mr-1.5" />
+              Disconnect Wallet
+            </Button>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-0 text-white hidden sm:flex"
+              onClick={handleConnectWallet}
+            >
+              Connect Wallet
+            </Button>
+          )}
+        </div>
       </div>
     </header>
   );

src/components/modules/auth/ui/pages/Home.tsx

@@ -1,17 +1,32 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { ArrowRight, Wallet, BadgeCheck } from "lucide-react";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { useGlobalAuthenticationStore } from "@/core/store/data";
 import { Badge } from "@/components/ui/badge";
 import Link from "next/link";
 import { useWallet } from "../../wallet/hooks/wallet.hook";
-import { useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { format } from "date-fns";
+import { getApprovedLoanOffers } from "@/components/modules/dashboard/marketplace/server/marketplace.firebase";
 
 export default function HomePage() {
   const { handleConnect, handleDisconnect } = useWallet();
   const { address } = useGlobalAuthenticationStore();
+  const [approvedLoans, setApprovedLoans] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchApprovedLoans = async () => {
+      const res = await getApprovedLoanOffers();
+      if (res.success && res.data) {
+        setApprovedLoans(res.data);
+      }
+    };
+
+    fetchApprovedLoans();
+  }, []);
 
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -21,8 +36,13 @@ export default function HomePage() {
     };
   }, []);
 
+  const formatDate = (seconds: number) => {
+    if (!seconds) return "Unknown date";
+    return format(new Date(seconds * 1000), "dd MMM yyyy");
+  };
+
   return (
-    <div className="flex flex-col min-h-screen ">
+    <div className="flex flex-col min-h-screen">
       <section className="w-full py-12 md:py-24 lg:py-32">
         <div className="container px-4 md:px-6">
           <div className="grid items-center gap-6 lg:grid-cols-[1fr_500px] lg:gap-12 xl:grid-cols-[1fr_550px]">
@@ -70,16 +90,7 @@ export default function HomePage() {
 
             <div className="flex items-center justify-center">
               <div className="relative w-full max-w-[500px] aspect-[4/3] bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 rounded-2xl p-1 shadow-xl">
-                <div className="absolute inset-0 rounded-2xl overflow-hidden border border-emerald-100 dark:border-emerald-900/50">
-                  <Image
-                    src="/placeholder.svg?height=400&width=500"
-                    alt="TrustBridge Platform"
-                    width={500}
-                    height={400}
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-                <div className="absolute -bottom-6 -right-6 bg-white dark:bg-gray-950 rounded-lg shadow-lg p-4 border border-emerald-100 dark:border-emerald-900/50">
+                <div className="absolute -bottom-6 -right-6 z-20 bg-white dark:bg-neutral-950 rounded-lg shadow-lg p-4 border border-emerald-100 dark:border-emerald-900/50">
                   <div className="flex items-center gap-3">
                     <div className="bg-emerald-100 dark:bg-emerald-900/50 rounded-full p-2">
                       <BadgeCheck className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
@@ -92,6 +103,33 @@ export default function HomePage() {
                     </div>
                   </div>
                 </div>
+
+                <div className="absolute inset-0 p-4 z-10">
+                  <div className="h-full overflow-hidden">
+                    <div className="loan-scroll-container">
+                      {[
+                        ...approvedLoans,
+                        ...approvedLoans,
+                        ...approvedLoans,
+                      ].map((loan, index) => (
+                        <div
+                          key={`${loan.id}-${index}`}
+                          className="bg-neutral-950 rounded-lg p-4 mb-3 border border-emerald-900/20 shadow-md"
+                        >
+                          <h3 className="text-lg font-semibold text-emerald-400">
+                            {loan.title}
+                          </h3>
+                          <p className="text-sm text-gray-400">
+                            Loan Amount: ${loan.maxAmount}
+                          </p>
+                          <p className="text-sm text-gray-400">
+                            Fee: {loan.platformFee}%
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>

src/components/modules/dashboard/ui/pages/DashboardPage.tsx

@@ -13,15 +13,13 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Progress } from "@/components/ui/progress";
-import { cn } from "@/lib/utils";
 import {
   TrendingUp,
   DollarSign,
   CreditCard,
   Clock,
   CheckCircle2,
   ArrowRight,
-  Calendar,
   Wallet,
   PiggyBank,
   Activity,
@@ -42,10 +40,8 @@ export function DashboardOverview() {
     stats,
     recentActivity,
     loanTrends,
-    upcomingMilestones,
     formatCurrency,
     formatDate,
-    formatDueDate,
   } = useDashboard();
 
   const getActivityIcon = (type: string) => {

src/components/modules/dashboard/ui/pages/background/GradientBackground.tsx

@@ -21,8 +21,8 @@ export function GradientBackground({
   children,
   className,
   opacity = 30,
-  primaryColor = "bg-emerald-200",
-  secondaryColor = "bg-teal-200",
+  primaryColor = "bg-emerald-500",
+  secondaryColor = "bg-teal-700",
   primaryPosition = "-top-40 -right-40",
   secondaryPosition = "top-1/2 -left-40",
   primarySize = "w-80 h-80",