> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getnimbus.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboard

export const EnterprisePlan = () => {
  return <div style={{
    position: "relative",
    maxWidth: "460px",
    padding: "32px",
    borderRadius: "24px",
    fontFamily: "system-ui, -apple-system, sans-serif"
  }} className="border bg-white dark:bg-zinc-900 border-[#E8E8E8] dark:border-zinc-800">
      <h2 style={{
    fontSize: "32px",
    fontWeight: "700",
    margin: "0 0 8px 0"
  }} className="text-[#1a1a1a] dark:text-white">
        Enterprise
      </h2>

      <p style={{
    fontSize: "16px",
    color: "#999",
    margin: "0 0 24px 0"
  }}>
        High volume access
      </p>

      <div style={{
    marginBottom: "32px"
  }}>
        <span style={{
    fontSize: "48px",
    fontWeight: "700"
  }} className="text-[#1a1a1a] dark:text-white">
          $50
        </span>
        <span style={{
    fontSize: "18px",
    color: "#999",
    marginLeft: "4px"
  }}>
          /month
        </span>
      </div>

      <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "16px",
    marginBottom: "32px"
  }}>
        {[{
    icon: "⚡",
    text: "40 RPM"
  }, {
    icon: "💳",
    text: "Credits available per month is 10,000,000"
  }, {
    icon: "🔌",
    text: "Access to full REST API"
  }].map((feature, index) => <div key={index} style={{
    display: "flex",
    alignItems: "center",
    gap: "12px"
  }}>
            <span style={{
    fontSize: "20px",
    color: "#1E96FC"
  }}>
              {feature.icon}
            </span>
            <span style={{
    fontSize: "16px"
  }} className="text-[#666] dark:text-[#999]">
              {feature.text}
            </span>
          </div>)}
      </div>

      <button style={{
    width: "100%",
    backgroundColor: "#1E96FC",
    color: "white",
    padding: "16px 24px",
    fontSize: "16px",
    fontWeight: "600",
    borderRadius: "12px",
    border: "none",
    cursor: "pointer",
    transition: "all 0.2s ease"
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = "#1565C0";
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = "#1E96FC";
  }} onClick={() => window.open("https://portal.getnimbus.io/", "_blank")}>
        Select Enterprise
      </button>
    </div>;
};

export const FreePlan = () => {
  return <div style={{
    position: "relative",
    maxWidth: "460px",
    padding: "32px",
    borderRadius: "24px",
    fontFamily: "system-ui, -apple-system, sans-serif"
  }} className="border bg-white dark:bg-zinc-900 border-[#E8E8E8] dark:border-zinc-800">
      <h2 style={{
    fontSize: "32px",
    fontWeight: "700",
    margin: "0 0 8px 0"
  }} className="text-[#1a1a1a] dark:text-white">
        Free
      </h2>

      <p style={{
    fontSize: "16px",
    color: "#999",
    margin: "0 0 24px 0"
  }}>
        Limit volume access
      </p>

      <div style={{
    marginBottom: "32px"
  }}>
        <span style={{
    fontSize: "48px",
    fontWeight: "700"
  }} className="text-[#1a1a1a] dark:text-white">
          $5
        </span>
        <span style={{
    fontSize: "18px",
    color: "#999",
    marginLeft: "4px"
  }}>
          lifetime
        </span>
      </div>

      <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "16px",
    marginBottom: "32px"
  }}>
        {[{
    icon: "⚡",
    text: "5 RPM"
  }, {
    icon: "💳",
    text: "Credits available per month is 1,000,000"
  }, {
    icon: "🔌",
    text: "Access to full REST API"
  }].map((feature, index) => <div key={index} style={{
    display: "flex",
    alignItems: "center",
    gap: "12px"
  }}>
            <span style={{
    fontSize: "20px",
    color: "#1E96FC"
  }}>
              {feature.icon}
            </span>
            <span style={{
    fontSize: "16px"
  }} className="text-[#666] dark:text-[#999]">
              {feature.text}
            </span>
          </div>)}
      </div>

      <button style={{
    width: "100%",
    backgroundColor: "#1E96FC",
    color: "white",
    padding: "16px 24px",
    fontSize: "16px",
    fontWeight: "600",
    borderRadius: "12px",
    border: "none",
    cursor: "pointer",
    transition: "all 0.2s ease"
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = "#1565C0";
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = "#1E96FC";
  }} onClick={() => window.open("https://portal.getnimbus.io/", "_blank")}>
        Select Standard
      </button>
    </div>;
};

