---
import Donate from '../components/Donate.astro'
import Logo from '../components/Logo.astro'
import Map_ from '../components/Map.astro'
import Layout from '../layouts/Layout.astro'

import { Content as AfterDonate } from '../content/index/after_donate.md'
import { Content as BeforeDonate } from '../content/index/before_donate.md'
import { Content as WhatisText } from '../content/index/whatis.md'
---

<Layout title="OpenFreeMap">
  <Logo title="OpenFreeMap" />

  <div class="container">
    <WhatisText />
    <h2>How can I use it?</h2>
  </div>

  <Map_ />

  <div class="container">
    <p>
      Have a look at the default styles and read more about how to integrate it to your website or
      app:
    </p>

    <a class="quick-start-button" href="/quick_start/">Quick Start Guide</a>

    <BeforeDonate />
    <Donate />
    <AfterDonate />
  </div>
</Layout>