<div>
    <div class="content text">
      <div class="container mx-auto">
        <h2>{{ (index site.Params "contact-us").president.title }}</h2>
        <div class="pt-1 d-flex justify-center">
	{{ partial "contact-card.html"
	(dict "phone" "0616617945"
            "avatarUrl" "/proxyPhotos?code=/profiles/franck.jpg"
            "name" "Franck GITON"
            "email" "werobot.fr@gmail.com")
	    }}
        </div>
        <h2>{{ (index site.Params "contact-us").form.title }}</h2>
        <p class="mb-3">{{ (index site.Params "contact-us").form.description }}</p>
        <form
		action="mailto:contact@werobot.fr"
          class="w-full">
          <div class="flex flex-wrap -mx-3">
            <div class="w-full md:w-1/2 px-3">
              <label
                class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-1"
                for="name">
                {{ (index site.Params "contact-us").form.name }}
              </label>
              <input
                id="name"
		placeholder="{{ (index site.Params "contact-us").form.name_placeholder }}"
                class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                type="text">
            </div>
            <div class="w-full md:w-1/2 px-3">
              <label
                class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-1"
                for="email">
                {{ (index site.Params "contact-us").form.email }}
              </label>
              <input
                id="email"
                placeholder="{{ (index site.Params "contact-us").form.email_placeholder }}"
                class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-grey"
                type="email">
            </div>
          </div>
          <div class="flex flex-wrap -mx-3">
            <div class="w-full px-3">
              <label
                class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-1"
                for="subject">
                {{ (index site.Params "contact-us").form.subject }}
              </label>
              <input
                id="subject"
                placeholder="{{ (index site.Params "contact-us").form.subject_placeholder }}"
                class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-grey"
                type="text">
            </div>
          </div>
          <div class="flex flex-wrap -mx-3 mb-4">
            <div class="w-full px-3">
              <label
                class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-1"
                for="content">
                {{ (index site.Params "contact-us").form.content }}
              </label>
              <textarea
                id="content"
                placeholder="{{ (index site.Params "contact-us").form.content_placeholder }}"
                class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-2 leading-tight focus:outline-none focus:bg-white focus:border-grey"
                style="height: 12em">
              </textarea>
            </div>
          </div>
          <div class="flex flex-wrap justify-end">
            <button type=submit class="button button-primary">
              <div class="button-icon">
                <i
                  class="fa fas fa-check-circle"></i>
              </div>
              <div
		      class="button-text">
                {{ (index site.Params "contact-us").form.submit }}
              </div>
            </button>
          </div>
        </form>
      </div>
    </div>
