the-biergarten-app/web/backend/Infrastructure/Infrastructure.Email.Templates/Components/Header.razor

<tr>
   <td style="padding: 0; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 8px 8px 0 0;">
      <!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f59e0b;">
      <tr>
      <td style="padding: 30px 40px;">
      <![endif]-->
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
         <tr>
            <td style="padding: 30px 40px; text-align: center;">
               <div style="font-size: 48px; margin-bottom: 12px; line-height: 1;">🍺</div>
               <h1
                  style="margin: 0; font-size: 32px; color: #ffffff; font-weight: 700; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                  The Biergarten App
               </h1>
               <div
                  style="margin-top: 8px; font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 500; letter-spacing: 2px; text-transform: uppercase;">
                  Discover Your Perfect Brew
               </div>
            </td>
         </tr>
      </table>
      <!--[if mso]>
      </td>
      </tr>
      </table>
      <![endif]-->
   </td>
</tr>

<!-- Divider line -->
<tr>
   <td
      style="padding: 0; height: 4px; background: linear-gradient(to right, #f59e0b, #d97706, #b45309, #d97706, #f59e0b);">
   </td>
</tr>