Merge pull request #152 from dotkernel/issue-138

updated footer layout

Author: arhimede

public/css/app.css

@@ -145,6 +145,12 @@ section {
   padding: 88px 0;
 }
 
+.section-bg-light {
+  background:var(--surface-2);
+  border-top:1px solid var(--border-soft);
+  border-bottom:1px solid var(--border-soft);
+}
+
 .section-head {
   max-width: 640px;
   margin-bottom: 48px;
@@ -1289,7 +1295,6 @@ details.acc {
 }
 
 .about-band {
-  background: var(--surface);
   border-top: 1px solid var(--border-soft);
   border-bottom: 1px solid var(--border-soft);
 }
@@ -1338,6 +1343,10 @@ footer {
 
 .footer-announcement-cta {
   margin-top: 20px;
+
+  @media (min-width: 992px) {
+    margin-top: 0;
+  }
 }
 
 // Link columns mirroring the top menu, above the copyright/social row.

src/App/assets/scss/components/_custom.scss

@@ -83,7 +83,7 @@
         </div>
     </section>
 
-    <section style="background:var(--surface-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);">
+    <section class="section-bg-light">
         <div class="wrap">
             <div class="section-head">
                 <span class="eyebrow">Headless Platform</span>
@@ -205,7 +205,7 @@
         </div>
     </section>
 
-    <section style="background:var(--surface-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);">
+    <section class="section-bg-light">
         <div class="wrap">
             <div class="section-head">
                 <span class="eyebrow">Other skeletons</span>
@@ -258,7 +258,7 @@
         </div>
     </section>
 
-    <section style="background:var(--surface-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);">
+    <section>
         <div class="wrap">
             <div class="section-head">
                 <span class="eyebrow">Components</span>
@@ -361,7 +361,7 @@
         </div>
     </section>
     {% if posts is defined and posts is iterable %}
-        <section>
+        <section style="background:var(--surface-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);">
             <div class="wrap">
                 <div class="section-head">
                     <span class="eyebrow">From the blog</span>

src/App/templates/app/index.html.twig

@@ -80,12 +80,16 @@
     {% block page_title %}{% endblock %}
     {% block content %}{% endblock %}
 </main>
-<footer>
+<footer class="section-bg-light">
     <div class="wrap">
-        <div class="footer-announcement">
-            <span class="eyebrow">We do not just build durable architecture; we stand by it.</span>
-            <p>While we build our digital platforms to stand the test of time, our commercial support ensures they adapt efficiently to your business needs. From 24/7 monitoring to rapid-response troubleshooting, we handle the infrastructure so you can focus on growth.</p>
-            <a class="btn btn-primary footer-announcement-cta" href="https://www.apidemia.com/#contact" target="_blank">Partner With Our Experts</a>
+        <div class="footer-announcement row align-items-center gy-3">
+            <div class="col-12 col-lg-8">
+                <span class="eyebrow">We do not just build durable architecture; we stand by it.</span>
+                <p>While we build our digital platforms to stand the test of time, our commercial support ensures they adapt efficiently to your business needs. From 24/7 monitoring to rapid-response troubleshooting, we handle the infrastructure so you can focus on growth.</p>
+            </div>
+            <div class="col-12 col-lg-4 text-lg-end">
+                <a class="btn btn-primary footer-announcement-cta" href="https://www.apidemia.com/#contact" target="_blank">Partner With Our Experts</a>
+            </div>
         </div>
         {# Mirrors the top menu: the Products dropdown, then the remaining menu items. #}
         <nav class="footer-nav" aria-label="Footer">