contact page template

main/templates/main/main_contact_page.html

@@ -2,7 +2,7 @@
 {% load wagtailcore_tags wagtailimages_tags shared_filters %}
 
 {% block content %}
-  {% include 'main/includes/layout/simple_page_header' %}
+  {% include 'main/includes/layout/simple_page_header.html' %}
 
   <main role="main">
     <section class="grid-container no-max mb-16">
@@ -71,9 +71,29 @@
           Další kontakty
         </h2>
         <div class="flex flex-wrap">
-          {{> molecules-contact-block }}
-          {{> molecules-contact-block }}
-          {{> molecules-contact-block }}
+          {% for contact_block in page.contact_boxes %}
+            <div class="contact-box">
+              <div>
+                <div class="h-16 mx-auto w-16">
+                  hm, image...
+                </div>
+                <h3 class="font-alt mb-3 text-xl">
+                  Adresář
+                </h3>
+                <p>
+                  Další osoby naleznete na stránce pirati.cz
+                </p>
+              </div>
+              <a href="" class="btn btn__slide__wrap">
+            <span class="btn bg-black text-white w-32">
+              Lidé
+            </span>
+                <span class="btn bg-blue-300 text-white w-32">
+              Lidé
+            </span>
+              </a>
+            </div>
+          {% endfor %}
         </div>
       </section>
 
@@ -84,9 +104,28 @@
           Kontakty pro média
         </h2>
         <div class="flex flex-wrap">
-          {{> molecules-contact-person-box }}
-          {{> molecules-contact-person-box }}
-          {{> molecules-contact-person-box }}
+          {% for contact_person_box in page.contact_people %}
+            <div class="flex person-box mb-4 mr-4">
+              <div class="mr-7">
+                <img class="rounded-full shadow-sm w-20 sm:w-40" src="https://randomuser.me/api/portraits/women/26.jpg"
+                     alt="user image">
+              </div>
+              <div class="flex flex-col py-4">
+                <h6 class="font-bold text-2xl sm:text-3xl">
+                  {{ contact_person_box.value.person.title }}
+                </h6>
+                <span class="mb-6 text-grey-300">
+              {{ contact_person_box.value.person.position }}
+            </span>
+                <span>
+                {{ contact_person_box.value.person.phone}}
+              </span>
+                <span class="text-turquoise-500">
+                {{ contact_person_box.value.person.email }}
+              </span>
+              </div>
+            </div>
+          {% endfor %}
         </div>
     </div>
     </section>