From 7ba7a56459d0864ffeeb291d9c43fff0ae82950a Mon Sep 17 00:00:00 2001
From: Marcel Menk <marcel.menk@forepath.io>
Date: Sun, 24 May 2026 11:56:04 +0200
Subject: [PATCH] fix: grid-like section separation

---
 apps/frontend-portal/src/styles.scss          | 47 +++++++++++++++++--
 .../lib/container/container.component.html    |  4 +-
 .../src/lib/home/home.component.html          |  4 +-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/apps/frontend-portal/src/styles.scss b/apps/frontend-portal/src/styles.scss
index 7272100e..06b3de99 100644
--- a/apps/frontend-portal/src/styles.scss
+++ b/apps/frontend-portal/src/styles.scss
@@ -254,10 +254,10 @@ html {
   }
 
   &.bg-dark {
-    --bs-border-color: rgb(28, 28, 31);
+    --bs-border-color: rgba(255, 255, 255, 0.08);
 
     > .grid-section__container {
-      --bs-border-color: rgb(28, 28, 31);
+      --bs-border-color: rgba(255, 255, 255, 0.08);
     }
   }
 
@@ -269,13 +269,54 @@ html {
     position: relative;
 
     &.grid-section__container--dark {
-      --bs-border-color: rgb(28, 28, 31);
+      --bs-border-color: rgba(255, 255, 255, 0.08);
     }
 
     &.grid-section__container--shadow {
       margin-bottom: -1px;
     }
 
+    &.grid-section__container--hero-top,
+    &.grid-section__container--footer-top {
+      &::before,
+      &::after {
+        @media (min-width: 576px) {
+          height: calc(100% + 3rem);
+          top: -3rem;
+        }
+
+        @media (min-width: 768px) {
+          height: calc(100% + 6rem);
+          top: -6rem;
+        }
+      }
+    }
+
+    &.grid-section__container--hero-bottom {
+      &::before,
+      &::after {
+        @media (min-width: 576px) {
+          height: calc(100% + 3rem);
+          top: 0;
+        }
+
+        @media (min-width: 768px) {
+          height: calc(100% + 6rem);
+          top: 0;
+        }
+      }
+    }
+
+    &.grid-section__container--footer-bottom {
+      &::before,
+      &::after {
+        @media (min-width: 576px) {
+          height: calc(100% + 6rem);
+          top: -3rem;
+        }
+      }
+    }
+
     &::before {
       content: '';
       position: absolute;
diff --git a/libs/domains/framework/frontend/feature-portal/src/lib/container/container.component.html b/libs/domains/framework/frontend/feature-portal/src/lib/container/container.component.html
index 9bce311b..0655d618 100644
--- a/libs/domains/framework/frontend/feature-portal/src/lib/container/container.component.html
+++ b/libs/domains/framework/frontend/feature-portal/src/lib/container/container.component.html
@@ -172,7 +172,7 @@
 </header>
 <router-outlet></router-outlet>
 <footer class="footer bg-dark text-white position-relative overflow-hidden grid-section pt-10">
-  <div class="container grid-section__container">
+  <div class="container grid-section__container grid-section__container--footer-top">
     <div class="row">
       <div class="col-md-4 mb-3 mb-md-0">
         <img src="assets/images/favicon.svg" i18n-alt="@@featurePortal-brandAlt" alt="Agenstra" class="brand-icon" />
@@ -368,7 +368,7 @@ <h6 class="fw-bold mb-3" i18n="@@featurePortal-footerLegal">Legal</h6>
     </div>
   </div>
   <div class="text-white py-5">
-    <div class="container grid-section__container grid-section__container--dark">
+    <div class="container grid-section__container grid-section__container--dark grid-section__container--footer-bottom">
       <div class="row">
         <div class="col-md-12 text-center">
           <p class="mb-0 small" i18n="@@featurePortal-footerCopyright">
diff --git a/libs/domains/framework/frontend/feature-portal/src/lib/home/home.component.html b/libs/domains/framework/frontend/feature-portal/src/lib/home/home.component.html
index 4dce7e6b..1d1e77f6 100644
--- a/libs/domains/framework/frontend/feature-portal/src/lib/home/home.component.html
+++ b/libs/domains/framework/frontend/feature-portal/src/lib/home/home.component.html
@@ -1,6 +1,6 @@
 <!-- Hero Section -->
 <section id="hero" class="pt-10 py-lg-6 bg-dark text-white grid-section">
-  <div class="container hero-content grid-section__container">
+  <div class="container hero-content grid-section__container grid-section__container--hero-top">
     <div class="row justify-content-center">
       <div class="col-12 text-center hero-container">
         <h1 class="display-4 fw-semibold mb-4 hero-title" i18n="@@featurePortalHome-heroTitle">
@@ -72,7 +72,7 @@ <h1 class="display-4 fw-semibold mb-4 hero-title" i18n="@@featurePortalHome-hero
       </div>
     </div>
   </div>
-  <div class="container grid-section__container">
+  <div class="container grid-section__container grid-section__container--hero-bottom">
     <div class="row">
       <div class="col-md-12 intent-cards" (mouseenter)="pauseAutoplay()" (mouseleave)="resumeAutoplay()">
         <img