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>
This commit is contained in:
2026-05-24 19:45:21 +03:00
parent 6e9223b277
commit 6f4d6eff5c
10 changed files with 214 additions and 120 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 */}

View File

@@ -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>

View File

@@ -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)}>

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>