www_projectmycelium_com/src/pages/cloud/CloudGettingStarted.tsx

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&rsquo;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>
  )
}