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 12:09:45 +02:00
parent e16a4a5278
commit d11ce3998b
2 changed files with 69 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/tiers_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

78
src/components/ProductsPage.jsx
View File

@ -11,7 +11,6 @@ function ProductsPage() {
{/* 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">
<img src="https://tenstorrent.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fjpb4ed5r%2Fproduction%2F83293d04fb69b49d789f892f7d1ca53da7f250c3-4800x2520.png&w=3840&q=75" alt="Tenstorrent Product" className="w-full h-auto rounded-lg shadow-lg" />
</div> </div>
{/* Product Overview Hero */} {/* Product Overview Hero */}
@ -29,17 +28,16 @@ function ProductsPage() {
{/* 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-white">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
<div className="text-center space-y-8 mb-12"> {/* Left Column: Text Content */}
<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-slate-900">Tier-H: Plug-and-Play Digital Infrastructure</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-slate-600">
Perfect for homes, offices, and mixed-use buildings, offering edge computing and local AI processing. 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 className="text-xl text-slate-600">
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>
<img src="/src/assets/tier_s_h_compare.png" alt="Tier S H Comparison" className="w-full h-auto rounded-lg shadow-lg mb-12" />
</div>
<div className="grid md:grid-cols-2 gap-8 items-center">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3> <h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-slate-700">
<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>
@ -47,8 +45,6 @@ function ProductsPage() {
<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>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3> <h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-slate-700">
<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>
@ -56,33 +52,11 @@ function ProductsPage() {
<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>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compatible with Kubernetes and container platforms</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compatible with Kubernetes and container platforms</li>
</ul> </ul>
</div>
</div>
<div className="mt-12 text-center">
<h3 className="text-2xl font-bold text-blue-600 mb-6">Key Benefits:</h3>
<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="text-blue-600">Plug-and-play installation</CardTitle></CardHeader>
<CardContent>Easy setup, no technical expertise needed.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-green-600">Zero maintenance required</CardTitle></CardHeader>
<CardContent>Autonomous operation, minimal human intervention.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-purple-600">Generate passive income</CardTitle></CardHeader>
<CardContent>Monetize unused compute capacity.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-orange-600">Local data sovereignty</CardTitle></CardHeader>
<CardContent>Data stays local and private, under your control.</CardContent>
</Card>
<Card className="text-center hover:shadow-lg transition-shadow">
<CardHeader><CardTitle className="text-teal-600">Resilient to internet outages</CardTitle></CardHeader>
<CardContent>Ensures continuity of local services.</CardContent>
</Card>
</div> </div>
{/* Right Column: Image */}
<div className="flex justify-center items-center">
<img src="https://tenstorrent.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fjpb4ed5r%2Fproduction%2F176b1c0aeb6432b315442f64860fe20100e4ba09-1510x1645.jpg&w=3840&q=75" alt="Tier-H Datacenter" className="w-full h-auto rounded-lg shadow-lg" />
</div> </div>
</div> </div>
@ -90,15 +64,13 @@ function ProductsPage() {
{/* 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-gradient-to-br from-blue-50 to-purple-50">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
<div className="text-center space-y-8 mb-12"> {/* Left Column: Text Content */}
<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-slate-900">Tier-S: Industrial-Grade Modular Datacenters</h2>
<p className="text-xl text-slate-600 max-w-4xl mx-auto"> <p className="text-xl text-slate-600">
Comprehensive overview of the enterprise-grade solution for large-scale deployments. Comprehensive overview of the enterprise-grade solution for large-scale deployments.
</p> </p>
</div>
<div className="grid md:grid-cols-2 gap-8 items-center">
<div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Perfect For:</h3> <h3 className="text-2xl font-bold text-purple-600">Perfect For:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-slate-700">
<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>
@ -107,8 +79,6 @@ function ProductsPage() {
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> AI training and inference at scale</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> AI training and inference at scale</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regional cloud service providers</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regional cloud service providers</li>
</ul> </ul>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold text-purple-600">Technical Specifications:</h3> <h3 className="text-2xl font-bold text-purple-600">Technical Specifications:</h3>
<ul className="space-y-3 text-lg text-slate-700"> <ul className="space-y-3 text-lg text-slate-700">
<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>
@ -117,13 +87,9 @@ function ProductsPage() {
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Deployed in under six months</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Deployed in under six months</li>
<li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cyberpandemic and disaster-resilient</li> <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cyberpandemic and disaster-resilient</li>
</ul> </ul>
</div>
</div>
<div className="mt-12 text-center">
</div>
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<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 md:grid-cols-2 lg:grid-cols-3 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">
<CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader> <CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader>
<CardContent>Faster setup compared to traditional datacenters.</CardContent> <CardContent>Faster setup compared to traditional datacenters.</CardContent>
@ -143,6 +109,11 @@ function ProductsPage() {
</div> </div>
</div> </div>
</div> </div>
{/* Right Column: Image */}
<div className="flex justify-center items-center">
<img src="https://threefold.info/datacenter/assets/images/tier_s_container-27111babcc4d16e029863e2420f0358e.png" alt="Tier-S Datacenter" className="w-full h-auto rounded-lg shadow-lg" />
</div>
</div>
</section> </section>
{/* Technology Stack Comparison */} {/* Technology Stack Comparison */}
@ -194,14 +165,9 @@ function ProductsPage() {
<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">
<td className="py-3 px-4">Energy Efficiency</td>
<td className="py-3 px-4">Ultra-High</td>
<td className="py-3 px-4">High</td>
</tr>
<tr className="border-b border-slate-200"> <tr className="border-b border-slate-200">
<td className="py-3 px-4">Deployment Time</td> <td className="py-3 px-4">Deployment Time</td>
<td className="py-3 px-4">Minutes</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-slate-200">