Apply modern design theme

Update app's visual theme to be modern and dynamic, using a blue color palette and dynamic styling.
2025-08-08 07:49:29 +00:00 · 2025-08-08 07:49:29 +00:00 · 01ae3d877b
commit 01ae3d877b
parent 317596e4ae
7 changed files with 66 additions and 17 deletions
--- 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"],
--- 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>

--- 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
--- 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 
--- 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;
+  }
+}
--- 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>
--- 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")],