Files
www_projectmycelium_com/src/pages/agents/AgentHeroAlt.tsx
sasha-astiadi b208fe7f2a refactor: convert agent bento cards from videos to React animation components
- Replaced video paths with imported animation components (Fungistor, Herodb, MOSSandboxes, etc.)
- Added new AgentDesign and AgentUseCase sections to agents page
- Updated hero copy to emphasize private, sovereign AI and 2026 timeline
- Reorganized page layout with new sections between existing components
2025-11-13 15:24:46 +01:00

43 lines
1.7 KiB
TypeScript

'use client'
import { Button } from '@/components/Button'
import { Eyebrow, H3 } from '@/components/Texts'
export function AgentHeroAlt() {
return (
<div className="">
{/* Boxed container */}
<div
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
>
{/* Inner padding */}
<div className="px-6 py-16 lg:py-16">
<div className="max-w-2xl lg:pl-6">
<Eyebrow>MYCELIUM AGENTS - COMING IN 2026</Eyebrow>
<H3 as="h1" className="mt-4">
Private, Sovereign and Distributed AI You Control
</H3>
<p className="mt-6 text-lg">
Mycelium Agents let you deploy and run intelligent systems on your own infrastructure.
Private, local, and autonomous by design, they give you everything you need to build, host, and connect AI agents without relying on centralized clouds.
</p>
<div className="mt-10 flex items-center gap-x-6">
<Button href="#" variant="solid" color="cyan">
Follow Development
</Button>
<Button href="#" variant="outline">
Explore Docs <span aria-hidden="true"></span>
</Button>
</div>
</div>
</div>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
</div>
)
}