feat: change footer design

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

@@ -13,12 +13,29 @@
         <div class="site-footer__top">
             <div class="site-footer__grid">
                 <div class="site-footer__left">
-                    <f:image src="EXT:base/Resources/Public/Images/greens-efa-logo.png" alt="Greens EFA Logo" />
+                    <div class="frame site-footer__logo">
-                    <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Lena Schilling 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://tiktok.com" target="_blank" rel="noopener noreferrer" title="TikTok">
+                                <i class="ci ci-tiktok"></i>
+                            </a>
+                            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" title="Instagram">
+                                <i class="ci ci-instagram"></i>
+                            </a>
+                            <a href="https://x.com" target="_blank" rel="noopener noreferrer" title="X">
+                                <i class="ci ci-x"></i>
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -1,16 +1,12 @@
 .site-footer {
   font-size: 0.9rem;
 
-  .container {
+  > .container {
     background: var(--bs-light-green);
     border-top-left-radius: 2rem;
     border-top-right-radius: 2rem;
   }
 
-  &__top {
-    padding-bottom: 2rem;
-  }
-
   &__grid {
     display: flex;
     flex-direction: column;
@@ -19,6 +15,16 @@
 
   &__left, &__right {
     flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+
+    > div {
+      margin-top: auto;
+    }
+
+    .container {
+      padding: .5rem 1rem;
+    }
   }
 
   @media (min-width: 768px) {