fix: improve hero cards section

Author: herzog0

static/css/v3/v3-examples-section.css

@@ -2,7 +2,7 @@
   max-width: 80rem;
   margin-left: auto;
   margin-right: auto;
-  padding: var(--space-xl, 32px) var(--space-default, 8px);
+  padding: 10% var(--space-default, 8px);
   color: var(--color-text-primary);
 }
 

templates/base.html

@@ -362,24 +362,10 @@
       {% flag "v3" %}
       <div class="bg-slate text-white text-center py-2 font-semibold">v3 flag enabled</div>
       {% endflag %}
-      {% flag "v3" %}
-      {% include "v3/includes/_header_v3.html" %}
-      {% if request.resolver_match.url_name == 'v3-homepage' %}
-      {% include "v3/includes/_hero_home.html" with install_card_id="hero-home-1" hero_image_url=hero_image_url hero_background_image_url=hero_background_image_url %}
-      {% elif request.resolver_match.url_name == 'v3-demo-components' %}
-      {% include "v3/includes/_hero_home.html" with hero_background_image_url="" install_card_id="hero-home-1" hero_image_url_light=hero_legacy_image_url_light hero_image_url_dark=hero_legacy_image_url_dark %}
-      {% include "v3/includes/_hero_home.html" with install_card_id="hero-home-2" hero_image_url=hero_image_url %}
-      {% include "v3/includes/_hero_home.html" with install_card_id="hero-home-3" hero_image_url="" hero_image_url_light="" hero_image_url_dark="" %}
-      <div class="v3-demo-heros-spacer" style="margin-top: 3rem;"></div>
-      {% include "v3/includes/_hero_library.html" with hero_background_image_url="" title="Boost.Beast" description="Portable HTTP, WebSocket, and network operations using only C++11 and Boost.Asio" doc_url="#" source_url="#" slack_url="#" github_url="#" version_tag="C++ 03" added_text="Added in 1.66.0" hero_image_url_light=hero_legacy_image_url_light hero_image_url_dark=hero_legacy_image_url_dark is_flagship_lib=True %}
-      <div class="v3-demo-heros-spacer" style="margin-top: 3rem;"></div>
-      {% include "v3/includes/_hero_library.html" with title="Boost.Beast" description="Portable HTTP, WebSocket, and network operations using only C++11 and Boost.Asio" doc_url="#" source_url="#" slack_url="#" github_url="#" version_tag="C++ 03" added_text="Added in 1.66.0" hero_image_url=hero_image_url is_flagship_lib=True %}
-      {% include "v3/includes/_hero_library.html" with title="Boost.Beast" description="Portable HTTP, WebSocket, and network operations using only C++11 and Boost.Asio" doc_url="#" source_url="#" slack_url="#" github_url="#" version_tag="C++ 03" added_text="Added in 1.66.0" hero_image_url="" hero_image_url_light="" hero_image_url_dark="" %}
-      {% endif %}
-      {% endflag %}
       {% block main_content_wrapper %}<div class="md:px-3 mx-auto transition-all">{% endblock %}
       {% block content_header %}
         {% flag "v3" %}
+          {% include "v3/includes/_header_v3.html" %}
         {% else %}
           {% include "includes/_header.html" %}
         {% endflag %}

templates/v3/examples/_v3_example_section.html

@@ -39,6 +39,22 @@ <h3 class="v3-examples-section__toc-heading">Table of Contents</h3>
     <ul class="v3-examples-section__toc-list"></ul>
   </nav>
 
+  {%  with section_title="Hero Cards" %}
+    <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
+        <h3>{{ section_title }}</h3>
+      <div class="v3-examples-section__example-box">
+        {% include "v3/includes/_hero_home.html" with hero_background_image_url="" install_card_id="hero-home-1" hero_image_url_light=hero_legacy_image_url_light hero_image_url_dark=hero_legacy_image_url_dark %}
+        {% include "v3/includes/_hero_home.html" with install_card_id="hero-home-2" hero_image_url=hero_image_url %}
+        {% include "v3/includes/_hero_home.html" with install_card_id="hero-home-3" hero_image_url="" hero_image_url_light="" hero_image_url_dark="" %}
+        <div class="v3-demo-heros-spacer" style="margin-top: 3rem;"></div>
+        {% include "v3/includes/_hero_library.html" with hero_background_image_url="" title="Boost.Beast" description="Portable HTTP, WebSocket, and network operations using only C++11 and Boost.Asio" doc_url="#" source_url="#" slack_url="#" github_url="#" version_tag="C++ 03" added_text="Added in 1.66.0" hero_image_url_light=hero_legacy_image_url_light hero_image_url_dark=hero_legacy_image_url_dark is_flagship_lib=True %}
+        <div class="v3-demo-heros-spacer" style="margin-top: 3rem;"></div>
+        {% include "v3/includes/_hero_library.html" with title="Boost.Beast" description="Portable HTTP, WebSocket, and network operations using only C++11 and Boost.Asio" doc_url="#" source_url="#" slack_url="#" github_url="#" version_tag="C++ 03" added_text="Added in 1.66.0" hero_image_url=hero_image_url is_flagship_lib=True %}
+        {% include "v3/includes/_hero_library.html" with title="Boost.Beast" description="Portable HTTP, WebSocket, and network operations using only C++11 and Boost.Asio" doc_url="#" source_url="#" slack_url="#" github_url="#" version_tag="C++ 03" added_text="Added in 1.66.0" hero_image_url="" hero_image_url_light="" hero_image_url_dark="" %}
+      </div>
+    </div>
+  {% endwith %}
+
   {% with section_title="Buttons" %}
     <div class="v3-examples-section__block" id="{{ section_title|slugify }}">
       <h3>{{ section_title }}</h3>