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

@@ -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>

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;

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;

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;