Initial commit
This commit is contained in:
Emre
178
src/pages/technology/components/TechnologyArchitecture.tsx
Normal file
178
src/pages/technology/components/TechnologyArchitecture.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
type Bullet = {
|
||||
heading: string;
|
||||
body: string;
|
||||
subpoints?: string[];
|
||||
};
|
||||
|
||||
type Tab = {
|
||||
id: 'compute' | 'data' | 'network';
|
||||
label: string;
|
||||
title: string;
|
||||
description: string;
|
||||
bullets: Bullet[];
|
||||
};
|
||||
|
||||
const tabs: Tab[] = [
|
||||
{
|
||||
id: 'compute',
|
||||
label: 'Compute',
|
||||
title: 'Compute',
|
||||
description: 'A self-healing compute fabric designed for resilience, decentralization, and scale.',
|
||||
bullets: [
|
||||
{
|
||||
heading: 'Autonomous Workload Management',
|
||||
body: 'Workloads automatically migrate to healthy nodes to ensure fault tolerance and high availability.',
|
||||
},
|
||||
{
|
||||
heading: 'P2P Compute Marketplace',
|
||||
body: 'Individuals and enterprises can monetize spare compute and GPU resources through a decentralized network.',
|
||||
},
|
||||
{
|
||||
heading: 'AI & Web3 Ready',
|
||||
body: 'Run LLMs, autonomous agents, blockchain nodes, and immersive metaverse apps at the edge.',
|
||||
},
|
||||
{
|
||||
heading: 'Zero-OS (ZOS)',
|
||||
body: 'Our custom-built, stateless, immutable OS that powers:',
|
||||
subpoints: [
|
||||
'MicroVMs & containerized environments (Kubernetes, Docker, Firecracker).',
|
||||
'AI inference and training workloads.',
|
||||
'Web3 infrastructure and federated learning models.',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'No Hyperscalers',
|
||||
body: 'Fully independent infrastructure managed by intelligent agents on bare metal.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data',
|
||||
label: 'Data',
|
||||
title: 'Data',
|
||||
description: 'Private, distributed, and AI-native storage with user sovereignty at its core.',
|
||||
bullets: [
|
||||
{
|
||||
heading: 'Privacy-First',
|
||||
body: 'End-to-end encryption and redundancy, with no central control.',
|
||||
},
|
||||
{
|
||||
heading: '10x Efficient',
|
||||
body: 'Optimized for performance and sustainability, far surpassing traditional cloud.',
|
||||
},
|
||||
{
|
||||
heading: 'Geo-Aware & Compliant',
|
||||
body: "Data stays where it's supposed to, satisfying regional policies and privacy standards.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'network',
|
||||
label: 'Network',
|
||||
title: 'Network',
|
||||
description:
|
||||
'A secure, peer-to-peer internet backbone, self-sustaining, censorship-resistant, and optimized for performance.',
|
||||
bullets: [
|
||||
{
|
||||
heading: 'End-to-End Encryption',
|
||||
body: 'All communications are secured by design.',
|
||||
},
|
||||
{
|
||||
heading: 'Shortest-Path Routing',
|
||||
body: 'Dynamically finds the most efficient path across the network, reducing latency and cost.',
|
||||
},
|
||||
{
|
||||
heading: 'No Middlemen',
|
||||
body: 'Fully peer-to-peer, removing reliance on centralized ISPs or DNS providers.',
|
||||
},
|
||||
{
|
||||
heading: 'Censorship Resistance',
|
||||
body: 'Built to thrive under pressure, even in restricted or controlled regions.',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const TechnologyArchitecture = () => {
|
||||
const [activeTab, setActiveTab] = useState<Tab['id']>('compute');
|
||||
const current = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
|
||||
|
||||
return (
|
||||
<section className="py-16 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">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12 rounded-3xl border border-slate-200 bg-white/80 p-6 shadow-subtle backdrop-blur lg:p-10">
|
||||
<div className="flex flex-wrap gap-3 border-b border-slate-200 pb-4">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 ${
|
||||
activeTab === tab.id
|
||||
? 'bg-brand-600 text-white shadow-subtle'
|
||||
: 'bg-white text-slate-500 hover:text-brand-600'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={current.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
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">
|
||||
{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>
|
||||
{bullet.subpoints && (
|
||||
<ul className="mt-3 space-y-2 text-sm text-slate-500">
|
||||
{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>{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="hidden h-full rounded-3xl border border-dashed border-brand-100 bg-brand-50/50 p-6 lg:flex lg:flex-col lg:items-start lg:justify-between">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-500">
|
||||
{current.label}
|
||||
</p>
|
||||
<p className="mt-6 text-sm text-brand-700">
|
||||
Intelligent agents orchestrate infrastructure layers to guarantee sovereignty and
|
||||
resilience while maintaining the elegance of a single control plane.
|
||||
</p>
|
||||
<div className="mt-6 h-40 w-full rounded-2xl bg-gradient-to-br from-brand-100 via-white to-brand-200 opacity-80" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user