forked from emre/www_projectmycelium_com
Initial commit
This commit is contained in:
Emre
22
src/pages/agents/AgentsPage.tsx
Normal file
22
src/pages/agents/AgentsPage.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { DeploySection } from './DeploySection'
|
||||
import { GallerySection } from './GallerySection'
|
||||
import { BentoSection } from './BentoSection'
|
||||
|
||||
export default function AgentsPage() {
|
||||
return (
|
||||
<div>
|
||||
<AnimatedSection>
|
||||
<DeploySection />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<GallerySection />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<BentoSection />
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
75
src/pages/agents/BentoSection.tsx
Normal file
75
src/pages/agents/BentoSection.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
]
|
||||
|
||||
export function BentoSection() {
|
||||
return (
|
||||
<section className="bg-white 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="mx-auto max-w-3xl text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Augmented Intelligence Fabric
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{items.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
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-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">{item.title}</h3>
|
||||
<p className="mt-2 text-sm font-medium text-cyan-500">{item.subtitle}</p>
|
||||
<p className="mt-3 text-sm text-gray-600">{item.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
69
src/pages/agents/DeploySection.tsx
Normal file
69
src/pages/agents/DeploySection.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
import { useRef } from 'react'
|
||||
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
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,
|
||||
},
|
||||
{
|
||||
name: 'Add Your Knowledge',
|
||||
description:
|
||||
'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
|
||||
icon: TbCircleNumber2Filled,
|
||||
},
|
||||
{
|
||||
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,
|
||||
},
|
||||
]
|
||||
|
||||
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">
|
||||
<Container>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className="mx-auto max-w-3xl text-center"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Deploy Scalable LLMs and AI Agents in Seconds
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
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>
|
||||
</motion.div>
|
||||
<motion.ul
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2, staggerChildren: 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"
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<motion.li
|
||||
key={feature.name}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 + index * 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"
|
||||
>
|
||||
<feature.icon className="h-8 w-8 mb-4 text-cyan-500" />
|
||||
<h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
|
||||
<p className="mt-3 text-sm text-gray-600">{feature.description}</p>
|
||||
</motion.li>
|
||||
))}
|
||||
</motion.ul>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
58
src/pages/agents/GallerySection.tsx
Normal file
58
src/pages/agents/GallerySection.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const galleryItems = [
|
||||
{ text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg' },
|
||||
{ text: 'Process documents across all formats', image: '/images/gallery/docs.jpg' },
|
||||
{ text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg' },
|
||||
{ text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg' },
|
||||
{ text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg' },
|
||||
{ text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg' },
|
||||
]
|
||||
|
||||
export function GallerySection() {
|
||||
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="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">
|
||||
{galleryItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="group relative overflow-hidden rounded-2xl bg-white border border-gray-200 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<div className="aspect-video overflow-hidden">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.text}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-sm font-medium text-gray-900">{item.text}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user