improved ui and ux

frontend/src/components/Layout.jsx

@@ -1,43 +1,41 @@
-import React from 'react';
-import { Outlet, NavLink, useNavigate } from 'react-router-dom'; // 1. Import Link
-import useAuth from '../hooks/useAuth';
-import CurrencySelector from './CurrencySelector';
-import ThemeToggle from './ThemeToggle';
+import React from "react";
+import { Outlet, NavLink, useNavigate } from "react-router-dom"; // 1. Import Link
+import useAuth from "../hooks/useAuth";
+import CurrencySelector from "./CurrencySelector";
+import ThemeToggle from "./ThemeToggle";
 
 const Layout = () => {
   const { logout } = useAuth();
   const navigate = useNavigate();
 
-
   const getNavLinkClass = ({ isActive }) => {
-    const baseClasses = 'px-3 py-2 rounded-md text-sm font-medium';
+    const baseClasses = "px-3 py-2 rounded-md text-sm font-medium";
     if (isActive) {
       return `${baseClasses} bg-blue-600 text-white`;
     }
     return `${baseClasses} text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white`;
   };
 
-  const handleClick = (e) => {
-   navigate("/");
+  const handleClick = () => {
+    navigate("/");
   };
 
-
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
-      <nav className="bg-white dark:bg-gray-800 shadow-md">
+    <div className="min-h-screen  flex flex-col bg-background">
+      <nav className="bg-background shadow-md">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">
               {/* 2. Wrap the span in a Link to the dashboard */}
-               <span
-      onClick={handleClick}
-      className="font-bold text-xl text-blue-600 dark:text-blue-400 cursor-pointer transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300"
-      title="Go to home"
-    >
-      Paisable
-    </span>
+              <span
+                onClick={handleClick}
+                className="font-bold text-2xl text-blue-600 dark:text-blue-400 cursor-pointer transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300"
+                title="Go to home"
+              >
+                Paisable
+              </span>
 
-              <div className="hidden lg:block">
+              <div className="hidden lg:block text-xl">
                 <div className="ml-10 flex items-baseline space-x-4">
                   <NavLink to="/dashboard" className={getNavLinkClass}>
                     Dashboard
@@ -77,11 +75,14 @@ const Layout = () => {
         </div>
       </nav>
 
-      <main>
+      <main className="flex-grow">
         <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
           <Outlet />
         </div>
       </main>
+      <footer className="py-8 text-center text-gray-500 dark:text-gray-400 bg-secondary">
+        <p>&copy; {new Date().getFullYear()} Paisable. All Rights Reserved.</p>
+      </footer>
     </div>
   );
 };

frontend/src/index.css

@@ -2,4 +2,21 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+:root {
+  --background: #ffffff;
+  --foreground: #111111;
+  --border: #e5e7eb;
+  --primary: #0f172a;
+  --secondary: oklch(39.8% 0.07 227.392);
+  --accent: oklch(82.8% 0.189 84.429);
+}
+
+.dark {
+  --background: #0b0f19;
+  --foreground: #ffffff;
+  --border: #1e293b;
+  --primary: #ffffff;
+  --secondary: #1e293b;
+  --accent: #38bdf8;
+}

frontend/src/pages/Budgets.jsx

@@ -84,7 +84,7 @@ const Budgets = () => {
   return (
     <>
       <div className="flex flex-wrap gap-4 justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold text-gray-900">Budgets</h1>
+        <h1 className="text-3xl font-bold text-foreground">Budgets</h1>
         <div className="flex gap-4">
           <button
             onClick={() => handleOpenBudgetModal()}

frontend/src/pages/LoginPage.jsx

@@ -36,7 +36,7 @@ export default function LoginPage() {
   }; */
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 px-4 py-8">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background px-4 py-8">
       {/* Logo/Brand */}
       <Link 
         to="/" 

frontend/src/pages/RecurringTransactions.jsx

@@ -76,7 +76,7 @@ const RecurringTransactions = () => {
   return (
     <>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold text-gray-900">
+        <h1 className="text-3xl font-bold text-foreground">
           Recurring Transactions
         </h1>
         <button

frontend/src/pages/RegisterPage.jsx

@@ -94,7 +94,7 @@ export default function RegisterPage() {
   );
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 px-4 py-8">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background px-4 py-8">
       {/* Logo/Brand */}
       <Link 
         to="/" 

frontend/src/pages/SetupPage.jsx

@@ -31,7 +31,7 @@ const SetupPage = () => {
   }
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background px-4">
       <div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
         <div className="text-center mb-8">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">

frontend/src/pages/TransactionsPage.jsx

@@ -238,7 +238,7 @@ const TransactionsPage = () => {
   return (
     <>
       <div className="flex flex-wrap gap-4 justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold text-gray-900">Transactions</h1>
+        <h1 className="text-3xl font-bold text-foreground">Transactions</h1>
         <div className="flex flex-wrap gap-4">
           {selectedTransactionIds.length > 0 && 
             <button onClick={handleBulkDelete} className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">

frontend/src/pages/WelcomePage.jsx

@@ -11,9 +11,11 @@ const CategoryIcon = () => <svg className="h-12 w-12 text-purple-500" fill="none
 
 const FeatureCard = ({ icon, title, children }) => {
   return (
-    <div className="relative group cursor-pointer">
+    <Link  to="/login">
+
+    <div className="relative group cursor-pointer ">
       {/* Glow effect on hover */}
-      <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 blur-xl bg-gradient-to-r from-sky-400/40 via-purple-400/40 to-pink-400/40 transition-opacity duration-500" />
+      <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 blur-l bg-gradient-to-r from-sky-400/40 via-purple-400/40 to-pink-400/40 transition-opacity duration-500" />
 
       {/* Actual Card */}
       <div className="relative p-8 bg-white dark:bg-gray-900 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-2 border border-gray-200 dark:border-gray-700">
@@ -35,6 +37,7 @@ const FeatureCard = ({ icon, title, children }) => {
         </p>
       </div>
     </div>
+    </Link>
   );
 };
 
@@ -43,38 +46,76 @@ export default function WelcomePage() {
   const { logout } = useAuth();
 
   return (
-    <div className="bg-gray-50 dark:bg-gray-900 min-h-screen font-montserrat text-gray-800 dark:text-gray-200">
-      {/* Header */}
-      <header className="py-4 px-8 flex justify-between items-center bg-white dark:bg-gray-800 shadow-md">
-        <Link to="/" className="text-2xl font-bold text-blue-600 dark:text-blue-400">
-          Paisable
-        </Link>
-        <div className="flex items-center gap-4">
-          <ThemeToggle />
-          {user ? (
+    <div className="bg-background">
+
+      <nav className="border-b border-border ">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
+          <div className="text-2xl font-bold text-primary">Paisable</div>
+          <div className="flex items-center gap-4">
+            <ThemeToggle />
+             {user ? (
             <>
-              <Link to="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-semibold">Dashboard</Link>
-              <button onClick={logout} className="bg-red-500 text-white px-4 py-2 rounded-md font-semibold hover:bg-red-600">Logout</button>
+              <Link to="/dashboard" className="text-gray-600 dark:text-gray-300 hover:bg-background/80 transition font-semibold">Dashboard</Link>
+              <button onClick={logout} className="bg-secondary text-white px-4 py-2 rounded-md font-semibold hover:bg-red-600">Logout</button>
             </>
           ) : (
             <>
-              <Link to="/login" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-semibold">Login</Link>
-              <Link to="/register" className="bg-blue-600 text-white px-4 py-2 rounded-md font-semibold hover:bg-blue-700">Sign Up</Link>
+              <Link to="/login" className="text-gray-600 dark:text-gray-300 hover:text-[#155e75] dark:hover:text-gray-700 font-semibold">Login</Link>
+              <Link to="/register" className="bg-secondary text-white px-4 py-2 rounded-md font-semibold hover:bg-[#155e75] dark:hover:bg-gray-700">Sign Up</Link>
             </>
           )}
+
+          </div>
+        </div>
+      </nav>
+      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Left Content */}
+          <div className="space-y-8">
+            <div className="space-y-4">
+              <div className="inline-block px-4 py-2 bg-secondary rounded-full">
+              </div>
+              <h1 className="text-5xl sm:text-6xl font-bold text-primary text-balance leading-tight">
+                Take Control of Your Finances
+              </h1>
+              <p className="text-lg text-foreground leading-relaxed max-w-lg">
+                The simple, smart, and secure way to manage your income and expenses, visualize your spending, and achieve your financial goals.
+              </p>
+            </div>
+
+
+
+
+          </div>
+
+          {/* Right Visual */}
+          <div className="relative h-96 sm:h-full min-h-96 bg-gradient-to-br from-secondary to-slate-100 rounded-3xl overflow-hidden shadow-2xl">
+            <div className="absolute inset-0 opacity-10 bg-" />
+            <div className="absolute top-8 left-8 right-8 space-y-4">
+              <div className="bg-secondary rounded-xl p-6 shadow-lg space-y-3">
+                <p className="text-sm text-foreground">Total Balance</p>
+                <p className="text-3xl font-bold text-primary">$24,582.50</p>
+                <div className="flex gap-2 pt-2">
+                  <div className="h-1 flex-1 bg-accent rounded-full" />
+                  <div className="h-1 flex-1 bg-secondary rounded-full" />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="bg-secondary rounded-lg p-4 shadow-lg">
+                  <p className="text-xs text-foreground mb-1">Income</p>
+                  <p className="text-xl font-bold text-primary">+$5,200</p>
+                </div>
+                <div className="bg-secondary rounded-lg p-4 shadow-lg">
+                  <p className="text-xs text-muted-foreground mb-1">Expenses</p>
+                  <p className="text-xl font-bold text-primary">-$1,840</p>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </header>
-
-      {/* Hero Section */}
-      <main className="text-center py-20 px-4">
-        <h2 className="text-5xl font-bold text-gray-900 dark:text-white">Take Control of Your Finances</h2>
-        <p className="mt-4 text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">The simple, smart, and secure way to manage your income and expenses, visualize your spending, and achieve your financial goals.</p>
-        {user ? (
-          <Link to="/dashboard" className="mt-8 inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-bold text-lg hover:bg-blue-700">Go to Dashboard</Link>
-        ) : (
-          <Link to="/register" className="mt-8 inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-bold text-lg hover:bg-blue-700">Get Started for Free</Link>
-        )}
-      </main>
+      </section>
+
+
 
       {/* Features Section */}
       <section className="py-20 bg-gray-100 dark:bg-gray-800/50">
@@ -105,7 +146,7 @@ export default function WelcomePage() {
       </section>
 
       {/* Footer */}
-      <footer className="py-8 text-center text-gray-500 dark:text-gray-400">
+      <footer className="py-8 text-center text-gray-500 dark:text-gray-400 bg-secondary">
         <p>&copy; {new Date().getFullYear()} Paisable. All Rights Reserved.</p>
       </footer>
     </div>

frontend/tailwind.config.js

@@ -5,11 +5,21 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+
   theme: {
     extend: {
       fontFamily: {
         sans: ['Josefin Sans', 'sans-serif'],
       },
+      colors:{
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        border: "var(--border)",
+        primary: "var(--primary)",
+        secondary: "var(--secondary)",
+        accent: "var(--accent)",
+
+      }
     },
   },
   plugins: [],