Merge branch 'main' into feature/94/create-about-section

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/Button/Button.tsx

@@ -1,6 +1,6 @@
-import { getButtonStyles } from "@components";
+import { getButtonStyles } from "./Button.styles";
 
-import type { ButtonStylesProps } from "@components";
+import type { ButtonStylesProps } from "./Button.styles";
 
 type ButtonProps = ButtonStylesProps &
     React.ButtonHTMLAttributes<HTMLButtonElement>;

src/components/Navbar/Menu.tsx

@@ -1,4 +1,4 @@
-import { NavItems } from '@components';
+import { NavItems, Button } from '@components';
 
 interface MenuProp {
     showMenu: boolean;
@@ -12,9 +12,9 @@ const Menu: React.FC<MenuProp> = ({ showMenu, hideMenu }) => {
         <div className="oveflow-hidden fixed right-0 top-0 z-50 h-full w-full max-w-[65%] border px-10 py-24 backdrop-blur-xl">
             <NavItems isHorizontal={false} handleClick={hideMenu} />
 
-            <div className="portal-btn mt-20">
-                <button>Application Portal</button>
-            </div>
+            <Button className="mt-20 block lg:hidden">
+                Application Portal
+            </Button>
         </div>
     );
 };

src/components/Navbar/NavItems.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@components';
 import { Link } from 'react-scroll';
 
 const links = [
@@ -20,7 +19,7 @@ const NavItems: React.FC<{
 }> = ({ isHorizontal, handleClick }) => {
     return (
         <ul
-            className={`flex gap-7 text-deepMarine ${
+            className={`text-deepMarine flex gap-7 ${
                 isHorizontal ? rowStyle : colStyle
             }`}
         >
@@ -36,7 +35,6 @@ const NavItems: React.FC<{
                     </Link>
                 </li>
             ))}
-            <Button className="block lg:hidden">Application Portal</Button>
         </ul>
     );
 };

src/components/Navbar/Navbar.tsx

@@ -14,7 +14,7 @@ const Navbar = () => {
     }, [showMenu]);
 
     return (
-        <nav className="gradient fixed top-0 z-50 flex h-fit w-full items-center justify-between p-8 px-10 text-white lg:justify-normal">
+        <nav className="gradient fixed top-0 z-50 flex h-fit w-full items-center justify-between p-8 px-10 lg:justify-normal">
             <div className="logo lg:mr-8">
                 <img
                     className="h-14 w-14"
@@ -23,7 +23,7 @@ const Navbar = () => {
                 />
             </div>
 
-            <div className="nav-items hidden lg:mr-auto lg:block">
+            <div className="nav-items hidden text-tbrand lg:mr-auto lg:block">
                 <NavItems isHorizontal={true} handleClick={hideMenu} />
             </div>
 

src/components/index.tsx

@@ -12,6 +12,7 @@ export { Menu } from './Navbar/Menu';
  * @section
  *
  */
+export { HeroSection } from "./sections/Hero.section"
 export { AboutSection } from './sections/About.section';
 export { TeamSection } from './sections/Team.section';
-export { FooterSection } from './sections/Footer.section';
+export { FooterSection } from './sections/Footer.section';

src/components/sections/Hero.section.tsx

@@ -0,0 +1,40 @@
+import { HeroBackgroundMobile, HeroBackgroundDesktop } from '@assets';
+
+const HeroSection = () => {
+    return (
+        <div className="stacked place-items-end-center sm:place-items-start">
+            <HeroBackgroundMobile
+                className={'media block pb-16 sm:hidden xl:translate-y-20'}
+            />
+            <HeroBackgroundDesktop
+                className={'media hidden sm:block xl:translate-y-20'}
+            />
+
+            <div className="space-y-1 pb-4 text-center sm:pl-24 sm:pt-12 sm:text-left lg:pl-16 lg:pt-16 2xl:pl-60 2xl:pt-24">
+                <img
+                    className="inline-block aspect-square w-20 sm:mx-0 lg:w-28 xl:w-32 2xl:w-52"
+                    src="src/assets/logo.svg"
+                    alt="Hawkhack logo"
+                />
+                <div className="sm:space-y-2">
+                    <h1 className="bg-gradient-to-b from-[#2B6469] to-[#00CEDB] bg-clip-text text-4xl font-extrabold text-transparent lg:text-5.5xl xl:text-7xl">
+                        HawkHack 2024
+                    </h1>
+                    <p className="font-semibold text-[#2B6469] xl:text-2xl 2xl:text-3.5xl ">
+                        Hosted at Wilfrid Laurier University
+                    </p>
+                </div>
+                <div>
+                    <p className="text-2xl font-bold text-[#2B6469] sm:hidden">
+                        April 5th - 7th
+                    </p>
+                    <p className="text-2xl font-bold text-[#2B6469] sm:hidden">
+                        In Person
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export { HeroSection };

src/index.css

@@ -87,4 +87,23 @@ body {
         --gap: 2.5rem;
         --min: 25ch;
     }
+
+    .stacked {
+      display: grid;
+    }
+
+    .stacked > * {
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+    }
+
+    .stacked > .media {
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+    }
+
+    .place-items-end-center {
+      place-items: end center;
+    }
 }

src/pages/Landing.tsx

@@ -1,4 +1,4 @@
-import { Navbar, AboutSection, TeamSection, FooterSection } from '@components';
+import { Navbar, HeroSection, AboutSection, TeamSection, FooterSection } from '@components';
 
 const Landing: React.FC = () => {
     return (
@@ -8,6 +8,7 @@ const Landing: React.FC = () => {
         // total top padding = 3.5 + 4 = 7.5rem
         <div className="pt-[7.5rem]">
             <Navbar />
+            <HeroSection />
             <AboutSection />
             <TeamSection />
             <FooterSection />