Update components/projects.tsx

components/projects.tsx

@@ -0,0 +1,72 @@
+"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>
+  );
+}