improvements

fixed build errors
improvements
2025-10-24 15:11:28 +03:00 · 2025-10-24 04:17:02 +03:00 · 2025-10-24 02:17:33 +03:00 · 2025-10-23 16:38:25 +02:00 · 2025-10-23 16:36:37 +02:00 · 2025-10-23 16:04:04 +02:00
116 changed files with 13181 additions and 876 deletions
--- a/components.json
+++ b/components.json
@@ -0,0 +1,25 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/tailwind.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@aceternity": "https://ui.aceternity.com/registry/{name}.json",
    "@magicui": "https://magicui.design/r/{name}.json"
  }
 }
--- a/index.html
+++ b/index.html
@@ -4,16 +4,10 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mycelium - Unleash the Power of Decentralized Networks</title>
+    <title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
-    <meta name="description" content="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking." />
+    <meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <style>
      :root {
        --font-inter: 'Inter', sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,34 +10,48 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@headlessui/react": "^2.1.0",
+    "@emailjs/browser": "^4.4.1",
-    "@tailwindcss/forms": "^0.5.3",
+    "@headlessui/react": "^2.2.9",
-    "@tailwindcss/postcss": "^4.1.7",
+    "@heroicons/react": "^2.2.0",
-    "@types/node": "^20.10.8",
+    "@lobehub/icons": "^1.97.2",
-    "@types/react": "^18.2.47",
+    "@react-three/drei": "^9.89.2",
-    "@types/react-dom": "^18.2.18",
+    "@react-three/fiber": "^8.15.12",
    "@tabler/icons-react": "^3.35.0",
    "@tailwindcss/forms": "^0.5.10",
    "@types/node": "^20.19.23",
    "@types/react": "^18.3.26",
    "@types/react-dom": "^18.3.7",
    "@types/react-router-dom": "^5.3.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cobe": "^0.6.5",
-    "framer-motion": "^10.15.0",
+    "dotted-map": "^2.2.3",
-    "react": "^18.2.0",
+    "framer-motion": "^10.18.0",
    "lucide-react": "^0.544.0",
    "motion": "^12.23.24",
    "popmotion": "^11.0.5",
    "react": "^18.3.1",
    "react-countup": "^6.5.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
    "react-icons": "^5.5.0",
    "react-router-dom": "^7.9.4",
    "react-type-animation": "^3.2.0",
    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.15",
-    "typescript": "^5.3.3",
+    "three": "^0.151.0",
    "typescript": "^5.9.3",
    "use-debounce": "^10.0.6"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.15",
    "@types/three": "^0.151.0",
    "@vitejs/plugin-react": "^5.0.4",
    "autoprefixer": "^10.4.20",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.1",
-    "prettier": "^3.3.2",
+    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.14",
-    "sharp": "0.33.1",
+    "sharp": "^0.33.1",
    "tw-animate-css": "^1.4.0",
    "vite": "^7.1.7"
  }
 }
--- a/public/images/agent_icon.png
+++ b/public/images/agent_icon.png
--- a/public/images/cloud.png
+++ b/public/images/cloud.png
--- a/public/images/cloud1.png
+++ b/public/images/cloud1.png
--- a/public/images/cloud_icon.png
+++ b/public/images/cloud_icon.png
--- a/public/images/cloudimg.png
+++ b/public/images/cloudimg.png
--- a/public/images/kubernetes.png
+++ b/public/images/kubernetes.png
--- a/public/images/logos/icon.svg
+++ b/public/images/logos/icon.svg
--- a/public/images/mchip.webp
+++ b/public/images/mchip.webp
--- a/public/images/mchip2.webp
+++ b/public/images/mchip2.webp
--- a/public/images/network_icon.png
+++ b/public/images/network_icon.png
--- a/public/images/phone-frame.svg
+++ b/public/images/phone-frame.svg
@@ -214,7 +214,7 @@
    </filter>
    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
+      <stop stop-color="#FFFFFF" />
      <stop offset="1" stop-color="#E6E6E6" />
    </radialGradient>
    <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
