feat: change footer

packages/base/Resources/Private/PageView/Layouts/Default.html

@@ -8,49 +8,74 @@
     <f:render section="Main" />
 </main>
 
-<footer class="site-footer">
+<footer class="bg-primary text-white">
-    <div class="container">
+  <div class="container mx-auto max-w-7xl px-4 py-12 space-y-10">
-        <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>
 
-        <hr class="site-footer__divider" />
+    <!-- ── Row 1 ───────────────────────────────────────── -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
 
-        <div class="site-footer__bottom">
+      <!-- Logo -->
-            <div class="site-footer__bottom-grid">
+      <div class="flex flex-col items-start">
-                <ul class="site-footer__legal">
+        <!-- Replace the src with your logo SVG / file -->
-                    <f:for each="{metanavigation}" as="item">
+        <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[100px] h-auto w-auto" />
-                        <li{f:if(condition: item.active, then:' class="active"')}>
+      </div>
-                            <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>
+      <!-- Kontaktiere uns -->
-                            </a>
+      <div>
-                        </li>
+        <h3 class="font-semibold mb-5">Kontaktiere uns</h3>
-                    </f:for>
+        <ul class="space-y-4">
-                </ul>
+          <li class="flex items-center">
-                <p class="site-footer__copyright">© All Right Reserved</p>
+            <!-- mail -->
-            </div>
+            <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>

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>

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>

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

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

@@ -6,14 +6,14 @@ body {
   line-height: 1.5;
 }
 
-/* a[href^="tel:"]::before { */
+a[href^="tel:"]::before {
-/*   @extend .ci; */
+  @extend .ci;
-/*   @extend .ci-phone; */
+  @extend .ci-phone;
-/*   margin-right: 0.5em; */
+  margin-right: 0.5em;
-/* } */
+}
 
-/* a[href^="mailto:"]::before { */
+a[href^="mailto:"]::before {
-/*   @extend .ci; */
+  @extend .ci;
-/*   @extend .ci-email; */
+  @extend .ci-email;
-/*   margin-right: 0.5em; */
+  margin-right: 0.5em;
-/* } */
+}