diff --git a/main/blocks.py b/main/blocks.py index a18500aba0ab569aa9a1b0d6d0c2a960832a7eb8..09df2b2b756b86f4d504847a4b78b7ad1f4af6da 100644 --- a/main/blocks.py +++ b/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") diff --git a/main/templates/main/blocks/boxes_block.html b/main/templates/main/blocks/boxes_block.html new file mode 100644 index 0000000000000000000000000000000000000000..c265ee71a919307eb702e8dab532c92859b40daa --- /dev/null +++ b/main/templates/main/blocks/boxes_block.html @@ -0,0 +1,26 @@ +{% 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> diff --git a/main/templates/main/includes/button_animated.html b/main/templates/main/includes/button_animated.html index 34c0802cfefaee5fe5abc215a9843905ab0b9b16..62462cfc21defa4f53cd0535e2337c25aa100003 100644 --- a/main/templates/main/includes/button_animated.html +++ b/main/templates/main/includes/button_animated.html @@ -1,4 +1,4 @@ -<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> diff --git a/main/templates/main/includes/newsletter_section.html b/main/templates/main/includes/newsletter_section.html new file mode 100644 index 0000000000000000000000000000000000000000..ff79b651c5106edc70952182b133c3a7cf3bc877 --- /dev/null +++ b/main/templates/main/includes/newsletter_section.html @@ -0,0 +1,33 @@ +<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> diff --git a/main/templates/main/main_home_page.html b/main/templates/main/main_home_page.html index 7004c81bfa14429e5a4a1b61125cdb63e85a4170..06e1bb0dd359b8c6119f160ca502dba1d5bfb98b 100644 --- a/main/templates/main/main_home_page.html +++ b/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 %}