forked from emre/www_projectmycelium_com
new dropdown content from Mik
This commit is contained in:
Emre
138
src/pages/cloud/CloudGettingStarted.tsx
Normal file
138
src/pages/cloud/CloudGettingStarted.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import { Container } from '../../components/Container'
|
||||
import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
|
||||
|
||||
type Step = {
|
||||
number: string
|
||||
title: string
|
||||
description: string
|
||||
bullets: string[]
|
||||
codes?: string[]
|
||||
}
|
||||
|
||||
const steps: Step[] = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Account Setup',
|
||||
description: 'Create and prepare your Mycelium Cloud account.',
|
||||
bullets: [
|
||||
'Sign up through the Mycelium Cloud portal and verify your email.',
|
||||
'Add credits in the dashboard so resources can be provisioned.',
|
||||
'Upload your SSH public key to enable secure node access.',
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Deploy Your First Cluster',
|
||||
description:
|
||||
'Use the dashboard to define topology, resources, and deployment targets.',
|
||||
bullets: [
|
||||
'Open the Deploy Cluster workflow from your dashboard.',
|
||||
'Choose CPU, memory, and storage for master and worker nodes.',
|
||||
'Select ThreeFold Grid nodes that match your residency policies.',
|
||||
'Review the configuration and launch the cluster.',
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Access Your Cluster',
|
||||
description:
|
||||
'Connect through kubeconfig and the Mycelium mesh to manage workloads.',
|
||||
bullets: [
|
||||
'Download the kubeconfig from the Clusters view and export `KUBECONFIG`.',
|
||||
'Validate connectivity with `kubectl get nodes`.',
|
||||
'Install the Mycelium client and join the provided peer list.',
|
||||
'SSH directly to each node over its assigned Mycelium IP address.',
|
||||
],
|
||||
codes: [
|
||||
`export KUBECONFIG=/path/to/config
|
||||
kubectl get nodes`,
|
||||
`wget https://github.com/threefoldtech/mycelium/releases/latest/download/mycelium-private-x86_64-unknown-linux-musl.tar.gz
|
||||
tar -xzf mycelium-private-x86_64-unknown-linux-musl.tar.gz
|
||||
sudo chmod +x mycelium-private
|
||||
sudo mv mycelium-private /usr/local/bin/mycelium`,
|
||||
`sudo mycelium --peers \\
|
||||
tcp://188.40.132.242:9651 \\
|
||||
tcp://136.243.47.186:9651 \\
|
||||
tcp://185.69.166.7:9651 \\
|
||||
tcp://185.69.166.8:9651 \\
|
||||
tcp://65.21.231.58:9651 \\
|
||||
tcp://65.109.18.113:9651 \\
|
||||
tcp://209.159.146.190:9651 \\
|
||||
tcp://5.78.122.16:9651 \\
|
||||
tcp://5.223.43.251:9651 \\
|
||||
tcp://142.93.217.194:9651`,
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export function CloudGettingStarted() {
|
||||
return (
|
||||
<section
|
||||
id="getting-started"
|
||||
className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
|
||||
>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
|
||||
Getting Started
|
||||
</Eyebrow>
|
||||
<SectionHeader as="h2" color="light" className="mt-6">
|
||||
Launch, connect, and operate in three steps.
|
||||
</SectionHeader>
|
||||
<P color="lightSecondary" className="mt-6">
|
||||
Follow the workflow from account creation to mesh connectivity.
|
||||
You’ll have a production-ready K3s cluster running on the
|
||||
ThreeFold Grid in minutes.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mt-16 grid gap-10 lg:grid-cols-3">
|
||||
{steps.map((step) => (
|
||||
<div
|
||||
key={step.title}
|
||||
className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.06]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
|
||||
{step.number}
|
||||
</Small>
|
||||
<span className="inline-flex size-10 items-center justify-center rounded-full border border-cyan-300/40 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">
|
||||
Go
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-6 text-xl font-semibold text-white">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
||||
{step.description}
|
||||
</p>
|
||||
<ul className="mt-6 space-y-3 text-sm text-gray-300">
|
||||
{step.bullets.map((bullet) => (
|
||||
<li
|
||||
key={bullet}
|
||||
className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
|
||||
>
|
||||
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{step.codes && (
|
||||
<div className="mt-6 space-y-4">
|
||||
{step.codes.map((code) => (
|
||||
<pre
|
||||
key={code}
|
||||
className="overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100"
|
||||
>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user