index.html

---
layout: homepage
---

<div class="homepage">
  <main class="bg-blue">

    <div class="pt-3 pt-sm-3 mb-2 mb-sm-5">
      {% include menu.html %}
    </div>

    <div class="container main-content text-center mt-4 mt-sm-0">
      <h1 class="white mb-3">Monica helps you have more meaningful relationships.</h1>
      <h2 class="white mb-5">Monica is a simple, open source, personal CRM. For your personal life, not your business.</h2>

      <div class="mb-3">
        <a href="https://app.monicahq.com" class="btn btn-primary px-4 py-3">Create account</a>
      </div>

      <img class="visual img-fluid" src="{{ '/assets/img/homepage-visual-1x.png' | prepend: site.baseurl | prepend: site.url }}"
            srcset="{{ '/assets/img/homepage-visual-1x.png' | prepend: site.baseurl | prepend: site.url }} 1x,
            {{ '/assets/img/homepage-visual-2x.png' | prepend: site.baseurl | prepend: site.url }} 2x"  alt="Image">
    </div>
  </main>

  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="font-weight-normal text-center">Record everything that’s important about the ones you care about.</h3>
        <p class="text-center mb-1 mb-sm-5">So you can actually remember it, with the help of a simple software, where and whenever you need.</p>

        <div class="things mb-5 px-4 py-5">
          <h3 class="text-center font-weight-normal mb-5">
            A few things Monica will let you remember about your contacts:
          </h3>
          <div class="row">
            <div class="col-12 col-sm-4">
              <img class="laptop" src="{{ '/assets/img/laptop-1x.png' | prepend: site.baseurl | prepend: site.url }}"
                    srcset="{{ '/assets/img/laptop-1x.png' | prepend: site.baseurl | prepend: site.url }} 1x,
                    {{ '/assets/img/laptop-2x.png' | prepend: site.baseurl | prepend: site.url }} 2x" alt="Image">
            </div>
            <div class="col-12 col-sm-4">
              <ul class="px-0 py-0 no-bullet">
                <li class="mb-3">Information about family</li>
                <li class="mb-3">Work information</li>
                <li class="mb-3">Relation between contacts</li>
                <li class="mb-3">Activites done together</li>
              </ul>
            </div>
            <div class="col-12 col-sm-4">
              <ul class="px-0 py-0 no-bullet">
                <li class="mb-3">Reminders about important dates</li>
                <li class="mb-3">Gift ideas or gifts you've made</li>
                <li class="mb-3">Tasks</li>
                <li class="mb-3">Debts you owe or owned</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="why mb-5">
          <h3 class="mb-3 text-center font-weight-normal">Why Monica?</h3>
          <p class="mb-4">Monica is for people who have jobs, a family, and are busy trying to find a good work/life balance. So busy, that they don’t have time anymore to remember to call a friend, say happy birthday to a nephew, or remember to invite someone special for dinner next week. The older we get the more life gets in the way. It’s sad, but it’s the reality. I created Monica to help these people.</p>

          <p class="mb-4">Monica is not for everyone. It’s probably not targeted at people who see their friends every day and have an incredibly busy social life.</p>

          <p>Monica is not a social network. It's not Facebook. It's for your eyes only.</p>
        </div>

        <h3 class="text-center font-weight-normal">Create your account for free</h3>
        <p class="text-center mb-4">Or install Monica on a server that you own</p>
        <div class="text-center mb-3">
          <a href="https://app.monicahq.com" class="btn btn-primary px-4 py-3">Create account</a>
        </div>
        <p class="text-center font-weight-light mb-5">Already trusted by 10,000+ users.</p>
      </div>
    </div>
  </div>
</div>