58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import { HeroAtmosphere } from "@/components/layout/hero-atmosphere";
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { Button } from "@/components/ui/button";
|
|
import { getLocalizedPath } from "@/lib/locale";
|
|
|
|
type HomeHeroProps = {
|
|
locale: string;
|
|
kicker: string;
|
|
title: string;
|
|
description: string;
|
|
portfolioLabel: string;
|
|
contactLabel: string;
|
|
};
|
|
|
|
export function HomeHero({
|
|
locale,
|
|
kicker,
|
|
title,
|
|
description,
|
|
portfolioLabel,
|
|
contactLabel,
|
|
}: HomeHeroProps) {
|
|
return (
|
|
<section className="relative isolate flex min-h-[85vh] items-center overflow-hidden">
|
|
<HeroAtmosphere />
|
|
<div className="mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
|
|
<MotionFade className="w-full">
|
|
<div className="mx-auto max-w-[54rem]">
|
|
<p className="text-sm font-medium tracking-[0.08em] text-foreground/62">
|
|
{kicker}
|
|
</p>
|
|
<h1 className="mt-6 whitespace-pre-line text-balance text-[3rem] font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-[4.5rem] lg:text-[6.75rem]">
|
|
{title}
|
|
</h1>
|
|
<p className="mx-auto mt-6 max-w-[30rem] text-sm leading-6 text-foreground/66 sm:text-base">
|
|
{description}
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
<Button asChild size="lg" className="px-6">
|
|
<Link href={getLocalizedPath(locale, "/portfolio")}>
|
|
{portfolioLabel}
|
|
<ArrowRight className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button asChild variant="outline" size="lg" className="px-6">
|
|
<Link href={getLocalizedPath(locale, "/contact")}>{contactLabel}</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</MotionFade>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|