From 01ae3d877bb83f62603b95dc95571d619cc52fed Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 8 Aug 2025 07:49:29 +0000
Subject: [PATCH] Apply modern design theme

Update app's visual theme to be modern and dynamic, using a blue color palette and dynamic styling.
---
 index.html                                |  8 +++--
 src/components/auth/LoginForm.tsx         |  2 +-
 src/components/layout/NewModernLayout.tsx |  6 ++--
 src/components/ui/modern-sidebar.tsx      |  2 +-
 src/index.css                             | 39 ++++++++++++++++++++++-
 src/pages/Auth.tsx                        | 23 +++++++------
 tailwind.config.ts                        |  3 ++
 7 files changed, 66 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
index 518e15e..35cc146 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dashboard Financeiro</title>
-    <meta name="description" content="Dashboard para gerenciamento de finanças pessoais" />
+    <title>Finance Home — Gestão Financeira Inteligente</title>
+    <meta name="description" content="Gerencie suas finanças com o Finance Home. Login e dashboard intuitivos." />
     <meta name="author" content="Finance Home" />
 
     <meta property="og:title" content="Finance Home" />
     <meta property="og:description" content="Dashboard para gerenciamento de finanças pessoais" />
     <meta property="og:type" content="website" />
 
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap" />
+
     <style>
       /* Hide Lovable badge completely */
       a[href*="lovable.dev"],
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
index e08d408..cb36024 100644
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -98,7 +98,7 @@ const LoginForm = ({ isLoading, setIsLoading, onForgotPassword }: LoginFormProps
         </Alert>
       )}
 
-      <Button type="submit" className="w-full" disabled={isLoading}>
+      <Button type="submit" className="w-full btn-gradient" disabled={isLoading}>
         {isLoading ? "Entrando..." : "Entrar"}
       </Button>
 
