main: newsletter and hp boxes sections

main/blocks.py

@@ -23,6 +23,9 @@ class BoxesBlock(StructBlock):
     title = CharBlock(label="Nadpis")
     list = ListBlock(BoxBlock, label="Boxíky")
 
+    class Meta:
+        template = "main/blocks/boxes_block.html"
+
 
 class HomePageCarouseSlideBlock(CTAMixin, StructBlock):
     image = ImageChooserBlock(label="Hlavní obrázek jednoho slidu carouselu")

main/templates/main/blocks/boxes_block.html

+{% load wagtailimages_tags %}
+
+<div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
+     style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+  <div class="container--medium">
+    <h2 class="head-7xl text-center mb-6 xl:mb-28">
+      {{ self.title }}
+    </h2>
+    <div class="flex flex-wrap justify-center items-center">
+      {% for box in self.list %}
+        <div class="mb-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1">
+          {% image box.image max-200x200 as box_img %}
+          <img
+            src="{{ box_img.url }}"
+            alt=""
+            class="mb-8"
+          >
+          <h5 class="head-4xl mb-8">
+            {{ box.title }}
+          </h5>
+          {% include 'main/includes/button_animated.html' with btn_link=box.button_link btn_text=box.button_text %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>

main/templates/main/includes/button_animated.html

-<a href="" class="btn btn__slide__wrap {{ extra_classes }}">
+<a href="{{ btn_link }}" class="btn btn__slide__wrap {{ extra_classes }}">
   <span class="btn text-sm bg-black text-white w-32 lg:text-base">
     {{ btn_text | default_if_none:"Číst dále" }}
   </span>

main/templates/main/includes/newsletter_section.html

+<div class="section-clip bg-cover bg-no-repeat flex py-16 lg:py-36"
+     style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')">
+  <div class="grid-container items-center px-4">
+    <div class="grid-full flex flex-col">
+      <div class="flex space-x-3 mb-4">
+        <i class="ico--anchor text-7xl xl:text-9xl mb-4 xl:w-1/4"></i>
+        <h5 class="uppercase mt-4 head-alt-md xl:head-alt-lg">Odebírej náš <br> newsletter</h5>
+      </div>
+      <div class="flex xl:space-x-3 flex-wrap flex-col xl:flex-row">
+          <span class="uppercase text-sm xl:text-base font-bold mb-2 xl:w-1/4">
+            Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy!
+          </span>
+        <div class="">
+          <input
+            type="text"
+            class="text-input form-field__control mb-3 w-full"
+            value=""
+            placeholder="Tvůj email"
+          />
+
+          <div class="checkbox form-field__control mb-3">
+            <input type="checkbox" id="agreement_checkbox">
+            <label class="text-xs font-bold" for="agreement_checkbox">
+              Souhlasím se zpracováním osobních údajů
+            </label>
+          </div>
+
+          {% include 'main/includes/button_animated.html' with btn_link=box.button_link btn_text="Odebírat" %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

main/templates/main/main_home_page.html

@@ -6,5 +6,7 @@
     {% for block in page.content %}
       {% include_block block %}
     {% endfor %}
+
+    {% include "main/includes/newsletter_section.html" %}  {# TODO boxy cheme pod (dvě sekce contentu nebo ify) #}
   </main>
 {% endblock %}