feat(ui/portal): create singin page components

.storybook/main.ts

@@ -15,6 +15,7 @@ export default {
     '../libs/website/feature/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../libs/website/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../libs/website/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+    '../libs/portal/features/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
   ],
   staticDirs: [
     // './public',
@@ -111,6 +112,7 @@ export default {
         }),
       ]
     }
+
     return config
   },
 } satisfies StorybookConfig

apps/portal/app/routes/_index.tsx

@@ -1,22 +1,12 @@
-import { useLoaderData } from '@remix-run/react'
-
-export async function loader() {
-  const response = await fetch('http://localhost:3001/social-links')
-  const { docs } = await response.json()
-
-  const links = docs.map(link => link.platform || link.text)
-  return Response.json(links)
-}
-
 export default function Index() {
-  const links = useLoaderData()
+  const links = ['github']
 
   return (
     <div>
       <h1>Social Links</h1>
       <ul>
-        {links.map((text, index) => (
-          <li key={index}>{text}</li>
+        {links.map(text => (
+          <li key={text}>{text}</li>
         ))}
       </ul>
     </div>

libs/portal/features/sign-in/index.ts

@@ -0,0 +1 @@
+export { SignInCallToAction } from './ui/call-to-action'

libs/portal/features/sign-in/ui/call-to-action.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SignInCallToAction } from './call-to-action'
+
+const meta = {
+  title: '🌀 Portal/Signin/Call To Action',
+  component: SignInCallToAction,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof SignInCallToAction>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

libs/portal/features/sign-in/ui/call-to-action.tsx

@@ -0,0 +1,31 @@
+import github_black from '@cuhacking/shared/assets/icons/socials/github-black-1.svg'
+import { Button } from '@cuhacking/shared/ui/button'
+import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
+
+export function SignInCallToAction() {
+  return (
+    <GlassmorphicCard
+      className="w-full flex flex-col items-center gap-5 p-3"
+      aria-labelledby="cta-title"
+    >
+      <header className="flex flex-col gap-y-1 items-center">
+        <h1 id="cta-title" className="text-4xl font-bold">WE HOPE TO</h1>
+        <h2
+          className="text-transparent bg-greendiant bg-clip-text font-extrabold text-5xl"
+          aria-label="cuHacking brand name"
+        >
+          cuHacking
+        </h2>
+      </header>
+
+      <Button
+        variant="primary"
+        className="flex items-center gap-x-3 px-4"
+        aria-label="Login with GitHub"
+      >
+        <img src={github_black} alt="GitHub logo" className="h-5 w-5" />
+        <span>Login</span>
+      </Button>
+    </GlassmorphicCard>
+  )
+}

libs/portal/pages/signin/index.tsx

@@ -0,0 +1,18 @@
+import dashboard_background from '@cuhacking/portal/assets/backgrounds/dashboard-bg-1.webp'
+import { SignInCallToAction } from '@cuhacking/portal/features/sign-in'
+
+export function Signin() {
+  return (
+    <section className="max-w-screen-xl mx-auto relative min-h-screen flex items-center justify-center">
+      <main className="relative z-10">
+        <SignInCallToAction />
+      </main>
+      <img
+        src={dashboard_background}
+        alt=""
+        aria-hidden="true"
+        className="absolute top-0 left-0 w-full h-full object-cover z-[-1]"
+      />
+    </section>
+  )
+}

libs/portal/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "libs/portal",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/portal",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

libs/portal/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {},
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "include": ["**/*.ts", "**/*.tsx"]
+}

libs/portal/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "incremental": true,
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

libs/shared/ui/button/button.tsx

@@ -19,6 +19,7 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline decoration-foreground',
+        primary: 'text-primary-foreground bg-primary hover:font-bold hover:bg-primary/90',
       },
       size: {
         default: 'h-10 px-4 py-2',

tsconfig.base.json

@@ -17,6 +17,8 @@
       "@cuhacking/docs/*": ["libs/docs/*"],
       "@cuhacking/shared": ["libs/shared/index.ts"],
       "@cuhacking/shared/*": ["libs/shared/*"],
+      "@cuhacking/portal/": ["libs/portal/index.ts"],
+      "@cuhacking/portal/*": ["libs/portal/*"],
       "@magic-ui": ["libs/external/magic-ui/index.ts"],
       "@magic-ui/*": ["libs/external/magic-ui/*"],
       "@payload-config": ["apps/cms/src/payload.config.ts"],