minor #2092 [Site] Refresh banner (smnandre)

This PR was merged into the 2.x branch.

Discussion
----------

[Site] Refresh banner

* Refreshed banner
* Fix menu icons (mobile)
* Fix homepage spacing (mobile)

| x | Mobile | Desktop |
| - | - | - |
| Before | ![ux-header2](https://github.com/user-attachments/assets/ba0273b3-afbf-4218-bcec-85c6e8ba7c22) | ![ux-header3](https://github.com/user-attachments/assets/4a919b92-ec23-47c2-b59f-4b6857661eff) |
| After | ![ux-header1](https://github.com/user-attachments/assets/f96a2dad-069a-4d1c-8d73-8692e78661ca)  | ![ux-header4](https://github.com/user-attachments/assets/2e64403d-0211-4bbf-8944-08d956ab1852) |

Commits
-------

56b4c8f [Site] Refresh banner

Author: Kocal

ux.symfony.com/assets/styles/app/_root.scss

@@ -14,7 +14,7 @@
   --space-larger: 2rem;
 
   // Fonts
-  --font-family-title: "Ubuntu";
+  --font-family-title: "Ubuntu", "Helvetica Neue", sans-serif;
   --font-family-text: system-ui, sans-serif;
   --font-family-code: ui-monospace, "SF Mono", SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 

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

@@ -16,21 +16,11 @@
 
 .BannerInner {
   display: flex;
-  flex-direction: column;
-  padding: 1rem 0;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding-block: .5rem;
   gap: 1rem;
   position: relative;
-  margin: 0 auto;
-}
-
-.BannerMedia {
-  align-self: center;
-  justify-self: center;
-}
-.BannerImage {
-  width: max(10vw, 40px);
-  height: auto;
-  filter: drop-shadow(1px 1px .5rem #000) drop-shadow(2px 2px 2rem #970404);
 }
 
 .BannerContent {
@@ -42,25 +32,19 @@
   text-wrap: balance;
 }
 
-.BannerTitle {
-  text-align: center;
-  font-size: 1.2em;
-  font-family: var(--font-family-title);
-  margin: 0;
-  color: #fff;
-}
-
 .BannerText {
   text-align: center;
   margin: 0;
-  font-size: 0.85rem;
-  line-height: 1.2;
-  font-weight: 300;
-  color: #fff;
+  font-size: 0.8rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: #fffd;
 }
 .BannerText em {
   text-decoration: underline;
   text-underline-offset: .25rem;
+  font-weight: 600;
+  font-style: normal;
 }
 
 .BannerAction {
@@ -72,17 +56,17 @@
 .BannerButton {
   display: flex;
   align-items: center;
-  padding: .35em .75em;
+  padding: .15em .5em;
   align-self: center;
   color: #fffc;
-  font-size: 1.1em;
+  font-size: .9em;
   font-family: var(--font-family-title);
-  gap: .5em;
+  gap: .35em;
   justify-content: center;
   background: linear-gradient(#000e, #000d) padding-box,
   linear-gradient(90deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%) border-box;
   border-radius: 2em;
-  border: 3px solid transparent;
+  border: 2px solid transparent;
   transition: all 250ms linear;
 }
 .BannerButton:hover {
@@ -103,13 +87,11 @@
 .BannerButton:hover svg {
   transform: scale(1.1);
 }
-
 @media screen and (min-width: 768px) {
-  .BannerImage {
-    width: 64px;
-  }
   .BannerInner {
-    flex-direction: row;
-    padding: 1rem 2rem;
+    padding: .5rem 2rem;
+  }
+  .BannerText {
+    font-size: .9rem;
   }
 }

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

@@ -1,14 +1,7 @@
 <aside class="Banner">
     <div class="container-xxl">
         <div class="BannerInner">
-            <div class="BannerMedia">
-                <picture>
-                    <source type="image/webp" srcset="{{ asset('images/heart.webp') }}"/>
-                    <img src="{{ asset('images/heart.png') }}" alt="Heart" class="BannerImage" width="256" height="256">
-                </picture>
-            </div>
             <div class="BannerContent">
-                <p class="BannerTitle">Help Ryan Get The Treatment He Needs!</p>
                 <p class="BannerText">
                     Ryan is the lead maintainer of Symfony UX. Now he <em>needs your help</em>.
                 </p>

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

@@ -17,15 +17,15 @@
                 </button>
                 <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode"/>
                 <a
-                    class="AppNav_item AppNav_item--icon"
+                    class="AppNav_item AppNav_item--icon d-none d-sm-grid"
                     href="https://x.com/symfonyux"
                     rel="external me"
                     title="Symfony UX on X (Twitter)"
                 >
                     <twig:Icon name="x-twitter"/>
                 </a>
                 <a
-                    class="AppNav_item AppNav_item--icon"
+                    class="AppNav_item AppNav_item--icon d-none d-sm-grid"
                     href="https://github.com/symfony/ux"
                     rel="external me"
                     title="Symfony UX on GitHub"

ux.symfony.com/templates/main/homepage.html.twig

@@ -12,7 +12,7 @@
     <div class="container-fluid container-xxl px-4 py-4 px-md-5 py-md-5">
 
         <div class="row justify-content-center g-5 pt-3 mt-2">
-          <div class="col-12 text-center text-lg-start col-lg-6">
+          <div class="col-12 text-center text-lg-start col-lg-6 mt-0 mt-sm-5">
             <span class="eyebrows">curated by symfony</span>
             <h1 class="my-3">JavaScript <em class="rainbow-emphasis">tools</em> you can't live without.</h1>
             <p>A set of PHP &amp; JavaScript packages to solve every day frontend problems featuring Stimulus and Turbo.</p>