From ab162efab83d7b6bacb2e4c5011a06c6b9e42759 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 11:43:19 +0300
Subject: [PATCH] chore(website): improve hero section layout on mobile

---
 apps/website/src/pages/Home/index.css | 28 ++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css
index 5bc5bcaef..40a09c6bf 100644
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -1,6 +1,6 @@
 section.hero-section {
     position: relative;
-    background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end));
+    background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end));    
 }
 
 section.hero-section.dark {
@@ -55,9 +55,9 @@ section.hero-section::before {
 
 section.hero-section > .content-wrapper {
     display: flex;
-    padding: 3em;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     min-height: 60vh;
 }
 
@@ -74,9 +74,10 @@ section.hero-section .title-section h1 {
 
 section.hero-section .image,
 section.hero-section .image img {
+    position: relative;
     width: 100%;
     height: auto;
-    position: relative;
+    margin-bottom: 0;
 }
 
 section.hero-section .download-wrapper {
@@ -95,6 +96,27 @@ section.hero-section .more-download-options {
     text-align: center;
 }
 
+@media (max-width: 719px) {
+    section.hero-section {
+        padding-bottom: 0;        
+    }
+
+    section.hero-section .content-wrapper {
+        width: 100%;
+    }
+
+    section.hero-section .title-section {
+        max-width: 90%;
+    }
+}
+
+@media (min-width: 720px) {
+    section.hero-section > .content-wrapper {
+        flex-direction: row;
+        padding: 3em;
+    }
+}
+
 section:nth-of-type(2n+1) {
     background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08));
 }