126 lines
3.9 KiB
TypeScript
126 lines
3.9 KiB
TypeScript
import {
|
|
Activity,
|
|
BriefcaseBusiness,
|
|
Layers3,
|
|
Mail,
|
|
Sparkles,
|
|
TimerReset,
|
|
} from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { SectionHeading } from "./section-heading";
|
|
import { BentoCard } from "./bento-card";
|
|
import type { BentoSectionCopy } from "./types";
|
|
|
|
type BentoGridSectionProps = {
|
|
copy: BentoSectionCopy;
|
|
};
|
|
|
|
export function BentoGridSection({ copy }: BentoGridSectionProps) {
|
|
return (
|
|
<section className="space-y-8">
|
|
<SectionHeading
|
|
eyebrow={copy.eyebrow}
|
|
title={copy.title}
|
|
description={copy.description}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
|
|
<BentoCard
|
|
eyebrow={copy.about.eyebrow}
|
|
title={copy.about.title}
|
|
description={copy.about.description}
|
|
icon={<BriefcaseBusiness className="h-5 w-5" />}
|
|
className="xl:col-span-2 xl:row-span-2"
|
|
>
|
|
<ul className="grid gap-3 sm:grid-cols-2">
|
|
{copy.about.points.map((item) => (
|
|
<li
|
|
key={item}
|
|
className="rounded-nested border border-border/70 bg-background px-4 py-3 text-sm text-foreground/88"
|
|
>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</BentoCard>
|
|
|
|
<BentoCard
|
|
eyebrow={copy.coreStack.eyebrow}
|
|
title={copy.coreStack.title}
|
|
icon={<Layers3 className="h-5 w-5" />}
|
|
>
|
|
<div className="flex flex-wrap gap-2">
|
|
{copy.coreStack.items.map((item) => (
|
|
<Badge key={item} variant="outline" className="border-border/80 bg-background">
|
|
{item}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</BentoCard>
|
|
|
|
<BentoCard
|
|
eyebrow={copy.availability.eyebrow}
|
|
title={copy.availability.title}
|
|
description={copy.availability.description}
|
|
icon={<Activity className="h-5 w-5" />}
|
|
>
|
|
<Badge variant="success" className="w-fit">
|
|
{copy.availability.status}
|
|
</Badge>
|
|
</BentoCard>
|
|
|
|
<BentoCard
|
|
eyebrow={copy.currentFocus.eyebrow}
|
|
title={copy.currentFocus.title}
|
|
icon={<Sparkles className="h-5 w-5" />}
|
|
>
|
|
<ul className="space-y-3 text-sm text-foreground/88">
|
|
{copy.currentFocus.items.map((item) => (
|
|
<li key={item} className="rounded-nested border border-border/70 bg-background px-4 py-3">
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</BentoCard>
|
|
|
|
<BentoCard
|
|
eyebrow={copy.contact.eyebrow}
|
|
title={copy.contact.title}
|
|
description={copy.contact.description}
|
|
icon={<Mail className="h-5 w-5" />}
|
|
>
|
|
<div className="rounded-nested border border-border/70 bg-background px-4 py-4">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
|
{copy.contact.emailLabel}
|
|
</p>
|
|
<p className="mt-2 text-base font-medium text-foreground">
|
|
{copy.contact.emailValue}
|
|
</p>
|
|
</div>
|
|
</BentoCard>
|
|
|
|
<BentoCard
|
|
eyebrow={copy.highlights.eyebrow}
|
|
title={copy.highlights.title}
|
|
icon={<TimerReset className="h-5 w-5" />}
|
|
>
|
|
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
|
{copy.highlights.items.map((item) => (
|
|
<div
|
|
key={item.label}
|
|
className="rounded-nested border border-border/70 bg-background px-4 py-4"
|
|
>
|
|
<p className="text-2xl font-semibold tracking-[-0.05em] text-foreground">
|
|
{item.value}
|
|
</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">{item.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</BentoCard>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|