minor #2069 [ux.symfony.com] Fix rendering/color issues on Map page (…

…Kocal)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

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

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

It looks like we have some visual issues in light mode on the Map page, we can't see the menu:
<img width="1501" alt="Capture d’écran 2024-08-15 à 07 42 21" src="https://github.com/user-attachments/assets/6a39c912-3cc3-4b73-82a5-16a5aa751d1e">

And we miss the `composer require ...` thing.

I've Replaced the usage of the new component `Hero` (introduced in #2053) by the good old `PackageHeader` component.

This is the quickest solution right now to correctly render UX Map page, and it gives us some times to improve this `Hero` component and re-use it in all UX package pages.

**EDIT:** I've seen with `@smnandre` for some minor adjustements:
<img width="1512" alt="image" src="https://github.com/user-attachments/assets/8544f46a-37aa-4b1e-964e-380174a2d0c5">
<img width="1510" alt="image" src="https://github.com/user-attachments/assets/b7617ebe-f014-4e50-a3b3-c78f5045b552">

Commits
-------

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

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 %}