Change image

UTDNebula · Oct 30, 2024 · d5a512a · d5a512a
1 parent 0dc931f
commit d5a512a
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 173 deletions.
diff --git a/public/images/BG6.png b/public/images/BG6.png
diff --git a/src/components/Blob.tsx b/src/components/Blob.tsx
diff --git a/src/lib/useBlobBg.tsx b/src/lib/useBlobBg.tsx
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,11 +1,10 @@
 import Navbar from '@/components/Navbar';
 import Image from 'next/image';
 import Circles from '@/../public/images/circles.svg';
-import Blob from '@/components/Blob';
+import Gradient from '@/../public/images/BG6.png';
 import Footer from '@/components/Footer';
 import Arrow from '@/../public/icons/arrow-white.svg';
 import WhoWeAre from '@/components/WhoWeAre';
-import useBlobBg from '@/lib/useBlobBg';
 import CTA from '@/components/CTA';
 import Testimonials from '@/components/Testimonials';
 import Projects from '@/components/Projects';
@@ -15,41 +14,46 @@ import { useRouter } from 'next/router';
 const Header = () => {
   const router = useRouter();
 
-  const [frames, bgStyles] = useBlobBg(false);
-
   return (
-    <div className="h-screen flex flex-col overflow-hidden relative ">
-      {frames}
-      <div style={bgStyles} className="absolute -z-30 w-full h-full text-xl" />
+    <div className="h-[130vh] overflow-hidden relative bg-addition">
       <Image
-        src={Circles}
-        alt={''}
+        src={Gradient}
+        alt="gradient background"
+        fill
         priority
-        className="absolute -z-20 max-w-[unset] h-[max(120vh,120vw)] w-[max(120vh,120vw)] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-50"
+        className="object-cover -z-30"
       />
-      <div className="absolute -z-10 w-full h-full opacity-75">
-        <Blob className="-left-[20%] top-[35%]" color="4835BC" size="large" />
-        <Blob className="right-[5%] -top-[10%]" color="4835BC" size="large" />
-      </div>
 
-      <div className="grow flex flex-col justify-center px-8 lg:px-16 xl:px-32">
-        <div className="text-center text-white">
-          <h3 className="text-xl font-semibold lg:pb-5 xl:pb-20 font-inter [text-shadow:_0_0_4px_rgb(0_0_0_/_0.4)]">
-            Greetings from the stars
-          </h3>
-          <h1 className="text-6xl font-bold font-kallisto [text-shadow:_0_0_16px_rgb(0_0_0_/_0.4)]">
-            We are Nebula Labs <br /> We build <b>Products</b> and <b>People</b>
-          </h1>
-        </div>
-      </div>
-      <div className="absolute bottom-8 left-0 right-0 flex flex-col items-center lg:gap-4 lg:h-16 text-white [text-shadow:_0_0_4px_rgb(0_0_0_/_0.4)]">
-        <p className="text-lg font-medium">Explore the Galaxy</p>
+      <div className="h-screen flex flex-col relative">
         <Image
-          src={Arrow}
-          alt="Arrow"
-          className="cursor-pointer hover:scale-105 transition-transform duration-300 ease-in-out [filter:_drop-shadow(0_0_4px_rgb(0_0_0_/_0.4))]"
-          onClick={() => router.replace('/#who-we-are')}
+          src={Circles}
+          alt={'circle image overlay'}
+          className="absolute -z-20 max-w-[unset] h-[max(120vh,120vw)] w-[max(120vh,120vw)] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-50"
         />
+
+        <div className="grow flex flex-col justify-center px-8 lg:px-16 xl:px-32">
+          <div className="text-center text-white">
+            <h3 className="text-xl font-semibold lg:pb-5 xl:pb-20 font-inter [text-shadow:_0_0_4px_rgb(0_0_0_/_0.4)]">
+              Greetings from the stars
+            </h3>
+            <h1 className="text-6xl font-bold font-kallisto [text-shadow:_0_0_16px_rgb(0_0_0_/_0.4)]">
+              We are Nebula Labs <br /> We build <b>Products</b> and <b>People</b>
+            </h1>
+          </div>
+        </div>
+        <div className="absolute bottom-8 left-0 right-0 flex flex-col items-center lg:gap-4 lg:h-16 text-white [text-shadow:_0_0_4px_rgb(0_0_0_/_0.4)]">
+          <p className="text-lg font-medium">Explore the Galaxy</p>
+          <button
+            className="hover:scale-105 transition-transform duration-300 ease-in-out"
+            onClick={() => router.replace('/#who-we-are')}
+          >
+            <Image
+              src={Arrow}
+              alt="Arrow"
+              className="[filter:_drop-shadow(0_0_4px_rgb(0_0_0_/_0.4))]"
+            />
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -35,4 +35,10 @@ html {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  .bg-addition {
+    background: linear-gradient(transparent calc(calc(100% / 130) * 100), white),
+      radial-gradient(at 0% 100%, theme('colors.persimmon.500') 0px, transparent 40%),
+      radial-gradient(at 100% 100%, theme('colors.royal') 0px, transparent 60%);
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -51,15 +51,6 @@ module.exports = {
       width: {
         wide: '32rem',
       },
-      animation: {
-        'slow-pulse': 'subtle-pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      },
-      keyframes: {
-        'subtle-pulse': {
-          '0%, 100%': { opacity: '1' },
-          '50%': { opacity: '0.6' },
-        },
-      },
     },
   },
   plugins: [],