ok

package.json

@@ -11,6 +11,7 @@
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
     "@headlessui/react": "^2.1.0",
+    "@lobehub/icons": "^1.97.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/postcss": "^4.1.7",
     "@types/node": "^20.10.8",
@@ -23,6 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-type-animation": "^3.2.0",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.7",
     "typescript": "^5.3.3",
     "use-debounce": "^10.0.0"

src/app/(main)/page.tsx

@@ -11,11 +11,13 @@ import { HomeHero } from '@/components/HomeHero'
 import { HomeAbout } from '@/components/HomeAbout'
 import { ClickableGallery } from '@/components/ClickableGallery'
 import { StackSectionPreview } from '@/components/StackSection'
+import { Companies } from '@/components/Companies'
 
 export default function Home() {
   return (
     <>
       <HomeHero />  
+      <Companies />
       <HomeAbout />
       <StackSectionPreview />
       <ClickableGallery />

src/components/ClickableGallery.tsx

@@ -4,7 +4,8 @@ import { useEffect, useMemo, useState } from 'react'
 import Image from 'next/image'
 import { motion, AnimatePresence } from 'framer-motion'
 import { wrap } from 'popmotion'
-import { Button } from '@/components/Button'
+import { Button } from '@/components/Button';
+import { H2, P, H4 } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
 
 const galleryItems = [
@@ -52,22 +53,14 @@ export function ClickableGallery() {
   return (
     <>
       <div className="relative isolate pt-24 pb-12 text-center">
-        <motion.h1
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="mx-auto max-w-5xl">
-          initial={{ opacity: 0 }}
+          <H2 className="text-center">One Agent, Endless Possibilities.</H2>
-          animate={{ opacity: 1 }}
+        </motion.div>
-          transition={{ duration: 1, delay: 1 }}
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="mx-auto max-w-3xl mt-8">
-          className="mx-auto max-w-5xl text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
+          <P className="text-center">
-        >
+            The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
-          One Agent, Endless Possibilities.
+          </P>
-        </motion.h1>
+        </motion.div>
-        <motion.p
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 1, delay: 1.5 }}
-          className="mx-auto max-w-3xl mt-8 text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
-        >
-          The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
-        </motion.p>
         <div
           aria-hidden="true"
           className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -172,14 +165,15 @@ export function ClickableGallery() {
         {/* Foreground pill */}
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60]">
           <div className="flex items-center justify-between w-[1040px] gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur">
-            <TypeAnimation
+            <H4 as="div" className="max-w-[820px] h-[72px]">
-              key={active}
+              <TypeAnimation
-              sequence={[galleryItems[active].text]}
+                key={active}
-              wrapper="h2"
+                sequence={[galleryItems[active].text]}
-              speed={50}
+                wrapper="span"
-              className="text-2xl lg:text-3xl font-semibold leading-tight text-[#2F3178] max-w-[820px] h-[72px]"
+                speed={50}
-              repeat={0}
+                repeat={0}
-            />
+              />
+            </H4>
             <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
                Start
             </Button> 

src/components/Companies.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { H2, P } from '@/components/Texts';
+
+
+
+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 AlibabaCloud from '@/components/logos/AlibabaCloud';
+import TencentCloud from '@/components/logos/TencentCloud';
+import OpenAI from '@/components/logos/OpenAI';
+import XAI from '@/components/logos/XAI';
+
+const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
+const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
+const row3 = [Moonshot, AlibabaCloud];
+const row4 = [TencentCloud, OpenAI, XAI];
+
+export function Companies() {
+  return (
+    <div className="relative flex h-screen w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
+      <div className="relative z-10 mx-auto w-full max-w-6xl p-4 pt-16">
+
+        {/* Heading */}
+        <motion.div
+          className="flex flex-col justify-center max-w-4xl items-center mb-6 mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1 }}
+        >
+          <H2 className="text-center">
+            Seamlessly Deploy the World’s Leading AI Models 
+          </H2>
+          <P className="mt-6 text-center">
+            Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud lets you integrate state-of-the-art intelligence into your workflows with full control, sovereignty, and cost efficiency.
+          </P>
+        </motion.div>
+
+        {/* Animated Line */}
+        <motion.div
+          className="h-[2px] bg-neutral-400 rounded-full mx-auto mb-12"
+          initial={{ width: 0 }}
+          animate={{ width: "100%" }}
+          transition={{ duration: 2, delay: 1 }}
+        />
+
+        {/* Logos grid */}
+        <div className="flex flex-col items-center gap-y-10">
+          {[row1, row2, row3, row4].map((row, rowIndex) => (
+            <motion.div
+              key={rowIndex}
+              className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-10"
+              initial="hidden"
+              animate="visible"
+              variants={{
+                visible: {
+                  transition: {
+                    staggerChildren: 0.15,
+                    delayChildren: 2.8 + rowIndex * 0.5, // Stagger rows
+                  },
+                },
+              }}
+            >
+              {row.map((Logo, i) => (
+                <motion.div
+                  key={i}
+                  className="flex justify-center"
+                  variants={{
+                    hidden: { opacity: 0, y: 30 },
+                    visible: { opacity: 1, y: 0 },
+                  }}
+                  transition={{ duration: 0.6, ease: "easeOut" }}
+                >
+                  <div className="text-[#2F3178]"><Logo /></div>
+                </motion.div>
+              ))}
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/HomeAbout.tsx

@@ -7,7 +7,8 @@ import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
 import Image from 'next/image'
 import diamondSvg from '@/images/diamond.svg'
-import { Container } from '@/components/Container'
+import { Container } from '@/components/Container';
+import { H2, P, H3 } from '@/components/Texts';
 import { Candy } from '@/components/Candy'
 
 const navigation = [
@@ -57,32 +58,26 @@ export function HomeAbout() {
             className="aspect-1108/632 w-277 bg-linear-to-r from-[#80caff] to-[#4f46e5] opacity-20"
           />
         </motion.div>
-          <motion.h1
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="absolute top-24 left-0 max-w-xl text-left">
-            initial={{ opacity: 0 }}
+            <H2>
-            animate={{ opacity: 1 }}
+              Enterprise AI Agents
-            transition={{ duration: 1, delay: 1 }}
+              That Never Sleep.
-            className="absolute top-24 left-0 max-w-xl text-left text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
+            </H2>
-          >
+          </motion.div>
-            Enterprise AI Agents
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="absolute top-64 left-0 max-w-xl text-left">
-            That Never Sleep.
+            <P>
-          </motion.h1>
+              With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
-          <motion.p
+            </P>
-            initial={{ opacity: 0 }}
+          </motion.div>
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1, delay: 1.5 }}
-            className="absolute top-64 left-0 max-w-xl text-left  text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
-          >
-            With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
-          </motion.p>
           
           <Candy />
 
           <div className="absolute bottom-24 right-0 h-96 w-full md:w-2/3 overflow-hidden">
-            <div className="animate-marquee-vertical space-y-8 text-right text-2xl md:text-4xl font-medium text-[#2F3178]">
+            <div className="animate-marquee-vertical space-y-8 text-right">
               {[...features, ...features].map((feature, index) => (
                 <div key={index} className="flex items-center justify-end gap-x-4" aria-hidden={index >= features.length}>
                   <Image src={diamondSvg} alt="" className="h-6 w-6" />
-                  <p>{feature}</p>
+                  <H3 as="p">{feature}</H3>
                 </div>
               ))}
             </div>

src/components/HomeHero.tsx

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion'
 import { TypeAnimation } from 'react-type-animation'
 import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
+import { H1, PL } from '@/components/Texts'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -56,25 +57,26 @@ export function HomeHero() {
         </div>
         <div className="relative -top-10  mx-auto max-w-8xl h-screen flex items-center justify-center">
           <div className="text-center max-w-5xl">
-            <TypeAnimation
+            <H1>
-              sequence={[
+              <TypeAnimation
-                'Decentralized Autonomous Agentic Cloud',
+                sequence={[
-                1000,
+                  'Decentralized Autonomous Agentic Cloud',
-              ]}
+                  1000,
-              wrapper="h1"
+                ]}
-              speed={50}
+                wrapper="span"
-              className="text-5xl font-medium tracking-tight text-balance text-[#2F3178] lg:text-8xl"
+                speed={50}
-              repeat={0}
+                repeat={0}
-            />
+              />
+            </H1>
           </div>
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 1, delay: 1 }}
           >
-            <p className="absolute bottom-12 left-0 max-w-xl text-left text-2xl font-medium text-pretty leading-[1.2] text-[#2F3178] lg:text-3xl">
+            <PL className="absolute bottom-12 left-0 max-w-xl text-left">
               Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </p>
+            </PL>
           </motion.div>
           <a href="#about" className="absolute bottom-24 right-0 flex items-center gap-x-2 text-2xl font-medium text-[#2F3178] lg:text-3xl animate-bounce-y">
             <span>scroll</span>

src/components/StackSection.tsx

@@ -2,7 +2,8 @@
 
 import { StackedCubes } from "@/components/ui/StackedCubes";
 import { Button } from "@/components/Button";
-import { motion, useInView } from "framer-motion";
+import { motion, useInView } from 'framer-motion';
+import { H2, P } from '@/components/Texts';
 import { useRef } from "react";
 
 export function StackSectionPreview() {
@@ -17,23 +18,34 @@ export function StackSectionPreview() {
       <div className="mx-auto max-w-7xl">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
           {/* Left Column - Text (1/3 width) */}
-          <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
+          <div className="text-left lg:text-left lg:col-span-1 order-1 lg:order-1">
-            <motion.h2
+            <motion.div
-              className="text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
               initial={{ opacity: 0, y: 30 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
               transition={{ duration: 0.8, delay: 0.2 }}
             >
-              Next-Gen AI Infrastructure
+              <H2 className="">
-            </motion.h2>
+                The Mycelium Stack
-            <motion.p
+              </H2>
-              className="mx-auto mt-8 max-w-3xl text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
+            </motion.div>
+            <motion.div
               initial={{ opacity: 0, y: 30 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
               transition={{ duration: 0.8, delay: 0.4 }}
             >
-              Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
+              <P className="mt-6 max-w-3xl ">
-            </motion.p>
+                Mycelium is a fully integrated, vertical stack for sovereign and decentralized AI. It provides the foundation for a new generation of agentic applications, giving you full control over your data and intelligence.
+              </P>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+            >
+              <P className="mx-auto mt-8 max-w-3xl">
+                Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
+              </P>
+            </motion.div>
             <motion.div
               initial={{ opacity: 0, y: 30 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}

src/components/Texts.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const textColors = 'text-[#2F3178]';
+
+type TextOwnProps<E extends React.ElementType> = {
+  as?: E;
+  children: React.ReactNode;
+  className?: string;
+};
+
+type TextProps<E extends React.ElementType> = TextOwnProps<E> & Omit<React.ComponentProps<E>, keyof TextOwnProps<E>>;
+
+const createTextComponent = <E extends React.ElementType>(
+  defaultElement: E,
+  defaultClassName: string
+) => {
+  const Text = <C extends React.ElementType = E>({ as, children, className, ...rest }: TextProps<C>) => {
+    const Component = as || defaultElement;
+
+    return (
+      <Component className={cn(defaultClassName, textColors, className)} {...rest}>
+        {children}
+      </Component>
+    );
+  };
+  return Text;
+};
+
+export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl');
+export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl');
+export const H2 = createTextComponent('h2', 'text-4xl font-medium text-pretty lg:text-5xl');
+export const P = createTextComponent('p', 'text-xl font-medium text-pretty lg:text-2xl');
+export const H3 = createTextComponent('h3', 'text-3xl lg:text-4xl font-medium');
+export const H4 = createTextComponent('h4', 'text-2xl lg:text-3xl font-semibold leading-tight');
+export const CT = createTextComponent('span', 'text-sm lg:text-base font-semibold text-center');
+export const CP = createTextComponent('p', 'text-sm leading-relaxed font-light');
+export const NL = createTextComponent('span', 'text-lg font-semibold leading-6');

src/components/logos/Ai21.tsx

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

src/components/logos/AlibabaCloud.tsx

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

src/components/logos/BaiduCloud.tsx

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

src/components/logos/ByteDance.tsx

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

src/components/logos/Claude.tsx

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

src/components/logos/DeepMind.tsx

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

src/components/logos/DeepSeek.tsx

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

src/components/logos/Minimax.tsx

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

src/components/logos/Mistral.tsx

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

src/components/logos/Moonshot.tsx

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

src/components/logos/NousResearch.tsx

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

src/components/logos/OpenAI.tsx

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

src/components/logos/TencentCloud.tsx

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

src/components/logos/XAI.tsx

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

src/components/ui/Cube.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import Image from "next/image";
 import { motion } from "framer-motion";
+import { CT, CP } from '@/components/Texts';
 
 interface CubeProps {
   title: string;
@@ -19,7 +20,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
   return (
     <div className="relative flex flex-col items-center">
       <motion.div
-        className="relative cursor-pointer"
+        className="relative cursor-pointer pointer-events-none"
         onMouseEnter={onHover}
         onMouseLeave={onLeave}
         style={{
@@ -39,7 +40,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
           alt="Cube"
           width={507}
           height={234}
-          className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg"
+          className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg pointer-events-auto"
           style={{
             filter: isActive
               ? 'brightness(1.1) drop-shadow(0 25px 25px rgba(144, 137, 252, 0.4))'
@@ -49,15 +50,9 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
         
         {/* Title overlay */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <h3 
+          <CT as="h3" className="px-4 drop-shadow-lg" style={{ transform: 'rotate(0deg) skewX(0deg)', transformOrigin: 'center' }}>
-            className="text-[#2F3178] text-sm lg:text-base font-semibold text-center px-4 drop-shadow-lg"
-            style={{ 
-              transform: 'rotate(0deg) skewX(0deg)',
-              transformOrigin: 'center'
-            }}
-          >
             {title}
-          </h3>
+          </CT>
         </div>
 
         {/* Description with arrow line - Desktop */}
@@ -93,9 +88,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
               <h4 className="text-base font-semibold mb-2">
                 {descriptionTitle}
               </h4>
-              <p className="text-sm leading-relaxed font-light">
+              <CP>{description}</CP>
-                {description}
-              </p>
             </div>
           </motion.div>
         )}
@@ -113,9 +106,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
               <h4 className="text-base font-semibold mb-2 text-center">
                 {descriptionTitle}
               </h4>
-              <p className="text-sm leading-relaxed font-light text-center">
+              <CP className="text-center">{description}</CP>
-                {description}
-              </p>
             </div>
           </motion.div>
         )}

src/components/ui/StackedCubes.tsx

@@ -40,7 +40,7 @@ export function StackedCubes() {
       onMouseLeave={() => setActive("agent")}
     >
       <motion.div
-        className="relative ml-0 sm:ml-4 lg:ml-8 h-[400px] w-96"
+        className="relative ml-0 sm:ml-4 lg:ml-8 h-[600px] w-96"
         animate={{ y: ["-8px", "8px"] }}
         transition={{
           duration: 4,
@@ -54,7 +54,7 @@ export function StackedCubes() {
             key={layer.id}
             className="absolute"
             style={{
-              top: `${index * 100}px`,
+              top: `${index * 140}px`,
               zIndex: active === layer.id ? 20 : 10 - index,
             }}
           >