feat: restructure GPU page layout and simplify content presentation

- Reordered sections to improve information flow (Capabilities → Design → Architecture → Overview)
- Simplified use cases and overview sections by removing redundant bullet points
- Added new GpuCapabilities and GpuDesign components with cleaner, more focused messaging
This commit is contained in:
2025-11-04 16:50:15 +01:00
parent 8b892c9432
commit 865252274c
6 changed files with 253 additions and 115 deletions

View File

@@ -0,0 +1,52 @@
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
const architecture = [
{
title: 'Sovereign Compute Nodes',
description: 'GPUs hosted on hardware you trust.',
},
{
title: 'Encrypted Mesh Networking',
description: 'Secure, private connectivity to workloads.',
},
{
title: 'Reservation & Verification Layer',
description: 'Guarantees GPU access and consistency.',
},
]
export function GpuArchitecture() {
return (
<section id="gpu-architecture" className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow>ARCHITECTURE</Eyebrow>
<SectionHeader as="h2" className="mt-6 text-gray-900">
HOW IT WORKS
</SectionHeader>
<P className="mt-6 text-gray-600">
A sovereign GPU fabric built for transparent access, secure routing,
and guaranteed performanceno opaque clouds or shared queues.
</P>
</div>
<div className="mx-auto mt-16 max-w-4xl space-y-6">
{architecture.map((item) => (
<div
key={item.title}
className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
>
<h3 className="text-xl font-semibold text-gray-900">
{item.title}
</h3>
<p className="mt-3 text-sm leading-relaxed text-gray-600">
{item.description}
</p>
</div>
))}
</div>
</Container>
</section>
)
}