From ff652084f5065c624ac0b20babdc52f1446a8fa9 Mon Sep 17 00:00:00 2001
From: Ivan Fontosh <ifontosh@it-aces.com>
Date: Sun, 28 Jun 2026 12:01:40 +0800
Subject: [PATCH] Improve responsive layout for hero CTA and mockup.

Widen the bottom CTA so the title and buttons fit on one line on desktop; hide hero screenshot mockup below 900px.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/sections/CtaBanner.module.css  | 48 +++++++++++++++----
 src/components/sections/HeroMockup.module.css |  4 +-
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/components/sections/CtaBanner.module.css b/src/components/sections/CtaBanner.module.css
index 4733dbc..d9172bf 100644
--- a/src/components/sections/CtaBanner.module.css
+++ b/src/components/sections/CtaBanner.module.css
@@ -3,12 +3,16 @@
 }
 
 .inner {
-  max-width: 720px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+  max-width: 1080px;
   margin: 0 auto;
-  padding: 48px 40px;
+  padding: 40px 48px;
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-xl);
-  text-align: center;
+  text-align: left;
   background:
     radial-gradient(
       ellipse at 50% 0%,
@@ -20,21 +24,45 @@
 }
 
 .title {
-  margin-bottom: 28px;
-  font-size: clamp(26px, 4vw, 34px);
+  margin: 0;
+  font-size: clamp(22px, 2.4vw, 30px);
   font-weight: 700;
-  line-height: 1.2;
+  line-height: 1.25;
+  white-space: nowrap;
 }
 
 .actions {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
   gap: 12px;
 }
 
-@media (max-width: 560px) {
+@media (max-width: 1040px) and (min-width: 901px) {
   .inner {
-    padding: 36px 24px;
+    gap: 20px;
+    padding: 36px 28px;
+  }
+
+  .title {
+    font-size: clamp(18px, 2.1vw, 24px);
+  }
+}
+
+@media (max-width: 900px) {
+  .inner {
+    flex-direction: column;
+    max-width: 720px;
+    padding: 36px 24px;
+    text-align: center;
+  }
+
+  .title {
+    white-space: normal;
+  }
+
+  .actions {
+    flex-wrap: wrap;
+    justify-content: center;
   }
 }
diff --git a/src/components/sections/HeroMockup.module.css b/src/components/sections/HeroMockup.module.css
index c2b10a7..50a6cc3 100644
--- a/src/components/sections/HeroMockup.module.css
+++ b/src/components/sections/HeroMockup.module.css
@@ -76,8 +76,6 @@
 
 @media (max-width: 900px) {
   .wrap {
-    min-height: 360px;
-    max-width: 480px;
-    margin: 0 auto;
+    display: none;
   }
 }