made the feature list better looking

website/components/Feature.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React, { ForwardRefExoticComponent, RefAttributes } from "react";
+import { motion } from "framer-motion";
+import { LucideProps } from "lucide-react";
+
+interface VintLangFeature {
+  name: string;
+  description: string;
+  icon: ForwardRefExoticComponent<
+    Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
+  >;
+}
+
+interface FeatureProps {
+  feature: VintLangFeature;
+  index: number;
+}
+
+const Feature: React.FC<FeatureProps> = ({ feature, index }) => {
+  return (
+    <motion.div
+      className="rounded-lg bg-taupe-900 p-6 text-center md:text-left flex flex-col md:flex-row items-center shadow-lg hover:shadow-xl transition-shadow duration-300"
+      initial={{ opacity: 0, y: 30 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, delay: index * 0.1 }}
+    >
+      <div className="flex items-center px-1 justify-center h-16 w-16 rounded-full bg-taupe-100 text-taupe-900 dark:bg-taupe-800 dark:text-taupe-100 shadow-md">
+        <feature.icon className="w-8 h-8" aria-label={`${feature.name} icon`} />
+      </div>
+      <div className="mt-4 md:mt-0 md:ml-6 text-center md:text-left">
+        <h3 className="text-xl font-bold text-white">{feature.name}</h3>
+        <p className="mt-2 text-sm text-neutral-400">{feature.description}</p>
+      </div>
+    </motion.div>
+  );
+};
+
+export default Feature;

website/components/features.tsx

@@ -1,37 +1,19 @@
-'use client'
-
-import { motion } from 'motion/react'
-
+"use client";
 
+import { features } from "@/lib/utils";
+import Feature from "./Feature";
 
 export default function Features() {
   return (
-    <section id="features" className="container py-24 sm:py-32">
-      <h2 className="text-3xl font-bold tracking-tight text-center mb-12">
+    <section id="features" className="container mx-auto px-6 py-16">
+      <h2 className="text-center text-4xl font-extrabold text-white mb-12 tracking-tight">
         Why Choose VintLang?
       </h2>
-      <div className="grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-0">
+      <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
         {features.map((feature, index) => (
-          <motion.div
-            key={feature.name}
-            className="text-center md:flex md:items-start md:text-left lg:block lg:text-center"
-            initial={{ opacity: 0, y: 50 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: index * 0.1 }}
-          >
-            <div className="md:flex-shrink-0 flex justify-center">
-              <div className="h-16 w-16 flex items-center justify-center rounded-full bg-taupe-100 text-taupe-900 dark:bg-taupe-900 dark:text-taupe-100">
-                {<feature.icon className="w-1/3 h-1/3" />}
-              </div>
-            </div>
-            <div className="mt-6 md:ml-4 md:mt-0 lg:ml-0 lg:mt-6">
-              <h3 className="text-lg font-semibold">{feature.name}</h3>
-              <p className="mt-3 text-muted-foreground">{feature.description}</p>
-            </div>
-          </motion.div>
+          <Feature key={index} feature={feature} index={index} />
         ))}
       </div>
     </section>
-  )
+  );
 }
-