diff --git a/libs/shared/assets/logos/sponsors/mlh-banner.svg b/libs/shared/assets/logos/sponsors/mlh-banner.svg new file mode 100644 index 00000000..d6c1f15b --- /dev/null +++ b/libs/shared/assets/logos/sponsors/mlh-banner.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/website/shared/ui/banner/banner.stories.tsx b/libs/website/shared/ui/banner/banner.stories.tsx new file mode 100644 index 00000000..ecdb07c9 --- /dev/null +++ b/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 = { + 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 + +// 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', + }, + }, +} diff --git a/libs/website/shared/ui/banner/banner.tsx b/libs/website/shared/ui/banner/banner.tsx new file mode 100644 index 00000000..d089b7ab --- /dev/null +++ b/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 ( +
+ + {banner.media.alt} + +
+ ) +} diff --git a/libs/website/shared/ui/banner/index.ts b/libs/website/shared/ui/banner/index.ts new file mode 100644 index 00000000..dbe53545 --- /dev/null +++ b/libs/website/shared/ui/banner/index.ts @@ -0,0 +1 @@ +export { Banner } from './banner' diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.container.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.container.tsx index a3b97d88..99656f24 100644 --- 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 index c446026e..98fc4580 100644 --- a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx +++ b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx @@ -44,6 +44,7 @@ const meta = { const socials = [ { + name: 'GitHub', link: 'https://github.com', media: { src: github_white.src, @@ -51,6 +52,7 @@ const socials = [ }, }, { + name: 'Instagram', link: 'https://instagram.com', media: { src: instagram_white.src, @@ -58,6 +60,7 @@ const socials = [ }, }, { + name: 'LinkedIn', link: 'https://linkedin.com', media: { src: linkedin_white.src, @@ -65,6 +68,7 @@ const socials = [ }, }, { + name: 'Linktree', link: 'https://linktr.ee', media: { src: linktree_white.src, @@ -72,6 +76,7 @@ const socials = [ }, }, { + name: 'Email', link: 'mailto:example@email.com', media: { src: email_white.src, @@ -79,6 +84,7 @@ const socials = [ }, }, { + name: 'Discord', link: 'https://discord.com', media: { src: discord_white.src, @@ -86,6 +92,7 @@ const socials = [ }, }, { + name: 'Documentation', link: 'https://docs.com', media: { src: docs_white.src, @@ -93,6 +100,7 @@ const socials = [ }, }, { + name: 'Figma', link: 'https://figma.com', media: { src: figma_white.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 index 021698b4..d3b8a104 100644 --- a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx +++ b/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]" /> + {links.map(({ name, link }, index) => ( @@ -68,6 +68,7 @@ export function NavbarPresenter({ ))} + {() => ( diff --git a/libs/website/shared/ui/socials/social.stories.tsx b/libs/website/shared/ui/socials/social.stories.tsx index c584b518..e80d2c8c 100644 --- a/libs/website/shared/ui/socials/social.stories.tsx +++ b/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:contact@cuhacking.ca', 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', }, ], }, diff --git a/libs/website/ui/introduction/constants/welcome.constants.ts b/libs/website/ui/introduction/constants/welcome.constants.ts index 6cac7c65..6fdec917 100644 --- a/libs/website/ui/introduction/constants/welcome.constants.ts +++ b/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', } diff --git a/libs/website/ui/introduction/welcome/welcome.section.tsx b/libs/website/ui/introduction/welcome/welcome.section.tsx index d7b99b56..3e9457fe 100644 --- 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 (
+
+ +
+ {() => ( )}