features section

components/sections/FeatureSection.tsx

@@ -0,0 +1,23 @@
+import { FeatureColumn } from '@/components/ui/FeatureColumn';
+
+export default function FeatureSection() {
+    return (
+        <div className="w-full h-180 flex flex-row justify-center items-center">
+            <FeatureColumn 
+                imagePath={"/icons/brain.svg"} 
+                title={"Plus qu'un simple exécutant"} 
+                text={"Grâce à mon background en conception numérique et mobile, je ne me contente pas de coder. J'apporte un regard critique et constructif sur l'ensemble de votre projet."} 
+            />
+            <FeatureColumn 
+                imagePath={"/icons/building.svg"} 
+                title={"Des fondations en béton"} 
+                text={"Ma spécialité : l'architecture. Je construis des solutions pérennes, évolutives et capables d'absorber la croissance de votre produit dans le temps."} 
+            />
+            <FeatureColumn 
+                imagePath={"/icons/people.svg"} 
+                title={"L'utilisateur au centre"} 
+                text={"Le code parfait n'est rien si le produit ne répond pas à un besoin. Je place l'expérience utilisateur et la fonctionnalité au cœur de mes développements."} 
+            />
+        </div>
+    );
+}

components/ui/FeatureColumn.tsx

@@ -0,0 +1,15 @@
+type props = {
+    imagePath   : string;
+    title       : String;
+    text        : String;
+};
+
+export const FeatureColumn = ({ imagePath, title, text }: props) => {
+    return (
+        <div className="flex flex-col items-center justify-start h-100 gap-7">
+            <img className="w-33.75 h-33.75" src={imagePath} alt={`icon illustrating the text ${title}`} />
+            <div className="font-serif text-brand-brown text-3xl">{title}</div>
+            <div className="font-sans text-normal text-center w-3/5">{text}</div>
+        </div>
+    );
+};

components/ui/ProjectCard.tsx

@@ -56,9 +56,6 @@ export const ProjectCard = ({
                 </div>
             </div>
             
-
-
-            
             {/* Bottom separator */}
             {isTheLast && <div className="w-full h-px bg-brand-brown/20" />}
         </div>