diff --git a/public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png b/public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png new file mode 100644 index 0000000..97c483a Binary files /dev/null and b/public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png differ diff --git a/public/images/Screenshot 2025-09-13 at 15.58.46.png b/public/images/Screenshot 2025-09-13 at 15.58.46.png new file mode 100644 index 0000000..f9bf2bc Binary files /dev/null and b/public/images/Screenshot 2025-09-13 at 15.58.46.png differ diff --git a/public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png b/public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png new file mode 100644 index 0000000..9ca2e27 Binary files /dev/null and b/public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png differ diff --git a/public/images/candy.gif b/public/images/candy.gif new file mode 100644 index 0000000..5825c96 Binary files /dev/null and b/public/images/candy.gif differ diff --git a/public/images/cube.png b/public/images/cube.png new file mode 100644 index 0000000..b958fc1 Binary files /dev/null and b/public/images/cube.png differ diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 9d0f0d7..9f10c3c 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -10,12 +10,14 @@ import { About } from '@/components/About' import { HomeHero } from '@/components/HomeHero' import { HomeAbout } from '@/components/HomeAbout' import { ClickableGallery } from '@/components/ClickableGallery' +import { StackSectionPreview } from '@/components/StackSection' export default function Home() { return ( <> + diff --git a/src/components/Candy.tsx b/src/components/Candy.tsx new file mode 100644 index 0000000..c20b581 --- /dev/null +++ b/src/components/Candy.tsx @@ -0,0 +1,17 @@ +'use client' + +import Image from 'next/image' + +export function Candy() { + return ( +
+ Candy +
+ ) +} diff --git a/src/components/HomeAbout.tsx b/src/components/HomeAbout.tsx index b0d5c33..e821041 100644 --- a/src/components/HomeAbout.tsx +++ b/src/components/HomeAbout.tsx @@ -7,6 +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 { Candy } from '@/components/Candy' const navigation = [ { name: 'Product', href: '#' }, @@ -73,6 +75,8 @@ export function HomeAbout() { With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control. + +
{[...features, ...features].map((feature, index) => ( diff --git a/src/components/HomeHero.tsx b/src/components/HomeHero.tsx index 7e38995..1173ad9 100644 --- a/src/components/HomeHero.tsx +++ b/src/components/HomeHero.tsx @@ -58,7 +58,7 @@ export function HomeHero() {

- Building the infrastructure where AI agents can live, communicate, and evolve with complete sovereignty. + Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.

diff --git a/src/components/StackSection.tsx b/src/components/StackSection.tsx new file mode 100644 index 0000000..2199615 --- /dev/null +++ b/src/components/StackSection.tsx @@ -0,0 +1,60 @@ +"use client"; + +import { StackedCubes } from "@/components/ui/StackedCubes"; +import { Button } from "@/components/Button"; +import { motion, useInView } from "framer-motion"; +import { useRef } from "react"; + +export function StackSectionPreview() { + const ref = useRef(null); + const isInView = useInView(ref); + + return ( +
+ {/* Gradient Blob Component */} +
+
+
+
+ {/* Left Column - Text (1/3 width) */} +
+ + Next-Gen AI Infrastructure + + + Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems. + + + + +
+ + {/* Right Column - Stacked Cubes (2/3 width) */} +
+ + + +
+
+
+
+ ); +} diff --git a/src/components/ui/Cube.tsx b/src/components/ui/Cube.tsx new file mode 100644 index 0000000..146c33e --- /dev/null +++ b/src/components/ui/Cube.tsx @@ -0,0 +1,125 @@ +"use client"; + +import React from "react"; +import Image from "next/image"; +import { motion } from "framer-motion"; + +interface CubeProps { + title: string; + descriptionTitle: string; + description: string; + isActive: boolean; + index: number; + onHover: () => void; + onLeave: () => void; +} + + +export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave }: CubeProps) { + return ( +
+ + {/* Image Cube */} + Cube + + {/* Title overlay */} +
+

+ {title} +

+
+ + {/* Description with arrow line - Desktop */} + {isActive && ( + + {/* Arrow line */} + + + + + {/* Description text */} +
+

+ {descriptionTitle} +

+

+ {description} +

+
+ + )} + + {/* Description for Mobile - Below cube */} + {isActive && ( + +
+

+ {descriptionTitle} +

+

+ {description} +

+
+ + )} + +
+ ); +} diff --git a/src/components/ui/StackedCubes.tsx b/src/components/ui/StackedCubes.tsx new file mode 100644 index 0000000..7f5aebf --- /dev/null +++ b/src/components/ui/StackedCubes.tsx @@ -0,0 +1,75 @@ +"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: "Personal Agents - Secure & Sovereign", + description: + "Personal AI agents operate as secure digital twins, providing tailored intelligent assistance. They interact with existing chat, MCP agents, and coding tools while maintaining sovereignty and ecosystem compatibility.", + position: "top", + }, + { + id: "ai", + title: "AI Layer", + descriptionTitle: "AI Agents & AI Brains + Mycelium Code & Compute Sandboxes", + description: + "Intelligence core combining LLMs with specialized AI agents. Mycelium-powered sandboxes provide secure environments for development, testing, and compilation with active memory systems and unbreakable network architecture.", + position: "middle", + }, + { + id: "cloud", + title: "Cloud Layer", + descriptionTitle: "Mycelium Compute & Storage - Decentralized Infrastructure Layer", + description: + "Foundation runs bare metal Zero OS enabling autonomous cloud. Decentralized infrastructure supports Web2, Web3, AI workloads with superior scalability. Built on twenty years cloud experience.", + position: "bottom", + }, +]; + +export function StackedCubes() { + const [active, setActive] = useState("agent"); + + return ( +
setActive("agent")} + > + + {stackData.map((layer, index) => ( +
+ setActive(layer.id)} + onLeave={() => {}} + /> +
+ ))} + +
+ ); +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..df73a55 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +}