tfgrid/wwww_3node_tenstorrent
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk 2025-07-24 17:27:51 +02:00
parent f87bec30d2
commit aaca5f6d6c
11 changed files with 427 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@ -25,7 +25,7 @@ function App() {
return ( return (
<Router> <Router>
<Navigation /> <Navigation />
<main className="pt-16"> <main className="pt-16 bg-background text-foreground">
<Routes> <Routes>
<Route path="/" element={<NewHome />} /> <Route path="/" element={<NewHome />} />
<Route path="/tiers" element={<TierSHPage />} /> <Route path="/tiers" element={<TierSHPage />} />

7
src/components/Navigation.jsx
View File

@ -4,6 +4,7 @@ import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/s
import { Globe, Menu } from 'lucide-react' import { Globe, Menu } from 'lucide-react'
import { Link, useLocation } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
import navigationData from '../config/navigation.json' import navigationData from '../config/navigation.json'
import ThemeToggle from './ThemeToggle.jsx'
function Navigation() { function Navigation() {
const location = useLocation() const location = useLocation()
@ -14,7 +15,7 @@ function Navigation() {
} }
return ( return (
<nav className="fixed top-0 w-full bg-white/90 backdrop-blur-md border-b border-slate-200 z-50"> <nav className="fixed top-0 w-full bg-background text-foreground z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
<Link to="/" className="flex items-center space-x-2"> <Link to="/" className="flex items-center space-x-2">
@ -38,6 +39,7 @@ function Navigation() {
<Button asChild className="bg-blue-600 hover:bg-blue-700"> <Button asChild className="bg-blue-600 hover:bg-blue-700">
<Link to="/register">Join Now</Link> <Link to="/register">Join Now</Link>
</Button> </Button>
<ThemeToggle />
</div> </div>
{/* Mobile Navigation */} {/* Mobile Navigation */}
@ -68,6 +70,9 @@ function Navigation() {
<Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link> <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
</Button> </Button>
</SheetClose> </SheetClose>
<SheetClose asChild>
<ThemeToggle />
</SheetClose>
</div> </div>
</SheetContent> </SheetContent>
</Sheet> </Sheet>

12
src/components/NewHome.jsx
View File

@ -3,7 +3,7 @@ import Navigation from './Navigation';
function NewHome() { function NewHome() {
return ( return (
<div className="min-h-screen bg-gray-100 flex flex-col"> <div className="min-h-screen bg-background flex flex-col">
<Navigation /> <Navigation />
<main className="flex-grow flex flex-col items-center justify-center text-center p-4"> <main className="flex-grow flex flex-col items-center justify-center text-center p-4">
<div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg"> <div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
@ -19,17 +19,17 @@ function NewHome() {
preload="metadata" preload="metadata"
></video> ></video>
</div> </div>
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
As ThreeFold Galaxy we deliver the future of Datacenters As ThreeFold Galaxy we deliver the future of Datacenters
</h1> </h1>
<p className="text-xl text-gray-600 max-w-2xl"> <p className="text-xl text-muted-foreground max-w-2xl">
resulting in better performance, greener and more security. resulting in better performance, greener and more security.
</p> </p>
</main> </main>
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white"> <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto text-center"> <div className="max-w-6xl mx-auto text-center">
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p> <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p> <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
</div> </div>
</footer> </footer>
</div> </div>

140
src/components/ProductsPage.jsx
View File

@ -7,7 +7,7 @@ import Navigation from './Navigation'
function ProductsPage() { function ProductsPage() {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"> <div className="min-h-screen bg-background">
{/* Navigation */} {/* Navigation */}
<Navigation /> <Navigation />
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
@ -16,37 +16,37 @@ function ProductsPage() {
{/* Product Overview Hero */} {/* Product Overview Hero */}
<section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8"> <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto text-center space-y-8"> <div className="max-w-5xl mx-auto text-center space-y-8">
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Solutions</Badge> <Badge className="bg-primary/10 text-primary hover:bg-primary/20">Our Solutions</Badge>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight"> <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
Two Solutions, <span className="text-blue-600">Infinite Possibilities</span> Two Solutions, <span className="text-primary">Infinite Possibilities</span>
</h1> </h1>
<p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
ThreeFold's datacenter solutions scale from residential deployments to industrial infrastructure, all powered by the same revolutionary technology stack. ThreeFold's datacenter solutions scale from residential deployments to industrial infrastructure, all powered by the same revolutionary technology stack.
</p> </p>
</div> </div>
</section> </section>
{/* Tier-H Datacenters: Residential & Office Scale */} {/* Tier-H Datacenters: Residential & Office Scale */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start"> <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
{/* Left Column: Text Content */} {/* Left Column: Text Content */}
<div className="space-y-8"> <div className="space-y-8">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-H: Plug-and-Play Digital Infrastructure</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Tier-H: Plug-and-Play Digital Infrastructure</h2>
<p className="text-xl text-slate-600"> <p className="text-xl text-muted-foreground">
A Tier-H datacenter is a decentralized, plug-and-play digital infrastructure solution designed for deployment in homes, offices, and mixed-use buildings. Unlike traditional, centralized datacenters, Tier-H units leverage existing physical spaces to host compute, storage, and networking capacity. A Tier-H datacenter is a decentralized, plug-and-play digital infrastructure solution designed for deployment in homes, offices, and mixed-use buildings. Unlike traditional, centralized datacenters, Tier-H units leverage existing physical spaces to host compute, storage, and networking capacity.
</p> </p>
<p className="text-xl text-slate-600"> <p className="text-xl text-muted-foreground">
By integrating these nodes directly into buildings, we can provide distributed cloud and AI capacity closer to the edge, enabling faster processing, reduced latency, and enhanced data sovereignty. This approach transforms any building into a potential source of digital infrastructure, contributing to a more resilient, decentralized, and accessible global grid. By integrating these nodes directly into buildings, we can provide distributed cloud and AI capacity closer to the edge, enabling faster processing, reduced latency, and enhanced data sovereignty. This approach transforms any building into a potential source of digital infrastructure, contributing to a more resilient, decentralized, and accessible global grid.
</p> </p>
<h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3> <h3 className="text-2xl font-bold text-primary">Perfect For:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Homes, offices, and mixed-use buildings</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Homes, offices, and mixed-use buildings</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Edge computing and local AI processing</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Edge computing and local AI processing</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community networks and local services</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community networks and local services</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Development and testing environments</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Development and testing environments</li>
</ul> </ul>
<h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3> <h3 className="text-2xl font-bold text-primary">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Full compute, storage, and networking capabilities</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Full compute, storage, and networking capabilities</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-touch deployment and maintenance</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-touch deployment and maintenance</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Supports AI workloads, Web2/Web3 applications</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Supports AI workloads, Web2/Web3 applications</li>
@ -63,12 +63,12 @@ function ProductsPage() {
</section> </section>
{/* Tier-S Datacenters: Industrial Scale */} {/* Tier-S Datacenters: Industrial Scale */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto grid md:grid-cols-1 gap-12 items-start"> <div className="max-w-6xl mx-auto grid md:grid-cols-1 gap-12 items-start">
{/* Left Column: Text Content */} {/* Left Column: Text Content */}
<div className="space-y-8"> <div className="space-y-8">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-S: Industrial-Grade Modular Datacenters</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Tier-S: Industrial-Grade Modular Datacenters</h2>
<p className="text-xl text-slate-600"> <p className="text-xl text-muted-foreground">
Comprehensive overview of the enterprise-grade solution for large-scale deployments. Comprehensive overview of the enterprise-grade solution for large-scale deployments.
</p> </p>
{/* Image */} {/* Image */}
@ -77,8 +77,8 @@ function ProductsPage() {
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<div> <div>
<h3 className="text-2xl font-bold text-purple-600 mb-4">Perfect For:</h3> <h3 className="text-2xl font-bold text-primary mb-4">Perfect For:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Government digital infrastructure</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Government digital infrastructure</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li>
@ -87,8 +87,8 @@ function ProductsPage() {
</ul> </ul>
</div> </div>
<div> <div>
<h3 className="text-2xl font-bold text-purple-600 mb-4">Technical Specifications:</h3> <h3 className="text-2xl font-bold text-primary mb-4">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Modular container-based design</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Modular container-based design</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Handle 1+ million transactions per second For Web4</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Handle 1+ million transactions per second For Web4</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit For Web 4</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit For Web 4</li>
@ -103,19 +103,19 @@ function ProductsPage() {
<div className="mt-12 text-center col-span-2"> <div className="mt-12 text-center col-span-2">
<h3 className="text-2xl font-bold text-purple-600 mb-6">Key Benefits:</h3> <h3 className="text-2xl font-bold text-purple-600 mb-6">Key Benefits:</h3>
<div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-8"> <div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader> <CardHeader><CardTitle className="text-primary">Rapid deployment</CardTitle></CardHeader>
<CardContent>Faster setup compared to traditional datacenters.</CardContent> <CardContent>Faster setup compared to traditional datacenters.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-blue-600">Complete sovereignty</CardTitle></CardHeader> <CardHeader><CardTitle className="text-primary">Complete sovereignty</CardTitle></CardHeader>
<CardContent>Full control over data and operations.</CardContent> <CardContent>Full control over data and operations.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader> <CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
<CardContent>Unlimited scalability without bottlenecks.</CardContent> <CardContent>Unlimited scalability without bottlenecks.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader> <CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader>
<CardContent>Self-healing and resilient infrastructure.</CardContent> <CardContent>Self-healing and resilient infrastructure.</CardContent>
</Card> </Card>
@ -125,65 +125,65 @@ function ProductsPage() {
</section> </section>
{/* Technology Stack Comparison */} {/* Technology Stack Comparison */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Shared Technology Foundation</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Shared Technology Foundation</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Both Tier-H and Tier-S solutions are built on the same revolutionary underlying technology stack. Both Tier-H and Tier-S solutions are built on the same revolutionary underlying technology stack.
</p> </p>
</div> </div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full bg-white rounded-lg shadow-md"> <table className="min-w-full bg-card rounded-lg shadow-md">
<thead> <thead>
<tr className="bg-blue-600 text-white"> <tr className="bg-primary text-primary-foreground">
<th className="py-3 px-4 text-left">Feature</th> <th className="py-3 px-4 text-left">Feature</th>
<th className="py-3 px-4 text-left">Tier-H</th> <th className="py-3 px-4 text-left">Tier-H</th>
<th className="py-3 px-4 text-left">Tier-S</th> <th className="py-3 px-4 text-left">Tier-S</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Zero-OS</td> <td className="py-3 px-4">Zero-OS</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Quantum-Safe Storage</td> <td className="py-3 px-4">Quantum-Safe Storage</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Mycelium Network</td> <td className="py-3 px-4">Mycelium Network</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Smart Contract for IT</td> <td className="py-3 px-4">Smart Contract for IT</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">AI/ML Support</td> <td className="py-3 px-4">AI/ML Support</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Kubernetes Compatible</td> <td className="py-3 px-4">Kubernetes Compatible</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
<td className="py-3 px-4">✓</td> <td className="py-3 px-4">✓</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Deployment Time</td> <td className="py-3 px-4">Deployment Time</td>
<td className="py-3 px-4">Days</td> <td className="py-3 px-4">Days</td>
<td className="py-3 px-4">Months</td> <td className="py-3 px-4">Months</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Maintenance</td> <td className="py-3 px-4">Maintenance</td>
<td className="py-3 px-4">Zero-touch</td> <td className="py-3 px-4">Zero-touch</td>
<td className="py-3 px-4">Minimal</td> <td className="py-3 px-4">Minimal</td>
</tr> </tr>
<tr> <tr className="border-b border-border">
<td className="py-3 px-4">Scale</td> <td className="py-3 px-4">Scale</td>
<td className="py-3 px-4">Local/Edge</td> <td className="py-3 px-4">Local/Edge</td>
<td className="py-3 px-4">Regional/Global</td> <td className="py-3 px-4">Regional/Global</td>
@ -195,21 +195,21 @@ function ProductsPage() {
</section> </section>
{/* Use Case Matrix */} {/* Use Case Matrix */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Choose Your Deployment Strategy</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Choose Your Deployment Strategy</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Clear mapping of products to specific use cases. Clear mapping of products to specific use cases.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-green-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-green-600">Tier-H Ideal For:</CardTitle> <CardTitle className="text-green-600">Tier-H Ideal For:</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 text-foreground">
<li>Personal AI assistants and agents</li> <li>Personal AI assistants and agents</li>
<li>Local file storage and backup</li> <li>Local file storage and backup</li>
<li>Home automation and IoT</li> <li>Home automation and IoT</li>
@ -219,12 +219,12 @@ function ProductsPage() {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-blue-600">Tier-S Ideal For:</CardTitle> <CardTitle className="text-primary">Tier-S Ideal For:</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 text-foreground">
<li>National digital infrastructure</li> <li>National digital infrastructure</li>
<li>Regional cloud services</li> <li>Regional cloud services</li>
<li>Large-scale AI training</li> <li>Large-scale AI training</li>
@ -239,24 +239,24 @@ function ProductsPage() {
</section> </section>
{/* Deployment Models */} {/* Deployment Models */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Flexible Deployment Options</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Flexible Deployment Options</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Different ways to implement ThreeFold's solutions. Different ways to implement ThreeFold's solutions.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-blue-600">Single Node Deployment</CardTitle> <CardTitle className="text-primary">Single Node Deployment</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Start with one Tier-H node. Perfect for testing and small applications. Scales by adding more nodes. Start with one Tier-H node. Perfect for testing and small applications. Scales by adding more nodes.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-green-600">Hybrid Deployment</CardTitle> <CardTitle className="text-green-600">Hybrid Deployment</CardTitle>
</CardHeader> </CardHeader>
@ -264,9 +264,9 @@ function ProductsPage() {
Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations. Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-purple-600">Regional Grid</CardTitle> <CardTitle className="text-primary">Regional Grid</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
Multiple Tier-S datacenters. Geo-distributed for sovereignty. Enterprise-grade redundancy. Multiple Tier-S datacenters. Geo-distributed for sovereignty. Enterprise-grade redundancy.
@ -277,21 +277,21 @@ function ProductsPage() {
</section> </section>
{/* Economic Model */} {/* Economic Model */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Investment and Returns</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Investment and Returns</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Revenue and cost structure for each product. Revenue and cost structure for each product.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-blue-600">Tier-H Economics</CardTitle> <CardTitle className="text-primary">Tier-H Economics</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 text-foreground">
<li>Low initial investment</li> <li>Low initial investment</li>
<li>Immediate revenue from spare capacity</li> <li>Immediate revenue from spare capacity</li>
<li>ROI typically within 12-24 months</li> <li>ROI typically within 12-24 months</li>
@ -299,12 +299,12 @@ function ProductsPage() {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-purple-600">Tier-S Economics</CardTitle> <CardTitle className="text-primary">Tier-S Economics</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 text-foreground">
<li>Higher initial investment</li> <li>Higher initial investment</li>
<li>Enterprise-grade revenue potential</li> <li>Enterprise-grade revenue potential</li>
<li>3x higher ROI compared to traditional datacenters</li> <li>3x higher ROI compared to traditional datacenters</li>
@ -319,14 +319,14 @@ function ProductsPage() {
{/* Footer */} {/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white"> <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto text-center"> <div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" /> <Globe className="h-6 w-6 text-primary" />
<span className="text-xl font-bold">ThreeFold Galaxy</span> <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
</div> </div>
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p> <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p> <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
</div> </div>
</footer> </footer>
</div> </div>

26
src/components/RegisterPage.jsx
View File

@ -197,7 +197,7 @@ function RegisterPage() {
} }
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"> <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-950 dark:to-blue-950">
{/* Navigation */} {/* Navigation */}
<Navigation /> <Navigation />
@ -205,10 +205,10 @@ function RegisterPage() {
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8"> <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto text-center space-y-8"> <div className="max-w-3xl mx-auto text-center space-y-8">
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Join the Revolution</Badge> <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Join the Revolution</Badge>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight"> <h1 className="text-4xl md:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
Ready to Transform Your <span className="text-blue-600">Infrastructure?</span> Ready to Transform Your <span className="text-blue-600">Infrastructure?</span>
</h1> </h1>
<p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto"> <p className="text-xl text-slate-600 dark:text-gray-300 leading-relaxed max-w-3xl mx-auto">
Join the growing network of forward-thinking organizations building the future of decentralized digital infrastructure. From single nodes to regional grids, we'll help you deploy sovereign, profitable, and resilient datacenter solutions. Join the growing network of forward-thinking organizations building the future of decentralized digital infrastructure. From single nodes to regional grids, we'll help you deploy sovereign, profitable, and resilient datacenter solutions.
</p> </p>
</div> </div>
@ -247,10 +247,10 @@ function RegisterPage() {
</div> </div>
{/* What Happens Next */} {/* What Happens Next */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-16"> <div className="text-center space-y-8 mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens After You Submit?</h2> <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">What Happens After You Submit?</h2>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
@ -294,10 +294,10 @@ function RegisterPage() {
</section> </section>
{/* Frequently Asked Questions */} {/* Frequently Asked Questions */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Common Questions</h2> <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">Common Questions</h2>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow">
@ -325,9 +325,9 @@ function RegisterPage() {
</section> </section>
{/* Social Proof & Urgency */} {/* Social Proof & Urgency */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
<div className="max-w-4xl mx-auto text-center space-y-8"> <div className="max-w-4xl mx-auto text-center space-y-8">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Join Leading Organizations Already Building the Future</h2> <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">Join Leading Organizations Already Building the Future</h2>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-blue-600">70+ countries with active infrastructure</CardTitle></CardHeader> <CardHeader><CardTitle className="text-blue-600">70+ countries with active infrastructure</CardTitle></CardHeader>
@ -346,7 +346,7 @@ function RegisterPage() {
<CardContent>Empowering local digital infrastructure.</CardContent> <CardContent>Empowering local digital infrastructure.</CardContent>
</Card> </Card>
</div> </div>
<p className="text-lg text-slate-600 mt-8"> <p className="text-lg text-slate-600 dark:text-gray-300 mt-8">
Limited Availability: Priority access for early partners, exclusive pricing for first deployments, limited technical support capacity, growing demand for deployment slots. Limited Availability: Priority access for early partners, exclusive pricing for first deployments, limited technical support capacity, growing demand for deployment slots.
</p> </p>
<p className="text-xl font-bold text-blue-600 mt-4">Don't Wait - The Future is Being Built Now</p> <p className="text-xl font-bold text-blue-600 mt-4">Don't Wait - The Future is Being Built Now</p>
@ -354,14 +354,14 @@ function RegisterPage() {
</section> </section>
{/* Footer */} {/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white"> <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white dark:bg-gray-950 dark:text-gray-200">
<div className="max-w-6xl mx-auto text-center"> <div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" /> <Globe className="h-6 w-6 text-blue-400" />
<span className="text-xl font-bold">ThreeFold Galaxy</span> <span className="text-xl font-bold">ThreeFold Galaxy</span>
</div> </div>
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p> <p className="text-slate-400 dark:text-gray-400">Building the new internet, together in our sovereign digital freezone.</p>
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p> <p className="text-sm text-slate-500 dark:text-gray-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
</div> </div>
</footer> </footer>
</div> </div>

262
src/components/TechnologyPage.jsx
View File

@ -10,7 +10,7 @@ import Navigation from './Navigation'
function TechnologyPage() { function TechnologyPage() {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"> <div className="min-h-screen bg-background">
<Navigation /> <Navigation />
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<img src="/src/assets/tenstorrent_galaxy_internal_components.png" alt="Tenstorrent Galaxy Internal Components" className="w-full h-auto rounded-lg shadow-lg" /> <img src="/src/assets/tenstorrent_galaxy_internal_components.png" alt="Tenstorrent Galaxy Internal Components" className="w-full h-auto rounded-lg shadow-lg" />
@ -19,59 +19,59 @@ function TechnologyPage() {
{/* Technology Hero Section */} {/* Technology Hero Section */}
<section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8"> <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto text-center space-y-8"> <div className="max-w-5xl mx-auto text-center space-y-8">
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Innovations</Badge> <Badge className="bg-primary/10 text-primary hover:bg-primary/20">Our Innovations</Badge>
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight"> <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
Infrastructure Reimagined from <span className="text-blue-600">First Principles</span> Infrastructure Reimagined from <span className="text-primary">First Principles</span>
</h1> </h1>
<p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems. ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems.
</p> </p>
</div> </div>
</section> </section>
{/* Core Technology Pillars */} {/* Core Technology Pillars */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Three Pillars of Innovation</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Three Pillars of Innovation</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Overview of the three main technology innovations that power ThreeFold. Overview of the three main technology innovations that power ThreeFold.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" /> <Cpu className="w-16 h-16 mx-auto mb-4 text-primary" />
<CardTitle className="text-blue-600">Zero-OS Compute System</CardTitle> <CardTitle className="text-primary">Zero-OS Compute System</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-1 text-sm text-slate-700"> <ul className="space-y-1 text-sm text-foreground">
<li>Stateless, autonomous operating system</li> <li>Stateless, autonomous operating system</li>
<li>Depending the usecase can more efficient than traditional systems</li> <li>Depending the usecase can more efficient than traditional systems</li>
<li>Self-healing and cryptographically secured</li> <li>Self-healing and cryptographically secured</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-green-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Database className="w-16 h-16 mx-auto mb-4 text-green-600" /> <Database className="w-16 h-16 mx-auto mb-4 text-green-600" />
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle> <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-1 text-sm text-slate-700"> <ul className="space-y-1 text-sm text-foreground">
<li>Mathematical data dispersion (not replication)</li> <li>Mathematical data dispersion (not replication)</li>
<li>20% overhead vs 400% in traditional systems</li> <li>20% overhead vs 400% in traditional systems</li>
<li>Unbreakable and self-healing architecture</li> <li>Unbreakable and self-healing architecture</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Network className="w-16 h-16 mx-auto mb-4 text-purple-600" /> <Network className="w-16 h-16 mx-auto mb-4 text-primary" />
<CardTitle className="text-purple-600">Mycelium Network</CardTitle> <CardTitle className="text-primary">Mycelium Network</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-1 text-sm text-slate-700"> <ul className="space-y-1 text-sm text-foreground">
<li>Peer-to-peer mesh overlay network</li> <li>Peer-to-peer mesh overlay network</li>
<li>End-to-end encryption with shortest path routing</li> <li>End-to-end encryption with shortest path routing</li>
<li>Resilient to internet failures and attacks</li> <li>Resilient to internet failures and attacks</li>
@ -83,26 +83,26 @@ function TechnologyPage() {
</section> </section>
{/* Zero-OS: Autonomous Compute */} {/* Zero-OS: Autonomous Compute */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Zero-OS: The World's First Stateless Cloud OS</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Zero-OS: The World's First Stateless Cloud OS</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Deep dive into the revolutionary operating system that powers ThreeFold. Deep dive into the revolutionary operating system that powers ThreeFold.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Core Principles:</h3> <h3 className="text-2xl font-bold text-primary">Core Principles:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Autonomy:</strong> Operates without human maintenance</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Autonomy:</strong> Operates without human maintenance</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Simplicity:</strong> Avoid layers, less is more</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Simplicity:</strong> Avoid layers, less is more</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Stateless:</strong> Immune to corruption</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Stateless:</strong> Immune to corruption</li>
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Unique:</h3> <h3 className="text-2xl font-bold text-primary">Unique:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Install:</strong> Boots from network, no local installation</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Install:</strong> Boots from network, no local installation</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Images:</strong> Container images 1000x smaller (2MB vs 2GB)</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Images:</strong> Container images 1000x smaller (2MB vs 2GB)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Smart Contract for IT:</strong> Cryptographically secured deployments</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Smart Contract for IT:</strong> Cryptographically secured deployments</li>
@ -111,17 +111,17 @@ function TechnologyPage() {
</div> </div>
</div> </div>
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Technical Advantages:</h3> <h3 className="text-2xl font-bold text-primary mb-6">Technical Advantages:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader> <CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader>
<CardContent>Ensures integrity of all components.</CardContent> <CardContent>Ensures integrity of all components.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-purple-600">Self-healing and autonomous</CardTitle></CardHeader> <CardHeader><CardTitle className="text-primary">Self-healing and autonomous</CardTitle></CardHeader>
<CardContent>Operates without human intervention.</CardContent> <CardContent>Operates without human intervention.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-orange-600">Compatible with Kubernetes and VMs</CardTitle></CardHeader> <CardHeader><CardTitle className="text-orange-600">Compatible with Kubernetes and VMs</CardTitle></CardHeader>
<CardContent>Flexible for diverse workloads.</CardContent> <CardContent>Flexible for diverse workloads.</CardContent>
</Card> </Card>
@ -131,11 +131,11 @@ function TechnologyPage() {
</section> </section>
{/* Quantum-Safe Storage: Unbreakable Data */} {/* Quantum-Safe Storage: Unbreakable Data */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Quantum-Safe Storage: Mathematics Over Replication</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Quantum-Safe Storage: Mathematics Over Replication</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Explanation of the mathematical storage breakthrough that ensures unbreakable data. Explanation of the mathematical storage breakthrough that ensures unbreakable data.
</p> </p>
</div> </div>
@ -145,18 +145,18 @@ function TechnologyPage() {
</div> </div>
<div className="md:col-span-1 space-y-6"> <div className="md:col-span-1 space-y-6">
<h3 className="text-2xl font-bold text-green-600">How It Works:</h3> <h3 className="text-2xl font-bold text-green-600">How It Works:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Data is fragmented and transformed into mathematical equations</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Data is fragmented and transformed into mathematical equations</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Equations are distributed across multiple nodes</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Equations are distributed across multiple nodes</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Original data fragments are discarded</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Original data fragments are discarded</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Any subset of equations can reconstruct the original data</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Any subset of equations can reconstruct the original data</li>
</ul> </ul>
<h3 className="text-2xl font-bold text-green-600">Zero-Knowledge Architecture:</h3> <h3 className="text-2xl font-bold text-green-600">Zero-Knowledge Architecture:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> No single node knows what it stores</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> No single node knows what it stores</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Cryptographic proof without data exposure</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Cryptographic proof without data exposure</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Post-quantum security resistant</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Post-quantum security resistant</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Self-healing against bitrot and failures</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Self-healing against bitrot and failures</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -164,28 +164,28 @@ function TechnologyPage() {
</section> </section>
{/* Mycelium Network: Intelligent Connectivity */} {/* Mycelium Network: Intelligent Connectivity */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Mycelium Network: The Internet's Missing Layer</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Mycelium Network: The Internet's Missing Layer</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Technical deep dive into the networking innovation that ensures intelligent and resilient connectivity. Technical deep dive into the networking innovation that ensures intelligent and resilient connectivity.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 items-center"> <div className="grid md:grid-cols-2 gap-8 items-center">
<div className="md:col-span-1 space-y-6"> <div className="md:col-span-1 space-y-6">
<h3 className="text-2xl font-bold text-teal-600">Core Capabilities:</h3> <h3 className="text-2xl font-bold text-primary">Core Capabilities:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>End-to-End Encryption</strong> </li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>End-to-End Encryption</strong> </li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Shortest Path Routing</strong> </li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Shortest Path Routing</strong> </li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Geographic Awareness:</strong></li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Geographic Awareness:</strong></li>
</ul> </ul>
<h3 className="text-2xl font-bold text-teal-600 mt-8">Technical Implementation:</h3> <h3 className="text-2xl font-bold text-primary mt-8">Technical Implementation:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Peer-to-peer mesh topology</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Peer-to-peer mesh topology</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Up to 1 Gbps throughput per agent</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Up to 1 Gbps throughput per agent</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Protocol-agnostic data transport</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Protocol-agnostic data transport</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Authentication-based security (not perimeter-based)</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Authentication-based security (not perimeter-based)</li>
</ul> </ul>
</div> </div>
<div className="md:col-span-1 flex justify-center"> <div className="md:col-span-1 flex justify-center">
@ -193,18 +193,18 @@ function TechnologyPage() {
</div> </div>
</div> </div>
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-teal-600 mb-6">Beyond Traditional Networking:</h3> <h3 className="text-2xl font-bold text-primary mb-6">Beyond Traditional Networking:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-blue-600">Survives internet outages</CardTitle></CardHeader> <CardHeader><CardTitle className="text-primary">Survives internet outages</CardTitle></CardHeader>
<CardContent>Ensures continuity even during major disruptions.</CardContent> <CardContent>Ensures continuity even during major disruptions.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader> <CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader>
<CardContent>Facilitates direct communication between users.</CardContent> <CardContent>Facilitates direct communication between users.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-purple-600">Reduces latency</CardTitle></CardHeader> <CardHeader><CardTitle className="text-primary">Reduces latency</CardTitle></CardHeader>
<CardContent>Through optimal path selection and local routing.</CardContent> <CardContent>Through optimal path selection and local routing.</CardContent>
</Card> </Card>
</div> </div>
@ -213,18 +213,18 @@ function TechnologyPage() {
</section> </section>
{/* Architectural Innovations */} {/* Architectural Innovations */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Integrated Architecture: Greater Than Sum of Parts</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Integrated Architecture: Greater Than Sum of Parts</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
How ThreeFold's core technologies work together to create a superior infrastructure. How ThreeFold's core technologies work together to create a superior infrastructure.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Geo-Aware Infrastructure:</h3> <h3 className="text-2xl font-bold text-primary">Geo-Aware Infrastructure:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data sovereignty with precise location control</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data sovereignty with precise location control</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compliance with local regulations (GDPR, etc.)</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compliance with local regulations (GDPR, etc.)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Shortest physical paths for efficiency</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Shortest physical paths for efficiency</li>
@ -232,8 +232,8 @@ function TechnologyPage() {
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Smart Contract for IT:</h3> <h3 className="text-2xl font-bold text-primary">Smart Contract for IT:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cryptographically secured deployments</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cryptographically secured deployments</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Multi-signature authentication</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Multi-signature authentication</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable execution records on blockchain</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable execution records on blockchain</li>
@ -246,60 +246,60 @@ function TechnologyPage() {
</section> </section>
{/* Technical Comparisons */} {/* Technical Comparisons */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">ThreeFold vs Traditional Infrastructure</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">ThreeFold vs Traditional Infrastructure</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Side-by-side comparison with traditional approaches. Side-by-side comparison with traditional approaches.
</p> </p>
</div> </div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full bg-white rounded-lg shadow-md"> <table className="min-w-full bg-card rounded-lg shadow-md">
<thead> <thead>
<tr className="bg-blue-600 text-white"> <tr className="bg-primary text-primary-foreground">
<th className="py-3 px-4 text-left">Aspect</th> <th className="py-3 px-4 text-left">Aspect</th>
<th className="py-3 px-4 text-left">Traditional Cloud</th> <th className="py-3 px-4 text-left">Traditional Cloud</th>
<th className="py-3 px-4 text-left">ThreeFold</th> <th className="py-3 px-4 text-left">ThreeFold</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">OS Deployment</td> <td className="py-3 px-4">OS Deployment</td>
<td className="py-3 px-4">Local installation, complex updates</td> <td className="py-3 px-4">Local installation, complex updates</td>
<td className="py-3 px-4 font-semibold">Network boot, stateless</td> <td className="py-3 px-4 font-semibold">Network boot, stateless</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Container Images</td> <td className="py-3 px-4">Container Images</td>
<td className="py-3 px-4">2GB+ monolithic images</td> <td className="py-3 px-4">2GB+ monolithic images</td>
<td className="py-3 px-4 font-semibold">2MB metadata-only</td> <td className="py-3 px-4 font-semibold">2MB metadata-only</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Storage Redundancy</td> <td className="py-3 px-4">Storage Redundancy</td>
<td className="py-3 px-4">400% overhead (4 copies)</td> <td className="py-3 px-4">400% overhead (4 copies)</td>
<td className="py-3 px-4 font-semibold">20% overhead (math)</td> <td className="py-3 px-4 font-semibold">20% overhead (math)</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Network Security</td> <td className="py-3 px-4">Network Security</td>
<td className="py-3 px-4">Perimeter-based firewalls</td> <td className="py-3 px-4">Perimeter-based firewalls</td>
<td className="py-3 px-4 font-semibold">End-to-end encryption</td> <td className="py-3 px-4 font-semibold">End-to-end encryption</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Management</td> <td className="py-3 px-4">Management</td>
<td className="py-3 px-4">Human administrators</td> <td className="py-3 px-4">Human administrators</td>
<td className="py-3 px-4 font-semibold">Autonomous agents</td> <td className="py-3 px-4 font-semibold">Autonomous agents</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Scalability</td> <td className="py-3 px-4">Scalability</td>
<td className="py-3 px-4">Vertical, expensive</td> <td className="py-3 px-4">Vertical, expensive</td>
<td className="py-3 px-4 font-semibold">Horizontal, unlimited</td> <td className="py-3 px-4 font-semibold">Horizontal, unlimited</td>
</tr> </tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Energy Efficiency</td> <td className="py-3 px-4">Energy Efficiency</td>
<td className="py-3 px-4">High consumption</td> <td className="py-3 px-4">High consumption</td>
<td className="py-3 px-4 font-semibold">10x more efficient</td> <td className="py-3 px-4 font-semibold">10x more efficient</td>
</tr> </tr>
<tr> <tr className="border-b border-border">
<td className="py-3 px-4">Data Sovereignty</td> <td className="py-3 px-4">Data Sovereignty</td>
<td className="py-3 px-4">Limited control</td> <td className="py-3 px-4">Limited control</td>
<td className="py-3 px-4 font-semibold">Complete control</td> <td className="py-3 px-4 font-semibold">Complete control</td>
@ -311,18 +311,18 @@ function TechnologyPage() {
</section> </section>
{/* Implementation Status & Roadmap */} {/* Implementation Status & Roadmap */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Production-Ready Technology & Roadmap</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Production-Ready Technology & Roadmap</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Current status and future developments of ThreeFold's technology. Current status and future developments of ThreeFold's technology.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Currently Available:</h3> <h3 className="text-2xl font-bold text-primary">Currently Available:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-OS Core: Production (multiple years)</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-OS Core: Production (multiple years)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Quantum-Safe Storage: Production</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Quantum-Safe Storage: Production</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Mycelium Network: Beta (v3.13+)</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Mycelium Network: Beta (v3.13+)</li>
@ -330,8 +330,8 @@ function TechnologyPage() {
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Coming H2 2025:</h3> <h3 className="text-2xl font-bold text-primary">Coming H2 2025:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Smart Contract for IT: General availability</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Smart Contract for IT: General availability</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Geo-Aware AI Agents (3AI)</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Geo-Aware AI Agents (3AI)</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 3CORE Ledger: Geo-fenced blockchain</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 3CORE Ledger: Geo-fenced blockchain</li>
@ -340,8 +340,8 @@ function TechnologyPage() {
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Live Deployment Stats:</h3> <h3 className="text-2xl font-bold text-primary">Live Deployment Stats:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li>2000+ nodes across 70+ countries</li> <li>2000+ nodes across 70+ countries</li>
<li>60,000+ CPU cores active</li> <li>60,000+ CPU cores active</li>
<li>1+ million contracts processed</li> <li>1+ million contracts processed</li>
@ -353,18 +353,18 @@ function TechnologyPage() {
</section> </section>
{/* Open Source & Standards */} {/* Open Source & Standards */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Open Principles</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Built on Open Principles</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Commitment to openness and interoperability. Commitment to openness and interoperability.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Open Source Components:</h3> <h3 className="text-2xl font-bold text-primary">Open Source Components:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Core technology stack available on GitHub</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Core technology stack available on GitHub</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community-driven development</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community-driven development</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Transparent security auditing</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Transparent security auditing</li>
@ -372,8 +372,8 @@ function TechnologyPage() {
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Standards Compliance:</h3> <h3 className="text-2xl font-bold text-primary">Standards Compliance:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> POSIX filesystem compatibility</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> POSIX filesystem compatibility</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Docker and Kubernetes support</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Docker and Kubernetes support</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Standard networking protocols</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Standard networking protocols</li>
@ -381,8 +381,8 @@ function TechnologyPage() {
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Developer Ecosystem:</h3> <h3 className="text-2xl font-bold text-primary">Developer Ecosystem:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li>Comprehensive APIs and SDKs</li> <li>Comprehensive APIs and SDKs</li>
<li>Extensive documentation</li> <li>Extensive documentation</li>
<li>Active community support</li> <li>Active community support</li>
@ -394,18 +394,18 @@ function TechnologyPage() {
</section> </section>
{/* Security & Compliance */} {/* Security & Compliance */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Security by Design & Compliance</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Security by Design & Compliance</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Advanced security features and compliance capabilities. Advanced security features and compliance capabilities.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Cryptographic Foundation:</h3> <h3 className="text-2xl font-bold text-primary">Cryptographic Foundation:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> End-to-end encryption everywhere</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> End-to-end encryption everywhere</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Post-quantum cryptography ready</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Post-quantum cryptography ready</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-knowledge data storage</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-knowledge data storage</li>
@ -413,8 +413,8 @@ function TechnologyPage() {
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Compliance Features:</h3> <h3 className="text-2xl font-bold text-primary">Compliance Features:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-foreground">
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> GDPR compliance through data sovereignty</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> GDPR compliance through data sovereignty</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regulatory jurisdiction control</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regulatory jurisdiction control</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Audit-ready transaction logs</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Audit-ready transaction logs</li>
@ -423,21 +423,21 @@ function TechnologyPage() {
</div> </div>
</div> </div>
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Threat Resistance:</h3> <h3 className="text-2xl font-bold text-primary mb-6">Threat Resistance:</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-blue-600">Immune to ransomware</CardTitle></CardHeader> <CardHeader><CardTitle className="text-primary">Immune to ransomware</CardTitle></CardHeader>
<CardContent>Stateless OS prevents persistent threats.</CardContent> <CardContent>Stateless OS prevents persistent threats.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader> <CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader>
<CardContent>Distributed architecture mitigates attacks.</CardContent> <CardContent>Distributed architecture mitigates attacks.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-purple-600">Quantum computing resistant</CardTitle></CardHeader> <CardHeader><CardTitle className="text-primary">Quantum computing resistant</CardTitle></CardHeader>
<CardContent>Future-proof security protocols.</CardContent> <CardContent>Future-proof security protocols.</CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader><CardTitle className="text-orange-600">Censorship resistant</CardTitle></CardHeader> <CardHeader><CardTitle className="text-orange-600">Censorship resistant</CardTitle></CardHeader>
<CardContent>Mycelium network routes around blocking.</CardContent> <CardContent>Mycelium network routes around blocking.</CardContent>
</Card> </Card>
@ -447,21 +447,21 @@ function TechnologyPage() {
</section> </section>
{/* Technical Resources */} {/* Technical Resources */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dive Deeper into ThreeFold Technology</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Dive Deeper into ThreeFold Technology</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Access comprehensive technical documentation and resources. Access comprehensive technical documentation and resources.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-blue-600">Technical Documentation</CardTitle> <CardTitle className="text-primary">Technical Documentation</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 text-foreground">
<li>Architecture whitepapers</li> <li>Architecture whitepapers</li>
<li>API documentation</li> <li>API documentation</li>
<li>Deployment guides</li> <li>Deployment guides</li>
@ -469,13 +469,13 @@ function TechnologyPage() {
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-purple-600">Try It Yourself</CardTitle> <CardTitle className="text-primary">Try It Yourself</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 text-foreground">
<li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://dashboard.grid.tf</a></li> <li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">https://dashboard.grid.tf</a></li>
<li>GitHub repositories</li> <li>GitHub repositories</li>
<li>Developer sandbox</li> <li>Developer sandbox</li>
<li>Community forums</li> <li>Community forums</li>
@ -484,8 +484,8 @@ function TechnologyPage() {
</Card> </Card>
</div> </div>
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Get Support:</h3> <h3 className="text-2xl font-bold text-primary mb-6">Get Support:</h3>
<ul className="space-y-2 text-lg text-slate-700"> <ul className="space-y-2 text-lg text-foreground">
<li>Technical community</li> <li>Technical community</li>
<li>Professional services</li> <li>Professional services</li>
<li>Training programs</li> <li>Training programs</li>
@ -496,13 +496,13 @@ function TechnologyPage() {
</section> </section>
{/* Footer */} {/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white"> <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto text-center"> <div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" /> <Globe className="h-6 w-6 text-primary" />
<span className="text-xl font-bold">ThreeFold Galaxy</span> <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
</div> </div>
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p> <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
</div> </div>
</footer> </footer>
</div> </div>

25
src/components/ThemeToggle.jsx Normal file
View File

@ -0,0 +1,25 @@
import React, { useState, useEffect } from 'react';
const ThemeToggle = () => {
const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}, [theme]);
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<button
onClick={toggleTheme}
className="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
>
{theme === 'light' ? '🌙' : '☀️'}
</button>
);
};
export default ThemeToggle;

128
src/components/TierSHPage.jsx
View File

@ -20,7 +20,7 @@ function TierSHPage() {
} }
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"> <div className="min-h-screen bg-background text-foreground">
{/* Navigation */} {/* Navigation */}
<Navigation /> <Navigation />
@ -30,23 +30,23 @@ function TierSHPage() {
<div className="grid lg:grid-cols-2 gap-12 items-center"> <div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="space-y-8"> <div className="space-y-8">
<div className="space-y-4"> <div className="space-y-4">
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">The Future of Infrastructure</Badge> <Badge className="bg-primary/10 text-primary hover:bg-primary/20">The Future of Infrastructure</Badge>
<h1 className="text-2xl md:text-4xl font-bold text-slate-900 leading-tight"> <h1 className="text-2xl md:text-4xl font-bold text-foreground leading-tight">
Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized. Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
</h1> </h1>
<p className="text-xl text-slate-600 leading-relaxed"> <p className="text-xl text-muted-foreground leading-relaxed">
ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control. ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control.
</p> </p>
</div> </div>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px- py-3"> <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-lg px- py-3">
<Link to="/register">Register Interest</Link> <Link to="/register">Register Interest</Link>
</Button> </Button>
<Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3"> <Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3">
Learn More About Products Learn More About Products
</Button> </Button>
</div> </div>
<p className="text-sm text-slate-500">Join the revolution in decentralized digital infrastructure.</p> <p className="text-sm text-muted-foreground">Join the revolution in decentralized digital infrastructure.</p>
</div> </div>
<div className="relative"> <div className="relative">
<video <video
@ -65,16 +65,16 @@ function TierSHPage() {
</section> </section>
{/* What Are Tier-S and Tier-H? */} {/* What Are Tier-S and Tier-H? */}
<section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Are Tier-S and Tier-H Datacenters?</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">What Are Tier-S and Tier-H Datacenters?</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
ThreeFold introduces a new class of decentralized digital infrastructure: Tier-S for industrial scale and Tier-H for residential/office scale. ThreeFold introduces a new class of decentralized digital infrastructure: Tier-S for industrial scale and Tier-H for residential/office scale.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" /> <Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
<CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle> <CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle>
@ -83,7 +83,7 @@ function TierSHPage() {
<p className="mb-2">Modular, industrial-grade containers that handle over 1 million transactions per second and support 100,000+ users per unit. Perfect for industrial-scale AI and cloud deployment.</p> <p className="mb-2">Modular, industrial-grade containers that handle over 1 million transactions per second and support 100,000+ users per unit. Perfect for industrial-scale AI and cloud deployment.</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-green-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Home className="w-16 h-16 mx-auto mb-4 text-green-600" /> <Home className="w-16 h-16 mx-auto mb-4 text-green-600" />
<CardTitle className="text-green-600">Tier-H Datacenters</CardTitle> <CardTitle className="text-green-600">Tier-H Datacenters</CardTitle>
@ -97,16 +97,16 @@ function TierSHPage() {
</section> </section>
{/* From Real Estate to Digital Infrastructure */} {/* From Real Estate to Digital Infrastructure */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">From Real Estate to Digital Infrastructure</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">From Real Estate to Digital Infrastructure</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities. Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" /> <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
<CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle> <CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle>
@ -115,7 +115,7 @@ function TierSHPage() {
Your building can produce essential digital resources. Your building can produce essential digital resources.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Brain className="w-12 h-12 mx-auto mb-4 text-green-600" /> <Brain className="w-12 h-12 mx-auto mb-4 text-green-600" />
<CardTitle className="text-green-600">AI Inference Power</CardTitle> <CardTitle className="text-green-600">AI Inference Power</CardTitle>
@ -124,7 +124,7 @@ function TierSHPage() {
Host AI workloads and contribute to decentralized AI. Host AI workloads and contribute to decentralized AI.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" /> <DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" />
<CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle> <CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle>
@ -134,23 +134,23 @@ function TierSHPage() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<p className="text-center text-xl text-slate-600 mt-12"> <p className="text-center text-xl text-muted-foreground mt-12">
Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard. Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
</p> </p>
</div> </div>
</section> </section>
{/* Why Real Estate Developers Should Join */} {/* Why Real Estate Developers Should Join */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Why Real Estate Developers Should Join</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Why Real Estate Developers Should Join</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Transform your properties into digital assets and unlock new revenue streams. Transform your properties into digital assets and unlock new revenue streams.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-600"> <CardTitle className="flex items-center gap-2 text-blue-600">
<DollarSign className="h-5 w-5" /> <DollarSign className="h-5 w-5" />
@ -161,7 +161,7 @@ function TierSHPage() {
Monetize idle compute, bandwidth, and storage capacity. Monetize idle compute, bandwidth, and storage capacity.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-green-600"> <CardTitle className="flex items-center gap-2 text-green-600">
<TrendingUp className="h-5 w-5" /> <TrendingUp className="h-5 w-5" />
@ -172,7 +172,7 @@ function TierSHPage() {
Market properties as cloud-enabled and future-proof. Market properties as cloud-enabled and future-proof.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-600"> <CardTitle className="flex items-center gap-2 text-purple-600">
<Zap className="h-5 w-5" /> <Zap className="h-5 w-5" />
@ -183,7 +183,7 @@ function TierSHPage() {
10x less energy vs traditional datacenters, resilient to outages. 10x less energy vs traditional datacenters, resilient to outages.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-orange-600"> <CardTitle className="flex items-center gap-2 text-orange-600">
<CheckCircle className="h-5 w-5" /> <CheckCircle className="h-5 w-5" />
@ -194,7 +194,7 @@ function TierSHPage() {
No IT expertise required for installation and operation. No IT expertise required for installation and operation.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-teal-600"> <CardTitle className="flex items-center gap-2 text-teal-600">
<Shield className="h-5 w-5" /> <Shield className="h-5 w-5" />
@ -205,7 +205,7 @@ function TierSHPage() {
Data stays local and private, under your control. Data stays local and private, under your control.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-indigo-600"> <CardTitle className="flex items-center gap-2 text-indigo-600">
<Globe className="h-5 w-5" /> <Globe className="h-5 w-5" />
@ -221,16 +221,16 @@ function TierSHPage() {
</section> </section>
{/* Technical Advantages */} {/* Technical Advantages */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Revolutionary Technology</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Built on Revolutionary Technology</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Key differentiators that make ThreeFold superior to traditional infrastructure. Key differentiators that make ThreeFold superior to traditional infrastructure.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" /> <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
<CardTitle className="text-blue-600">Zero-OS</CardTitle> <CardTitle className="text-blue-600">Zero-OS</CardTitle>
@ -239,7 +239,7 @@ function TierSHPage() {
Stateless, self-healing operating system for autonomous compute. Stateless, self-healing operating system for autonomous compute.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-green-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Database className="w-12 h-12 mx-auto mb-4 text-green-600" /> <Database className="w-12 h-12 mx-auto mb-4 text-green-600" />
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle> <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
@ -248,7 +248,7 @@ function TierSHPage() {
Unbreakable data protection with 10x efficiency through mathematical dispersion. Unbreakable data protection with 10x efficiency through mathematical dispersion.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<Network className="w-12 h-12 mx-auto mb-4 text-purple-600" /> <Network className="w-12 h-12 mx-auto mb-4 text-purple-600" />
<CardTitle className="text-purple-600">Mycelium Network</CardTitle> <CardTitle className="text-purple-600">Mycelium Network</CardTitle>
@ -257,7 +257,7 @@ function TierSHPage() {
Mesh networking that routes around failures, ensuring resilient connectivity. Mesh networking that routes around failures, ensuring resilient connectivity.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-orange-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-orange-600"> <CardTitle className="flex items-center gap-2 text-orange-600">
<Shield className="h-5 w-5" /> <Shield className="h-5 w-5" />
@ -268,7 +268,7 @@ function TierSHPage() {
Autonomous, cryptographically secured deployments for IT resources. Autonomous, cryptographically secured deployments for IT resources.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-teal-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-teal-600"> <CardTitle className="flex items-center gap-2 text-teal-600">
<Brain className="h-5 w-5" /> <Brain className="h-5 w-5" />
@ -279,7 +279,7 @@ function TierSHPage() {
Private AI agents that respect boundaries and data sovereignty. Private AI agents that respect boundaries and data sovereignty.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow border-indigo-200"> <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-indigo-600"> <CardTitle className="flex items-center gap-2 text-indigo-600">
<Globe className="h-5 w-5" /> <Globe className="h-5 w-5" />
@ -295,16 +295,16 @@ function TierSHPage() {
</section> </section>
{/* Real Cost Comparison */} {/* Real Cost Comparison */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dramatic Cost Savings</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Dramatic Cost Savings</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Experience significant cost advantages compared to traditional cloud providers. Experience significant cost advantages compared to traditional cloud providers.
</p> </p>
</div> </div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full bg-white rounded-lg shadow-md"> <table className="min-w-full bg-card rounded-lg shadow-md">
<thead> <thead>
<tr className="bg-blue-600 text-white"> <tr className="bg-blue-600 text-white">
<th className="py-3 px-4 text-left">Service</th> <th className="py-3 px-4 text-left">Service</th>
@ -313,7 +313,7 @@ function TierSHPage() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="border-b border-slate-200"> <tr className="border-b border-border">
<td className="py-3 px-4">Storage (1TB + 100GB Transfer)</td> <td className="py-3 px-4">Storage (1TB + 100GB Transfer)</td>
<td className="py-3 px-4 font-semibold">Less than $5/month</td> <td className="py-3 px-4 font-semibold">Less than $5/month</td>
<td className="py-3 px-4">$12–$160/month</td> <td className="py-3 px-4">$12–$160/month</td>
@ -326,23 +326,23 @@ function TierSHPage() {
</tbody> </tbody>
</table> </table>
</div> </div>
<p className="text-center text-lg text-slate-600 mt-8"> <p className="text-center text-lg text-muted-foreground mt-8">
Up to 10x more energy efficient than traditional datacenters. Up to 10x more energy efficient than traditional datacenters.
</p> </p>
</div> </div>
</section> </section>
{/* Who It's For */} {/* Who It's For */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center space-y-8 mb-12"> <div className="text-center space-y-8 mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Perfect For</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Perfect For</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
Clear target markets and use cases for ThreeFold's solutions. Clear target markets and use cases for ThreeFold's solutions.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-600"> <CardTitle className="flex items-center gap-2 text-blue-600">
<Shield className="h-5 w-5" /> <Shield className="h-5 w-5" />
@ -353,7 +353,7 @@ function TierSHPage() {
Building sovereign AI and cloud infrastructure. Building sovereign AI and cloud infrastructure.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-green-600"> <CardTitle className="flex items-center gap-2 text-green-600">
<Network className="h-5 w-5" /> <Network className="h-5 w-5" />
@ -364,7 +364,7 @@ function TierSHPage() {
Deploying local compute grids and edge solutions. Deploying local compute grids and edge solutions.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-600"> <CardTitle className="flex items-center gap-2 text-purple-600">
<Users className="h-5 w-5" /> <Users className="h-5 w-5" />
@ -375,7 +375,7 @@ function TierSHPage() {
Seeking cloud independence and decentralized hosting. Seeking cloud independence and decentralized hosting.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-orange-600"> <CardTitle className="flex items-center gap-2 text-orange-600">
<Brain className="h-5 w-5" /> <Brain className="h-5 w-5" />
@ -386,7 +386,7 @@ function TierSHPage() {
Hosting inference or full-stack decentralized applications. Hosting inference or full-stack decentralized applications.
</CardContent> </CardContent>
</Card> </Card>
<Card className="hover:shadow-lg transition-shadow"> <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-teal-600"> <CardTitle className="flex items-center gap-2 text-teal-600">
<Globe className="h-5 w-5" /> <Globe className="h-5 w-5" />
@ -402,14 +402,14 @@ function TierSHPage() {
</section> </section>
{/* Proven at Scale */} {/* Proven at Scale */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-4xl mx-auto text-center space-y-8"> <div className="max-w-4xl mx-auto text-center space-y-8">
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Proven at Scale</h2> <h2 className="text-3xl md:text-4xl font-bold text-foreground">Proven at Scale</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
ThreeFold's technology is already deployed globally and proven in production. ThreeFold's technology is already deployed globally and proven in production.
</p> </p>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-blue-600">Live in over 50 countries</CardTitle> <CardTitle className="text-blue-600">Live in over 50 countries</CardTitle>
</CardHeader> </CardHeader>
@ -417,7 +417,7 @@ function TierSHPage() {
Our decentralized grid spans across the globe. Our decentralized grid spans across the globe.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle> <CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle>
</CardHeader> </CardHeader>
@ -425,7 +425,7 @@ function TierSHPage() {
Massive computational power available on the grid. Massive computational power available on the grid.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle> <CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle>
</CardHeader> </CardHeader>
@ -433,7 +433,7 @@ function TierSHPage() {
Secure and transparent deployments managed by smart contracts. Secure and transparent deployments managed by smart contracts.
</CardContent> </CardContent>
</Card> </Card>
<Card className="text-center hover:shadow-lg transition-shadow"> <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
<CardHeader> <CardHeader>
<CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle> <CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle>
</CardHeader> </CardHeader>
@ -442,24 +442,24 @@ function TierSHPage() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<p className="text-center text-lg text-slate-600 mt-8"> <p className="text-center text-lg text-muted-foreground mt-8">
View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://stats.grid.tf</a> View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://stats.grid.tf</a>
</p> </p>
</div> </div>
</section> </section>
{/* Call to Action */} {/* Call to Action */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 to-green-600 text-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-primary text-primary-foreground">
<div className="max-w-4xl mx-auto text-center space-y-8"> <div className="max-w-4xl mx-auto text-center space-y-8">
<h2 className="text-3xl md:text-4xl font-bold">Ready to Transform Your Infrastructure?</h2> <h2 className="text-3xl md:text-4xl font-bold">Ready to Transform Your Infrastructure?</h2>
<p className="text-xl opacity-90 leading-relaxed"> <p className="text-xl opacity-90 leading-relaxed">
The future of digital infrastructure starts with your building. The future of digital infrastructure starts with your building.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg" className="bg-white text-blue-600 hover:bg-slate-100 text-lg px-8 py-3"> <Button asChild size="lg" className="bg-primary-foreground text-primary hover:bg-primary-foreground/90 text-lg px-8 py-3">
<Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link> <Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-blue-600 text-lg px-8 py-3"> <Button asChild variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary text-lg px-8 py-3">
<Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link> <Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link>
</Button> </Button>
</div> </div>
@ -468,14 +468,14 @@ function TierSHPage() {
</section> </section>
{/* Footer */} {/* Footer */}
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white"> <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
<div className="max-w-6xl mx-auto text-center"> <div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-2 mb-4"> <div className="flex items-center justify-center space-x-2 mb-4">
<Globe className="h-6 w-6 text-blue-400" /> <Globe className="h-6 w-6 text-blue-400" />
<span className="text-xl font-bold">ThreeFold Galaxy</span> <span className="text-xl font-bold">ThreeFold Galaxy</span>
</div> </div>
<p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p> <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
<p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p> <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
</div> </div>
</footer> </footer>
</div> </div>

2
src/components/ui/button.jsx
View File

@ -12,7 +12,7 @@ const buttonVariants = cva(
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: secondary:

51
src/styles/index.css
View File

@ -1,2 +1,53 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
html[data-theme='dark'] {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
transition: background-color 0.3s ease, color 0.3s ease;
}

58
tailwind.config.js
View File

@ -2,12 +2,68 @@ import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
darkMode: ['attribute', '[data-theme="dark"]'],
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",
], ],
theme: { theme: {
extend: {}, extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
}, },
plugins: [ plugins: [
typography, typography,