fixou uma bosta

components/footer.js

@@ -0,0 +1,30 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #f9fafb;
+          padding: 2rem 0;
+          border-top: 1px solid #e5e7eb;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          text-align: center;
+        }
+        p {
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <p>© 2025 CashFlow Wizard Pro. Todos os direitos reservados.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

index.html

@@ -197,5 +197,59 @@
                             </div>
                         </div>
                     </div>
+                    </div>
+                </section>
+            </div>
+            
+            <!-- Sidebar -->
+            <div class="w-full lg:w-1/3">
+                <div class="bg-white rounded-xl shadow-md p-6 mb-6">
+                    <h2 class="text-xl font-semibold text-gray-700 mb-4">Quick Actions</h2>
+                    <div class="space-y-3">
+                        <a href="#" class="block p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
+                            <div class="flex items-center">
+                                <i data-feather="dollar-sign" class="text-primary-500"></i>
+                                <span class="ml-2">Generate Report</span>
+                            </div>
+                        </a>
+                        <a href="#" class="block p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
+                            <div class="flex items-center">
+                                <i data-feather="settings" class="text-primary-500"></i>
+                                <span class="ml-2">Settings</span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h2 class="text-xl font-semibold text-gray-700 mb-4">Recent Transactions</h2>
+                    <div class="space-y-4">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <p class="font-medium">Web Design Project</p>
+                                <p class="text-sm text-gray-500">Oct 15, 2025</p>
+                            </div>
+                            <span class="text-green-600 font-medium">+R$ 3,500</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <p class="font-medium">Server Hosting</p>
+                                <p class="text-sm text-gray-500">Oct 10, 2025</p>
+                            </div>
+                            <span class="text-red-600 font-medium">-R$ 1,200</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        feather.replace();
+    </script>
 </body>
-</html>
+</html>

style.css

@@ -1,28 +1,42 @@
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: #f3f4f6;
+    color: #111827;
+}
+
+.container {
+    max-width: 1200px;
+}
+
+.bg-primary-50 {
+    background-color: #eef2ff;
+}
+
+.bg-red-50 {
+    background-color: #fef2f2;
+}
+
+.bg-green-50 {
+    background-color: #ecfdf5;
+}
+
+.bg-purple-50 {
+    background-color: #f5f3ff;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.rounded-xl {
+    border-radius: 0.75rem;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.shadow-md {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.transition {
+    transition: all 0.2s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.hover\:bg-gray-50:hover {
+    background-color: #f9fafb;
 }