ok

src/components/Benefits.tsx

@@ -1,55 +1,42 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { useInView } from 'framer-motion'
+import { Container } from '@/components/Container'
+
+
+
+
+
 const features = [
   {
-    name: 'Communication & Collaboration',
+    name: 'Decentralization',
+    description: 'Designed to operate in a decentralized manner, it connects nodes and enables efficient data transfer and communication without relying on a single central authority.',
+  },
+  {
+    name: 'Efficiency',
     description:
-      'Encrypted voice/video calls. Self-hosted messaging systems. Secure document collaboration. Private file sharing between trusted nodes. Secure remote work collaboration.',
+      'Mycelium provides an efficient digital communication network where data travels along the most efficient paths, reducing latency and optimizing resource utilization.',
   },
   {
-    name: 'Cloud & Infrastructure',
-    description: `Private cloud computing resources
-Virtual private networks (VPNs)
-Secure backup systems
-Remote system administration`,
-  },
-  {
-    name: 'IoT & Networks',
-    description: `Secure IoT device networks
-Private DNS systems.`,
-  },
-  {
-    name: 'Media & Content',
-    description: `Private media streaming
-Protected content distribution
-Personal cloud storage
-Secure game servers.`,
-  },
-  {
-    name: 'Development & Services',
-    description: `Self-hosted web services
-Personal email servers
-Private git repositories`,
-  },
-  {
-    name: 'Security & Privacy Layers',
-    description: `Encrypted network for all devices
-End-to-end privacy across applications`,
+    name: 'Resilience',
+    description:
+      'Inspired by nature\'s resilience, it creates a network that can adapt and continue to function even in the presence of challenges, ensuring uninterrupted communication.',
   },
 ]
 
 export function Benefits() {
   return (
-    <div className="bg-white py-24 sm:py-32 dark:bg-gray-900">
+    <section id="benefits" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-5xl lg:mx-0">
           <h2 className="text-3xl font-medium tracking-tight text-gray-900">
-            Powering Secure & Decentralized Connectivity
+            Nature's Blueprint for Digital Connectivity
           </h2>
           <p className="mt-6 text-lg text-gray-600">
-            Mycelium, a key component of the ThreeFold Grid, can be installed on any computer (macOS, Linux, Windows) and smartphone (iOS, Android). With seamless integration, it enables secure and private communication across devices.
+            Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way.
           </p>
-            <p className="mt-6 text-lg text-gray-600">
-            The ThreeFold Dashboard offers dozens of applications with built-in Mycelium support, making it easy to deploy and utilize. Once installed, Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure.
-            </p>
         </div>
         <ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
           {features.map((feature) => (
@@ -57,16 +44,17 @@ export function Benefits() {
               key={feature.name}
               className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
             >
-              <h3 className="mt-6 font-semibold text-gray-900 dark:text-white">{feature.name}</h3>
-              <ul className="mt-2 text-gray-700 dark:text-gray-400 list-disc list-inside">
-                {feature.description.replace(/\.\s+/g, '\n').split('\n').filter((item: string) => item.trim()).map((item: string, index: number) => (
-                  <li key={index} className="text-sm">{item.trim()}</li>
-                ))}
-              </ul>
+              <img
+                src={`/images/${feature.name.toLowerCase()}.svg`}
+                alt={feature.name}
+                className="h-8 w-8 mb-4"
+              />
+              <h3 className="font-semibold text-gray-900 dark:text-white">{feature.name}</h3>
+              <p className="mt-2 text-gray-700 text-sm dark:text-gray-400">{feature.description}</p>
             </li>
           ))}
         </ul>
       </div>
-    </div>
+    </section>
   )
 }