From ea7e164458ba084e1e6c5d3c2e4a76a5aaf38557 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Mon, 21 Apr 2025 19:45:09 +0200
Subject: [PATCH] feat: change footer

---
 .../Private/PageView/Layouts/Default.html     | 109 +++++++++++-------
 .../base/Resources/Public/Icons/email.svg     |   4 +
 .../base/Resources/Public/Icons/phone.svg     |   3 +
 .../Public/Scss/abstracts/_icons.scss         |   7 ++
 .../Resources/Public/Scss/base/_global.scss   |  20 ++--
 5 files changed, 91 insertions(+), 52 deletions(-)
 create mode 100644 packages/base/Resources/Public/Icons/email.svg
 create mode 100644 packages/base/Resources/Public/Icons/phone.svg

diff --git a/packages/base/Resources/Private/PageView/Layouts/Default.html b/packages/base/Resources/Private/PageView/Layouts/Default.html
index a5c8fba..9aa5492 100644
--- a/packages/base/Resources/Private/PageView/Layouts/Default.html
+++ b/packages/base/Resources/Private/PageView/Layouts/Default.html
@@ -8,49 +8,74 @@
     <f:render section="Main" />
 </main>
 
-<footer class="site-footer">
-    <div class="container">
-        <div class="site-footer__top">
-            <div class="site-footer__grid">
-                <div class="site-footer__left">
-                    <div class="frame site-footer__logo">
-                        <div class="container">
-                            <f:image src="EXT:base/Resources/Public/Images/greens-efa-logo.png" alt="Greens EFA Logo" />
-                            <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Lena Schilling Logo" />
-                        </div>
-                    </div>
-                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
-                </div>
-                <div class="site-footer__right">
-                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
-                    <div class="frame site-footer__social">
-                        <div class="container">
-                            <a href="https://www.instagram.com/lena.ats/" target="_blank" rel="noopener noreferrer" title="Instagram">
-                                <i class="ci ci-instagram"></i>
-                            </a>
-                            <a href="https://www.tiktok.com/@dieschilling" target="_blank" rel="noopener noreferrer" title="TikTok">
-                                <i class="ci ci-tiktok"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+<footer class="bg-primary text-white">
+  <div class="container mx-auto max-w-7xl px-4 py-12 space-y-10">
 
-        <hr class="site-footer__divider" />
+    <!-- ── Row 1 ───────────────────────────────────────── -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
 
