feat: spaces, link colors, card icon, card background and border

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 -->

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>

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 {

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);

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 {