feat: change footer

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>