From fd2691051f08f42838639fc167888a81ff842f36 Mon Sep 17 00:00:00 2001
From: despiegk <kristof@incubaid.com>
Date: Thu, 24 Jul 2025 12:35:13 +0200
Subject: [PATCH] ...

---
 src/components/ProductsPage.jsx | 165 +++++++++-----------------------
 vite.config.js                  |   2 +-
 2 files changed, 48 insertions(+), 119 deletions(-)

diff --git a/src/components/ProductsPage.jsx b/src/components/ProductsPage.jsx
index c250fbe..29d8c15 100644
--- a/src/components/ProductsPage.jsx
+++ b/src/components/ProductsPage.jsx
@@ -64,54 +64,62 @@ 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 grid md:grid-cols-2 gap-12 items-start">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-1 gap-12 items-start">
           {/* 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">
               Comprehensive overview of the enterprise-grade solution for large-scale deployments.
             </p>
-            <h3 className="text-2xl font-bold text-purple-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" /> 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" /> Enterprise private clouds</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>
-            </ul>
-            <h3 className="text-2xl font-bold text-purple-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" /> 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</li>
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit</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 className="mt-12 text-center">
-              <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">
-                <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>
-                </Card>
-                <Card className="text-center hover:shadow-lg transition-shadow">
-                  <CardHeader><CardTitle className="text-blue-600">Complete sovereignty</CardTitle></CardHeader>
-                  <CardContent>Full control over data and operations.</CardContent>
-                </Card>
-                <Card className="text-center hover:shadow-lg transition-shadow">
-                  <CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
-                  <CardContent>Unlimited scalability without bottlenecks.</CardContent>
-                </Card>
-                <Card className="text-center hover:shadow-lg transition-shadow">
-                  <CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader>
-                  <CardContent>Self-healing and resilient infrastructure.</CardContent>
-                </Card>
+          {/* Image */}
+          <div className="col-span-2">
+            <img src="/src/assets/tiers_2.png" alt="Tier-S Datacenter" className="w-full object-cover rounded-lg" />
+          </div>            
+            <div className="grid md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="text-2xl font-bold text-purple-600  mb-4">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" /> 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" /> Enterprise private clouds</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>
+                </ul>
+              </div>
+              <div>
+                <h3 className="text-2xl font-bold text-purple-600  mb-4">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" /> 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" /> 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>
-          {/* Right Column: Image */}
-          <div className="flex justify-center items-center">
-            <img src="/src/assets/tiers_2.png" alt="Tier-S Datacenter" className="w-full h-auto rounded-lg shadow-lg" />
+
+          {/* Key Benefits */}
+          <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 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>
+              </Card>
+              <Card className="text-center hover:shadow-lg transition-shadow">
+                <CardHeader><CardTitle className="text-blue-600">Complete sovereignty</CardTitle></CardHeader>
+                <CardContent>Full control over data and operations.</CardContent>
+              </Card>
+              <Card className="text-center hover:shadow-lg transition-shadow">
+                <CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
+                <CardContent>Unlimited scalability without bottlenecks.</CardContent>
+              </Card>
+              <Card className="text-center hover:shadow-lg transition-shadow">
+                <CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader>
+                <CardContent>Self-healing and resilient infrastructure.</CardContent>
+              </Card>
+            </div>
           </div>
         </div>
       </section>
@@ -308,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">
diff --git a/vite.config.js b/vite.config.js
index 97f5fb2..3a61a89 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,7 +7,7 @@ import path from 'path'
 export default defineConfig({
   plugins: [react(),tailwindcss()],
   server: {
-    allowedHosts: ['*.ngrok-free.app','6162370c7e84.ngrok-free.app'],
+    allowedHosts: ['*','6162370c7e84.ngrok-free.app','092443e84c95.ngrok-free.app'],
   },
   resolve: {
     alias: {