black theme complete
This commit is contained in:
Emre
@@ -8,7 +8,7 @@ type Bullet = {
|
||||
};
|
||||
|
||||
type Tab = {
|
||||
id: 'zero-os' | 'compute' | 'data' | 'network';
|
||||
id: 'zero-os' | 'compute' | 'gpu' | 'data' | 'network';
|
||||
label: string;
|
||||
title: string;
|
||||
description: string;
|
||||
@@ -120,6 +120,33 @@ const tabs: Tab[] = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'gpu',
|
||||
label: 'GPU Fabric',
|
||||
title: 'Distributed GPU Fabric',
|
||||
description:
|
||||
'A sovereign mesh of GPU capacity that turns idle silicon into revenue while powering global AI workloads and collective intelligence.',
|
||||
cardText:
|
||||
'Autonomous allocation keeps GPUs saturated with high-value workloads, creating a lucrative marketplace for operators and builders alike.',
|
||||
bullets: [
|
||||
{
|
||||
heading: 'Global GPU Federation',
|
||||
body: 'Aggregates GPUs across homes, enterprises, and datacenters into a single pool so large-scale training and inference run close to data without hyperscaler dependence.',
|
||||
},
|
||||
{
|
||||
heading: 'Revenue Engine',
|
||||
body: 'Dynamic marketplace routes AI and rendering jobs to available GPUs, maximizing utilization and delivering steady cash flow to operators.',
|
||||
},
|
||||
{
|
||||
heading: 'Sovereign Collective Intelligence',
|
||||
body: 'Supports collaborative model training where communities contribute data and capacity, unlocking responsible AI networks governed by their stakeholders.',
|
||||
},
|
||||
{
|
||||
heading: 'Zero-OS Integration',
|
||||
body: 'Zero-OS provisions GPU-optimized microVMs with secure drivers, ensuring deterministic performance and remote attestation of every workload.',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Floating particle component
|
||||
@@ -159,10 +186,10 @@ export const TechnologyArchitecture = () => {
|
||||
}, [activeTab]);
|
||||
|
||||
return (
|
||||
<section className="py-16 lg:py-24">
|
||||
<section className="py-16 text-slate-100 lg:py-24">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h2 className="text-3xl font-semibold text-ink sm:text-4xl">Technology Architecture</h2>
|
||||
<p className="mt-4 text-base text-slate-600 sm:text-lg">
|
||||
<h2 className="text-3xl font-semibold text-white sm:text-4xl">Autonomous Software Stack</h2>
|
||||
<p className="mt-4 text-base text-slate-300 sm:text-lg">
|
||||
Seamlessly integrating compute, storage, and networking, GeoMind's architecture delivers secure,
|
||||
scalable, and efficient infrastructure for AI, cloud, and next-generation workloads from edge to
|
||||
planetary scale.
|
||||
@@ -175,10 +202,10 @@ export const TechnologyArchitecture = () => {
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 ${
|
||||
className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950 ${
|
||||
activeTab === tab.id
|
||||
? 'bg-brand-600 text-white shadow-subtle hover:bg-brand-700'
|
||||
: 'border border-slate-200 bg-white text-slate-500 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 hover:shadow-md'
|
||||
: 'border border-white/10 bg-transparent text-slate-300 hover:border-brand-400/50 hover:bg-brand-500/10 hover:text-white hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
@@ -196,18 +223,18 @@ export const TechnologyArchitecture = () => {
|
||||
className="grid gap-8 lg:grid-cols-[2fr,1fr]"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-brand-600">{current.title}</h3>
|
||||
<p className="mt-2 text-base text-slate-600">{current.description}</p>
|
||||
<ul className="mt-6 space-y-4 text-sm text-slate-600">
|
||||
<h3 className="text-xl font-semibold text-brand-200">{current.title}</h3>
|
||||
<p className="mt-2 text-base text-slate-300">{current.description}</p>
|
||||
<ul className="mt-6 space-y-4 text-sm text-slate-300">
|
||||
{current.bullets.map((bullet) => (
|
||||
<li key={bullet.heading} className="rounded-2xl border border-slate-100 bg-white/70 p-4">
|
||||
<p className="text-base font-semibold text-ink">{bullet.heading}</p>
|
||||
<p className="mt-2 text-sm text-slate-600">{bullet.body}</p>
|
||||
<li key={bullet.heading} className="rounded-2xl border border-white/10 bg-black p-4">
|
||||
<p className="text-base font-semibold text-white">{bullet.heading}</p>
|
||||
<p className="mt-2 text-sm text-slate-300">{bullet.body}</p>
|
||||
{bullet.subpoints && (
|
||||
<ul className="mt-3 space-y-2 text-sm text-slate-500">
|
||||
<ul className="mt-3 space-y-2 text-sm text-slate-400">
|
||||
{bullet.subpoints.map((point) => (
|
||||
<li key={point} className="flex gap-3">
|
||||
<span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-300" />
|
||||
<span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-400" />
|
||||
<span>{point}</span>
|
||||
</li>
|
||||
))}
|
||||
@@ -217,13 +244,13 @@ export const TechnologyArchitecture = () => {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="hidden h-full rounded-3xl bg-brand-50/50 p-6 lg:flex lg:flex-col lg:items-start lg:justify-between">
|
||||
<div className="hidden h-full rounded-3xl border border-white/10 bg-black p-6 backdrop-blur lg:flex lg:flex-col lg:items-start lg:justify-between">
|
||||
<motion.p
|
||||
key={`label-${current.id}`}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-500"
|
||||
className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-200"
|
||||
>
|
||||
{current.label}
|
||||
</motion.p>
|
||||
@@ -232,14 +259,14 @@ export const TechnologyArchitecture = () => {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mt-6 text-sm text-brand-700"
|
||||
className="mt-6 text-sm text-slate-200"
|
||||
>
|
||||
{current.cardText}
|
||||
</motion.p>
|
||||
<div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
|
||||
<div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-950/60 via-indigo-950/50 to-purple-900/40">
|
||||
{/* Animated gradient overlay */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-blue-200/40 via-indigo-200/40 to-purple-200/40"
|
||||
className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-indigo-500/20 to-purple-500/20"
|
||||
animate={{
|
||||
opacity: [0.3, 0.6, 0.3],
|
||||
scale: [1, 1.05, 1],
|
||||
|
||||
Reference in New Issue
Block a user