feat: convert CTA components to full pages and expand waitlist form options
- 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:
125
src/pages/compute/ComputeHero.tsx
Normal file
125
src/pages/compute/ComputeHero.tsx
Normal 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
16
src/pages/compute/ComputePage.tsx
Normal 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
125
src/pages/gpu/GpuHero.tsx
Normal 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
16
src/pages/gpu/GpuPage.tsx
Normal 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
125
src/pages/storage/StorageHero.tsx
Normal 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
16
src/pages/storage/StoragePage.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user