From 3fddfdff67d51c12e5cf23caaba4fef5a10a2e10 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Thu, 24 Apr 2025 12:52:20 +0200
Subject: [PATCH] feat: accessibility and performance improvement

---
 .../card_container/templates/frontend.html    | 28 ++++++++++++++++++-
 .../hero/templates/frontend.html              |  6 ++--
 .../Private/PageView/Layouts/Default.html     |  8 +++---
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
index 78b9a6f..db56da1 100644
--- a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
@@ -25,7 +25,33 @@
                             <div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
                                 <f:if condition="{card.images}">
                                     <f:then>
-                                        <f:image image="{card.images.0}" alt="{card.images.0.alternative}" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" />
+                                      <picture class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
+                                        <!-- WEBP source -->
+                                        <source
+                                          type="image/webp"
+                                          srcset="
+                                            {f:uri.image(image:card.images.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                                            {f:uri.image(image:card.images.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                                            {f:uri.image(image:card.images.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                                          sizes="(max-width: 767px) 90vw,
+                                                 {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                                        <!-- Fallback source -->
+                                        <source
+                                          srcset="
+                                            {f:uri.image(image:card.images.0, width:'320c', cropVariant:'default')} 320w,
+                                            {f:uri.image(image:card.images.0, width:'400c', cropVariant:'default')} 768w,
+                                            {f:uri.image(image:card.images.0, width:'538c', cropVariant:'default')} 1024w"
+                                          sizes="(max-width: 767px) 90vw,
+                                                 {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                                        <f:image
+                                          image="{card.images.0}"
+                                          treatIdAsReference="1"
+                                          cropVariant="default"
+                                          width="538c"
+                                          alt="{card.images.0.alternative}"
+                                          class="w-full h-full object-cover"
+                                        />
+                                      </picture>
                                     </f:then>
                                     <f:else>
                                         <div class="w-full h-full bg-gray-300 flex items-center justify-center">
diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index 66246a6..fb47c63 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
@@ -80,13 +80,13 @@
 
           <!-- Social icons -->
           <div class="space-x-3">
-            <a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
+            <a href="#" aria-label="LinkedIn" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
                 <i class="ci ci-linkedin"></i>
             </a>
-            <a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
+            <a href="#" aria-label="Instagram" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
                 <i class="ci ci-instagram"></i>
             </a>
-            <a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
+            <a href="#" aria-label="Facebook" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
                 <i class="ci ci-facebook"></i>
             </a>
           </div>
diff --git a/packages/base/Resources/Private/PageView/Layouts/Default.html b/packages/base/Resources/Private/PageView/Layouts/Default.html
index 23d1071..3e09c8c 100644
--- a/packages/base/Resources/Private/PageView/Layouts/Default.html
+++ b/packages/base/Resources/Private/PageView/Layouts/Default.html
@@ -22,15 +22,15 @@
 
       <!-- Kontaktiere uns -->
       <div>
-        <h5 class="text-white">Kontaktiere uns</h5>
+        <h3 class="text-white text-sm">Kontaktiere uns</h3>
         <ul class="space-y-4">
-          <li class="flex items-center">
+          <li class="flex items-center pl-0">
             <!-- mail -->
             <a href="mailto:inquiry@dialogrelations.com" class="hover:text-white text-white">
               inquiry@dialogrelations.com
             </a>
           </li>
-          <li class="flex items-center">
+          <li class="flex items-center pl-0">
             <!-- phone -->
             <a href="tel:+4312313435" class="hover:text-white text-white">
               +43 1231 3435
@@ -41,7 +41,7 @@
 
       <!-- Folge uns -->
       <div class="flex flex-col items-start md:items-end">
-        <h5 class="text-white">Folge uns</h5>
+        <h3 class="text-white text-sm">Folge uns</h3>
         <div class="flex space-x-4">
           <!-- Social buttons -->