forked from emre/www_projectmycelium_com
		
	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
This commit is contained in:
		@@ -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>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										29
									
								
								src/pages/compute/Compute.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										29
									
								
								src/pages/compute/Compute.tsx
									
									
									
									
									
										Normal file
									
								
							@@ -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;
 | 
			
		||||
							
								
								
									
										29
									
								
								src/pages/gpu/Gpu.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										29
									
								
								src/pages/gpu/Gpu.tsx
									
									
									
									
									
										Normal file
									
								
							@@ -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;
 | 
			
		||||
							
								
								
									
										29
									
								
								src/pages/storage/Storage.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										29
									
								
								src/pages/storage/Storage.tsx
									
									
									
									
									
										Normal file
									
								
							@@ -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;
 | 
			
		||||
		Reference in New Issue
	
	Block a user