feat(frontend): adicionar header com menu

- Cria componente Header com logo e ações básicas
- Ajusta Dashboard para renderizar o header no topo

frontend/src/components/Header.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+
+export const Header = () => {
+    const [isMenuOpen, setMenuOpen] = useState(false);
+
+    const toggleMenu = () => setMenuOpen((prev) => !prev);
+
+    return (
+        <header className={Styles.wrapper}>
+            <div className={Styles.brand}>
+                <img src="/logo.webp" alt="Logo Hit Communications" className={Styles.logo} />
+                <div>
+                    <p className={Styles.title}>Hit Communications</p>
+                    <p className={Styles.subtitle}>Servers Manager</p>
+                </div>
+            </div>
+
+            <div className={Styles.actions}>
+                <div className="relative">
+                    <button
+                        type="button"
+                        className={Styles.menuTrigger}
+                        aria-haspopup="menu"
+                        aria-expanded={isMenuOpen}
+                        onClick={toggleMenu}
+                    >
+                        Opções
+                    </button>
+                    {isMenuOpen && (
+                        <div className={Styles.dropdown} role="menu">
+                            <button type="button" className={Styles.dropdownItem}>
+                                Adicionar servidor
+                            </button>
+                            <button type="button" className={Styles.dropdownItem}>
+                                Editar perfil
+                            </button>
+                        </div>
+                    )}
+                </div>
+                <button type="button" className={Styles.logoutButton}>
+                    Sair
+                </button>
+            </div>
+        </header>
+    );
+};
+
+const Styles = {
+    wrapper: "flex items-center justify-between rounded-xl border border-cardBorder bg-card px-6 py-4 shadow-sm",
+    brand: "flex items-center gap-3",
+    logo: "h-10 w-10 object-contain",
+    title: "text-base font-semibold text-text",
+    subtitle: "text-xs uppercase tracking-wide text-text-secondary",
+    actions: "flex items-center gap-3",
+    menuTrigger: "rounded-lg border border-cardBorder bg-white/70 px-4 py-2 text-sm font-medium text-text flex items-center gap-2 hover:bg-white transition-colors",
+    dropdown: "absolute right-0 mt-2 w-44 rounded-lg border border-cardBorder bg-white py-2 shadow-lg",
+    dropdownItem: "w-full px-4 py-2 text-left text-sm text-text-secondary hover:bg-bg hover:text-text transition-colors",
+    logoutButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-hover",
+};

frontend/src/pages/Dashboard.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import api from "../Api";
 import { Layout } from "../components/Layout";
+import { Header } from "../components/Header";
 import { ServerCardMetrics } from "../components/ServerCardMetrics";
 import { ServersTable } from "../components/ServersTable";
 import type { Server } from "../types/Server";
@@ -29,6 +30,7 @@ export const Dashboard = () => {
     return (
         <Layout className="h-screen py-10">
             <div className="space-y-6">
+                <Header />
                 <ServerCardMetrics />
                 <ServersTable servers={servers} loading={loading} error={error} />
             </div>