fix: hero icons and css

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

@@ -50,15 +50,9 @@
           <div
             class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
             <a href="#next-section"
-               class="bg-primary border-4 border-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
+               class="bg-primary border-4 border-white text-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
               <span class="sr-only">Scroll down</span>
-              <svg xmlns="http://www.w3.org/2000/svg"
-                   class="w-6 h-6"
-                   fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                      d="M19 9l-7 7-7-7" />
-              </svg>
+              <i class="ci ci-arrow-down"></i>
             </a>
           </div>
         </div>
@@ -70,34 +64,30 @@
           <div class="hidden md: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">
-              Hallo, wir sind
+              {data.subheader}
             </span>
           </div>
 
           <!-- Heading -->
           <h1 class="text-3xl md:text-5xl font-extrabold">
-            Dialog Relations
+            {data.header}
           </h1>
 
           <!-- Body copy -->
           <p class="text-base md:text-lg text-gray-800 max-w-md">
-            Sorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
+            <f:format.html>{data.bodytext}</f:format.html>
           </p>
 
           <!-- Social icons -->
-          <div class="flex space-x-4">
-            <a href="#" class="bg-primary text-white p-3 rounded-full">
-              <span class="sr-only">LinkedIn</span>
-              <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
+          <div class="space-x-3">
+            <a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
+                <i class="ci ci-linkedin"></i>
             </a>
-            <a href="#" class="bg-primary text-white p-3 rounded-full">
-              <span class="sr-only">Instagram</span>
-              <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
+            <a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
+                <i class="ci ci-instagram"></i>
             </a>
-            <a href="#" class="bg-primary text-white p-3 rounded-full">
-              <span class="sr-only">Facebook</span>
-              <svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
+            <a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
+                <i class="ci ci-facebook"></i>
             </a>
           </div>
 

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

@@ -1,15 +1,19 @@
+:root {
+  --color-primary: #0B197D;
+}
+
 body {
   line-height: 1.5;
 }
 
-a[href^="tel:"]::before {
-  @extend .ci;
-  @extend .ci-phone;
-  margin-right: 0.5em;
-}
+/* a[href^="tel:"]::before { */
+/*   @extend .ci; */
+/*   @extend .ci-phone; */
+/*   margin-right: 0.5em; */
+/* } */
 
-a[href^="mailto:"]::before {
-  @extend .ci;
-  @extend .ci-email;
-  margin-right: 0.5em;
-}
+/* a[href^="mailto:"]::before { */
+/*   @extend .ci; */
+/*   @extend .ci-email; */
+/*   margin-right: 0.5em; */
+/* } */

packages/base/Resources/Public/Scss/components/_news.scss

@@ -114,7 +114,7 @@
         mask-position: center;
         background-color: currentColor;
         /* vertical-align: middle; */
-        mask-image: url(../Icons/angle-right.svg);
+        /* mask-image: url(../Icons/angle-right.svg); */
       }
     }