import { Card, Cards } from 'nextra/components';
import { BrandLogo } from 'src/components/brand-logo';

# Get started

Create an account on [Openpanel](https://openpanel.dev) and setup your first project (takes 2 minutes). You will get a `clientId` that you will use to initialize Openpanel in your app.

<Cards>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" />
    }
    title="HTML / Script"
    href="/docs/script"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
    }
    title="React"
    href="/docs/react"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
    }
    title="React-Native"
    href="/docs/react-native"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo
        isDark
        src="https://static-00.iconduck.com/assets.00/nextjs-icon-512x512-y563b8iq.png"
      />
    }
    title="Next.js"
    href="/docs/nextjs"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo
        isDark
        src="https://www.datocms-assets.com/205/1642515307-square-logo.svg"
      />
    }
    title="Remix"
    href="/docs/remix"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1024px-Vue.js_Logo_2.svg.png" />
    }
    title="Vue"
    href="/docs/vue"
  >
    {' '}
  </Card>
  <Card
    icon={
      <BrandLogo
        isDark
        src="https://astro.build/assets/press/astro-icon-dark.png"
      />
    }
    title="Astro"
    href="/docs/vue"
  >
    {' '}
  </Card>
</Cards>
