feat(libs/website/feature/introduction/mission): create mission section

libs/website/feature/introduction/ui/mission/mission.section.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ClientOnly } from 'remix-utils/client-only'
+import { MISSION_CONSTANTS } from '../../constants/mission.constants'
+import { Mission } from './mission'
+import { SplineMission } from './spline-mission.client'
+
+export function MissionSection() {
+  return (
+    <section id="#about" className="relative flex justify-center w-full">
+      <ClientOnly>
+        {() => (
+          <SplineMission />
+        )}
+      </ClientOnly>
+      <main className="max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14">
+        <div id="about" className="relative min-h-[160vh] lg:min-h-screen w-full">
+          <Mission logo={MISSION_CONSTANTS.LOGO} />
+        </div>
+      </main>
+    </section>
+  )
+}

libs/website/feature/introduction/ui/mission/mission.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import asciiLogo from '@website/assets/ascii-art/logos/cuhacking-1.svg'
+import { Mission } from './mission'
+
+const meta: Meta<typeof Mission> = {
+  title: 'cuHacking Design System/Mission',
+  component: Mission,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    logo: {
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Mission>
+
+export const DefaultMission: Story = { args: { logo: asciiLogo.src } }

libs/website/feature/introduction/ui/mission/mission.tsx

@@ -0,0 +1,52 @@
+import { GlassmorphicCard } from '@cuhacking/shared/ui/src/cuHacking/components/glassmorphic-card'
+import { Separator } from '@cuhacking/shared/ui/src/cuHacking/components/separator'
+import { TerminalText } from '@cuhacking/shared/ui/src/cuHacking/components/terminal-text'
+import React from 'react'
+
+interface MissionProps {
+  logo: string
+}
+
+// TODO: Refactor so that it takes in props for text
+export function Mission({ logo }: MissionProps) {
+  return (
+
+    <GlassmorphicCard className="py-10 px-3.5 sm:px-12 sm:py-16">
+      <section className="flex flex-col items-center h-full gap-10 lg:flex-row">
+        <div>
+          <img src={logo} alt="cuHacking Logo" />
+        </div>
+        <Separator orientation="vertical" className="self-stretch hidden h-auto lg:block" />
+        <div className="flex flex-col gap-y-1">
+          <h2 className="text-3xl">OUR MISSION</h2>
+          <div>
+            <TerminalText className="text-base">
+              <p>
+                cuHacking is a 36-hour hackathon that
+                <span className="text-primary"> ✨sparks creativity</span>
+                {' '}
+                and problem-solving among 🍁Ottawa's brightest minds.
+              </p>
+
+            </TerminalText>
+            <TerminalText className="text-base">
+              <p>
+                {' '}
+                A catalyst for
+                <span className="text-orange-400"> innovation</span>
+                ,
+                <span className="text-blue-400"> collaboration</span>
+                , and
+                <span className="text-lime-400"> learning</span>
+                , providing an inclusive space for passionate minds to create and grow together.
+
+              </p>
+
+            </TerminalText>
+          </div>
+        </div>
+      </section>
+    </GlassmorphicCard>
+
+  )
+}

libs/website/feature/introduction/ui/mission/spline-mission.client.tsx

@@ -0,0 +1,14 @@
+import Spline from '@splinetool/react-spline'
+import React from 'react'
+
+export function SplineMission() {
+  return (
+    <div className="overflow-x-hidden">
+      <Spline
+        className="absolute -bottom-[15vh] lg:-bottom-[5vh] left-0 scale-1 md:scale-[1.2]"
+        scene="https://prod.spline.design/TGlqj05806lq8PRV/scene.splinecode"
+      />
+    </div>
+
+  )
+}