export const PremiumPlan = () => {
  return <div style={{
    position: "relative",
    maxWidth: "460px",
    padding: "40px 32px 32px",
    borderRadius: "24px",
    fontFamily: "system-ui, -apple-system, sans-serif"
  }} className="border bg-white dark:bg-zinc-900 border-[#1E96FC]">
      <div style={{
    position: "absolute",
    top: "-18px",
    left: "50%",
    transform: "translateX(-50%)",
    backgroundColor: "#1E96FC",
    color: "white",
    padding: "8px 24px",
    borderRadius: "20px",
    fontSize: "14px",
    fontWeight: "600"
  }}>
        Most Popular
      </div>

      <h2 style={{
    fontSize: "32px",
    fontWeight: "700",
    margin: "0 0 8px 0"
  }} className="text-[#1a1a1a] dark:text-white">
        Premium
      </h2>

      <p style={{
    fontSize: "16px",
    color: "#888",
    margin: "0 0 24px 0"
  }}>
        Scale your volume access
      </p>

      <div style={{
    marginBottom: "32px"
  }}>
        <span style={{
    fontSize: "48px",
    fontWeight: "700"
  }} className="text-[#1a1a1a] dark:text-white">
          $20
        </span>
        <span style={{
    fontSize: "18px",
    color: "#888",
    marginLeft: "4px"
  }}>
          /month
        </span>
      </div>

      <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "16px",
    marginBottom: "32px"
  }}>
        {[{
    icon: "⚡",
    text: "10 RPM"
  }, {
    icon: "💳",
    text: "Credits available per month is 2,000,000"
  }, {
    icon: "🔌",
    text: "Access to full REST API"
  }].map((feature, index) => <div key={index} style={{
    display: "flex",
    alignItems: "center",
    gap: "12px"
  }}>
            <span style={{
    fontSize: "20px",
    color: "#1E96FC"
  }}>
              {feature.icon}
            </span>
            <span style={{
    fontSize: "16px"
  }} className="text-[#666] dark:text-[#999]">
              {feature.text}
            </span>
          </div>)}
      </div>

      <button style={{
    width: "100%",
    backgroundColor: "#1E96FC",
    color: "white",
    padding: "16px 24px",
    fontSize: "16px",
    fontWeight: "600",
    borderRadius: "12px",
    border: "none",
    cursor: "pointer",
    transition: "all 0.2s ease"
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = "#1565C0";
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = "#1E96FC";
  }} onClick={() => window.open("https://portal.getnimbus.io/", "_blank")}>
        Select Premium
      </button>
    </div>;
};

export const BtnLogin = () => {
  return <button style={{
    backgroundColor: "transparent",
    padding: "8px 16px",
    fontSize: "14px",
    fontWeight: "600",
    borderRadius: "50px",
    border: "1px solid #e5e5e5",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: "8px",
    transition: "all 0.2s ease",
    width: "max-content"
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = "#f5f5f5";
    e.currentTarget.style.borderColor = "#d4d4d4";
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = "transparent";
    e.currentTarget.style.borderColor = "#e5e5e5";
  }} onClick={() => window.open("https://portal.getnimbus.io/", "_blank")}>
      Manage your API Key
      <span style={{
    fontSize: "20px"
  }}>→</span>
    </button>;
};

export const MetricCard = ({title, value}) => {
  return <div className="p-6 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm text-zinc-600 dark:text-zinc-400">
          {title}
        </span>
      </div>
      <div className="text-3xl font-bold text-zinc-900 dark:text-white mb-2">
        {value}
      </div>
    </div>;
};

<div className="min-h-screen bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-950 dark:to-zinc-900">
  <div className="max-w-7xl mx-auto px-6 py-12 flex flex-col gap-6">
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-2">
        <div className="text-4xl text-black dark:text-white font-bold leading-[45px]">
          Accelerate your development
          <br /> with Nimbus Data

          <br />
        </div>

        ## Gain full visibility into the SUI, Solana, Eclipse and Ton data with Nimbus Data Service - the most trusted independent data source.
      </div>

      <BtnLogin />
    </div>

    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
      <FreePlan />

      <PremiumPlan />

      <EnterprisePlan />
    </div>

    <div className="flex flex-col gap-3">
      <CardGroup cols={2}>
        <Card title="Real-time Updates" icon="clock">
          Monitor your metrics in real-time with automatic updates every few
          seconds.
        </Card>

        <Card title="Interactive Charts" icon="chart-bar">
          Visualize your data with beautiful, interactive charts and graphs.
        </Card>

        <Card title="Activity Tracking" icon="list-check">
          Keep track of all important events and activities in your system.
        </Card>

        <Card title="Quick Actions" icon="bolt">
          Access frequently used actions with a single click from the dashboard.
        </Card>
      </CardGroup>
    </div>
  </div>
</div>