landing page test

src/app/page.tsx

@@ -1,9 +1,9 @@
 import Header from '../components/header/BaseHeader';
-import Carousel from '../components/club/directory/Carousel';
 import TagFilter from '../components/club/directory/TagFilter';
 import ClubDirectoryGrid from '../components/club/directory/ClubDirectoryGrid';
 import type { Metadata } from 'next';
 import { api } from '@src/trpc/server';
+import LandingPage from '@src/components/landing/LandingPage';
 
 export const metadata: Metadata = {
   title: 'Jupiter - Nebula',
@@ -24,14 +24,15 @@ type Params = {
 const Home = async (props: Params) => {
   const tags = await api.club.distinctTags();
   const featured = await api.club.getCarousel();
-  const onlyClubs = featured.map((item) => item.club);
+  // const onlyClubs = featured.map((item) => item.club);
   return (
     <main className="">
-      <Header />
-      <div className="px-2 md:px-5">
-        <div className="relative block w-full">
-          <Carousel clubs={onlyClubs} />
-        </div>
+      {/* <Header /> */}
+      <LandingPage />
+      <div className="px-2 md:px-5" id="content">
+        {/* <div className="relative block w-full"> */}
+        {/* <Carousel clubs={onlyClubs} /> */}
+        {/* </div> */}
         <TagFilter tags={tags} />
         <ClubDirectoryGrid tag={props.searchParams.tag} />
       </div>

src/components/landing/ExploreButton.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { DownArrowIcon } from '@src/icons/Icons';
+
+const ExploreButton = () => {
+  return (
+    <button
+      className="absolute bottom-4 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center"
+      type="button"
+      onClick={(e) => {
+        e.preventDefault();
+        document
+          .getElementById('content')
+          ?.scrollIntoView({ behavior: 'smooth' });
+      }}
+    >
+      <p className="text-center text-lg text-white">Explore Clubs</p>
+      <DownArrowIcon />
+    </button>
+  );
+};
+export default ExploreButton;

src/components/landing/LandingPage.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image';
+import gradientBG from 'public/images/landingGradient.png';
+import Sidebar from '../nav/Sidebar';
+import { ClubSearchBar } from '../searchBar/ClubSearchBar';
+import ExploreButton from './ExploreButton';
+// screen sized bb
+const LandingPage = () => {
+  return (
+    <section className="relative h-screen w-screen">
+      <div className="absolute inset-0 h-full w-full">
+        <Image
+          src={gradientBG}
+          fill
+          sizes="100vw"
+          alt="Gradient Background for landing page"
+          className="object-cover"
+        />
+      </div>
+      <div className="absolute inset-0 z-10 h-full w-full bg-black/10"></div>
+      <div
+        title="landing page content"
+        className="absolute inset-0 z-10 w-full"
+      >
+        <div className="z-20 flex h-20 w-full flex-row items-center">
+          <Sidebar />
+          <div>
+            <Image
+              src="/nebula-logo.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mr-1.5"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="pointer-events-none absolute inset-0 z-20 flex h-full w-full flex-col items-center justify-center gap-y-5">
+        <h1 className="pointer-events-auto max-w-3xl text-center font-sans text-6xl font-semibold text-white">
+          Discover the Best Clubs and Organizations at UTD
+        </h1>
+        <ClubSearchBar />
+      </div>
+      <ExploreButton />
+    </section>
+  );
+};
+
+export default LandingPage;

src/components/searchBar/DebouncedSearchBar.tsx

@@ -45,7 +45,7 @@ export const DebouncedSearchBar = <T extends SearchElement>({
   }, [input, setSearch]);
 
   return (
-    <div className="relative mr-3 w-full max-w-xs md:max-w-sm lg:max-w-md">
+    <div className="pointer-events-auto relative mr-3 w-full max-w-xs md:max-w-sm lg:max-w-md">
       <SearchBar
         placeholder={placeholder}
         tabIndex={0}

src/icons/Icons.tsx

@@ -401,3 +401,19 @@ export const AdminIcon: IconType = ({ fill = defaultFill }) => (
     />
   </svg>
 );
+export const DownArrowIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.5925 8V19.17L8.7125 14.29C8.3225 13.9 7.6825 13.9 7.2925 14.29C6.9025 14.68 6.9025 15.31 7.2925 15.7L13.8825 22.29C14.2725 22.68 14.9025 22.68 15.2925 22.29L21.8825 15.7C22.2725 15.31 22.2725 14.68 21.8825 14.29C21.6957 14.1027 21.442 13.9975 21.1775 13.9975C20.913 13.9975 20.6593 14.1027 20.4725 14.29L15.5925 19.17V8C15.5925 7.45 15.1425 7 14.5925 7C14.0425 7 13.5925 7.45 13.5925 8Z"
+      fill="#FFFFFF"
+    />
+  </svg>
+);