Files
www_projectmycelium_com/src/pages/agents/AgentHeroAlt.tsx
sasha-astiadi 01b1c20b60 refactor: adjust AgentHeroAlt text container width and split description into two paragraphs
- Changed max-w-2xl to max-w-xl for narrower text container
- Split description text into two separate P components with mt-4 spacing between them for improved readability
2025-11-19 18:37:36 +01:00

46 lines
1.8 KiB
TypeScript

'use client'
import { Eyebrow, H3, P } 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 md:bg-[url('/images/agents.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
>
{/* Inner padding */}
<div className="px-6 pt-4 pb-12 lg:py-24">
{/* Mobile-only hero image */}
<img
src="/images/mobile/agents.jpg"
alt="Mycelium Agents visual"
className="mb-8 w-full object-cover md:hidden"
/>
<div className="max-w-xl 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-gray-600">
Mycelium Agents let you deploy and run intelligent systems on your own infrastructure.
</P>
<P className="mt-4 text-gray-600">
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">
{/* TODO: Hero CTAs (Follow Development / Explore Docs) to be added when links are ready.
Previously two Buttons here with href="#". */}
</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>
)
}