Homepage tweaks

src/components/Navbar.tsx

@@ -110,7 +110,12 @@ const transitionProps: TransitionRootProps<typeof Fragment> = {
   leaveTo: 'transform scale-95 -translate-y-5 opacity-0',
 };
 
-const Navbar = () => {
+interface Props {
+  className?: string;
+  shadow?: boolean;
+}
+
+const Navbar = (props: Props) => {
   const [submenuCloseCallbacks, setSubmenuCloseCallbacks] = useState<Record<string, () => void>>(
     {},
   );
@@ -137,10 +142,17 @@ const Navbar = () => {
       obs.disconnect();
     };
   }, [ref]);
+
+  const textShadow = props.shadow === true ? '[text-shadow:_0_0_4px_rgb(0_0_0_/_0.4)]' : '';
+  const dropShadow = props.shadow === true ? '[filter:_drop-shadow(0_0_4px_rgb(0_0_0_/_0.4))]' : '';
+
   return (
     <Disclosure
       as="nav"
-      className="flex py-10 items-center lg:place-content-evenly place-content-between px-4"
+      className={clsx(
+        'flex py-10 items-center lg:place-content-evenly place-content-between px-4',
+        props.className ?? '',
+      )}
     >
       {({ open: displayMobileMenu, close: closeMobileMenu }) => (
         <>
@@ -152,10 +164,17 @@ const Navbar = () => {
             }}
           />
           <Link className="flex items-center" href="/">
-            <Image src={'/icon-white.svg'} alt={'logo'} width={90} height={70} priority />
+            <Image
+              src={'/icon-white.svg'}
+              alt={'logo'}
+              width={90}
+              height={70}
+              priority
+              className={dropShadow}
+            />
           </Link>
           <Disclosure.Button className="lg:hidden">
-            <Image src={Hamburger} alt="" className="w-8" />
+            <Image src={Hamburger} alt="" className={clsx('w-8', dropShadow)} />
           </Disclosure.Button>
           <Transition {...transitionProps} show={shouldDisplayDesktopMenu || displayMobileMenu}>
             <Disclosure.Panel
@@ -221,13 +240,14 @@ const Navbar = () => {
                               'w-full flex gap-1 items-center',
                             )}
                           >
-                            <p>{item.name}</p>
+                            <p className={textShadow}>{item.name}</p>
                             <Image
                               src={FilledChevronUp}
                               alt=""
                               className={clsx(
                                 submenuOpen ? 'rotate-0' : 'rotate-180',
                                 'w-3 transition-transform',
+                                dropShadow,
                               )}
                             />
                           </Disclosure.Button>
@@ -274,7 +294,10 @@ const Navbar = () => {
                   <li key={`menu-child-${outerIndex}`}>
                     <Link
                       href={item.link}
-                      className={clsx(displayMobileMenu && 'flex place-content-between w-full')}
+                      className={clsx(
+                        displayMobileMenu && 'flex place-content-between w-full',
+                        textShadow,
+                      )}
                     >
                       {item.name}
                     </Link>
@@ -283,7 +306,10 @@ const Navbar = () => {
               </ul>
               <Link
                 href="/resources/meetings"
-                className="justify-self-end w-max px-4 py-2 rounded-full border whitespace-nowrap"
+                className={clsx(
+                  'justify-self-end w-max px-4 py-2 rounded-full border whitespace-nowrap',
+                  textShadow,
+                )}
               >
                 Get Involved
               </Link>

src/components/WhoWeAre.tsx

@@ -2,7 +2,10 @@ import Link from 'next/link';
 
 function WhoWeAre() {
   return (
-    <div className="xl:pt-32 px-8 md:px-32 xl:px-64 flex justify-between flex-col lg:flex-row mx-auto font-inter gap-8 lg:gap-16 lg:text-left text-center my-16">
+    <div
+      id="who-we-are"
+      className="xl:pt-32 px-8 md:px-32 xl:px-64 flex justify-between flex-col lg:flex-row mx-auto font-inter gap-8 lg:gap-16 lg:text-left text-center my-16"
+    >
       <h1 className="font-bold lg:text-6xl text-2xl text-gradient leading-tight">
         Who&nbsp;We Are
       </h1>

src/pages/index.tsx

@@ -10,39 +10,47 @@ import CTA from '@/components/CTA';
 import Testimonials from '@/components/Testimonials';
 import Projects from '@/components/Projects';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 
 const Header = () => {
+  const router = useRouter();
+
   const [frames, bgStyles] = useBlobBg(false);
 
   return (
-    <div className="h-screen">
+    <div className="h-screen flex flex-col overflow-hidden relative ">
       {frames}
       <div style={bgStyles} className="absolute -z-30 w-full h-full text-xl" />
-      <Image src={Circles} alt={''} priority className="absolute -z-20 h-auto w-full opacity-50" />
+      <Image
+        src={Circles}
+        alt={''}
+        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"
+      />
       <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>
 
-      <Navbar />
-      <main className="lg:pt-24 xl:pt-40">
+      <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">
+          <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 lg:pb-24 xl:pb-40">
+          <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>Talents</b>
           </h1>
-          <div className="flex flex-col relative lg:h-16 xl:h-24">
-            <p className="text-lg font-medium">Explore the Galaxy</p>
-            <Image
-              src={Arrow}
-              alt="Arrow"
-              className="absolute left-1/2 bottom-0 transform -translate-x-1/2 cursor-pointer hover:scale-105 transition-transform duration-300 ease-in-out"
-            />
-          </div>
         </div>
-      </main>
+      </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>
+        <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')}
+        />
+      </div>
     </div>
   );
 };
@@ -54,6 +62,7 @@ const Home = () => (
       <meta property="og:url" content="https://www.utdnebula.com" />
     </Head>
     <Header />
+    <Navbar className="absolute top-0 left-0 right-0" shadow={true} />
     <WhoWeAre />
     <Projects />
     <Testimonials />