From b1cb4d0208e65b0ee4b77ef09504469e4e3afd74 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Mon, 21 Apr 2025 11:38:40 +0200
Subject: [PATCH] feat: change the hero ce layout

---
 .../hero/templates/frontend.html              | 95 +++++++++----------
 .../Public/Scss/abstracts/_fonts.scss         |  1 -
 tailwind.config.js                            |  6 ++
 3 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index f9755e2..d5fba2c 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
@@ -3,29 +3,30 @@
 <f:section name="Header" />
 
 <f:section name="Main">
-    <div class="md:flex">
+  <section class="bg-white md:bg-hero-gradient">
+    <div class="container mx-auto px-6 py-12 md:py-24 bg-white md:bg-hero-inner">
+      <div class="md:flex md:items-center">
 
-      <!-- LEFT: blue background + image -->
-      <div class="relative bg-primary md:w-3/5 py-16 flex justify-end">
-        <!-- picture wrapper for relative positioning -->
-        <div class="relative w-3/4">
+        <!-- IMAGE HALF -->
+        <div class="order-2 md:order-1 md:w-1/2 relative">
           <f:if condition="{data.image}">
             <f:then>
               <picture class="block w-full object-cover">
-                <!-- webp / fallback sources as before… -->
+                <!-- WEBP -->
                 <source
                   type="image/webp"
                   srcset="
                     {f:uri.image(image:data.image.0, width:'320c', fileExtension:'webp')} 320w,
                     {f:uri.image(image:data.image.0, width:'768c', fileExtension:'webp')} 768w,
                     {f:uri.image(image:data.image.0, width:'1024c', fileExtension:'webp')} 1024w"
-                  sizes="(max-width: 768px) 80vw, 430px" />
+                  sizes="(max-width: 768px) 80vw, 1024px" />
+                <!-- fallback -->
                 <source
                   srcset="
                     {f:uri.image(image:data.image.0, width:'320c')} 320w,
                     {f:uri.image(image:data.image.0, width:'768c')} 768w,
                     {f:uri.image(image:data.image.0, width:'1024c')} 1024w"
-                  sizes="(max-width: 768px) 80vw, 430px" />
+                  sizes="(max-width: 768px) 80vw, 1024px" />
                 <f:image
                   image="{data.image.0}"
                   treatIdAsReference="1"
@@ -39,12 +40,15 @@
               </picture>
             </f:then>
             <f:else>
-              <p class="w-full text-center text-white">No image available</p>
+              <p class="w-full text-center text-white py-20">
+                No image available
+              </p>
             </f:else>
           </f:if>
 
-          <!-- arrow: half‑out on right edge -->
-          <div class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
+          <!-- Down‑arrow, half out on the right edge -->
+          <div
+            class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
             <a href="#next-section"
                class="bg-primary border-4 border-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
               <span class="sr-only">Scroll down</span>
@@ -58,58 +62,47 @@
             </a>
           </div>
         </div>
-      </div>
 
-      <!-- RIGHT: text & socials -->
-      <div class="md:w-2/5 px-6 py-12 md:py-0 md:px-16 flex flex-col justify-center">
+        <!-- TEXT HALF -->
+        <div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center space-y-6 md:pl-24">
 
-        <!-- Mobile: simple centered intro -->
-        <div class="block md:hidden text-center space-y-2 mb-8">
-          <div class="text-sm uppercase tracking-wide text-gray-600">
-            Hallo, wir sind
-          </div>
-          <h1 class="text-3xl font-extrabold">
-            Dialog Relations
-          </h1>
-          <p class="text-base text-gray-800">
-            Sorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
-          </p>
-        </div>
-
-        <!-- Desktop: line + intro -->
-        <div class="hidden md:block space-y-4">
-          <!-- horizontal line + text -->
-          <div class="flex items-center space-x-3 mb-2">
+          <!-- Desktop: line + intro -->
+          <div class="hidden md:flex items-center space-x-3">
             <span class="block h-px w-10 bg-gray-600"></span>
-            <div class="text-sm uppercase tracking-wide text-gray-600">
+            <span class="text-sm uppercase tracking-wide text-gray-600">
               Hallo, wir sind
-            </div>
+            </span>
           </div>
-          <h1 class="text-5xl font-extrabold">
+
+          <!-- Heading -->
+          <h1 class="text-3xl md:text-5xl font-extrabold">
             Dialog Relations
           </h1>
-          <p class="text-lg text-gray-800 max-w-md">
+
+          <!-- Body copy -->
+          <p class="text-base md:text-lg text-gray-800 max-w-md">
             Sorem ipsum dolor sit amet, consectetur adipiscing elit.
             Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
           </p>
-        </div>
 
-        <!-- Social icons -->
-        <div class="mt-8 flex justify-center md:justify-start space-x-4">
-          <a href="#" class="bg-primary text-white p-3 rounded-full">
-            <span class="sr-only">LinkedIn</span>
-            <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
-          </a>
-          <a href="#" class="bg-primary text-white p-3 rounded-full">
-            <span class="sr-only">Instagram</span>
-            <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
-          </a>
-          <a href="#" class="bg-primary text-white p-3 rounded-full">
-            <span class="sr-only">Facebook</span>
-            <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
-          </a>
+          <!-- Social icons -->
+          <div class="flex space-x-4">
+            <a href="#" class="bg-primary text-white p-3 rounded-full">
+              <span class="sr-only">LinkedIn</span>
+              <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
+            </a>
+            <a href="#" class="bg-primary text-white p-3 rounded-full">
+              <span class="sr-only">Instagram</span>
+              <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
+            </a>
+            <a href="#" class="bg-primary text-white p-3 rounded-full">
+              <span class="sr-only">Facebook</span>
+              <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
+            </a>
+          </div>
+
         </div>
       </div>
     </div>
+  </section>
 </f:section>
diff --git a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
index 10f0f0e..9cffb27 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
@@ -28,7 +28,6 @@ h1, h2 {
 }
 
 h1 {
-  text-align: center;
   font-size: 3rem;
 
   @media (min-width: $breakpoint-md) {
diff --git a/tailwind.config.js b/tailwind.config.js
index 534af44..f983855 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,12 @@ module.exports = {
         'light-green': '#F4F6EC',
         brand: '#6B8E23', // Added brand color for hover states from SCSS
       },
+      backgroundImage: {
+        'hero-gradient':
+          'linear-gradient(to right, #0B197D 0%, #0B197D 50%, #ffffff 50%, #ffffff 100%)',
+        'hero-inner':
+          'linear-gradient(to right, #0B197D 0%, #0B197D 25%, #ffffff 25%, #ffffff 100%)',
+      },
       maxHeight: {
         '0': '0',
         '[500px]': '500px', // Add specific max-height for mobile menu transition