| 1 | import Link from "next/link"; |
| 2 | import Image from "next/image"; |
| 3 | |
| 4 | export default function Header() { |
| 5 | return ( |
| 6 | <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"> |
| 7 | <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30"> |
| 8 | <Link href="/about" className="underline">SplitFire</Link> |
| 9 | <code className="font-mono font-bold">intelligent expression engine.</code> |
| 10 | </p> |
| 11 | <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none"> |
| 12 | <Link href="/" className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"> |
| 13 | <Image |
| 14 | src="/128x128@2x.png" |
| 15 | alt="SplitFire logo" |
| 16 | width={100} |
| 17 | height={24} |
| 18 | priority |
| 19 | /> |
| 20 | </Link> |
| 21 | </div> |
| 22 | </div> |
| 23 | ); |
| 24 | } |