forked from emre/www_projectmycelium_com
Initial commit
This commit is contained in:
Emre
36
src/pages/home/HomeHero.tsx
Normal file
36
src/pages/home/HomeHero.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { TypeAnimation } from 'react-type-animation'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function HomeHero() {
|
||||
return (
|
||||
<section className="relative bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
|
||||
<TypeAnimation
|
||||
sequence={[
|
||||
'Decentralized Autonomous Agentic Cloud.',
|
||||
1000,
|
||||
]}
|
||||
wrapper="span"
|
||||
speed={50}
|
||||
repeat={0}
|
||||
/>
|
||||
</h1>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1 }}
|
||||
className="mt-8"
|
||||
>
|
||||
<p className="text-lg lg:text-xl text-gray-600">
|
||||
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
22
src/pages/home/HomePage.tsx
Normal file
22
src/pages/home/HomePage.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { HomeHero } from './HomeHero'
|
||||
import { WorldMapSection } from './WorldMapSection'
|
||||
import { StackSection } from './StackSection'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div>
|
||||
<AnimatedSection>
|
||||
<HomeHero />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<WorldMapSection />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StackSection />
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
66
src/pages/home/StackSection.tsx
Normal file
66
src/pages/home/StackSection.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const stackData = [
|
||||
{
|
||||
id: 'agent',
|
||||
title: 'Agent Layer',
|
||||
description:
|
||||
'Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.',
|
||||
},
|
||||
{
|
||||
id: 'network',
|
||||
title: 'Network Layer',
|
||||
description:
|
||||
'A global, end-to-end encrypted overlay that simply doesn\'t break. Shortest-path routing moves your traffic the fastest way, every time with instant discovery.',
|
||||
},
|
||||
{
|
||||
id: 'cloud',
|
||||
title: 'Cloud Layer',
|
||||
description:
|
||||
'An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours.',
|
||||
},
|
||||
]
|
||||
|
||||
export function StackSection() {
|
||||
return (
|
||||
<section className="relative bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
|
||||
{/* Left Column - Text */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="lg:col-span-1"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
The Mycelium Stack
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
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>
|
||||
|
||||
{/* Right Column - Stack Cards */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{stackData.map((layer, index) => (
|
||||
<motion.div
|
||||
key={layer.id}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-900">{layer.title}</h3>
|
||||
<p className="mt-3 text-gray-600">{layer.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
106
src/pages/home/WorldMapSection.tsx
Normal file
106
src/pages/home/WorldMapSection.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Globe } from '../../components/ui/Globe'
|
||||
import { CountUpNumber } from '../../components/CountUpNumber'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function WorldMapSection() {
|
||||
return (
|
||||
<section className="relative 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.5 }}
|
||||
className="mb-12"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Mycelium Network is Live.
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Globe */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, 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>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">CORES</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={54958} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total Central Processing Unit Cores available on the grid.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">NODES</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={1493} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total number of nodes on the grid.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">SSD CAPACITY</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={5388956} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">COUNTRIES</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={44} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total number of countries with active nodes.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user