Merge pull request #65 from parteekcoder/responsiveness

Update HeroSection.js
GDSC-NITJ · Jan 30, 2024 · c1f67e2 · c1f67e2
2 parents dc15539 + be99803
commit c1f67e2
Showing 1 changed file with 17 additions and 16 deletions.
diff --git a/src/components/Hero/HeroSection.js b/src/components/Hero/HeroSection.js
@@ -36,8 +36,17 @@ function HeroSection() {
   };
 
   return (
-    <div className="relative w-full h-[620px] sm:h-[780px] md:h-[1000px] lg:h-[1200px] xl:h-[2200px]  2xl:h-[2280px]  bg-[#070201] overflow-hidden">
-      <div className='absolute w-full top-12 left-0 z-40'>
+    <div className="relative w-full h-[580px] sm:h-[700px] md:h-[900px] lg:h-[1200px] xl:h-[2100px]  2xl:h-[2120px]  bg-[#070201] overflow-hidden">
+       <Parallax className='relative top-0 left-0 w-full' speed={0} >
+        <div className="w-full">
+          <img
+            className="w-full object-contain"
+            src={HeroSky.src}
+            alt="Hero Sky"
+          />
+        </div>
+      </Parallax>
+      <Parallax speed={30} className='absolute w-full top-8 xl:top-36 left-0 z-40'>
         <div className="w-full relative lg:relative text-center">
           <div className="flex align-center justify-center py-8">
             <img
@@ -77,33 +86,25 @@ function HeroSection() {
                   )
                 }
               >
-                <div className="relative sm:w-60 sm:h-50 h-20 w-70">
+                <div className="relative w-44 sm:w-60 sm:h-50 h-20">
                   <Image
                     className="w-full"
                     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAABICAYAAAB2miDXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANZSURBVHgB7d0/aBNRHMDxX4w418EpEC1kCHaRToIgQiEgiJQijg4ugiIdHDsLLg4Org6OolJFEAqCCIKLVQRFpFgNFAcHFwWR1jQJl+T+vHv3LvfnlzbfDxzJ5V5KyeXH773fe3epSHodAWBSSdP4gABQkSpSPWQ+IFlibJH5ACUHU7SNZLz7P2+Iq/WdTevx9tZHmSb12lzktbjPwNR2ryv6fBf5mc1XZ2OPXTpyW1yR+QAlaTJf39Lb6wIgu9TBB8CJf5hmLL7Q7QSU2DIfUwpAgWxzEcPgi6tqrrb/xbx1TQBNWtVOP1/l0xhn4cxHtsO+UORURlsGf7s1fG2xfsj2lnBc9YORggtQkHCPMTwHaAw+phOA4lHtBJT0Ml+GcR6FFUwz//f/nKQV6XaaKpvmqiaBB4ypn/AouAA5WG0/856NKqDbb/5Y38OYD1DimPnoYgJ5I/MBSgg+QEmk23nrypNIo+ZKVQC48A/RTllbkvkAJQQfoITgA5QQfIASgg9QQvABSiJTDY2F04ZmrwVAvsh8gBKuagAKsvHilfU4mQ9QQvABSgg+QAnBBygh+AAlBB+ghOADlBB8gBKCD1BC8AFKIsvLTEtimie5hwuQNzIfoITgA5Q4XdWwWI/+Asvo3vQAxkHmA5T0gq8iAEo39sW0pq6oze/OX/ny/0fs8fnqrLhY39l0en9cO1drVz8E9rlr917TCuzVa1uBfdfvm4uHD34ZX28sBPc/Pd4I7HMle0nqtTnBSJYv/375SQOnGyiZIvvCxcMCYCz9oR6Zb2ythOP8piHsBsWWzuCF83cvC6LCK3+aK2et7cNjjK+PZgTFSTo/k3A+nl67N3jajzumGgAlBB+gJDLm86VGuqBARv54CqPg4ihcBf5887m1/bbxtvsoStL5Ket8GK4KutPdlk1tB8HnX+XSEQB5WY47QOYDyhNYyknBBVBiWlQ97HYeX2oEDjQYxwBD4fFdeO2mAZkPmAQEH6AkVcHFdHMluqJALOu1smQ+QEnmqYakX98EYJZ0C4nECfdwRRSYVoZqJ91OYBIldTttkcsyNEyVtPN4Sch8gJIstw0k8wEZYqjshdW9f/RMdzvR3Y55jzPedlSAcnz3Ht93t2/e9rK7vZMS7QI6Vp/BeES8YQAAAABJRU5ErkJggg=="
 
                     width={0}
                     height={0}
                   />
-                  <h1 className="font-Minecrafter text-white text-xl font-bold absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-3/4">
+                  <div className="font-Minecrafter w-full text-white text-[16px] sm:text-xl font-bold absolute left-0 top-1/4">
                     Join Discord
-                  </h1>
+                  </div>
                 </div>
               </button>
             </div>
           </div>
         </div>
-      </div>
-      <Parallax className='relative top-0 left-0 w-full' speed={0} >
-        <div className="w-full">
-          <img
-            className="w-full object-contain"
-            src={HeroSky.src}
-            alt="Hero Sky"
-          />
-        </div>
       </Parallax>
-      <Parallax speed={13} className='absolute top-40 md:top-60 lg:top-80 left-0 w-full' >
+
+      <Parallax speed={10} className='absolute top-44 md:top-60 lg:top-80 left-0 w-full' >
         <div className="w-full">
           <img
             className="w-full object-contain"
@@ -112,7 +113,7 @@ function HeroSection() {
           />
         </div>
       </Parallax>
-      <Parallax speed={11} className='absolute bottom-0 left-0 w-full'>
+      <Parallax speed={8} className='absolute bottom-0 left-0 w-full'>
         <div className="w-full">
           <img
             className="w-full object-contain"