Spaces:
Runtime error
Runtime error
File size: 4,855 Bytes
cd8bd0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | "use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import OmniRouteLogo from "@/shared/components/OmniRouteLogo";
export default function Navigation() {
const t = useTranslations("landing");
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const router = useRouter();
return (
<nav className="fixed top-0 z-50 w-full bg-[#0B0E14]/80 backdrop-blur-md border-b border-[#2D333B]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-3">
{/* Logo */}
<button
type="button"
className="flex items-center gap-3 cursor-pointer bg-transparent border-none p-0 min-w-0"
onClick={() => router.push("/")}
aria-label={t("navigateHome")}
>
<div className="size-8 rounded bg-linear-to-br from-[#E54D5E] to-[#C93D4E] flex items-center justify-center text-white">
<OmniRouteLogo size={20} className="text-white" />
</div>
<h2 className="text-white text-lg sm:text-xl font-bold tracking-tight truncate sm:max-w-none max-w-[160px]">
{t("brandName")}
</h2>
</button>
{/* Desktop menu */}
<div className="hidden md:flex items-center gap-8">
<a
className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
href="#features"
>
{t("featuresLink")}
</a>
<a
className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
href="#how-it-works"
>
{t("howItWorks")}
</a>
<Link
className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
href="/docs"
>
{t("docsLink")}
</Link>
<a
className="text-gray-300 hover:text-white text-sm font-medium transition-colors flex items-center gap-1"
href="https://github.com/diegosouzapw/OmniRoute"
target="_blank"
rel="noopener noreferrer"
>
{t("github")}
<span className="material-symbols-outlined text-[14px]" aria-hidden="true">
open_in_new
</span>
</a>
</div>
{/* CTA + Mobile menu */}
<div className="flex items-center gap-2 sm:gap-4 shrink-0">
<button
onClick={() => router.push("/dashboard")}
className="hidden sm:flex h-9 items-center justify-center rounded-lg px-4 bg-[#E54D5E] hover:bg-[#C93D4E] transition-all text-white text-sm font-bold shadow-[0_0_15px_rgba(229,77,94,0.4)] hover:shadow-[0_0_20px_rgba(229,77,94,0.6)]"
>
{t("getStarted")}
</button>
<button
className="md:hidden text-white"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
aria-label={t("toggleMenu")}
>
<span className="material-symbols-outlined" aria-hidden="true">
{mobileMenuOpen ? "close" : "menu"}
</span>
</button>
</div>
</div>
{/* Mobile menu dropdown */}
{mobileMenuOpen && (
<div className="md:hidden border-t border-[#2D333B] bg-[#0B0E14]/95 backdrop-blur-md">
<div className="flex flex-col gap-4 p-6">
<a
className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
href="#features"
onClick={() => setMobileMenuOpen(false)}
>
{t("featuresLink")}
</a>
<a
className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
href="#how-it-works"
onClick={() => setMobileMenuOpen(false)}
>
{t("howItWorks")}
</a>
<Link
className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
href="/docs"
onClick={() => setMobileMenuOpen(false)}
>
{t("docsLink")}
</Link>
<a
className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
href="https://github.com/diegosouzapw/OmniRoute"
target="_blank"
rel="noopener noreferrer"
>
{t("github")}
</a>
<button
onClick={() => router.push("/dashboard")}
className="h-9 rounded-lg bg-[#E54D5E] hover:bg-[#C93D4E] text-white text-sm font-bold"
>
{t("getStarted")}
</button>
</div>
</div>
)}
</nav>
);
}
|