Authentication screens

import { Button, Card, Input, Label, Separator } from "@novix-ui/react";
import { Github, Mail } from "lucide-react";
 
export function SignInCard() {
  return (
    <Card className="w-full max-w-sm p-6">
      <header className="mb-5 text-center">
        <h1 className="text-base font-semibold">Welcome back</h1>
        <p className="mt-1 text-sm text-muted-foreground">Sign in to your Nova workspace.</p>
      </header>
 
      <div className="grid gap-2">
        <Button variant="outline" leadingIcon={<Github className="size-4" />}>Continue with GitHub</Button>
        <Button variant="outline" leadingIcon={<Mail className="size-4" />}>Continue with Email</Button>
      </div>
 
      <div className="my-5 flex items-center gap-3 text-xs text-muted-foreground">
        <Separator className="flex-1" /> or <Separator className="flex-1" />
      </div>
 
      <form className="space-y-3" onSubmit={handleSubmit}>
        <div className="space-y-1.5">
          <Label htmlFor="email" required>Email</Label>
          <Input id="email" type="email" autoComplete="email" />
        </div>
        <div className="space-y-1.5">
          <div className="flex items-center justify-between">
            <Label htmlFor="password" required>Password</Label>
            <a className="text-xs text-accent" href="/reset">Forgot?</a>
          </div>
          <Input id="password" type="password" autoComplete="current-password" />
        </div>
        <Button className="w-full">Sign in</Button>
      </form>
    </Card>
  );
}