forked from emre/www_projectmycelium_com
refactor: redesign ComputeDesign component layout
- Converted feature list to stats-style cards with centered content and icon-first layout - Replaced vertical Container layout with full-width bordered grid design - Simplified text content to value/name pairs and updated icons
This commit is contained in:
@@ -1,56 +1,54 @@
|
||||
import { Eyebrow, H3, P, CP, CT } from '@/components/Texts'
|
||||
import {
|
||||
ShieldCheckIcon,
|
||||
ArrowPathIcon,
|
||||
RocketLaunchIcon,
|
||||
GlobeAltIcon,
|
||||
ShieldCheckIcon,
|
||||
} from '@heroicons/react/24/solid'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Eyebrow, H3, P, CT, CP } from '@/components/Texts'
|
||||
|
||||
const features = [
|
||||
const stats = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Cryptographically verified deployments',
|
||||
description: 'Every cluster state is signed and checksummed to guarantee truth.',
|
||||
value: 'Signed & Checksummed',
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Stateless execution that scales anywhere',
|
||||
description: 'Run workloads on any node, region, or edge without manual orchestration.',
|
||||
icon: RocketLaunchIcon,
|
||||
value: 'Global Scaling',
|
||||
icon: GlobeAltIcon,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Automatic healing and recovery',
|
||||
description: 'Self-repairing processes ensure workloads stay available and consistent.',
|
||||
value: 'Self-Repairing',
|
||||
icon: ArrowPathIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function ComputeDesign() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl sm:text-center">
|
||||
<Eyebrow>CORE VALUE</Eyebrow>
|
||||
<H3 className="mt-4 text-gray-900">Deterministic by Design</H3>
|
||||
<P className="mt-6 text-gray-600">
|
||||
Every workload runs exactly as declared: no drift, no hidden state, no surprises.
|
||||
</P>
|
||||
</div>
|
||||
<div className="">
|
||||
|
||||
<div className="mx-auto mt-16 max-w-5xl">
|
||||
<dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="relative pl-12">
|
||||
<feature.icon
|
||||
aria-hidden="true"
|
||||
className="absolute left-0 top-1 size-6 text-cyan-600"
|
||||
/>
|
||||
<CT className="font-semibold text-gray-900">{feature.name}</CT>
|
||||
<CP className="mt-1 text-gray-600">{feature.description}</CP>
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-200" />
|
||||
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="mx-auto max-w-7xl border-gray-200">
|
||||
<dl className="grid grid-cols-1 gap-4 lg:gap-14 overflow-hidden text-center lg:grid-cols-3">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-200 lg:border-t-0 lg:border-b-0">
|
||||
<stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
|
||||
<CT className="">{stat.value}</CT>
|
||||
<CP className="mt-1">{stat.name}</CP>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
{/* ✅ Bottom horizontal line + spacing */}
|
||||
<div className="w-full border-b border-gray-200" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { ComputeFeatures } from './ComputeFeatures'
|
||||
import { ComputeArchitecture } from './ComputeArchitecture'
|
||||
import { ComputeUseCases } from './ComputeUseCases'
|
||||
import { CallToAction } from './CallToAction'
|
||||
import { ComputeCapabilities } from './ComputeCapabilities'
|
||||
import { ComputeDesign } from './ComputeDesign'
|
||||
import { ComputeOverview } from './ComputeOverview'
|
||||
import { ComputeCapabilitiesNew } from './ComputeCapabilitiesNew'
|
||||
|
||||
Reference in New Issue
Block a user