diff --git a/docs/developer/src/css/custom.css b/docs/developer/src/css/custom.css
index 6c82f77..e8673a0 100644
--- a/docs/developer/src/css/custom.css
+++ b/docs/developer/src/css/custom.css
@@ -76,6 +76,7 @@
   background: linear-gradient(135deg, #00b9e7 0%, #0099cc 50%, #ffb800 100%);
   color: white;
   position: relative;
+  padding: 4rem 0 6rem 0;
 }
 
 .hero--primary::before {
diff --git a/docs/developer/src/pages/index.module.css b/docs/developer/src/pages/index.module.css
index 0bc0294..62910a1 100644
--- a/docs/developer/src/pages/index.module.css
+++ b/docs/developer/src/pages/index.module.css
@@ -4,7 +4,7 @@
  */
 
 .heroBanner {
-  padding: 4rem 0 6rem 0;
+  padding: 4rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -21,3 +21,8 @@
   align-items: center;
   justify-content: center;
 }
+
+.features {
+  margin-top: 4rem;
+  padding: 2rem 0;
+}
diff --git a/docs/user/src/css/custom.css b/docs/user/src/css/custom.css
index 6c82f77..e8673a0 100644
--- a/docs/user/src/css/custom.css
+++ b/docs/user/src/css/custom.css
@@ -76,6 +76,7 @@
   background: linear-gradient(135deg, #00b9e7 0%, #0099cc 50%, #ffb800 100%);
   color: white;
   position: relative;
+  padding: 4rem 0 6rem 0;
 }
 
 .hero--primary::before {
diff --git a/docs/user/src/pages/index.module.css b/docs/user/src/pages/index.module.css
index 0bc0294..62910a1 100644
--- a/docs/user/src/pages/index.module.css
+++ b/docs/user/src/pages/index.module.css
@@ -4,7 +4,7 @@
  */
 
 .heroBanner {
-  padding: 4rem 0 6rem 0;
+  padding: 4rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -21,3 +21,8 @@
   align-items: center;
   justify-content: center;
 }
+
+.features {
+  margin-top: 4rem;
+  padding: 2rem 0;
+}