ok

.gitignore

@@ -0,0 +1,83 @@
+node_modules
+
+# Next.js build outputs and generated files
+.next/
+next-env.d.ts
+
+# Environment variables
+.env*
+
+# Logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+
+# Gatsby files
+.cache/
+public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Vercel
+.vercel
+
+# Local Netlify folder
+.netlify

README.md

@@ -1,6 +1,6 @@
-# Pocket
+# Mycelium
 
-Pocket is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+Mycelium is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
 
 ## Getting started
 

src/app/(main)/page.tsx

@@ -3,18 +3,21 @@ import { Faqs } from '@/components/Faqs'
 import { Hero } from '@/components/Hero'
 import { Pricing } from '@/components/Pricing'
 import { PrimaryFeatures } from '@/components/PrimaryFeatures'
-import { Reviews } from '@/components/Reviews'
+import { UseCases } from '@/components/UseCases'
 import { SecondaryFeatures } from '@/components/SecondaryFeatures'
+import { Benefits } from '@/components/Benefits'
+import { About } from '@/components/About'
 
 export default function Home() {
   return (
     <>
       <Hero />
+      <About />
+      <Benefits />
       <PrimaryFeatures />
-      <SecondaryFeatures />
+       <UseCases />
       <CallToAction />
-      <Reviews />
-      <Pricing />
+      <SecondaryFeatures />
       <Faqs />
     </>
   )

src/app/layout.tsx

@@ -12,11 +12,11 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: {
-    template: '%s - Pocket',
-    default: 'Pocket - Invest at the perfect time.',
+    template: '%s - Mycelium',
+    default: 'Mycelium - Unleash the Power of Decentralized Networks',
   },
   description:
-    'By leveraging insights from our network of industry insiders, you’ll know exactly when to buy to maximize profit, and exactly when to sell to avoid painful losses.',
+    'Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.',
 }
 
 export default function RootLayout({

src/components/About.tsx

@@ -0,0 +1,32 @@
+import { AppStoreLink } from '@/components/AppStoreLink'
+import { CircleBackground } from '@/components/CircleBackground'
+import { Container } from '@/components/Container'
+
+export function About() {
+  return (
+    <section
+      id="about"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+    >
+      <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
+        <CircleBackground color="#fff" className="animate-spin-slower" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl sm:text-center">
+          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
+            Discover Mycelium
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
+          </p>
+          <p className="mt-6 text-lg text-gray-300">
+            Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
+          </p>
+          <div className="mt-8 flex justify-center">
+            <AppStoreLink color="white" />
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/components/AndroidLink.tsx

@@ -0,0 +1,71 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+export function AndroidLink({
+  color = 'black',
+}: {
+  color?: 'black' | 'white'
+}) {
+  return (
+    <Link
+      href="#"
+      aria-label="Download for Android"
+      className={clsx(
+        'flex items-center rounded-lg transition-colors px-4 py-2',
+        color === 'black'
+          ? 'bg-gray-800 text-white hover:bg-gray-900'
+          : 'bg-white text-gray-900 hover:bg-gray-50',
+      )}
+    >
+      {/* Android SVG (converted for JSX) */}
+      <svg
+        viewBox="0 0 60 60"
+        aria-hidden="true"
+        className="h-5 w-5 mr-3"
+      >
+        <defs>
+          <clipPath id="android_clip_a">
+            <path d="M 1.566406 25 L 8 25 L 8 43 L 1.566406 43 Z M 1.566406 25 " clipRule="nonzero" />
+          </clipPath>
+          <clipPath id="android_clip_b">
+            <path d="M 10 25 L 34 25 L 34 53.640625 L 10 53.640625 Z M 10 25 " clipRule="nonzero" />
+          </clipPath>
+        </defs>
+        <g clipPath="url(#android_clip_a)">
+          <path
+            fill="currentColor"
+            d="M 4.445312 25.296875 C 2.855469 25.296875 1.5625 26.582031 1.5625 28.164062 L 1.5625 39.636719 C 1.5625 41.21875 2.855469 42.503906 4.445312 42.503906 C 6.035156 42.503906 7.324219 41.21875 7.324219 39.636719 L 7.324219 28.164062 C 7.324219 26.582031 6.035156 25.296875 4.445312 25.296875 Z M 4.445312 25.296875 "
+            fillOpacity="1"
+            fillRule="nonzero"
+          />
+        </g>
+        <path
+          fill="currentColor"
+          d="M 39.015625 25.296875 C 37.425781 25.296875 36.132812 26.582031 36.132812 28.164062 L 36.132812 39.636719 C 36.132812 41.21875 37.425781 42.503906 39.015625 42.503906 C 40.605469 42.503906 41.894531 41.21875 41.894531 39.636719 L 41.894531 28.164062 C 41.894531 26.582031 40.605469 25.296875 39.015625 25.296875 Z M 39.015625 25.296875 "
+          fillOpacity="1"
+          fillRule="nonzero"
+        />
+        <g clipPath="url(#android_clip_b)">
+          <path
+            fill="currentColor"
+            d="M 10.207031 42.667969 C 10.207031 44.253906 11.496094 45.535156 13.085938 45.535156 L 13.085938 51.105469 C 13.085938 52.6875 14.378906 53.972656 15.96875 53.972656 C 17.558594 53.972656 18.847656 52.6875 18.847656 51.105469 L 18.847656 45.535156 L 24.609375 45.535156 L 24.609375 51.105469 C 24.609375 52.6875 25.902344 53.972656 27.492188 53.972656 C 29.082031 53.972656 30.371094 52.6875 30.371094 51.105469 L 30.371094 45.535156 C 31.960938 45.535156 33.253906 44.253906 33.253906 42.667969 L 33.253906 25.464844 L 10.207031 25.464844 Z M 10.207031 42.667969 "
+            fillOpacity="1"
+            fillRule="nonzero"
+          />
+        </g>
+        <path
+          fill="currentColor"
+          d="M 28.921875 13.53125 L 31.484375 10.4375 C 31.992188 9.824219 31.90625 8.921875 31.292969 8.417969 C 30.675781 7.914062 29.769531 8 29.261719 8.609375 L 26.460938 11.992188 C 25.015625 11.339844 23.421875 10.957031 21.730469 10.957031 C 20.015625 10.957031 18.402344 11.355469 16.941406 12.023438 L 14.214844 8.628906 C 13.714844 8.011719 12.808594 7.910156 12.1875 8.40625 C 11.570312 8.902344 11.46875 9.804688 11.964844 10.421875 L 14.492188 13.570312 C 11.898438 15.671875 10.207031 18.839844 10.207031 22.429688 L 33.253906 22.429688 C 33.253906 18.816406 31.542969 15.632812 28.921875 13.53125 Z M 18.847656 18.128906 C 18.054688 18.128906 17.410156 17.484375 17.410156 16.695312 C 17.410156 15.902344 18.054688 15.261719 18.847656 15.261719 C 19.644531 15.261719 20.289062 15.902344 20.289062 16.695312 C 20.289062 17.484375 19.644531 18.128906 18.847656 18.128906 Z M 24.609375 18.128906 C 23.816406 18.128906 23.171875 17.484375 23.171875 16.695312 C 23.171875 15.902344 23.816406 15.261719 24.609375 15.261719 C 25.40625 15.261719 26.050781 15.902344 26.050781 16.695312 C 26.050781 17.484375 25.40625 18.128906 24.609375 18.128906 Z M 24.609375 18.128906 "
+          fillOpacity="1"
+          fillRule="nonzero"
+        />
+      </svg>
+
+      {/* Text */}
+      <div className="flex flex-col text-left leading-tight">
+        <span className="text-[9px] mt-0">Download for</span>
+        <span className="text-sm font-semibold -mt-1.5">Android</span>
+      </div>
+    </Link>
+  )
+}

src/components/AppStoreLink.tsx

@@ -8,7 +8,7 @@ export function AppStoreLink({
 }) {
   return (
     <Link
-      href="#"
+      href="https://apps.apple.com/us/app/mycelium-network/id6504277565"
       aria-label="Download on the App Store"
       className={clsx(
         'rounded-lg transition-colors',

src/components/Benefits.tsx

@@ -0,0 +1,60 @@
+'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>
+  )
+}

src/components/CallToAction.tsx

@@ -1,4 +1,7 @@
 import { AppStoreLink } from '@/components/AppStoreLink'
+import { WindowsLink } from '@/components/WindowsLink'
+import { AndroidLink } from './AndroidLink'
+import { LinuxLink } from '@/components/LinuxLink'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 
@@ -12,17 +15,18 @@ export function CallToAction() {
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
       <Container className="relative">
-        <div className="mx-auto max-w-md sm:text-center">
+        <div className="mx-auto max-w-2xl sm:text-center">
           <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
-            Get your first tips today
+            Get Started Today
           </h2>
-          <p className="mt-4 text-lg text-gray-300">
-            It takes 30 seconds to sign up. Download the app and create an
-            account today and we’ll send you a tip guaranteed to double your
-            first investment.
+          <p className="mt-6 text-lg text-gray-300">
+            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
           </p>
-          <div className="mt-8 flex justify-center">
+          <div className="mt-8 flex justify-center gap-4">
             <AppStoreLink color="white" />
+            <WindowsLink color="white" />
+            <AndroidLink color="white" />
+            <LinuxLink color="white" />
           </div>
         </div>
       </Container>

src/components/DownloadLink.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { ArrowDownTrayIcon } from '@heroicons/react/24/solid'
+
+export function DownloadLink() {
+  return (
+    <Link
+      href="#"
+      aria-label="Download Mycelium"
+      className="inline-flex items-center rounded-lg bg-gray-800 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-900 transition-colors"
+    >
+      <ArrowDownTrayIcon className="h-5 w-5 mr-2" />
+      Get Mycelium
+    </Link>
+  )
+}

src/components/Faqs.tsx

@@ -3,53 +3,48 @@ import { Container } from '@/components/Container'
 const faqs = [
   [
     {
-      question: 'How do I know the tips are good?',
+      question: 'What is Mycelium?',
       answer:
-        'Our whole business depends on our tips being good, so it’s in our best interest that they are. The results of our customers speak for themselves, just trust us.',
+        'Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications.',
     },
     {
-      question: 'Isn’t this insider trading?',
+      question: 'Is mycelium ready to scale to the world?',
       answer:
-        'Yes exactly. But at scale! Historically you could only make insider trades with knowledge from your direct network. Pocket brings you insider trading tips from people you don’t even know.',
+        'No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025.',
     },
     {
-      question: 'But isn’t insider trading illegal?',
+      question: 'How do I install Mycelium?',
       answer:
-        'Here’s the thing: you’re the one doing the insider trading, not us. We’re just giving you the tips and some tools to make trades. We’re not doing anything wrong here.',
+        'The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable.',
     },
   ],
   [
     {
-      question: 'Do the people giving you tips realize what they are doing?',
+      question: 'How can I find and use my Mycelium address?',
       answer:
-        'Again I would argue this isn’t really our responsibility. People make their own choices. If they don’t research the consequences that’s on them, not on us.',
+        'Upon using the Mycelium app, you\'re assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface.',
     },
     {
-      question: 'Where is Pocket based?',
+      question: 'Can I deploy workloads on the TFGrid using Mycelium?',
       answer:
-        'Let’s just say it’s not somewhere where the SEC is going to find us.',
+        'Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation.',
     },
     {
-      question: 'Is there any age limit to trading on Pocket?',
+      question: 'Is there an API available for Mycelium?',
       answer:
-        'For our free plan, the age limit is based on the minimum age to trade in your country of residence. Our VIP plan uses advanced transaction anonymization though, so you can use that plan even if you’re 9 years old. Or a dog.',
+        'Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository.',
     },
   ],
   [
     {
-      question: 'How did you get this on the App Store?',
+      question: 'What should I do if I encounter issues during installation or usage?',
       answer:
-        'Honestly we were surprised too, but eventually we found out that the app reviewer found the app so compelling they approved it just so they could use it themselves.',
+        'If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations.',
     },
     {
-      question: 'How do I explain the money I withdraw from Pocket to the IRS?',
+      question: 'How does Mycelium handle routing within its network?',
       answer:
-        'This feels like one-hundred percent a you problem. Pocket is not responsible in any way for your tax returns.',
-    },
-    {
-      question: 'How do I become an insider?',
-      answer:
-        'Contact us with some details about your industry and the type of access you have to apply for an insider account. Once approved, we’ll send you a guide on collecting insider information without being detected at work.',
+        'Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network.',
     },
   ],
 ]

src/components/Footer.tsx

@@ -29,8 +29,8 @@ export function Footer() {
             <div className="flex items-center text-gray-900">
               <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
               <div className="ml-4">
-                <p className="text-base font-semibold">Pocket</p>
-                <p className="mt-1 text-sm">Invest at the perfect time.</p>
+                <p className="text-base font-semibold">Mycelium</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
               </div>
             </div>
             <nav className="mt-11 flex gap-8">
@@ -71,7 +71,7 @@ export function Footer() {
             </Button>
           </form>
           <p className="mt-6 text-sm text-gray-500 md:mt-0">
-            &copy; Copyright {new Date().getFullYear()}. All rights reserved.
+            &copy; Copyright ThreeFold {new Date().getFullYear()}. All rights reserved.
           </p>
         </div>
       </Container>

src/components/Header.tsx

@@ -108,22 +108,25 @@ export function Header() {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
+                            <MobileNavLink href="/#about">
+                              About
+                            </MobileNavLink>
+                            <MobileNavLink href="/#benefits">
+                              Benefits
+                            </MobileNavLink>
                             <MobileNavLink href="/#features">
                               Features
                             </MobileNavLink>
-                            <MobileNavLink href="/#reviews">
-                              Reviews
-                            </MobileNavLink>
-                            <MobileNavLink href="/#pricing">
-                              Pricing
+                            <MobileNavLink href="/#usecases">
+                              Use Cases
                             </MobileNavLink>
                             <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
-                            <Button href="/login" variant="outline">
-                              Log in
+                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+                              Docs
                             </Button>
-                            <Button href="#">Download the app</Button>
+                            <Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
                           </div>
                         </PopoverPanel>
                       </>
@@ -133,10 +136,10 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="/login" variant="outline">
-                Log in
+              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+                Docs
               </Button>
-              <Button href="#">Download</Button>
+              <Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
             </div>
           </div>
         </Container>

src/components/Hero.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 import clsx from 'clsx'
 
 import { AppDemo } from '@/components/AppDemo'
-import { AppStoreLink } from '@/components/AppStoreLink'
+import { DownloadLink } from '@/components/DownloadLink'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { PhoneFrame } from '@/components/PhoneFrame'
@@ -105,21 +105,25 @@ export function Hero() {
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <h1 className="text-4xl font-medium tracking-tight text-gray-900">
-              Invest at the perfect time.
+              Mycelium
             </h1>
+            <h2 className="mt-6 text-2xl tracking-tight text-gray-600">
+              Unleashing the Power of Decentralized Networks
+            </h2>
             <p className="mt-6 text-lg text-gray-600">
-              By leveraging insights from our network of industry insiders,
-              you’ll know exactly when to buy to maximize profit, and exactly
-              when to sell to avoid painful losses.
+              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
+            </p>
+            <p className="mt-6 text-lg text-gray-600">
+              Coming Soon: New Decentralized Features
             </p>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <AppStoreLink />
+              <DownloadLink />
               <Button
-                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                href="https://youtu.be/4oq15lxvkts?si=Heh_8DHqHaNpy3_F"
                 variant="outline"
               >
                 <PlayIcon className="h-6 w-6 flex-none" />
-                <span className="ml-2.5">Watch the video</span>
+                <span className="ml-2.5">Watch the Demo</span>
               </Button>
             </div>
           </div>

src/components/LinuxLink.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+export function LinuxLink({
+  color = 'black',
+}: {
+  color?: 'black' | 'white'
+}) {
+  return (
+    <Link
+      href="#"
+      aria-label="Download for Linux"
+      className={clsx(
+        'flex items-center rounded-lg transition-colors px-4 py-2',
+        color === 'black'
+          ? 'bg-gray-800 text-white hover:bg-gray-900'
+          : 'bg-white text-gray-900 hover:bg-gray-50',
+      )}
+    >
+      {/* Linux SVG */}
+      <svg
+        viewBox="0 0 266 312"
+        aria-hidden="true"
+        className="h-5 w-5 mr-3"
+      >
+        <path d="M128.6640625 79.2793c0 1-1 1-1 1h-1c-1 0-1-1-2-2 0 0-1-1-1-2s0-1 1-1l2 1c1 1 2 2 2 3m-18-10c0-5-2-8-5-8 0 0 0 1-1 1v2h3c0 2 1 3 1 5h2m35-5c2 0 3 2 4 5h2c-1-1-1-2-1-3s0-2-1-3-2-2-3-2c0 0-1 1-2 1 0 1 1 1 1 2m-30 16c-1 0-1 0-1-1s0-2 1-3c2 0 3-1 3-1 1 0 1 1 1 1 0 1-1 2-3 4h-1m-11-1c-4-2-5-5-5-10 0-3 0-5 2-7 1-2 3-3 5-3s3 1 5 3c1 3 2 6 2 9v2h1v-1c1 0 1-2 1-6 0-3 0-6-2-9s-4-5-8-5c-3 0-6 2-7 5-2 4-2.4 7-2.4 12 0 4 1.4 8 5.4 12 1-1 2-1 3-2m125 141c1 0 1-.4 1-1.3 0-2.2-1-4.8-4-7.7-3-3-8-4.9-14-5.7-1-.1-2-.1-2-.1-1-.2-1-.2-2-.2-1-.1-3-.3-4-.5 3-9.3 4-17.5 4-24.7 0-10-2-17-6-23s-8-9-13-10c-1 1-1 1-1 2 5 2 10 6 13 12 3 7 4 13 4 20 0 5.6-1 13.9-5 24.5-4 1.6-8 5.3-11 11.1 0 .9 0 1.4 1 1.4 0 0 1-.9 2-2.6 2-1.7 3-3.4 5-5.1 3-1.7 5-2.6 8-2.6 5 0 10 .7 13 2.1 4 1.3 6 2.7 7 4.3 1 1.5 2 2.9 3 4.2 0 1.3 1 1.9 1 1.9m-92-145c-1-1-1-3-1-5 0-4 0-6 2-9 2-2 4-3 6-3 3 0 5 2 7 4 1 3 2 5 2 8 0 5-2 8-6 9 0 0 1 1 2 1 2 0 3 1 5 2 1-6 2-10 2-15 0-6-1-10-3-13-3-3-6-4-10-4-3 0-6 1-9 3-2 3-3 5-3 8 0 5 1 9 3 13 1 0 2 1 3 1m12 16c-13 9-23 13-31 13-7 0-14-3-20-8 1 2 2 4 3 5l6 6c4 4 9 6 14 6 7 0 15-4 25-11l9-6c2-2 4-4 4-7 0-1 0-2-1-2-1-2-6-5-16-8-9-4-16-6-20-6-3 0-8 2-15 6-6 4-10 8-10 12 0 0 1 1 2 3 6 5 12 8 18 8 8 0 18-4 31-14v2c1 0 1 1 1 1m23 202c4 7.52 11 11.3 19 11.3 2 0 4-.3 6-.9 2-.4 4-1.1 5-1.9 1-.7 2-1.4 3-2.2 2-.7 2-1.2 3-1.7l17-14.7c4-3.19 8-5.98 13-8.4 4-2.4 8-4 10-4.9 3-.8 5-2 7-3.6 1-1.5 2-3.4 2-5.8 0-2.9-2-5.1-4-6.7s-4-2.7-6-3.4-4-2.3-7-5c-2-2.6-4-6.2-5-10.9l-1-5.8c-1-2.7-1-4.7-2-5.8 0-.3 0-.4-1-.4s-3 .9-4 2.6c-2 1.7-4 3.6-6 5.6-1 2-4 3.8-6 5.5-3 1.7-6 2.6-8 2.6-8 0-12-2.2-15-6.5-2-3.2-3-6.9-4-11.1-2-1.7-3-2.6-5-2.6-5 0-7 5.2-7 15.7v31.1c0 .9-1 2.9-1 6-1 3.1-1 6.62-1 10.6l-2 11.1v.17m-145-5.29c9.3 1.36 20 4.27 32.1 8.71 12.1 4.4 19.5 6.7 22.2 6.7 7 0 12.8-3.1 17.6-9.09 1-1.94 1-4.22 1-6.84 0-9.45-5.7-21.4-17.1-35.9l-6.8-9.1c-1.4-1.9-3.1-4.8-5.3-8.7-2.1-3.9-4-6.9-5.5-9-1.3-2.3-3.4-4.6-6.1-6.9-2.6-2.3-5.6-3.8-8.9-4.6-4.2.8-7.1 2.2-8.5 4.1s-2.2 4-2.4 6.2c-.3 2.1-.9 3.5-1.9 4.2-1 .6-2.7 1.1-5 1.6-.5 0-1.4 0-2.7.1h-2.7c-5.3 0-8.9.6-10.8 1.6-2.5 2.9-3.8 6.2-3.8 9.7 0 1.6.4 4.3 1.2 8.1.8 3.7 1.2 6.7 1.2 8.8 0 4.1-1.2 8.2-3.7 12.3-2.5 4.3-3.8 7.5-3.8 9.78 1 3.88 7.6 6.61 19.7 8.21m33.3-90.9c0-6.9 1.8-14.5 5.5-23.5 3.6-9 7.2-15 10.7-19-.2-1-.7-1-1.5-1l-1-1c-2.9 3-6.4 10-10.6 20-4.2 9-6.4 17.3-6.4 23.4 0 4.5 1.1 8.4 3.1 11.8 2.2 3.3 7.5 8.1 15.9 14.2l10.6 6.9c11.3 9.8 17.3 16.6 17.3 20.6 0 2.1-1 4.2-4 6.5-2 2.4-4.7 3.6-7 3.6-.2 0-.3.2-.3.7 0 .1 1 2.1 3.1 6 4.2 5.7 13.2 8.5 25.2 8.5 22 0 39-9 52-27 0-5 0-8.1-1-9.4v-3.7c0-6.5 1-11.4 3-14.6s4-4.7 7-4.7c2 0 4 .7 6 2.2 1-7.7 1-14.4 1-20.4 0-9.1 0-16.6-2-23.6-1-6-3-11-5-15l-6-9c-2-3-3-6-5-9-1-4-2-7-2-12-3-5-5-10-8-15-2-5-4-10-6-14l-9 7c-10 7-18 10-25 10-6 0-11-1-14-5l-6-5c0 3-1 7-3 11l-6.3 12c-2.8 7-4.3 11-4.6 14-.4 2-.7 4-.9 4l-7.5 15c-8.1 15-12.2 28.9-12.2 40.4 0 2.3.2 4.7.6 7.1-4.5-3.1-6.7-7.4-6.7-13m71.6 94.6c-13 0-23 1.76-30 5.25v-.3c-5 6-10.6 9.1-18.4 9.1-4.9 0-12.6-1.9-23-5.7-10.5-3.6-19.8-6.36-27.9-8.18-.8-.23-2.6-.57-5.5-1.03-2.8-.45-5.4-.91-7.7-1.37-2.1-.45-4.5-1.13-7.1-2.05-2.5-.79-4.5-1.82-6-3.07-1.38-1.26-2.06-2.68-2.06-4.27 0-1.6.34-3.31 1.02-5.13.64-1.1 1.34-2.2 2.04-3.2.7-1.1 1.3-2.1 1.7-3.1.6-.9 1-1.8 1.4-2.8.4-.9.8-1.8 1-2.9.2-1 .4-2 .4-3s-.4-4-1.2-9.3c-.8-5.2-1.2-8.5-1.2-9.9 0-4.4 1-7.9 3.2-10.4s4.3-3.8 6.5-3.8h11.5c.9 0 2.3-.5 4.4-1.7.7-1.6 1.3-2.9 1.7-4.1.5-1.2.7-2.1.9-2.5.2-.6.4-1.2.6-1.7.4-.7.9-1.5 1.6-2.3-.8-1-1.2-2.3-1.2-3.9 0-1.1 0-2.1.2-2.7 0-3.6 1.7-8.7 5.3-15.4l3.5-6.3c2.9-5.4 5.1-9.4 6.7-13.4 1.7-4 3.5-10 5.5-18 1.6-7 5.4-14 11.4-21l7.5-9c5.2-6 8.6-11 10.5-15s2.9-9 2.9-13c0-2-.5-8-1.6-18-1-10-1.5-20-1.5-29 0-7 .6-12 1.9-17s3.6-10 7-14c3-4 7-8 13-10s13-3 21-3c3 0 6 0 9 1 3 0 7 1 12 3 4 2 8 4 11 7 4 3 7 8 10 13 2 6 4 12 5 20 1 5 1 10 2 17 0 6 1 10 1 13 1 3 1 7 2 12 1 4 2 8 4 11 2 4 4 8 7 12 3 5 7 10 11 16 9 10 16 21 20 32 5 10 8 23 8 36.9 0 6.9-1 13.6-3 20.1 2 0 3 .8 4 2.2s2 4.4 3 9.1l1 7.4c1 2.2 2 4.3 5 6.1 2 1.8 4 3.3 7 4.5 2 1 5 2.4 7 4.2 2 2 3 4.1 3 6.3 0 3.4-1 5.9-3 7.7-2 2-4 3.4-7 4.3-2 1-6 3-12 5.82-5 2.96-10 6.55-15 10.8l-10 8.51c-4 3.9-8 6.7-11 8.4-3 1.8-7 2.7-11 2.7l-7-.8c-8-2.1-13-6.1-16-12.2-16-1.94-29-2.9-37-2.9" fill="currentColor" />
+      </svg>
+
+      {/* Text */}
+      <div className="flex flex-col text-left leading-tight">
+        <span className="text-[9px] mt-0">Download for</span>
+        <span className="text-sm font-semibold -mt-1.5">Linux</span>
+      </div>
+    </Link>
+  )
+}

src/components/NavLinks.tsx

@@ -9,9 +9,10 @@ export function NavLinks() {
   let timeoutRef = useRef<number | null>(null)
 
   return [
+    ['About', '/#about'],
+    ['Benefits', '/#benefits'],
     ['Features', '/#features'],
-    ['Reviews', '/#reviews'],
-    ['Pricing', '/#pricing'],
+    ['Use Cases', '/#usecases'],
     ['FAQs', '/#faqs'],
   ].map(([label, href], index) => (
     <Link

src/components/PrimaryFeatures.tsx

@@ -37,23 +37,23 @@ interface CustomAnimationProps {
 
 const features = [
   {
-    name: 'Invite friends for better returns',
+    name: 'Decentralized Nodes',
     description:
-      'For every friend you invite to Pocket, you get insider notifications 5 seconds sooner. And it’s 10 seconds if you invite an insider.',
+      "Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.",
     icon: DeviceUserIcon,
     screen: InviteScreen,
   },
   {
-    name: 'Notifications on stock dips',
+    name: 'Efficient Data Routing',
     description:
-      'Get a push notification every time we find out something that’s going to lower the share price on your holdings so you can sell before the information hits the public markets.',
+      'Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.',
     icon: DeviceNotificationIcon,
     screen: StocksScreen,
   },
   {
-    name: 'Invest what you want',
+    name: 'End-to-End Encryption',
     description:
-      'We hide your stock purchases behind thousands of anonymous trading accounts, so suspicious activity can never be traced back to you.',
+      'Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network.',
     icon: DeviceTouchIcon,
     screen: InvestScreen,
   },
@@ -577,13 +577,10 @@ export function PrimaryFeatures() {
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
           <h2 className="text-3xl font-medium tracking-tight text-white">
-            Every feature you need to win. Try it for yourself.
+            How Mycelium Operates
           </h2>
-          <p className="mt-2 text-lg text-gray-400">
-            Pocket was built for investors like you who play by their own rules
-            and aren’t going to let SEC regulations get in the way of their
-            dreams. If other investing tools are afraid to build it, Pocket has
-            it.
+          <p className="mt-6 text-lg text-gray-300">
+            Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
           </p>
         </div>
       </Container>

src/components/Reviews.tsx

@@ -1,294 +0,0 @@
-'use client'
-
-import { useEffect, useMemo, useRef, useState } from 'react'
-import clsx from 'clsx'
-import { useInView } from 'framer-motion'
-
-import { Container } from '@/components/Container'
-
-interface Review {
-  title: string
-  body: string
-  author: string
-  rating: 1 | 2 | 3 | 4 | 5
-}
-
-const reviews: Array<Review> = [
-  {
-    title: 'It really works.',
-    body: 'I downloaded Pocket today and turned $5000 into $25,000 in half an hour.',
-    author: 'CrazyInvestor',
-    rating: 5,
-  },
-  {
-    title: 'You need this app.',
-    body: 'I didn’t understand the stock market at all before Pocket. I still don’t, but at least I’m rich now.',
-    author: 'CluelessButRich',
-    rating: 5,
-  },
-  {
-    title: 'This shouldn’t be legal.',
-    body: 'Pocket makes it so easy to win big in the stock market that I can’t believe it’s actually legal.',
-    author: 'LivingDaDream',
-    rating: 5,
-  },
-  {
-    title: 'Screw financial advisors.',
-    body: 'I barely made any money investing in mutual funds. With Pocket, I’m doubling my net-worth every single month.',
-    author: 'JordanBelfort1962',
-    rating: 5,
-  },
-  {
-    title: 'I love it!',
-    body: 'I started providing insider information myself and now I get new insider tips every 5 minutes. I don’t even have time to act on all of them. New Lamborghini is being delivered next week!',
-    author: 'MrBurns',
-    rating: 5,
-  },
-  {
-    title: 'Too good to be true.',
-    body: 'I was making money so fast with Pocket that it felt like a scam. But I sold my shares and withdrew the money and it’s really there, right in my bank account. This app is crazy!',
-    author: 'LazyRich99',
-    rating: 5,
-  },
-  {
-    title: 'Wish I could give 6 stars',
-    body: 'This is literally the most important app you will ever download in your life. Get on this before it’s so popular that everyone else is getting these tips too.',
-    author: 'SarahLuvzCash',
-    rating: 5,
-  },
-  {
-    title: 'Bought an island.',
-    body: 'Yeah, you read that right. Want your own island too? Get Pocket.',
-    author: 'ScroogeMcduck',
-    rating: 5,
-  },
-  {
-    title: 'No more debt!',
-    body: 'After 2 weeks of trading on Pocket I was debt-free. Why did I even go to school at all when Pocket exists?',
-    author: 'BruceWayne',
-    rating: 5,
-  },
-  {
-    title: 'I’m 13 and I’m rich.',
-    body: 'I love that with Pocket’s transaction anonymization I could sign up and start trading when I was 12 years old. I had a million dollars before I had armpit hair!',
-    author: 'RichieRich',
-    rating: 5,
-  },
-  {
-    title: 'Started an investment firm.',
-    body: 'I charge clients a 3% management fee and just throw all their investments into Pocket. Easy money!',
-    author: 'TheCountOfMonteChristo',
-    rating: 5,
-  },
-  {
-    title: 'It’s like a superpower.',
-    body: 'Every tip Pocket has sent me has paid off. It’s like playing Blackjack but knowing exactly what card is coming next!',
-    author: 'ClarkKent',
-    rating: 5,
-  },
-  {
-    title: 'Quit my job.',
-    body: 'I downloaded Pocket three days ago and quit my job today. I can’t believe no one else thought to build a stock trading app that works this way!',
-    author: 'GeorgeCostanza',
-    rating: 5,
-  },
-  {
-    title: 'Don’t download this app',
-    body: 'Unless you want to have the best life ever! I am literally writing this from a yacht.',
-    author: 'JeffBezos',
-    rating: 5,
-  },
-]
-
-function StarIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-    </svg>
-  )
-}
-
-function StarRating({ rating }: { rating: Review['rating'] }) {
-  return (
-    <div className="flex">
-      {[...Array(5).keys()].map((index) => (
-        <StarIcon
-          key={index}
-          className={clsx(
-            'h-5 w-5',
-            rating > index ? 'fill-cyan-500' : 'fill-gray-300',
-          )}
-        />
-      ))}
-    </div>
-  )
-}
-
-function Review({
-  title,
-  body,
-  author,
-  rating,
-  className,
-  ...props
-}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
-  let animationDelay = useMemo(() => {
-    let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
-    return possibleAnimationDelays[
-      Math.floor(Math.random() * possibleAnimationDelays.length)
-    ]
-  }, [])
-
-  return (
-    <figure
-      className={clsx(
-        'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
-        className,
-      )}
-      style={{ animationDelay }}
-      {...props}
-    >
-      <blockquote className="text-gray-900">
-        <StarRating rating={rating} />
-        <p className="mt-4 text-lg/6 font-semibold before:content-['“'] after:content-['”']">
-          {title}
-        </p>
-        <p className="mt-3 text-base/7">{body}</p>
-      </blockquote>
-      <figcaption className="mt-3 text-sm text-gray-600 before:content-['–_']">
-        {author}
-      </figcaption>
-    </figure>
-  )
-}
-
-function splitArray<T>(array: Array<T>, numParts: number) {
-  let result: Array<Array<T>> = []
-  for (let i = 0; i < array.length; i++) {
-    let index = i % numParts
-    if (!result[index]) {
-      result[index] = []
-    }
-    result[index].push(array[i])
-  }
-  return result
-}
-
-function ReviewColumn({
-  reviews,
-  className,
-  reviewClassName,
-  msPerPixel = 0,
-}: {
-  reviews: Array<Review>
-  className?: string
-  reviewClassName?: (reviewIndex: number) => string
-  msPerPixel?: number
-}) {
-  let columnRef = useRef<React.ElementRef<'div'>>(null)
-  let [columnHeight, setColumnHeight] = useState(0)
-  let duration = `${columnHeight * msPerPixel}ms`
-
-  useEffect(() => {
-    if (!columnRef.current) {
-      return
-    }
-
-    let resizeObserver = new window.ResizeObserver(() => {
-      setColumnHeight(columnRef.current?.offsetHeight ?? 0)
-    })
-
-    resizeObserver.observe(columnRef.current)
-
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [])
-
-  return (
-    <div
-      ref={columnRef}
-      className={clsx('animate-marquee space-y-8 py-4', className)}
-      style={{ '--marquee-duration': duration } as React.CSSProperties}
-    >
-      {reviews.concat(reviews).map((review, reviewIndex) => (
-        <Review
-          key={reviewIndex}
-          aria-hidden={reviewIndex >= reviews.length}
-          className={reviewClassName?.(reviewIndex % reviews.length)}
-          {...review}
-        />
-      ))}
-    </div>
-  )
-}
-
-function ReviewGrid() {
-  let containerRef = useRef<React.ElementRef<'div'>>(null)
-  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
-  let columns = splitArray(reviews, 3)
-  let column1 = columns[0]
-  let column2 = columns[1]
-  let column3 = splitArray(columns[2], 2)
-
-  return (
-    <div
-      ref={containerRef}
-      className="relative -mx-4 mt-16 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
-    >
-      {isInView && (
-        <>
-          <ReviewColumn
-            reviews={[...column1, ...column3.flat(), ...column2]}
-            reviewClassName={(reviewIndex) =>
-              clsx(
-                reviewIndex >= column1.length + column3[0].length &&
-                  'md:hidden',
-                reviewIndex >= column1.length && 'lg:hidden',
-              )
-            }
-            msPerPixel={10}
-          />
-          <ReviewColumn
-            reviews={[...column2, ...column3[1]]}
-            className="hidden md:block"
-            reviewClassName={(reviewIndex) =>
-              reviewIndex >= column2.length ? 'lg:hidden' : ''
-            }
-            msPerPixel={15}
-          />
-          <ReviewColumn
-            reviews={column3.flat()}
-            className="hidden lg:block"
-            msPerPixel={10}
-          />
-        </>
-      )}
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-gray-50" />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-gray-50" />
-    </div>
-  )
-}
-
-export function Reviews() {
-  return (
-    <section
-      id="reviews"
-      aria-labelledby="reviews-title"
-      className="pt-20 pb-16 sm:pt-32 sm:pb-24"
-    >
-      <Container>
-        <h2
-          id="reviews-title"
-          className="text-3xl font-medium tracking-tight text-gray-900 sm:text-center"
-        >
-          Everyone is changing their life with Pocket.
-        </h2>
-        <p className="mt-2 text-lg text-gray-600 sm:text-center">
-          Thousands of people have doubled their net-worth in the last 30 days.
-        </p>
-        <ReviewGrid />
-      </Container>
-    </section>
-  )
-}

src/components/SecondaryFeatures.tsx

@@ -4,39 +4,39 @@ import { Container } from '@/components/Container'
 
 const features = [
   {
-    name: 'Invest any amount',
+    name: 'Quantum Safe Storage Functionality',
     description:
-      'Whether it’s $1 or $1,000,000, we can put your money to work for you.',
+      "Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.",
     icon: DeviceArrowIcon,
   },
   {
-    name: 'Build a balanced portfolio',
+    name: 'Entry and Exit Points for AI Workloads',
     description:
-      'Invest in different industries to find the most opportunities to win huge.',
+      'Seamlessly connect AI applications to Mycelium, providing optimized and secured data pipelines for training, inference, and real-time processing.',
     icon: DeviceCardsIcon,
   },
   {
-    name: 'Trade in real-time',
+    name: 'Data Storage and Retrieval Mechanisms',
     description:
-      'Get insider tips on big stock moves and act on them within seconds.',
+      'Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.',
     icon: DeviceClockIcon,
   },
   {
-    name: 'Profit from your network',
+    name: 'Integrated Name Services (DNS)',
     description:
-      'Invite new insiders to get tips faster and beat even other Pocket users.',
+      'The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.',
     icon: DeviceListIcon,
   },
   {
-    name: 'Encrypted and anonymized',
+    name: 'Frontend/Backend Integration',
     description:
-      'Cutting-edge security technology that even the NSA doesn’t know about keeps you hidden.',
+      'Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.',
     icon: DeviceLockIcon,
   },
   {
-    name: 'Portfolio tracking',
+    name: 'CDN (Content Delivery Network)',
     description:
-      'Watch your investments grow exponentially, leaving other investors in the dust.',
+      'Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.',
     icon: DeviceChartIcon,
   },
 ]
@@ -194,13 +194,12 @@ export function SecondaryFeatures() {
       className="py-20 sm:py-32"
     >
       <Container>
-        <div className="mx-auto max-w-2xl sm:text-center">
+        <div className="mx-auto max-w-4xl sm:text-center">
           <h2 className="text-3xl font-medium tracking-tight text-gray-900">
-            Now is the time to build your portfolio.
+            Coming Soon: The Future of Mycelium
           </h2>
-          <p className="mt-2 text-lg text-gray-600">
-            With typical market returns, you have to start young to secure your
-            future. With Pocket, it’s never too late to build your nest egg.
+          <p className="mt-6 text-lg text-gray-600">
+            Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
           </p>
         </div>
         <ul

src/components/UseCases.tsx

@@ -0,0 +1,374 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { useInView } from 'framer-motion'
+import {
+  ArchiveBoxIcon,
+  ChatBubbleBottomCenterIcon,
+  CloudIcon,
+  CodeBracketIcon,
+  ComputerDesktopIcon,
+  CpuChipIcon,
+  DocumentIcon,
+  EnvelopeIcon,
+  GlobeAltIcon,
+  GlobeAmericasIcon,
+  PlayCircleIcon,
+  ShareIcon,
+  EyeSlashIcon,
+  UserGroupIcon,
+  VideoCameraIcon,
+} from '@heroicons/react/24/solid'
+
+import { Container } from '@/components/Container'
+
+interface Review {
+  title: string
+  body: string
+  author: string
+  rating: 1 | 2 | 3 | 4 | 5
+}
+
+const reviews: Array<Review> = [
+  {
+    title: 'Secure remote work collaboration.',
+    body: 'Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure.',
+    author: 'CrazyInvestor',
+    rating: 5,
+  },
+  {
+    title: 'Private file sharing between trusted nodes.',
+    body: 'Mycelium enables private file sharing between trusted nodes, ensuring that sensitive information remains confidential and secure.',
+    author: 'CluelessButRich',
+    rating: 5,
+  },
+  {
+    title: 'Encrypted voice/video calls.',
+    body: 'Mycelium enables secure voice and video calls between users, ensuring that conversations remain private and protected from eavesdropping.',
+    author: 'LivingDaDream',
+    rating: 5,
+  },
+  {
+    title: 'Self-hosted messaging systems.',
+    body: 'Mycelium allows users to create their own self-hosted messaging systems, ensuring complete control over their communications.',
+    author: 'JordanBelfort1962',
+    rating: 5,
+  },
+  {
+    title: 'Secure document collaboration.',
+    body: 'Mycelium enables secure document collaboration between users, ensuring that sensitive information remains confidential and protected.',
+    author: 'MrBurns',
+    rating: 5,
+  },
+  {
+    title: 'Private cloud computing resources.',
+    body: 'Mycelium provides private cloud computing resources, allowing users to run their applications in a secure and isolated environment.',
+    author: 'LazyRich99',
+    rating: 5,
+  },
+  {
+    title: 'Secure IoT device networks.',
+    body: 'Mycelium provides secure IoT device networks, ensuring that all connected devices can communicate privately and securely.',
+    author: 'SarahLuvzCash',
+    rating: 5,
+  },
+  {
+    title: 'Remote system administration.',
+    body: 'Mycelium enables secure remote system administration, allowing users to manage their systems from anywhere without compromising security.',
+    author: 'ScroogeMcduck',
+    rating: 5,
+  },
+  {
+    title: 'Virtual private networks (VPNs).',
+    body: 'Mycelium enables the creation of virtual private networks (VPNs), allowing users to securely connect to remote networks and access resources without compromising their privacy.',
+    author: 'BruceWayne',
+    rating: 5,
+  },
+  {
+    title: 'Secure backup systems.',
+    body: 'Mycelium provides secure backup systems, ensuring that users can easily and safely back up their important data without the risk of unauthorized access.',
+    author: 'RichieRich',
+    rating: 5,
+  },
+  {
+    title: 'Self-hosted web services.',
+    body: 'Mycelium allows users to create their own self-hosted web services, ensuring complete control over their data and applications.',
+    author: 'TheCountOfMonteChristo',
+    rating: 5,
+  },
+  {
+    title: 'Private file sharing between trusted nodes.',
+    body: 'Mycelium enables private file sharing between trusted nodes, ensuring that sensitive information remains confidential and secure.',
+    author: 'ClarkKent',
+    rating: 5,
+  },
+  {
+    title: 'Private DNS systems.',
+    body: 'Mycelium enables the creation of private DNS systems, allowing users to maintain control over their domain name resolution and protect their privacy.',
+    author: 'GeorgeCostanza',
+    rating: 5,
+  },
+  {
+    title: 'Personal email servers.',
+    body: 'Mycelium allows users to create their own personal email servers, ensuring complete control over their communications and data.',
+    author: 'JeffBezos',
+    rating: 5,
+  },
+  {
+    title: 'Secure document collaboration.',
+    body: 'Mycelium enables secure document collaboration between users, ensuring that sensitive information remains confidential and protected.',
+    author: 'JeffBezos',
+    rating: 5,
+  },
+    {
+    title: 'Private media streaming.',
+    body: 'Mycelium enables private media streaming between users, ensuring that sensitive content remains confidential and protected.',
+    author: 'JeffBezos',
+    rating: 5,
+  },
+    {
+    title: 'Personal cloud storage.',
+    body: 'Mycelium allows users to create their own personal cloud storage solutions, ensuring complete control over their data and privacy.',
+    author: 'JeffBezos',
+    rating: 5,
+  },
+    {
+    title: 'Personal email servers.',
+    body: 'Mycelium allows users to create their own personal email servers, ensuring complete control over their communications and data.',
+    author: 'JeffBezos',
+    rating: 5,
+  },
+    {
+    title: 'Protected content distribution.',
+    body: 'Mycelium enables protected content distribution, allowing users to securely share and distribute sensitive information without compromising its confidentiality.',
+    author: 'JeffBezos',
+    rating: 5,
+  },
+    {
+    title: 'Secure game servers.',
+    body: 'Mycelium enables the creation of secure game servers, allowing users to host and manage their own gaming environments with complete control over their data and privacy.',
+    author: 'JeffBezos',
+    rating: 5,
+  },    {
+    title: 'Private git repositories.',
+    body: 'Mycelium enables the creation of private git repositories, allowing users to host and manage their own version control systems with complete control over their data and privacy.',
+    author: 'JeffBezos',
+    rating: 5,
+  },
+]
+
+function StarIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+    </svg>
+  )
+}
+
+function StarRating({ rating }: { rating: Review['rating'] }) {
+  return (
+    <div className="flex">
+      {[...Array(5).keys()].map((index) => (
+        <StarIcon
+          key={index}
+          className={clsx(
+            'h-5 w-5',
+            rating > index ? 'fill-cyan-500' : 'fill-gray-300',
+          )}
+        />
+      ))}
+    </div>
+  )
+}
+
+function getReviewIcon(title: string) {
+  if (title.toLowerCase().includes('collaboration')) return UserGroupIcon;
+  if (title.toLowerCase().includes('file sharing')) return ShareIcon;
+  if (title.toLowerCase().includes('voice') || title.toLowerCase().includes('video')) return VideoCameraIcon;
+  if (title.toLowerCase().includes('messaging')) return ChatBubbleBottomCenterIcon;
+  if (title.toLowerCase().includes('document')) return DocumentIcon;
+  if (title.toLowerCase().includes('cloud')) return CloudIcon;
+  if (title.toLowerCase().includes('iot')) return CpuChipIcon;
+  if (title.toLowerCase().includes('administration')) return ComputerDesktopIcon;
+  if (title.toLowerCase().includes('vpn')) return GlobeAmericasIcon;
+  if (title.toLowerCase().includes('backup')) return ArchiveBoxIcon;
+  if (title.toLowerCase().includes('web services')) return GlobeAltIcon;
+  if (title.toLowerCase().includes('dns')) return GlobeAmericasIcon;
+  if (title.toLowerCase().includes('email')) return EnvelopeIcon;
+  if (title.toLowerCase().includes('media streaming') || title.toLowerCase().includes('streaming')) return PlayCircleIcon;
+  if (title.toLowerCase().includes('storage')) return CloudIcon;
+  if (title.toLowerCase().includes('distribution')) return EyeSlashIcon;
+  if (title.toLowerCase().includes('game')) return ComputerDesktopIcon;
+  if (title.toLowerCase().includes('git')) return CodeBracketIcon;
+  return ComputerDesktopIcon; // default
+}
+
+function Review({
+  title,
+  body,
+  author,
+  rating,
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
+  let animationDelay = useMemo(() => {
+    let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
+    return possibleAnimationDelays[
+      Math.floor(Math.random() * possibleAnimationDelays.length)
+    ]
+  }, [])
+
+  return (
+    <figure
+      className={clsx(
+        'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
+        className,
+      )}
+      style={{ animationDelay }}
+      {...props}
+    >
+      <blockquote className="text-gray-900">
+        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-gray-700 mb-2" })}
+        <p className="mt-4 text-lg/6 font-semibold">
+          {title}
+        </p>
+        <p className="mt-3 text-sm text-gray-600">{body}</p>
+      </blockquote>
+
+    </figure>
+  )
+}
+
+function splitArray<T>(array: Array<T>, numParts: number) {
+  let result: Array<Array<T>> = []
+  for (let i = 0; i < array.length; i++) {
+    let index = i % numParts
+    if (!result[index]) {
+      result[index] = []
+    }
+    result[index].push(array[i])
+  }
+  return result
+}
+
+function ReviewColumn({
+  reviews,
+  className,
+  reviewClassName,
+  msPerPixel = 0,
+}: {
+  reviews: Array<Review>
+  className?: string
+  reviewClassName?: (reviewIndex: number) => string
+  msPerPixel?: number
+}) {
+  let columnRef = useRef<React.ElementRef<'div'>>(null)
+  let [columnHeight, setColumnHeight] = useState(0)
+  let duration = `${columnHeight * msPerPixel}ms`
+
+  useEffect(() => {
+    if (!columnRef.current) {
+      return
+    }
+
+    let resizeObserver = new window.ResizeObserver(() => {
+      setColumnHeight(columnRef.current?.offsetHeight ?? 0)
+    })
+
+    resizeObserver.observe(columnRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return (
+    <div
+      ref={columnRef}
+      className={clsx('animate-marquee space-y-8 py-4', className)}
+      style={{ '--marquee-duration': duration } as React.CSSProperties}
+    >
+      {reviews.concat(reviews).map((review, reviewIndex) => (
+        <Review
+          key={reviewIndex}
+          aria-hidden={reviewIndex >= reviews.length}
+          className={reviewClassName?.(reviewIndex % reviews.length)}
+          {...review}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ReviewGrid() {
+  let containerRef = useRef<React.ElementRef<'div'>>(null)
+  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
+  let columns = splitArray(reviews, 3)
+  let column1 = columns[0]
+  let column2 = columns[1]
+  let column3 = splitArray(columns[2], 2)
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative -mx-4 mt-16 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
+    >
+      {isInView && (
+        <>
+          <ReviewColumn
+            reviews={[...column1, ...column3.flat(), ...column2]}
+            reviewClassName={(reviewIndex) =>
+              clsx(
+                reviewIndex >= column1.length + column3[0].length &&
+                  'md:hidden',
+                reviewIndex >= column1.length && 'lg:hidden',
+              )
+            }
+            msPerPixel={10}
+          />
+          <ReviewColumn
+            reviews={[...column2, ...column3[1]]}
+            className="hidden md:block"
+            reviewClassName={(reviewIndex) =>
+              reviewIndex >= column2.length ? 'lg:hidden' : ''
+            }
+            msPerPixel={15}
+          />
+          <ReviewColumn
+            reviews={column3.flat()}
+            className="hidden lg:block"
+            msPerPixel={10}
+          />
+        </>
+      )}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-gray-50" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-gray-50" />
+    </div>
+  )
+}
+
+export function UseCases() {
+  return (
+    <section
+      id="usecases"
+      aria-labelledby="usecases-title"
+      className="pt-20 pb-16 sm:pt-32 sm:pb-24"
+    >
+      <Container className=''>
+        <div className="mx-auto max-w-2xl  lg:max-w-5xl">
+          <h2
+            id="usecases-title"
+            className="text-3xl font-medium tracking-tight text-gray-900 sm:text-center"
+          >
+            Powering Secure & Decentralized Connectivity
+          </h2>
+          <p className="mt-6 text-lg text-gray-600 sm:text-center">
+            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>
+        <ReviewGrid />
+      </Container>
+    </section>
+  )
+}

src/components/WindowsLink.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+export function WindowsLink({
+  color = 'black',
+}: {
+  color?: 'black' | 'white'
+}) {
+  return (
+    <Link
+      href="#"
+      aria-label="Download for Windows"
+      className={clsx(
+        'flex items-center rounded-lg transition-colors px-4 py-2',
+        color === 'black'
+          ? 'bg-gray-800 text-white hover:bg-gray-900'
+          : 'bg-white text-gray-900 hover:bg-gray-50',
+      )}
+    >
+      {/* Windows logo */}
+      <svg
+        viewBox="0 0 88 88"
+        aria-hidden="true"
+        className="h-5 w-5 mr-3"
+      >
+        <path
+          fill="currentColor"
+          d="M0 12.2L35.6 7v34.2H0V12.2Zm0 63.6L35.6 76V44.8H0v31ZM41.2 6l46.8-6v41.2H41.2V6Zm0 76l46.8 6V46.8H41.2V82Z"
+        />
+      </svg>
+
+      {/* Text */}
+      <div className="flex flex-col text-left leading-tight">
+        <span className="text-[9px] mt-0">Download for</span>
+        <span className="text-sm font-semibold -mt-1.5">Windows</span>
+      </div>
+    </Link>
+  )
+}

src/images/android.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" zoomAndPan="magnify" viewBox="0 0 60 60" height="80" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="3ce6073860"><path d="M 1.566406 25 L 8 25 L 8 43 L 1.566406 43 Z M 1.566406 25 " clip-rule="nonzero"/></clipPath><clipPath id="225ba38cc1"><path d="M 10 25 L 34 25 L 34 53.640625 L 10 53.640625 Z M 10 25 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#3ce6073860)"><path fill="#000000" d="M 4.445312 25.296875 C 2.855469 25.296875 1.5625 26.582031 1.5625 28.164062 L 1.5625 39.636719 C 1.5625 41.21875 2.855469 42.503906 4.445312 42.503906 C 6.035156 42.503906 7.324219 41.21875 7.324219 39.636719 L 7.324219 28.164062 C 7.324219 26.582031 6.035156 25.296875 4.445312 25.296875 Z M 4.445312 25.296875 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#000000" d="M 39.015625 25.296875 C 37.425781 25.296875 36.132812 26.582031 36.132812 28.164062 L 36.132812 39.636719 C 36.132812 41.21875 37.425781 42.503906 39.015625 42.503906 C 40.605469 42.503906 41.894531 41.21875 41.894531 39.636719 L 41.894531 28.164062 C 41.894531 26.582031 40.605469 25.296875 39.015625 25.296875 Z M 39.015625 25.296875 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#225ba38cc1)"><path fill="#000000" d="M 10.207031 42.667969 C 10.207031 44.253906 11.496094 45.535156 13.085938 45.535156 L 13.085938 51.105469 C 13.085938 52.6875 14.378906 53.972656 15.96875 53.972656 C 17.558594 53.972656 18.847656 52.6875 18.847656 51.105469 L 18.847656 45.535156 L 24.609375 45.535156 L 24.609375 51.105469 C 24.609375 52.6875 25.902344 53.972656 27.492188 53.972656 C 29.082031 53.972656 30.371094 52.6875 30.371094 51.105469 L 30.371094 45.535156 C 31.960938 45.535156 33.253906 44.253906 33.253906 42.667969 L 33.253906 25.464844 L 10.207031 25.464844 Z M 10.207031 42.667969 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#000000" d="M 28.921875 13.53125 L 31.484375 10.4375 C 31.992188 9.824219 31.90625 8.921875 31.292969 8.417969 C 30.675781 7.914062 29.769531 8 29.261719 8.609375 L 26.460938 11.992188 C 25.015625 11.339844 23.421875 10.957031 21.730469 10.957031 C 20.015625 10.957031 18.402344 11.355469 16.941406 12.023438 L 14.214844 8.628906 C 13.714844 8.011719 12.808594 7.910156 12.1875 8.40625 C 11.570312 8.902344 11.46875 9.804688 11.964844 10.421875 L 14.492188 13.570312 C 11.898438 15.671875 10.207031 18.839844 10.207031 22.429688 L 33.253906 22.429688 C 33.253906 18.816406 31.542969 15.632812 28.921875 13.53125 Z M 18.847656 18.128906 C 18.054688 18.128906 17.410156 17.484375 17.410156 16.695312 C 17.410156 15.902344 18.054688 15.261719 18.847656 15.261719 C 19.644531 15.261719 20.289062 15.902344 20.289062 16.695312 C 20.289062 17.484375 19.644531 18.128906 18.847656 18.128906 Z M 24.609375 18.128906 C 23.816406 18.128906 23.171875 17.484375 23.171875 16.695312 C 23.171875 15.902344 23.816406 15.261719 24.609375 15.261719 C 25.40625 15.261719 26.050781 15.902344 26.050781 16.695312 C 26.050781 17.484375 25.40625 18.128906 24.609375 18.128906 Z M 24.609375 18.128906 " fill-opacity="1" fill-rule="nonzero"/></svg>

src/images/linux.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 266 312">
+  <path d="M128.6640625 79.2793c0 1-1 1-1 1h-1c-1 0-1-1-2-2 0 0-1-1-1-2s0-1 1-1l2 1c1 1 2 2 2 3m-18-10c0-5-2-8-5-8 0 0 0 1-1 1v2h3c0 2 1 3 1 5h2m35-5c2 0 3 2 4 5h2c-1-1-1-2-1-3s0-2-1-3-2-2-3-2c0 0-1 1-2 1 0 1 1 1 1 2m-30 16c-1 0-1 0-1-1s0-2 1-3c2 0 3-1 3-1 1 0 1 1 1 1 0 1-1 2-3 4h-1m-11-1c-4-2-5-5-5-10 0-3 0-5 2-7 1-2 3-3 5-3s3 1 5 3c1 3 2 6 2 9v2h1v-1c1 0 1-2 1-6 0-3 0-6-2-9s-4-5-8-5c-3 0-6 2-7 5-2 4-2.4 7-2.4 12 0 4 1.4 8 5.4 12 1-1 2-1 3-2m125 141c1 0 1-.4 1-1.3 0-2.2-1-4.8-4-7.7-3-3-8-4.9-14-5.7-1-.1-2-.1-2-.1-1-.2-1-.2-2-.2-1-.1-3-.3-4-.5 3-9.3 4-17.5 4-24.7 0-10-2-17-6-23s-8-9-13-10c-1 1-1 1-1 2 5 2 10 6 13 12 3 7 4 13 4 20 0 5.6-1 13.9-5 24.5-4 1.6-8 5.3-11 11.1 0 .9 0 1.4 1 1.4 0 0 1-.9 2-2.6 2-1.7 3-3.4 5-5.1 3-1.7 5-2.6 8-2.6 5 0 10 .7 13 2.1 4 1.3 6 2.7 7 4.3 1 1.5 2 2.9 3 4.2 0 1.3 1 1.9 1 1.9m-92-145c-1-1-1-3-1-5 0-4 0-6 2-9 2-2 4-3 6-3 3 0 5 2 7 4 1 3 2 5 2 8 0 5-2 8-6 9 0 0 1 1 2 1 2 0 3 1 5 2 1-6 2-10 2-15 0-6-1-10-3-13-3-3-6-4-10-4-3 0-6 1-9 3-2 3-3 5-3 8 0 5 1 9 3 13 1 0 2 1 3 1m12 16c-13 9-23 13-31 13-7 0-14-3-20-8 1 2 2 4 3 5l6 6c4 4 9 6 14 6 7 0 15-4 25-11l9-6c2-2 4-4 4-7 0-1 0-2-1-2-1-2-6-5-16-8-9-4-16-6-20-6-3 0-8 2-15 6-6 4-10 8-10 12 0 0 1 1 2 3 6 5 12 8 18 8 8 0 18-4 31-14v2c1 0 1 1 1 1m23 202c4 7.52 11 11.3 19 11.3 2 0 4-.3 6-.9 2-.4 4-1.1 5-1.9 1-.7 2-1.4 3-2.2 2-.7 2-1.2 3-1.7l17-14.7c4-3.19 8-5.98 13-8.4 4-2.4 8-4 10-4.9 3-.8 5-2 7-3.6 1-1.5 2-3.4 2-5.8 0-2.9-2-5.1-4-6.7s-4-2.7-6-3.4-4-2.3-7-5c-2-2.6-4-6.2-5-10.9l-1-5.8c-1-2.7-1-4.7-2-5.8 0-.3 0-.4-1-.4s-3 .9-4 2.6c-2 1.7-4 3.6-6 5.6-1 2-4 3.8-6 5.5-3 1.7-6 2.6-8 2.6-8 0-12-2.2-15-6.5-2-3.2-3-6.9-4-11.1-2-1.7-3-2.6-5-2.6-5 0-7 5.2-7 15.7v31.1c0 .9-1 2.9-1 6-1 3.1-1 6.62-1 10.6l-2 11.1v.17m-145-5.29c9.3 1.36 20 4.27 32.1 8.71 12.1 4.4 19.5 6.7 22.2 6.7 7 0 12.8-3.1 17.6-9.09 1-1.94 1-4.22 1-6.84 0-9.45-5.7-21.4-17.1-35.9l-6.8-9.1c-1.4-1.9-3.1-4.8-5.3-8.7-2.1-3.9-4-6.9-5.5-9-1.3-2.3-3.4-4.6-6.1-6.9-2.6-2.3-5.6-3.8-8.9-4.6-4.2.8-7.1 2.2-8.5 4.1s-2.2 4-2.4 6.2c-.3 2.1-.9 3.5-1.9 4.2-1 .6-2.7 1.1-5 1.6-.5 0-1.4 0-2.7.1h-2.7c-5.3 0-8.9.6-10.8 1.6-2.5 2.9-3.8 6.2-3.8 9.7 0 1.6.4 4.3 1.2 8.1.8 3.7 1.2 6.7 1.2 8.8 0 4.1-1.2 8.2-3.7 12.3-2.5 4.3-3.8 7.5-3.8 9.78 1 3.88 7.6 6.61 19.7 8.21m33.3-90.9c0-6.9 1.8-14.5 5.5-23.5 3.6-9 7.2-15 10.7-19-.2-1-.7-1-1.5-1l-1-1c-2.9 3-6.4 10-10.6 20-4.2 9-6.4 17.3-6.4 23.4 0 4.5 1.1 8.4 3.1 11.8 2.2 3.3 7.5 8.1 15.9 14.2l10.6 6.9c11.3 9.8 17.3 16.6 17.3 20.6 0 2.1-1 4.2-4 6.5-2 2.4-4.7 3.6-7 3.6-.2 0-.3.2-.3.7 0 .1 1 2.1 3.1 6 4.2 5.7 13.2 8.5 25.2 8.5 22 0 39-9 52-27 0-5 0-8.1-1-9.4v-3.7c0-6.5 1-11.4 3-14.6s4-4.7 7-4.7c2 0 4 .7 6 2.2 1-7.7 1-14.4 1-20.4 0-9.1 0-16.6-2-23.6-1-6-3-11-5-15l-6-9c-2-3-3-6-5-9-1-4-2-7-2-12-3-5-5-10-8-15-2-5-4-10-6-14l-9 7c-10 7-18 10-25 10-6 0-11-1-14-5l-6-5c0 3-1 7-3 11l-6.3 12c-2.8 7-4.3 11-4.6 14-.4 2-.7 4-.9 4l-7.5 15c-8.1 15-12.2 28.9-12.2 40.4 0 2.3.2 4.7.6 7.1-4.5-3.1-6.7-7.4-6.7-13m71.6 94.6c-13 0-23 1.76-30 5.25v-.3c-5 6-10.6 9.1-18.4 9.1-4.9 0-12.6-1.9-23-5.7-10.5-3.6-19.8-6.36-27.9-8.18-.8-.23-2.6-.57-5.5-1.03-2.8-.45-5.4-.91-7.7-1.37-2.1-.45-4.5-1.13-7.1-2.05-2.5-.79-4.5-1.82-6-3.07-1.38-1.26-2.06-2.68-2.06-4.27 0-1.6.34-3.31 1.02-5.13.64-1.1 1.34-2.2 2.04-3.2.7-1.1 1.3-2.1 1.7-3.1.6-.9 1-1.8 1.4-2.8.4-.9.8-1.8 1-2.9.2-1 .4-2 .4-3s-.4-4-1.2-9.3c-.8-5.2-1.2-8.5-1.2-9.9 0-4.4 1-7.9 3.2-10.4s4.3-3.8 6.5-3.8h11.5c.9 0 2.3-.5 4.4-1.7.7-1.6 1.3-2.9 1.7-4.1.5-1.2.7-2.1.9-2.5.2-.6.4-1.2.6-1.7.4-.7.9-1.5 1.6-2.3-.8-1-1.2-2.3-1.2-3.9 0-1.1 0-2.1.2-2.7 0-3.6 1.7-8.7 5.3-15.4l3.5-6.3c2.9-5.4 5.1-9.4 6.7-13.4 1.7-4 3.5-10 5.5-18 1.6-7 5.4-14 11.4-21l7.5-9c5.2-6 8.6-11 10.5-15s2.9-9 2.9-13c0-2-.5-8-1.6-18-1-10-1.5-20-1.5-29 0-7 .6-12 1.9-17s3.6-10 7-14c3-4 7-8 13-10s13-3 21-3c3 0 6 0 9 1 3 0 7 1 12 3 4 2 8 4 11 7 4 3 7 8 10 13 2 6 4 12 5 20 1 5 1 10 2 17 0 6 1 10 1 13 1 3 1 7 2 12 1 4 2 8 4 11 2 4 4 8 7 12 3 5 7 10 11 16 9 10 16 21 20 32 5 10 8 23 8 36.9 0 6.9-1 13.6-3 20.1 2 0 3 .8 4 2.2s2 4.4 3 9.1l1 7.4c1 2.2 2 4.3 5 6.1 2 1.8 4 3.3 7 4.5 2 1 5 2.4 7 4.2 2 2 3 4.1 3 6.3 0 3.4-1 5.9-3 7.7-2 2-4 3.4-7 4.3-2 1-6 3-12 5.82-5 2.96-10 6.55-15 10.8l-10 8.51c-4 3.9-8 6.7-11 8.4-3 1.8-7 2.7-11 2.7l-7-.8c-8-2.1-13-6.1-16-12.2-16-1.94-29-2.9-37-2.9"/>
+</svg>