---
import Donate from '../components/Donate.astro'
import Logo from '../components/Logo.astro'
import Map_ from '../components/Map.astro'
import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md'
import { Content as LeafletText } from '../content/how_to_use/leaflet.md'
import { Content as MapboxText } from '../content/how_to_use/mapbox.md'
import { Content as MaplibreText } from '../content/how_to_use/maplibre.md'
import { Content as MobileText } from '../content/how_to_use/mobile.md'
import { Content as OpenLayersText } from '../content/how_to_use/openlayers.md'
import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md'
import Layout from '../layouts/Layout.astro'
---

<Layout title="OpenFreeMap Quick Start Guide">
  <Logo title="OpenFreeMap<br>Quick Start Guide" />

  <div class="container" style="margin-top:30px; margin-bottom: 30px;">
    <p>
      This guide provides step-by-step instructions for integrating OpenFreeMap into your website or
      mobile application.
    </p><p>
      To get started, choose a style from the default styles provided below. Later, there'll be
      options to use custom styles as well.
    </p>
    <p>(You can navigate the map, it's interactive!)</p>
  </div>

  <Map_ showStyleURL={true} />

  <div class="container">
    <MaplibreText />
    <MapboxText />
    <LeafletText />
    <OpenLayersText />
    <MobileText />
    <CustomStylesText />
    <SelfHostingText />

    <Donate />
  </div>
</Layout>