--- a/public/videos/chip_vid.mp4
+++ b/public/videos/chip_vid.mp4
--- a/public/videos/cloud.mp4
+++ b/public/videos/cloud.mp4
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import HomePage from './pages/home/HomePage'
 import CloudPage from './pages/cloud/CloudPage'
 import NetworkPage from './pages/network/NetworkPage'
 import AgentsPage from './pages/agents/AgentsPage'
 import DownloadPage from './pages/download/DownloadPage'
 function App() {
  return (
@@ -14,6 +15,7 @@ function App() {
          <Route path="cloud" element={<CloudPage />} />
          <Route path="network" element={<NetworkPage />} />
          <Route path="agents" element={<AgentsPage />} />
          <Route path="download" element={<DownloadPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
--- a/src/components/AnimatedSection.tsx
+++ b/src/components/AnimatedSection.tsx
@@ -1,19 +1,20 @@
-import { useRef } from 'react'
+import { motion } from 'framer-motion'
 import { motion, useInView } from 'framer-motion'
-export function AnimatedSection({ children }: { children: React.ReactNode }) {
+type AnimatedSectionProps = {
-  const ref = useRef(null)
+  children: React.ReactNode
-  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
+  id?: string
  className?: string
 }
 export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
  return (
    <motion.section
-      ref={ref}
+      id={id}
-      initial={{ opacity: 0, y: 50 }}
+      className={className}
-      animate={{
+      initial={{ opacity: 0, y: 40 }}
-        opacity: isInView ? 1 : 0,
+      whileInView={{ opacity: 1, y: 0 }}
-        y: isInView ? 0 : 50,
+      viewport={{ once: true, margin: '-25% 0px -20% 0px' }}
-      }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.section>
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -3,9 +3,9 @@ import clsx from 'clsx'
 const baseStyles = {
  solid:
-    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
+    'inline-flex justify-center rounded-full py-2 px-4 text-sm font-semibold transition-colors',
  outline:
-    'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
+    'inline-flex justify-center rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(4)-1px)] text-sm transition-colors',
 }
 const variantStyles = {
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@@ -0,0 +1,220 @@
 'use client'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useState, type ChangeEvent, type FormEvent } from 'react'
 import emailjs from '@emailjs/browser'
 import { CheckCircle, Send, X } from 'lucide-react'
 interface ContactFormProps {
  isOpen: boolean
  onClose: () => void
  title?: string
  formType?: 'investor' | 'partner' | 'agent_waitlist'
 }
 const initialFormState = {
  name: '',
  email: '',
  company: '',
  message: '',
 }
 export default function ContactForm({
  isOpen,
  onClose,
  title = 'Book a Meeting',
  formType,
 }: ContactFormProps) {
  const [formData, setFormData] = useState(initialFormState)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
  }
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)
    try {
      const templateParams = {
        from_name: formData.name,
        from_email: formData.email,
        company: formData.company,
        message: formData.message,
        to_email: 'emre@incubaid.com',
        form_type: formType || 'General Inquiry',
      }
      await emailjs.send(
        'service_03d0vf8',
        'template_6o6e8oe',
        templateParams,
        'bhkly3gzrO-SA9w7v',
      )
      setIsSubmitted(true)
      setTimeout(() => {
        setIsSubmitted(false)
        setFormData(initialFormState)
        onClose()
      }, 3000)
    } catch (error) {
      console.error('Email sending failed:', error)
      alert('Failed to send message. Please try again.')
    } finally {
      setIsSubmitting(false)
    }
  }
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <motion.div
            className="relative w-full max-w-md overflow-hidden rounded-2xl bg-card shadow-2xl"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
          >
            <div className="flex items-center justify-between border-b border-border p-6">
              <h3 className="text-xl font-bold text-foreground">{title}</h3>
              <button
                onClick={onClose}
                className="rounded-lg p-2 transition-colors hover:bg-muted"
                aria-label="Close form"
              >
                <X className="h-5 w-5 text-muted-foreground" />
              </button>
            </div>
            <div className="p-6">
              {isSubmitted ? (
                <motion.div
                  className="py-8 text-center"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                >
                  <CheckCircle className="mx-auto mb-4 h-16 w-16 text-primary" />
                  <h4 className="mb-2 text-lg font-semibold text-foreground">Thank you!</h4>
                  <p className="text-muted-foreground">We&apos;ll get back to you soon.</p>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label
                      htmlFor="name"
                      className="mb-1 block text-sm font-medium text-muted-foreground"
                    >
                      Full Name *
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleInputChange}
                      required
                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
                      placeholder="Your full name"
                    />
                  </div>
                  <div>
                    <label
                      htmlFor="email"
                      className="mb-1 block text-sm font-medium text-muted-foreground"
                    >
                      Email Address *
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      required
                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
                      placeholder="your.email@company.com"
                    />
                  </div>
                  <div>
                    <label
                      htmlFor="company"
                      className="mb-1 block text-sm font-medium text-muted-foreground"
                    >
                      Company
                    </label>
                    <input
                      type="text"
                      id="company"
                      name="company"
                      value={formData.company}
                      onChange={handleInputChange}
                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
                      placeholder="Your company name"
                    />
                  </div>
                  <div>
                    <label
                      htmlFor="message"
                      className="mb-1 block text-sm font-medium text-muted-foreground"
                    >
                      Message
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleInputChange}
                      rows={4}
                      className="w-full resize-none rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
                      placeholder={
                        formType === 'investor'
                          ? 'Tell us about your investment interests and how we can collaborate.'
                          : formType === 'agent_waitlist'
                            ? 'Tell us about your sovereign agent requirements.'
                            : 'Tell us about your project or how we can help.'
                      }
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="flex w-full items-center justify-center rounded-lg bg-primary px-6 py-3 font-semibold text-primary-foreground transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
                  >
                    {isSubmitting ? (
                      <>
                        <div className="mr-2 h-5 w-5 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" />
                        Sending...
                      </>
                    ) : (
                      <>
                        <Send className="h-5 w-5" />
                        <span className="ml-2">Send Message</span>
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
 }
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -0,0 +1,27 @@
 'use client'
 import { motion, type Transition } from 'framer-motion'
 import React from 'react'
 import { useMediaQuery } from '@/hooks/useMediaQuery'
 type FadeInProps = {
  children: React.ReactNode
  transition?: Transition
  className?: string
 }
 export function FadeIn({ children, transition, className }: FadeInProps) {
  const isMobile = useMediaQuery('(max-width: 768px)')
  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
      transition={transition || { duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  )
 }
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -10,8 +10,8 @@ export function Footer() {
            <div className="flex items-center text-gray-900">
              <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
              <div className="ml-4">
-                <p className="text-base font-semibold">Mycelium</p>
+                <p className="text-base font-semibold">Project Mycelium</p>
-                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
              </div>
            </div>
            <nav className="mt-10 flex gap-8">
@@ -35,10 +35,10 @@ export function Footer() {
            </div>
            <div className="ml-4 lg:w-72">
              <p className="text-base font-semibold text-gray-900">
-                <a href="https://github.com/threefoldtech/mycelium/releases/" target="_blank" rel="noopener noreferrer">
+                <Link to="/download">
                  <span className="absolute inset-0 sm:rounded-2xl" />
-                  Download Mycelium
+                  Download Mycelium Connector
-                </a>
+                </Link>
              </p>
              <p className="mt-1 text-sm text-gray-700">
                Head to the GitHub to access the latest Mycelium builds for your devices.
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,23 +1,18 @@
 import { Link } from 'react-router-dom'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/pmyceliumlogo.png'
 export function Header() {
  return (
    <header>
      <nav>
-        <Container className="relative z-50 flex justify-between py-8">
+                <Container className="relative z-50 flex justify-between py-4">
          <div className="relative z-10 flex items-center gap-16">
            <Link to="/" aria-label="Home">
-              <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
+              <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
            </Link>
            <div className="hidden lg:flex lg:gap-10">
              <Link
                to="/"
                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
              >
                Home
              </Link>
              <Link
                to="/cloud"
                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
@@ -41,16 +36,16 @@ export function Header() {
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-6 max-lg:hidden">
              <Button
-                to="https://threefold.info/mycelium_network/docs/"
+                to="https://myceliumcloud.tf"
                variant="outline"
                as="a"
                target="_blank"
                rel="noopener noreferrer"
              >
-                Docs
+                Start Deployment
              </Button>
              <Button to="/download" variant="solid" color="cyan">
-                Get Mycelium
+                Get Mycelium Connector
              </Button>
            </div>
          </div>
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,12 +1,13 @@
 import { Outlet } from 'react-router-dom'
 import { Header } from './Header'
 import { Footer } from './Footer'
 import { Header } from './Header'
 export function Layout() {
  return (
-    <div className="bg-gray-50 antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
+    <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
      <Header />
-      <main>
+            <main className="">
        <Outlet />
      </main>
      <Footer />
--- a/src/components/ScrollDownArrow.tsx
+++ b/src/components/ScrollDownArrow.tsx
@@ -0,0 +1,22 @@
 'use client'
 import { ChevronDown } from 'lucide-react'
 export function ScrollDownArrow() {
  const scrollToNextSection = () => {
    const nextSection = document.querySelector('#next-section') // Assuming the next section has this id
    if (nextSection) {
      nextSection.scrollIntoView({ behavior: 'smooth' })
    }
  }
  return (
    <button
      onClick={scrollToNextSection}
      className="animate-bounce text-gray-500 hover:text-gray-700"
      aria-label="Scroll to next section"
    >
      <ChevronDown size={32} />
    </button>
  )
 }
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -3,6 +3,11 @@
 import React from 'react'
 import { cn } from '@/lib/utils'
 const fontVariants = {
  sans: 'font-sans',
  neuton: 'font-neuton',
 } as const
 const colorVariants = {
  primary: 'text-gray-900',
  secondary: 'text-gray-600',
@@ -15,8 +20,10 @@ const colorVariants = {
 } as const
 type TextOwnProps = {
  font?: keyof typeof fontVariants
  color?: keyof typeof colorVariants
  className?: string
  children?: React.ReactNode
 }
 // Polymorphic helpers
@@ -34,6 +41,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
  >
  function Text<E extends React.ElementType = DefaultElement>({
    font = 'sans',
    as,
    color = 'primary',
    className,
@@ -43,7 +51,12 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
    const Tag = (as || defaultElement) as React.ElementType
    return (
      <Tag
-        className={cn(defaultClassName, colorVariants[color], className)}
+        className={cn(
          defaultClassName,
          fontVariants[font],
          colorVariants[color],
          className
        )}
        {...props}
      >
        {children}
@@ -87,7 +100,7 @@ export const Subtle = createTextComponent(
 )
 export const H5 = createTextComponent(
  'h5',
-  'text-xl lg:text-2xl font-semibold leading-snug tracking-tight'
+  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
 )
 export const Eyebrow = createTextComponent(
  'h2',
@@ -145,3 +158,6 @@ export const DownloadCardDescription = createTextComponent(
  'dd',
  'text-base/7 leading-normal tracking-normal'
 )
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
 export const CP = createTextComponent('p', 'text-sm lg:text-sm leading-[1.525] font-light')
--- a/src/components/features-section-demo-1.tsx
+++ b/src/components/features-section-demo-1.tsx
@@ -0,0 +1,138 @@
 import { useId } from "react";
 export default function FeaturesSectionDemo() {
  return (
    <div className="py-20 lg:py-40">
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto">
        {grid.map((feature) => (
          <div
            key={feature.title}
            className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden"
          >
            <Grid size={20} />
            <p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
              {feature.title}
            </p>
            <p className="text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20">
              {feature.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
 }
 const grid = [
  {
    title: "HIPAA and SOC2 Compliant",
    description:
      "Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.",
  },
  {
    title: "Automated Social Media Posting",
    description:
      "Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.",
  },
  {
    title: "Advanced Analytics",
    description:
      "Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.",
  },
  {
    title: "Content Calendar",
    description:
      "Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.",
  },
  {
    title: "Audience Targeting",
    description:
      "Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.",
  },
  {
    title: "Social Listening",
    description:
      "Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.",
  },
  {
    title: "Customizable Templates",
    description:
      "Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.",
  },
  {
    title: "Collaboration Tools",
    description:
      "Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.",
  },
 ];
 export const Grid = ({
  pattern,
  size,
 }: {
  pattern?: number[][];
  size?: number;
 }) => {
  const p = pattern ?? [
    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
  ];
  return (
    <div className="pointer-events-none absolute left-1/2 top-0  -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
      <div className="absolute inset-0 bg-gradient-to-r  [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100">
        <GridPattern
          width={size ?? 20}
          height={size ?? 20}
          x="-12"
          y="4"
          squares={p}
          className="absolute inset-0 h-full w-full  mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
        />
      </div>
    </div>
  );
 };
 export function GridPattern({ width, height, x, y, squares, ...props }: any) {
  const patternId = useId();
  return (
    <svg aria-hidden="true" {...props}>
      <defs>
        <pattern
          id={patternId}
          width={width}
          height={height}
          patternUnits="userSpaceOnUse"
          x={x}
          y={y}
        >
          <path d={`M.5 ${height}V.5H${width}`} fill="none" />
        </pattern>
      </defs>
      <rect
        width="100%"
        height="100%"
        strokeWidth={0}
        fill={`url(#${patternId})`}
      />
      {squares && (
        <svg x={x} y={y} className="overflow-visible">
          {squares.map(([x, y]: any) => (
            <rect
              strokeWidth="0"
              key={`${x}-${y}`}
              width={width + 1}
              height={height + 1}
              x={x * width}
              y={y * height}
            />
          ))}
        </svg>
      )}
    </svg>
  );
 }
--- a/src/components/features-section-demo-2.tsx
+++ b/src/components/features-section-demo-2.tsx
@@ -0,0 +1,109 @@
 import { cn } from "@/lib/utils";
 import {
  IconAdjustmentsBolt,
  IconCloud,
  IconCurrencyDollar,
  IconEaseInOut,
  IconHeart,
  IconHelp,
  IconRouteAltLeft,
  IconTerminal2,
 } from "@tabler/icons-react";
 export default function FeaturesSectionDemo() {
  const features = [
    {
      title: "Built for developers",
      description:
        "Built for engineers, developers, dreamers, thinkers and doers.",
      icon: <IconTerminal2 />,
    },
    {
      title: "Ease of use",
      description:
        "It's as easy as using an Apple, and as expensive as buying one.",
      icon: <IconEaseInOut />,
    },
    {
      title: "Pricing like no other",
      description:
        "Our prices are best in the market. No cap, no lock, no credit card required.",
      icon: <IconCurrencyDollar />,
    },
    {
      title: "100% Uptime guarantee",
      description: "We just cannot be taken down by anyone.",
      icon: <IconCloud />,
    },
    {
      title: "Multi-tenant Architecture",
      description: "You can simply share passwords instead of buying new seats",
      icon: <IconRouteAltLeft />,
    },
    {
      title: "24/7 Customer Support",
      description:
        "We are available a 100% of the time. Atleast our AI Agents are.",
      icon: <IconHelp />,
    },
    {
      title: "Money back guarantee",
      description:
        "If you donot like EveryAI, we will convince you to like us.",
      icon: <IconAdjustmentsBolt />,
    },
    {
      title: "And everything else",
      description: "I just ran out of copy ideas. Accept my sincere apologies",
      icon: <IconHeart />,
    },
  ];
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-10 max-w-7xl mx-auto">
      {features.map((feature, index) => (
        <Feature key={feature.title} {...feature} index={index} />
      ))}
    </div>
  );
 }
 const Feature = ({
  title,
  description,
  icon,
  index,
 }: {
  title: string;
  description: string;
  icon: React.ReactNode;
  index: number;
 }) => {
  return (
    <div
      className={cn(
        "flex flex-col lg:border-r  py-10 relative group/feature dark:border-neutral-800",
        (index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
        index < 4 && "lg:border-b dark:border-neutral-800"
      )}
    >
      {index < 4 && (
        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
      )}
      {index >= 4 && (
        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
      )}
      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">
        {icon}
      </div>
      <div className="text-lg font-bold mb-2 relative z-10 px-10">
        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center" />
        <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
          {title}
        </span>
      </div>
      <p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
        {description}
      </p>
    </div>
  );
 };
--- a/src/components/features-section-demo-3.tsx
+++ b/src/components/features-section-demo-3.tsx
@@ -0,0 +1,281 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import createGlobe from "cobe";
 import { useEffect, useRef } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
 export default function FeaturesSectionDemo() {
  const features = [
    {
      title: "Track issues effectively",
      description:
        "Track and manage your project issues with ease using our intuitive interface.",
      skeleton: <SkeletonOne />,
      className:
        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
    },
    {
      title: "Capture pictures with AI",
      description:
        "Capture stunning photos effortlessly using our advanced AI technology.",
      skeleton: <SkeletonTwo />,
      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
    },
    {
      title: "Watch our AI on YouTube",
      description:
        "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
      skeleton: <SkeletonThree />,
      className:
        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
    },
    {
      title: "Deploy in seconds",
      description:
        "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
      skeleton: <SkeletonFour />,
      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
    },
  ];
  return (
    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
      <div className="px-8">
        <h4 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
          Packed with thousands of features
        </h4>
        <p className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
          From Image generation to video generation, Everything AI has APIs for
          literally everything. It can even create this website copy for you.
        </p>
      </div>
      <div className="relative ">
        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
          {features.map((feature) => (
            <FeatureCard key={feature.title} className={feature.className}>
              <FeatureTitle>{feature.title}</FeatureTitle>
              <FeatureDescription>{feature.description}</FeatureDescription>
              <div className=" h-full w-full">{feature.skeleton}</div>
            </FeatureCard>
          ))}
        </div>
      </div>
    </div>
  );
 }
 const FeatureCard = ({
  children,
  className,
 }: {
  children?: React.ReactNode;
  className?: string;
 }) => {
  return (
    <div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
      {children}
    </div>
  );
 };
 const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
  return (
    <p className=" max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
      {children}
    </p>
  );
 };
 const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
  return (
    <p
      className={cn(
        "text-sm md:text-base  max-w-4xl text-left mx-auto",
        "text-neutral-500 text-center font-normal dark:text-neutral-300",
        "text-left max-w-sm mx-0 md:text-sm my-2"
      )}
    >
      {children}
    </p>
  );
 };
 export const SkeletonOne = () => {
  return (
    <div className="relative flex py-8 px-2 gap-10 h-full">
      <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
        <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
          {/* TODO */}
          <img
            src="/linear.webp"
            alt="header"
            width={800}
            height={800}
            className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
          />
        </div>
      </div>
      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
    </div>
  );
 };
 export const SkeletonThree = () => {
  return (
    <a
      href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
      target="__blank"
      className="relative flex gap-10  h-full group/image"
    >
      <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
        <div className="flex flex-1 w-full h-full flex-col space-y-2  relative">
          {/* TODO */}
          <IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
          <img
            src="https://assets.aceternity.com/fireship.jpg"
            alt="header"
            width={800}
            height={800}
            className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
          />
        </div>
      </div>
    </a>
  );
 };
 export const SkeletonTwo = () => {
  const images = [
    "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  ];
  const imageVariants = {
    whileHover: {
      scale: 1.1,
      rotate: 0,
      zIndex: 100,
    },
    whileTap: {
      scale: 1.1,
      rotate: 0,
      zIndex: 100,
    },
  };
  return (
    <div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
      {/* TODO */}
      <div className="flex flex-row -ml-20">
        {images.map((image, idx) => (
          <motion.div
            variants={imageVariants}
            key={"images-first" + idx}
            style={{
              rotate: Math.random() * 20 - 10,
            }}
            whileHover="whileHover"
            whileTap="whileTap"
            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
          >
            <img
              src={image}
              alt="bali images"
              width="500"
              height="500"
              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
            />
          </motion.div>
        ))}
      </div>
      <div className="flex flex-row">
        {images.map((image, idx) => (
          <motion.div
            key={"images-second" + idx}
            style={{
              rotate: Math.random() * 20 - 10,
            }}
            variants={imageVariants}
            whileHover="whileHover"
            whileTap="whileTap"
            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
          >
            <img
              src={image}
              alt="bali images"
              width="500"
              height="500"
              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
            />
          </motion.div>
        ))}
      </div>
      <div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" />
      <div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" />
    </div>
  );
 };
 export const SkeletonFour = () => {
  return (
    <div className="h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
      <Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
    </div>
  );
 };
 export const Globe = ({ className }: { className?: string }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    let phi = 0;
    if (!canvasRef.current) return;
    const globe = createGlobe(canvasRef.current, {
      devicePixelRatio: 2,
      width: 600 * 2,
      height: 600 * 2,
      phi: 0,
      theta: 0,
      dark: 1,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [0.3, 0.3, 0.3],
      markerColor: [0.1, 0.8, 1],
      glowColor: [1, 1, 1],
      markers: [
        // longitude latitude
        { location: [37.7595, -122.4367], size: 0.03 },
        { location: [40.7128, -74.006], size: 0.1 },
      ],
      onRender: (state) => {
        // Called on every animation frame.
        // `state` will be an empty object, return updated params.
        state.phi = phi;
        phi += 0.01;
      },
    });
    return () => {
      globe.destroy();
    };
  }, []);
  return (
    <canvas
      ref={canvasRef}
      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
      className={className}
    />
  );
 };
--- a/src/components/logos/Ai21.tsx
+++ b/src/components/logos/Ai21.tsx
@@ -0,0 +1,3 @@
 import { Ai21 } from '@lobehub/icons';
 export default () => <Ai21.Brand size={30} />;
--- a/src/components/logos/AlibabaCloud.tsx
+++ b/src/components/logos/AlibabaCloud.tsx
@@ -0,0 +1,3 @@
 import { AlibabaCloud } from '@lobehub/icons';
 export default () => <AlibabaCloud.Text size={30} />;
--- a/src/components/logos/BaiduCloud.tsx
+++ b/src/components/logos/BaiduCloud.tsx
@@ -0,0 +1,3 @@
 import { BaiduCloud } from '@lobehub/icons';
 export default () => <BaiduCloud.Combine size={30} />;
--- a/src/components/logos/ByteDance.tsx
+++ b/src/components/logos/ByteDance.tsx
@@ -0,0 +1,3 @@
 import { ByteDance } from '@lobehub/icons';
 export default () => <ByteDance.Text size={30} />;
--- a/src/components/logos/Claude.tsx
+++ b/src/components/logos/Claude.tsx
@@ -0,0 +1,3 @@
 import { Claude } from '@lobehub/icons';
 export default () => <Claude.Combine size={30} />;
--- a/src/components/logos/DeepMind.tsx
+++ b/src/components/logos/DeepMind.tsx
@@ -0,0 +1,3 @@
 import { DeepMind } from '@lobehub/icons';
 export default () => <DeepMind.Combine size={30} />;
--- a/src/components/logos/DeepSeek.tsx
+++ b/src/components/logos/DeepSeek.tsx
@@ -0,0 +1,3 @@
 import { DeepSeek } from '@lobehub/icons';
 export default () => <DeepSeek.Combine size={30} />;
--- a/src/components/logos/Minimax.tsx
+++ b/src/components/logos/Minimax.tsx
@@ -0,0 +1,3 @@
 import { Minimax } from '@lobehub/icons';
 export default () => <Minimax.Combine size={30} />;
--- a/src/components/logos/Mistral.tsx
+++ b/src/components/logos/Mistral.tsx
@@ -0,0 +1,3 @@
 import { Mistral } from '@lobehub/icons';
 export default () => <Mistral.Combine size={30} />;
--- a/src/components/logos/Moonshot.tsx
+++ b/src/components/logos/Moonshot.tsx
@@ -0,0 +1,3 @@
 import { Moonshot } from '@lobehub/icons';
 export default () => <Moonshot.Combine size={30} />;
--- a/src/components/logos/NousResearch.tsx
+++ b/src/components/logos/NousResearch.tsx
--- a/src/components/logos/OpenAI.tsx
+++ b/src/components/logos/OpenAI.tsx
@@ -0,0 +1,3 @@
 import { OpenAI } from '@lobehub/icons';
 export default () => <OpenAI.Combine size={30} />;
--- a/src/components/logos/TencentCloud.tsx
+++ b/src/components/logos/TencentCloud.tsx
@@ -0,0 +1,3 @@
 import { TencentCloud } from '@lobehub/icons';
 export default () => <TencentCloud.Combine size={30} />;
--- a/src/components/logos/XAI.tsx
+++ b/src/components/logos/XAI.tsx
@@ -0,0 +1,23 @@
 const XAILogo = () => (
  <svg
    version="1.1"
    id="katman_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 841.89 595.28"
        xmlSpace="preserve"
    width="30"
    height="30"
  >
    <g>
      <polygon points="557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18 	" />
      <polygon points="640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05 	" />
      <polygon points="201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31 	" />
      <polygon points="201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99 	" />
    </g>
  </svg>
 );
 export default XAILogo;
--- a/src/components/magicui/infinite-moving-cards.tsx
+++ b/src/components/magicui/infinite-moving-cards.tsx
@@ -0,0 +1,87 @@
 "use client";
 import { cn } from "@/lib/utils";
 import React, { useCallback, useEffect, useState } from "react";
 export const InfiniteMovingCards = ({
  items,
  direction = "left",
  speed = "fast",
  pauseOnHover = true,
  className,
 }: {
  items: React.ReactNode[];
  direction?: "left" | "right";
  speed?: "fast" | "normal" | "slow";
  pauseOnHover?: boolean;
  className?: string;
 }): JSX.Element => {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const scrollerRef = React.useRef<HTMLUListElement>(null);
  const [start, setStart] = useState(false);
  const getDirection = useCallback(() => {
    if (containerRef.current) {
      if (direction === "left") {
        containerRef.current.style.setProperty("--animation-direction", "forwards");
      } else {
        containerRef.current.style.setProperty("--animation-direction", "reverse");
      }
    }
  }, [direction]);
  const getSpeed = useCallback(() => {
    if (containerRef.current) {
      if (speed === "fast") {
        containerRef.current.style.setProperty("--animation-duration", "20s");
      } else if (speed === "normal") {
        containerRef.current.style.setProperty("--animation-duration", "40s");
      } else {
        containerRef.current.style.setProperty("--animation-duration", "80s");
      }
    }
  }, [speed]);
  const addAnimation = useCallback(() => {
    if (containerRef.current && scrollerRef.current) {
      const scrollerContent = Array.from(scrollerRef.current.children);
      scrollerContent.forEach((item) => {
        const duplicatedItem = item.cloneNode(true);
        if (scrollerRef.current) {
          scrollerRef.current.appendChild(duplicatedItem);
        }
      });
      getDirection();
      getSpeed();
      setStart(true);
    }
  }, [getDirection, getSpeed]);
  useEffect(() => {
    addAnimation();
  }, [addAnimation]);
  return (
    <div
      ref={containerRef}
      className={cn("scroller relative z-20 overflow-hidden", className)}
    >
      <ul
        ref={scrollerRef}
        className={cn(
          "flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
          start && "animate-scroll",
          pauseOnHover && "hover:[animation-play-state:paused]",
        )}
      >
        {items.map((item, idx) => (
          <li className="relative flex-shrink-0" key={idx}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
 };
--- a/src/components/ui/CountUpNumber.tsx
+++ b/src/components/ui/CountUpNumber.tsx
@@ -0,0 +1,18 @@
 'use client'
 import CountUp from 'react-countup'
 import { SectionHeader } from '@/components/Texts'
 interface CountUpNumberProps {
  end: number
  className?: string
  color?: 'light' | 'primary' | 'secondary' | 'white'
 }
 export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
  return (
    <SectionHeader color={color} className={className}>
      <CountUp end={end} duration={2.75} separator="," />
    </SectionHeader>
  )
 }
--- a/src/components/ui/Cube.tsx
+++ b/src/components/ui/Cube.tsx
@@ -0,0 +1,131 @@
 "use client";
 import React from "react";
 import { motion } from "framer-motion";
 interface CubeProps {
  title: string;
  descriptionTitle: string;
  description: string;
  isActive: boolean;
  index: number;
  onHover: () => void;
  onLeave: () => void;
  onClick: () => void;
 }
 const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="507"
    height="234"
    fill="none"
    viewBox="0 0 507 234"
    {...props}
  >
    <path
      fill={`url(#cube-gradient-${index})`}
      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
    />
    <defs>
      <linearGradient
        id={`cube-gradient-${index}`}
        x1="185.298"
        x2="185.298"
        y1="-27.5515"
        y2="206.448"
        gradientUnits="userSpaceOnUse"
      >
        <stop />
        <stop offset="1" stopColor="#3F3B3E" />
      </linearGradient>
    </defs>
  </svg>
 );
 export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
  return (
    <div className="relative flex flex-col items-center">
      <motion.div
        className="relative cursor-pointer"
        onMouseEnter={onHover}
        onMouseLeave={onLeave}
        onClick={onClick}
        style={{
          zIndex: 10 - index,
        }}
        animate={{
          scale: isActive ? 1.05 : 1,
        }}
        transition={{
          duration: 0.3,
          ease: "easeOut",
        }}
      >
        {/* SVG Cube */}
        <CubeSvg 
          index={index}
          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-50"
          style={{
            filter: isActive ? 'brightness(1.2) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))' : 'brightness(0.9)',
          }}
        />
        {/* Title overlay */}
        <div className="absolute inset-0 flex items-center justify-center">
          <h3 
            className="text-white text-sm lg:text-base font-medium text-center px-4 drop-shadow-lg"
            style={{ 
              transform: 'rotate(0deg) skewX(0deg)',
              transformOrigin: 'center'
            }}
          >
            {title}
          </h3>
        </div>
        {/* Description with arrow line - Desktop */}
        {isActive && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
          >
            {/* Arrow line */}
            <svg
              className="absolute left-0 top-1/2 -translate-y-1/2"
              width="120"
              height="2"
              viewBox="0 0 120 2"
              fill="none"
            >
              <line
                x1="0"
                y1="1"
                x2="120"
                y2="1"
                stroke="white"
                strokeWidth="1"
                opacity="0.6"
              />
            </svg>
            {/* Description text */}
            <div className="ml-32 w-80">
              <h4 className="text-white text-base font-semibold mb-2">
                {descriptionTitle}
              </h4>
              <p className="text-white text-sm leading-relaxed font-light">
                {description}
              </p>
            </div>
          </motion.div>
        )}
        {/* Description for Mobile - Below cube */}
              </motion.div>
    </div>
  );
 }
--- a/src/components/ui/CubeLight.tsx
+++ b/src/components/ui/CubeLight.tsx
@@ -0,0 +1,131 @@
 "use client";
 import React from "react";
 import { motion } from "framer-motion";
 interface CubeProps {
  title: string;
  descriptionTitle: string;
  description: string;
  isActive: boolean;
  index: number;
  onHover: () => void;
  onLeave: () => void;
  onClick: () => void;
 }
 const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="507"
    height="234"
    fill="none"
    viewBox="0 0 507 234"
    {...props}
  >
    <path
      fill={`url(#cube-gradient-${index})`}
      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
    />
    <defs>
      <linearGradient
        id={`cube-gradient-${index}`}
        x1="185.298"
        x2="185.298"
        y1="-27.5515"
        y2="206.448"
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#E5E7EB" />
        <stop offset="1" stopColor="#9CA3AF" />
      </linearGradient>
    </defs>
  </svg>
 );
 export function CubeLight({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
  return (
    <div className="relative flex flex-col items-center">
      <motion.div
        className="relative cursor-pointer"
        onMouseEnter={onHover}
        onMouseLeave={onLeave}
        onClick={onClick}
        style={{
          zIndex: 10 - index,
        }}
        animate={{
          scale: isActive ? 1.05 : 1,
        }}
        transition={{
          duration: 0.3,
          ease: "easeOut",
        }}
      >
        {/* SVG Cube */}
        <CubeSvg 
          index={index}
          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-80"
          style={{
            filter: isActive ? 'brightness(1.1) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2))' : 'brightness(1)',
          }}
        />
        {/* Title overlay */}
        <div className="absolute inset-0 flex items-center justify-center">
          <h3 
            className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
            style={{ 
              transform: 'rotate(0deg) skewX(0deg)',
              transformOrigin: 'center'
            }}
          >
            {title}
          </h3>
        </div>
        {/* Description with arrow line - Desktop */}
        {isActive && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
          >
            {/* Arrow line */}
            <svg
              className="absolute left-0 top-1/2 -translate-y-1/2"
              width="120"
              height="2"
              viewBox="0 0 120 2"
              fill="none"
            >
              <line
                x1="0"
                y1="1"
                x2="120"
                y2="1"
                stroke="black"
                strokeWidth="1"
                opacity="0.6"
              />
            </svg>
            {/* Description text */}
            <div className="ml-32 w-80">
              <h4 className="text-black text-base font-semibold mb-2">
                {descriptionTitle}
              </h4>
              <p className="text-gray-800 text-sm leading-relaxed font-light">
                {description}
              </p>
            </div>
          </motion.div>
        )}
        {/* Description for Mobile - Below cube */}
              </motion.div>
    </div>
  );
 }
--- a/src/components/ui/FadeIn.tsx
+++ b/src/components/ui/FadeIn.tsx
@@ -0,0 +1,27 @@
 'use client'
 import { motion, type Transition } from 'framer-motion'
 import React from 'react'
 import { useMediaQuery } from '@/hooks/useMediaQuery'
 type FadeInProps = {
  children: React.ReactNode
  transition?: Transition
  className?: string
 }
 export function FadeIn({ children, transition, className }: FadeInProps) {
  const isMobile = useMediaQuery('(max-width: 768px)')
  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
      transition={transition || { duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  )
 }
--- a/src/components/ui/Globe.tsx
+++ b/src/components/ui/Globe.tsx
@@ -1,47 +1,159 @@
-import { useEffect, useRef } from 'react'
+"use client";
 import createGlobe from 'cobe'
-export function Globe({ className }: { className?: string }) {
+import createGlobe, { type COBEOptions } from "cobe";
-  const canvasRef = useRef<HTMLCanvasElement>(null)
+import { useMotionValue, useSpring } from "motion/react";
 import { useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
 const MOVEMENT_DAMPING = 1400;
 const GLOBE_CONFIG: COBEOptions = {
  width: 800,
  height: 800,
  onRender: () => {},
  devicePixelRatio: 2,
  phi: 0,
  theta: 0.3,
  dark: 0,
  diffuse: 0.25, // softer shading for premium look
  mapSamples: 16000,
  mapBrightness: 1.1,
  baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
  markerColor: [0.02, 0.71, 0.83], // cyan-500
  glowColor: [0.8, 0.8, 0.85], // grey
  markers: [
    // --- Core Global Markers ---
    { location: [14.5995, 120.9842], size: 0.03 }, // Manila
    { location: [19.076, 72.8777], size: 0.1 }, // Mumbai
    { location: [23.8103, 90.4125], size: 0.05 }, // Dhaka
    { location: [30.0444, 31.2357], size: 0.07 }, // Cairo
    { location: [39.9042, 116.4074], size: 0.08 }, // Beijing
    { location: [-23.5505, -46.6333], size: 0.1 }, // São Paulo
    { location: [19.4326, -99.1332], size: 0.1 }, // Mexico City
    { location: [40.7128, -74.006], size: 0.1 }, // New York
    { location: [34.6937, 135.5022], size: 0.05 }, // Osaka
    { location: [41.0082, 28.9784], size: 0.06 }, // Istanbul
    { location: [48.8566, 2.3522], size: 0.08 }, // Paris
    { location: [51.5072, -0.1276], size: 0.08 }, // London
    { location: [52.52, 13.405], size: 0.07 }, // Berlin
    { location: [35.6895, 139.6917], size: 0.06 }, // Tokyo
    { location: [-33.8688, 151.2093], size: 0.06 }, // Sydney
    { location: [-1.2921, 36.8219], size: 0.05 }, // Nairobi
    { location: [-34.6037, -58.3816], size: 0.07 }, // Buenos Aires
    { location: [37.7749, -122.4194], size: 0.08 }, // San Francisco
    { location: [1.3521, 103.8198], size: 0.06 }, // Singapore
    { location: [28.6139, 77.2090], size: 0.08 }, // New Delhi
    { location: [13.7563, 100.5018], size: 0.06 }, // Bangkok
    { location: [59.9343, 30.3351], size: 0.05 }, // St. Petersburg
    { location: [33.6844, 73.0479], size: 0.05 }, // Islamabad
    { location: [25.276987, 55.296249], size: 0.07 }, // Dubai
    { location: [60.1699, 24.9384], size: 0.05 }, // Helsinki
    { location: [43.6532, -79.3832], size: 0.07 }, // Toronto
    { location: [6.5244, 3.3792], size: 0.08 }, // Lagos
    { location: [50.1109, 8.6821], size: 0.06 }, // Frankfurt
    // --- 12 New US + European Cities ---
    { location: [34.0522, -118.2437], size: 0.08 }, // Los Angeles
    { location: [41.8781, -87.6298], size: 0.07 }, // Chicago
    { location: [29.7604, -95.3698], size: 0.07 }, // Houston
    { location: [25.7617, -80.1918], size: 0.07 }, // Miami
    { location: [45.5017, -73.5673], size: 0.06 }, // Montreal
    { location: [47.6062, -122.3321], size: 0.06 }, // Seattle
    { location: [40.4406, -79.9959], size: 0.05 }, // Pittsburgh
    { location: [41.3851, 2.1734], size: 0.06 }, // Barcelona
    { location: [45.4642, 9.19], size: 0.06 }, // Milan
    { location: [52.3676, 4.9041], size: 0.06 }, // Amsterdam
    { location: [38.7169, -9.139], size: 0.05 }, // Lisbon
    { location: [59.3293, 18.0686], size: 0.05 }, // Stockholmx
  ],
 };
 export function Globe({
  className,
  config = GLOBE_CONFIG,
 }: {
  className?: string;
  config?: COBEOptions;
 }) {
  let phi = 0;
  let width = 0;
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const pointerInteracting = useRef<number | null>(null);
  const r = useMotionValue(0);
  const rs = useSpring(r, {
    mass: 1,
    damping: 35, // slightly smoother motion
    stiffness: 100,
  });
  const updatePointerInteraction = (value: number | null) => {
    pointerInteracting.current = value;
    if (canvasRef.current) {
      canvasRef.current.style.cursor = value !== null ? "grabbing" : "grab";
    }
  };
  const updateMovement = (clientX: number) => {
    if (pointerInteracting.current !== null) {
      const delta = clientX - pointerInteracting.current;
      r.set(r.get() + delta / MOVEMENT_DAMPING);
    }
  };
  useEffect(() => {
-    let phi = 0
+    const onResize = () => {
      if (canvasRef.current) width = canvasRef.current.offsetWidth;
    };
-    if (!canvasRef.current) return
+    window.addEventListener("resize", onResize);
    onResize();
-    const globe = createGlobe(canvasRef.current, {
+    const globe = createGlobe(canvasRef.current!, {
-      devicePixelRatio: 2,
+      ...config,
-      width: 600 * 2,
+      width: width * 2,
-      height: 600 * 2,
+      height: width * 2,
      phi: 0,
      theta: 0,
      dark: 0,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [0.3, 0.3, 0.3],
      markerColor: [0.1, 0.8, 1],
      glowColor: [1, 1, 1],
      markers: [
        { location: [37.7595, -122.4367], size: 0.03 },
        { location: [40.7128, -74.006], size: 0.1 },
      ],
      onRender: (state) => {
-        state.phi = phi
+        if (!pointerInteracting.current) phi += 0.004; // slightly slower rotation for elegance
-        phi += 0.01
+        state.phi = phi + rs.get();
        state.width = width * 2;
        state.height = width * 2;
      },
-    })
+    });
    setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0);
    return () => {
-      globe.destroy()
+      globe.destroy();
-    }
+      window.removeEventListener("resize", onResize);
-  }, [])
+    };
  }, [rs, config]);
  return (
-    <canvas
+    <div
-      ref={canvasRef}
+      className={cn(
-      className={className}
+        // Radial gradient background that fades to pure black at edges
-      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
+        "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px] rounded-full",
-    />
+        className,
-  )
+      )}
    >
      <canvas
        className={cn(
          "size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
        )}
        ref={canvasRef}
        onPointerDown={(e) => {
          pointerInteracting.current = e.clientX;
          updatePointerInteraction(e.clientX);
        }}
        onPointerUp={() => updatePointerInteraction(null)}
        onPointerOut={() => updatePointerInteraction(null)}
        onMouseMove={(e) => updateMovement(e.clientX)}
        onTouchMove={(e) =>
          e.touches[0] && updateMovement(e.touches[0].clientX)
        }
      />
    </div>
  );
 }
--- a/src/components/ui/Globe2.tsx
+++ b/src/components/ui/Globe2.tsx
@@ -0,0 +1,47 @@
 import { useEffect, useRef } from 'react'
 import createGlobe from 'cobe'
 export function Globe({ className }: { className?: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  useEffect(() => {
    let phi = 0
    if (!canvasRef.current) return
    const globe = createGlobe(canvasRef.current, {
      devicePixelRatio: 2,
      width: 600 * 2,
      height: 600 * 2,
      phi: 0,
      theta: 0,
      dark: 0,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [0.3, 0.3, 0.3],
      markerColor: [0.1, 0.8, 1],
      glowColor: [1, 1, 1],
      markers: [
        { location: [37.7595, -122.4367], size: 0.03 },
        { location: [40.7128, -74.006], size: 0.1 },
      ],
      onRender: (state) => {
        state.phi = phi
        phi += 0.01
      },
    })
    return () => {
      globe.destroy()
    }
  }, [])
  return (
    <canvas
      ref={canvasRef}
      className={className}
      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
    />
  )
 }
--- a/src/components/ui/HalfGlobe.tsx
+++ b/src/components/ui/HalfGlobe.tsx
@@ -0,0 +1,89 @@
 "use client";
 import { Canvas, useFrame } from "@react-three/fiber";
 import { Line, OrbitControls, useTexture } from "@react-three/drei";
 import { useMemo, useRef } from "react";
 type RotatableGroup = {
  rotation: { y: number };
 };
 function Globe() {
  const groupRef = useRef<RotatableGroup | null>(null);
  const cloudTexture = useTexture("/images/cloud1.png");
  // Rotate the globe slowly
  useFrame(() => {
    if (groupRef.current) {
      groupRef.current.rotation.y += 0.002;
    }
  });
  // Coordinates for markers (half-globe)
  const markers = [
    [0, 1, 0],
    [0.7, 0.5, 0.2],
    [-0.5, 0.4, 0.5],
    [0.4, 0.3, -0.7],
    [-0.6, -0.1, 0.3],
    [0.3, -0.2, 0.8],
  ];
  const arcPoints = useMemo(() => {
    const radius = 2.5;
    const verticalRadius = radius / 2;
    const segments = 120;
    return Array.from({ length: 8 }, () => {
      const points: number[] = [];
      for (let i = 0; i < segments; i++) {
        const t = (i / (segments - 1)) * Math.PI;
        const x = Math.cos(t) * radius;
        const z = Math.sin(t) * verticalRadius;
        const y = Math.sin(x / radius) * 0.5;
        points.push(x, y, z);
      }
      return points;
    });
  }, []);
  return (
    <group ref={groupRef}>
      {/* Cyan arcs */}
      {arcPoints.map((points, i) => (
        <Line
          key={i}
          points={points}
          color="#00e5ff"
          lineWidth={1}
          transparent
          opacity={0.5}
        />
      ))}
      {/* Cloud markers */}
      {markers.map(([x, y, z], i) => (
        <mesh key={i} position={[x * 2.5, y * 2.5, z * 2.5]}>
          <planeGeometry args={[0.3, 0.3]} />
          <meshBasicMaterial
            map={cloudTexture}
            transparent
            opacity={1}
            side={2 /* DoubleSide */}
          />
        </mesh>
      ))}
    </group>
  );
 }
 export function HalfGlobe() {
  return (
    <div className="w-full h-[500px] bg-white flex items-center justify-center">
      <Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
        <ambientLight intensity={0.8} />
        <Globe />
        <OrbitControls enableZoom={false} enablePan={false} />
      </Canvas>
    </div>
  );
 }
--- a/src/components/ui/ScrollDown.tsx
+++ b/src/components/ui/ScrollDown.tsx
@@ -0,0 +1,22 @@
 'use client'
 import { ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
 import { useScroll } from '@/hooks/useScroll'
 export function ScrollDown() {
  const { isAtBottom, scrollToNext } = useScroll()
  if (isAtBottom) {
    return null
  }
  return (
    <button
      onClick={scrollToNext}
      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 rounded-full bg-black/20 p-2 text-2xl font-medium text-white backdrop-blur-sm lg:text-3xl animate-blink"
    >
      <span>scroll</span>
      <ChevronDoubleDownIcon className="h-6 w-6" />
    </button>
  )
 }
--- a/src/components/ui/ScrollUp.tsx
+++ b/src/components/ui/ScrollUp.tsx
@@ -0,0 +1,22 @@
 'use client'
 import { ChevronDoubleUpIcon } from '@heroicons/react/24/outline'
 import { useScroll } from '@/hooks/useScroll'
 export function ScrollUp() {
  const { isAtBottom, scrollToTop } = useScroll()
  if (!isAtBottom) {
    return null
  }
  return (
    <button
      onClick={scrollToTop}
      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 rounded-full bg-white/20 p-2 text-2xl font-medium text-[#1c1c49] backdrop-blur-sm lg:text-3xl animate-blink"
    >
      <span>top</span>
      <ChevronDoubleUpIcon className="h-6 w-6" />
    </button>
  )
 }
--- a/src/components/ui/StackedCubes.tsx
+++ b/src/components/ui/StackedCubes.tsx
@@ -0,0 +1,95 @@
 "use client";
 import { useState } from "react";
 import { motion } from "framer-motion";
 import { Cube } from "@/components/ui/Cube"
 const stackData = [
  {
    id: "agent",
    title: "Agent Layer",
    descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
    description:
      "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: "network",
    title: "Network Layer",
    descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
    description:
      "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: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
    description:
      "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",
  },
 ];
 export function StackedCubes() {
  const [active, setActive] = useState<string | null>("agent");
  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
  const handleCubeClick = (id: string) => {
    setSelectedForMobile(prev => (prev === id ? null : id));
  };
  const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
  return (
    <div className="flex flex-col items-center">
    <div 
      className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
      onMouseLeave={() => setActive("agent")}
    >
      <motion.div
        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
        animate={{ y: ["-8px", "8px"] }}
        transition={{
          duration: 4,
          repeat: Infinity,
          repeatType: "reverse",
          ease: "easeInOut",
        }}
      >
        {stackData.map((layer, index) => (
          <div
            key={layer.id}
            className="absolute"
            style={{
              top: `calc(${index * 30}% - ${index * 10}px)`,
              zIndex: active === layer.id ? 20 : 10 - index,
            }}
          >
            <Cube
              title={layer.title}
              descriptionTitle={layer.descriptionTitle}
              description={layer.description}
              isActive={active === layer.id}
              index={index}
              onHover={() => setActive(layer.id)}
              onLeave={() => {}}
              onClick={() => handleCubeClick(layer.id)}
            />
          </div>
        ))}
      </motion.div>
    </div>
    {selectedMobileLayer && (
      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-800/50 rounded-lg">
        <h4 className="text-white text-lg font-semibold mb-2 text-center">
          {selectedMobileLayer.descriptionTitle}
        </h4>
        <p className="text-gray-300 text-sm leading-relaxed text-center">
          {selectedMobileLayer.description}
        </p>
      </div>
    )}
    </div>
  );
 }
--- a/src/components/ui/StackedCubesLight.tsx
+++ b/src/components/ui/StackedCubesLight.tsx
@@ -0,0 +1,95 @@
 "use client";
 import { useState } from "react";
 import { motion } from "framer-motion";
 import { CubeLight } from "@/components/ui/CubeLight"
 const stackData = [
  {
    id: "agent",
    title: "Agent Layer",
    descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
    description:
      "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: "network",
    title: "Network Layer",
    descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
    description:
      "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: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
    description:
      "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",
  },
 ];
 export function StackedCubesLight() {
  const [active, setActive] = useState<string | null>("agent");
  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
  const handleCubeClick = (id: string) => {
    setSelectedForMobile(prev => (prev === id ? null : id));
  };
  const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
  return (
    <div className="flex flex-col items-center">
    <div 
      className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
      onMouseLeave={() => setActive("agent")}
    >
      <motion.div
        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
        animate={{ y: ["-8px", "8px"] }}
        transition={{
          duration: 4,
          repeat: Infinity,
          repeatType: "reverse",
          ease: "easeInOut",
        }}
      >
        {stackData.map((layer, index) => (
          <div
            key={layer.id}
            className="absolute"
            style={{
              top: `calc(${index * 30}% - ${index * 10}px)`,
              zIndex: active === layer.id ? 20 : 10 - index,
            }}
          >
            <CubeLight
              title={layer.title}
              descriptionTitle={layer.descriptionTitle}
              description={layer.description}
              isActive={active === layer.id}
              index={index}
              onHover={() => setActive(layer.id)}
              onLeave={() => {}}
              onClick={() => handleCubeClick(layer.id)}
            />
          </div>
        ))}
      </motion.div>
    </div>
    {selectedMobileLayer && (
      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-200/50 rounded-lg">
        <h4 className="text-black text-lg font-semibold mb-2 text-center">
          {selectedMobileLayer.descriptionTitle}
        </h4>
        <p className="text-gray-700 text-sm leading-relaxed text-center">
          {selectedMobileLayer.description}
        </p>
      </div>
    )}
    </div>
  );
 }
--- a/src/components/ui/aurora-background.tsx
+++ b/src/components/ui/aurora-background.tsx
@@ -0,0 +1,64 @@
 "use client";
 import { cn } from "@/lib/utils";
 import type { CSSProperties, HTMLProps, ReactNode } from "react";
 interface AuroraBackgroundProps extends HTMLProps<HTMLDivElement> {
  children: ReactNode;
  showRadialGradient?: boolean;
 }
 export const AuroraBackground = ({
  className,
  children,
  showRadialGradient = true,
  ...props
 }: AuroraBackgroundProps) => {
  return (
    <main>
      <div
                className={cn(
          "transition-bg relative flex h-[110vh] flex-col items-center justify-center bg-cover bg-center",
          className
        )}
        style={{
          backgroundImage: "url('/images/mchip.webp')",
        }}
        {...props}
      >
        <div
          className="absolute inset-0 overflow-hidden"
          style={
            {
              "--aurora":
                "repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)",
              "--dark-gradient":
                "repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
              "--white-gradient":
                "repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
              "--blue-300": "#93c5fd",
              "--blue-400": "#60a5fa",
              "--blue-500": "#3b82f6",
              "--indigo-300": "#a5b4fc",
              "--violet-200": "#ddd6fe",
              "--black": "#000",
              "--white": "#fff",
              "--transparent": "transparent",
            } as CSSProperties
          }
        >
          <div
            //   I'm sorry but this is what peak developer performance looks like // trigger warning
            className={cn(
              `after:animate-aurora pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
              showRadialGradient &&
                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
            )}
          ></div>
        </div>
        {children}
      </div>
    </main>
  );
 };
--- a/src/components/ui/bento-grid.tsx
+++ b/src/components/ui/bento-grid.tsx
@@ -0,0 +1,76 @@
 import { cn } from "@/lib/utils";
 import { CT, CP } from "@/components/Texts";
 import React from 'react';
 import { motion } from 'framer-motion';
 export const BentoGrid = ({
  className,
  children,
 }: {
  className?: string;
  children?: React.ReactNode;
 }) => {
  return (
    <div
      className={cn(
        "mx-4 grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-3",
        className,
      )}
    >
      {children}
    </div>
  );
 };
 interface BentoGridItemProps {
  className?: string;
  title?: string | React.ReactNode;
  subtitle?: string | React.ReactNode;
  description?: string | React.ReactNode;
  img?: string;
  video?: string;
  rowHeight?: string;
 }
 export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
  ({ className, title, subtitle, description, img, video, rowHeight }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
          rowHeight ? rowHeight : "h-full",
          className
        )}
      >
                <div className="relative w-full h-[65%] min-h-[6rem] bg-transparent overflow-hidden">
          {video ? (
            <video
              src={video}
              autoPlay
              loop
              muted
              playsInline
              className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
            />
          ) : img ? (
            <img
              src={img}
              alt={title as string}
              className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
            />
          ) : null}
        </div>
        <div className="p-4 transition bg-white/5 hover:bg-white/7 backdrop-blur-md duration-200 group-hover/bento:translate-x-2 ">
          <CT>{title}</CT>
          <CP className="font-medium">{subtitle}</CP>
          <CP className="mt-2">{description}</CP>
        </div>
      </div>
    );
  }
 );
 BentoGridItem.displayName = "BentoGridItem";
 export const MotionBentoGridItem = motion(BentoGridItem);
--- a/src/components/ui/dotted-glow-background.tsx
+++ b/src/components/ui/dotted-glow-background.tsx
@@ -0,0 +1,304 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 type DottedGlowBackgroundProps = {
  className?: string;
  /** distance between dot centers in pixels */
  gap?: number;
  /** base radius of each dot in CSS px */
  radius?: number;
  /** dot color (will pulse by alpha) */
  color?: string;
  /** optional dot color for dark mode */
  darkColor?: string;
  /** shadow/glow color for bright dots */
  glowColor?: string;
  /** optional glow color for dark mode */
  darkGlowColor?: string;
  /** optional CSS variable name for light dot color (e.g. --color-zinc-900) */
  colorLightVar?: string;
  /** optional CSS variable name for dark dot color (e.g. --color-zinc-100) */
  colorDarkVar?: string;
  /** optional CSS variable name for light glow color */
  glowColorLightVar?: string;
  /** optional CSS variable name for dark glow color */
  glowColorDarkVar?: string;
  /** global opacity for the whole layer */
  opacity?: number;
  /** background radial fade opacity (0 = transparent background) */
  backgroundOpacity?: number;
  /** minimum per-dot speed in rad/s */
  speedMin?: number;
  /** maximum per-dot speed in rad/s */
  speedMax?: number;
  /** global speed multiplier for all dots */
  speedScale?: number;
 };
 /**
 * Canvas-based dotted background that randomly glows and dims.
 * - Uses a stable grid of dots.
 * - Each dot gets its own phase + speed producing organic shimmering.
 * - Handles high-DPI and resizes via ResizeObserver.
 */
 export function DottedGlowBackground({
  className,
  gap = 12,
  radius = 2,
  color = "rgba(0,0,0,0.7)",
  darkColor,
  glowColor = "rgba(0, 170, 255, 0.85)",
  darkGlowColor,
  colorLightVar,
  colorDarkVar,
  glowColorLightVar,
  glowColorDarkVar,
  opacity = 0.6,
  backgroundOpacity = 0,
  speedMin = 0.4,
  speedMax = 1.3,
  speedScale = 1,
 }: DottedGlowBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [resolvedColor, setResolvedColor] = useState<string>(color);
  const [resolvedGlowColor, setResolvedGlowColor] = useState<string>(glowColor);
  // Resolve CSS variable value from the container or root
  const resolveCssVariable = (
    el: Element,
    variableName?: string,
  ): string | null => {
    if (!variableName) return null;
    const normalized = variableName.startsWith("--")
      ? variableName
      : `--${variableName}`;
    const fromEl = getComputedStyle(el as Element)
      .getPropertyValue(normalized)
      .trim();
    if (fromEl) return fromEl;
    const root = document.documentElement;
    const fromRoot = getComputedStyle(root).getPropertyValue(normalized).trim();
    return fromRoot || null;
  };
  const detectDarkMode = (): boolean => {
    const root = document.documentElement;
    if (root.classList.contains("dark")) return true;
    if (root.classList.contains("light")) return false;
    return (
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches
    );
  };
  // Keep resolved colors in sync with theme changes and prop updates
  useEffect(() => {
    const container = containerRef.current ?? document.documentElement;
    const compute = () => {
      const isDark = detectDarkMode();
      let nextColor: string = color;
      let nextGlow: string = glowColor;
      if (isDark) {
        const varDot = resolveCssVariable(container, colorDarkVar);
        const varGlow = resolveCssVariable(container, glowColorDarkVar);
        nextColor = varDot || darkColor || nextColor;
        nextGlow = varGlow || darkGlowColor || nextGlow;
      } else {
        const varDot = resolveCssVariable(container, colorLightVar);
        const varGlow = resolveCssVariable(container, glowColorLightVar);
        nextColor = varDot || nextColor;
        nextGlow = varGlow || nextGlow;
      }
      setResolvedColor(nextColor);
      setResolvedGlowColor(nextGlow);
    };
    compute();
    const mql = window.matchMedia
      ? window.matchMedia("(prefers-color-scheme: dark)")
      : null;
    const handleMql = () => compute();
    mql?.addEventListener?.("change", handleMql);
    const mo = new MutationObserver(() => compute());
    mo.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class", "style"],
    });
    return () => {
      mql?.removeEventListener?.("change", handleMql);
      mo.disconnect();
    };
  }, [
    color,
    darkColor,
    glowColor,
    darkGlowColor,
    colorLightVar,
    colorDarkVar,
    glowColorLightVar,
    glowColorDarkVar,
  ]);
  useEffect(() => {
    const el = canvasRef.current;
    const container = containerRef.current;
    if (!el || !container) return;
    const ctx = el.getContext("2d");
    if (!ctx) return;
    let raf = 0;
    let stopped = false;
    const dpr = Math.max(1, window.devicePixelRatio || 1);
    const resize = () => {
      const { width, height } = container.getBoundingClientRect();
      el.width = Math.max(1, Math.floor(width * dpr));
      el.height = Math.max(1, Math.floor(height * dpr));
      el.style.width = `${Math.floor(width)}px`;
      el.style.height = `${Math.floor(height)}px`;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    const ro = new ResizeObserver(resize);
    ro.observe(container);
    resize();
    // Precompute dot metadata for a medium-sized grid and regenerate on resize
    let dots: { x: number; y: number; phase: number; speed: number }[] = [];
    const regenDots = () => {
      dots = [];
      const { width, height } = container.getBoundingClientRect();
      const cols = Math.ceil(width / gap) + 2;
      const rows = Math.ceil(height / gap) + 2;
      const min = Math.min(speedMin, speedMax);
      const max = Math.max(speedMin, speedMax);
      for (let i = -1; i < cols; i++) {
        for (let j = -1; j < rows; j++) {
          const x = i * gap + (j % 2 === 0 ? 0 : gap * 0.5); // offset every other row
          const y = j * gap;
          // Randomize phase and speed slightly per dot
          const phase = Math.random() * Math.PI * 2;
          const span = Math.max(max - min, 0);
          const speed = min + Math.random() * span; // configurable rad/s
          dots.push({ x, y, phase, speed });
        }
      }
    };
    const regenThrottled = () => {
      regenDots();
    };
    regenDots();
    const draw = (now: number) => {
      if (stopped) return;
      const { width, height } = container.getBoundingClientRect();
      ctx.clearRect(0, 0, el.width, el.height);
      ctx.globalAlpha = opacity;
      // optional subtle background fade for depth (defaults to 0 = transparent)
      if (backgroundOpacity > 0) {
        const grad = ctx.createRadialGradient(
          width * 0.5,
          height * 0.4,
          Math.min(width, height) * 0.1,
          width * 0.5,
          height * 0.5,
          Math.max(width, height) * 0.7,
        );
        grad.addColorStop(0, "rgba(0,0,0,0)");
        grad.addColorStop(
          1,
          `rgba(0,0,0,${Math.min(Math.max(backgroundOpacity, 0), 1)})`,
        );
        ctx.fillStyle = grad as unknown as CanvasGradient;
        ctx.fillRect(0, 0, width, height);
      }
      // animate dots
      ctx.save();
      ctx.fillStyle = resolvedColor;
      const time = (now / 1000) * Math.max(speedScale, 0);
      for (let i = 0; i < dots.length; i++) {
        const d = dots[i];
        // Linear triangle wave 0..1..0 for linear glow/dim
        const mod = (time * d.speed + d.phase) % 2;
        const lin = mod < 1 ? mod : 2 - mod; // 0..1..0
        const a = 0.25 + 0.55 * lin; // 0.25..0.8 linearly
        // draw glow when bright
        if (a > 0.6) {
          const glow = (a - 0.6) / 0.4; // 0..1
          ctx.shadowColor = resolvedGlowColor;
          ctx.shadowBlur = 6 * glow;
        } else {
          ctx.shadowColor = "transparent";
          ctx.shadowBlur = 0;
        }
        ctx.globalAlpha = a * opacity;
        ctx.beginPath();
        ctx.arc(d.x, d.y, radius, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.restore();
      raf = requestAnimationFrame(draw);
    };
    const handleResize = () => {
      resize();
      regenThrottled();
    };
    window.addEventListener("resize", handleResize);
    raf = requestAnimationFrame(draw);
    return () => {
      stopped = true;
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", handleResize);
      ro.disconnect();
    };
  }, [
    gap,
    radius,
    resolvedColor,
    resolvedGlowColor,
    opacity,
    backgroundOpacity,
    speedMin,
    speedMax,
    speedScale,
  ]);
  return (
    <div
      ref={containerRef}
      className={className}
      style={{ position: "absolute", inset: 0 }}
    >
      <canvas
        ref={canvasRef}
        style={{ display: "block", width: "100%", height: "100%" }}
      />
    </div>
  );
 }
 export default DottedGlowBackground;
--- a/src/components/ui/evervault-card.tsx
+++ b/src/components/ui/evervault-card.tsx
@@ -0,0 +1,106 @@
 "use client";
 import { useMotionValue } from "motion/react";
 import React, { useState, useEffect } from "react";
 import { useMotionTemplate, motion } from "motion/react";
 import { cn } from "@/lib/utils";
 export const EvervaultCard = ({
  children,
  className,
 }: {
  children?: React.ReactNode;
  className?: string;
 }) => {
  let mouseX = useMotionValue(0);
  let mouseY = useMotionValue(0);
  const [randomString, setRandomString] = useState("");
  useEffect(() => {
    let str = generateRandomString(1500);
    setRandomString(str);
  }, []);
  function onMouseMove({ currentTarget, clientX, clientY }: any) {
    let { left, top } = currentTarget.getBoundingClientRect();
    mouseX.set(clientX - left);
    mouseY.set(clientY - top);
    const str = generateRandomString(1500);
    setRandomString(str);
  }
  return (
    <div
      className={cn(
        "p-0.5  bg-transparent aspect-square  flex items-center justify-center w-full h-full relative",
        className
      )}
    >
      <div
        onMouseMove={onMouseMove}
        className="group/card rounded-3xl w-full relative overflow-hidden bg-transparent flex items-center justify-center h-full"
      >
        <CardPattern
          mouseX={mouseX}
          mouseY={mouseY}
          randomString={randomString}
        />
        <div className="relative z-10 flex items-center justify-center">
          <div className="relative p-4">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
 };
 export function CardPattern({ mouseX, mouseY, randomString }: any) {
  let maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`;
  let style = { maskImage, WebkitMaskImage: maskImage };
  return (
    <div className="pointer-events-none">
      <div className="absolute inset-0 rounded-2xl  [mask-image:linear-gradient(white,transparent)] group-hover/card:opacity-50"></div>
      <motion.div
        className="absolute inset-0 rounded-2xl bg-gradient-to-r from-green-500 to-blue-700 opacity-0  group-hover/card:opacity-100 backdrop-blur-xl transition duration-500"
        style={style}
      />
      <motion.div
        className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay  group-hover/card:opacity-100"
        style={style}
      >
        <p className="absolute inset-x-0 text-xs h-full break-words whitespace-pre-wrap text-white font-mono font-bold transition duration-500">
          {randomString}
        </p>
      </motion.div>
    </div>
  );
 }
 const characters =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 export const generateRandomString = (length: number) => {
  let result = "";
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
 };
 export const Icon = ({ className, ...rest }: any) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth="1.5"
      stroke="currentColor"
      className={className}
      {...rest}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
    </svg>
  );
 };
--- a/src/components/ui/floating-navbar.tsx
+++ b/src/components/ui/floating-navbar.tsx
@@ -0,0 +1,90 @@
 "use client";
 import { useState } from "react";
 import {
  motion,
  AnimatePresence,
  useScroll,
  useMotionValueEvent,
 } from "motion/react";
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { Button } from "../Button";
 export const FloatingNav = ({
  navItems,
  className,
 }: {
  navItems: {
    name: string;
    link: string;
    icon?: JSX.Element;
  }[];
  className?: string;
 }) => {
  const { scrollYProgress } = useScroll();
  const [visible, setVisible] = useState(true);
  useMotionValueEvent(scrollYProgress, "change", (current) => {
    if (typeof current === "number") {
      const previous = scrollYProgress.getPrevious();
      // Check if previous is a number to avoid errors
      if (typeof previous === "number" && current > previous) {
        setVisible(false); // Scrolling down
      } else {
        setVisible(true); // Scrolling up or at the top
      }
    }
  });
  return (
    <AnimatePresence mode="wait">
      <motion.div
        initial={{
          opacity: 1,
          y: -100,
        }}
        animate={{
          y: visible ? 0 : -100,
          opacity: visible ? 1 : 0,
        }}
        transition={{
          duration: 0.2,
        }}
        className={cn(
          "flex max-w-fit  fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-xl dark:bg-black bg-gray-700/50 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-[5000] pr-4 pl-8 py-2  items-center justify-center space-x-12",
          className
        )}
      >
        {navItems.map((navItem, idx: number) => (
          <Link
            key={`link=${idx}`}
            to={navItem.link}
            className={cn(
              "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-200 dark:hover:text-neutral-300 hover:text-cyan-500"
            )}
          >
            <span className="block sm:hidden">{navItem.icon}</span>
            <span className="hidden sm:block text-sm">{navItem.name}</span>
          </Link>
        ))}
        <div className="flex items-center gap-6">
          <a
            href="https://threefold.info/mycelium_network/docs/"
            target="_blank"
            rel="noopener noreferrer"
            className={cn(
              "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-200 dark:hover:text-neutral-300 hover:text-cyan-500"
            )}
          >
            <span className="hidden sm:block text-sm">Docs</span>
          </a>
          <Button to="/download" variant="solid" color="cyan">
            Get Mycelium Connector
          </Button>
        </div>
      </motion.div>
    </AnimatePresence>
  );
 };
--- a/src/components/ui/glowing-stars.tsx
+++ b/src/components/ui/glowing-stars.tsx
@@ -0,0 +1,158 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { cn } from "@/lib/utils";
 export const GlowingStarsBackgroundCard = ({
  className,
  children,
 }: {
  className?: string;
  children?: React.ReactNode;
 }) => {
  const [mouseEnter, setMouseEnter] = useState(false);
  return (
    <div
      onMouseEnter={() => {
        setMouseEnter(true);
      }}
      onMouseLeave={() => {
        setMouseEnter(false);
      }}
      className={cn(
        "bg-[linear-gradient(110deg,#333_0.6%,#222)] p-4 max-w-md max-h-[20rem] h-full w-full rounded-xl border border-[#eaeaea] dark:border-neutral-600",
        className
      )}
    >
      <div className="flex justify-center items-center">
        <Illustration mouseEnter={mouseEnter} />
      </div>
      <div className="px-2 pb-6">{children}</div>
    </div>
  );
 };
 export const GlowingStarsDescription = ({
  className,
  children,
 }: {
  className?: string;
  children?: React.ReactNode;
 }) => {
  return (
    <p className={cn("text-base text-white max-w-[16rem]", className)}>
      {children}
    </p>
  );
 };
 export const GlowingStarsTitle = ({
  className,
  children,
 }: {
  className?: string;
  children?: React.ReactNode;
 }) => {
  return (
    <h2 className={cn("font-bold text-2xl text-[#eaeaea]", className)}>
      {children}
    </h2>
  );
 };
 export const Illustration = ({ mouseEnter }: { mouseEnter: boolean }) => {
  const stars = 108;
  const columns = 18;
  const [glowingStars, setGlowingStars] = useState<number[]>([]);
  const highlightedStars = useRef<number[]>([]);
  useEffect(() => {
    const interval = setInterval(() => {
      highlightedStars.current = Array.from({ length: 5 }, () =>
        Math.floor(Math.random() * stars)
      );
      setGlowingStars([...highlightedStars.current]);
    }, 3000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div
      className="h-48 p-1 w-full"
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap: `1px`,
      }}
    >
      {[...Array(stars)].map((_, starIdx) => {
        const isGlowing = glowingStars.includes(starIdx);
        const delay = (starIdx % 10) * 0.1;
        const staticDelay = starIdx * 0.01;
        return (
          <div
            key={`matrix-col-${starIdx}}`}
            className="relative flex items-center justify-center"
          >
            <Star
              isGlowing={mouseEnter ? true : isGlowing}
              delay={mouseEnter ? staticDelay : delay}
            />
            {mouseEnter && <Glow delay={staticDelay} />}
            <AnimatePresence mode="wait">
              {isGlowing && <Glow delay={delay} />}
            </AnimatePresence>
          </div>
        );
      })}
    </div>
  );
 };
 const Star = ({ isGlowing, delay }: { isGlowing: boolean; delay: number }) => {
  return (
    <motion.div
      key={delay}
      initial={{
        scale: 1,
      }}
      animate={{
        scale: isGlowing ? [1, 1.2, 2.5, 2.2, 1.5] : 1,
        background: isGlowing ? "#fff" : "#666",
      }}
      transition={{
        duration: 2,
        ease: "easeInOut",
        delay: delay,
      }}
      className={cn("bg-[#666] h-[1px] w-[1px] rounded-full relative z-20")}
    ></motion.div>
  );
 };
 const Glow = ({ delay }: { delay: number }) => {
  return (
    <motion.div
      initial={{
        opacity: 0,
      }}
      animate={{
        opacity: 1,
      }}
      transition={{
        duration: 2,
        ease: "easeInOut",
        delay: delay,
      }}
      exit={{
        opacity: 0,
      }}
      className="absolute  left-1/2 -translate-x-1/2 z-10 h-[4px] w-[4px] rounded-full bg-blue-500 blur-[1px] shadow-2xl shadow-blue-400"
    />
  );
 };
--- a/src/components/ui/lamp.tsx
+++ b/src/components/ui/lamp.tsx
@@ -0,0 +1,104 @@
 "use client";
 import React from "react";
 import { motion } from "motion/react";
 import { cn } from "@/lib/utils";
 export default function LampDemo() {
  return (
    <LampContainer>
      <motion.h1
        initial={{ opacity: 0.5, y: 100 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.3,
          duration: 0.8,
          ease: "easeInOut",
        }}
        className="mt-8 bg-gradient-to-br from-gray-300 to-gray-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
      >
        Build lamps <br /> the right way
      </motion.h1>
    </LampContainer>
  );
 }
 export const LampContainer = ({
  children,
  className,
 }: {
  children: React.ReactNode;
  className?: string;
 }) => {
  return (
    <div
      className={cn(
        "relative flex h-screen flex-col items-center justify-start pt-32 overflow-hidden bg-gray-950 w-full z-0",
        className
      )}
    >
      <div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
        <motion.div
          initial={{ opacity: 0.5, width: "15rem" }}
          whileInView={{ opacity: 1, width: "30rem" }}
          transition={{
            delay: 0.5,
            duration: 1.0,
            ease: "easeInOut",
          }}
          style={{
            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
          }}
          className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
        >
          <div className="absolute  w-[100%] left-0 bg-gray-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
          <div className="absolute  w-40 h-[100%] left-0 bg-gray-950  bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
        </motion.div>
        <motion.div
          initial={{ opacity: 0.5, width: "15rem" }}
          whileInView={{ opacity: 1, width: "30rem" }}
          transition={{
            delay: 0.3,
            duration: 0.8,
            ease: "easeInOut",
          }}
          style={{
            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
          }}
          className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]"
        >
          <div className="absolute  w-40 h-[100%] right-0 bg-gray-950  bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
          <div className="absolute  w-[100%] right-0 bg-gray-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
        </motion.div>
        <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-gray-950 blur-2xl"></div>
        <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
        <div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"></div>
        <motion.div
          initial={{ width: "8rem" }}
          whileInView={{ width: "16rem" }}
          transition={{
            delay: 0.3,
            duration: 0.8,
            ease: "easeInOut",
          }}
          className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl"
        ></motion.div>
        <motion.div
          initial={{ width: "15rem" }}
          whileInView={{ width: "30rem" }}
          transition={{
            delay: 0.3,
            duration: 0.8,
            ease: "easeInOut",
          }}
          className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-cyan-400 "
        ></motion.div>
        <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-gray-950 "></div>
      </div>
      <div className="relative z-50 flex -translate-y-32 flex-col items-center px-5">
        {children}
      </div>
    </div>
  );
 };
--- a/src/components/ui/layout-text-flip.tsx
+++ b/src/components/ui/layout-text-flip.tsx
@@ -0,0 +1,58 @@
 "use client";
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/lib/utils";
 export const LayoutTextFlip = ({
  text = "Build Amazing",
  words = ["Landing Pages", "Component Blocks", "Page Sections", "3D Shaders"],
  duration = 1500,
 }: {
  text: string;
  words: string[];
  duration?: number;
 }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
    }, duration);
    return () => clearInterval(interval);
  }, []);
  return (
    <>
      <motion.span
        layoutId="subtext"
        className="text-2xl font-bold tracking-tight drop-shadow-lg md:text-4xl"
      >
        {text}
      </motion.span>
      <motion.span
        layout
        className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
      >
        <AnimatePresence mode="popLayout">
          <motion.span
            key={currentIndex}
            initial={{ y: -40, filter: "blur(10px)" }}
            animate={{
              y: 0,
              filter: "blur(0px)",
            }}
            exit={{ y: 50, filter: "blur(10px)", opacity: 0 }}
            transition={{
              duration: 0.5,
            }}
            className={cn("inline-block whitespace-nowrap")}
          >
            {words[currentIndex]}
          </motion.span>
        </AnimatePresence>
      </motion.span>
    </>
  );
 };
--- a/src/components/ui/pointer-highlight.tsx
+++ b/src/components/ui/pointer-highlight.tsx
@@ -0,0 +1,119 @@
 "use client";
 import { cn } from "@/lib/utils";
 import { motion } from "motion/react";
 import { useRef, useEffect, useState } from "react";
 export function PointerHighlight({
  children,
  rectangleClassName,
  pointerClassName,
  containerClassName,
 }: {
  children: React.ReactNode;
  rectangleClassName?: string;
  pointerClassName?: string;
  containerClassName?: string;
 }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  useEffect(() => {
    if (containerRef.current) {
      const { width, height } = containerRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        setDimensions({ width, height });
      }
    });
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }
    return () => {
      if (containerRef.current) {
        resizeObserver.unobserve(containerRef.current);
      }
    };
  }, []);
  return (
    <div
      className={cn("relative w-fit", containerClassName)}
      ref={containerRef}
    >
      {children}
      {dimensions.width > 0 && dimensions.height > 0 && (
        <motion.div
          className="pointer-events-none absolute inset-0 z-0"
          initial={{ opacity: 0, scale: 0.95, originX: 0, originY: 0 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
        >
          <motion.div
            className={cn(
              "absolute inset-0 border border-neutral-800 dark:border-neutral-200",
              rectangleClassName,
            )}
            initial={{
              width: 0,
              height: 0,
            }}
            whileInView={{
              width: dimensions.width,
              height: dimensions.height,
            }}
            transition={{
              duration: 1,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="pointer-events-none absolute"
            initial={{ opacity: 0 }}
            whileInView={{
              opacity: 1,
              x: dimensions.width + 4,
              y: dimensions.height + 4,
            }}
            style={{
              rotate: -90,
            }}
            transition={{
              opacity: { duration: 0.1, ease: "easeInOut" },
              duration: 1,
              ease: "easeInOut",
            }}
          >
            <Pointer
              className={cn("h-5 w-5 text-blue-500", pointerClassName)}
            />
          </motion.div>
        </motion.div>
      )}
    </div>
  );
 }
 const Pointer = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="1"
      strokeLinecap="round"
      strokeLinejoin="round"
      viewBox="0 0 16 16"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"></path>
    </svg>
  );
 };
--- a/src/components/ui/world-map.tsx
+++ b/src/components/ui/world-map.tsx
@@ -0,0 +1,166 @@
 "use client";
 import { useRef } from "react";
 import { motion } from "motion/react";
 import DottedMap from "dotted-map";
 interface MapProps {
  dots?: Array<{
    start: { lat: number; lng: number; label?: string };
    end: { lat: number; lng: number; label?: string };
  }>;
  lineColor?: string;
 }
 export default function WorldMap({
  dots = [],
  lineColor = "#06b6d4",
 }: MapProps) {
  const svgRef = useRef<SVGSVGElement>(null);
  const map = new DottedMap({ height: 100, grid: "diagonal" });
  const svgMap = map.getSVG({
    radius: 0.22,
    color: "#FFFFFF40", // Hardcoded for dark theme
    shape: "circle",
    backgroundColor: "black", // Hardcoded for dark theme
  });
  const projectPoint = (lat: number, lng: number) => {
    const x = (lng + 180) * (800 / 360);
    const y = (90 - lat) * (400 / 180);
    return { x, y };
  };
  const createCurvedPath = (
    start: { x: number; y: number },
    end: { x: number; y: number }
  ) => {
    const midX = (start.x + end.x) / 2;
    const midY = Math.min(start.y, end.y) - 50;
    return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
  };
  return (
    <div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg  relative font-sans">
      <img
        src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
        className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
        alt="world map"
        height="495"
        width="1056"
        draggable={false}
      />
      <svg
        ref={svgRef}
        viewBox="0 0 800 400"
        className="w-full h-full absolute inset-0 pointer-events-none select-none"
      >
        {dots.map((dot, i) => {
          const startPoint = projectPoint(dot.start.lat, dot.start.lng);
          const endPoint = projectPoint(dot.end.lat, dot.end.lng);
          return (
            <g key={`path-group-${i}`}>
              <motion.path
                d={createCurvedPath(startPoint, endPoint)}
                fill="none"
                stroke="url(#path-gradient)"
                strokeWidth="1"
                initial={{
                  pathLength: 0,
                }}
                animate={{
                  pathLength: 1,
                }}
                transition={{
                  duration: 1,
                  delay: 0.5 * i,
                  ease: "easeOut",
                }}
                key={`start-upper-${i}`}
              ></motion.path>
            </g>
          );
        })}
        <defs>
          <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="white" stopOpacity="0" />
            <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
            <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
            <stop offset="100%" stopColor="white" stopOpacity="0" />
          </linearGradient>
        </defs>
        {dots.map((dot, i) => (
          <g key={`points-group-${i}`}>
            <g key={`start-${i}`}>
              <circle
                cx={projectPoint(dot.start.lat, dot.start.lng).x}
                cy={projectPoint(dot.start.lat, dot.start.lng).y}
                r="2"
                fill={lineColor}
              />
              <circle
                cx={projectPoint(dot.start.lat, dot.start.lng).x}
                cy={projectPoint(dot.start.lat, dot.start.lng).y}
                r="2"
                fill={lineColor}
                opacity="0.5"
              >
                <animate
                  attributeName="r"
                  from="2"
                  to="8"
                  dur="1.5s"
                  begin="0s"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="opacity"
                  from="0.5"
                  to="0"
                  dur="1.5s"
                  begin="0s"
                  repeatCount="indefinite"
                />
              </circle>
            </g>
            <g key={`end-${i}`}>
              <circle
                cx={projectPoint(dot.end.lat, dot.end.lng).x}
                cy={projectPoint(dot.end.lat, dot.end.lng).y}
                r="2"
                fill={lineColor}
              />
              <circle
                cx={projectPoint(dot.end.lat, dot.end.lng).x}
                cy={projectPoint(dot.end.lat, dot.end.lng).y}
                r="2"
                fill={lineColor}
                opacity="0.5"
              >
                <animate
                  attributeName="r"
                  from="2"
                  to="8"
                  dur="1.5s"
                  begin="0s"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="opacity"
                  from="0.5"
                  to="0"
                  dur="1.5s"
                  begin="0s"
                  repeatCount="indefinite"
                />
              </circle>
            </g>
          </g>
        ))}
      </svg>
    </div>
  );
 }
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,21 @@
 'use client'
 import { useState, useEffect } from 'react'
 export function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false)
  useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => {
      setMatches(media.matches)
    }
    media.addEventListener('change', listener)
    return () => media.removeEventListener('change', listener)
  }, [matches, query])
  return matches
 }
--- a/src/hooks/useResponsiveCarousel.ts
+++ b/src/hooks/useResponsiveCarousel.ts
@@ -0,0 +1,39 @@
 'use client'
 import { useState, useEffect } from 'react';
 // 🔧 Carousel Config
 const desktopConfig = {
  GAP: 300,
  ROT_Y: 18,
  DEPTH: 210,
  SCALE_DROP: 0.12,
 };
 const mobileConfig = {
  GAP: 110, // Smaller gap for mobile
  ROT_Y: 0,   // Flatter view on mobile
  DEPTH: 150, // Less depth
  SCALE_DROP: 0.1, // Less aggressive scaling
 };
 export const useResponsiveCarousel = () => {
  const [config, setConfig] = useState(desktopConfig);
  useEffect(() => {
    const checkScreenSize = () => {
      if (window.innerWidth < 768) {
        setConfig(mobileConfig);
      } else {
        setConfig(desktopConfig);
      }
    };
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);
  return config;
 };
--- a/src/hooks/useScroll.ts
+++ b/src/hooks/useScroll.ts
@@ -0,0 +1,45 @@
 'use client'
 import { useState, useEffect, useCallback } from 'react'
 export function useScroll() {
  const [isAtBottom, setIsAtBottom] = useState(false)
  const handleScroll = useCallback(() => {
    const footer = document.querySelector('footer')
    if (footer) {
      const footerTop = footer.getBoundingClientRect().top
      setIsAtBottom(footerTop < window.innerHeight)
    }
  }, [])
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    handleScroll() // Initial check
    return () => window.removeEventListener('scroll', handleScroll)
  }, [handleScroll])
  const scrollToNext = () => {
    const sections = Array.from(
      document.querySelectorAll('section[id]')
    ) as HTMLElement[]
    const scrollPosition = window.scrollY + window.innerHeight / 2
    const currentSection = sections.reduce((acc, section) => {
      return section.offsetTop < scrollPosition ? section : acc
    }, sections[0])
    const currentIndex = sections.findIndex((sec) => sec.id === currentSection.id)
    const nextIndex = currentIndex + 1
    if (nextIndex < sections.length) {
      sections[nextIndex].scrollIntoView({ behavior: 'smooth' })
    }
  }
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
  return { isAtBottom, scrollToNext, scrollToTop }
 }
--- a/src/images/cloudlayer.png
+++ b/src/images/cloudlayer.png
--- a/src/images/desktop.png
+++ b/src/images/desktop.png
--- a/src/images/kubernetes.png
+++ b/src/images/kubernetes.png
--- a/src/images/logos/pmyceliumlogo.png
+++ b/src/images/logos/pmyceliumlogo.png
--- a/src/images/phone-frame.svg
+++ b/src/images/phone-frame.svg
@@ -214,7 +214,7 @@
    </filter>
    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
+      <stop stop-color="#FFFFFF" />
      <stop offset="1" stop-color="#E6E6E6" />
    </radialGradient>
    <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Neuton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap');
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Mulish', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx'
+import { clsx, type ClassValue } from "clsx"
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
--- a/src/pages/agents/AgentsHero.tsx
+++ b/src/pages/agents/AgentsHero.tsx
@@ -0,0 +1,125 @@
 'use client'
 import { useId, useState } from 'react'
 import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
 import ContactForm from '../../components/ContactForm'
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
  const id = useId()
  return (
    <div {...props}>
      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-slow"
      >
        <path
          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M513 1025C230.23 1025 1 795.77 1 513"
          stroke={`url(#${id}-gradient-1)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-1`}
            x1="1"
            y1="513"
            x2="1"
            y2="1025"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
      >
        <path
          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M913 513c0 220.914-179.086 400-400 400"
          stroke={`url(#${id}-gradient-2)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-2`}
            x1="913"
            y1="513"
            x2="913"
            y2="913"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  )
 }
 export function AgentsHero() {
  const [isContactOpen, setIsContactOpen] = useState(false)
  return (
    <>
      <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
        <Container>
          <div className="flex flex-col-reverse gap-y-16 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 lg:text-6xl">
                Mycelium Agents
              </h1>
              <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
                Sovereign AI agents, coming soon.
              </h2>
              <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
                Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
              </p>
              <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
                <Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
                  Join the Waitlist
                </Button>
              </div>
            </div>
            <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
              <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
              <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
                <img
                  src="/images/agent_icon.png"
                  alt="Preview of Hero sovereign agent orchestration"
                  className="mx-auto w-full max-w-[520px]"
                  width={1024}
                  height={1024}
                />
              </div>
            </div>
          </div>
        </Container>
      </div>
      <ContactForm
        isOpen={isContactOpen}
        onClose={() => setIsContactOpen(false)}
        title="Join the Waitlist"
        formType="agent_waitlist"
      />
    </>
  )
 }
--- a/src/pages/agents/AgentsPage.tsx
+++ b/src/pages/agents/AgentsPage.tsx
@@ -1,15 +1,25 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { AgentsHero } from './AgentsHero'
 import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
 export default function AgentsPage() {
  return (
    <div>
      <AnimatedSection>
        <AgentsHero />
      </AnimatedSection>
      <AnimatedSection>
        <DeploySection />
      </AnimatedSection>
-      
+
      <AnimatedSection>
        <Companies />
      </AnimatedSection>
      <AnimatedSection>
        <GallerySection />
      </AnimatedSection>
--- a/src/pages/agents/BentoSection.tsx
+++ b/src/pages/agents/BentoSection.tsx
@@ -1,56 +1,64 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P, CT, CP } from '../../components/Texts'
 const items = [
  {
    title: 'FungiStor',
    subtitle: 'Long-Term AI Memory',
    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: '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: '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: '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: 'Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.',
    video: '/videos/deterministic.mp4',
  },
  {
    title: 'Agent Coordination',
    subtitle: 'Sovereign Workflow Management',
    description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.',
    video: '/videos/agent.mp4',
  },
 ]
 export function BentoSection() {
  return (
-    <section className="bg-white py-20 lg:py-32">
+    <section className="bg-black py-20 lg:py-32">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
+          viewport={{ once: true, amount: 0.3 }}
-          transition={{ duration: 0.8 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
-          className="mx-auto max-w-3xl text-center mb-16"
+          className="mx-auto mb-16 max-w-3xl text-center"
        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <Eyebrow color="accent">Components</Eyebrow>
-            Augmented Intelligence Fabric
+          <SectionHeader color="light">
-          </h2>
+            Intelligence Fabric
-          <p className="mt-6 text-lg text-gray-600">
+          </SectionHeader>
-            A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
+          <P className="mt-6" color="lightSecondary">
-          </p>
+            A complete infrastructure for building and deploying sovereign AI agents with enterprise-grade security and performance. Your data never leaves your control.
          </P>
        </motion.div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -59,13 +67,21 @@ export function BentoSection() {
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
+              viewport={{ once: true, amount: 0.2 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
-              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+              className="overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
            >
-              <h3 className="text-xl font-semibold text-gray-900">{item.title}</h3>
+              <video
-              <p className="mt-2 text-sm font-medium text-cyan-500">{item.subtitle}</p>
+                src={item.video}
-              <p className="mt-3 text-sm text-gray-600">{item.description}</p>
+                autoPlay
                loop
                muted
                playsInline
                className="w-full h-40 object-cover mb-4 rounded-lg"
              />
              <p className="text-sm font-medium text-cyan-500">{item.subtitle}</p>
              <CT as="h3" className="mt-2" color="light">{item.title}</CT>
              <CP className="mt-3" color="lightSecondary">{item.description}</CP>
            </motion.div>
          ))}
        </div>
--- a/src/pages/agents/Companies.tsx
+++ b/src/pages/agents/Companies.tsx
@@ -0,0 +1,76 @@
 "use client";
 import { motion } from "framer-motion";
 import { P, Eyebrow } from "@/components/Texts";
 import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
 import Ai21 from '@/components/logos/Ai21';
 import Claude from '@/components/logos/Claude';
 import BaiduCloud from '@/components/logos/BaiduCloud';
 import ByteDance from '@/components/logos/ByteDance';
 import DeepSeek from '@/components/logos/DeepSeek';
 import DeepMind from '@/components/logos/DeepMind';
 import Minimax from '@/components/logos/Minimax';
 import Mistral from '@/components/logos/Mistral';
 import Moonshot from '@/components/logos/Moonshot';
 import TencentCloud from '@/components/logos/TencentCloud';
 import OpenAI from '@/components/logos/OpenAI';
 import XAI from '@/components/logos/XAI';
 const logos = [
  <Ai21 key="ai21" />,
  <Claude key="claude" />,
  <BaiduCloud key="baidu" />,
  <ByteDance key="bytedance" />,
  <DeepSeek key="deepseek" />,
  <DeepMind key="deepmind" />,
  <Minimax key="minimax" />,
  <Mistral key="mistral" />,
  <Moonshot key="moonshot" />,
  <TencentCloud key="tencent" />,
  <OpenAI key="openai" />,
  <XAI key="xai" />,
 ];
 const row1 = logos.slice(0, 6);
 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  py-4 mb-12">
      <div className="relative z-10 mx-auto w-full max-w-6xl p-4">
        {/* Heading */}
        <motion.div
          className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
        >
          <Eyebrow color="accent"></Eyebrow>
          <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>
        {/* Logos grid */}
        <div className="flex flex-col items-center gap-y-6 text-white">
          <InfiniteMovingCards
            items={row1}
            direction="right"
            speed="slow"
          />
          <InfiniteMovingCards
            className=""
            items={row2}
            direction="left"
            speed="slow"
          />
        </div>
      </div>
    </div>
  );
 }
--- a/src/pages/agents/DeploySection.tsx
+++ b/src/pages/agents/DeploySection.tsx
@@ -1,69 +1,95 @@
-import { motion, useInView } from 'framer-motion'
+"use client";
-import { useRef } from 'react'
+
-import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+import { motion } from "framer-motion";
-import { Container } from '../../components/Container'
+import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
 import type { ComponentPropsWithoutRef } from "react";
 type CircleIconProps = ComponentPropsWithoutRef<"svg">;
 const CircleNumber1Icon = (props: CircleIconProps) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.083-.777-1.008-1.16-1.617-.67l-.084.077-2 2-.083.094a1 1 0 000 1.226l.083.094.094.083a1 1 0 001.226 0l.094-.083.293-.293v5.586l.007.117a1 1 0 001.986 0l.007-.117v-8l-.006-.114z" />
  </svg>
 );
 const CircleNumber2Icon = (props: CircleIconProps) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-3l-.117.007a1 1 0 000 1.986l.117.007h3v2h-2l-.15.005a2 2 0 00-1.844 1.838l-.006.157v2l.005.15a2 2 0 001.838 1.844l.157.006h3l.117-.007a1 1 0 000-1.986l-.117-.007h-3v-2h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
  </svg>
 );
 const CircleNumber3Icon = (props: CircleIconProps) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-2l-.15.005a2 2 0 00-1.85 1.995 1 1 0 001.974.23l.02-.113.006-.117h2v2h-2l-.133.007c-1.111.12-1.154 1.73-.128 1.965l.128.021.133.007h2v2h-2l-.007-.117a1 1 0 00-1.993.117 2 2 0 001.85 1.995l.15.005h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a1.988 1.988 0 00-.17-.667l-.075-.152-.019-.032.02-.03a2.01 2.01 0 00.242-.795l.007-.174v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
  </svg>
 );
 const features = [
  {
    name: 'Choose Your Intelligence',
    description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
-    icon: TbCircleNumber1Filled,
+    icon: CircleNumber1Icon,
  },
  {
    name: 'Add Your Knowledge',
    description:
      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
-    icon: TbCircleNumber2Filled,
+    icon: CircleNumber2Icon,
  },
  {
    name: 'Define Your Network',
    description:
      'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
-    icon: TbCircleNumber3Filled,
+    icon: CircleNumber3Icon,
  },
-]
+];
 export function DeploySection() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })
  return (
-    <section ref={ref} className="bg-white py-20 lg:py-32">
+    <section id="benefits" className="relative bg-black px-4 pb-4 pt-12 text-white lg:px-12 lg:pt-24">
-      <Container>
+      <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 }}
+          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
+          viewport={{ once: true, amount: 0.3 }}
-          className="mx-auto max-w-3xl text-center"
+          transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
          className="mx-auto max-w-5xl text-center"
        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <Eyebrow color="accent">Get Started</Eyebrow>
-            Deploy Scalable LLMs and AI Agents in Seconds
+          <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
-          </h2>
+            Deploy Scalable LLMs and AI Agents
-          <p className="mt-6 text-lg text-gray-600">
+          </SectionHeader>
          <P className="mt-6" color="light">
            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
-          </p>
+          </P>
        </motion.div>
        <motion.ul
          initial={{ opacity: 0 }}
-          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
+          viewport={{ once: true, amount: 0.2 }}
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+          transition={{ duration: 0.5, delay: 0.2 }}
          className="mx-auto 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:mt-12 lg:max-w-7xl lg:grid-cols-3"
        >
          {features.map((feature, index) => (
            <motion.li
              key={feature.name}
              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
+              viewport={{ once: true, amount: 0.2 }}
-              className="rounded-2xl border border-gray-200 bg-gray-50 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+              transition={{ duration: 0.45, delay: 0.3 + index * 0.15, ease: "easeOut" }}
              className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
            >
-              <feature.icon className="h-8 w-8 mb-4 text-cyan-500" />
+              <feature.icon className="mb-4 h-8 w-8 text-white" />
-              <h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
+              <CT as="span" className="text-left font-semibold" color="light">
-              <p className="mt-3 text-sm text-gray-600">{feature.description}</p>
+                {feature.name}
              </CT>
              <CP className="mt-2 text-left text-sm" color="light">
                {feature.description}
              </CP>
            </motion.li>
          ))}
        </motion.ul>
-      </Container>
+      </div>
    </section>
-  )
+  );
 }
--- a/src/pages/agents/GallerySection.tsx
+++ b/src/pages/agents/GallerySection.tsx
@@ -1,58 +1,178 @@
-import { motion } from 'framer-motion'
+'use client'
-import { Container } from '../../components/Container'
+
 import { useEffect, useMemo, useState } from 'react'
 import { useResponsiveCarousel } from '@/hooks/useResponsiveCarousel';
 import { motion, AnimatePresence } from 'framer-motion'
 import { wrap } from 'popmotion'
 import { Button } from '@/components/Button';
 import { SectionHeader, P, Eyebrow, CP } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
 import { FadeIn } from '@/components/FadeIn';
 const galleryItems = [
-  { text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg' },
+  { text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg', width: 448, height: 277 },
-  { text: 'Process documents across all formats', image: '/images/gallery/docs.jpg' },
+  { text: 'Process documents across all formats', image: '/images/gallery/docs.jpg', width: 448, height: 277 },
-  { text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg' },
+  { text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg', width: 448, height: 277 },
-  { text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg' },
+  { text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg', width: 448, height: 277 },
-  { text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg' },
+  { text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg', width: 448, height: 277 },
-  { text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg' },
+  { text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg', width: 448, height: 277 },
  { text: 'Provide real-time market intelligence', image: '/images/gallery/market.jpg', width: 448, height: 277 },
  { text: 'Generate and debug code in multiple languages', image: '/images/gallery/code.jpg', width: 448, height: 277 },
  { text: 'Create consistent branded content', image: '/images/gallery/branding.jpg', width: 448, height: 277 },
  { text: 'Translate and localize materials', image: '/images/gallery/translate.jpg', width: 448, height: 277 },
  { text: 'Transform and migrate data structures', image: '/images/gallery/structure.jpg', width: 448, height: 277 },
 ]
-export function GallerySection() {
+// 🔧 Carousel Config
-  return (
+const VISIBLE = 4;
-    <section className="bg-gray-50 py-20 lg:py-32">
+const AUTOPLAY_MS = 3200;
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="mx-auto max-w-3xl text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
            Agents with Endless Possibilities.
          </h2>
          <p className="mt-6 text-lg text-gray-600">
            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>
        </motion.div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+export function GallerySection() {
-          {galleryItems.map((item, index) => (
+  const [active, setActive] = useState(0);
-            <motion.div
+  const [hovering, setHovering] = useState(false);
-              key={index}
+  const { GAP, ROT_Y, DEPTH, SCALE_DROP } = useResponsiveCarousel();
-              initial={{ opacity: 0, y: 20 }}
+
-              whileInView={{ opacity: 1, y: 0 }}
+  // autoplay
-              viewport={{ once: true }}
+  useEffect(() => {
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+    if (hovering) return
-              className="group relative overflow-hidden rounded-2xl bg-white border border-gray-200 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+    const id = setInterval(() => setActive((i) => wrap(0, galleryItems.length, i + 1)), AUTOPLAY_MS)
-            >
+    return () => clearInterval(id)
-              <div className="aspect-video overflow-hidden">
+  }, [hovering])
-                <img
+
-                  src={item.image}
+  const indices = useMemo(
-                  alt={item.text}
+    () => [...Array(VISIBLE * 2 + 1)].map((_, i) => wrap(0, galleryItems.length, active + i - VISIBLE)),
-                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+    [active]
                />
              </div>
              <div className="p-6">
                <p className="text-sm font-medium text-gray-900">{item.text}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </Container>
    </section>
  )
  const next = () => setActive((i) => wrap(0, galleryItems.length, i + 1))
  const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
  return (
    <div className="bg-white">
      <div className="relative isolate pt-8 pb-0 text-center w-full">
        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
          <div className="mx-auto max-w-5xl lg:mt-12">
            <Eyebrow color="accent">Use Cases</Eyebrow>
            <SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
          </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="dark">
            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>
      </div>
      <FadeIn transition={{ duration: 1, delay: 0.4 }}>
        <section
          className="relative w-full flex items-center justify-center overflow-hidden -mt-8 pt-0 pb-0"
          onMouseEnter={() => setHovering(true)}
          onMouseLeave={() => setHovering(false)}
        >
                    <div className="relative w-full max-w-[1800px] h-[300px] md:h-[500px]" style={{ perspective: '1600px' }}>
            <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
              <AnimatePresence initial={false}>
                {indices.map((idx, i) => {
                  const distance = i - VISIBLE;
                  const item = galleryItems[idx];
                  const x = distance * GAP;
                  const z = -Math.abs(distance) * DEPTH;
                  const r = distance * ROT_Y;
                  const s = 1 - Math.abs(distance) * SCALE_DROP;
                  const o = distance === 0 ? 1 : 0.80;
                  const zIndex = 100 - Math.abs(distance);
                  return (
                    <motion.div
                      key={`${idx}-${i}`}
                      className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 will-change-transform overflow-hidden ${distance === 0 ? 'rounded-xl' : ''}`}
                      initial={{ opacity: 0 }}
                      animate={{
                        transform: `translateX(${x}px) translateZ(${z}px) rotateY(${r}deg) scale(${s})`,
                        zIndex,
                        opacity: o,
                        boxShadow: distance === 0 ? '0 0 20px 5px rgba(0, 0, 0, 0.1)' : 'none',
                      }}
                      exit={{ opacity: 0 }}
                      transition={{ type: 'spring', stiffness: 220, damping: 26 }}
                      onClick={() => setActive(idx)}
                    >
                      <div className="relative bg-gray-100 flex items-center justify-center">
                        <img
                          src={item.image}
                          alt={item.text}
                          width={item.width}
                          height={item.height}
                          className="object-contain"
                        />
                      </div>
                    </motion.div>
                  );
                })}
              </AnimatePresence>
            </div>
          </div>
          {/* Arrows */}
          <div className="absolute inset-y-0 left-8 hidden md:flex items-center z-50">
            <button
              onClick={prev}
              className="bg-white/50 rounded-full p-2 shadow-lg backdrop-blur-md text-black"
              aria-label="Previous"
            >
              <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M15 19L8 12l7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
            </button>
          </div>
          <div className="absolute inset-y-0 right-8 hidden md:flex items-center z-50">
            <button
              onClick={next}
              className="bg-white/50 rounded-full p-2 shadow-lg backdrop-blur-md text-black"
              aria-label="Next"
            >
              <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
            </button>
          </div>
          {/* Foreground pill (Desktop) */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] hidden md:block">
            <div className="flex items-center justify-between w-[1040px] gap-6 rounded-2xl bg-gray-100/80 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
              <CP as="h4" className="max-w-[820px] h-[72px] flex items-center" color="dark">
                <TypeAnimation
                  key={active}
                  sequence={[galleryItems[active].text]}
                  wrapper="span"
                  speed={50}
                  repeat={0}
                />
              </CP>
              <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base whitespace-nowrap">
                Start
              </Button>
            </div>
          </div>
        </section>
        {/* Text box (Mobile) */}
        <div className="md:hidden w-full px-4 -mt-12 mb-16">
            <div className="flex flex-row items-center justify-between w-full gap-x-4 rounded-2xl bg-gray-100/80 p-4 backdrop-blur-md">
              <CP as="h4" className="w-full text-left h-[72px] leading-tight flex items-center" color="dark">
                <TypeAnimation
                  key={active}
                  sequence={[galleryItems[active].text]}
                  wrapper="span"
                  speed={50}
                  repeat={0}
                />
              </CP>
              <Button href="#" color="cyan" className="text-xs px-3 py-1.5 whitespace-nowrap">
                 Start
              </Button>
            </div>
        </div>
      </FadeIn>
    </div>
  );
 }
--- a/src/pages/cloud/CloudCTA.tsx
+++ b/src/pages/cloud/CloudCTA.tsx
@@ -1,35 +1,33 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 import { Button } from '../../components/Button'
 import { CircleBackground } from '../../components/CircleBackground'
 export function CloudCTA() {
  return (
-    <section className="relative bg-white py-20 lg:py-32 overflow-hidden">
+    <section className="relative overflow-hidden py-24 lg:py-32">
      <CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
      <Container className="relative">
-        <motion.div
+        <div className="mx-auto max-w-3xl text-center">
-          initial={{ opacity: 0, y: 20 }}
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-          whileInView={{ opacity: 1, y: 0 }}
+            Ready Today
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="mx-auto max-w-3xl text-center"
        >
          <h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
            Ready to Transform Your Kubernetes Experience?
          </h2>
          <p className="mt-6 text-lg lg:text-xl text-gray-600">
            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
          </p>
-          <div className="mt-10 flex flex-wrap gap-4 justify-center">
+          <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
-            <Button to="/download" variant="solid" color="cyan">
+            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
-              Start Your Free Trial
+          </h2>
-            </Button>
+          <p className="mt-6 text-lg text-gray-600">
-            <Button to="https://manual.grid.tf" variant="outline" color="gray">
+            Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
-              Read Documentation
+          </p>
          <div className="mt-10 flex justify-center">
            <Button
              to="https://myceliumcloud.tf"
              as="a"
              variant="solid"
              color="cyan"
              target="_blank"
              rel="noreferrer"
            >
              Start Deployment
            </Button>
          </div>
-        </motion.div>
+        </div>
      </Container>
    </section>
  )
--- a/src/pages/cloud/CloudHero.tsx
+++ b/src/pages/cloud/CloudHero.tsx
@@ -1,65 +1,113 @@
-import { motion } from 'framer-motion'
+import { useId } from 'react'
-import { Globe } from '../../components/ui/Globe'
+
-import { CountUpNumber } from '../../components/CountUpNumber'
+import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
-const stats = [
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  { value: 54958, label: 'CPU Cores' },
+  const id = useId()
-  { value: 1493, label: 'Nodes' },
+
-  { value: 5388956, label: 'GB Storage' },
+  return (
-  { value: 44, label: 'Countries' },
+    <div {...props}>
-]
+      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-slow"
      >
        <path
          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M513 1025C230.23 1025 1 795.77 1 513"
          stroke={`url(#${id}-gradient-1)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-1`}
            x1="1"
            y1="513"
            x2="1"
            y2="1025"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
      >
        <path
          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M913 513c0 220.914-179.086 400-400 400"
          stroke={`url(#${id}-gradient-2)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-2`}
            x1="913"
            y1="513"
            x2="913"
            y2="913"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  )
 }
 export function CloudHero() {
  return (
-    <section className="relative bg-white py-20 lg:py-32">
+    <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          {/* Text Content */}
+          <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">
-          <motion.div
+            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
              Mycelium Cloud
            </h1>
-            <p className="mt-6 text-lg lg:text-xl text-gray-600">
+            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-              Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
+              Own every workload with certainty.
            </h2>
            <p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
            </p>
-          </motion.div>
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-
+              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
-          {/* Globe */}
+                Start Deployment
-          <motion.div
+              </Button>
-            initial={{ opacity: 0, scale: 0.9 }}
+              
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="flex items-center justify-center"
          >
            <div className="relative w-full max-w-[500px] aspect-square">
              <Globe className="w-full h-full" />
            </div>
-          </motion.div>
+          </div>
-        </div>
+          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-
+            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
-        {/* Stats */}
+            <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
-        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
+              <img
-          {stats.map((stat, index) => (
+                src="/src/images/desktop.png"
-            <motion.div
+                alt="Mycelium Cloud dashboard preview"
-              key={stat.label}
+                className="mx-auto w-full max-w-[640px]"
-              initial={{ opacity: 0, y: 20 }}
+                width={1366}
-              animate={{ opacity: 1, y: 0 }}
+                height={768}
-              transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
+              />
-              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
+            </div>
-            >
+          </div>
              <div className="text-2xl lg:text-3xl font-bold text-cyan-500">
                <CountUpNumber end={stat.value} />
              </div>
              <p className="mt-2 text-sm text-gray-600">{stat.label}</p>
            </motion.div>
          ))}
        </div>
      </Container>
-    </section>
+    </div>
  )
 }
--- a/src/pages/cloud/CloudOverview.tsx
+++ b/src/pages/cloud/CloudOverview.tsx
@@ -0,0 +1,65 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
 const focusAreas = [
  {
    title: 'Sovereign by Design',
    description:
      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
  },
  {
    title: 'Secure by Default',
    description:
      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
  },
  {
    title: 'Ready to Scale',
    description:
      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
  },
 ]
 export function CloudOverview() {
  return (
    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
      <div className="pointer-events-none absolute inset-0">
        <CircleBackground
          color="#06b6d4"
          className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
        />
        <CircleBackground
          color="#22d3ee"
          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
        />
      </div>
      <Container className="relative">
        <div className="mx-auto max-w-3xl text-center">
          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
            Mycelium Cloud
          </p>
          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
            A sovereign, self-healing cloud built for trusted automation.
          </h2>
          <p className="mt-6 text-lg text-gray-300">
            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
          </p>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {focusAreas.map((item) => (
            <div
              key={item.title}
              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
            >
              <div className="text-lg font-semibold text-white">
                {item.title}
              </div>
              <p className="mt-4 text-sm leading-relaxed text-gray-300">
                {item.description}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/cloud/CloudPage.tsx
+++ b/src/pages/cloud/CloudPage.tsx
@@ -1,42 +1,28 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudHero } from './CloudHero'
-import { FeaturesSection } from './FeaturesSection'
+import { CloudOverview } from './CloudOverview'
-import { MyceliumNetworking } from './MyceliumNetworking'
+import { ComputeStorageSplit } from './ComputeStorageSplit'
-import { WebGateway } from './WebGateway'
+import { SecurityPillars } from './SecurityPillars'
 import { MultiMaster } from './MultiMaster'
 import { LoadBalancing } from './LoadBalancing'
 import { CloudCTA } from './CloudCTA'
 export default function CloudPage() {
  return (
-    <div>
+    <>
      <AnimatedSection>
        <CloudHero />
      </AnimatedSection>
      <AnimatedSection>
-        <FeaturesSection />
+        <CloudOverview />
      </AnimatedSection>
      <AnimatedSection>
-        <MyceliumNetworking />
+        <ComputeStorageSplit />
      </AnimatedSection>
      <AnimatedSection>
-        <WebGateway />
+        <SecurityPillars />
      </AnimatedSection>
      <AnimatedSection>
        <MultiMaster />
      </AnimatedSection>
      <AnimatedSection>
        <LoadBalancing />
      </AnimatedSection>
      <AnimatedSection>
        <CloudCTA />
      </AnimatedSection>
-    </div>
+    </>
  )
 }
--- a/src/pages/cloud/ComputeStorageSplit.tsx
+++ b/src/pages/cloud/ComputeStorageSplit.tsx
@@ -0,0 +1,144 @@
 import { Container } from '../../components/Container'
 const computeFeatures = [
  {
    title: 'Deterministic Deployments',
    description:
      'Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.',
  },
  {
    title: 'Self-Managing & Stateless Infrastructure',
    description:
      'Fully autonomous infrastructure that scales globally without manual intervention.',
  },
  {
    title: 'Zero-Image Technology (100x Compression)',
    description:
      'Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.',
  },
  {
    title: 'Smart Contract-Based Deployment',
    description:
      'Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.',
  },
  {
    title: 'Multi-Workload Compatibility with Secure Boot',
    description:
      'Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.',
  },
 ]
 const storageFeatures = [
  {
    title: 'Quantum-Safe Storage (QSS)',
    description:
      'Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.',
  },
  {
    title: 'Self-Healing Storage System',
    description:
      'Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.',
  },
  {
    title: 'Multi-Protocol Data Access',
    description:
      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.',
  },
  {
    title: 'Geo-Aware Data Placement & Replication',
    description:
      'Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.',
  },
  {
    title: 'Ultra-Efficient Zero-Images (Flists)',
    description:
      'Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.',
  },
 ]
 export function ComputeStorageSplit() {
  return (
    <section className="relative overflow-hidden bg-white">
      <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-slate-50" />
      <Container className="relative py-24 lg:py-32">
        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
            <div className="max-w-xs">
              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-500">
                Compute
              </p>
              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
                Deterministic compute fabric.
              </h2>
              <p className="mt-4 text-sm text-gray-500">
                Launch workloads with cryptographic certainty and autonomous operations.
              </p>
            </div>
            <ul className="grid w-full gap-4">
              {computeFeatures.map((item) => (
                <li
                  key={item.title}
                  className="flex flex-col gap-1 rounded-2xl border border-cyan-100 bg-white/80 p-4 text-center transition hover:border-cyan-400/70 hover:bg-cyan-50/60 dark:bg-white/10"
                >
                  <span className="text-sm font-semibold text-gray-900">
                    {item.title}
                  </span>
                  <span
                    className="text-xs text-gray-500 leading-relaxed"
                    style={{
                      display: '-webkit-box',
                      WebkitLineClamp: 2,
                      WebkitBoxOrient: 'vertical',
                      overflow: 'hidden',
                    }}
                  >
                    {item.description}
                  </span>
                </li>
              ))}
            </ul>
          </div>
          <div className="hidden lg:flex lg:col-span-2 lg:items-center lg:justify-center">
            <span className="h-full w-px bg-gradient-to-b from-transparent via-cyan-200 to-transparent" />
          </div>
          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
            <div className="max-w-xs">
              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
                Storage
              </p>
              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
                Quantum-safe, sovereign data plane.
              </h2>
              <p className="mt-4 text-sm text-gray-500">
                Protect and place data precisely while keeping access effortless.
              </p>
            </div>
            <ul className="grid w-full gap-4">
              {storageFeatures.map((item) => (
                <li
                  key={item.title}
                  className="flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white/80 p-4 text-center transition hover:border-cyan-400/60 hover:bg-cyan-50/40 dark:bg-white/10"
                >
                  <span className="text-sm font-semibold text-gray-900">
                    {item.title}
                  </span>
                  <span
                    className="text-xs text-gray-500 leading-relaxed"
                    style={{
                      display: '-webkit-box',
                      WebkitLineClamp: 2,
                      WebkitBoxOrient: 'vertical',
                      overflow: 'hidden',
                    }}
                  >
                    {item.description}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/cloud/FeaturesSection.tsx
+++ b/src/pages/cloud/FeaturesSection.tsx
@@ -1,75 +0,0 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 const features = [
  {
    icon: '☁️',
    title: 'Cloud-Native Architecture',
    description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
  },
  {
    icon: '🛡️',
    title: 'Enterprise Security',
    description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
  },
  {
    icon: '📊',
    title: 'Real-time Monitoring',
    description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
  },
  {
    icon: '🚀',
    title: 'One-Click Deployments',
    description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
  },
  {
    icon: '👥',
    title: 'Team Collaboration',
    description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
  },
  {
    icon: '⚙️',
    title: 'Advanced Configuration',
    description: 'Flexible configuration management with support for Helm charts and custom resources.',
  },
 ]
 export function FeaturesSection() {
  return (
    <section className="bg-gray-50 py-20 lg:py-32">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
            Everything You Need to Succeed
          </h2>
          <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
            Powerful tools and features designed for modern cloud-native applications
          </p>
        </motion.div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
            >
              <div className="text-4xl mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
              <p className="text-gray-600">{feature.description}</p>
            </motion.div>
          ))}
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/cloud/LoadBalancing.tsx
+++ b/src/pages/cloud/LoadBalancing.tsx
@@ -1,52 +0,0 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 export function LoadBalancing() {
  return (
    <section className="bg-gray-50 py-20 lg:py-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Visual Placeholder */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
          >
            <div className="text-center p-8">
              <div className="text-6xl mb-4">⚖️</div>
              <p className="text-gray-600">Auto-scaling & Load Balancing</p>
            </div>
          </motion.div>
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
              Effortless Load Balancing & Scaling
            </h2>
            <p className="mt-6 text-lg text-gray-600">
              Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Auto-scaling
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Built-in load balancing
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                High availability
              </span>
            </div>
          </motion.div>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/cloud/MultiMaster.tsx
+++ b/src/pages/cloud/MultiMaster.tsx
@@ -1,52 +0,0 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 export function MultiMaster() {
  return (
    <section className="bg-white py-20 lg:py-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
              Multi-Master Clusters
            </h2>
            <p className="mt-6 text-lg text-gray-600">
              High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                HA Control Plane
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Automatic Failover
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Zero-downtime Upgrades
              </span>
            </div>
          </motion.div>
          {/* Visual Placeholder */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
          >
            <div className="text-center p-8">
              <div className="text-6xl mb-4">⚡</div>
              <p className="text-gray-600">High Availability Clusters</p>
            </div>
          </motion.div>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/cloud/MyceliumNetworking.tsx
+++ b/src/pages/cloud/MyceliumNetworking.tsx
@@ -1,49 +0,0 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 export function MyceliumNetworking() {
  return (
    <section className="bg-white py-20 lg:py-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
              Mycelium Networking
            </h2>
            <p className="mt-6 text-lg text-gray-600">
              Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                End-to-end encrypted
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Nature-inspired
              </span>
            </div>
          </motion.div>
          {/* Visual Placeholder */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
          >
            <div className="text-center p-8">
              <div className="text-6xl mb-4">🕸️</div>
              <p className="text-gray-600">Decentralized Mesh Network</p>
            </div>
          </motion.div>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/cloud/SecurityPillars.tsx
+++ b/src/pages/cloud/SecurityPillars.tsx
@@ -0,0 +1,62 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
 const pillars = [
  {
    title: 'Provable Sovereignty',
    description:
      'Assign workloads to trusted zones, verify state with cryptographic proofs, and maintain full lineage for every byte.',
  },
  {
    title: 'Autonomous Zero-Trust',
    description:
      'Identity, policy, and attestation are enforced continuously—no manual keys, no hidden backdoors, no shared control.',
  },
  {
    title: 'Planetary-Scale Resilience',
    description:
      'Mesh-connected infrastructure routes around failure, keeping applications responsive even when regions go dark.',
  },
 ]
 export function SecurityPillars() {
  return (
    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
      <div className="pointer-events-none absolute inset-0">
        <CircleBackground
          color="#22d3ee"
          className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
        />
        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
      </div>
      <Container className="relative">
        <div className="mx-auto max-w-3xl text-center">
          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
            Sovereign Architecture
          </p>
          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
            Built for security, trust, and unstoppable continuity.
          </h2>
          <p className="mt-6 text-lg text-gray-300">
            Every control surface is auditable and automated, enabling critical workloads to run with confidence.
          </p>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {pillars.map((pillar) => (
            <div
              key={pillar.title}
              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
            >
              <div className="text-lg font-semibold text-white">
                {pillar.title}
              </div>
              <p className="mt-4 text-sm leading-relaxed text-gray-300">
                {pillar.description}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/cloud/WebGateway.tsx
+++ b/src/pages/cloud/WebGateway.tsx
@@ -1,52 +0,0 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 export function WebGateway() {
  return (
    <section className="bg-gray-50 py-20 lg:py-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Visual Placeholder */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
          >
            <div className="text-center p-8">
              <div className="text-6xl mb-4">🌐</div>
              <p className="text-gray-600">Simple Web Gateway</p>
            </div>
          </motion.div>
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
              Simple Web Gateway Access
            </h2>
            <p className="mt-6 text-lg text-gray-600">
              Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Simple configuration
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Built-in routing
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                No ingress controllers
              </span>
            </div>
          </motion.div>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/download/DevHub.tsx
+++ b/src/pages/download/DevHub.tsx
@@ -0,0 +1,69 @@
 'use client'
 import {
  BookOpenIcon,
  ChatBubbleOvalLeftEllipsisIcon,
  LifebuoyIcon,
  UserGroupIcon,
 } from '@heroicons/react/24/outline'
 const features = [
  {
    name: 'Documentation',
    description: 'Documentation for Mycelium.',
    href: 'https://threefold.info/mycelium_network/docs/',
    icon: BookOpenIcon,
  },
  {
    name: 'Support',
    description: 'Talk to an expert.',
    href: 'https://threefoldfaq.crisp.help/en/',
    icon: LifebuoyIcon,
  },
  {
    name: 'Forum',
    description: 'Forum for all your questions.',
    href: 'https://forum.threefold.io/',
    icon: ChatBubbleOvalLeftEllipsisIcon,
  },
  {
    name: 'Community',
    description: 'Join our Developers community on telegram.',
    href: 'https://t.me/threefoldtesting',
    icon: UserGroupIcon,
  },
 ]
 export function DevHub() {
  return (
    <div className="bg-gray-900 py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
          <div className="col-span-2">
            <h2 className="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
            <p className="text-3xl font-medium tracking-tight text-white lg:text-4xl">Developer Hub</p>
            <p className="mt-6 text-lg text-gray-300">
              Our Developer Hub is a resource center for developers looking to build on top of Mycelium.
              Join our Developers community on telegram to get started.
            </p>
          </div>
          <dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
            {features.map((feature) => (
              <a
                key={feature.name}
                href={feature.href}
                target="_blank"
                rel="noopener noreferrer"
                className="block rounded-2xl border border-gray-700 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
              >
                <feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
                <dt className="font-semibold text-white">{feature.name}</dt>
                <dd className="mt-2 text-gray-400">{feature.description}</dd>
              </a>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
 }
--- a/src/pages/download/DownloadHero.tsx
+++ b/src/pages/download/DownloadHero.tsx
@@ -0,0 +1,104 @@
 'use client'
 import { motion } from 'framer-motion'
 import appleIcon from '@/images/apple.svg'
 import windowsIcon from '@/images/windows.svg'
 import androidIcon from '@/images/android.svg'
 import linuxIcon from '@/images/linux.svg'
 const features = [
  {
    name: 'Download for iOS & MacOS',
    description: 'Download Mycelium App from the Apple Store.',
    href: 'https://apps.apple.com/us/app/mycelium-network/id6504277565',
    icon: appleIcon,
    alt: 'Apple logo',
  },
  {
    name: 'Download for Windows',
    description: 'Download the Mycelium App for Windows directly from its Github repository.',
    href: 'https://github.com/threefoldtech/myceliumflut/releases',
    icon: windowsIcon,
    alt: 'Windows logo',
  },
  {
    name: 'Download for Android',
    description: 'Download Mycelium from the Google Play Store.',
    href: 'https://play.google.com/store/apps/details?id=tech.threefold.mycelium&pli=1',
    icon: androidIcon,
    alt: 'Android logo',
  },
  {
    name: 'Download for Linux',
    description: 'Download the Mycelium binary for Linux directly from its Github repository.',
    href: 'https://github.com/threefoldtech/mycelium/releases',
    icon: linuxIcon,
    alt: 'Linux logo',
  },
 ]
 export function DownloadHero() {
  return (
    <div className="py-16 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl lg:mx-0">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
          >
            Download Mycelium Network
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mt-6 text-lg text-gray-600 lg:leading-8"
          >
            Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
            <a
              href="https://threefold.info/mycelium_network/docs/"
              className="font-semibold text-gray-900 underline transition-colors hover:text-cyan-500"
              target="_blank"
              rel="noopener noreferrer"
            >
              Read the manual.
            </a>
          </motion.p>
        </div>
        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
            {features.map((feature) => (
              <div
                key={feature.name}
                className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
              >
                <dt className="text-base font-semibold leading-7 text-gray-900">
                  <div className="mb-6 flex h-10 w-10 items-center justify-center">
                    <img src={feature.icon} alt={feature.alt} className="h-10 w-10" />
                  </div>
                  {feature.name}
                </dt>
                <dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600">
                  <p className="flex-auto">{feature.description}</p>
                  <p className="mt-6">
                    <a
                      href={feature.href}
                      className="text-sm font-semibold leading-6 text-cyan-500 transition-colors hover:text-cyan-400"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Download Now <span aria-hidden="true">→</span>
                    </a>
                  </p>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
 }
--- a/src/pages/download/DownloadPage.tsx
+++ b/src/pages/download/DownloadPage.tsx
@@ -0,0 +1,17 @@
 import { AnimatedSection } from '@/components/AnimatedSection'
 import { DownloadHero } from './DownloadHero'
 import { DevHub } from './DevHub'
 export default function DownloadPage() {
  return (
    <>
      <AnimatedSection>
        <DownloadHero />
      </AnimatedSection>
      <AnimatedSection>
        <DevHub />
      </AnimatedSection>
    </>
  )
 }
--- a/src/pages/home/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -0,0 +1,43 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
 import { Button } from '../../components/Button'
 export function CallToAction() {
  return (
    <section
      id="get-started"
      className="relative overflow-hidden bg-gray-900 py-32"
    >
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
      </div>
      <Container className="relative">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
            Activate Your Sovereign <br />Mycelium Stack
          </h2>
          <p className="mt-6 text-lg text-gray-300">
            Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
            <Button to="/cloud" variant="solid" color="white">
              Start Deployment
            </Button>
            <Button to="/download" variant="solid" color="cyan">
              Get Mycelium Connector
            </Button>
            <Button
              to="https://threefold.info/mycelium_network/docs/"
              as="a"
              target="_blank"
              variant="outline"
              color="white"
            >
              Read Docs
            </Button>
          </div>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/home/HomeAgent.tsx
+++ b/src/pages/home/HomeAgent.tsx
@@ -0,0 +1,65 @@
 import { H2, P } from '@/components/Texts'
 import { Button } from '@/components/Button'
 import { LayoutTextFlip } from '@/components/ui/layout-text-flip' // make sure this import path is correct
 export function HomeAgent() {
  return (
    <div className="relative isolate overflow-hidden bg-white">
      <div className="px-6 py-24 sm:py-32 lg:px-8">
        <div className="mx-auto max-w-4xl text-center">
          <H2>
            Deploy your own{" "}
            <span className="text-left text-black font-medium text-7xl italic  bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
              <LayoutTextFlip
                text=""
                words={[
                  "GPT-5",
                  "Claude 3.5",
                  "Gemini 1.5",
                  "Mistral 7B",
                  "Llama 3.1",
                  "AI Agents",
                ]}
              />
            </span>
          </H2>
          <P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
            Mycelium delivers enterprise-grade AI experiences that run on sovereign compute and the Mycelium Network, so production agents can reason over private data, collaborate across sites, and stay fully under your governance.
          </P>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <Button variant="solid" color="cyan" href="/signup">
              Get started
            </Button>
            <a href="/agents" className="text-sm/6 font-semibold text-gray-900 hover:text-gray-600">
              Learn more <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
      <svg
        viewBox="0 0 1024 1024"
        aria-hidden="true"
        className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
      >
        <circle
          r={512}
          cx={512}
          cy={512}
          fill="url(#8d958450-c69f-4251-94bc-4e091a323369)"
          fillOpacity="0.7"
        />
        <defs>
          <radialGradient id="8d958450-c69f-4251-94bc-4e091a323369" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#60A5FA" /> {/* blue-400 */}
            <stop offset="50%" stopColor="#06B6D4" /> {/* cyan-500 */}
            <stop offset="100%" stopColor="#A78BFA" /> {/* violet-400 */}
          </radialGradient>
        </defs>
      </svg>
    </div>
  )
 }
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -0,0 +1,35 @@
 "use client";
 import { H1, H5 } from "@/components/Texts";
 import { ScrollDownArrow } from '@/components/ScrollDownArrow';
 export function HomeAurora() {
  return (
    <div
      style={{
        backgroundImage: "url(/images/mchip2.webp)",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
      className="relative mx-auto flex min-h-screen flex-col items-center justify-center gap-6 px-4 pb-24 pt-24 text-gray-800 lg:pb-0"
    >
      <div className="text-center">
        <H1>
          <span className="text-bold lg:text-8xl">
            Full Sovereignty for<br />Cloud, Network & AI.
          </span>
        </H1>
      </div>
      <div className="max-w-4xl text-center font-light text-gray-500">
        <H5>
          Build and run mission-critical workloads on distributed compute,
          encrypted networking, and sovereign AI orchestration — all under your
          control, without centralized gatekeepers.
        </H5>
      </div>
      <div className="pt-6">
        <ScrollDownArrow />
      </div>
    </div>
  );
 }
--- a/src/pages/home/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -0,0 +1,279 @@
 import { cn } from "@/lib/utils";
 import createGlobe from "cobe";
 import { useEffect, useRef, type ReactNode } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
 import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid'
 import { H2, P } from '@/components/Texts'
 export function HomeBenefits() {
  const features = [
    {
      title: "Sovereign",
      description:
        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
      icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
    },
    {
      title: "Autonomous",
      description:
        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
      icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
    },
    {
      title: "Energy Efficient",
      description:
        "Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
      icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
    },
    {
      title: "Cost Efficient",
      description:
        "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
      icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
    },
  ];
  return (
    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
      <div className="px-8">
        <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
          Why It Changes Everything
        </H2>
        <P className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
          Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
        </P>
      </div>
      <div className="relative ">
        <div className="mt-12 rounded-2xl border border-neutral-200/70 bg-white/40 dark:bg-black/40 dark:border-neutral-800/60 backdrop-blur">
          <div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-neutral-200/70 dark:divide-neutral-800/60">
            {features.map((feature) => (
              <FeatureCard key={feature.title}>
                <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
                <FeatureDescription>{feature.description}</FeatureDescription>
              </FeatureCard>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
 }
 const FeatureCard = ({
  children,
  className,
 }: {
  children?: ReactNode;
  className?: string;
 }) => {
  return (
    <div className={cn(`p-6 lg:p-8 relative overflow-hidden`, className)}>
      {children}
    </div>
  );
 };
 const FeatureTitle = ({ children, icon }: { children?: ReactNode; icon?: ReactNode }) => {
  return (
    <div className="flex items-center gap-2">
      {icon}
      <p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
        {children}
      </p>
    </div>
  );
 };
 const FeatureDescription = ({ children }: { children?: ReactNode }) => {
  return (
    <p
      className={cn(
        "text-sm md:text-base max-w-4xl",
        "text-neutral-500 font-normal dark:text-neutral-300",
        "text-left max-w-sm mx-0 md:text-sm my-2"
      )}
    >
      {children}
    </p>
  );
 };
 export const SkeletonOne = () => {
  return (
    <div className="relative flex py-8 px-2 gap-10 h-full">
      <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
        <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
          {/* TODO */}
          <img
            src="/linear.webp"
            alt="header"
            width={800}
            height={800}
            className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
          />
        </div>
      </div>
      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
    </div>
  );
 };
 export const SkeletonThree = () => {
  return (
    <a
      href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
      target="__blank"
      className="relative flex gap-10  h-full group/image"
    >
      <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
        <div className="flex flex-1 w-full h-full flex-col space-y-2  relative">
          {/* TODO */}
          <IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
          <img
            src="https://assets.aceternity.com/fireship.jpg"
            alt="header"
            width={800}
            height={800}
            className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
          />
        </div>
      </div>
    </a>
  );
 };
 export const SkeletonTwo = () => {
  const images = [
    "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  ];
  const imageVariants = {
    whileHover: {
      scale: 1.1,
      rotate: 0,
      zIndex: 100,
    },
    whileTap: {
      scale: 1.1,
      rotate: 0,
      zIndex: 100,
    },
  };
  return (
    <div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
      {/* TODO */}
      <div className="flex flex-row -ml-20">
        {images.map((image, idx) => (
          <motion.div
            variants={imageVariants}
            key={"images-first" + idx}
            style={{
              rotate: Math.random() * 20 - 10,
            }}
            whileHover="whileHover"
            whileTap="whileTap"
            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
          >
            <img
              src={image}
              alt="bali images"
              width="500"
              height="500"
              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
            />
          </motion.div>
        ))}
      </div>
      <div className="flex flex-row">
        {images.map((image, idx) => (
          <motion.div
            key={"images-second" + idx}
            style={{
              rotate: Math.random() * 20 - 10,
            }}
            variants={imageVariants}
            whileHover="whileHover"
            whileTap="whileTap"
            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
          >
            <img
              src={image}
              alt="bali images"
              width="500"
              height="500"
              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
            />
          </motion.div>
        ))}
      </div>
      <div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" />
      <div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" />
    </div>
  );
 };
 export const SkeletonFour = () => {
  return (
    <div className="h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
      <Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
    </div>
  );
 };
 export const Globe = ({ className }: { className?: string }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    let phi = 0;
    if (!canvasRef.current) return;
    const globe = createGlobe(canvasRef.current, {
      devicePixelRatio: 2,
      width: 600 * 2,
      height: 600 * 2,
      phi: 0,
      theta: 0,
      dark: 1,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [0.3, 0.3, 0.3],
      markerColor: [0.1, 0.8, 1],
      glowColor: [1, 1, 1],
      markers: [
        // longitude latitude
        { location: [37.7595, -122.4367], size: 0.03 },
        { location: [40.7128, -74.006], size: 0.1 },
      ],
      onRender: (state) => {
        // Called on every animation frame.
        // `state` will be an empty object, return updated params.
        state.phi = phi;
        phi += 0.01;
      },
    });
    return () => {
      globe.destroy();
    };
  }, []);
  return (
    <canvas
      ref={canvasRef}
      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
      className={className}
    />
  );
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Emre	45b1c43b97	improvements	2025-10-24 15:11:28 +03:00
Emre	26fbea3ec4	fixed build errors	2025-10-24 04:17:02 +03:00
Emre	3a7aa82ff7	improvements	2025-10-24 02:17:33 +03:00
sasha-astiadi	644bb34419	style: reduce header padding from 8 to 4 units for more compact layout	2025-10-23 16:38:25 +02:00
sasha-astiadi	9b3c620706	refactor: simplify header component and improve hero section layouts	2025-10-23 16:36:37 +02:00
sasha-astiadi	987b46588b	style: update header background to be more opaque with gray border	2025-10-23 16:04:04 +02:00
sasha-astiadi	df88c4a14f	fix: update image import path to use direct import instead of URL path	2025-10-23 16:01:43 +02:00
sasha-astiadi	dfb469e7f7	Merge branch 'main' into development	2025-10-23 16:01:30 +02:00
sasha-astiadi	a3cd28fc6b	style: increase hover background opacity on nav links from 10% to 50%	2025-10-23 14:57:34 +02:00
sasha-astiadi	758a004ce9	refactor: update homepage layout and enhance feature card styling with improved shadows	2025-10-23 14:56:45 +02:00
sasha-astiadi	73832e2686	feat: enhance globe component with interactive controls and global markers	2025-10-23 14:37:13 +02:00
sasha-astiadi	4cc98af570	chore: remove Next.js dependencies and update UI components with standard React	2025-10-23 14:18:16 +02:00
Emre	4c30524504	new cloud page	2025-10-23 13:07:24 +03:00
sasha-astiadi	8f8d45c7ff	refactor: reduce text flip animation duration and adjust padding	2025-10-23 04:27:55 +02:00
sasha-astiadi	f2cb22ef66	feat: add animated text flip and pointer highlight components with home agent section	2025-10-23 04:24:01 +02:00
sasha-astiadi	82e730346e	feat: update homepage UI with new cloud section and simplified gradient backgrounds	2025-10-23 02:25:42 +02:00
sasha-astiadi	c9129c5c66	feat: replace card stack with new feature grid and add product icons	2025-10-23 01:32:54 +02:00
sasha-astiadi	8f1df965f2	feat: add UI components for card stack, world map and evervault card with theme support	2025-10-22 23:29:14 +02:00
sasha-astiadi	af77948679	feat: implement floating navbar with aurora background and updated header styling	2025-10-22 22:25:54 +02:00
sasha-astiadi	ce33e0f7c3	feat: add cloud video background and update StackSection styling to dark theme	2025-10-22 18:46:21 +02:00
sasha-astiadi	1f0f18105e	style: update hero section with new cloud background and button layout	2025-10-22 18:35:05 +02:00
sasha-astiadi	48979de1c7	feat: add video previews and text components to agent showcase sections	2025-10-22 18:14:41 +02:00
sasha-astiadi	31f5e53a71	feat: add responsive carousel and dark theme to agents gallery section	2025-10-22 18:04:52 +02:00
sasha-astiadi	8ea15271d3	refactor: update deploy section UI with dark theme and hover animations	2025-10-22 17:51:43 +02:00
sasha-astiadi	f30006a983	chore: delete unused icon.svg file	2025-10-22 17:34:12 +02:00
sasha-astiadi	044f9cf38b	feat: add InfiniteMovingCards component with customizable scroll animation	2025-10-22 17:33:52 +02:00
sasha-astiadi	5bd2459855	chore: update dependencies and add new UI packages for icons and animations	2025-10-22 17:33:42 +02:00
sasha-astiadi	6c0ed3cd65	feat: add interactive stacked cube components with hover descriptions	2025-10-22 17:33:29 +02:00
sasha-astiadi	fa0a55d846	feat: add logo components for various AI providers using @lobehub/icons	2025-10-22 17:32:46 +02:00
		`@@ -0,0 +1,3 @@`
							`import { Ai21 } from '@lobehub/icons';`

							`export default () => <Ai21.Brand size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { AlibabaCloud } from '@lobehub/icons';`

							`export default () => <AlibabaCloud.Text size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { BaiduCloud } from '@lobehub/icons';`

							`export default () => <BaiduCloud.Combine size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { ByteDance } from '@lobehub/icons';`

							`export default () => <ByteDance.Text size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { Claude } from '@lobehub/icons';`

							`export default () => <Claude.Combine size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { DeepMind } from '@lobehub/icons';`

							`export default () => <DeepMind.Combine size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { DeepSeek } from '@lobehub/icons';`

							`export default () => <DeepSeek.Combine size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { Minimax } from '@lobehub/icons';`

							`export default () => <Minimax.Combine size={30} />;`
		`@@ -0,0 +1,3 @@`
							`import { Mistral } from '@lobehub/icons';`

							`export default () => <Mistral.Combine size={30} />;`