...

src/components/Navigation.jsx

@@ -1,10 +1,13 @@
+import { useState } from 'react'
 import { Button } from '@/components/ui/button.jsx'
-import { Globe } from 'lucide-react'
+import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet.jsx'
+import { Globe, Menu } from 'lucide-react'
 import { Link, useLocation } from 'react-router-dom'
 import navigationData from '../config/navigation.json'
 
 function Navigation() {
   const location = useLocation()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   
   const isActive = (path) => {
     return location.pathname === path
@@ -18,6 +21,8 @@ function Navigation() {
             <Globe className="h-8 w-8 text-blue-600" />
             <span className="text-xl font-bold text-slate-900">ThreeFold Galaxy</span>
           </Link>
+
+          {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-8">
             {navigationData
               .filter(item => item.show !== false)
@@ -34,6 +39,39 @@ function Navigation() {
               <Link to="/register">Join Now</Link>
             </Button>
           </div>
+
+          {/* Mobile Navigation */}
+          <div className="md:hidden">
+            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <Menu className="h-6 w-6" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right" className="bg-white text-slate-900 sm:max-w-sm py-6">
+                <div className="flex flex-col items-center space-y-4 pt-6">
+                  {navigationData
+                    .filter(item => item.show !== false)
+                    .map((item) => (
+                      <SheetClose asChild key={item.path}>
+                        <Link
+                          to={item.path}
+                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-blue-600' : 'text-slate-900 hover:text-blue-600'}`}
+                          onClick={() => setIsMobileMenuOpen(false)}
+                        >
+                          {item.label}
+                        </Link>
+                      </SheetClose>
+                    ))}
+                  <SheetClose asChild>
+                    <Button asChild className="bg-blue-600 hover:bg-blue-700">
+                      <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
+                    </Button>
+                  </SheetClose>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
         </div>
       </div>
     </nav>

src/components/ProductsPage.jsx

@@ -11,7 +11,6 @@ function ProductsPage() {
       {/* Navigation */}
       <Navigation />
 <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>
 
       {/* Product Overview Hero */}
@@ -29,60 +28,35 @@ function ProductsPage() {
 
       {/* Tier-H Datacenters: Residential & Office Scale */}
       <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>
-            <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>
-                                  <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" />
+            <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>
+            <h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3>
+            <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" /> 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" /> Development and testing environments</li>
+            </ul>
+            <h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3>
+            <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" /> 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" /> Compatible with Kubernetes and container platforms</li>
+            </ul>
 
           </div>
-          <div className="grid md:grid-cols-2 gap-8 items-center">
+          {/* Right Column: Image */}
-            <div className="space-y-6">
+          <div className="flex justify-center items-center">
-              <h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3>
+            <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" />
-              <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" /> 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" /> Development and testing environments</li>
-              </ul>
-            </div>
-            <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3>
-              <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" /> 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" /> Compatible with Kubernetes and container platforms</li>
-              </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>
 
         </div>
@@ -90,40 +64,45 @@ function ProductsPage() {
 
       {/* 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">
-        <div className="max-w-6xl mx-auto">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-1 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>
-            <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.
             </p>
-          </div>
+          {/* Image */}
-          <div className="grid md:grid-cols-2 gap-8 items-center">
+          <div className="col-span-2">
-            <div className="space-y-6">
+            <img src="/src/assets/tiers_2.png" alt="Tier-S Datacenter" className="w-full object-cover rounded-lg" />
-              <h3 className="text-2xl font-bold text-purple-600">Perfect For:</h3>
+          </div>            
-              <ul className="space-y-3 text-lg text-slate-700">
+            <div className="grid md:grid-cols-2 gap-8">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Government digital infrastructure</li>
+              <div>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li>
+                <h3 className="text-2xl font-bold text-purple-600  mb-4">Perfect For:</h3>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li>
+                <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" /> AI training and inference at scale</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" /> Regional cloud service providers</li>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li>
-              </ul>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li>
-            </div>
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> AI training and inference at scale</li>
-            <div className="space-y-6">
+                  <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regional cloud service providers</li>
-              <h3 className="text-2xl font-bold text-purple-600">Technical Specifications:</h3>
+                </ul>
-              <ul className="space-y-3 text-lg text-slate-700">
+              </div>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Modular container-based design</li>
+              <div>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Handle 1+ million transactions per second</li>
+                <h3 className="text-2xl font-bold text-purple-600  mb-4">Technical Specifications:</h3>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit</li>
+                <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" /> Deployed in under six months</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" /> Cyberpandemic and disaster-resilient</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>
-              </ul>
+                  <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" /> 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>
+                </ul>
+              </div>
             </div>
           </div>
-<div className="mt-12 text-center">
+
-          </div>
+          {/* Key Benefits */}
-          <div className="mt-12 text-center">
+          <div className="mt-12 text-center col-span-2">
             <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">
                 <CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader>
                 <CardContent>Faster setup compared to traditional datacenters.</CardContent>
@@ -194,14 +173,9 @@ function ProductsPage() {
                   <td className="py-3 px-4">✓</td>
                   <td className="py-3 px-4">✓</td>
                 </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">
                   <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>
                 </tr>
                 <tr className="border-b border-slate-200">
@@ -342,86 +316,7 @@ function ProductsPage() {
         </div>
       </section>
 
-      {/* Support and Services */}
-      <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">Complete Support Ecosystem</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              What comes with each product offering.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-blue-600">Included with Every Deployment</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Technical documentation and training</li>
-                  <li>Community support forums</li>
-                  <li>Regular software updates</li>
-                  <li>Monitoring and analytics tools</li>
-                </ul>
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-green-600">Enterprise Services (Tier-S)</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Dedicated technical support</li>
-                  <li>Custom integration services</li>
-                  <li>SLA guarantees</li>
-                  <li>Professional consulting</li>
-                </ul>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </section>
 
-      {/* Getting Started */}
-      <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">Ready to Deploy?</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
-              Clear next steps for each product.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
-              <CardHeader>
-                <CardTitle className="text-green-600">Start with Tier-H:</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Order your first node</li>
-                  <li>Plug in and start earning</li>
-                  <li>Scale as you grow</li>
-                </ul>
-              </CardContent>
-            </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
-              <CardHeader>
-                <CardTitle className="text-blue-600">Scale with Tier-S:</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Schedule a consultation</li>
-                  <li>Custom deployment planning</li>
-                  <li>Professional installation and setup</li>
-                </ul>
-              </CardContent>
-            </Card>
-          </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
-            Both Options: Join our partner network, access technical resources, connect with the community.
-          </p>
-        </div>
-      </section>
 
       {/* Footer */}
       <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">

vite.config.js

@@ -7,7 +7,7 @@ import path from 'path'
 export default defineConfig({
   plugins: [react(),tailwindcss()],
   server: {
-    allowedHosts: ['919d3b60e744.ngrok-free.app'],
+    allowedHosts: ['*','6162370c7e84.ngrok-free.app','092443e84c95.ngrok-free.app'],
   },
   resolve: {
     alias: {