prepare layout

components/ui/header.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import Link from "next/link"
+
+interface HeaderProps {
+  className?: string
+}
+
+export function Header({ className }: HeaderProps) {
+  return (
+    <header
+      className={cn(
+        "flex items-center justify-between p-4 border-b border-border",
+        className
+      )}
+    >
+      <div className="flex items-center gap-4">
+        <img
+          src="/logo.svg"
+          alt="Logo"
+          className="h-8 w-8"
+        />
+        <nav className="flex items-center gap-6">
+          <Link
+            href="/login"
+            className="text-sm font-medium text-foreground hover:underline"
+          >
+            Login
+          </Link>
+          <Link
+            href="/pricing"
+            className="text-sm font-medium text-foreground hover:underline"
+          >
+            Pricing
+          </Link>
+          <Link
+            href="/about"
+            className="text-sm font-medium text-foreground hover:underline"
+          >
+            About
+          </Link>
+        </nav>
+      </div>
+    </header>
+  )
+}