From 9f6cfb145edf2c90186105ec3ac970ccf6027ed4 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Wed, 23 Apr 2025 08:45:12 +0200
Subject: [PATCH] feat: remove header_link, adjust hero scroll to next, fix
 some html errors

---
 .../card_container/templates/frontend.html    |  2 +-
 .../hero/assets/scroll-to-next.js             | 32 +++++++++++++++++++
 .../ContentElements/hero/config.yaml          |  3 --
 .../hero/templates/frontend.html              | 27 ++++++++--------
 .../textimage/templates/frontend.html         |  4 +--
 .../PageView/Partials/Navigation/Main.html    |  4 +--
 6 files changed, 50 insertions(+), 22 deletions(-)
 create mode 100644 packages/base/ContentBlocks/ContentElements/hero/assets/scroll-to-next.js

diff --git a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
index 9d8aa43..78b9a6f 100644
--- a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
@@ -7,7 +7,7 @@
 <f:section name="Main">
     <div class="card-container">
         <f:if condition="{data.header}">
-            <h2><f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.header}</f:format.html></h2>
+            <h2>{data.header}</h2>
         </f:if>
         <f:if condition="{data.bodytext}">
             <f:then>
diff --git a/packages/base/ContentBlocks/ContentElements/hero/assets/scroll-to-next.js b/packages/base/ContentBlocks/ContentElements/hero/assets/scroll-to-next.js
new file mode 100644
index 0000000..64f72a2
--- /dev/null
+++ b/packages/base/ContentBlocks/ContentElements/hero/assets/scroll-to-next.js
@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document
+    .querySelectorAll('.hero-down-link')
+    .forEach(link => link.addEventListener('click', scrollToNext));
+});
+
+function scrollToNext(e) {
+  e.preventDefault();
+  const refEl = e.currentTarget;
+  const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
+  if (isMobile) {
+    const target = document.getElementById('hero-text');
+    if (!target) {
+      console.warn('scrollToNext: no element with id="hero-text"');
+      return;
+    }
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  } else {
+    const frames = Array.from(document.querySelectorAll('.frame'));
+    const nextFrame = frames.find(frame =>
+      refEl.compareDocumentPosition(frame) & Node.DOCUMENT_POSITION_FOLLOWING
+    );
+
+    if (!nextFrame) {
+      console.warn('scrollToNext: no .frame found after this link');
+      return;
+    }
+    nextFrame.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
diff --git a/packages/base/ContentBlocks/ContentElements/hero/config.yaml b/packages/base/ContentBlocks/ContentElements/hero/config.yaml
index e7b6cd8..4a072f5 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/config.yaml
+++ b/packages/base/ContentBlocks/ContentElements/hero/config.yaml
@@ -15,9 +15,6 @@ fields:
     type: Textarea
     enableRichtext: true
     useExistingField: true
-  - identifier: header_link
-    type: Link
-    useExistingField: true
   - identifier: image
     type: File
     properties:
diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index 97dff0f..b855f38 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
@@ -8,7 +8,7 @@
       <div class="md:flex md:items-center">
 
         <!-- IMAGE HALF -->
-        <div class="order-2 md:order-1 md:w-1/2 relative">
+        <div class="order-2 py-16 md:order-1 md:w-1/2 relative">
           <f:if condition="{data.image}">
             <f:then>
               <picture class="block w-full object-cover">
@@ -47,25 +47,23 @@
           </f:if>
 
           <!-- Down‑arrow, half out on the right edge -->
-          <f:if condition="{data.header_link}">
-              <div
-                class="absolute top-2/3 -translate-y-1/2 right-[-3rem] z-20">
-                <f:link.typolink parameter="{data.header_link}"
-                   class="w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
-                  <span class="sr-only">Scroll down</span>
-                  <i class="ci ci-arrow-down"></i>
-                </f:link.typolink>
-              </div>
-          </f:if>
+          <div
+            class="absolute -translate-y-1/2 right-1/2 translate-x-1/2 md:top-2/3 md:-translate-y-1/2 md:right-[-3rem] md:translate-x-0 z-20">
+            <a href="#"
+               class="hero-down-link w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
+              <span class="sr-only">Scroll down</span>
+              <i class="ci ci-arrow-down"></i>
+            </a>
+          </div>
         </div>
 
         <!-- TEXT HALF -->
-        <div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center md:pl-24">
+        <div id="hero-text" class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center md:pl-24">
 
           <!-- Desktop: line + intro -->
-          <div class="hidden md:flex items-center space-x-3">
+          <div class="flex items-center space-x-3">
             <span class="block h-px w-10 bg-gray-600"></span>
-            <span class="text-sm uppercase tracking-wide text-gray-600">
+            <span class="text-sm uppercase tracking-wide font-bold">
               {data.subheader}
             </span>
           </div>
@@ -97,4 +95,5 @@
       </div>
     </div>
   </section>
+  <f:asset.script identifier="scroll-to-next" src="{cb:assetPath()}/scroll-to-next.js" nonce="{f:security.nonce()}"/>
 </f:section>
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
index a5e70b5..d72920c 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
@@ -15,7 +15,7 @@
     <div class="flex items-center justify-center {imageSizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <figure class="block w-full">
+          <picture class="block w-full">
             <!-- WEBP source -->
             <source
               type="image/webp"
@@ -41,7 +41,7 @@
               alt="{data.image.0.alternative}"
               class="max-w-full h-auto block"
             />
-          </figure>
+          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>
diff --git a/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html b/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
index beb3581..f0c073b 100644
--- a/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
+++ b/packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
@@ -16,14 +16,14 @@
                    absolute top-full left-0 right-0 flex-col max-h-0 overflow-hidden bg-white transition-max-height duration-400 ease-in-out group-[.open]:max-h-[500px]" id="navLinks">
             <f:for each="{mainnavigation}" as="mainnavigationItem">
                 <li class="nav-item lg:mx-4 lg:my-0 lg:p-0 lg:border-0 mx-0 my-0 p-4 border-t border-black/10 first:border-t-0 {f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">
-                    <a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}" class="nav-link block lg:inline-block no-underline text-primary lg:text-white font-bold uppercase tracking-[0.05em] text-sm transition-colors duration-300 hover:text-primary lg:hover:text-white">
+                    <a href="{mainnavigationItem.link}" title="{mainnavigationItem.title}" class="nav-link block lg:inline-block no-underline text-primary lg:text-white font-bold uppercase tracking-[0.05em] text-sm transition-colors duration-300 hover:text-primary lg:hover:text-white">
                         {mainnavigationItem.title}
                     </a>
                     <f:if condition="{mainnavigationItem.children}">
                         <ul class="sub-menu hidden lg:absolute lg:block lg:opacity-0 lg:invisible lg:group-hover:opacity-100 lg:group-hover:visible lg:bg-white lg:shadow-md lg:mt-2 lg:py-2 lg:rounded lg:border lg:border-gray-200">
                             <f:for each="{mainnavigationItem.children}" as="child">
                                 <li class="{f:if(condition: child.active, then:'active')} lg:px-4 lg:py-2 hover:bg-gray-100">
-                                    <a class="nav-link block text-sm text-primary lg:text-white hover:text-primary lg:hover:text-white" href="{child.link}" target="{child.target}" title="{child.title}">
+                                    <a class="nav-link block text-sm text-primary lg:text-white hover:text-primary lg:hover:text-white" href="{child.link}" title="{child.title}">
                                         {child.title}
                                     </a>
                                 </li>