feat(libs/website/shared/ui/navigation/footer): create component

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

@@ -0,0 +1,27 @@
+import type { Media } from '@cuhacking/shared/types'
+import { Socials } from '@website/shared/ui/socials'
+import React from 'react'
+
+interface FooterProps {
+  logo: string
+  socials: {
+    link: string
+    media: Media
+  }[]
+}
+
+export function FooterPresenter({ logo, socials }: FooterProps) {
+  return (
+    <footer className="max-w-screen-xl px-4 mx-auto pt-5 pb-3.5 gap-y-6 flex flex-col lg:flex-row justify-center lg:justify-between">
+      <div className="flex flex-row items-center justify-center gap-2">
+        <a href="/" aria-label="Return to homepage">
+          <img src={logo} alt="cuHacking logo" />
+        </a>
+        <h2 className="text-transparent bg-greendiant bg-clip-text font-extrabold text-[34px]">
+          cuHacking
+        </h2>
+      </div>
+      <Socials socials={socials} className="justify-center" />
+    </footer>
+  )
+}

libs/website/shared/ui/navigation/footer/ui/footer.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import discord_white from '@cuhacking/shared/assets/icons/socials/discord-white-1.svg'
+import docs_white from '@cuhacking/shared/assets/icons/socials/docs-white-1.svg'
+import email_white from '@cuhacking/shared/assets/icons/socials/email-white-1.svg'
+import figma_white from '@cuhacking/shared/assets/icons/socials/figma-white-1.svg'
+import github_white from '@cuhacking/shared/assets/icons/socials/github-white-1.svg'
+import instagram_white from '@cuhacking/shared/assets/icons/socials/instagram-white-1.svg'
+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 { FooterPresenter } from './footer.presenter'
+
+const socials = [
+  {
+    link: 'https://discord.com/invite/your-discord',
+    media: {
+      src: discord_white.src,
+      alt: 'Discord',
+    },
+  },
+  {
+    link: 'https://docs.yourwebsite.com',
+    media: {
+      src: docs_white.src,
+      alt: 'Docs',
+    },
+  },
+  {
+    link: 'mailto:[email protected]',
+    media: {
+      src: email_white.src,
+      alt: 'Email',
+    },
+  },
+  {
+    link: 'https://figma.com/your-project',
+    media: {
+      src: figma_white.src,
+      alt: 'Figma',
+    },
+  },
+  {
+    link: 'https://github.com/your-org',
+    media: {
+      src: github_white.src,
+      alt: 'GitHub',
+    },
+  },
+  {
+    link: 'https://instagram.com/your-org',
+    media: {
+      src: instagram_white.src,
+      alt: 'Instagram',
+    },
+  },
+  {
+    link: 'https://linkedin.com/in/your-org',
+    media: {
+      src: linkedin_white.src,
+      alt: 'LinkedIn',
+    },
+  },
+  {
+    link: 'https://linktree.com/your-linktree',
+    media: {
+      src: linktree_white.src,
+      alt: 'Linktree',
+    },
+  },
+]
+
+const meta: Meta<typeof FooterPresenter> = {
+  title: 'cuHacking Design System/Footer',
+  component: FooterPresenter,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {
+    logo: {
+      control: { type: 'text' },
+      description: 'Logo image source URL',
+    },
+    socials: {
+      control: { type: 'object' },
+      description: 'Array of social media links with icons',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof FooterPresenter>
+
+export const DefaultFooter: Story = {
+  args: {
+    logo: cuHackingLogo.src,
+    socials,
+  },
+}