feat: add hero link and smooth scrolling

packages/base/ContentBlocks/ContentElements/hero/config.yaml

@@ -15,6 +15,9 @@ fields:
     type: Textarea
     enableRichtext: true
     useExistingField: true
+  - identifier: header_link
+    type: Link
+    useExistingField: true
   - identifier: image
     type: File
     properties:

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -47,14 +47,16 @@
           </f:if>
 
           <!-- Down‑arrow, half out on the right edge -->
-          <div
-            class="absolute top-2/3 -translate-y-1/2 right-[-3rem] z-20">
-            <a href="#next-section"
-               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>
-            </a>
-          </div>
+          <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>
 
         <!-- TEXT HALF -->

packages/base/Resources/Private/ContentElements/Layouts/Default.html

@@ -1,5 +1,5 @@
 <div class="frame frame-type-{data.CType}">
-    <div class="container">
+    <div id="c{data.uid}" class="container">
         <f:render section="Header" optional="true" />
         <f:render section="Main" optional="true" />
     </div>

packages/base/Resources/Public/Scss/base/_global.scss

@@ -10,6 +10,10 @@
   --color-primary-dark: #880B07;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   line-height: 1.5;
 }