Marco
2505a87717
Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type. Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close, h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open. Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image scales responsively, gradient mask via .hero-mask only at lg+ in CSS. Divider: flex-wrap + gap-y for smaller screens. Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight. Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row, excerpt hidden on mobile secondary cards to save space. About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo. Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+. Footer: flex-col→lg:flex-row, flex-wrap on legal links. globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
const links = [
|
|
{ label: "Impressum", href: "/impressum" },
|
|
{ label: "Datenschutz", href: "/datenschutz" },
|
|
{ label: "AGB", href: "/agb" },
|
|
{ label: "Widerruf", href: "/widerruf" },
|
|
];
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="bg-[#111] flex flex-col items-center w-full mt-auto">
|
|
|
|
{/* 3px top divider */}
|
|
<div className="bg-[#30302c] h-[3px] w-full shrink-0" />
|
|
|
|
{/* Footer inner */}
|
|
<div className="flex flex-col items-start w-full max-w-[1280px] py-4">
|
|
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-5 lg:gap-0 px-4 md:px-8 lg:px-16 w-full">
|
|
|
|
{/* Logo */}
|
|
<div className="flex items-center p-2 shrink-0">
|
|
<span
|
|
className="font-semibold text-white text-[1.25rem] leading-normal whitespace-nowrap"
|
|
style={{ fontFamily: "var(--font-lora)" }}
|
|
>
|
|
einfach produktiv
|
|
<span style={{ color: "#fdb705" }}>.</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Social handle */}
|
|
<p
|
|
className="font-normal text-white text-[1.25rem] lg:text-[1.5rem] lg:text-center leading-[1.2] whitespace-nowrap shrink-0"
|
|
style={{ fontFamily: "var(--font-lora)", fontWeight: 400 }}
|
|
>
|
|
@einfach.produktiv
|
|
</p>
|
|
|
|
{/* Legal links */}
|
|
<div className="flex flex-wrap items-start gap-x-6 gap-y-2 shrink-0">
|
|
{links.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
className="font-normal text-white text-[0.875rem] leading-[1.5] whitespace-nowrap hover:text-[#f6a701] transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|