feat: integrate Tailwind CSS with custom theme and animations

Added Tailwind CSS and tw-animate-css imports to globals.css. Introduced a custom dark variant and an extensive @theme inline block with CSS variables for colors, radii, and animations. Included keyframes for shimmer-slide, spin-around, gradient, shine, and background-position-spin to enable consistent theming and dynamic UI effects across the application.
2025-10-23 19:57:09 -03:00
1 parent 55c169bd6e
commit 5c1ccbc69a
@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { WordRotate } from "@/components/ui/word-rotate";
+import { ThemeToggle } from "./theme-toggle";
+import { LanguageSwitcher } from "./language-switcher";
+import { MobileMenu } from "./mobile-menu";
+import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+
+export default function Header() {
+  const t = useTranslations("header.nav");
+
+  const links = [
+    { href: "/market", label: t("market") },
+    { href: "/sobre", label: t("about") },
+    { href: "/precos", label: t("prices") },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/60 backdrop-blur supports-backdrop-filter:bg-background/60">
+      <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
+        {/* Logo */}
+        <div className="flex items-center gap-2">
+          <Link href="/">
+            <WordRotate
+              words={["Pagodera", "Tibia Trade"]}
+              className="text-lg font-semibold tracking-tight hover:text-primary transition-colors"
+            />
+          </Link>
+        </div>
+
+        {/* Desktop Navigation */}
+        <NavigationMenu className="hidden md:flex">
+          <NavigationMenuList>
+            {links.map(({ href, label }) => (
+              <NavigationMenuItem key={href}>
+                <NavigationMenuLink asChild>
+                  <Link
+                    href={href}
+                    className={cn(
+                      navigationMenuTriggerStyle(),
+                      "bg-transparent"
+                    )}
+                  >
+                    {label}
+                  </Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+
+        {/* Desktop Controls */}
+        <div className="hidden md:flex items-center gap-2">
+          <ThemeToggle />
+          <LanguageSwitcher />
+        </div>
+
+        {/* Mobile Menu */}
+        <div className="md:hidden">
+          <MobileMenu links={links} />
+        </div>
+      </div>
+    </header>
+  );
+}