73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import Image from "next/image";
|
|
import { Badge } from "@/components/badge";
|
|
|
|
const projects = [
|
|
{
|
|
title: "L'Encyclopédie des Savoirs",
|
|
description: "Une archive numérique interactive regroupant les découvertes majeures du XIXe siècle.",
|
|
image: "https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?q=80&w=800&auto=format&fit=crop",
|
|
tags: ["Histoire", "Archive", "Web Design"],
|
|
},
|
|
{
|
|
title: "Mnémosyne Engine",
|
|
description: "Algorithme de classification sémantique inspiré des méthodes de mémorisation antiques.",
|
|
image: "https://images.unsplash.com/photo-1507413245164-6160d8298b31?q=80&w=800&auto=format&fit=crop",
|
|
tags: ["IA", "Algorithme", "Recherche"],
|
|
},
|
|
{
|
|
title: "Le Cercle des Érudits",
|
|
description: "Plateforme de collaboration pour chercheurs et historiens du monde entier.",
|
|
image: "https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?q=80&w=800&auto=format&fit=crop",
|
|
tags: ["Communauté", "SaaS", "Éducation"],
|
|
},
|
|
];
|
|
|
|
export function Projects() {
|
|
return (
|
|
<section id="projects" className="py-20 bg-[#f4f1ea]">
|
|
<Container>
|
|
<div className="text-center mb-16">
|
|
<Badge className="mb-4 bg-[#8b7355] text-white border-none">Portfolio</Badge>
|
|
<Heading className="font-playfair text-[#3d301c] italic">Travaux & Recherches</Heading>
|
|
<Subheading className="text-[#5d4d37] max-w-2xl mx-auto mt-4">
|
|
Une sélection de projets alliant rigueur académique et innovation technologique.
|
|
</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{projects.map((project, index) => (
|
|
<Card key={index} className="bg-white border-[#dcd7cc] overflow-hidden hover:shadow-xl transition-shadow duration-300">
|
|
<div className="aspect-video relative overflow-hidden border-b border-[#dcd7cc]">
|
|
<Image
|
|
src={project.image}
|
|
alt={project.title}
|
|
width={800}
|
|
height={450}
|
|
className="object-cover hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
</div>
|
|
<CardHeader className="p-6">
|
|
<div className="flex gap-2 mb-3">
|
|
{project.tags.map((tag) => (
|
|
<span key={tag} className="text-[10px] uppercase tracking-widest text-[#8b7355] font-bold">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<CardTitle className="font-playfair text-[#3d301c] text-xl mb-2">{project.title}</CardTitle>
|
|
<CardDescription className="text-[#5d4d37] leading-relaxed">
|
|
{project.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|