From ac2227fdecd916fbb78ade703750ba7cb01593d8 Mon Sep 17 00:00:00 2001
From: luciano <info@zappacosta.eu>
Date: Wed, 29 Apr 2026 14:09:59 +0200
Subject: [PATCH] feat(web): adopt shadcn/ui primitives for auth surface

Add shadcn/ui plumbing:
- components.json (style: new-york, baseColor: slate, primary: green ~142 71%)
- src/lib/utils.ts with cn() helper (clsx + tailwind-merge)
- Tailwind config switched to CSS variables theming with primary/destructive/
  muted/card etc. tokens, dark-mode class, tailwindcss-animate plugin
- src/styles/globals.css declares :root and .dark variable palettes

Initial component set under src/components/ui:
- Button (cva variants: default/destructive/outline/secondary/ghost/link, asChild)
- Input
- Label (Radix Label)
- Card + CardHeader/Title/Description/Content/Footer

Refactor existing auth surface to the new primitives:
- sign-in / sign-up pages wrap form in a Card with Title/Description (+ footer
  for sign-up disclaimer)
- sign-in-form / sign-up-form use Input, Label, Button; tokens replace bespoke
  emerald/slate classes; divider and "Continua con Google" use the same Button
- Home page CTAs become Button asChild around Link; SignOutButton uses Button
- Hide-Google logic still works: enabledSocialProviders is now
  ReadonlyArray<SocialProvider> for ergonomic .includes() checks

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/components.json                      |  21 ++++++
 apps/web/package.json                         |  11 +++-
 .../src/app/[locale]/(auth)/sign-in/page.tsx  |  18 ++++--
 .../[locale]/(auth)/sign-in/sign-in-form.tsx  |  49 +++++++-------
 .../src/app/[locale]/(auth)/sign-up/page.tsx  |  29 +++++++--
 .../[locale]/(auth)/sign-up/sign-up-form.tsx  |  61 ++++++++----------
 apps/web/src/app/[locale]/page.tsx            |  25 +++----
 apps/web/src/app/[locale]/sign-out-button.tsx |  10 +--
 apps/web/src/components/ui/button.tsx         |  45 +++++++++++++
 apps/web/src/components/ui/card.tsx           |  54 ++++++++++++++++
 apps/web/src/components/ui/input.tsx          |  18 ++++++
 apps/web/src/components/ui/label.tsx          |  19 ++++++
 apps/web/src/lib/utils.ts                     |   6 ++
 apps/web/src/styles/globals.css               |  53 ++++++++++++++-
 apps/web/tailwind.config.ts                   |  49 +++++++++++++-
 packages/auth/src/server.ts                   |   6 +-
 pnpm-lock.yaml                                | Bin 217814 -> 223685 bytes
 17 files changed, 374 insertions(+), 100 deletions(-)
 create mode 100644 apps/web/components.json
 create mode 100644 apps/web/src/components/ui/button.tsx
 create mode 100644 apps/web/src/components/ui/card.tsx
 create mode 100644 apps/web/src/components/ui/input.tsx
 create mode 100644 apps/web/src/components/ui/label.tsx
 create mode 100644 apps/web/src/lib/utils.ts

diff --git a/apps/web/components.json b/apps/web/components.json
new file mode 100644
index 0000000..1d82d92
--- /dev/null
+++ b/apps/web/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index f7cfb42..8b1b9f1 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,14 +11,23 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@ketopath/auth": "workspace:*",
     "@ketopath/shared": "workspace:*",
     "@ketopath/ui": "workspace:*",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "better-auth": "^1.0.21",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.439.0",
     "next": "^14.2.5",
     "next-intl": "^3.17.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@ketopath/eslint-config": "workspace:*",
