feat(website): add MLH banner to landing page

libs/website/shared/ui/banner/banner.stories.tsx

@@ -0,0 +1,50 @@
+import type { Media } from '@cuhacking/shared/types/media'
+import type { Meta, StoryObj } from '@storybook/react'
+import mlhBanner from '@cuhacking/shared/assets/logos/sponsors/mlh-banner.svg'
+
+import { createRemixStub } from '@remix-run/testing'
+import { Banner } from './banner'
+
+const meta: Meta<typeof Banner> = {
+  title: 'cuHacking Design System/Banner',
+  component: Banner,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (story) => {
+      const remixStub = createRemixStub([
+        {
+          path: '/*',
+          action: () => ({ redirect: '/' }),
+          loader: () => ({ redirect: '/' }),
+          Component: () => story(),
+        },
+      ])
+
+      return remixStub({ initialEntries: ['/'] })
+    },
+  ],
+  argTypes: {
+    banner: {
+      control: { type: 'object' },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Banner>
+
+// Adjusted story with img src handling
+export const Default: Story = {
+  args: {
+    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' } as Media,
+        name: 'MLH Banner',
+      },
+  },
+}

libs/website/shared/ui/banner/banner.tsx

@@ -0,0 +1,26 @@
+import type { Media } from '@cuhacking/shared/types/media'
+import { cn } from '@cuhacking/shared/utils/cn'
+import { Link } from '@remix-run/react'
+
+interface BannerProps {
+  banner: {
+    link: string
+    media: Media
+    name: string
+  }
+  className: string
+}
+// TODO: update social media props to incldue social media name --> aria-label improvement
+export function Banner({ banner, className }: BannerProps) {
+  return (
+    <div className={cn('flex flex-wrap gap-x-5 gap-y-3', className)}>
+      <Link
+        target="_blank"
+        to={banner.link}
+        aria-label={banner.name}
+      >
+        <img src={banner.media.src} alt={banner.media.alt} />
+      </Link>
+    </div>
+  )
+}

libs/website/shared/ui/banner/index.ts

@@ -0,0 +1 @@
+export { Banner } from './banner'

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
   }[]

libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx

@@ -44,55 +44,63 @@ const meta = {
 
 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,

libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx

@@ -22,7 +22,6 @@ interface Media {
   src: string
   alt: string
 }
-
 interface NavbarProps {
   links: {
     name: string
@@ -59,6 +58,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 +68,7 @@ export function NavbarPresenter({
           ))}
         </NavigationMenuList>
       </NavigationMenu>
+
       <ClientOnly fallback={null}>
         {() => (
           <Drawer direction="right" open={isOpen}>

libs/website/shared/ui/socials/social.stories.tsx

@@ -51,34 +51,42 @@ export const Default: Story = {
       {
         link: 'https://discord.com',
         media: { src: discord_green.src, alt: 'Discord' } as Media,
+        name: 'Discord',
       },
       {
         link: 'https://docs.cuhacking.ca',
         media: { src: docs_green.src, alt: 'Docs' } as Media,
+        name: 'Docs',
       },
       {
         link: 'mailto:[email protected]',
         media: { src: email_green.src, alt: 'Email' } as Media,
+        name: 'Mail',
       },
       {
         link: 'https://figma.com',
         media: { src: figma_green.src, alt: 'Figma' } as Media,
+        name: 'Figma',
       },
       {
         link: 'https://github.com/cuhacking',
         media: { src: github_green.src, alt: 'GitHub' } as Media,
+        name: 'GitHub',
       },
       {
         link: 'https://instagram.com/cuhacking',
         media: { src: instagram_green.src, alt: 'Instagram' } as Media,
+        name: 'Instagram',
       },
       {
         link: 'https://linkedin.com/company/cuhacking',
         media: { src: linkedin_green.src, alt: 'LinkedIn' } as Media,
+        name: 'LinkedIn',
       },
       {
         link: 'https://linktr.ee/cuhacking',
         media: { src: linktree_green.src, alt: 'Linktree' } as Media,
+        name: 'Linktree',
       },
     ],
   },

libs/website/ui/introduction/constants/welcome.constants.ts

@@ -7,6 +7,7 @@ import github_green from '@cuhacking/shared/assets/icons/socials/github-green-1.
 import instagram_green from '@cuhacking/shared/assets/icons/socials/instagram-green-1.svg'
 import linkedin_green from '@cuhacking/shared/assets/icons/socials/linkedin-green-1.svg'
 import linktree_green from '@cuhacking/shared/assets/icons/socials/linktree-green-1.svg'
+import mlhBanner from '@cuhacking/shared/assets/logos/sponsors/mlh-banner.svg'
 
 const socials: { link: string, name: string, media: Media }[] = [
   {
@@ -50,7 +51,17 @@ const socials: { link: string, name: string, media: Media }[] = [
     media: { src: linktree_green, alt: 'Linktree' },
   },
 ]
+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',
+    },
+  }
 export const WELCOME_CONSTANTS = {
   SOCIALS: socials,
+  mlhBanner: banner,
   SPLINE_LINK: 'https://prod.spline.design/a1qdk8yVQfNTh2jB/scene.splinecode',
 }

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}
           />
         )}