| 1 | import { Button } from "@/components/ui/button"; |
| 2 | import { Github } from "lucide-react"; |
| 3 | import { DEFAULT_ICON_INDEX, icons } from "@/data/icons"; |
| 4 | |
| 5 | export function Navigation() { |
| 6 | const defaultIcon = icons[DEFAULT_ICON_INDEX]; |
| 7 | |
| 8 | return ( |
| 9 | <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50"> |
| 10 | <div className="container mx-auto px-4 sm:px-6 lg:px-8"> |
| 11 | <div className="flex h-16 items-center justify-between"> |
| 12 | <div className="flex items-center gap-2"> |
| 13 | <img |
| 14 | src={`/icons/${defaultIcon}`} |
| 15 | alt="Aero" |
| 16 | className="w-8 h-8 rounded-lg" |
| 17 | /> |
| 18 | <span className="text-xl font-bold">Aero</span> |
| 19 | </div> |
| 20 | <div className="hidden md:flex items-center gap-6"> |
| 21 | <a |
| 22 | href="#features" |
| 23 | className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors" |
| 24 | > |
| 25 | Features |
| 26 | </a> |
| 27 | <a |
| 28 | href="#icons" |
| 29 | className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors" |
| 30 | > |
| 31 | App Icons |
| 32 | </a> |
| 33 | <a |
| 34 | href="#pricing" |
| 35 | className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors" |
| 36 | > |
| 37 | Pricing |
| 38 | </a> |
| 39 | </div> |
| 40 | <Button variant="outline" size="sm" asChild> |
| 41 | <a |
| 42 | href="https://github.com/phantomknight287/aero" |
| 43 | target="_blank" |
| 44 | rel="noopener noreferrer" |
| 45 | > |
| 46 | <Github className="w-4 h-4 mr-2" /> |
| 47 | GitHub |
| 48 | </a> |
| 49 | </Button> |
| 50 | </div> |
| 51 | </div> |
| 52 | </nav> |
| 53 | ); |
| 54 | } |