Forgot Password Three

1import { Button } from '@/components/ui/button'
2import { Input } from '@/components/ui/input'
3import { Label } from '@/components/ui/label'
4import { IconMail } from '@tabler/icons-react'
5import Link from 'next/link'
6 
7export default function ForgotPasswordThree() {
8  return (
9    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
10      <form className="m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border bg-muted shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]">
11        <div className="-m-px rounded-[calc(var(--radius)+.125rem)] border bg-card p-8 pb-6">
12          <div className="mb-4 flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
13            <IconMail aria-hidden="true" className="size-5 text-primary" />
14          </div>
15 
16          <div>
17            <h1 className="text-left text-xl font-semibold tracking-tight">
18              Forgot your password?
19            </h1>
20            <p className="mt-1.5 text-left text-sm text-muted-foreground">
21              Don&apos;t worry we will send you reset instructions
22            </p>
23          </div>
24 
25          <div className="mt-7 space-y-5">
26            <div className="space-y-2">
27              <Label htmlFor="email" className="block text-left text-sm font-medium">
28                Email address
29              </Label>
30              <Input
31                type="email"
32                required
33                name="email"
34                id="email"
35                autoComplete="email"
36                placeholder="you@company.com"
37              />
38            </div>
39 
40            <Button type="submit" className="w-full">
41              Email me a reset link
42            </Button>
43          </div>
44 
45          <p className="mt-5 text-xs text-muted-foreground">
46            Check your inbox and spam folder if you don&apos;t see it.
47          </p>
48        </div>
49 
50        <div className="p-4">
51          <p className="text-center text-sm text-muted-foreground">
52            <Link
53              href="/work/forgot-password/one"
54              className="group inline-flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground"
55            >
56              ← Back to <span className="font-medium group-hover:underline">Sign in</span>
57            </Link>
58          </p>
59        </div>
60 
61// … truncated