feat: Implement design changes and add component

- Replace the blue rectangle with the logo.
- Extend the sidebar menu.
- Change the login/password screen background.
- Add and integrate the BackgroundBoxesDemo component.

src/components/layout/ModernLayout.tsx

@@ -30,7 +30,11 @@ const Logo = () => {
       to="/"
       className="relative z-20 flex items-center space-x-2 py-1 text-sm font-normal text-black"
     >
-      <div className="h-5 w-6 shrink-0 rounded-tl-lg rounded-tr-sm rounded-br-lg rounded-bl-sm bg-blue-700" />
+      <img 
+        src="/lovable-uploads/7149adf3-440a-491e-83c2-d964a3348cc9.png" 
+        alt="Finance Home Logo" 
+        className="h-8 w-8 shrink-0"
+      />
       <motion.span
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -48,7 +52,11 @@ const LogoIcon = () => {
       to="/"
       className="relative z-20 flex items-center space-x-2 py-1 text-sm font-normal text-black"
     >
-      <div className="h-5 w-6 shrink-0 rounded-tl-lg rounded-tr-sm rounded-br-lg rounded-bl-sm bg-blue-700" />
+      <img 
+        src="/lovable-uploads/7149adf3-440a-491e-83c2-d964a3348cc9.png" 
+        alt="Finance Home Logo" 
+        className="h-8 w-8 shrink-0"
+      />
     </Link>
   );
 };
@@ -127,8 +135,8 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
   return (
     <div className="min-h-screen bg-background flex w-full">
       <ModernSidebar open={open} setOpen={setOpen}>
-        <SidebarBody className="justify-between gap-10">
+        <SidebarBody className="justify-start gap-4 h-full">
-          <div className="flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
+          <div className="flex flex-1 flex-col overflow-x-hidden overflow-y-auto h-full">
             {open ? <Logo /> : <LogoIcon />}
             
             <div className="mt-8 flex flex-col gap-2">
@@ -154,7 +162,7 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
               </div>
             </div>
 
-            <div className="mt-8">
+            <div className="mt-auto">
               {open && (
                 <motion.h2 
                   initial={{ opacity: 0 }}
@@ -164,7 +172,7 @@ export default function ModernLayout({ children }: ModernLayoutProps) {
                   Configurações
                 </motion.h2>
               )}
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2 pb-4">
                 {configLinks.map((link, idx) => (
                   <SidebarLink key={`config-${idx}`} link={link} />
                 ))}

src/components/ui/background-boxes.tsx

@@ -0,0 +1,77 @@
+
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
+  const rows = new Array(150).fill(1);
+  const cols = new Array(100).fill(1);
+  let colors = [
+    "#3b82f6",
+    "#1d4ed8", 
+    "#2563eb",
+    "#1e40af",
+    "#1e3a8a",
+    "#312e81",
+    "#4f46e5",
+    "#6366f1",
+    "#8b5cf6",
+  ];
+  const getRandomColor = () => {
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  return (
+    <div
+      style={{
+        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
+      }}
+      className={cn(
+        "absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
+        className,
+      )}
+      {...rest}
+    >
+      {rows.map((_, i) => (
+        <motion.div
+          key={`row` + i}
+          className="relative h-8 w-16 border-l border-slate-700"
+        >
+          {cols.map((_, j) => (
+            <motion.div
+              whileHover={{
+                backgroundColor: `${getRandomColor()}`,
+                transition: { duration: 0 },
+              }}
+              animate={{
+                transition: { duration: 2 },
+              }}
+              key={`col` + j}
+              className="relative h-8 w-16 border-t border-r border-slate-700"
+            >
+              {j % 2 === 0 && i % 2 === 0 ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth="1.5"
+                  stroke="currentColor"
+                  className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 6v12m6-6H6"
+                  />
+                </svg>
+              ) : null}
+            </motion.div>
+          ))}
+        </motion.div>
+      ))}
+    </div>
+  );
+};
+
+export const Boxes = React.memo(BoxesCore);

src/components/ui/modern-sidebar.tsx

@@ -70,11 +70,11 @@ export const ModernSidebar = ({
   );
 };
 
-export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
+export const SidebarBody = (props: React.ComponentProps<"div">) => {
   return (
     <>
       <DesktopSidebar {...props} />
-      <MobileSidebar {...(props as React.ComponentProps<"div">)} />
+      <MobileSidebar {...props} />
     </>
   );
 };
@@ -83,7 +83,7 @@ export const DesktopSidebar = ({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof motion.div>) => {
+}: React.ComponentProps<"div">) => {
   const { open, setOpen, animate } = useSidebar();
   return (
     <>

src/pages/Auth.tsx

@@ -3,6 +3,8 @@ import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Boxes } from "@/components/ui/background-boxes";
+import { cn } from "@/lib/utils";
 import LoginForm from '@/components/auth/LoginForm';
 import RegisterForm from '@/components/auth/RegisterForm';
 import SocialLoginButtons from '@/components/auth/SocialLoginButtons';
@@ -29,10 +31,21 @@ const Auth = () => {
   }, [location.state]);
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-50 px-4">
+    <div className="min-h-screen relative w-full overflow-hidden bg-slate-900 flex items-center justify-center px-4">
-      <Card className="w-full max-w-md">
+      <div className="absolute inset-0 w-full h-full bg-slate-900 z-10 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
+      
+      <Boxes />
+      
+      <Card className="w-full max-w-md relative z-20 bg-white/95 backdrop-blur-sm border-white/20">
         <CardHeader className="space-y-1 text-center">
-          <CardTitle className="text-2xl font-bold">Finanças Pessoais</CardTitle>
+          <div className="flex items-center justify-center space-x-2 mb-4">
+            <img 
+              src="/lovable-uploads/7149adf3-440a-491e-83c2-d964a3348cc9.png" 
+              alt="Finance Home Logo" 
+              className="h-10 w-10"
+            />
+            <CardTitle className="text-2xl font-bold text-blue-700">Finance Home</CardTitle>
+          </div>
           <CardDescription>Gerencie suas finanças de forma simples e eficiente</CardDescription>
         </CardHeader>
         <CardContent>