Login

1"use client";23import { Button } from "@/components/ui/button";4import { Checkbox } from "@/components/ui/checkbox";5import { Input } from "@/components/ui/input";6import { Label } from "@/components/ui/label";7import { cn } from "@/lib/utils";89type Login01Props = {10  className?: string;11};1213export function Login01({ className }: Login01Props) {14  return (15    <section className={cn("@container w-full bg-background", className)}>16      <div className="mx-auto w-full max-w-sm px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">17        <div className="text-center">18          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">19            Sign in20          </h2>21          <p className="mt-2 text-sm tracking-wide text-muted-foreground">22            Welcome back — enter your details to continue.23          </p>24        </div>2526        <form27          className="mt-8 flex flex-col gap-4"28          onSubmit={(event) => event.preventDefault()}29        >30          <div className="flex flex-col gap-1.5">31            <Label htmlFor="login-01-email">Email</Label>32            <Input33              id="login-01-email"34              name="email"35              type="email"36              autoComplete="email"37              placeholder="maya@northline.com"38              className="border-0 bg-muted"39            />40          </div>41          <div className="flex flex-col gap-1.5">42            <div className="flex items-center justify-between gap-2">43              <Label htmlFor="login-01-password">Password</Label>44              <a45                href="#"46                className="text-xs tracking-wide text-muted-foreground"47              >48                Forgot password?49              </a>50            </div>51            <Input52              id="login-01-password"53              name="password"54              type="password"55              autoComplete="current-password"56              placeholder="••••••••"57              className="border-0 bg-muted"58            />59          </div>6061          <div className="flex items-center gap-2">62            <Checkbox id="login-01-remember" />63            <Label htmlFor="login-01-remember" className="font-normal">64              Remember me65            </Label>66          </div>6768          <Button type="submit" size="sm" className="w-full">69            Sign in70          </Button>71        </form>7273        <p className="mt-6 text-center text-sm tracking-wide text-muted-foreground">74          Don’t have an account?{" "}75          <a href="#" className="text-foreground">76            Create one77          </a>78        </p>79      </div>80    </section>81  );82}

1"use client";23import { Button } from "@/components/ui/button";4import { Input } from "@/components/ui/input";5import { Label } from "@/components/ui/label";6import { Separator } from "@/components/ui/separator";7import { cn } from "@/lib/utils";89type Login02Props = {10  className?: string;11};1213function GoogleIcon({ className }: { className?: string }) {14  return (15    <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>16      <path17        fill="currentColor"18        d="M21.6 12.23c0-.68-.06-1.33-.17-1.96H12v3.71h5.38a4.6 4.6 0 0 1-2 3.02v2.5h3.24c1.9-1.75 2.98-4.33 2.98-7.27Z"19      />20      <path21        fill="currentColor"22        d="M12 22c2.7 0 4.96-.9 6.62-2.44l-3.24-2.5c-.9.6-2.05.96-3.38.96-2.6 0-4.8-1.76-5.59-4.12H3.07v2.58A10 10 0 0 0 12 22Z"23      />24      <path25        fill="currentColor"26        d="M6.41 13.9A6 6 0 0 1 6.1 12c0-.66.11-1.3.3-1.9V7.52H3.07A10 10 0 0 0 2 12c0 1.61.39 3.14 1.07 4.48l3.34-2.58Z"27      />28      <path29        fill="currentColor"30        d="M12 5.98c1.47 0 2.79.5 3.82 1.5l2.86-2.86A9.96 9.96 0 0 0 12 2a10 10 0 0 0-8.93 5.52l3.34 2.58C7.2 7.74 9.4 5.98 12 5.98Z"31      />32    </svg>33  );34}3536function GitHubIcon({ className }: { className?: string }) {37  return (38    <svg39      viewBox="0 0 24 24"40      fill="currentColor"41      aria-hidden="true"42      className={className}43    >44      <path d="M12 2C6.48 2 2 6.58 2 12.26c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.48 0-.24-.01-.87-.01-1.7-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.31.1-2.73 0 0 .84-.27 2.75 1.05A9.3 9.3 0 0 1 12 6.8c.85 0 1.71.12 2.51.35 1.9-1.32 2.74-1.05 2.74-1.05.55 1.42.2 2.47.1 2.73.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.8-4.57 5.06.36.32.68.94.68 1.9 0 1.37-.01 2.47-.01 2.81 0 .26.18.59.69.48A10.03 10.03 0 0 0 22 12.26C22 6.58 17.52 2 12 2Z" />45    </svg>46  );47}4849export function Login02({ className }: Login02Props) {50  return (51    <section className={cn("@container w-full bg-background", className)}>52      <div className="mx-auto w-full max-w-sm px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">53        <div className="text-center">54          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">55            Welcome back56          </h2>57          <p className="mt-2 text-sm tracking-wide text-muted-foreground">58            Sign in with your email or a provider.59          </p>60        </div>6162        <form63          className="mt-8 flex flex-col gap-4"64          onSubmit={(event) => event.preventDefault()}65        >66          <div className="flex flex-col gap-1.5">67            <Label htmlFor="login-02-email">Email</Label>68            <Input69              id="login-02-email"70              name="email"71              type="email"72              autoComplete="email"73              placeholder="maya@northline.com"74              className="border-0 bg-muted"75            />76          </div>77          <div className="flex flex-col gap-1.5">78            <Label htmlFor="login-02-password">Password</Label>79            <Input80              id="login-02-password"81              name="password"82              type="password"83              autoComplete="current-password"84              placeholder="••••••••"85              className="border-0 bg-muted"86            />87          </div>88          <Button type="submit" size="sm" className="w-full">89            Sign in90          </Button>91        </form>9293        <div className="my-6 flex items-center gap-3">94          <Separator className="flex-1" />95          <span className="text-xs tracking-wide text-muted-foreground">or</span>96          <Separator className="flex-1" />97        </div>9899        <div className="flex flex-col gap-2">100          <Button type="button" size="sm" variant="secondary" className="w-full">101            <GoogleIcon className="size-4" />102            Continue with Google103          </Button>104          <Button type="button" size="sm" variant="secondary" className="w-full">105            <GitHubIcon className="size-4" />106            Continue with GitHub107          </Button>108        </div>109      </div>110    </section>111  );112}

1"use client";23import { Logo } from "@/components/brand";4import { Button } from "@/components/ui/button";5import { Input } from "@/components/ui/input";6import { Label } from "@/components/ui/label";7import { cn } from "@/lib/utils";89type Login03Props = {10  className?: string;11};1213export function Login03({ className }: Login03Props) {14  return (15    <section className={cn("@container w-full bg-background", className)}>16      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">17        <div18          data-slot="block-split"19          className="grid w-full overflow-hidden rounded-xl bg-muted @[40rem]:grid-cols-2"20        >21          <div className="flex flex-col justify-between px-6 py-10 @[32rem]:px-8 @[32rem]:py-12">22            <div>23              <Logo className="block h-4 w-auto text-foreground" />24              <h2 className="mt-6 text-2xl font-medium tracking-wide text-foreground @[32rem]:text-3xl">25                Build pages faster with ready blocks26              </h2>27              <p className="mt-3 max-w-sm text-sm tracking-wide text-muted-foreground">28                Sign in to your workspace and pick up where you left off.29              </p>30            </div>31            <p className="mt-10 text-xs tracking-wide text-muted-foreground @[40rem]:mt-0">32              Trusted by teams shipping product UI every week.33            </p>34          </div>3536          <div className="bg-background px-6 py-10 @[32rem]:px-8 @[32rem]:py-12">37            <h3 className="text-lg font-medium tracking-wide text-foreground">38              Sign in39            </h3>40            <p className="mt-1 text-sm tracking-wide text-muted-foreground">41              Use your work email to continue.42            </p>4344            <form45              className="mt-6 flex flex-col gap-4"46              onSubmit={(event) => event.preventDefault()}47            >48              <div className="flex flex-col gap-1.5">49                <Label htmlFor="login-03-email">Email</Label>50                <Input51                  id="login-03-email"52                  name="email"53                  type="email"54                  autoComplete="email"55                  placeholder="maya@northline.com"56                  className="border-0 bg-muted"57                />58              </div>59              <div className="flex flex-col gap-1.5">60                <Label htmlFor="login-03-password">Password</Label>61                <Input62                  id="login-03-password"63                  name="password"64                  type="password"65                  autoComplete="current-password"66                  placeholder="••••••••"67                  className="border-0 bg-muted"68                />69              </div>70              <Button type="submit" size="sm" className="w-full">71                Continue72              </Button>73            </form>7475            <p className="mt-6 text-center text-sm tracking-wide text-muted-foreground">76              New here?{" "}77              <a href="#" className="text-foreground">78                Create account79              </a>80            </p>81          </div>82        </div>83      </div>84    </section>85  );86}