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

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

@@ -0,0 +1,11 @@
+import Spline from '@splinetool/react-spline'
+import React from 'react'
+
+export function SplineWelcome() {
+  return (
+    <Spline
+      className="absolute top-0 lg:scale-[1.2]"
+      scene="https://prod.spline.design/nnjZJFW1wThAacUS/scene.splinecode"
+    />
+  )
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ClientOnly } from 'remix-utils/client-only'
+import { WELCOME_CONSTATNTS } from '../../constants/welcome.constants'
+import { SplineWelcome } from './spline-welcome.client'
+import { Welcome } from './welcome'
+
+export function WelcomeSection() {
+  return (
+    <section className="relative flex justify-center w-full mx-auto lg:mx-0">
+      <ClientOnly>
+        {() => (
+          <SplineWelcome />
+        )}
+      </ClientOnly>
+      <div className="w-full h-screen max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14">
+        <section className="w-full lg:w-3/5">
+          <Welcome socials={WELCOME_CONSTATNTS.SOCIALS} />
+        </section>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,69 @@
+import type { Media } from '@cuhacking/shared/types/media'
+import type { Meta, StoryObj } from '@storybook/react'
+import discord_green from '@cuhacking/shared/assets/icons/socials/discord-green-1.svg'
+import docs_green from '@cuhacking/shared/assets/icons/socials/docs-green-1.svg'
+import email_green from '@cuhacking/shared/assets/icons/socials/email-green-1.svg'
+import figma_green from '@cuhacking/shared/assets/icons/socials/figma-green-1.svg'
+import github_green from '@cuhacking/shared/assets/icons/socials/github-green-1.svg'
+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 { Welcome } from './welcome'
+
+const socials: { link: string, media: Media }[] = [
+  {
+    link: 'https://github.com',
+    media: { src: github_green.src, alt: 'GitHub' },
+  },
+  {
+    link: 'https://instagram.com',
+    media: { src: instagram_green.src, alt: 'Instagram' },
+  },
+  {
+    link: 'https://linkedin.com',
+    media: { src: linkedin_green.src, alt: 'LinkedIn' },
+  },
+  {
+    link: 'https://linktr.ee',
+    media: { src: linktree_green.src, alt: 'Linktree' },
+  },
+  {
+    link: 'mailto:[email protected]',
+    media: { src: email_green.src, alt: 'Email' },
+  },
+  {
+    link: 'https://discord.com',
+    media: { src: discord_green.src, alt: 'Discord' },
+  },
+  {
+    link: 'https://docs.com',
+    media: { src: docs_green.src, alt: 'Documentation' },
+  },
+  {
+    link: 'https://figma.com',
+    media: { src: figma_green.src, alt: 'Figma' },
+  },
+]
+
+const meta: Meta<typeof Welcome> = {
+  title: 'cuHacking Design System/Intro',
+  component: Welcome,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    socials,
+  },
+  argTypes: {
+    socials: {
+      control: { type: 'object' },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Welcome>
+
+export const Default: Story = {}

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

@@ -0,0 +1,41 @@
+import { GlassmorphicCard } from '@cuhacking/shared/ui/src/cuHacking/components/glassmorphic-card'
+import { TerminalText } from '@cuhacking/shared/ui/src/cuHacking/components/terminal-text'
+import { Socials } from '@website/shared/ui/socials'
+import React from 'react'
+
+interface Media {
+  src: string
+  alt: string
+}
+
+interface IntroProps {
+  socials: { link: string, media: Media }[]
+}
+// TODO: Refactor so that it takes in props that can communicate colours
+export function Welcome({ socials }: IntroProps) {
+  return (
+    <GlassmorphicCard
+      variant="default"
+      className="flex flex-col items-start p-3.5 sm:p-6 gap-y-2.5"
+    >
+      <h2 className="text-2xl font-bold text-center">HELLO, WORLD</h2>
+      <div>
+        <TerminalText className="text-base">
+          <p>
+            <span className="text-transparent bg-greendiant bg-clip-text">
+              cuHacking
+            </span>
+            is coming to you
+            <span className="text-transparent bg-greendiant bg-clip-text">
+              Mar. 14 - 16 2025 @ Carleton University
+            </span>
+          </p>
+        </TerminalText>
+        <TerminalText className="text-base">
+          <p>In the meantime, check out all the cool stuff we're working on!</p>
+        </TerminalText>
+        <Socials socials={socials} className="justify-center pt-5" />
+      </div>
+    </GlassmorphicCard>
+  )
+}