File size: 2,437 Bytes
3950932 | 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 | "use client";
import { useState } from "react";
export function Navbar() {
const [mobileOpen, setMobileOpen] = useState(false);
return (
<nav className="navbar">
{/* Logo */}
<div className="flex items-center gap-3">
{/* Tiger spike mark */}
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
<circle cx="14" cy="14" r="13" stroke="#FF6B00" strokeWidth="2" />
<path d="M14 4L14 24M4 14L24 14M7 7L21 21M21 7L7 21" stroke="#FF6B00" strokeWidth="1.5" strokeLinecap="round" />
</svg>
<span className="title-lg" style={{ color: "#002B49" }}>
Graph<span style={{ color: "#FF6B00" }}>RAG</span>
</span>
<span className="badge-outline text-xs hidden sm:inline-flex">Hackathon</span>
</div>
{/* Desktop Nav */}
<div className="hidden md:flex items-center gap-6">
<a href="#live" className="body-sm hover:text-tiger-orange transition-colors" style={{ color: "#6c6a64" }}>Live Compare</a>
<a href="#benchmark" className="body-sm hover:text-tiger-orange transition-colors" style={{ color: "#6c6a64" }}>Benchmark</a>
<a href="#cost" className="body-sm hover:text-tiger-orange transition-colors" style={{ color: "#6c6a64" }}>Cost Analysis</a>
<a href="#graph" className="body-sm hover:text-tiger-orange transition-colors" style={{ color: "#6c6a64" }}>Graph Explorer</a>
</div>
{/* CTA */}
<div className="flex items-center gap-3">
<span className="caption hidden lg:block" style={{ color: "#6c6a64" }}>
Powered by TigerGraph + Claude
</span>
<button className="btn btn-primary btn-sm">
Try Demo
</button>
</div>
{/* Mobile hamburger */}
<button
className="btn-ghost md:hidden"
onClick={() => setMobileOpen(!mobileOpen)}
aria-label="Toggle menu"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
{mobileOpen ? (
<path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" />
) : (
<path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" />
)}
</svg>
</button>
</nav>
);
}
|