feat: add footer section
This commit is contained in:
parent
d417d22a9d
commit
141bfebc17
3 changed files with 30 additions and 2 deletions
|
|
@ -2,6 +2,7 @@ import type { Metadata } from "next";
|
|||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Header from "../components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Background from "@/components/Background";
|
||||
|
||||
const geistSans = Geist({
|
||||
|
|
@ -34,6 +35,7 @@ export default function RootLayout({
|
|||
<Background />
|
||||
<Header />
|
||||
<main className="grow">{children}</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
26
src/components/Footer.tsx
Normal file
26
src/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="w-full border-t border-slate-900 bg-slate-950 text-center text-xs text-slate-500 px-4 sm:px-4 py-4">
|
||||
<div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p>© {new Date().getFullYear()} André Kempf. All rights reserved.</p>
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
href="/imprint"
|
||||
className="hover:text-slate-300 transition-colors"
|
||||
>
|
||||
Impressum
|
||||
</Link>
|
||||
<span>|</span>
|
||||
<Link
|
||||
href="/privacy"
|
||||
className="hover:text-slate-300 transition-colors"
|
||||
>
|
||||
Datenschutz
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,8 +14,8 @@ export default function Header() {
|
|||
];
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 w-full bg-slate-900/90 backdrop-blur-md border-b border-slate-800 z-50 py-4">
|
||||
<div className="max-w-5xl mx-auto flex justify-between items-center px-4 md:px-6">
|
||||
<header className="fixed top-0 left-0 w-full bg-slate-900/90 backdrop-blur-md border-b border-slate-800 z-50 px-4 sm:px-4 py-4">
|
||||
<div className="max-w-5xl mx-auto flex justify-between items-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xl font-bold text-white hover:text-blue-400 transition-colors tracking-wider z-50"
|
||||
|
|
|
|||
Loading…
Reference in a new issue