From 755168d0e6fa3f0b6fcd7c6a3bbe99fd35f3776f Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Tue, 22 Apr 2025 22:17:48 +0200
Subject: [PATCH] feat: spaces, link colors, card icon, card background and
 border

---
 .../card_container/templates/frontend.html        | 15 +++++++++++----
 .../ContentElements/hero/templates/frontend.html  | 14 +++++++-------
 .../Private/PageView/Layouts/Default.html         | 14 +++++++-------
 .../Resources/Public/Icons/arrow-up-right.svg     |  4 ++++
 .../Resources/Public/Scss/abstracts/_fonts.scss   |  6 ++----
 .../Resources/Public/Scss/abstracts/_icons.scss   |  3 +++
 .../base/Resources/Public/Scss/base/_global.scss  |  2 ++
 7 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 packages/base/Resources/Public/Icons/arrow-up-right.svg

diff --git a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
index 69f30bf..9d8aa43 100644
--- a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
@@ -33,13 +33,20 @@
                                         </div>
                                     </f:else>
                                 </f:if>
-                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
-                                    <h3 class="text-white text-xl font-bold text-center p-4">{card.header}</h3>
+                                <div class="absolute inset-0 bg-black bg-opacity-40 flex flex-col items-center justify-center">
+                                    <div class="w-full">
+                                        <h3 class="text-white text-xl font-bold text-center px-4">{card.header}</h3>
+                                    </div>
+                                    <div class="w-full text-center">
+                                        <div class="w-6 h-6 bg-primary text-white rounded-full inline-flex items-center justify-center">
+                                            <i class="ci ci-arrow-up-right"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
 
-                            <div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-gray-100 shadow-lg p-6 overflow-y-auto">
-                                <h4 class="text-lg font-semibold mb-2">{card.header}</h4>
+                            <div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-light-grey border border-dark-grey p-6">
+                                <h4>{card.header}</h4>
                                 <div class="text-sm">
                                     <f:format.html>{card.bodytext}</f:format.html>
                                 </div>
diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index 62f9c93..840f94b 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
@@ -50,7 +50,7 @@
           <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-opacity-90">
+               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>
@@ -58,7 +58,7 @@
         </div>
 
         <!-- TEXT HALF -->
-        <div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center space-y-6 md:pl-24">
+        <div 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">
@@ -74,19 +74,19 @@
           </h1>
 
           <!-- Body copy -->
-          <p class="text-base md:text-lg text-gray-800 max-w-md">
+          <div class="text-base md:text-lg max-w-md">
             <f:format.html>{data.bodytext}</f:format.html>
-          </p>
+          </div>
 
           <!-- 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">
+            <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">
                 <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">
+            <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">
                 <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">
+            <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">
                 <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 f35accb..be35693 100644
--- a/packages/base/Resources/Private/PageView/Layouts/Default.html
+++ b/packages/base/Resources/Private/PageView/Layouts/Default.html
@@ -26,13 +26,13 @@
         <ul class="space-y-4">
           <li class="flex items-center">
             <!-- mail -->
-            <a href="mailto:inquiry@dialogrelations.com" class="hover:underline text-white">
+            <a href="mailto:inquiry@dialogrelations.com" class="hover:text-white text-white">
               inquiry@dialogrelations.com
             </a>
           </li>
           <li class="flex items-center">
             <!-- phone -->
-            <a href="tel:+4312313435" class="hover:underline text-white">
+            <a href="tel:+4312313435" class="hover:text-white text-white">
               +43 1231 3435
             </a>
           </li>
@@ -45,13 +45,13 @@
         <div class="flex space-x-4">
           <!-- Social buttons -->
 
-          <a href="#" aria-label="LinkedIn" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center">
+          <a href="#" aria-label="LinkedIn" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
             <i class="ci ci-linkedin"></i>
           </a>
-          <a href="#" aria-label="Instagram" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center">
+          <a href="#" aria-label="Instagram" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
             <i class="ci ci-instagram"></i>
           </a>
-          <a href="#" aria-label="Facebook" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center">
+          <a href="#" aria-label="Facebook" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
             <i class="ci ci-facebook"></i>
           </a>
         </div>
@@ -70,9 +70,9 @@
 
       <!-- Privacy links -->
       <p>
-        <a href="#" class="hover:underline text-white">Privacy Policy</a>
+        <a href="#" class="hover:text-white text-white">Privacy Policy</a>
         <span class="mx-1">|</span>
-        <a href="#" class="hover:underline text-white">Terms and Conditions</a>
+        <a href="#" class="hover:text-white text-white">Terms and Conditions</a>
       </p>
 
     </div><!-- /Row 2 -->
diff --git a/packages/base/Resources/Public/Icons/arrow-up-right.svg b/packages/base/Resources/Public/Icons/arrow-up-right.svg
new file mode 100644
index 0000000..d4034d6
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/arrow-up-right.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 7H17V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 17L17 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
index 64438b5..3317b83 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
@@ -30,6 +30,7 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--color-primary);
   font-weight: 700;
   line-height: 1;
+  @apply mb-4
 }
 
 h1 {
@@ -81,10 +82,7 @@ a {
     color: var(--bs-primary);
     text-decoration: none;
     font-weight: 700;
-
-    &:hover {
-      color: var(--bs-primary)
-    }
+    @apply text-primary hover:text-primary-dark;
 }
 
 button, .btn {
diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss
index 7ba93a5..0476c24 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_icons.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_icons.scss
@@ -33,6 +33,9 @@
 .ci-arrow-down::before {
   mask-image: url(../Icons/arrow-down.svg);
 }
+.ci-arrow-up-right::before {
+  mask-image: url(../Icons/arrow-up-right.svg);
+}
 
 .ci-email::before {
   mask-image: url(../Icons/email.svg);
diff --git a/packages/base/Resources/Public/Scss/base/_global.scss b/packages/base/Resources/Public/Scss/base/_global.scss
index 1d63c5c..1e600bc 100644
--- a/packages/base/Resources/Public/Scss/base/_global.scss
+++ b/packages/base/Resources/Public/Scss/base/_global.scss
@@ -1,6 +1,8 @@
 :root {
   --color-primary: #0B197D;
   --color-primary-dark: #08145C;
+  --color-light-grey: #F6F6F6;
+  --color-dark-grey: #00000026;
 }
 
 body {