refactor: remove GetStarted section and consolidate with CallToAction component

README.md

@@ -1,35 +1,151 @@
-# Mycelium
+# Project Mycelium Website
 
-Mycelium is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+- **Repository:** [https://git.ourworld.tf/ourworld_web/www_project_mycelium/](https://git.ourworld.tf/ourworld_web/www_project_mycelium/)
 
-## Getting started
+- **Main Branch (Production):** [https://project.mycelium.tf/](https://project.mycelium.tf/)
+- **Dev Branch (Staging):** [https://www2.project.mycelium.tf/](https://www2.project.mycelium.tf/)
 
-To get started with this template, first install the npm dependencies:
+
+---
+
+## About
+
+This is the official website for Mycelium Cloud, built using Next.js and Tailwind CSS.
+
+---
+
+## Technologies
+
+- **Framework**: [Next.js](https://nextjs.org/)
+- **Language**: [TypeScript](https://www.typescriptlang.org/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
+
+---
+
+## Dependencies
+
+- **UI**: [@headlessui/react](https://headlessui.com/)
+- **Animation**: [framer-motion](https://www.framer.com/motion/)
+- **Utilities**: [clsx](https://github.com/lukeed/clsx), [use-debounce](https://github.com/xnimorz/use-debounce)
+
+---
+
+## File Structure
+
+- **Pages**: To edit the content of a specific page, navigate to `src/app/(main)/`.
+- **Components**: Reusable components are located in `src/components/`.
+- **Images**: Add or modify images in the `public/images/` directory.
+- **CSS**: Global styles can be found in `src/styles/tailwind.css`. Most styling is done using Tailwind CSS utility classes directly in the `.tsx` files.
+
+---
+
+## Branding
+
+- **Font**: The primary font used is [Mulish](https://fonts.google.com/specimen/Mulish).
+- **Logos**: Project logos are stored in `public/images/logos/`.
+
+---
+
+## Get Started
+
+Follow these steps to get the project running locally:
+
+1.  **Install Dependencies**:
 
     ```bash
     npm install
     ```
 
-Next, run the development server:
+2.  **Build the Project**:
 
     ```bash
-npm run dev
+    npm run build
     ```
 
-Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
+3.  **Start the Development Server**:
 
-## Customizing
+    ```bash
+    npm run start
+    ```
 
-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
+---
 
-## License
+## Development Guide
 
-This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
+This project follows a modular, component-based architecture. Pages are assembled by combining reusable components into a single layout.
 
-## Learn more
+### Homepage Structure
 
-To learn more about the technologies used in this site template, see the following resources:
+The homepage (`src/app/(main)/page.tsx`) is composed of the following components:
 
-- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
-- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
-- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
+- `HomeHero`
+- `WorldMap`
+- `StackSectionPreview`
+- `Steps`
+- `Companies`
+- `ClickableGallery`
+- `BentoReviews`
+- `CallToAction`
+
+To edit a specific section of the homepage, navigate to `src/components/` and modify the corresponding component file.
+
+### Base Layout
+
+The main layout for the application is defined in `src/components/Layout.tsx`. This file includes the `Header` and `Footer` and wraps the primary content of each page.
+
+### Creating a New Page
+
+To create a new page, follow these steps:
+
+1.  **Create a Folder**: Inside the `src/app/(main)/` directory, create a new folder with the desired URL slug for your page (e.g., `new-page`).
+
+2.  **Create the Page File**: Inside the new folder, create a `page.tsx` file.
+
+3.  **Add Page Content**: Compose your page by importing and using the reusable components from `src/components/`. For example:
+
+    ```tsx
+    import { HomeHero } from '@/components/HomeHero'
+    import { Faqs } from '@/components/Faqs'
+
+    export default function NewPage() {
+      return (
+        <>
+          <HomeHero />
+          <Faqs />
+        </>
+      )
+    }
+    ```
+
+The new page will be accessible at `http://localhost:3000/new-page`.
+
+---
+
+## Contributing
+
+- **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.
+- **Always work on the `development` branch.** Create a feature branch from `development` and submit your pull request to `development`.
+- **Request a review.** After submitting your pull request, ask the team to review and accept it into the `main` branch.
+
+---
+
+## Report an Error
+
+To report an issue, please use the following link and provide the requested information:
+
+- **Issue Tracker**: [git.ourworld.tf/ourworld_web/HOME/issues/new](https://git.ourworld.tf/ourworld_web/HOME/issues/new) and tag **OW Website & Wiki Project 2025**
+
+- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
+
+When reporting an issue, please include:
+
+- **URL**: The page where the error occurred.
+- **Repo**: The repository you are working with.
+- **Branch**: The specific branch you are on.
+- **Problem**: A detailed description of the problem.
+
+---
+
+## Questions
+
+If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).

src/app/(main)/page.tsx

@@ -21,16 +21,13 @@ export default function Home() {
       <section id="home-hero">
         <HomeHero />
       </section>
-      <section id="technologies">
-        <StackSectionPreview />
-      </section>
-      <section id="bento-reviews">
-        <BentoReviews />
-      </section>
       <section id="network">
         <WorldMap />
       </section>
-      <section id="deploy">
+      <section id="technologies">
+        <StackSectionPreview />
+      </section>
+      <section id="how-it-works">
         <Steps />
       </section>
       <section id="llms">
@@ -39,7 +36,10 @@ export default function Home() {
       <section id="clickable-gallery">
         <ClickableGallery />
       </section>
-      <section id="call-to-action">
+      <section id="bento-reviews">
+        <BentoReviews />
+      </section>
+      <section id="get-started">
         <CallToAction />
       </section>
     </>

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import { type Metadata } from 'next'
+import Script from 'next/script'
 import { Mulish } from 'next/font/google'
 import clsx from 'clsx'
 
@@ -26,6 +27,19 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={clsx('antialiased', mulish.variable)}>
+      <head>
+        {/* MailerLite Universal */}
+        <Script id="mailerlite-universal" strategy="afterInteractive">
+          {`(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
+var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
+f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
+var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
+_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+
+var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');`}
+        </Script>
+        {/* End MailerLite Universal */}
+      </head>
       <body className="bg-black text-white">{children}</body>
     </html>
   )

src/components/Archives/WorldMap.tsx

@@ -22,7 +22,7 @@ export function WorldMap() {
       {/* Top Left Intro Text */}
       <div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
         <H4 color="light">Mycelium Network is Live.</H4>
-        <CP className="mt-6 text-base leading-relaxed font-light" color="light">
+        <CP className="hidden mt-6 text-base leading-relaxed font-light" color="light">
           Mycelium Cloud's advancement technology enables anyone to deploy
           their own Internet infrastructure, anywhere.
         </CP>

src/components/BentoReviews.tsx

@@ -12,46 +12,45 @@ const items = [
   {
     title: 'FungiStor',
     subtitle: 'Long-Term AI Memory',
-    description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
+    description: 'Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.',
     video: "/videos/fungistor.mp4",
   },
   {
     title: 'HeroDB',
     subtitle: 'Active AI Memory',
-    description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
+    description: 'Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.',
     video: "/videos/herodb.mp4",
   },
   {
     title: 'MOS Sandboxes',
     subtitle: 'Secure Agent Workspaces',
-    description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
+    description: 'Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.',
     video: "/videos/sandbox.mp4",
   },
   {
     title: 'Mycelium Mesh',
     subtitle: 'Secure Communication Network',
-    description: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
+    description: 'A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.',
     video: "/videos/mesh.mp4",
   },
   {
     title: 'Deterministic Deployment',
     subtitle: 'Verifiable Code Execution',
-    description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
+    description: 'Declare intent, get a hash; remote attestation proves that’s what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.',
     video: "/videos/deterministic.mp4",
   },
   {
     title: 'Agent Coordination',
     subtitle: 'Sovereign Workflow Management',
-    description: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
+    description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.',
     video: "/videos/agent.mp4",
   },
   {
     title: 'Universal Interface Layer',
     subtitle: 'AI Service Gateway',
-    description: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
+    description: 'One gateway to open-source LLMs, tools, APIs, and data—bring your own models & keys. Semantic retrieval, function calling, and metered micropayments built in.',
     video: "/videos/universal.mp4",
   },
-
 ];
 
 export function BentoReviews() {
@@ -93,17 +92,16 @@ export function BentoReviews() {
 
   return (
     <div>
-      <div className="relative isolate pt-24 pb-12 bg-black text-center w-full lg:px-0 px-4">
+      <div className="relative isolate py-24 bg-black text-center w-full lg:px-0 px-4">
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
           <div className="mx-auto max-w-5xl ">
-            <H2 className="text-center">Mycelium Technologies</H2>
+            <H2 className="text-center">Augmented Intelligence Fabric</H2>
           </div>
         </FadeIn>
         <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
           <div className="mx-auto max-w-4xl mt-6 mb-8">
             <P className="text-center" color="primary">
-              A robust infrastructure layer for autonomous AI agents, our technology stack
-              delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
+            The sovereign substrate for autonomous AI. Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.
             </P>
           </div>
         </FadeIn>

src/components/CallTo.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { H2, P } from '@/components/Texts'
 
 export function CallTo() {
@@ -6,21 +8,24 @@ export function CallTo() {
       <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200">
         <div className="mx-auto max-w-4xl text-center">
           <H2 color="primary">
-            Say hello to Decentralized AI Agents that are Truly Yours
+          Are you Ready?
           </H2>
           <P color="custom" className="mt-8 max-w-3xl">
             Why hand out your intelligence to centralized giants when you can build your own?
           </P>
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <a
-              href="mailto:info@ourworld.tf"
+              href="https://calendly.com/sachao/30min"
               target="_blank"
               rel="noopener noreferrer"
               className="rounded-md bg-[#2F3178] px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-[#2F3178]/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2F3178]"
             >
               Book a Meeting
             </a>
-            <a href="mailto:info@ourworld.tf" target="_blank" rel="noopener noreferrer" className="text-sm/6 font-semibold text-[#2F3178] hover:text-[#2F3178]/80">
+            <a
+              href="mailto:info@ourworld.tf"
+              className="text-sm/6 font-semibold text-[#2F3178] hover:text-[#2F3178]/80"
+            >
               Join the Waitlist <span aria-hidden="true">→</span>
             </a>
           </div>

src/components/CallToAction.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
@@ -36,13 +38,17 @@ export function CallToAction() {
             <Button
               variant="solid"
               color="cyan"
-              href="mailto:info@ourworld.tf"
+              href="https://calendly.com/sachao/30min"
               target="_blank"
               rel="noopener noreferrer"
             >
               Book a Meeting
             </Button>
-            <Button href="mailto:info@ourworld.tf" target="_blank" rel="noopener noreferrer" variant="outline" color="white">
+            <Button
+              variant="outline"
+              color="white"
+              href="mailto:info@ourworld.tf"
+            >
               Join the Waitlist
             </Button>
           </div>

src/components/ClickableGallery.tsx

@@ -52,14 +52,15 @@ export function ClickableGallery() {
     <div>
       <div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full">
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
-          <div className="mx-auto max-w-5xl">
-            <H2 className="text-center">One Agent, Endless Possibilities.</H2>
+          <div className="mx-auto max-w-5xl lg:mt-12">
+            <H2 className="text-center">Agents with Endless Possibilities.</H2>
           </div>
         </FadeIn>
         <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
           <div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
             <P className="text-center" color="primary">
-              The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
+            Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results.
+            Many agents, one intelligence—yours.
             </P>
           </div>
         </FadeIn>

src/components/Companies.tsx

@@ -40,7 +40,7 @@ const row2 = logos.slice(6);
 
 export function Companies() {
   return (
-    <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased lg:py-12 py-4 -top-20">
+    <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased  py-4 mb-12">
       <div className="relative z-10 mx-auto w-full max-w-6xl p-4">
 
         {/* Heading */}
@@ -50,7 +50,7 @@ export function Companies() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1 }}
         >
-          <P className="text-gray-100 text-center mb-6">
+          <P className="hidden min-xl:text-gray-100 text-center mb-6">
             Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
           </P>
         </motion.div>

src/components/Footer.tsx

@@ -6,7 +6,6 @@ import { Container } from '@/components/Container'
 import { TextField } from '@/components/Fields'
 import { Logomark } from '@/components/Logo'
 import { NavLinks } from '@/components/NavLinks'
-import { FadeIn } from '@/components/FadeIn'
 import qrCode from '@/images/qr-code.svg'
 
 function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
@@ -24,61 +23,13 @@ function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
 export function Footer() {
   return (
     <footer id="footer" className="border-t border-gray-800">
-      <FadeIn>
       <Container>
-        <div className="flex flex-col items-start justify-between gap-y-12 pt-12 pb-6 lg:flex-row lg:items-center lg:py-12">
-          <div>
-            <div className="flex items-center text-white">
-              <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
-              <div className="ml-4">
-                <p className="text-base font-semibold">Project Mycelium</p>
-                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
-              </div>
-            </div>
-            <nav className="mt-11 flex gap-8">
-              <NavLinks />
-            </nav>
-          </div>
-          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-800/50 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
-            <div className="relative flex h-24 w-24 flex-none items-center justify-center">
-              <QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-700 transition-colors group-hover:stroke-[#015eff]" />
-              <Image src={qrCode} alt="" unoptimized />
-            </div>
-            <div className="ml-8 lg:w-64">
-              <p className="text-base font-semibold text-white">
-                <Link href="https://threefoldfaq.crisp.help/en/">
-                  <span className="absolute inset-0 sm:rounded-2xl" />
-                  Talk to a human
-                </Link>
-              </p>
-              <p className="mt-1 text-sm text-gray-400">
-                Get in touch with us for any inquiries or questions.
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-col items-center border-t border-gray-800 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
-          {/* <form className="flex w-full justify-center md:w-auto">
-            <TextField
-              type="email"
-              aria-label="Email address"
-              placeholder="Email address"
-              autoComplete="email"
-              required
-              variant="dark"
-              className="w-60 min-w-0 shrink"
-            />
-            <Button type="submit" color="cyan" className="ml-4 flex-none">
-              <span className="hidden lg:inline">Join our newsletter</span>
-              <span className="lg:hidden">Join newsletter</span>
-            </Button>
-          </form> */}
-          <p className="mt-6 text-sm text-gray-400 md:mt-0 ">
+        <div className="flex justify-center py-8">
+          <p className="text-sm text-gray-400">
             &copy; Copyright OurWorld Holdings, {new Date().getFullYear()}. All rights reserved.
           </p>
         </div>
       </Container>
-      </FadeIn>
     </footer>
   )
 }

src/components/Header.tsx

@@ -60,7 +60,7 @@ export function Header() {
       <nav>
         <Container className="relative z-50 flex justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
-            <Link href="/" aria-label="Home">
+            <Link href="/" aria-label="Home" className="hidden">
               <img src="/images/logo.png" alt="Mycelium" className="h-10 w-auto" />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
@@ -110,10 +110,14 @@ export function Header() {
                             <NavLinks className="block text-base/7 tracking-tight" />
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
-                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
-                              Docs
+                            <Button
+                              variant="outline"
+                              color="white"
+                              href="mailto:info@ourworld.tf"
+                            >
+                              Join the Waitlist
                             </Button>
-                            <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
+                            <Button href="https://calendly.com/sachao/30min" color="cyan">Book a Meeting</Button>
                           </div>
                         </PopoverPanel>
                       </>
@@ -123,10 +127,14 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
-                Docs
+              <Button
+                variant="outline"
+                color="white"
+                href="mailto:info@ourworld.tf"
+              >
+                Join the Waitlist
               </Button>
-              <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
+              <Button href="https://calendly.com/sachao/30min" color="cyan">Book a Meeting</Button>
             </div>
           </div>
         </Container>

src/components/HomeHero.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion'
 import { TypeAnimation } from 'react-type-animation'
 import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
-import { H1, PL } from '@/components/Texts'
+import { H1, H2, PL } from '@/components/Texts'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -32,9 +32,9 @@ export function HomeHero() {
         <div className="absolute inset-0 bg-black/60" />
       </div>
       <div className="relative px-6 lg:px-8">
-        <div className="relative -top-15 mx-auto flex h-screen max-w-8xl items-center justify-center">
+        <div className="relative  mx-auto flex h-screen max-w-8xl items-center justify-center">
           <div className="text-center">
-            <div className="max-w-5xl">
+            <div className="max-w-6xl">
               <H1 color="light">
                 <TypeAnimation
                   sequence={[
@@ -48,30 +48,17 @@ export function HomeHero() {
               </H1>
             </div>
 
-            {/* Mobile-only PL */}
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 1, delay: 1 }}
-              className="lg:hidden"
+              className="mt-12"
             >
-              <PL className="mt-8 max-w-xl text-center text-gray-100" color="light">
+              <PL className="mx-auto max-w-4xl text-center text-gray-100" color="light">
                 Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
               </PL>
             </motion.div>
           </div>
-
-          {/* Desktop-only PL */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1, delay: 1 }}
-            className="hidden lg:block"
-          >
-            <PL className="absolute -bottom-8 left-0 max-w-xl text-left text-gray-100" color="light">
-              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </PL>
-          </motion.div>
         </div>
       </div>
     </div>

src/components/StackSection.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { StackedCubes } from "@/components/ui/StackedCubes";
-import { H2, P } from '@/components/Texts';
+import { H1, H2, P } from '@/components/Texts';
 import { FadeIn } from "./FadeIn";
 
 export function StackSectionPreview() {

src/components/Steps.tsx

@@ -30,14 +30,13 @@ export function Steps() {
   const isInView = useInView(ref, { once: true });
 
   return (
-    <section id="benefits" ref={ref} className="relative bg-cover bg-center py-32 -top-20 text-white" style={{ backgroundImage: "url('/images/deployment.webp')" }}>
-      <div className="absolute inset-0 bg-black/60" />
-      <div className="relative px-6 lg:px-6">
+    <section id="benefits" ref={ref} className="relative pt-12 pb-4 px-4 lg:px-12  text-white">
+      <div className="relative px-6 lg:px-12">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.8, delay: 0.1 }}
-          className="mx-auto max-w-5xl lg:mx-0"
+          className="mx-auto max-w-5xl text-center"
         >
           <H2 className="text-3xl font-medium tracking-tight" color="light">
             Deploy Scalable LLMs and AI Agents in Seconds
@@ -50,7 +49,7 @@ export function Steps() {
           initial={{ opacity: 0 }}
           animate={isInView ? { opacity: 1 } : { opacity: 0 }}
           transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
-          className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:max-w-7xl lg:grid-cols-3"
         >
           {features.map((feature, index) => (
             <motion.li
@@ -58,7 +57,7 @@ export function Steps() {
               initial={{ opacity: 0, y: 20 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
               transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-white/20 bg-black/20 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
+              className="rounded-2xl border border-white/20 bg-black/30 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
             >
               <feature.icon className="h-8 w-8 mb-4 text-white" />
               <CT as="span" className="font-semibold" color="light">{feature.name}</CT>

src/components/UseCases.tsx

@@ -148,11 +148,11 @@ export function UseCases() {
             className="flex flex-col items-start justify-start pt-10 lg:pr-12"
           >
             <H2 id="usecases-title" color="light" className="text-left">
-              Mycelium Technologies
+            Augmented Intelligence Fabric
             </H2>
             <P className="mt-4 text-left" color="light">
-              A robust infrastructure layer for autonomous AI agents, our technology stack
-              delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
+            The sovereign substrate for autonomous AI.
+Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.
             </P>
           </motion.div>
 

src/components/WorldMap.tsx

@@ -32,7 +32,7 @@ export function WorldMap() {
           className="max-w-xl"
         >
           <H2 color="light">Mycelium Network is Live.</H2>
-          <P className="mt-4 text-base leading-relaxed font-light" color="light">
+          <P className="hidden mt-4 text-base leading-relaxed font-light" color="light">
             Mycelium Cloud's advancement technology enables anyone to deploy
             their own Internet infrastructure, anywhere.
           </P>

src/components/ui/StackedCubes.tsx

@@ -8,25 +8,25 @@ const stackData = [
   {
     id: "agent",
     title: "Agent Layer",
-    descriptionTitle: "Personal Agents - Secure & Sovereign",
+    descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
     description:
-      "Personal AI agents operate as secure digital twins, providing tailored intelligent assistance. They interact with existing chat, MCP agents, and coding tools while maintaining sovereignty and ecosystem compatibility.",
+      "Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
     position: "top",
   },
   {
-    id: "ai",
-    title: "AI Layer",
-    descriptionTitle: "AI Agents & AI Brains + Mycelium Code & Compute Sandboxes",
+    id: "network",
+    title: "Network Layer",
+    descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
     description:
-      "Intelligence core combining LLMs with specialized AI agents. Mycelium-powered sandboxes provide secure environments for development, testing, and compilation with active memory systems and unbreakable network architecture.",
+      "Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
     position: "middle",
   },
   {
     id: "cloud",
     title: "Cloud Layer",
-    descriptionTitle: "Mycelium Compute & Storage - Decentralized Infrastructure Layer",
+    descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
     description:
-      "Foundation runs bare metal Zero OS enabling autonomous cloud. Decentralized infrastructure supports Web2, Web3, AI workloads with superior scalability. Built on twenty years cloud experience.",
+      "Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
     position: "bottom",
   },
 ];