<!--
  templateType: page
  isAvailableForNewContent: true
  label: Home 2 (Optimized Hero)
  screenshotPath: ../images/template-previews/home2.png
  description: Homepage with optimized hero module for better mobile performance
-->
{% extends "./layouts/base.html" %}

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

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

  {# Optimized Hero Module - Mobile-first with separate images #}
  {% dnd_section
    padding={
      "default": {"top": 0, "bottom": 0}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "hero_module"
          path="../modules/hero.module",
          label="Hero Module",
          content={
            "eyebrow": "Welcome to Our Platform",
            "heading": "Transform Your Revenue Operations",
            "subheading": "<p>Unlock the full potential of HubSpot with expert RevOps strategies that drive predictable growth</p>",
            "cta_primary": {
              "text": "Get Started Today",
              "url": { "href": "#get-started", "type": "EXTERNAL" },
              "style": "solid"
            },
            "cta_secondary": {
              "text": "Learn More",
              "url": { "href": "#features", "type": "EXTERNAL" }
            }
          },
          images={
            "mobile_image": {
              "src": get_asset_url("../images/sample/hero-side.png"),
              "alt": "Transform your revenue operations",
              "width": 926,
              "height": 870
            },
            "desktop_background": {
              "src": get_asset_url("../images/sample/hero-main.jpg"),
              "alt": ""
            },
            "desktop_overlay": "gradient-left"
          },
          layout={
            "text_align_mobile": "center",
            "text_align_desktop": "center",
            "content_position": "center",
            "min_height_mobile": "auto",
            "min_height_desktop": "600px",
            "vertical_align": "center"
          },
          text_color_mobile={ "color": "#111827", "opacity": 100 },
          text_color_desktop={ "color": "#ffffff", "opacity": 100 },
          eyebrow_color={ "color": "#3b82f6", "opacity": 100 },
          advanced={
            "lazy_load_mobile": false,
            "desktop_breakpoint": "768px"
          }
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Product showcase section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    },
    vertical_alignment="MIDDLE"
  %}
    {% dnd_column %}
      {% dnd_row vertical_alignment="MIDDLE" %}
        {% dnd_module "product_text"
          path="@hubspot/rich_text",
          label="Product Text",
          width=6
        %}
          {% module_attribute "html" %}
            <h2>Transform Your Business</h2>
            <p>Experience the next generation of digital innovation with our cutting-edge solutions designed to scale with your ambitions.</p>
            <ul>
              <li>✓ Lightning-fast performance</li>
              <li>✓ Enterprise-grade security</li>
              <li>✓ 24/7 dedicated support</li>
              <li>✓ Seamless integration</li>
            </ul>
          {% end_module_attribute %}
        {% end_dnd_module %}
        {% dnd_module "product_image"
          path="@hubspot/image",
          label="Product Image",
          width=6,
          offset=6,
          img={
            "src": get_asset_url("../images/sample/product-showcase.jpg"),
            "alt": "Product showcase demonstration",
            "size_type": "auto"
          }
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Solutions cards section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "solutions_header" path="@hubspot/rich_text", label="Solutions Header" %}
          {% module_attribute "html" %}
            <h2 style="text-align: center;">Our Solutions</h2>
            <p style="text-align: center;">Tailored solutions for every business need</p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "solutions_cards"
          path="../modules/cards-grid.module",
          label="Solutions Cards",
          style={
            "card_variant": "default",
            "cols_desktop": "3",
            "cols_tablet": "2",
            "cols_mobile": "1"
          },
          cards=[
            {
              "image": {
                "src": get_asset_url("../images/sample/solution-small-business.jpg"),
                "alt": "Small business team working together",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Small business team working together",
              "title": "Small Business",
              "content": "<p>Streamlined solutions designed for growing businesses. Get enterprise-level capabilities at a price that makes sense for your budget.</p>",
              "cta_text": "Learn More",
              "cta_url": { "href": "#small-business" }
            },
            {
              "image": {
                "src": get_asset_url("../images/sample/solution-enterprise.jpg"),
                "alt": "Enterprise office building",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Enterprise office building",
              "title": "Enterprise",
              "content": "<p>Robust, scalable solutions built for complex organizations. Handle millions of transactions with ease and reliability.</p>",
              "cta_text": "Learn More",
              "cta_url": { "href": "#enterprise" }
            },
            {
              "image": {
                "src": get_asset_url("../images/sample/solution-education.jpg"),
                "alt": "Students in a classroom",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Students in a classroom",
              "title": "Education",
              "content": "<p>Purpose-built tools for educational institutions. Manage students, courses, and outcomes effectively.</p>",
              "cta_text": "Learn More",
              "cta_url": { "href": "#education" }
            }
          ]
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Testimonials section with cards #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "testimonials_header" path="@hubspot/rich_text", label="Testimonials Header" %}
          {% module_attribute "html" %}
            <h2 style="text-align: center;">What Our Clients Say</h2>
            <p style="text-align: center;">Trusted by businesses worldwide</p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "testimonials_cards"
          path="../modules/cards-grid.module",
          label="Testimonials Cards",
          style={
            "card_variant": "default",
            "cols_desktop": "4",
            "cols_tablet": "2",
            "cols_mobile": "1"
          },
          cards=[
            {
              "image": {
                "src": get_asset_url("../images/sample/testimonial-sarah.jpg"),
                "alt": "Profile picture of Sarah Johnson",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Profile picture of Sarah Johnson",
              "title": "Sarah Johnson",
              "eyebrow": "CEO, TechCorp",
              "content": "<p><em>'This solution transformed our operations completely. The ROI was evident within the first quarter, and our team productivity increased by 40%.'</em></p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/sample/testimonial-michael.jpg"),
                "alt": "Profile picture of Michael Chen",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Profile picture of Michael Chen",
              "title": "Michael Chen",
              "eyebrow": "Director of Operations, GlobalTech",
              "content": "<p><em>'Outstanding support and incredible results. The implementation was seamless and the ongoing support has been exceptional.'</em></p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/sample/testimonial-emma.jpg"),
                "alt": "Profile picture of Emma Williams",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Profile picture of Emma Williams",
              "title": "Emma Williams",
              "eyebrow": "VP Marketing, StartupCo",
              "content": "<p><em>'Game-changing platform that delivered beyond our expectations. We've seen 3x growth since implementation.'</em></p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/sample/testimonial-david.jpg"),
                "alt": "Profile picture of David Martinez",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Profile picture of David Martinez",
              "title": "David Martinez",
              "eyebrow": "CTO, InnovateTech",
              "content": "<p><em>'The best investment we've made in our digital infrastructure. Highly recommend to any growing business.'</em></p>"
            }
          ]
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Features section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "features_header" path="@hubspot/rich_text", label="Features Header" %}
          {% module_attribute "html" %}
            <h2 style="text-align: center;">Why Choose Us</h2>
            <p style="text-align: center;">Industry-leading features that set us apart</p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "features_cards"
          path="../modules/cards-grid.module",
          label="Features Cards",
          style={
            "card_variant": "minimal",
            "cols_desktop": "3",
            "cols_tablet": "2",
            "cols_mobile": "1",
            "image_max_width_type": "percent",
            "image_max_width_percent": 75
          },
          cards=[
            {
              "image": {
                "src": get_asset_url("../images/icons/icon-analytics.svg"),
                "alt": "Analytics icon",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Analytics icon",
              "title": "Advanced Analytics",
              "content": "<p>Real-time insights and comprehensive reporting dashboards to track every metric that matters to your business.</p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/icons/icon-security.svg"),
                "alt": "Security shield icon",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Security shield icon",
              "title": "Enterprise Security",
              "content": "<p>Bank-level encryption and security protocols to keep your data safe and compliant with global standards.</p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/icons/icon-api.svg"),
                "alt": "API connection icon",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "API connection icon",
              "title": "Powerful API",
              "content": "<p>Seamlessly integrate with your existing tools and workflows with our comprehensive REST API.</p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/icons/icon-support.svg"),
                "alt": "Support headset icon",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Support headset icon",
              "title": "24/7 Support",
              "content": "<p>Round-the-clock expert support to ensure your operations never skip a beat.</p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/icons/icon-global.svg"),
                "alt": "Global network icon",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Global network icon",
              "title": "Global Scale",
              "content": "<p>Infrastructure that scales with your business across multiple regions and time zones.</p>"
            },
            {
              "image": {
                "src": get_asset_url("../images/icons/icon-ai.svg"),
                "alt": "Artificial intelligence icon",
                "size_type": "auto",
                "loading": "lazy"
              },
              "image_alt": "Artificial intelligence icon",
              "title": "AI-Powered",
              "content": "<p>Leverage artificial intelligence to automate workflows and predict trends before they happen.</p>"
            }
          ]
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# CTA Section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "cta_text" path="@hubspot/rich_text", label="CTA Text" %}
          {% module_attribute "html" %}
            <div style="text-align: center;">
              <h2 style="font-size: 2.5rem; margin-bottom: 1rem;">Ready to Get Started?</h2>
              <p style="font-size: 1.25rem; margin-bottom: 2rem;">Join thousands of businesses already growing with our platform</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "cta_button"
          path="../modules/button.module",
          label="CTA Button",
          button_text="Start Your Free Trial"
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

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