Add clickable anniversary banner

Author: iammajid

layouts/partials/anniversary-banner.html

@@ -2,6 +2,24 @@
 {{- $url := $banner.url | default "https://www.reddit.com/r/Cryptomator/" -}}
 <section class="absolute inset-x-0 top-16 z-40 pointer-events-none" role="region" aria-label="{{ i18n "anniversary_banner_aria_label" . }}">
   <div class="container py-1.5 md:py-2">
+    {{- with $url -}}
+    <a href="{{ . }}" class="pointer-events-auto mx-auto flex w-full items-center justify-start gap-1 rounded-md bg-primary px-3 py-1.5 text-xs text-white no-underline shadow-sm md:justify-center md:gap-3 md:px-4 md:py-2 md:text-sm hover:no-underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-white/70" target="_blank" rel="noopener" data-umami-event="anniversary-banner-reddit">
+      {{- if fileExists "static/img/logo-anniversary.svg" -}}
+      <img src="/img/logo-anniversary.svg" class="h-9 w-auto shrink-0 mr-2 md:h-7 md:mr-0" alt="10 years anniversary logo" loading="lazy">
+      {{- else -}}
+      <i class="fa-solid fa-cake-candles text-xl shrink-0 mr-2 md:mr-0" aria-hidden="true"></i>
+      {{- end -}}
+      <p class="m-0 flex flex-wrap items-center justify-start gap-x-1 gap-y-0.5 text-left leading-normal text-white md:justify-center md:text-center">
+        <span class="font-semibold">{{ i18n "anniversary_banner_lead" . }}</span>
+        <span class="hidden text-white/80 md:inline" aria-hidden="true">•</span>
+        <span class="font-normal text-white underline-offset-2">
+          <span class="md:hidden">{{ i18n "anniversary_banner_cta_mobile" $ }}</span>
+          <span class="hidden md:inline">{{ i18n "anniversary_banner_cta_desktop" $ }}</span>
+          <i class="fa-regular fa-arrow-right ml-1 text-[0.75em]" aria-hidden="true"></i>
+        </span>
+      </p>
+    </a>
+    {{- else -}}
     <div class="pointer-events-auto mx-auto flex w-full items-center justify-start gap-1 rounded-md bg-primary px-3 py-1.5 text-xs text-white shadow-sm md:justify-center md:gap-3 md:px-4 md:py-2 md:text-sm">
       {{- if fileExists "static/img/logo-anniversary.svg" -}}
       <img src="/img/logo-anniversary.svg" class="h-9 w-auto shrink-0 mr-2 md:h-7 md:mr-0" alt="10 years anniversary logo" loading="lazy">
@@ -11,14 +29,13 @@
       <p class="m-0 flex flex-wrap items-center justify-start gap-x-1 gap-y-0.5 text-left leading-normal text-white md:justify-center md:text-center">
         <span class="font-semibold">{{ i18n "anniversary_banner_lead" . }}</span>
         <span class="hidden text-white/80 md:inline" aria-hidden="true">•</span>
-        {{ with $url }}
-        <a href="{{ . }}" class="font-normal text-white no-underline underline-offset-2 hover:underline focus-visible:underline focus-visible:outline-hidden" target="_blank" rel="noopener" data-umami-event="anniversary-banner-reddit">
+        <span class="font-normal text-white underline-offset-2">
           <span class="md:hidden">{{ i18n "anniversary_banner_cta_mobile" $ }}</span>
           <span class="hidden md:inline">{{ i18n "anniversary_banner_cta_desktop" $ }}</span>
-          <span class="ml-0.5" aria-hidden="true">→</span>
-        </a>
-        {{ end }}
+          <i class="fa-regular fa-arrow-right ml-1 text-[0.75em]" aria-hidden="true"></i>
+        </span>
       </p>
     </div>
+    {{- end -}}
   </div>
 </section>