From 9349f2cff52ca00b93ef8cf1cacca35b780411f6 Mon Sep 17 00:00:00 2001
From: rishu229 <keshririshu521@gmail.com>
Date: Sun, 11 Jan 2026 19:47:38 +0530
Subject: [PATCH] fix: resolve hero section horizontal overflow on medium
 screens (640px-1024px)

- Added overflow-hidden to Banner component container
- Wrapped Pattern components in constrained container with gradient mask
- Applied CSS gradient mask for smooth fade effect on patterns
- Ensures no horizontal scroll between 640px-1024px viewports

Fixes #522
---
 src/components/Banner.jsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
index 44a482da..b0787e59 100644
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -5,11 +5,22 @@ import { Pattern } from '@/components/Pattern';
 export function Banner() {
   return (
     <section aria-label="Apply Banner" className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32">
-      <div className="overflow-hidden lg:relative">
+      <div className="relative overflow-hidden">
         <ContainerPattern size="md" className="relative grid grid-cols-1 items-end gap-y-12 lg:static lg:grid-cols-2 pt-24 pb-8 sm:py-10">
-          <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
-          <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
-          <div>
+          
+          {/* Add gradient mask that fades to right */}
+          <div 
+            className="absolute inset-0 overflow-hidden pointer-events-none"
+            style={{
+              maskImage: 'linear-gradient(to right, transparent 0%, black 20%, black 60%, transparent 100%)',
+              WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 20%, black 60%, transparent 100%)'
+            }}
+          >
+            <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
+            <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
+          </div>
+
+          <div className="relative z-10">
             <h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto">
               Launch into AOSSIE&apos;s open-source world through GSoC!
             </h2>
@@ -28,4 +39,4 @@ export function Banner() {
       </div>
     </section>
   );
-}
+}
\ No newline at end of file