fix(web): consistent SiteHeader across all public pages

Blog and contact (and about/pricing/legal) pages rendered a stripped-down
header (logo + auth buttons only) with no nav — the site nav "disappeared".
Extracted the landing header into a shared <SiteHeader> (logo, nav, theme
toggle, auth-aware actions, mobile menu) used on every public page for
consistent UX.

- new components/site-header.tsx (nav links work from any route via /#…)
- landing nav gains Blog + İletişim so all pages share the same 5-link nav
- about, contact, pricing, blog, blog/$slug, kvkk, privacy, terms → SiteHeader
- demo keeps its purpose-built demo header (sticky + theme + CTA)

typecheck + biome clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/site-header.tsx

@@ -0,0 +1,178 @@
+import { useAuth } from "@/hooks/use-auth";
+import { getUserSettings, setUserSetting } from "@/lib/user-settings";
+import { Button, Separator } from "@sase/ui";
+import { Link } from "@tanstack/react-router";
+import { Menu, Moon, Sun, X } from "lucide-react";
+import { useState } from "react";
+
+// Shared public/marketing header. Mirrors the landing page header so every
+// public page (blog, contact, about, pricing, legal, …) has the same nav,
+// theme toggle, auth-aware actions, and mobile menu. Anchor links use
+// `/#…` so they work from any route (navigate home + scroll).
+export function SiteHeader() {
+  const { isAuthenticated } = useAuth();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [isDark, setIsDark] = useState(() => {
+    const theme = getUserSettings().theme ?? "dark";
+    if (theme === "system") return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return theme === "dark";
+  });
+
+  const toggleTheme = () => {
+    const next = isDark ? "light" : "dark";
+    document.documentElement.classList.toggle("dark", next === "dark");
+    setUserSetting("theme", next);
+    setIsDark(next === "dark");
+  };
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6">
+        <Link to="/" className="text-xl font-bold tracking-wider">
+          SASE
+        </Link>
+
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-8 text-sm text-muted-foreground md:flex">
+          <a href="/#features" className="transition hover:text-foreground">
+            Özellikler
+          </a>
+          <a href="/#how-it-works" className="transition hover:text-foreground">
+            Nasıl Çalışır
+          </a>
+          <Link to="/pricing" className="transition hover:text-foreground">
+            Fiyatlar
+          </Link>
+          <Link to="/blog" className="transition hover:text-foreground">
+            Blog
+          </Link>
+          <Link to="/contact" className="transition hover:text-foreground">
+            İletişim
+          </Link>
+        </nav>
+
+        <div className="hidden items-center gap-3 md:flex">
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            aria-label="Tema değiştir"
+          >
+            {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+          </button>
+          {isAuthenticated ? (
+            <Link to="/dashboard/search">
+              <Button className="rounded-full bg-foreground text-background hover:bg-foreground/90">
+                Panele Git
+              </Button>
+            </Link>
+          ) : (
+            <>
+              <Link to="/login">
+                <Button
+                  variant="outline"
+                  className="rounded-full border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                >
+                  Giriş Yap
+                </Button>
+              </Link>
+              <Link to="/register">
+                <Button className="rounded-full bg-foreground text-background hover:bg-foreground/90">
+                  30 Gün Ücretsiz Deneyin
+                </Button>
+              </Link>
+            </>
+          )}
+        </div>
+
+        {/* Mobile toggle */}
+        <div className="flex items-center gap-2 md:hidden">
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            aria-label="Tema değiştir"
+          >
+            {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+          </button>
+          <button
+            type="button"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label="Menü"
+          >
+            {mobileMenuOpen ? <X className="size-6" /> : <Menu className="size-6" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {mobileMenuOpen && (
+        <div className="border-t border-border px-4 py-4 md:hidden">
+          <nav className="flex flex-col gap-3 text-sm text-muted-foreground">
+            {/* biome-ignore lint/a11y/useValidAnchor: valid hash navigation link that also closes the mobile menu */}
+            <a
+              href="/#features"
+              className="transition hover:text-foreground"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Özellikler
+            </a>
+            {/* biome-ignore lint/a11y/useValidAnchor: valid hash navigation link that also closes the mobile menu */}
+            <a
+              href="/#how-it-works"
+              className="transition hover:text-foreground"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Nasıl Çalışır
+            </a>
+            <Link
+              to="/pricing"
+              className="transition hover:text-foreground"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Fiyatlar
+            </Link>
+            <Link
+              to="/blog"
+              className="transition hover:text-foreground"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Blog
+            </Link>
+            <Link
+              to="/contact"
+              className="transition hover:text-foreground"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              İletişim
+            </Link>
+            <Separator className="bg-border" />
+            {isAuthenticated ? (
+              <Link to="/dashboard/search" onClick={() => setMobileMenuOpen(false)}>
+                <Button className="w-full rounded-full bg-foreground text-background">
+                  Panele Git
+                </Button>
+              </Link>
+            ) : (
+              <>
+                <Link to="/login" onClick={() => setMobileMenuOpen(false)}>
+                  <Button
+                    variant="outline"
+                    className="w-full rounded-full border-border text-muted-foreground"
+                  >
+                    Giriş Yap
+                  </Button>
+                </Link>
+                <Link to="/register" onClick={() => setMobileMenuOpen(false)}>
+                  <Button className="w-full rounded-full bg-foreground text-background">
+                    30 Gün Ücretsiz Deneyin
+                  </Button>
+                </Link>
+              </>
+            )}
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}

apps/web/src/routes/about.tsx

@@ -1,4 +1,5 @@
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { SiteHeader } from "@/components/site-header";
 import { Button } from "@sase/ui";
 import { Link, createFileRoute } from "@tanstack/react-router";
 
@@ -16,21 +17,7 @@ function AboutPage() {
 
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">Giriş Yap</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Kayıt Ol</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="container mx-auto max-w-3xl px-4 py-16">
         <h1 className="text-4xl font-bold">Hakkımızda</h1>

apps/web/src/routes/blog.tsx

@@ -1,4 +1,5 @@
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { SiteHeader } from "@/components/site-header";
 import { useBlogPosts } from "@/hooks/use-blog";
 import { Button } from "@sase/ui";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@sase/ui";
@@ -68,21 +69,7 @@ function BlogPage() {
 
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">Giriş Yap</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Kayıt Ol</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="container mx-auto max-w-4xl px-4 py-16">
         <h1 className="text-4xl font-bold">Blog</h1>

apps/web/src/routes/blog_/$slug.tsx

@@ -1,4 +1,5 @@
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { SiteHeader } from "@/components/site-header";
 import { useBlogPost } from "@/hooks/use-blog";
 import { Button } from "@sase/ui";
 import { Link, createFileRoute } from "@tanstack/react-router";
@@ -412,21 +413,7 @@ function BlogPostPage() {
 
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">Giriş Yap</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Kayıt Ol</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="container mx-auto max-w-3xl px-4 py-16">
         {/* Breadcrumb */}

apps/web/src/routes/contact.tsx

@@ -1,4 +1,5 @@
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { SiteHeader } from "@/components/site-header";
 import { Button } from "@sase/ui";
 import { Card, CardContent, CardHeader, CardTitle } from "@sase/ui";
 import { Link, createFileRoute } from "@tanstack/react-router";
@@ -16,21 +17,7 @@ function ContactPage() {
 
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">Giriş Yap</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Kayıt Ol</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="container mx-auto max-w-3xl px-4 py-16">
         <h1 className="text-4xl font-bold">İletişim</h1>

apps/web/src/routes/index.tsx

@@ -639,6 +639,12 @@ export function HomePage() {
             <Link to="/pricing" className="transition hover:text-foreground">
               Fiyatlar
             </Link>
+            <Link to="/blog" className="transition hover:text-foreground">
+              Blog
+            </Link>
+            <Link to="/contact" className="transition hover:text-foreground">
+              İletişim
+            </Link>
           </nav>
 
           <div className="hidden items-center gap-3 md:flex">
@@ -726,6 +732,20 @@ export function HomePage() {
               >
                 Fiyatlar
               </Link>
+              <Link
+                to="/blog"
+                className="transition hover:text-foreground"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Blog
+              </Link>
+              <Link
+                to="/contact"
+                className="transition hover:text-foreground"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                İletişim
+              </Link>
               <Separator className="bg-border" />
               {isAuthenticated ? (
                 <Link to="/dashboard/search" onClick={() => setMobileMenuOpen(false)}>

apps/web/src/routes/kvkk.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@sase/ui";
+import { SiteHeader } from "@/components/site-header";
 import { Link, createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/kvkk")({
@@ -8,21 +9,7 @@ export const Route = createFileRoute("/kvkk")({
 function KvkkPage() {
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">Giriş Yap</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Kayıt Ol</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="container mx-auto max-w-3xl px-4 py-16">
         <h1 className="text-4xl font-bold">KVKK Aydınlatma Metni</h1>

apps/web/src/routes/pricing.tsx

@@ -1,4 +1,5 @@
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { SiteHeader } from "@/components/site-header";
 import { useTranslation } from "@/lib/i18n";
 import { FULL_PLAN_BRAND_LIMIT, formatTRY } from "@sase/shared";
 import { Button } from "@sase/ui";
@@ -61,21 +62,7 @@ function PricingPage() {
 
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">{t("common.login")}</Button>
-            </Link>
-            <Link to="/register">
-              <Button>{t("common.register")}</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main id="main-content" className="container mx-auto px-4 py-24">
         <div className="text-center">

apps/web/src/routes/privacy.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@sase/ui";
+import { SiteHeader } from "@/components/site-header";
 import { Link, createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/privacy")({
@@ -8,21 +9,7 @@ export const Route = createFileRoute("/privacy")({
 function PrivacyPage() {
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">Giriş Yap</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Kayıt Ol</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="container mx-auto max-w-3xl px-4 py-16">
         <h1 className="text-4xl font-bold">Gizlilik Politikası</h1>

apps/web/src/routes/terms.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@sase/ui";
+import { SiteHeader } from "@/components/site-header";
 import { Link, createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/terms")({
@@ -8,21 +9,7 @@ export const Route = createFileRoute("/terms")({
 function TermsPage() {
   return (
     <div className="min-h-screen">
-      <header className="border-b">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link to="/" className="text-xl font-bold tracking-wider">
-            SASE
-          </Link>
-          <div className="flex items-center gap-4">
-            <Link to="/login">
-              <Button variant="ghost">Giriş Yap</Button>
-            </Link>
-            <Link to="/register">
-              <Button>Kayıt Ol</Button>
-            </Link>
-          </div>
-        </div>
-      </header>
+      <SiteHeader />
 
       <main className="container mx-auto max-w-3xl px-4 py-16">
         <h1 className="text-4xl font-bold">Kullanım Koşulları</h1>