87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { SectionHeading } from "./section-heading";
|
|
import type { ProjectCardCopy, ProjectsSectionCopy } from "./types";
|
|
|
|
type ProjectsSectionProps = {
|
|
copy: ProjectsSectionCopy;
|
|
items: ProjectCardCopy[];
|
|
};
|
|
|
|
export function ProjectsSection({ copy, items }: ProjectsSectionProps) {
|
|
return (
|
|
<section className="space-y-10">
|
|
<SectionHeading
|
|
eyebrow={copy.eyebrow}
|
|
title={copy.title}
|
|
description={copy.description}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3 xl:gap-6">
|
|
{items.map((item, index) => (
|
|
<AppCard
|
|
key={`${item.title}-${index}`}
|
|
layer="single"
|
|
interactive
|
|
className={[
|
|
"group h-full border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:bg-background/80 hover:shadow-lg",
|
|
index === 0 ? "lg:col-span-2" : "",
|
|
].join(" ")}
|
|
>
|
|
<div className="flex h-full flex-col gap-6 p-6">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{item.meta.map((metaItem) => (
|
|
<Badge
|
|
key={metaItem}
|
|
variant="outline"
|
|
className="border-border/80 bg-background text-muted-foreground transition-colors duration-300 group-hover:border-border-strong group-hover:text-foreground/80"
|
|
>
|
|
{metaItem}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground transition-colors duration-300 group-hover:text-foreground/95">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-sm leading-7 text-muted-foreground">{item.summary}</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
|
{copy.stackLabel}
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{item.stack.map((stackItem) => (
|
|
<Badge
|
|
key={stackItem}
|
|
variant="secondary"
|
|
className="bg-secondary/70 text-foreground transition-colors duration-300 group-hover:bg-secondary"
|
|
>
|
|
{stackItem}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-auto">
|
|
<Link
|
|
href={item.href}
|
|
className="inline-flex items-center gap-2 text-sm font-medium text-foreground transition-all duration-200 group-hover:translate-x-0.5"
|
|
>
|
|
{item.cta}
|
|
<ArrowUpRight className="h-4 w-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|