diff --git a/src/components/layout/NewModernLayout.tsx b/src/components/layout/NewModernLayout.tsx
index 3e217ac..3401305 100644
--- a/src/components/layout/NewModernLayout.tsx
+++ b/src/components/layout/NewModernLayout.tsx
@@ -52,7 +52,7 @@ const Logo = () => {
         alt="Finance Home Logo" 
         className="h-8 w-8 shrink-0"
       />
-      <span className="font-medium whitespace-pre text-blue-700 dark:text-white">
+      <span className="font-medium whitespace-pre text-primary dark:text-white">
         Finance Home
       </span>
     </div>
@@ -207,7 +207,7 @@ const HeaderContent = () => {
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <SidebarTrigger className="-ml-1 hover:bg-blue-50 rounded-lg p-2" />
+              <SidebarTrigger className="-ml-1 hover:bg-primary/10 rounded-lg p-2" />
             </TooltipTrigger>
             <TooltipContent>
               <p>Abrir/Fechar Menu</p>
@@ -215,7 +215,7 @@ const HeaderContent = () => {
           </Tooltip>
         </TooltipProvider>
         <span 
-          className="text-sm font-medium text-gray-600 cursor-pointer hover:text-blue-600 transition-colors"
+          className="text-sm font-medium text-muted-foreground cursor-pointer hover:text-primary transition-colors"
           onClick={toggleSidebar}
         >
           Menu
diff --git a/src/components/ui/modern-sidebar.tsx b/src/components/ui/modern-sidebar.tsx
index 2f250a4..aae6118 100644
--- a/src/components/ui/modern-sidebar.tsx
+++ b/src/components/ui/modern-sidebar.tsx
@@ -128,7 +128,7 @@ export const MobileSidebar = ({
             alt="Finance Home Logo" 
             className="h-8 w-8 shrink-0"
           />
-          <span className="text-lg font-semibold text-blue-700">Finance Home</span>
+          <span className="text-lg font-semibold text-primary">Finance Home</span>
         </div>
         <div className="flex justify-end z-20">
           <div 
diff --git a/src/index.css b/src/index.css
index ab9497b..e342938 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,7 +12,7 @@
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
+    --primary: 217.2 91.2% 59.8%;
     --primary-foreground: 0 0% 98%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
@@ -32,6 +32,12 @@
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
     
+    /* Dynamic blue theme enhancements */
+    --primary-strong: 222 89% 63%;
+    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-strong)));
+    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
     /* Sidebar variables */
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
@@ -105,3 +111,34 @@
 .sidebar-border {
   border-color: hsl(var(--sidebar-border));
 }
+
+@layer utilities {
+  .bg-gradient-primary {
+    background-image: var(--gradient-primary);
+  }
+
+  .btn-gradient {
+    color: hsl(var(--primary-foreground));
+    background-image: var(--gradient-primary);
+    box-shadow: var(--shadow-elegant);
+    transition: var(--transition-smooth);
+  }
+  .btn-gradient:hover {
+    filter: brightness(0.95);
+  }
+
+  .glass-card {
+    background-color: hsl(var(--card) / 0.8);
+    backdrop-filter: blur(12px);
+    border: 1px solid hsl(var(--border) / 0.4);
+    box-shadow: var(--shadow-elegant);
+  }
+
+  .brand-text {
+    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
+    background-image: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
index 2424a53..d30160b 100644
--- a/src/pages/Auth.tsx
+++ b/src/pages/Auth.tsx
@@ -33,6 +33,11 @@ const Auth = () => {
     }
   }, [location.state]);
 
+  // SEO
+  useEffect(() => {
+    document.title = "Login | Finance Home";
+  }, []);
+
   const handleForgotPassword = () => {
     setShowForgotPassword(true);
   };
@@ -44,18 +49,18 @@ const Auth = () => {
 
   if (showForgotPassword) {
     return (
-      <div className="min-h-screen relative w-full overflow-hidden bg-slate-900 flex items-center justify-center px-4">
-        <div className="absolute inset-0 w-full h-full bg-slate-900 z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
+      <div className="min-h-screen relative w-full overflow-hidden bg-gradient-primary flex items-center justify-center px-4">
+        <div className="absolute inset-0 w-full h-full bg-background z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
         <Boxes />
         
         <Link to="/" className="absolute top-4 left-4 z-30">
-          <Button variant="ghost" size="sm" className="text-white hover:bg-white/10">
+          <Button variant="ghost" size="sm" className="text-primary-foreground hover:bg-primary-foreground/10">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Voltar
           </Button>
         </Link>
         
-        <div className="relative z-20 bg-white/95 backdrop-blur-sm border-white/20 rounded-lg">
+        <div className="relative z-20 glass-card rounded-lg">
           <ForgotPasswordForm onBackToLogin={handleBackToLogin} />
         </div>
       </div>
@@ -63,20 +68,20 @@ const Auth = () => {
   }
 
   return (
-    <div className="min-h-screen relative w-full overflow-hidden bg-slate-900 flex items-center justify-center px-4">
-      <div className="absolute inset-0 w-full h-full bg-slate-900 z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
+    <div className="min-h-screen relative w-full overflow-hidden bg-gradient-primary flex items-center justify-center px-4">
+      <div className="absolute inset-0 w-full h-full bg-background z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
       
       <Boxes />
       
       {/* Botão para voltar à landing page */}
       <Link to="/" className="absolute top-4 left-4 z-30">
-        <Button variant="ghost" size="sm" className="text-white hover:bg-white/10">
+        <Button variant="ghost" size="sm" className="text-primary-foreground hover:bg-primary-foreground/10">
           <ArrowLeft className="h-4 w-4 mr-2" />
           Voltar
         </Button>
       </Link>
       
-      <Card className="w-full max-w-md relative z-20 bg-white/95 backdrop-blur-sm border-white/20">
+      <Card className="w-full max-w-md relative z-20 glass-card">
         <CardHeader className="space-y-1 text-center">
           <div className="flex items-center justify-center space-x-2 mb-4">
             <img 
@@ -84,7 +89,7 @@ const Auth = () => {
               alt="Finance Home Logo" 
               className="h-10 w-10"
             />
-            <CardTitle className="text-2xl font-bold text-blue-700">Finance Home</CardTitle>
+            <CardTitle className="text-2xl font-extrabold brand-text">Finance Home</CardTitle>
           </div>
           <CardDescription>Gerencie suas finanças de forma simples e eficiente</CardDescription>
         </CardHeader>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 00e122c..27828a2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -95,6 +95,9 @@ const config: Config = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
       },
+      fontFamily: {
+        jakarta: ["Plus Jakarta Sans", "Inter", "system-ui", "sans-serif"],
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],
