emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: convert CTA components to full pages and expand waitlist form options

Browse Source 
- Renamed CallToAction components to full Page components for compute, storage and GPU sections
- Added new waitlist form types: storage_waitlist, compute_waitlist, and gpu_waitlist
- Updated form placeholder text to show relevant requirements based on waitlist type
- Fixed string template syntax in Dropdown component CSS classes
This commit is contained in:
sasha-astiadi
2025-10-24 16:30:23 +02:00
parent 752668b38d
commit be74079de2
10 changed files with 437 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.tsx
View File

@@ -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() {
<Route path="network" element={<NetworkPage />} />
<Route path="agents" element={<AgentsPage />} />
<Route path="download" element={<DownloadPage />} />
<Route path="compute" element={<ComputeCallToAction />} />
<Route path="storage" element={<StorageCallToAction />} />
<Route path="gpu" element={<GpuCallToAction />} />
<Route path="compute" element={<ComputePage />} />
<Route path="storage" element={<StoragePage />} />
<Route path="gpu" element={<GpuPage />} />
</Route>
</Routes>
</BrowserRouter>

8
src/components/ContactForm.tsx
View File

@@ -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.'
}
/>

2
src/components/ui/Dropdown.tsx
View File

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

BIN
src/images/storage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

125
src/pages/compute/ComputeHero.tsx Normal file
View File

@@ -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 (
<div {...props}>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-slow"
>
<path
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M513 1025C230.23 1025 1 795.77 1 513"
stroke={`url(#${id}-gradient-1)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-1`}
x1="1"
y1="513"
x2="1"
y2="1025"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
>
<path
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M913 513c0 220.914-179.086 400-400 400"
stroke={`url(#${id}-gradient-2)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-2`}
x1="913"
y1="513"
x2="913"
y2="913"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</div>
)
}
export function ComputeHero() {
const [isContactOpen, setIsContactOpen] = useState(false)
return (
<>
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
<Container>
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
Mycelium Compute
</h1>
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
Verifiable, decentralized serverless computing.
</h2>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
The Mycelium Compute layer offers a decentralized function-as-a-service platform, enabling developers to run code without managing infrastructure.
</p>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
Join the Waitlist
</Button>
</div>
</div>
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
<div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
<img
src="/images/data.png"
alt="Mycelium Compute illustration"
className="mx-auto w-full max-w-[520px]"
width={1024}
height={1024}
/>
</div>
</div>
</div>
</Container>
</div>
<ContactForm
isOpen={isContactOpen}
onClose={() => setIsContactOpen(false)}
title="Join the Waitlist"
formType="compute_waitlist"
/>
</>
)
}

16
src/pages/compute/ComputePage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { AnimatedSection } from '../../components/AnimatedSection'
import { ComputeHero } from './ComputeHero'
import { CallToAction } from './CallToAction'
export default function ComputePage() {
return (
<div>
<AnimatedSection>
<ComputeHero />
</AnimatedSection>
<AnimatedSection>
<CallToAction />
</AnimatedSection>
</div>
)
}

125
src/pages/gpu/GpuHero.tsx Normal file
View File

@@ -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 (
<div {...props}>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-slow"
>
<path
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M513 1025C230.23 1025 1 795.77 1 513"
stroke={`url(#${id}-gradient-1)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-1`}
x1="1"
y1="513"
x2="1"
y2="1025"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
>
<path
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M913 513c0 220.914-179.086 400-400 400"
stroke={`url(#${id}-gradient-2)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-2`}
x1="913"
y1="513"
x2="913"
y2="913"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</div>
)
}
export function GpuHero() {
const [isContactOpen, setIsContactOpen] = useState(false)
return (
<>
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
<Container>
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
Mycelium GPU
</h1>
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
Decentralized GPU resources for AI and rendering.
</h2>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
Access a global network of GPU providers for your intensive computing tasks, from machine learning to complex graphical rendering.
</p>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
Join the Waitlist
</Button>
</div>
</div>
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
<div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
<img
src="/images/network_icon.png"
alt="Mycelium GPU illustration"
className="mx-auto w-full max-w-[520px]"
width={1024}
height={1024}
/>
</div>
</div>
</div>
</Container>
</div>
<ContactForm
isOpen={isContactOpen}
onClose={() => setIsContactOpen(false)}
title="Join the Waitlist"
formType="gpu_waitlist"
/>
</>
)
}

16
src/pages/gpu/GpuPage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { AnimatedSection } from '../../components/AnimatedSection'
import { GpuHero } from './GpuHero'
import { CallToAction } from './CallToAction'
export default function GpuPage() {
return (
<div>
<AnimatedSection>
<GpuHero />
</AnimatedSection>
<AnimatedSection>
<CallToAction />
</AnimatedSection>
</div>
)
}

125
src/pages/storage/StorageHero.tsx Normal file
View File

@@ -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 (
<div {...props}>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-slow"
>
<path
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M513 1025C230.23 1025 1 795.77 1 513"
stroke={`url(#${id}-gradient-1)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-1`}
x1="1"
y1="513"
x2="1"
y2="1025"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
>
<path
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M913 513c0 220.914-179.086 400-400 400"
stroke={`url(#${id}-gradient-2)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-2`}
x1="913"
y1="513"
x2="913"
y2="913"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</div>
)
}
export function StorageHero() {
const [isContactOpen, setIsContactOpen] = useState(false)
return (
<>
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
<Container>
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
Mycelium Storage
</h1>
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
Decentralized storage for a new internet.
</h2>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
A decentralized storage layer for the Mycelium platform—secure, resilient, and built for a new generation of applications.
</p>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
Join the Waitlist
</Button>
</div>
</div>
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
<div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
<img
src="/images/cloud_icon.png"
alt="Mycelium Storage illustration"
className="mx-auto w-full max-w-[520px]"
width={1024}
height={1024}
/>
</div>
</div>
</div>
</Container>
</div>
<ContactForm
isOpen={isContactOpen}
onClose={() => setIsContactOpen(false)}
title="Join the Waitlist"
formType="storage_waitlist"
/>
</>
)
}

16
src/pages/storage/StoragePage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { AnimatedSection } from '../../components/AnimatedSection'
import { StorageHero } from './StorageHero'
import { CallToAction } from './CallToAction'
export default function StoragePage() {
return (
<div>
<AnimatedSection>
<StorageHero />
</AnimatedSection>
<AnimatedSection>
<CallToAction />
</AnimatedSection>
</div>
)
}