[ux.symfony.com] Fix rendering/color issues on Map page

Author: Kocal

ux.symfony.com/assets/styles/components/_PackageHeader.scss

@@ -1,6 +1,7 @@
 .PackageHeader {
   h1 {
     text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .05);
+    text-wrap: balance;
 
     em {
       display: inline-flex;

ux.symfony.com/src/Service/UxPackageRepository.php

@@ -37,8 +37,7 @@ public function findAll(?string $query = null): array
                 'map',
                 'UX Map',
                 'app_map',
-                '#fff',
-                // 'linear-gradient(to bottom right, #58D984EB, #0083A2D1), #3386dfd4',
+                '#1BA980',
                 'linear-gradient(to bottom right, #1BA980, #209127 75%, #C0CB2A)',
                 'Interactive Maps',
                 'Render interactive Maps in PHP with Leaflet or Google Maps.',

ux.symfony.com/templates/ux_packages/map.html.twig

@@ -3,15 +3,18 @@
 {% set package = 'map'|ux_package %}
 
 {% block package_header %}
-    <twig:Hero
-        eyebrows="Assert('Mapper')"
-        title="UX Map"
-        url="{{ url('app_map') }}"
-    >
-        Embed <code>interactive maps</code> in your Symfony application in a breeze!
-        <br />
-        Decouple your code from your map provider: <code>Google Maps</code>, <code>LeaftLet</code>.
-    </twig:Hero>
+    {% component PackageHeader with {
+        package: 'map',
+        eyebrowText: 'Seamless Maps Integration',
+    } %}
+        {% block title_header %}
+            Embed <em>interactive maps</em> in a breeze!
+        {% endblock %}
+
+        {% block sub_content %}
+            Decouple your code from your map provider: <em>Google Maps</em>, <em>LeaftLet</em>.
+        {% endblock %}
+    {% endcomponent %}
 {% endblock %}
 
 {% block code_block_left %}