diff --git a/src/App.tsx b/src/App.tsx index 3e78fe2..d42f415 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,9 +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 { CallToAction as ComputeCallToAction } from './pages/compute/CallToAction' -import { CallToAction as StorageCallToAction } from './pages/storage/CallToAction' -import { CallToAction as GpuCallToAction } from './pages/gpu/CallToAction' +import ComputePage from './pages/compute/ComputePage' +import StoragePage from './pages/storage/StoragePage' +import GpuPage from './pages/gpu/GpuPage' function App() { return ( @@ -19,9 +19,9 @@ function App() { } /> } /> } /> - } /> - } /> - } /> + } /> + } /> + } /> diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx index b4f8a67..ee70fa0 100644 --- a/src/components/ContactForm.tsx +++ b/src/components/ContactForm.tsx @@ -9,7 +9,7 @@ interface ContactFormProps { isOpen: boolean onClose: () => void title?: string - formType?: 'investor' | 'partner' | 'agent_waitlist' + formType?: 'investor' | 'partner' | 'agent_waitlist' | 'storage_waitlist' | 'compute_waitlist' | 'gpu_waitlist' } const initialFormState = { @@ -187,6 +187,12 @@ export default function ContactForm({ ? 'Tell us about your investment interests and how we can collaborate.' : formType === 'agent_waitlist' ? 'Tell us about your sovereign agent requirements.' + : formType === 'storage_waitlist' + ? 'Tell us about your storage requirements.' + : formType === 'compute_waitlist' + ? 'Tell us about your compute requirements.' + : formType === 'gpu_waitlist' + ? 'Tell us about your GPU requirements.' : 'Tell us about your project or how we can help.' } /> diff --git a/src/components/ui/Dropdown.tsx b/src/components/ui/Dropdown.tsx index 61fa1d0..de59db1 100644 --- a/src/components/ui/Dropdown.tsx +++ b/src/components/ui/Dropdown.tsx @@ -39,7 +39,7 @@ export function Dropdown({ buttonContent, items }: DropdownProps) { to={item.href} className={` ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'} - 'block px-4 py-2 text-sm' + block px-4 py-2 text-sm `} > {item.name} diff --git a/src/images/storage.png b/src/images/storage.png new file mode 100644 index 0000000..8ebac26 Binary files /dev/null and b/src/images/storage.png differ diff --git a/src/pages/compute/ComputeHero.tsx b/src/pages/compute/ComputeHero.tsx new file mode 100644 index 0000000..189d43a --- /dev/null +++ b/src/pages/compute/ComputeHero.tsx @@ -0,0 +1,125 @@ +'use client' + +import { useId, useState } from 'react' + +import { Button } from '../../components/Button' +import { Container } from '../../components/Container' +import ContactForm from '../../components/ContactForm' + +function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) { + const id = useId() + + return ( +
+ + +
+ ) +} + +export function ComputeHero() { + const [isContactOpen, setIsContactOpen] = useState(false) + + return ( + <> +
+ +
+
+

+ Mycelium Compute +

+

+ Verifiable, decentralized serverless computing. +

+

+ The Mycelium Compute layer offers a decentralized function-as-a-service platform, enabling developers to run code without managing infrastructure. +

+
+ +
+
+
+ +
+ Mycelium Compute illustration +
+
+
+ +
+ setIsContactOpen(false)} + title="Join the Waitlist" + formType="compute_waitlist" + /> + + ) +} diff --git a/src/pages/compute/ComputePage.tsx b/src/pages/compute/ComputePage.tsx new file mode 100644 index 0000000..d5d6d60 --- /dev/null +++ b/src/pages/compute/ComputePage.tsx @@ -0,0 +1,16 @@ +import { AnimatedSection } from '../../components/AnimatedSection' +import { ComputeHero } from './ComputeHero' +import { CallToAction } from './CallToAction' + +export default function ComputePage() { + return ( +
+ + + + + + +
+ ) +} diff --git a/src/pages/gpu/GpuHero.tsx b/src/pages/gpu/GpuHero.tsx new file mode 100644 index 0000000..0b2c5bb --- /dev/null +++ b/src/pages/gpu/GpuHero.tsx @@ -0,0 +1,125 @@ +'use client' + +import { useId, useState } from 'react' + +import { Button } from '../../components/Button' +import { Container } from '../../components/Container' +import ContactForm from '../../components/ContactForm' + +function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) { + const id = useId() + + return ( +
+ + +
+ ) +} + +export function GpuHero() { + const [isContactOpen, setIsContactOpen] = useState(false) + + return ( + <> +
+ +
+
+

+ Mycelium GPU +

+

+ Decentralized GPU resources for AI and rendering. +

+

+ Access a global network of GPU providers for your intensive computing tasks, from machine learning to complex graphical rendering. +

+
+ +
+
+
+ +
+ Mycelium GPU illustration +
+
+
+ +
+ setIsContactOpen(false)} + title="Join the Waitlist" + formType="gpu_waitlist" + /> + + ) +} diff --git a/src/pages/gpu/GpuPage.tsx b/src/pages/gpu/GpuPage.tsx new file mode 100644 index 0000000..bbf209b --- /dev/null +++ b/src/pages/gpu/GpuPage.tsx @@ -0,0 +1,16 @@ +import { AnimatedSection } from '../../components/AnimatedSection' +import { GpuHero } from './GpuHero' +import { CallToAction } from './CallToAction' + +export default function GpuPage() { + return ( +
+ + + + + + +
+ ) +} diff --git a/src/pages/storage/StorageHero.tsx b/src/pages/storage/StorageHero.tsx new file mode 100644 index 0000000..ef6fbe3 --- /dev/null +++ b/src/pages/storage/StorageHero.tsx @@ -0,0 +1,125 @@ +'use client' + +import { useId, useState } from 'react' + +import { Button } from '../../components/Button' +import { Container } from '../../components/Container' +import ContactForm from '../../components/ContactForm' + +function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) { + const id = useId() + + return ( +
+ + +
+ ) +} + +export function StorageHero() { + const [isContactOpen, setIsContactOpen] = useState(false) + + return ( + <> +
+ +
+
+

+ Mycelium Storage +

+

+ Decentralized storage for a new internet. +

+

+ A decentralized storage layer for the Mycelium platform—secure, resilient, and built for a new generation of applications. +

+
+ +
+
+
+ +
+ Mycelium Storage illustration +
+
+
+ +
+ setIsContactOpen(false)} + title="Join the Waitlist" + formType="storage_waitlist" + /> + + ) +} diff --git a/src/pages/storage/StoragePage.tsx b/src/pages/storage/StoragePage.tsx new file mode 100644 index 0000000..044c3fc --- /dev/null +++ b/src/pages/storage/StoragePage.tsx @@ -0,0 +1,16 @@ +import { AnimatedSection } from '../../components/AnimatedSection' +import { StorageHero } from './StorageHero' +import { CallToAction } from './CallToAction' + +export default function StoragePage() { + return ( +
+ + + + + + +
+ ) +}