refactor(web): extract landing footer into shared SiteFooter component
Behavior-preserving move of the inline footer markup out of index.tsx into components/site-footer.tsx, mirroring the site-header convention. No visual or content change — sets up the footer for i18n, a11y and content fixes in follow-up commits. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
111
apps/web/src/components/site-footer.tsx
Normal file
111
apps/web/src/components/site-footer.tsx
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
import { Separator } from "@sase/ui";
|
||||||
|
import { Link } from "@tanstack/react-router";
|
||||||
|
|
||||||
|
export function SiteFooter() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-background px-4 sm:px-6">
|
||||||
|
<div className="mx-auto max-w-7xl">
|
||||||
|
<div className="grid grid-cols-2 gap-8 py-16 sm:grid-cols-4">
|
||||||
|
{/* Brand */}
|
||||||
|
<div className="col-span-2 sm:col-span-1">
|
||||||
|
<span className="text-lg font-bold">Sase.tr</span>
|
||||||
|
<p className="mt-3 text-sm text-muted-foreground">
|
||||||
|
Şase çözme & orijinal yedek parça kataloğu platformu.
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground/70">info@sase.tr</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Product */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-muted-foreground">Ürün</h4>
|
||||||
|
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
|
||||||
|
<li>
|
||||||
|
<a href="#features" className="transition hover:text-foreground">
|
||||||
|
Şase Çözme
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#features" className="transition hover:text-foreground">
|
||||||
|
Parça Kataloğu
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#features" className="transition hover:text-foreground">
|
||||||
|
İnteraktif Şema
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/pricing" className="transition hover:text-foreground">
|
||||||
|
Fiyatlar
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Company */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-muted-foreground">Şirket</h4>
|
||||||
|
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
|
||||||
|
<li>
|
||||||
|
<Link to="/about" className="transition hover:text-foreground">
|
||||||
|
Hakkımızda
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/blog" className="transition hover:text-foreground">
|
||||||
|
Blog
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/contact" className="transition hover:text-foreground">
|
||||||
|
İletişim
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Legal */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-muted-foreground">Yasal</h4>
|
||||||
|
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
|
||||||
|
<li>
|
||||||
|
<Link to="/privacy" className="transition hover:text-foreground">
|
||||||
|
Gizlilik Politikası
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/terms" className="transition hover:text-foreground">
|
||||||
|
Kullanım Koşulları
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/kvkk" className="transition hover:text-foreground">
|
||||||
|
KVKK
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator className="bg-border" />
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center justify-between gap-4 py-6 sm:flex-row">
|
||||||
|
<div className="flex flex-col items-center gap-3 sm:flex-row">
|
||||||
|
<p className="text-sm text-muted-foreground/70">
|
||||||
|
© {new Date().getFullYear()} Sase.tr. Tüm hakları saklıdır.
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground/70">
|
||||||
|
<span className="size-2 rounded-full bg-brand" />
|
||||||
|
Tüm servisler aktif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 text-muted-foreground/70">
|
||||||
|
<a href="mailto:info@sase.tr" className="text-sm transition hover:text-foreground">
|
||||||
|
info@sase.tr
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { SiteFooter } from "@/components/site-footer";
|
||||||
import { CarBrandLogo } from "@/components/ui/car-brand-logo";
|
import { CarBrandLogo } from "@/components/ui/car-brand-logo";
|
||||||
import { SmartAnimateText } from "@/components/ui/smart-animate-text";
|
import { SmartAnimateText } from "@/components/ui/smart-animate-text";
|
||||||
import { VinBrandIcon } from "@/components/ui/vin-brand-icon";
|
import { VinBrandIcon } from "@/components/ui/vin-brand-icon";
|
||||||
@@ -1791,110 +1792,7 @@ export function HomePage() {
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* ─── 13. FOOTER ───────────────────────────────────────────────── */}
|
{/* ─── 13. FOOTER ───────────────────────────────────────────────── */}
|
||||||
<footer className="bg-background px-4 sm:px-6">
|
<SiteFooter />
|
||||||
<div className="mx-auto max-w-7xl">
|
|
||||||
<div className="grid grid-cols-2 gap-8 py-16 sm:grid-cols-4">
|
|
||||||
{/* Brand */}
|
|
||||||
<div className="col-span-2 sm:col-span-1">
|
|
||||||
<span className="text-lg font-bold">Sase.tr</span>
|
|
||||||
<p className="mt-3 text-sm text-muted-foreground">
|
|
||||||
Şase çözme & orijinal yedek parça kataloğu platformu.
|
|
||||||
</p>
|
|
||||||
<p className="mt-2 text-sm text-muted-foreground/70">info@sase.tr</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Product */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-muted-foreground">Ürün</h4>
|
|
||||||
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
|
|
||||||
<li>
|
|
||||||
<a href="#features" className="transition hover:text-foreground">
|
|
||||||
Şase Çözme
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#features" className="transition hover:text-foreground">
|
|
||||||
Parça Kataloğu
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#features" className="transition hover:text-foreground">
|
|
||||||
İnteraktif Şema
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/pricing" className="transition hover:text-foreground">
|
|
||||||
Fiyatlar
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Company */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-muted-foreground">Şirket</h4>
|
|
||||||
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
|
|
||||||
<li>
|
|
||||||
<Link to="/about" className="transition hover:text-foreground">
|
|
||||||
Hakkımızda
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/blog" className="transition hover:text-foreground">
|
|
||||||
Blog
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/contact" className="transition hover:text-foreground">
|
|
||||||
İletişim
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Legal */}
|
|
||||||
<div>
|
|
||||||
<h4 className="text-sm font-semibold text-muted-foreground">Yasal</h4>
|
|
||||||
<ul className="mt-3 space-y-2 text-sm text-muted-foreground">
|
|
||||||
<li>
|
|
||||||
<Link to="/privacy" className="transition hover:text-foreground">
|
|
||||||
Gizlilik Politikası
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/terms" className="transition hover:text-foreground">
|
|
||||||
Kullanım Koşulları
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/kvkk" className="transition hover:text-foreground">
|
|
||||||
KVKK
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator className="bg-border" />
|
|
||||||
|
|
||||||
<div className="flex flex-col items-center justify-between gap-4 py-6 sm:flex-row">
|
|
||||||
<div className="flex flex-col items-center gap-3 sm:flex-row">
|
|
||||||
<p className="text-sm text-muted-foreground/70">
|
|
||||||
© {new Date().getFullYear()} Sase.tr. Tüm hakları saklıdır.
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-2 text-sm text-muted-foreground/70">
|
|
||||||
<span className="size-2 rounded-full bg-brand" />
|
|
||||||
Tüm servisler aktif
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-4 text-muted-foreground/70">
|
|
||||||
<a href="mailto:info@sase.tr" className="text-sm transition hover:text-foreground">
|
|
||||||
info@sase.tr
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user