redesign(project-page): editorial redesign of /works/[slug]
- 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>
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
type props = {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function ProjectsColumns({ children }: props) {
|
||||
return (
|
||||
<div className="grid gap-6 text-justify text-base font-sans lg:grid-cols-2 lg:space-x-6">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="grid gap-8 lg:grid-cols-2 lg:gap-14">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user