homepage.html

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Homepage
-->
{% extends "./layouts/base.html" %}

{% block body %}
<main class="body-container-wrapper">
  {% set placeholder = {
      'src': get_asset_url('../images/grayscale-mountain.png'),
      'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
      'size_type': 'auto'
    }
  %}
  {% dnd_area "dnd_area" class='body-container body-container__homepage', label='Main section' %}

    {% dnd_section vertical_alignment='MIDDLE' %}
    {% dnd_module path='@hubspot/image', width=6, img={{ placeholder }} %}
      {% end_dnd_module %}
      {% dnd_column width=6, offset=6 %}
        {% dnd_row %}
          {% dnd_module path='@hubspot/rich_text'%}
            {% module_attribute "html"%}
              <h1>This is your main headline.</h1>
              <p>Use this space to tell everyone about what you have to offer.</p>
            {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module path='@hubspot/form' %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {% dnd_section vertical_alignment='MIDDLE' %}
      {% dnd_module path='@hubspot/rich_text', width=6 %}
        {% module_attribute "html"%}
          <h2>Provide more details here.</h2>
          <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
        {% end_module_attribute %}
      {% end_dnd_module %}
      {% dnd_module path='@hubspot/image', width=6, offset=6, img={{ placeholder }} %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {% dnd_section vertical_alignment='MIDDLE' %}
      {% dnd_module path='@hubspot/image', width=6, img={{ placeholder }} %}
      {% end_dnd_module %}
      {% dnd_module path='@hubspot/rich_text', width=6, offset=6 %}
        {% module_attribute "html"%}
          <h2>Provide more details here.</h2>
          <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {% dnd_section max_width=700,
      padding={
        'top': 140,
        'bottom': 160,
        'left': 20,
        'right': 20
      },
      background_image={
        'backgroundPosition': 'MIDDLE_CENTER',
        'backgroundSize': 'cover',
        'imageUrl': get_asset_url('../images/large-placeholder-image.png')
      },
      vertical_alignment='MIDDLE'
    %}
      {% dnd_column %}
        {% dnd_row
          padding={
            'top': 0,
            'bottom': 40,
            'left': 0,
            'right': 0
          }
        %}
          {% dnd_module path='@hubspot/rich_text', flexbox_positioning="TOP_CENTER" %}
          {% module_attribute "html"%}
            <div style="text-align: center">
              <h2 style="">Provide an excerpt here</h2>
              <p style="">Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
            </div>
          {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module path='../modules/Customizable button',
            flexbox_positioning='MIDDLE_CENTER',
            button_text='CLICK HERE'
          %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {% dnd_section vertical_alignment='MIDDLE' %}
      {% dnd_column width=4 %}
        {% dnd_row %}
          {% dnd_module path='../modules/Testimonial.module',
            customer_name = "Mary",
            profile_pic = {
              alt: "Mary Profile Picture",
              src: "{{ get_asset_url('../images/profile-pic-mary.svg') }}"
            }
          %}
            {% module_attribute "testimonial" %}
              Wow, what a product! I can't wait to recommend this to all my family and friends!
            {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
      {% dnd_column width=4, offset=4 %}
        {% dnd_row %}
          {% dnd_module path='../modules/Testimonial.module',
            customer_name = "Ollie",
            profile_pic = {
              alt: "Ollie Profile Picture",
              src: "{{ get_asset_url('../images/profile-pic-ollie.svg') }}"
            }
          %}
          {% module_attribute "testimonial" %}
            I can't believe that I ever conducted business without the use of this product!
          {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
      {% dnd_column width=4, offset=8 %}
        {% dnd_row %}
          {% dnd_module path='../modules/Testimonial.module',
            customer_name = "Erin",
            profile_pic = {
              alt: "Erin Profile Picture",
              src: "{{ get_asset_url('../images/profile-pic-erin.svg') }}"
            }
          %}
            {% module_attribute "testimonial" %}
              My business has nearly tripled since I began to use this product! Don't wait, start now!
            {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}
  {% end_dnd_area %}
</main>
{% endblock body %}