Update demo pages

Author: smnandre

ux.symfony.com/assets/styles/components/_demo-container.scss

@@ -5,6 +5,16 @@
   border-top-right-radius: 12px;
 }
 
+.demo-introduction {
+  a {
+    color: var(--bs-code-color);
+    font-weight: 500;
+  }
+  code {
+    font-size: .95em;
+  }
+}
+
 .demo-container-inner {
   background-color: var(--bs-secondary-bg);
   border: 1px solid var(--bs-secondary-bg-subtle);

ux.symfony.com/templates/components/CodeBlock.html.twig

@@ -26,7 +26,11 @@
                 {{ stimulus_target('code-expander', 'expandCodeButton') }}
                 {{ stimulus_action('code-expander', 'expandCode') }}
                 style="display: none;"
-            >Expand code</button>
+            >
+                <twig:Icon name="arrow-down" />
+                Expand code
+                <twig:Icon name="arrow-down" />
+            </button>
         {% endblock %}
     </div>
 </div>

ux.symfony.com/templates/liveDemoBase.html.twig

@@ -24,7 +24,7 @@
                 <a href="{{ url('app_demos') }}">DEMO</a>
             </p>
             <h1 class="ubuntu text-center">{{ demo.name }}</h1>
-            <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4">
+            <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 demo-introduction">
                 {{ demo.longDescription|markdown_to_html }}
             </div>
         </div>
@@ -37,7 +37,7 @@
     </div>
 
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5 mb-5">
-        <div class="mb-3" style="position: relative;">
+        <div class="mb-5" style="position: relative;">
             <div class="p-4 markdown-container bg-body shadow-blur shadow-blur--rainbow" id="demo">
                 {% block demo_content %}{% endblock %}
             </div>