...
This commit is contained in:
parent
dad67592d3
commit
6cdb00f1a5
@ -238,7 +238,7 @@ const ThemeToggle = () => {
|
||||
- **Status**: ✅ Good implementation
|
||||
- **Uses**: Proper `dark:` variants and semantic classes
|
||||
|
||||
#### NewHome.jsx
|
||||
#### Home.jsx
|
||||
- **Status**: ✅ Mostly good
|
||||
- **Uses**: Theme variables properly
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import Navigation from './components/Navigation.jsx'
|
||||
import navigationData from './config/navigation.json'
|
||||
|
||||
// Dynamically import components
|
||||
import NewHome from './components/NewHome.jsx'
|
||||
import Home from './components/Home.jsx'
|
||||
import TierSHPage from './components/TierSHPage.jsx'
|
||||
import ProductsPage from './components/ProductsPage.jsx'
|
||||
import TechnologyPage from './components/TechnologyPage.jsx'
|
||||
@ -12,7 +12,7 @@ import Blog from './components/Blog.jsx'
|
||||
import BlogPost from './components/BlogPost.jsx'
|
||||
|
||||
const componentMap = {
|
||||
NewHome,
|
||||
Home,
|
||||
TierSHPage,
|
||||
ProductsPage,
|
||||
TechnologyPage,
|
||||
@ -27,7 +27,7 @@ function App() {
|
||||
<Navigation />
|
||||
<main className="pt-16 bg-background text-foreground transition-colors duration-300">
|
||||
<Routes>
|
||||
<Route path="/" element={<NewHome />} />
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/tiers" element={<TierSHPage />} />
|
||||
{navigationData.map((item) => {
|
||||
const Component = componentMap[item.component]
|
||||
|
||||
@ -1,460 +1,35 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Button } from './ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
|
||||
import { Badge } from './ui/badge'
|
||||
import { Globe, Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
|
||||
// Import images
|
||||
import heroBanner from '../assets/images/hero_banner.png' // This image might need to be replaced with a relevant one for ThreeFold
|
||||
|
||||
function Homepage() {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(true)
|
||||
}, [])
|
||||
|
||||
const scrollToSection = (sectionId) => {
|
||||
document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
|
||||
import React from 'react';
|
||||
function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
{/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className={`py-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">The Future of Infrastructure</Badge>
|
||||
<h1 className="text-2xl md:text-4xl font-bold text-slate-900 leading-tight">
|
||||
Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 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.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<Link to="/register">Register Interest</Link>
|
||||
</Button>
|
||||
<Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3">
|
||||
Learn More About Products
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500">Join the revolution in decentralized digital infrastructure.</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<img src={heroBanner} alt="ThreeFold Datacenter Illustration" className="w-full h-auto rounded-2xl shadow-2xl" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-blue-600/20 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-screen bg-background flex flex-col">
|
||||
<main className="flex-grow flex flex-col items-center justify-center text-center p-4 pt-24">
|
||||
<div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
|
||||
<video
|
||||
src="https://5omqe7wpghgv44jg.public.blob.vercel-storage.com/assets/galaxy-full-bleed-Unq4IRYlPB88MNh37YNNMn4QZo18m4.mp4"
|
||||
poster="https://cdn.sanity.io/images/jpb4ed5r/production/daef88d9c5c6dad2c2ad1198ec7ec35559e4251c-1920x1080.png"
|
||||
aria-label="Looping video of Tenstorrent Galaxy Server rotating on gray background (no audio)"
|
||||
className="w-full h-auto object-cover"
|
||||
playsInline
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
preload="metadata"
|
||||
></video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What Are Tier-S and Tier-H? */}
|
||||
<section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<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>
|
||||
<p className="text-xl text-slate-600 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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
|
||||
<CardHeader>
|
||||
<Home className="w-16 h-16 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">Tier-H Datacenters</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with ultra energy-efficiency (less than 10W per node) and zero maintenance.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<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>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your building can produce essential digital resources.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<Brain className="w-12 h-12 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">AI Inference Power</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Host AI workloads and contribute to decentralized AI.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" />
|
||||
<CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Monetize idle capacity and generate passive income.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-center text-xl text-slate-600 mt-12">
|
||||
Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Real Estate Developers Should Join */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<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>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Transform your properties into digital assets and unlock new revenue streams.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-blue-600">
|
||||
<DollarSign className="h-5 w-5" />
|
||||
Passive Digital Revenue
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Monetize idle compute, bandwidth, and storage capacity.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<TrendingUp className="h-5 w-5" />
|
||||
Higher Property Value
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Market properties as cloud-enabled and future-proof.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-purple-600">
|
||||
<Zap className="h-5 w-5" />
|
||||
Green & Resilient
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
10x less energy vs traditional datacenters, resilient to outages.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-orange-600">
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
Turnkey Deployment
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
No IT expertise required for installation and operation.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-teal-600">
|
||||
<Shield className="h-5 w-5" />
|
||||
Sovereign Cloud
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Data stays local and private, under your control.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-indigo-600">
|
||||
<Globe className="h-5 w-5" />
|
||||
Future-Proof
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Supports AI, Web3, digital twins, and modern applications.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technical Advantages */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<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>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Key differentiators that make ThreeFold superior to traditional infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
|
||||
<CardHeader>
|
||||
<Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
|
||||
<CardTitle className="text-blue-600">Zero-OS</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Stateless, self-healing operating system for autonomous compute.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-green-200">
|
||||
<CardHeader>
|
||||
<Database className="w-12 h-12 mx-auto mb-4 text-green-600" />
|
||||
<CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Unbreakable data protection with 10x efficiency through mathematical dispersion.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
|
||||
<CardHeader>
|
||||
<Network className="w-12 h-12 mx-auto mb-4 text-purple-600" />
|
||||
<CardTitle className="text-purple-600">Mycelium Network</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Mesh networking that routes around failures, ensuring resilient connectivity.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-orange-200">
|
||||
<CardHeader>
|
||||
<Shield className="w-12 h-12 mx-auto mb-4 text-orange-600" />
|
||||
<CardTitle className="text-orange-600">Smart Contract for IT</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Autonomous, cryptographically secured deployments for IT resources.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow border-teal-200">
|
||||
<CardHeader>
|
||||
<Brain className="w-12 h-12 mx-auto mb-4 text-teal-600" />
|
||||
<CardTitle className="text-teal-600">Geo-Aware AI</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Private AI agents that respect boundaries and data sovereignty.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Real Cost Comparison */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<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>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
||||
Experience significant cost advantages compared to traditional cloud providers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white rounded-lg shadow-md">
|
||||
<thead>
|
||||
<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">ThreeFold</th>
|
||||
<th className="py-3 px-4 text-left">Other Providers</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-slate-200">
|
||||
<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">$12–$160/month</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Compute (2 vCPU, 4GB RAM)</td>
|
||||
<td className="py-3 px-4 font-semibold">Less than $12/month</td>
|
||||
<td className="py-3 px-4">$20–$100/month</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="text-center text-lg text-slate-600 mt-8">
|
||||
Up to 10x more energy efficient than traditional datacenters.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">Perfect For</h2>
|
||||
<p className="text-xl text-slate-600 max-w-4xl mx-auto">
|
||||
Clear target markets and use cases for ThreeFold's solutions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-blue-600">
|
||||
<Shield className="h-5 w-5" />
|
||||
Governments
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Building sovereign AI and cloud infrastructure.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<Network className="h-5 w-5" />
|
||||
Telecoms and ISPs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Deploying local compute grids and edge solutions.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-purple-600">
|
||||
<Users className="h-5 w-5" />
|
||||
Developers and Startups
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Seeking cloud independence and decentralized hosting.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-orange-600">
|
||||
<Brain className="h-5 w-5" />
|
||||
AI and Web3 Companies
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Hosting inference or full-stack decentralized applications.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-teal-600">
|
||||
<Globe className="h-5 w-5" />
|
||||
Communities
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Seeking plug-and-play digital resilience and local infrastructure.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Proven at Scale */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<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>
|
||||
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
||||
ThreeFold's technology is already deployed globally and proven in production.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-600">Live in over 50 countries</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Our decentralized grid spans across the globe.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Massive computational power available on the grid.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Secure and transparent deployments managed by smart contracts.
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Reliable and robust infrastructure for your digital needs.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-center text-lg text-slate-600 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>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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>
|
||||
<p className="text-xl opacity-90 leading-relaxed">
|
||||
The future of digital infrastructure starts with your building.
|
||||
</p>
|
||||
<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">
|
||||
<Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link>
|
||||
</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">
|
||||
<Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm opacity-75">Join the most resilient, inclusive, and intelligent internet.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
|
||||
The Future of Data Centers.
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl">
|
||||
Faster. Greener. Safer.
|
||||
</p>
|
||||
</main>
|
||||
<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="flex items-center justify-center space-x-2 mb-4">
|
||||
<Globe className="h-6 w-6 text-blue-400" />
|
||||
<span className="text-xl font-bold">ThreeFold Galaxy</span>
|
||||
</div>
|
||||
<p className="text-slate-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-muted-foreground">Sovereign Internet, AI and Cloud is a Human Right.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Homepage
|
||||
export default Home;
|
||||
@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
function NewHome() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex flex-col">
|
||||
<main className="flex-grow flex flex-col items-center justify-center text-center p-4 pt-24">
|
||||
<div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
|
||||
<video
|
||||
src="https://5omqe7wpghgv44jg.public.blob.vercel-storage.com/assets/galaxy-full-bleed-Unq4IRYlPB88MNh37YNNMn4QZo18m4.mp4"
|
||||
poster="https://cdn.sanity.io/images/jpb4ed5r/production/daef88d9c5c6dad2c2ad1198ec7ec35559e4251c-1920x1080.png"
|
||||
aria-label="Looping video of Tenstorrent Galaxy Server rotating on gray background (no audio)"
|
||||
className="w-full h-auto object-cover"
|
||||
playsInline
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
preload="metadata"
|
||||
></video>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
|
||||
As ThreeFold Galaxy we deliver the future of Datacenters
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl">
|
||||
resulting in better performance, greener and more security.
|
||||
</p>
|
||||
</main>
|
||||
<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">
|
||||
<p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
|
||||
<p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewHome;
|
||||
@ -27,9 +27,9 @@ function TierSHPage() {
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Badge className="bg-primary/10 text-primary hover:bg-primary/20">The Future of Infrastructure</Badge>
|
||||
<Badge className="bg-primary/10 text-primary hover:bg-primary/20">The Future of AI, Cloud and Internet.</Badge>
|
||||
<h1 className="text-2xl md:text-4xl font-bold text-foreground leading-tight">
|
||||
Transform Your Building Into a <span className="text-primary">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
|
||||
Transform Your Building Into a <br /><span className="text-primary">Digital Powerhouse</span>.
|
||||
</h1>
|
||||
<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.
|
||||
@ -67,7 +67,7 @@ function TierSHPage() {
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<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-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: <br/>Tier-S for industrial scale and Tier-H for residential/office scale.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
@ -86,7 +86,7 @@ function TierSHPage() {
|
||||
<CardTitle className="text-emerald-600">Tier-H Datacenters</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with ultra energy-efficiency (less than 10W per node) and zero maintenance.</p>
|
||||
<p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with efficient, green and zero maintenance.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@ -99,7 +99,7 @@ function TierSHPage() {
|
||||
<div className="text-center space-y-8 mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-foreground">From Real Estate to Digital Infrastructure</h2>
|
||||
<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,<br/> ThreeFold Nodes Transform Them Into Digital Utilities.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
@ -320,11 +320,16 @@ function TierSHPage() {
|
||||
<td className="py-3 px-4 font-semibold">Less than $12/month</td>
|
||||
<td className="py-3 px-4">$20–$100/month</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">1m AI Requests (LLM)</td>
|
||||
<td className="py-3 px-4 font-semibold">2x more efficient</td>
|
||||
<td className="py-3 px-4"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<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 for newgen Web4 Workdloads.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
{
|
||||
"path": "/",
|
||||
"label": "Home",
|
||||
"component": "NewHome",
|
||||
"component": "Home",
|
||||
"show": true
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user