emre/www_geomind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvement

Browse Source
This commit is contained in:
Emre
2025-10-10 22:19:36 +03:00
parent bfd28b7fff
commit c2bce4902a
23 changed files with 488 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/pages/technology/components/TechnologyArchitecture.tsx
View File

@@ -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 (
<motion.div
className="absolute h-3 w-3 rounded-full bg-blue-400"
style={{ left: `${startX}%`, top: `${startY}%` }}
initial={{ opacity: 0, scale: 0 }}
animate={{
y: [-10, -30, -10],
x: [0, Math.sin(index) * 15, 0],
opacity: [0, 0.7, 0],
scale: [0, 1.2, 0],
}}
transition={{
duration: 3,
delay,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
);
};
export const TechnologyArchitecture = () => {
const [activeTab, setActiveTab] = useState<Tab['id']>('compute');
const [activeTab, setActiveTab] = useState<Tab['id']>('zero-os');
const [particles, setParticles] = useState<number[]>([]);
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 (
<section className="py-16 lg:py-24">
<div className="mx-auto max-w-4xl text-center">
@@ -110,17 +168,17 @@ export const TechnologyArchitecture = () => {
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">
<div className="mt-12 lg:mt-16">
<div className="flex flex-wrap gap-3 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 ${
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 ${
activeTab === tab.id
? 'bg-brand-600 text-white shadow-subtle'
: 'bg-white text-slate-500 hover:text-brand-600'
? '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'
}`}
>
{tab.label}
@@ -159,15 +217,131 @@ export const TechnologyArchitecture = () => {
))}
</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">
<div className="hidden h-full rounded-3xl bg-brand-50/50 p-6 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"
>
{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" />
</motion.p>
<motion.p
key={`text-${current.id}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="mt-6 text-sm text-brand-700"
>
{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">
{/* 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"
animate={{
opacity: [0.3, 0.6, 0.3],
scale: [1, 1.05, 1],
}}
transition={{
duration: 4,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
{/* Floating particles */}
{particles.map((i) => (
<FloatingParticle key={`${current.id}-${i}`} delay={i * 0.4} index={i} />
))}
{/* Animated circles */}
<motion.div
className="absolute left-1/4 top-1/4 h-20 w-20 rounded-full bg-blue-300/30"
animate={{
scale: [1, 1.5, 1],
opacity: [0.3, 0.5, 0.3],
x: [0, 20, 0],
y: [0, -10, 0],
}}
transition={{
duration: 5,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
<motion.div
className="absolute right-1/4 bottom-1/4 h-16 w-16 rounded-full bg-indigo-300/30"
animate={{
scale: [1, 1.3, 1],
opacity: [0.3, 0.6, 0.3],
x: [0, -15, 0],
y: [0, 10, 0],
}}
transition={{
duration: 4,
delay: 0.5,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
{/* Central glowing orb */}
<motion.div
className="absolute left-1/2 top-1/2 h-24 w-24 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-blue-400/40 to-purple-400/40 blur-2xl"
animate={{
scale: [1, 1.4, 1],
opacity: [0.4, 0.7, 0.4],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
{/* Animated lines */}
<svg className="absolute inset-0 h-full w-full opacity-30">
<motion.line
x1="10%"
y1="20%"
x2="90%"
y2="80%"
stroke="rgb(99, 102, 241)"
strokeWidth="2"
strokeDasharray="5,5"
animate={{
strokeDashoffset: [0, -20],
opacity: [0.3, 0.6, 0.3],
}}
transition={{
duration: 2,
repeat: Infinity,
ease: 'linear',
}}
/>
<motion.line
x1="90%"
y1="20%"
x2="10%"
y2="80%"
stroke="rgb(147, 51, 234)"
strokeWidth="2"
strokeDasharray="5,5"
animate={{
strokeDashoffset: [0, 20],
opacity: [0.3, 0.6, 0.3],
}}
transition={{
duration: 2.5,
repeat: Infinity,
ease: 'linear',
}}
/>
</svg>
</div>
</div>
</motion.div>
</AnimatePresence>