replace all

src/components/Benefits.tsx

@@ -0,0 +1,72 @@
+const features = [
+  {
+    name: 'Communication & Collaboration',
+    description:
+      'Encrypted voice/video calls. Self-hosted messaging systems. Secure document collaboration. Private file sharing between trusted nodes. Secure remote work collaboration.',
+  },
+  {
+    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`,
+  },
+]
+
+export function Benefits() {
+  return (
+    <div 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
+          </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.
+          </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) => (
+            <li
+              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>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}