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

# Home

> The Social Media Platform Built Directly Into Discord.

export const DocCard = ({icon, title, href, children}) => <a href={href} className="group block rounded-2xl border border-[#111112]/10 dark:border-[#F3EFE8]/10 hover:border-[#FF4A1C] dark:hover:border-[#FF4A1C] p-6 no-underline transition-colors">
    <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#FF4A1C]/10">{icon}</span>
    <p className="mt-3 mb-0 text-lg font-semibold text-[#111112] dark:text-[#F3EFE8] group-hover:text-[#FF4A1C]">
      {title}
    </p>
    <p className="mt-1 mb-0 text-[#111112]/60 dark:text-[#F3EFE8]/60">{children}</p>
  </a>;

<div className="max-w-6xl mx-auto px-4 sm:px-6 pt-10 lg:pt-16">
  <h1 className="sr-only">Chirper: The Social Media Platform Built Directly Into Discord</h1>

  <img src="https://mintcdn.com/chirper-documentation/fOaXl7OXj81knyDk/images/home/hero-light.jpg?fit=max&auto=format&n=fOaXl7OXj81knyDk&q=85&s=d1c63234574aca4a58d88e0799f9c124" alt="The Social Media Platform Built Directly Into Discord." className="block dark:hidden w-full rounded-3xl border border-[#111112]/10" noZoom width="2400" height="1354" data-path="images/home/hero-light.jpg" />

  <img src="https://mintcdn.com/chirper-documentation/fOaXl7OXj81knyDk/images/home/hero-dark.jpg?fit=max&auto=format&n=fOaXl7OXj81knyDk&q=85&s=c7ff378c7db66a2f7037188f0322c210" alt="This is where every post starts a conversation." className="hidden dark:block w-full rounded-3xl border border-[#F3EFE8]/10" noZoom width="2400" height="1348" data-path="images/home/hero-dark.jpg" />

  <div className="mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
    <p className="m-0 text-lg sm:text-xl text-[#111112]/70 dark:text-[#F3EFE8]/70 max-w-xl">
      Learn how to set up Chirper, get around its features, and use every command.
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/getting-started" className="inline-flex items-center rounded-full bg-[#FF4A1C] hover:bg-[#C3350F] px-6 py-3 font-semibold text-[#F3EFE8] no-underline transition-colors">
        Get started
      </a>

      <a href="/features/overview" className="inline-flex items-center rounded-full border border-[#111112]/20 dark:border-[#F3EFE8]/20 hover:border-[#FF4A1C] dark:hover:border-[#FF4A1C] px-6 py-3 font-semibold text-[#111112] dark:text-[#F3EFE8] no-underline transition-colors">
        Explore features
      </a>
    </div>
  </div>
</div>

<div className="max-w-6xl mx-auto px-4 sm:px-6 pt-20">
  <h2 className="m-0 text-3xl font-bold tracking-tight text-[#111112] dark:text-[#F3EFE8]">
    Explore the docs
  </h2>

  <div className="mt-6 grid gap-4 sm:grid-cols-2">
    <DocCard icon={<Icon icon="rocket" size={20} color="#FF4A1C" />} title="Getting started" href="/getting-started">
      Invite Chirper, create your channels, and run setup.
    </DocCard>

    <DocCard icon={<Icon icon="sparkles" size={20} color="#FF4A1C" />} title="Features" href="/features/overview">
      An overview of everything Chirper can do.
    </DocCard>

    <DocCard icon={<Icon icon="user-gear" size={20} color="#FF4A1C" />} title="Account management" href="/features/account-management">
      Create and manage your accounts, and view other profiles.
    </DocCard>

    <DocCard icon={<Icon icon="terminal" size={20} color="#FF4A1C" />} title="Commands" href="/commands/overview">
      Every command and how it works.
    </DocCard>
  </div>
</div>

<div className="max-w-6xl mx-auto px-4 sm:px-6 py-20">
  <h2 className="m-0 text-3xl font-bold tracking-tight text-[#111112] dark:text-[#F3EFE8]">
    Built for your community
  </h2>

  <div className="mt-6 grid gap-6 md:grid-cols-2">
    <a href="/features/internet" className="group block no-underline">
      <div className="overflow-hidden rounded-3xl border border-[#111112]/10 dark:border-[#F3EFE8]/10">
        <img src="https://mintcdn.com/chirper-documentation/fOaXl7OXj81knyDk/images/home/internet.jpg?fit=max&auto=format&n=fOaXl7OXj81knyDk&q=85&s=e6704a853a5f432b4b61bce9e96d28dd" alt="The Social Media Platform Built Directly Into Discord." className="block w-full transition-transform duration-300 group-hover:scale-[1.02]" noZoom width="1200" height="1200" data-path="images/home/internet.jpg" />
      </div>

      <p className="mt-4 mb-0 text-xl font-bold text-[#111112] dark:text-[#F3EFE8] group-hover:text-[#FF4A1C]">
        Internet
      </p>

      <p className="mt-1 mb-0 text-[#111112]/60 dark:text-[#F3EFE8]/60">
        Post, reply, and follow the conversation.
      </p>
    </a>

    <a href="/features/marketplace" className="group block no-underline">
      <div className="overflow-hidden rounded-3xl border border-[#111112]/10 dark:border-[#F3EFE8]/10">
        <img src="https://mintcdn.com/chirper-documentation/fOaXl7OXj81knyDk/images/home/marketplace.jpg?fit=max&auto=format&n=fOaXl7OXj81knyDk&q=85&s=c1ac407f8cb4baaa98b332af13b83e9c" alt="Buy, sell or trade. We make marketplace simple." className="block w-full transition-transform duration-300 group-hover:scale-[1.02]" noZoom width="1200" height="1200" data-path="images/home/marketplace.jpg" />
      </div>

      <p className="mt-4 mb-0 text-xl font-bold text-[#111112] dark:text-[#F3EFE8] group-hover:text-[#FF4A1C]">
        Marketplace
      </p>

      <p className="mt-1 mb-0 text-[#111112]/60 dark:text-[#F3EFE8]/60">
        Buy, sell, or trade with other members.
      </p>
    </a>
  </div>
</div>