mguilbert
26256f0379
- ProjectHero: full-viewport dark hero with blurred cover image overlay, animated entrance (back link → date → title → description), scroll indicator - ProjectMeta: reveal-animated metadata strip with top/bottom dividers, refined label/value typography using brand color tokens - ProjectTechnologies: outline pill tags with per-tag staggered reveal, hover border/color transition - ProjectsColumns: cleaner 2-col prose grid with wider gap - ProjectPreviewGrid: rounded-xl with subtle border, responsive 1→2 col - ProjectVisitButton: pill-shaped dark CTA replacing bordered rectangle - OtherProjects: image-first card layout with scroll reveal, hover scale + brightness on covers, sliding arrow, refined "Voir aussi" header - page.tsx: passes cover prop to ProjectHero, 900px max-width content column, semantic MDX prose styles via article selector chains Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
type PreviewItem = {
|
|
title: string;
|
|
image: string;
|
|
};
|
|
|
|
type props = {
|
|
items?: PreviewItem[];
|
|
};
|
|
|
|
export function ProjectPreviewGrid({ items = [] }: props) {
|
|
return (
|
|
<div className={`grid gap-4 ${items.length > 1 ? 'lg:grid-cols-2' : ''}`}>
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="rounded-xl overflow-hidden bg-brand-brown/5 border border-brand-brown/8"
|
|
>
|
|
{item.image ? (
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="min-h-[220px] flex items-center justify-center text-brand-brown/30 font-sans text-sm">
|
|
{item.title}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|