Feature: make hero section prototype

src/assets/index.tsx

@@ -1,3 +1,7 @@
+
+export { HeroBackgroundMobile } from './hero/bg-mobile-svg';
+export { HeroBackgroundDesktop } from './hero/bg-desktop-svg';
+
 import {
     MailIcon,
     LinkedInIcon,

src/components/index.tsx

@@ -12,4 +12,5 @@ export { Menu } from './Navbar/Menu';
  * @section FooterSection
  *
  */
-export { FooterSection } from './sections/Footer.section';
+export { HeroSection } from "./sections/Hero.section"
+export { FooterSection } from './sections/Footer.section';

src/components/sections/Hero.section.tsx

@@ -0,0 +1,26 @@
+import { HeroBackgroundMobile, HeroBackgroundDesktop } from '@assets';
+
+const HeroSection = () => {
+    return (
+        <div className="relative isolate">
+            <div className="-z-10">
+                <HeroBackgroundMobile className={'block sm:hidden'} />
+                <HeroBackgroundDesktop className={'hidden sm:block'} />
+            </div>
+            <div className="relative -translate-y-2/3 space-y-4 text-center sm:translate-y-0 sm:absolute sm:left-0 sm:top-0 sm:mt-0 sm:p-10 lg:p-14 sm:space-y-2 sm:text-left lg:space-y-7">
+                <img
+                    className="mx-auto aspect-square w-20 sm:mx-0 lg:w-28 xl:w-32"
+                    src="src/assets/logo.svg"
+                    alt="Hawkhack logo"
+                />
+                <h1 className="bg-gradient-to-b from-[#2B6469] to-[#00CEDB] bg-clip-text text-transparent text-4xl font-extrabold lg:text-5.5xl xl:text-7xl">
+                    HawkHack 2024
+                </h1>
+                <p className="text-2xl font-bold sm:hidden">April 5th - 7th</p>
+                <p className="text-2xl font-bold sm:hidden">In Person</p>
+            </div>
+        </div>
+    );
+};
+
+export { HeroSection };

src/pages/Landing.tsx

@@ -1,10 +1,10 @@
-import { FooterSection } from '@components';
-import { Navbar } from '@components';
+import { Navbar, HeroSection, FooterSection } from '@components';
 
 const Landing: React.FC = () => {
     return (
         <div>
             <Navbar />
+            <HeroSection />
             <FooterSection />
         </div>
     );