From 8ee10d0a1c876bc04320c523f890a6781fb621fe Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Tue, 22 Apr 2025 22:53:18 +0200
Subject: [PATCH] feat: add hero link and smooth scrolling

---
 .../ContentElements/hero/config.yaml           |  3 +++
 .../hero/templates/frontend.html               | 18 ++++++++++--------
 .../ContentElements/Layouts/Default.html       |  2 +-
 .../Resources/Public/Scss/base/_global.scss    |  4 ++++
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/base/ContentBlocks/ContentElements/hero/config.yaml b/packages/base/ContentBlocks/ContentElements/hero/config.yaml
index 4a072f5..e7b6cd8 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/config.yaml
+++ b/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:
diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index 840f94b..97dff0f 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/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 -->
diff --git a/packages/base/Resources/Private/ContentElements/Layouts/Default.html b/packages/base/Resources/Private/ContentElements/Layouts/Default.html
index ee7e1bb..740612e 100644
--- a/packages/base/Resources/Private/ContentElements/Layouts/Default.html
+++ b/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>
diff --git a/packages/base/Resources/Public/Scss/base/_global.scss b/packages/base/Resources/Public/Scss/base/_global.scss
index d10a429..bb6a40c 100644
--- a/packages/base/Resources/Public/Scss/base/_global.scss
+++ b/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;
 }