-        <div class="site-footer__bottom">
-            <div class="site-footer__bottom-grid">
-                <ul class="site-footer__legal">
-                    <f:for each="{metanavigation}" as="item">
-                        <li{f:if(condition: item.active, then:' class="active"')}>
-                            <a href="{item.link}"{f:if(condition: '{item.target}', then: ' target="{item.target}"')}{f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')} title="{item.title}">
-                                <span>{item.title}</span>
-                            </a>
-                        </li>
-                    </f:for>
-                </ul>
-                <p class="site-footer__copyright">© All Right Reserved</p>
-            </div>
+      <!-- Logo -->
+      <div class="flex flex-col items-start">
+        <!-- Replace the src with your logo SVG / file -->
+        <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[100px] h-auto w-auto" />
+      </div>
+
+      <!-- Kontaktiere uns -->
+      <div>
+        <h3 class="font-semibold mb-5">Kontaktiere uns</h3>
+        <ul class="space-y-4">
+          <li class="flex items-center">
+            <!-- mail -->
+            <a href="mailto:inquiry@dialogrelations.com" class="hover:underline text-white">
+              inquiry@dialogrelations.com
+            </a>
+          </li>
+          <li class="flex items-center">
+            <!-- phone -->
+            <a href="tel:+4312313435" class="hover:underline text-white">
+              +43 1231 3435
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Folge uns -->
+      <div class="flex flex-col items-start md:items-end">
+        <h3 class="font-semibold mb-5">Folge uns</h3>
+        <div class="flex space-x-4">
+          <!-- Social buttons -->
+
+          <a href="#" aria-label="LinkedIn" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
+            <i class="ci ci-linkedin"></i>
+          </a>
+          <a href="#" aria-label="Instagram" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
+            <i class="ci ci-instagram"></i>
+          </a>
+          <a href="#" aria-label="Facebook" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
+            <i class="ci ci-facebook"></i>
+          </a>
         </div>
+      </div>
+
+    </div><!-- /Row 1 -->
+
+
+    <!-- ── Row 2 ───────────────────────────────────────── -->
+    <div class="flex flex-col-reverse md:flex-row md:justify-between items-start md:items-center text-sm">
+
+      <!-- Rights reserved -->
+      <p class="pt-4 md:pt-0">
+        Dialog Relations 2025 &mdash; All rights reserved.
+      </p>
+
+      <!-- Privacy links -->
+      <p>
+        <a href="#" class="hover:underline text-white">Privacy Policy</a>
+        <span class="mx-1">|</span>
+        <a href="#" class="hover:underline text-white">Terms and Conditions</a>
+      </p>
+
+    </div><!-- /Row 2 -->
+
+  </div>
 </footer>
diff --git a/packages/base/Resources/Public/Icons/email.svg b/packages/base/Resources/Public/Icons/email.svg
new file mode 100644
index 0000000..30b1079
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/email.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4H4.5C3.39543 4 2.5 4.89543 2.5 6V18C2.5 19.1046 3.39543 20 4.5 20H20.5C21.6046 20 22.5 19.1046 22.5 18V6C22.5 4.89543 21.6046 4 20.5 4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.5 7L13.53 12.7C13.2213 12.8934 12.8643 12.996 12.5 12.996C12.1357 12.996 11.7787 12.8934 11.47 12.7L2.5 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/base/Resources/Public/Icons/phone.svg b/packages/base/Resources/Public/Icons/phone.svg
new file mode 100644
index 0000000..f3586fb
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/phone.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4994 16.92V19.92C22.5006 20.1985 22.4435 20.4741 22.332 20.7293C22.2204 20.9845 22.0567 21.2136 21.8515 21.4018C21.6463 21.5901 21.404 21.7335 21.1402 21.8227C20.8764 21.9119 20.5968 21.945 20.3194 21.92C17.2423 21.5856 14.2864 20.5341 11.6894 18.85C9.27327 17.3146 7.22478 15.2661 5.68945 12.85C3.99942 10.2412 2.94769 7.27097 2.61944 4.17997C2.59446 3.90344 2.62732 3.62474 2.71595 3.3616C2.80457 3.09846 2.94702 2.85666 3.13421 2.6516C3.32141 2.44653 3.54925 2.28268 3.80324 2.1705C4.05722 2.05831 4.33179 2.00024 4.60945 1.99997H7.60945C8.09475 1.9952 8.56524 2.16705 8.93321 2.48351C9.30118 2.79996 9.54152 3.23942 9.60944 3.71997C9.73607 4.68004 9.97089 5.6227 10.3094 6.52997C10.444 6.8879 10.4731 7.27689 10.3934 7.65086C10.3136 8.02482 10.1283 8.36809 9.85944 8.63998L8.58945 9.90997C10.013 12.4135 12.0859 14.4864 14.5894 15.91L15.8594 14.64C16.1313 14.3711 16.4746 14.1858 16.8486 14.1061C17.2225 14.0263 17.6115 14.0554 17.9694 14.19C18.8767 14.5285 19.8194 14.7634 20.7794 14.89C21.2652 14.9585 21.7088 15.2032 22.026 15.5775C22.3431 15.9518 22.5116 16.4296 22.4994 16.92Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss
index 950420e..7ba93a5 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_icons.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_icons.scss
@@ -33,3 +33,10 @@
 .ci-arrow-down::before {
   mask-image: url(../Icons/arrow-down.svg);
 }
+
+.ci-email::before {
+  mask-image: url(../Icons/email.svg);
+}
+.ci-phone::before {
+  mask-image: url(../Icons/phone.svg);
+}
diff --git a/packages/base/Resources/Public/Scss/base/_global.scss b/packages/base/Resources/Public/Scss/base/_global.scss
index 63b5583..97df456 100644
--- a/packages/base/Resources/Public/Scss/base/_global.scss
+++ b/packages/base/Resources/Public/Scss/base/_global.scss
@@ -6,14 +6,14 @@ 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;
+}