feat(ui/web): add mlh banner

cuhacking · Feb 20, 2025 · 333cb89 · 333cb89
1 parent 0c3aa6f
commit 333cb89
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 2 deletions.
diff --git a/libs/website/shared/ui/navigation/navbar/constants/navbar.constants.ts b/libs/website/shared/ui/navigation/navbar/constants/navbar.constants.ts
@@ -10,6 +10,7 @@ import instagram_white from '@cuhacking/shared/assets/icons/socials/instagram-wh
 import linkedin_white from '@cuhacking/shared/assets/icons/socials/linkedin-white-1.svg'
 import linktree_white from '@cuhacking/shared/assets/icons/socials/linktree-white-1.svg'
 import cuHackingLogo from '@cuhacking/shared/assets/logos/cuHacking/cuhacking-logo-1.svg'
+import mlhBanner from '@cuhacking/shared/assets/logos/sponsors/mlh-banner.svg'
 
 const links = [
   { name: 'ABOUT', link: '/#about' },
@@ -18,6 +19,16 @@ const links = [
   { name: 'FAQ', link: '/#faq' },
 ]
 
+const banner: { link: string, name: string, media: Media }
+  = {
+    link: 'https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2025-season&utm_content=black',
+    name: 'MLH Banner',
+    media: {
+      src: mlhBanner,
+      alt: 'Major League Hacking 2025 Hackathon Season',
+    },
+  }
+
 const socials: { link: string, name: string, media: Media }[] = [
   {
     link: 'https://www.instagram.com/cuhacking/',
@@ -90,6 +101,7 @@ export const NAVBAR_CONSTANTS = {
   SOCIALS: socials,
   LINKS: links,
   LOGO: cuHackingLogo,
+  MLH_BANNER: banner,
   HAMBURGER: {
     src: hamburger,
     alt: 'Hambuger icon',

diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.container.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.container.tsx
@@ -12,6 +12,7 @@ interface NavbarProps {
   }[]
   logo: string
   socials: {
+    name: string
     link: string
     media: Media
   }[]

diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx
@@ -10,6 +10,7 @@ import instagram_white from '@cuhacking/shared/assets/icons/socials/instagram-wh
 import linkedin_white from '@cuhacking/shared/assets/icons/socials/linkedin-white-1.svg'
 import linktree_white from '@cuhacking/shared/assets/icons/socials/linktree-white-1.svg'
 import logo from '@cuhacking/shared/assets/logos/cuHacking/cuhacking-logo-1.svg'
+import mlhBanner from '@cuhacking/shared/assets/logos/sponsors/mlh-banner.svg'
 import { createRemixStub } from '@remix-run/testing'
 import { NavbarPresenter } from './navbar.presenter'
 
@@ -42,57 +43,76 @@ const meta = {
   },
 } satisfies Meta<typeof NavbarPresenter>
 
+const banner = [
+  {
+    name: 'MLH Banner',
+    link: 'https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2025-season&utm_content=black',
+    media: {
+      src: mlhBanner.src,
+      alt: 'Major League Hacking 2025 Hackathon Season',
+    },
+  },
+]
+
 const socials = [
   {
+    name: 'GitHub',
     link: 'https://github.com',
     media: {
       src: github_white.src,
       alt: 'GitHub',
     },
   },
   {
+    name: 'Instagram',
     link: 'https://instagram.com',
     media: {
       src: instagram_white.src,
       alt: 'Instagram',
     },
   },
   {
+    name: 'LinkedIn',
     link: 'https://linkedin.com',
     media: {
       src: linkedin_white.src,
       alt: 'LinkedIn',
     },
   },
   {
+    name: 'Linktree',
     link: 'https://linktr.ee',
     media: {
       src: linktree_white.src,
       alt: 'Linktree',
     },
   },
   {
+    name: 'Email',
     link: 'mailto:[email protected]',
     media: {
       src: email_white.src,
       alt: 'Email',
     },
   },
   {
+    name: 'Discord',
     link: 'https://discord.com',
     media: {
       src: discord_white.src,
       alt: 'Discord',
     },
   },
   {
+    name: 'Documentation',
     link: 'https://docs.com',
     media: {
       src: docs_white.src,
       alt: 'Documentation',
     },
   },
   {
+    name: 'Figma',
     link: 'https://figma.com',
     media: {
       src: figma_white.src,
@@ -114,6 +134,7 @@ export const Default: Story = {
       { name: 'FAQ', link: '/#faq' },
     ],
     logo: logo.src,
+    banner,
     socials,
     hamburger: {
       src: hamburger.src,

diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx
@@ -12,8 +12,9 @@ import {
 } from '@cuhacking/shared/ui/navigation-menu'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { Link } from '@remix-run/react'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { ClientOnly } from 'remix-utils/client-only'
+
 import { Socials } from '../../../socials'
 import { NavItem } from './nav-item'
 import { MobileNavItem } from './nav-item-mobile'
@@ -29,6 +30,11 @@ interface NavbarProps {
     link: string
   }[]
   logo: string
+  banner: {
+    name: string
+    link: string
+    media: Media
+  }
   socials: {
     name: string
     link: string
@@ -59,6 +65,7 @@ export function NavbarPresenter({
           className="transition-transform duration-300 hover:scale-[1.2] relative z-[60]"
         />
       </Link>
+
       <NavigationMenu className="hidden md:block">
         <NavigationMenuList className="gap-x-10">
           {links.map(({ name, link }, index) => (
@@ -68,6 +75,7 @@ export function NavbarPresenter({
           ))}
         </NavigationMenuList>
       </NavigationMenu>
+
       <ClientOnly fallback={null}>
         {() => (
           <Drawer direction="right" open={isOpen}>

diff --git a/libs/website/ui/introduction/welcome/welcome.section.tsx b/libs/website/ui/introduction/welcome/welcome.section.tsx
@@ -1,4 +1,6 @@
 import BgKeyboard from '@website/assets/ui/introduction/bg-keyboard-1.webp'
+import { Banner } from '@website/shared/ui/banner'
+import { NAVBAR_CONSTANTS } from '@website/shared/ui/navigation'
 import { SplineComponent } from '@website/shared/ui/spline/spline-component.client'
 import { ClientOnly } from 'remix-utils/client-only'
 import { WELCOME_CONSTANTS } from '../constants/welcome.constants'
@@ -7,11 +9,18 @@ import { Welcome } from './welcome'
 export function WelcomeSection() {
   return (
     <section className="relative flex justify-center w-full mx-auto lg:mx-0">
+      <div className="absolute -top-2 -right-2 lg:top-0 lg:right-72 z-50 max-w-[100px] md:max-w-[120px] lg:max-w-[130px]">
+        <Banner
+          banner={NAVBAR_CONSTANTS.MLH_BANNER}
+          className="scale-[0.5] md:scale-[0.6] lg:scale-[0.9] transform-gpu"
+        />
+      </div>
+
       <ClientOnly>
         {() => (
           <SplineComponent
             imgSrc={BgKeyboard}
-            className="absolute -bottom-24 md:bottom-8 scale:-[0.85] lg:left-0 lg:top-0 lg:scale-[1.2]"
+            className="absolute -bottom-24 md:bottom-8 lg:left-0 lg:top-0 scale-[0.85] lg:scale-[1.2]"
             link={WELCOME_CONSTANTS.SPLINE_LINK}
           />
         )}