61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
'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: '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:
|
|
'Mycelium provides an efficient digital communication network where data travels along the most efficient paths, reducing latency and optimizing resource utilization.',
|
|
},
|
|
{
|
|
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 (
|
|
<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">
|
|
Nature's Blueprint for Digital Connectivity
|
|
</h2>
|
|
<p className="mt-6 text-lg text-gray-600">
|
|
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>
|
|
</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"
|
|
>
|
|
<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>
|
|
</section>
|
|
)
|
|
}
|