<!--
  templateType: page
  isAvailableForNewContent: true
  label: Landing page
  screenshotPath: ../images/template-previews/landing-page.png
  description: "Conversion-focused landing page — logo only, no navigation, no footer. Structured for demo requests and lead generation."
-->
{% extends "./layouts/base-landing.html" %}

{% block body %}
<div id="main-content" class="body-container-wrapper">

{% dnd_area "dnd_area"
  label="Main section",
  class="body-container body-container--landing-page"
%}

  {# ------------------------------------------------------------------ #}
  {# 1. INTRO — Short headline and context                               #}
  {# ------------------------------------------------------------------ #}
  {% dnd_section
    padding={
      "default": {"top": 72, "bottom": 40}
    }
  %}
    {% dnd_column offset=0, width=12 %}
      {% dnd_row %}
        {% dnd_module "intro_text"
          path="@hubspot/rich_text",
          label="Intro Text"
        %}
          {% module_attribute "html" %}
            <div style="max-width: 700px; margin: 0 auto; text-align: center;">
              <p style="font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary, #007bff); margin-bottom: 0.75rem;">Independent CRM Expertise</p>
              <h1 style="font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem;">Find the Right CRM —<br>Without the Guesswork</h1>
              <p style="font-size: 1.125rem; line-height: 1.7; color: var(--color-text-secondary, #4b5563); margin: 0;">worksby.design gives you hands-on access to live CRM demos, side-by-side comparisons, and expert guidance — so you choose the right system the first time.</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# ------------------------------------------------------------------ #}
  {# 2. VALUE PROPS + FORM — Side by side                               #}
  {# ------------------------------------------------------------------ #}
  {% dnd_section
    padding={
      "default": {"top": 48, "bottom": 72}
    }
  %}
    {# Left: Value propositions #}
    {% dnd_column offset=0, width=7 %}
      {% dnd_row %}
        {% dnd_module "value_props"
          path="@hubspot/rich_text",
          label="Value Propositions"
        %}
          {% module_attribute "html" %}
            <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem;">What to expect from your free demo</h2>
            <ul style="list-style: none; padding: 0; margin: 0 0 2rem 0; display: flex; flex-direction: column; gap: 1rem;">
              <li style="display: flex; gap: 0.875rem; align-items: flex-start;">
                <span style="flex-shrink: 0; width: 24px; height: 24px; background: var(--color-primary, #007bff); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 700; margin-top: 0.125rem;">✓</span>
                <div>
                  <strong>Live CRM walkthrough</strong>
                  <p style="margin: 0.25rem 0 0; color: var(--color-text-secondary, #4b5563); font-size: 0.9375rem;">A tailored demo of the CRM systems that best match your team size and industry.</p>
                </div>
              </li>
              <li style="display: flex; gap: 0.875rem; align-items: flex-start;">
                <span style="flex-shrink: 0; width: 24px; height: 24px; background: var(--color-primary, #007bff); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 700; margin-top: 0.125rem;">✓</span>
                <div>
                  <strong>Side-by-side comparison</strong>
                  <p style="margin: 0.25rem 0 0; color: var(--color-text-secondary, #4b5563); font-size: 0.9375rem;">We compare the top contenders on the features that matter most to you.</p>
                </div>
              </li>
              <li style="display: flex; gap: 0.875rem; align-items: flex-start;">
                <span style="flex-shrink: 0; width: 24px; height: 24px; background: var(--color-primary, #007bff); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 700; margin-top: 0.125rem;">✓</span>
                <div>
                  <strong>Honest Q&amp;A with an independent specialist</strong>
                  <p style="margin: 0.25rem 0 0; color: var(--color-text-secondary, #4b5563); font-size: 0.9375rem;">No vendor bias. We work with you — not for any CRM vendor.</p>
                </div>
              </li>
              <li style="display: flex; gap: 0.875rem; align-items: flex-start;">
                <span style="flex-shrink: 0; width: 24px; height: 24px; background: var(--color-primary, #007bff); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 700; margin-top: 0.125rem;">✓</span>
                <div>
                  <strong>A clear recommendation</strong>
                  <p style="margin: 0.25rem 0 0; color: var(--color-text-secondary, #4b5563); font-size: 0.9375rem;">Walk away knowing exactly which CRM fits your business — and why.</p>
                </div>
              </li>
            </ul>
            <p style="font-size: 0.875rem; color: var(--color-text-muted, #9ca3af);">
              ✦ Trusted by 200+ companies across Europe &nbsp;·&nbsp; Free, no obligation
            </p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}

    {# Right: Form card — styled via base-landing.html's :has(form) selector
       (css_class isn't a supported dnd_column param — see audit N1c). #}
    {% dnd_column offset=7, width=5 %}
      {% dnd_row %}
        {% dnd_module "form_heading"
          path="@hubspot/rich_text",
          label="Form Heading"
        %}
          {% module_attribute "html" %}
            <h2 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.375rem;">Request your free demo</h2>
            <p style="font-size: 0.9375rem; color: var(--color-text-secondary, #4b5563); margin-bottom: 0.5rem;">Usually scheduled within 2 business days.</p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "demo_form"
          path="@hubspot/form",
          label="Demo Request Form"
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "form_privacy"
          path="@hubspot/rich_text",
          label="Privacy Note"
        %}
          {% module_attribute "html" %}
            <p style="font-size: 0.8125rem; color: var(--color-text-muted, #9ca3af); text-align: center; margin-top: 0.5rem;">
              🔒 &nbsp;We respect your privacy. No spam, ever. <a href="/privacy-policy" style="color: inherit; text-decoration: underline;">Privacy policy</a>
            </p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# ------------------------------------------------------------------ #}
  {# 3. TRUST STRIP — Social proof                                       #}
  {# ------------------------------------------------------------------ #}
  {% dnd_section
    padding={
      "default": {"top": 48, "bottom": 48}
    }
  %}
    {% dnd_column offset=0, width=12 %}
      {% dnd_row %}
        {% dnd_module "trust_strip"
          path="@hubspot/rich_text",
          label="Trust Strip"
        %}
          {% module_attribute "html" %}
            <div style="text-align: center; border-top: 1px solid var(--color-border, #e5e7eb); border-bottom: 1px solid var(--color-border, #e5e7eb); padding: 2.5rem 1rem;">
              <p style="font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted, #9ca3af); margin-bottom: 1.5rem;">What our users say</p>
              <blockquote style="max-width: 640px; margin: 0 auto; font-size: 1.125rem; line-height: 1.7; font-style: italic; color: var(--color-text, #111827);">
                "We had been stuck in a CRM selection process for four months. After one session with worksby.design we had our answer. Wish we had done this first."
              </blockquote>
              <p style="margin-top: 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--color-text, #111827);">— Sarah L., Operations Director</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# ------------------------------------------------------------------ #}
  {# 4. FAQ — Accordion                                                  #}
  {# ------------------------------------------------------------------ #}
  {% dnd_section
    padding={
      "default": {"top": 64, "bottom": 80}
    }
  %}
    {% dnd_column offset=0, width=12 %}
      {% dnd_row %}
        {% dnd_module "faq"
          path="../modules/accordion.module",
          label="FAQ"
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

{% end_dnd_area %}
</div>
{% endblock body %}
