From e59960b23b0c429d3343f998ee75573d5ad7edd2 Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Fri, 19 Dec 2025 10:07:46 -0600
Subject: [PATCH] Fix home page responsiveness on small screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make Hero height responsive (350px mobile, 400px tablet, 500px desktop)
- Remove overflow-hidden and flex-1 from ChecksOverview to allow
  content to flow naturally and enable scrolling
- Add responsive padding to ChecksOverview for better mobile spacing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/components/ChecksOverview.tsx | 2 +-
 frontend/components/Hero.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/ChecksOverview.tsx b/frontend/components/ChecksOverview.tsx
index d6379c7..6f79249 100755
--- a/frontend/components/ChecksOverview.tsx
+++ b/frontend/components/ChecksOverview.tsx
@@ -42,7 +42,7 @@ const specialistAgents: CheckDetail[] = [
 
 export const ChecksOverview: React.FC = () => {
     return (
-        <div className="relative bg-gradient-to-br from-emerald-50 via-white to-emerald-50/30 py-16 overflow-hidden flex-1 w-full">
+        <div className="relative bg-gradient-to-br from-emerald-50 via-white to-emerald-50/30 py-12 sm:py-16 w-full">
             {/* Decorative Background */}
             <div className="absolute inset-0 pointer-events-none">
                  <div className="absolute top-0 left-1/4 w-[800px] h-[800px] bg-emerald-200/30 rounded-full blur-3xl -translate-y-1/2 mix-blend-multiply"></div>
diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
index 6a093bf..8fb74f6 100755
--- a/frontend/components/Hero.tsx
+++ b/frontend/components/Hero.tsx
@@ -14,7 +14,7 @@ const ArrowRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
 
 export const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
   return (
-    <div className="relative overflow-hidden bg-slate-900 min-h-[500px] flex items-center">
+    <div className="relative overflow-hidden bg-slate-900 min-h-[350px] sm:min-h-[400px] md:min-h-[500px] flex items-center">
         {/* Abstract background elements */}
         <div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-brand-accent/20 blur-3xl pointer-events-none"></div>
         <div className="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-brand-dark-blue/40 blur-3xl pointer-events-none"></div>