ok

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'export',
+    images: {
+        unoptimized: true,
+    },
 }
 
 module.exports = nextConfig

src/app/(main)/page.tsx

@@ -7,7 +7,7 @@ import { HomeAbout } from '@/components/HomeAbout'
 import { ClickableGallery } from '@/components/ClickableGallery'
 import { StackSectionPreview } from '@/components/StackSection'
 import { Companies } from '@/components/Companies'
-import { CallTo } from '@/components/CallTo'
+import { CallToAction } from '@/components/CallToAction'
 import { ScrollDown } from '@/components/ui/ScrollDown'
 import { ScrollUp } from '@/components/ui/ScrollUp'
 import { GridStats } from '@/components/GridStats'
@@ -25,6 +25,9 @@ export default function Home() {
       <section id="steps">
         <Steps />
       </section>
+      <section>
+        <StackSectionPreview />
+      </section>
       <section id="world-map">
         <WorldMap />
       </section>
@@ -35,7 +38,7 @@ export default function Home() {
         <UseCases />
       </section>
       <section id="call-to-action">
-        <CallTo />
+        <CallToAction />
       </section>
       <ScrollDown />
       <ScrollUp />

src/components/CallToAction.tsx

@@ -0,0 +1,33 @@
+import { CircleBackground } from '@/components/CircleBackground'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/Button'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-free-shares-today"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+    >
+      <div className="absolute left-20 top-1/2 -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-md sm:text-center">
+          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
+          Decentralized AI Agents that are Truly Yours
+          </h2>
+          <p className="mt-4 text-lg text-gray-300">
+          Why hand out your intelligence to centralized giants when you can build your own. Ready to own your intelligence?
+          </p>
+          <div className="mt-8 flex justify-center gap-x-6">
+            <Button
+            variant="solid"
+              href="#">Book a Meeting</Button>
+            <Button href="#"
+              variant="outline">Join the Waitlist</Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/components/GridStats.tsx

@@ -3,6 +3,7 @@
 import CountUp from "react-countup";
 import React from "react";
 import { Button } from "@/components/Button";
+import { H2, P } from "@/components/Texts";
 
 export function GridStats() {
   return (
@@ -15,17 +16,17 @@ export function GridStats() {
         backgroundPosition: "center",
       }}
     >
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-4">
+      <div className="max-w-2xl px-6 lg:max-w-7xl lg:px-6">
-        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
+        <div className="grid grid-cols-1 gap-16 lg:grid-cols-3">
           {/* Column 1: Title & Description */}
           <div className="flex flex-col space-y-10">
             <div>
-              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+              <H2 color="light">
                 Robust Infrastructure for your Intellegence Needs
-              </h2>
+              </H2>
-              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+              <P color="light" className="mt-6">
                 Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
-              </p>
+              </P>
               <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
             </div>
           </div>
@@ -63,7 +64,7 @@ export function GridStats() {
 function StatCard({
   label,
   description,
-  className = "",
+  className = "border border-white/10 hover:border-white/40 hover:bg-black/40",
 }: {
   label: string;
   description: string;

src/components/Texts.tsx

@@ -4,9 +4,9 @@ import React from 'react'
 import { cn } from '@/lib/utils'
 
 const colorVariants = {
-  primary: 'text-[#2F3178]',
+  primary: 'text-[#fffff]',
-  secondary: 'text-gray-600',
+  secondary: 'text-gray-200',
-  custom: 'text-[#1c1c49]',
+  custom: 'text-[#015eff]',
   light: 'text-white',
 } as const
 

src/components/WorldMap.tsx

@@ -5,7 +5,17 @@ import { H2, H3, H4, P } from "./Texts"
 export function WorldMap() {
 
   return (
-    <div className="relative h-screen max-w-full overflow-hidden bg-black -top-20">
+    <div className="relative h-screen max-w-full overflow-hidden -top-20">
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src="/videos/benefits.mp4" type="video/mp4" />
+      </video>
+      <div className="absolute inset-0 bg-black/60" />
       <div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
         <H4 className="" color="light">
           Mycelium Network is Live.

src/components/ui/globe.tsx

@@ -133,7 +133,7 @@ export function Globe({
     <div
       className={cn(
         // Radial gradient background that fades to pure black at edges
-        "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(10,10,10,1)_0%,rgba(0,0,0,1)_100%)]",
+        "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px] rounded-full",
         className,
       )}
     >