src/pages/index.mdx

---
title: Mapping Infrastructure Made Easy
---

import Link from 'next/link';
import Image from 'next/image';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faListCheck,
  faVectorSquare,
  faEarthAmericas,
  faPeopleGroup
} from '@fortawesome/free-solid-svg-icons';
import Map from '@/components/map';
import { Features, Feature } from '@/components/features';
import { IconTitle } from '@/components/titles/IconTitle';

<div className="home-content">
  <div className="content-container">
    <h1 className="headline">Apache Baremaps</h1>
    <h2 className="title">Mapping Infrastructure Made Easy</h2>
    <div className="subtitle">
      Apache Baremaps is a toolkit and a set of infrastructure components{' '}
      <br className="sm:block hidden" /> for creating, publishing, and operating
      online maps.
    </div>
    <div className="subtitle">
      <Link href="/documentation">
        Get started <span>→</span>
      </Link>
    </div>
  </div>
  <div className="features-container">
    <div className="content-container">
      <Features>
        <Feature index={0} plain large style={{ height: 600 }}>
          <Map />
        </Feature>
        <Feature index={0}>
          <IconTitle icon={faListCheck}>
            <h3>Data Pipeline</h3>
          </IconTitle>
          <div>
            With Baremaps, you can easily create custom data pipelines to
            consolidate your spatial datasets in PostGIS. Baremaps supports
            several popular formats such as OsmPbf, ShapeFile, GeoPackage, and
            FlatGeoBuf, allowing you to seamlessly integrate with your existing
            workflows.
          </div>
        </Feature>
        <Feature index={0}>
          <IconTitle icon={faVectorSquare}>
            <h3>Vector Tiles</h3>
          </IconTitle>
          <div>
            Baremaps allows you to easily serve and publish custom vector tiles
            from PostGIS. Whether you need to create maps for web or mobile
            applications, Baremaps makes it simple and efficient. Additionally,
            we are continuously working on developing a high-quality base map.
          </div>
        </Feature>
        <Feature index={0}>
          <IconTitle icon={faEarthAmericas}>
            <h3>Geocoder</h3>
          </IconTitle>
          <div>
            Baremaps provides a geocoder that allows you to search for places
            and addresses. The geocoder is based on the GeoNames database and
            can be easily integrated into your existing applications. We are
            working on adding more features and improving the quality of the
            results.
          </div>
        </Feature>
        <Feature index={0}>
          <IconTitle icon={faPeopleGroup}>
            <h3>Contributing</h3>
          </IconTitle>
          <div>
            Whether you're an experienced or just getting started, there are
            many ways to get involved. We are experimenting with a range of new
            components, including IP to location, 3D Tiles Next, and geocoding,
            and would love your help. Let's create something amazing together!
          </div>
        </Feature>
      </Features>
    </div>
  </div>
</div>

<style jsx>{`
  .content-container {
    max-width: 90rem;
    padding-left: max(env(safe-area-inset-left), 1.5rem);
    padding-right: max(env(safe-area-inset-right), 1.5rem);
    margin: 0 auto;
  }
  .features-container {
    margin: 8rem 0 0;
    padding: 4rem 0;
    background-color: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
  }
  .features-container .content-container {
    margin-top: -8rem;
  }
  :global(.dark) .features-container {
    background-color: #000;
    border-bottom: 1px solid rgb(38, 38, 38);
  }
  .headline {
    display: block;
    font-size: 3.125rem;
    font-size: min(4.375rem, max(8vw, 2.5rem));
    font-weight: 3;
    font-feature-settings: initial;
    letter-spacing: -0.12rem;
    margin-left: -0.2rem;
    margin-top: 3.4rem;
    line-height: 1.1;
  }
  .title {
    display: block;
    font-size: 3.125rem;
    font-size: min(4.375rem, max(8vw, 2.5rem));
    font-weight: 700;
    font-feature-settings: initial;
    letter-spacing: -0.12rem;
    margin-top: 1rem;
    margin-left: -0.2rem;
    line-height: 1.1;
  }
  .subtitle {
    margin-top: 1.5rem;
    font-size: 1.3rem;
    font-size: min(1.3rem, max(3.5vw, 1.2rem));
    font-feature-settings: initial;
    line-height: 1.6;
  }
  .nextjs-link {
    color: currentColor;
    text-decoration: none;
    font-weight: 600;
  }
  @media screen and (max-width: 1200px) {
    .headline {
      letter-spacing: -0.08rem;
    }
  }
`}</style>