> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lpagent.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">
          $40
        </span>
        <span style={{
    fontSize: "18px",
    color: "#999"
  }}> /month</span>
      </div>

      <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "16px",
    marginBottom: "32px"
  }}>
        {[{
    icon: "⚡",
    text: "20 RPM"
  }, {
    icon: "💎",
    text: "Premium API endpoints"
  }].map((feature, index) => <div key={index} style={{
    display: "flex",
    alignItems: "center",
    gap: "12px"
  }}>
            <span style={{
    fontSize: "20px",
    color: "#16A34A"
  }}>
              {feature.icon}
            </span>
            <span style={{
    fontSize: "16px"
  }} className="text-[#666] dark:text-[#999]">
              {feature.text}
            </span>
          </div>)}
      </div>

      <button style={{
    width: "100%",
    backgroundColor: "#16A34A",
    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 = "#15803D";
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = "#16A34A";
  }} onClick={() => window.open("https://portal.lpagent.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">
        Basic
      </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">
          $10
        </span>
        <span style={{
    fontSize: "18px",
    color: "#999"
  }}> lifetime</span>
      </div>

      <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "16px",
    marginBottom: "32px"
  }}>
        {[{
    icon: "⚡",
    text: "5 RPM"
  }, {
    icon: "🔌",
    text: "Limited API endpoints"
  }].map((feature, index) => <div key={index} style={{
    display: "flex",
    alignItems: "center",
    gap: "12px"
  }}>
            <span style={{
    fontSize: "20px",
    color: "#16A34A"
  }}>
              {feature.icon}
            </span>
            <span style={{
    fontSize: "16px"
  }} className="text-[#666] dark:text-[#999]">
              {feature.text}
            </span>
          </div>)}
      </div>

      <button style={{
    width: "100%",
    backgroundColor: "#16A34A",
    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 = "#15803D";
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = "#16A34A";
  }} onClick={() => window.open("https://portal.lpagent.io/", "_blank")}>
        Select Basic
      </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-[#16A34A]">
      <div style={{
    position: "absolute",
    top: "-18px",
    left: "50%",
    transform: "translateX(-50%)",
    backgroundColor: "#16A34A",
    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"
  }}> /month</span>
      </div>

      <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "16px",
    marginBottom: "32px"
  }}>
        {[{
    icon: "⚡",
    text: "10 RPM"
  }, {
    icon: "💎",
    text: "Premium API endpoints"
  }].map((feature, index) => <div key={index} style={{
    display: "flex",
    alignItems: "center",
    gap: "12px"
  }}>
            <span style={{
    fontSize: "20px",
    color: "#16A34A"
  }}>
              {feature.icon}
            </span>
            <span style={{
    fontSize: "16px"
  }} className="text-[#666] dark:text-[#999]">
              {feature.text}
            </span>
          </div>)}
      </div>

      <button style={{
    width: "100%",
    backgroundColor: "#16A34A",
    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 = "#15803D";
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = "#16A34A";
  }} onClick={() => window.open("https://portal.lpagent.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.lpagent.io/", "_blank")}>
      Manage your API Key
      <span style={{
    fontSize: "20px"
  }}>→</span>
    </button>;
};

export const MetricCard = ({title, value}) => {
  return <div className="p-6 rounded-2xl 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 LP Data

          <br />
        </div>

        ## Gain full visibility into the Meteora DLMM, DAMM V2 data with LP Agent Data - 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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-4">
      <MetricCard title="Total Volume" value="$1,079,825,250+" />

      <MetricCard title="Opened Positions" value="2,208+" />

      <MetricCard title="Profit Made" value="$1,645,861" />

      <MetricCard title="Calls Per Months" value="300M+" />
    </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>