File size: 2,353 Bytes
44ec4f2 | 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 | 'use client'
import { Button } from '@/components/ui/button'
import { Sun } from '@phosphor-icons/react'
import { motion } from 'framer-motion'
export function Header() {
return (
<motion.header
className="fixed top-0 left-0 right-0 z-40 pt-8 pb-4"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
<div className="max-w-[1400px] mx-auto px-6 lg:px-12">
<nav className="flex items-center justify-center">
<div className="flex items-center gap-6 bg-card/95 backdrop-blur-md px-8 py-3 rounded-full shadow-lg border border-white/10">
<button className="flex items-center gap-2 text-card-foreground hover:text-primary transition-colors">
<Sun size={20} weight="fill" />
</button>
<div className="h-6 w-px bg-white/20" />
<a
href="#work"
className="text-card-foreground hover:text-primary transition-colors text-sm font-medium"
>
Work
</a>
<a
href="#about"
className="text-card-foreground hover:text-primary transition-colors text-sm font-medium"
>
About
</a>
<a
href="#connect"
className="text-card-foreground hover:text-primary transition-colors text-sm font-medium"
>
Connect
</a>
<div className="h-6 w-px bg-white/20" />
<Button
className="bg-primary text-primary-foreground hover:bg-primary/90 font-medium rounded-full px-6"
size="sm"
>
Start project
</Button>
</div>
</nav>
</div>
</motion.header>
)
}
|