Merge branch 'Excel2024Web:main' into main

Excel2024Web · Nov 27, 2024 · 314e93c · 314e93c
2 parents 84e3253 + 5cbad20
commit 314e93c
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 7 deletions.
diff --git a/src/components/BlobAnimation.jsx b/src/components/BlobAnimation.jsx
@@ -31,7 +31,6 @@ const BlobAnimation = () => {
   return (
     <>
       <div className="relative h-screen w-screen overflow-hidden">
-        {/* <div className="absolute bg-gradient-to-b from-transparent z-0 from-95% to-[#0a0a0a] bg-no-repeat right-0 left-0 top-0 bottom-0" /> */}
         <Image
           className="absolute top-0 left-0 z-0"
           src={topleft}
@@ -47,9 +46,10 @@ const BlobAnimation = () => {
           src={right}
           alt="bot-right"
         />
-        <Image className="lcircle1 max-lg:hidden" src={circle1} />
-        <Image className="lcircle2 max-md:hidden" src={circle2} />
-        <Image className="lcircle3 max-md:hidden" src={circle3} />
+        <Image className="lcircle1" src={circle1} />
+        <Image className="lcircle2" src={circle2} />
+        <Image className="lcircle3" src={circle3} />
+        <div className="absolute bg-gradient-to-b from-transparent from-95% to-[#0a0a0a] z-0 to-100% bg-no-repeat right-0 left-0 top-0 bottom-0" />
         <div
           className="container max-w-full md:max-w-[70%] relative m-auto flex flex-col min-h-screen text-our_white justify-center gap-[20px] z-0"
           data-aos="fade-up"
@@ -65,6 +65,7 @@ const BlobAnimation = () => {
             src={astro3}
             alt="astro-mob"
           />
+        <div className="lg:hidden absolute bg-gradient-to-b from-transparent from-95% to-[#0a0a0a] z-0 to-100% bg-no-repeat right-0 left-0 top-0 bottom-0" />
 
           <div className="flex z-50 flex-col gap-24 sm:gap-12 items-center sm:items-start max-sm:scale-90">
             <div className="flex flex-col gap-1 mt-[-8rem] sm:mt-0">
@@ -104,7 +105,7 @@ const BlobAnimation = () => {
               </span>
             </div> */}
             <div
-              className="apply-button"
+              className="apply-button z-50"
               data-hackathon-slug="hackfortomorrow2024"
               data-button-theme="dark-inverted"
               style={{ height: "44px", width: "312px" }}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -95,19 +95,106 @@ body {
   z-index: 0;
 }
 
-
 .lcircle3 {
   position: absolute;
   top: -67px;
   height: 448px;
   width: auto;
-  right:95px;
+  right: 95px;
   width: auto;
   animation: rotate 25s linear infinite;
   z-index: 0;
 }
 
+@media (max-width: 1700px) {
+  .lcircle1 {
+    top: -239.6px;
+    height: 745px;
+    width: auto;
+    right: -84.3px;
+  }
+
+  .lcircle2 {
+    top: -167px;
+    height: 600px;
+    width: auto;
+    right: -29.5px;
+  }
+
+  .lcircle3 {
+    top: -56.5px;
+    height: 378px;
+    right: 80.15px;
+  }
+}
+
+@media (max-width: 1400px) {
+  .lcircle1 {
+    top: -199.7px;
+    height: 621px;
+    width: auto;
+    right: -70.2px;
+  }
+
+  .lcircle2 {
+    top: -139.2px;
+    height: 500px;
+    width: auto;
+    right: -24.5px;
+  }
+
+  .lcircle3 {
+    top: -47px;
+    height: 315px;
+    right: 66.79px;
+  }
+}
 
+@media (max-width: 900px) {
+  .lcircle1 {
+    top: -139.8px;
+    height: 434.7px;
+    width: auto;
+    right: -49.14px;
+  }
+
+  .lcircle2 {
+    top: -97.44px;
+    height: 350px;
+    width: auto;
+    right: -17.15px;
+  }
+
+  .lcircle3 {
+    top: -32.9px;
+    width: auto;
+    height: 220.5px;
+    right: 46.76px;
+  }
+}
+
+@media (max-width: 530px) {
+  .lcircle1 {
+    top: -80px;
+    height: 248.4px;
+    width: auto;
+    right: -28px;
+  }
+
+  .lcircle2 {
+    top: -55.68px;
+    height: 200px;
+    width: auto;
+    right: -9.8px;
+  }
+
+  .lcircle3 {
+    top: -18.88px;
+    width: auto;
+    height: 126.6px;
+    right: 26.84px;
+  }
+}
 
 .skeleton {
   background-image: linear-gradient(