114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
import { ArrowRight, MapPin, Sparkles } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { cn } from "@/lib/utils";
|
|
import type { HeroCopy } from "./types";
|
|
|
|
type HeroSectionProps = {
|
|
copy: HeroCopy;
|
|
contactHref: string;
|
|
portfolioHref: string;
|
|
};
|
|
|
|
export function HeroSection({
|
|
copy,
|
|
contactHref,
|
|
portfolioHref,
|
|
}: HeroSectionProps) {
|
|
return (
|
|
<section className="relative pt-8 sm:pt-12 lg:pt-16">
|
|
<div className="grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)] lg:items-end">
|
|
<div className="space-y-8">
|
|
<Badge
|
|
variant="outline"
|
|
className="w-fit border-border/80 bg-background/80 text-foreground shadow-xs"
|
|
>
|
|
<span className="mr-2 h-2 w-2 rounded-full bg-status-success" aria-hidden="true" />
|
|
{copy.availability}
|
|
</Badge>
|
|
|
|
<div className="space-y-5">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
|
{copy.name}
|
|
</p>
|
|
<h1 className="max-w-4xl text-balance text-5xl font-semibold tracking-[-0.07em] text-foreground sm:text-6xl lg:text-7xl">
|
|
{copy.headline}
|
|
</h1>
|
|
<p className="max-w-2xl text-base leading-8 text-muted-foreground sm:text-lg">
|
|
{copy.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button asChild size="lg" className="shadow-sm">
|
|
<Link href={contactHref}>
|
|
{copy.primaryCta}
|
|
<ArrowRight className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-border/80 bg-background/70 hover:border-border-strong hover:bg-background"
|
|
>
|
|
<Link href={portfolioHref}>{copy.secondaryCta}</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
{copy.highlights.map((item) => (
|
|
<Badge
|
|
key={item}
|
|
variant="secondary"
|
|
className="bg-secondary/70 text-foreground shadow-none"
|
|
>
|
|
{item}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<AppCard className="overflow-hidden">
|
|
<div className="grid gap-3">
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<MetricCard label={copy.roleLabel} value={copy.roleValue} />
|
|
<MetricCard label={copy.locationLabel} value={copy.locationValue} icon={MapPin} />
|
|
</div>
|
|
<MetricCard label={copy.focusLabel} value={copy.focusValue} icon={Sparkles} strong />
|
|
</div>
|
|
</AppCard>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
type MetricCardProps = {
|
|
label: string;
|
|
value: string;
|
|
strong?: boolean;
|
|
icon?: typeof MapPin;
|
|
};
|
|
|
|
function MetricCard({ label, value, strong = false, icon: Icon }: MetricCardProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-nested border border-border/70 bg-background p-5 transition-all duration-300",
|
|
strong && "bg-surface-2",
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
|
{Icon ? <Icon className="h-3.5 w-3.5" /> : null}
|
|
<span>{label}</span>
|
|
</div>
|
|
<p className="mt-3 text-xl font-semibold tracking-[-0.04em] text-foreground">
|
|
{value}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|