From 11689fdd3728b1dc8790dfaee0951ac3a9eb95db Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 24 Oct 2025 15:34:11 +0200
Subject: [PATCH] feat: add new compute, storage and GPU pages with routes

- Created new page components for Compute, Storage and GPU sections with basic layout structure
- Added corresponding routes in App.tsx to enable navigation to the new pages
- Implemented consistent page structure with Header, main content area and Footer
- Added decorative background gradient effect using tailwind classes for visual consistency
---
 src/App.tsx                   |  8 +++++++-
 src/pages/compute/Compute.tsx | 29 +++++++++++++++++++++++++++++
 src/pages/gpu/Gpu.tsx         | 29 +++++++++++++++++++++++++++++
 src/pages/storage/Storage.tsx | 29 +++++++++++++++++++++++++++++
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/compute/Compute.tsx
 create mode 100644 src/pages/gpu/Gpu.tsx
 create mode 100644 src/pages/storage/Storage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 78044f1..28bc1b1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,9 @@ import CloudPage from './pages/cloud/CloudPage'
 import NetworkPage from './pages/network/NetworkPage'
 import AgentsPage from './pages/agents/AgentsPage'
 import DownloadPage from './pages/download/DownloadPage'
+import Compute from './pages/compute/Compute'
+import Storage from './pages/storage/Storage'
+import Gpu from './pages/gpu/Gpu'
 
 function App() {
   return (
@@ -15,7 +18,10 @@ function App() {
           <Route path="cloud" element={<CloudPage />} />
           <Route path="network" element={<NetworkPage />} />
           <Route path="agents" element={<AgentsPage />} />
-          <Route path="download" element={<DownloadPage />} />
+                    <Route path="download" element={<DownloadPage />} />
+          <Route path="compute" element={<Compute />} />
+          <Route path="storage" element={<Storage />} />
+          <Route path="gpu" element={<Gpu />} />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/src/pages/compute/Compute.tsx b/src/pages/compute/Compute.tsx
new file mode 100644
index 0000000..0e5830e
--- /dev/null
+++ b/src/pages/compute/Compute.tsx
@@ -0,0 +1,29 @@
+import { Footer } from "../components/Footer";
+import { Header } from "../components/Header";
+
+const Compute = () => {
+  return (
+    <>
+      <Header />
+      <main className="bg-white">
+        <div className="relative isolate">
+          <div
+            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+            aria-hidden="true"
+          >
+            <div
+              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+              style={{
+                clipPath:
+                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+              }}
+            />
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default Compute;
diff --git a/src/pages/gpu/Gpu.tsx b/src/pages/gpu/Gpu.tsx
new file mode 100644
index 0000000..4fdf06f
--- /dev/null
+++ b/src/pages/gpu/Gpu.tsx
@@ -0,0 +1,29 @@
+import { Footer } from "../components/Footer";
+import { Header } from "../components/Header";
+
+const Gpu = () => {
+  return (
+    <>
+      <Header />
+      <main className="bg-white">
+        <div className="relative isolate">
+          <div
+            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+            aria-hidden="true"
+          >
+            <div
+              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+              style={{
+                clipPath:
+                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+              }}
+            />
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default Gpu;
diff --git a/src/pages/storage/Storage.tsx b/src/pages/storage/Storage.tsx
new file mode 100644
index 0000000..c6ee7e7
--- /dev/null
+++ b/src/pages/storage/Storage.tsx
@@ -0,0 +1,29 @@
+import { Footer } from "../components/Footer";
+import { Header } from "../components/Header";
+
+const Storage = () => {
+  return (
+    <>
+      <Header />
+      <main className="bg-white">
+        <div className="relative isolate">
+          <div
+            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+            aria-hidden="true"
+          >
+            <div
+              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+              style={{
+                clipPath:
+                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+              }}
+            />
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default Storage;