diff --git a/components/features.tsx b/components/features.tsx
new file mode 100644
index 0000000..78e2fa5
--- /dev/null
+++ b/components/features.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { Heading } from "./heading";
+import { Subheading } from "./subheading";
+import { cn } from "@/lib/utils";
+import { GridLineHorizontal, GridLineVertical } from "./grid-lines";
+import { SkeletonOne } from "./skeletons/first";
+import { SkeletonTwo } from "./skeletons/second";
+import { SkeletonFour } from "./skeletons/fourth";
+import { SkeletonThree } from "./skeletons/third";
+
+export const Features = () => {
+  const features = [
+    {
+      title: "Bibliothèque Collaborative",
+      description:
+        "Partagez des textes rares, des analyses littéraires et des documents historiques avec une communauté passionnée.",
+      skeleton: null,
+      className:
+        "col-span-1 lg:col-span-4 border-b border-r dark:border-neutral-800",
+    },
+    {
+      title: "Espaces de Débat",
+      description:
+        "Participez à des discussions approfondies sur des thématiques variées, de l'Antiquité à la littérature contemporaine.",
+      skeleton: null,
+      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+    },
+    {
+      title: "Érudition Partagée",
+      description:
+        "Contribuez à une base de connaissances collective et bénéficiez de l'expertise de chercheurs et d'amateurs éclairés.",
+      skeleton: null,
+      className: "col-span-1 lg:col-span-3 border-r dark:border-neutral-800",
+    },
+    {
+      title: "Recherche Avancée",
+      description:
+        "Accédez facilement à des milliers d'articles, d'essais et de chroniques historiques grâce à nos outils de recherche.",
+      skeleton: null,
+      className: "col-span-1 lg:col-span-3",
+    },
+  ];
+  return (
+    <div className="relative z-20 py-10 lg:py-40 overflow-hidden">
+      <Heading as="h2">Une Plateforme pour les Esprits Curieux</Heading>
+      <Subheading className="text-center ">
+        Mnémosyne offre tous les outils nécessaires pour explorer, documenter et partager la richesse du patrimoine intellectuel humain.
+      </Subheading>
+
+      <div className="relative overflow-hidden">
+        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12">
+          {features.map((feature) => (
+            <FeatureCard key={feature.title} className={feature.className}>
+              <FeatureTitle>{feature.title}</FeatureTitle>
+              <FeatureDescription>{feature.description}</FeatureDescription>
+              <div className=" h-full w-full">{feature.skeleton}</div>
+            </FeatureCard>
+          ))}
+        </div>
+        <GridLineHorizontal
+          style={{
+            top: 0,
+            left: "-10%",
+            width: "120%",
+          }}
+        />
+
+        <GridLineHorizontal
+          style={{
+            bottom: 0,
+            left: "-10%",
+            width: "120%",
+          }}
+        />
+
+        <GridLineVertical
+          style={{
+            top: "-10%",
+            right: 0,
+            height: "120%",
+          }}
+        />
+        <GridLineVertical
+          style={{
+            top: "-10%",
+            left: 0,
+            height: "120%",
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const FeatureCard = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
+      {children}
+    </div>
+  );
+};
+
+const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <Heading as="h3" size="sm" className="text-left">
+      {children}
+    </Heading>
+  );
+};
+
+const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <Subheading className="text-left max-w-sm mx-0 lg:text-sm my-2">
+      {children}
+    </Subheading>
+  );
+};