Merge pull request steam-bell-92#793 from Siddh2024/fix/hero-section-centering

Fix/hero section centering

Author: steam-bell-92

web-app/css/styles.css

@@ -967,7 +967,7 @@ body.sidebar-active .hero-controls {
   display: flex;
   align-items: center;
   justify-content: center;
-  line-height: 1;
+  line-height: normal;
   flex-wrap: wrap;
   text-align: center;
   max-width: 100%;
@@ -4124,10 +4124,13 @@ html[data-theme="dark"] body {
 }
 
 .hero-section {
-    min-height: 0;
-    padding: 5rem 0 20px;
+    min-height: 100vh;
+    padding: 5rem 24px 80px;
     background: transparent;
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #boardCanvas {
@@ -4184,8 +4187,12 @@ html[data-theme="dark"] body {
     position: relative;
     z-index: 2;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
-    align-items: flex-start;
+    text-align: center;
+    max-width: 800px;
+    width: 100%;
     margin: 0 auto;
     padding: 0 1rem;
 }
@@ -4528,6 +4535,10 @@ html[data-theme="dark"] body {
     background: rgba(255, 255, 255, 0.08);
 }
 
+.hero-title-wrapper {
+    margin-bottom: 2rem;
+}
+
 .hero-title {
     font-family: 'Fredoka', 'Segoe UI', sans-serif;
     font-size: clamp(3rem, 7vw, 5.6rem);
@@ -4553,7 +4564,7 @@ html[data-theme="dark"] body {
     -webkit-text-fill-color: transparent;
     background-clip: text;
     position: relative;
-    display: inline-block;
+    height: 105px;
 }
 
 [data-theme="dark"] .hero-title-accent {
@@ -4572,6 +4583,10 @@ html[data-theme="dark"] body {
     letter-spacing: 0.01em;
 }
 
+.hero-cta-row {
+    margin-top: 37px;
+}
+
 .hero-typing {
     display: inline-flex;
     flex-wrap: wrap;