diff --git a/apps/web/src/app/[locale]/(auth)/sign-in/page.tsx b/apps/web/src/app/[locale]/(auth)/sign-in/page.tsx
index 1d18071..3d7ffa4 100644
--- a/apps/web/src/app/[locale]/(auth)/sign-in/page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/sign-in/page.tsx
@@ -2,6 +2,8 @@ import { enabledSocialProviders } from '@ketopath/auth';
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
 
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
 import { SignInForm } from './sign-in-form';
 
 export default function SignInPage({ params: { locale } }: { params: { locale: string } }) {
@@ -9,12 +11,16 @@ export default function SignInPage({ params: { locale } }: { params: { locale: s
   const t = useTranslations('Auth.SignIn');
 
   return (
-    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center gap-8 px-6 py-16">
-      <header className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
-        <p className="text-sm text-slate-600">{t('subtitle')}</p>
-      </header>
-      <SignInForm googleEnabled={enabledSocialProviders.includes('google')} />
+    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-6 py-16">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('subtitle')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SignInForm googleEnabled={enabledSocialProviders.includes('google')} />
+        </CardContent>
+      </Card>
     </main>
   );
 }
diff --git a/apps/web/src/app/[locale]/(auth)/sign-in/sign-in-form.tsx b/apps/web/src/app/[locale]/(auth)/sign-in/sign-in-form.tsx
index b3e42c2..b73e219 100644
--- a/apps/web/src/app/[locale]/(auth)/sign-in/sign-in-form.tsx
+++ b/apps/web/src/app/[locale]/(auth)/sign-in/sign-in-form.tsx
@@ -5,6 +5,9 @@ import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useState, type FormEvent } from 'react';
 
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { authClient } from '@/lib/auth-client';
 
 export function SignInForm({ googleEnabled }: { googleEnabled: boolean }) {
@@ -46,67 +49,59 @@ export function SignInForm({ googleEnabled }: { googleEnabled: boolean }) {
   return (
     <div className="space-y-6">
       <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-        <label className="block space-y-1">
-          <span className="text-sm font-medium text-slate-700">{t('emailLabel')}</span>
-          <input
+        <div className="space-y-1.5">
+          <Label htmlFor="email">{t('emailLabel')}</Label>
+          <Input
+            id="email"
             type="email"
             required
             autoComplete="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
           />
-        </label>
-        <label className="block space-y-1">
-          <span className="text-sm font-medium text-slate-700">{t('passwordLabel')}</span>
-          <input
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">{t('passwordLabel')}</Label>
+          <Input
+            id="password"
             type="password"
             required
             autoComplete="current-password"
             minLength={8}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
           />
-        </label>
+        </div>
         {error ? (
-          <p role="alert" className="text-sm text-red-600">
+          <p role="alert" className="text-destructive text-sm">
             {error}
           </p>
         ) : null}
-        <button
-          type="submit"
-          disabled={pending}
-          className="w-full rounded-md bg-emerald-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 disabled:opacity-60"
-        >
+        <Button type="submit" disabled={pending} className="w-full">
           {pending ? t('submitting') : t('submit')}
-        </button>
+        </Button>
       </form>
       {googleEnabled ? (
         <>
           <div className="relative">
             <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-slate-200" />
+              <div className="border-border w-full border-t" />
             </div>
             <div className="relative flex justify-center">
-              <span className="bg-white px-2 text-xs uppercase tracking-wider text-slate-500">
+              <span className="bg-background text-muted-foreground px-2 text-xs uppercase tracking-wider">
                 {t('or')}
               </span>
             </div>
           </div>
-          <button
-            type="button"
-            onClick={handleGoogle}
-            className="w-full rounded-md border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50"
-          >
+          <Button type="button" variant="outline" onClick={handleGoogle} className="w-full">
             {t('google')}
-          </button>
+          </Button>
         </>
       ) : null}
-      <p className="text-center text-sm text-slate-600">
+      <p className="text-muted-foreground text-center text-sm">
         {t.rich('noAccount', {
           link: (chunks) => (
-            <Link href="/sign-up" className="font-medium text-emerald-700 hover:underline">
+            <Link href="/sign-up" className="text-primary font-medium hover:underline">
               {chunks}
             </Link>
           ),
diff --git a/apps/web/src/app/[locale]/(auth)/sign-up/page.tsx b/apps/web/src/app/[locale]/(auth)/sign-up/page.tsx
index 0db8d16..68e977d 100644
--- a/apps/web/src/app/[locale]/(auth)/sign-up/page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/sign-up/page.tsx
@@ -2,6 +2,15 @@ import { enabledSocialProviders } from '@ketopath/auth';
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
 import { SignUpForm } from './sign-up-form';
 
 export default function SignUpPage({ params: { locale } }: { params: { locale: string } }) {
@@ -9,13 +18,19 @@ export default function SignUpPage({ params: { locale } }: { params: { locale: s
   const t = useTranslations('Auth.SignUp');
 
   return (
-    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center gap-8 px-6 py-16">
-      <header className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
-        <p className="text-sm text-slate-600">{t('subtitle')}</p>
-      </header>
-      <SignUpForm googleEnabled={enabledSocialProviders.includes('google')} />
-      <p className="text-xs text-slate-500">{t('disclaimer')}</p>
+    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-6 py-16">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('subtitle')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SignUpForm googleEnabled={enabledSocialProviders.includes('google')} />
+        </CardContent>
+        <CardFooter>
+          <p className="text-muted-foreground text-xs">{t('disclaimer')}</p>
+        </CardFooter>
+      </Card>
     </main>
   );
 }
diff --git a/apps/web/src/app/[locale]/(auth)/sign-up/sign-up-form.tsx b/apps/web/src/app/[locale]/(auth)/sign-up/sign-up-form.tsx
index 14afdbb..75bd5b2 100644
--- a/apps/web/src/app/[locale]/(auth)/sign-up/sign-up-form.tsx
+++ b/apps/web/src/app/[locale]/(auth)/sign-up/sign-up-form.tsx
@@ -5,6 +5,9 @@ import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useState, type FormEvent } from 'react';
 
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { authClient } from '@/lib/auth-client';
 
 export function SignUpForm({ googleEnabled }: { googleEnabled: boolean }) {
@@ -47,79 +50,71 @@ export function SignUpForm({ googleEnabled }: { googleEnabled: boolean }) {
   return (
     <div className="space-y-6">
       <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-        <label className="block space-y-1">
-          <span className="text-sm font-medium text-slate-700">{t('nameLabel')}</span>
-          <input
+        <div className="space-y-1.5">
+          <Label htmlFor="name">{t('nameLabel')}</Label>
+          <Input
+            id="name"
             type="text"
             required
             autoComplete="name"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
           />
-        </label>
-        <label className="block space-y-1">
-          <span className="text-sm font-medium text-slate-700">{t('emailLabel')}</span>
-          <input
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="email">{t('emailLabel')}</Label>
+          <Input
+            id="email"
             type="email"
             required
             autoComplete="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
           />
-        </label>
-        <label className="block space-y-1">
-          <span className="text-sm font-medium text-slate-700">{t('passwordLabel')}</span>
-          <input
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">{t('passwordLabel')}</Label>
+          <Input
+            id="password"
             type="password"
             required
             autoComplete="new-password"
             minLength={8}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
           />
-          <span className="block text-xs text-slate-500">{t('passwordHint')}</span>
-        </label>
+          <p className="text-muted-foreground text-xs">{t('passwordHint')}</p>
+        </div>
         {error ? (
-          <p role="alert" className="text-sm text-red-600">
+          <p role="alert" className="text-destructive text-sm">
             {error}
           </p>
         ) : null}
-        <button
-          type="submit"
-          disabled={pending}
-          className="w-full rounded-md bg-emerald-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 disabled:opacity-60"
-        >
+        <Button type="submit" disabled={pending} className="w-full">
           {pending ? t('submitting') : t('submit')}
-        </button>
+        </Button>
       </form>
       {googleEnabled ? (
         <>
           <div className="relative">
             <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-slate-200" />
+              <div className="border-border w-full border-t" />
             </div>
             <div className="relative flex justify-center">
-              <span className="bg-white px-2 text-xs uppercase tracking-wider text-slate-500">
+              <span className="bg-background text-muted-foreground px-2 text-xs uppercase tracking-wider">
                 {t('or')}
               </span>
             </div>
           </div>
-          <button
-            type="button"
-            onClick={handleGoogle}
-            className="w-full rounded-md border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50"
-          >
+          <Button type="button" variant="outline" onClick={handleGoogle} className="w-full">
             {t('google')}
-          </button>
+          </Button>
         </>
       ) : null}
-      <p className="text-center text-sm text-slate-600">
+      <p className="text-muted-foreground text-center text-sm">
         {t.rich('haveAccount', {
           link: (chunks) => (
-            <Link href="/sign-in" className="font-medium text-emerald-700 hover:underline">
+            <Link href="/sign-in" className="text-primary font-medium hover:underline">
               {chunks}
             </Link>
           ),
diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index ea1e4a8..09a9261 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
 
+import { Button } from '@/components/ui/button';
 import { getServerSession } from '@/lib/auth';
 
 import { SignOutButton } from './sign-out-button';
@@ -19,29 +20,23 @@ function HomeContent({ userName }: { userName: string | null }) {
   return (
     <main className="mx-auto flex min-h-screen max-w-3xl flex-col items-start justify-center gap-6 px-6 py-16">
       <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{t('title')}</h1>
-      <p className="text-lg text-slate-600">{t('tagline')}</p>
+      <p className="text-muted-foreground text-lg">{t('tagline')}</p>
       {userName ? (
         <div className="flex flex-wrap items-center gap-3">
-          <span className="text-sm text-slate-700">{t('signedInAs', { name: userName })}</span>
+          <span className="text-foreground text-sm">{t('signedInAs', { name: userName })}</span>
           <SignOutButton label={t('signOut')} />
         </div>
       ) : (
         <div className="flex flex-wrap gap-3">
-          <Link
-            href="/sign-up"
-            className="rounded-md bg-emerald-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-          >
-            {t('ctaPrimary')}
-          </Link>
-          <Link
-            href="/sign-in"
-            className="rounded-md border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400"
-          >
-            {t('ctaSecondary')}
-          </Link>
+          <Button asChild>
+            <Link href="/sign-up">{t('ctaPrimary')}</Link>
+          </Button>
+          <Button asChild variant="outline">
+            <Link href="/sign-in">{t('ctaSecondary')}</Link>
+          </Button>
         </div>
       )}
-      <p className="mt-8 text-xs text-slate-500">{t('disclaimer')}</p>
+      <p className="text-muted-foreground mt-8 text-xs">{t('disclaimer')}</p>
     </main>
   );
 }
diff --git a/apps/web/src/app/[locale]/sign-out-button.tsx b/apps/web/src/app/[locale]/sign-out-button.tsx
index 834f23e..3d9d372 100644
--- a/apps/web/src/app/[locale]/sign-out-button.tsx
+++ b/apps/web/src/app/[locale]/sign-out-button.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
+import { Button } from '@/components/ui/button';
 import { authClient } from '@/lib/auth-client';
 
 export function SignOutButton({ label }: { label: string }) {
@@ -17,13 +18,8 @@ export function SignOutButton({ label }: { label: string }) {
   }
 
   return (
-    <button
-      type="button"
-      onClick={handleClick}
-      disabled={pending}
-      className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 disabled:opacity-60"
-    >
+    <Button type="button" variant="outline" size="sm" onClick={handleClick} disabled={pending}>
       {label}
-    </button>
+    </Button>
   );
 }
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..864d392
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,45 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: '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',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-6',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { buttonVariants };
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
new file mode 100644
index 0000000..01cfc30
--- /dev/null
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,54 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = 'Card';
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..59a9312
--- /dev/null
+++ b/apps/web/src/components/ui/input.tsx
@@ -0,0 +1,18 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      ref={ref}
+      className={cn(
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Input.displayName = 'Input';
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
new file mode 100644
index 0000000..4127c99
--- /dev/null
+++ b/apps/web/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+export const Label = forwardRef<
+  ElementRef<typeof LabelPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 0000000..a7c2663
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 2857b71..4f5d77c 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -3,7 +3,58 @@
 @tailwind utilities;
 
 @layer base {
-  html {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 142 71% 32%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 142 71% 32%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 142 71% 45%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 142 71% 45%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
     -webkit-text-size-adjust: 100%;
   }
 }
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 68d0c5a..7777fc0 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,15 +1,62 @@
 import type { Config } from 'tailwindcss';
+import animate from 'tailwindcss-animate';
 
 const config: Config = {
+  darkMode: ['class'],
   content: ['./src/**/*.{ts,tsx}', '../../packages/ui/src/**/*.{ts,tsx}'],
   theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: { '2xl': '1400px' },
+    },
     extend: {
       fontFamily: {
         sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
       },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
     },
   },
-  plugins: [],
+  plugins: [animate],
 };
 
 export default config;
diff --git a/packages/auth/src/server.ts b/packages/auth/src/server.ts
index 38b2ff9..67c3e4b 100644
--- a/packages/auth/src/server.ts
+++ b/packages/auth/src/server.ts
@@ -8,9 +8,11 @@ const env = readAuthEnv();
 
 const isGoogleConfigured = Boolean(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET);
 
-export const enabledSocialProviders = isGoogleConfigured ? (['google'] as const) : ([] as const);
+export type SocialProvider = 'google';
 
-export type SocialProvider = (typeof enabledSocialProviders)[number];
+export const enabledSocialProviders: ReadonlyArray<SocialProvider> = isGoogleConfigured
+  ? ['google']
+  : [];
 
 const googleProvider = isGoogleConfigured
   ? {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ef8663a52d54815155edd7cbe3055c6b9f35274..c0ef98bb3369e67e1a77022f5509c4f28a5faa28 100644
GIT binary patch
delta 3741
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
GO#cg!#G?=Z

delta 553
zcmX?lnfKaK-VIN<C;N+YZcgHnVBEZcPmyu+Hi3PN6N@E5qLck)Jti+;=b2p2Rlm7G
zBqL~YWhU?R2ltqGre9BD;+t%xFTW|nUUvG6GA7>5d%AyQOux2)No2b37DoBa?O*pY
zPM^1tNn*OSE|9DAqj$#kDH9phy|-_^%b0Aoy-k$qzc!1Bp0VEajh;+~+xIv!ZDEA)
z8J98nOxN^eYJy9rPClR}GM(F*DHX25cY3ue(?qz6kjVjREYq{xn6|-Hpqnv0-h-(E
zm+U>bgx_@ArA)@t#k`U1hnp@leM24-=j42C&gm*XOdH^uGNvDLMp2)j%`sU=*M53c
zJCoS<YCooZ!qYF`W0Kqs47cyx-~gMvr(15jd<j#w4#X5-D7a0(wt%SyZm7@n$R$jo
zK(F&n-?@k>7cLI=I{)-(i<l<B#UN@yUgVuVYcY~yumnOK*mwKD+O`A3xsMAJW!ts`
fBdQ{1Ixv2uw%778&yw4orpr7-Zu<%!W?5MPlc>2n