Designed for Real-World Impact
diff --git a/src/pages/home/components/WhyGeomind.tsx b/src/pages/home/components/WhyGeomind.tsx
index f7b972f..af2f8bc 100644
--- a/src/pages/home/components/WhyGeomind.tsx
+++ b/src/pages/home/components/WhyGeomind.tsx
@@ -29,51 +29,44 @@ const pillars = [
export const WhyGeomind = () => {
return (
-
-
-
-
-
- Why GeoMind
-
- Traditional datacenters are increasingly limited by geopolitics, inefficiency, and
- energy waste. GeoMind eliminates those constraints with a resilient, autonomous
- infrastructure that delivers planetary scalability and sovereign performance anywhere
- in the world.
-
-
-
- {pillars.map((pillar, index) => (
-
- {pillar.title}
-
- {pillar.points.map((point) => (
- -
-
- {point}
-
- ))}
-
-
- ))}
-
+
+
+
+
+ Why GeoMind
+
+ Traditional datacenters are increasingly limited by geopolitics, inefficiency, and energy
+ waste. GeoMind eliminates those constraints with a resilient, autonomous infrastructure that
+ delivers planetary scalability and sovereign performance anywhere in the world.
+
+
+
+ {pillars.map((pillar, index) => (
+
+ {pillar.title}
+
+ {pillar.points.map((point) => (
+ -
+
+ {point}
+
+ ))}
+
+
+ ))}
);
diff --git a/src/pages/technology/components/TechnologicalBenefits.tsx b/src/pages/technology/components/TechnologicalBenefits.tsx
index e40b531..99bec4b 100644
--- a/src/pages/technology/components/TechnologicalBenefits.tsx
+++ b/src/pages/technology/components/TechnologicalBenefits.tsx
@@ -1,30 +1,31 @@
import { motion } from 'framer-motion';
+import { ShieldCheck, Globe, Leaf, LineChart, Layers } from 'lucide-react';
const benefits = [
{
title: 'Ultra-Secure',
description: 'Protect sensitive workloads with end-to-end security.',
- icon: '/images/performance.svg',
+ icon: ShieldCheck,
},
{
title: 'Scales Globally',
description: 'Supports workloads anywhere, from local nodes to planetary scale.',
- icon: '/images/security.svg',
+ icon: Globe,
},
{
title: 'Energy Efficient',
description: 'Up to 10x less energy for specific workloads.',
- icon: '/images/sovereignty.svg',
+ icon: Leaf,
},
{
title: 'Profitable',
description: 'Monetize idle capacity; achieve ROI up to 3x higher.',
- icon: '/images/computing.svg',
+ icon: LineChart,
},
{
title: 'Flexible',
description: 'Compatible with existing infrastructure and hyperscaler requirements.',
- icon: '/images/decentralized.svg',
+ icon: Layers,
},
];
@@ -57,7 +58,7 @@ export const TechnologicalBenefits = () => {
className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/80 p-6 shadow-subtle backdrop-blur"
>
-

+
{benefit.title}
{benefit.description}
diff --git a/src/pages/technology/components/TechnologyArchitecture.tsx b/src/pages/technology/components/TechnologyArchitecture.tsx
index 586e6e9..50f1b56 100644
--- a/src/pages/technology/components/TechnologyArchitecture.tsx
+++ b/src/pages/technology/components/TechnologyArchitecture.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
type Bullet = {
@@ -8,28 +8,52 @@ type Bullet = {
};
type Tab = {
- id: 'compute' | 'data' | 'network';
+ id: 'zero-os' | 'compute' | 'data' | 'network';
label: string;
title: string;
description: string;
bullets: Bullet[];
+ cardText: string;
};
const tabs: Tab[] = [
+ {
+ id: 'zero-os',
+ label: 'Zero-OS',
+ title: 'Zero-OS',
+ description:
+ 'Minimal, self-healing bare-metal OS that powers autonomous nodes across the ThreeFold Grid.',
+ cardText: 'Stateless architecture ensures every boot is secure and unmodified, eliminating configuration drift and security vulnerabilities.',
+ bullets: [
+ {
+ heading: 'Immutable by Design',
+ body: 'Boots statelessly from a signed image each time, removing drift and shrinking the attack surface.',
+ },
+ {
+ heading: 'Autonomous Operations',
+ body: 'Digital twin controllers redeploy workloads to healthy nodes and roll out updates with zero downtime.',
+ },
+ {
+ heading: 'Zero-Trust Networking',
+ body: 'Integrated WireGuard overlay and cryptographic identities secure every peer-to-peer connection.',
+ },
+ {
+ heading: 'Unified Resource Fabric',
+ body: 'Exposes compute, storage, and network primitives through a single API for edge, datacenter, or hybrid deployments.',
+ },
+ ],
+ },
{
id: 'compute',
label: 'Compute',
title: 'Compute',
description: 'A self-healing compute fabric designed for resilience, decentralization, and scale.',
+ cardText: 'Autonomous workload orchestration across distributed nodes ensures maximum uptime and performance.',
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.',
@@ -54,6 +78,7 @@ const tabs: Tab[] = [
label: 'Data',
title: 'Data',
description: 'Private, distributed, and AI-native storage with user sovereignty at its core.',
+ cardText: 'Quantum-safe encryption and distributed redundancy protect your data while maintaining lightning-fast access.',
bullets: [
{
heading: 'Privacy-First',
@@ -75,6 +100,7 @@ const tabs: Tab[] = [
title: 'Network',
description:
'A secure, peer-to-peer internet backbone, self-sustaining, censorship-resistant, and optimized for performance.',
+ cardText: 'Mesh topology with intelligent routing creates a resilient network that adapts to changing conditions.',
bullets: [
{
heading: 'End-to-End Encryption',
@@ -96,10 +122,42 @@ const tabs: Tab[] = [
},
];
+// Floating particle component
+const FloatingParticle = ({ delay, index }: { delay: number; index: number }) => {
+ const startX = (index % 3) * 40 + 10;
+ const startY = Math.floor(index / 3) * 60 + 20;
+
+ return (
+
+ );
+};
+
export const TechnologyArchitecture = () => {
- const [activeTab, setActiveTab] = useState
('compute');
+ const [activeTab, setActiveTab] = useState('zero-os');
+ const [particles, setParticles] = useState([]);
const current = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
+ useEffect(() => {
+ // Generate random particles on tab change
+ setParticles(Array.from({ length: 6 }, (_, i) => i));
+ }, [activeTab]);
+
return (
@@ -110,17 +168,17 @@ export const TechnologyArchitecture = () => {
planetary scale.
-
-
+
+
{tabs.map((tab) => (
-
-
+
+
{current.label}
-
-
- Intelligent agents orchestrate infrastructure layers to guarantee sovereignty and
- resilience while maintaining the elegance of a single control plane.
-
-
+
+
+ {current.cardText}
+
+
+ {/* Animated gradient overlay */}
+
+
+ {/* Floating particles */}
+ {particles.map((i) => (
+
+ ))}
+
+ {/* Animated circles */}
+
+
+
+
+ {/* Central glowing orb */}
+
+
+ {/* Animated lines */}
+
+
diff --git a/src/pages/technology/components/TechnologyStack.tsx b/src/pages/technology/components/TechnologyStack.tsx
index af15a6e..bc26da1 100644
--- a/src/pages/technology/components/TechnologyStack.tsx
+++ b/src/pages/technology/components/TechnologyStack.tsx
@@ -17,20 +17,16 @@ const stackItems = [
export const TechnologyStack = () => {
return (
-
-
-
-
+
+
-
+
Technology Stack
-
An Infrastructure Built for the AI Era
-
+
+ An Infrastructure Built for the AI Era
+
+
Our unique technology stack delivers unmatched security, scalability, and flexibility,
preparing you for the AI workforce of the future.
@@ -43,14 +39,15 @@ export const TechnologyStack = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
- className="overflow-hidden rounded-3xl bg-white/10 backdrop-blur"
+ className="overflow-hidden rounded-3xl"
>
-
+

-
-
{item.title}
-
{item.description}
+
+
{item.title}
+
{item.description}
+
))}
diff --git a/src/pages/usecases/components/UseCasesGrid.tsx b/src/pages/usecases/components/UseCasesGrid.tsx
index 5230b3b..23095cf 100644
--- a/src/pages/usecases/components/UseCasesGrid.tsx
+++ b/src/pages/usecases/components/UseCasesGrid.tsx
@@ -42,7 +42,7 @@ const useCases = [
export const UseCasesGrid = () => {
return (