Forgot Password Two

1import Link from 'next/link'
2import { IconMail } from '@tabler/icons-react'
3import { ArrowLeft } from 'lucide-react'
4 
5import { Button } from '@/components/ui/button'
6import { Input } from '@/components/ui/input'
7import { Label } from '@/components/ui/label'
8 
9export default function ForgotPasswordTwo() {
10  return (
11    <section className="flex min-h-screen items-center justify-center bg-linear-to-br from-background to-muted/60 px-4 py-16">
12      <div className="w-full max-w-sm">
13        <div className="rounded-2xl border border-border bg-card p-8 text-card-foreground shadow-lg shadow-black/5 dark:shadow-black/20">
14          <div className="text-center">
15            <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-indigo-50 dark:bg-indigo-950/50">
16              <IconMail
17                aria-hidden="true"
18                className="size-6 text-indigo-600 dark:text-indigo-400"
19              />
20            </div>
21 
22            <h1 className="text-2xl font-bold tracking-tight text-foreground">Forgot Password?</h1>
23 
24            <p className="mt-2 text-sm text-muted-foreground">
25              Enter your email and we&apos;ll send you a reset link
26            </p>
27          </div>
28 
29          <form className="mt-8 space-y-4">
30            <div className="space-y-2">
31              <Label htmlFor="email-2" className="text-sm font-medium">
32                Email Address
33              </Label>
34 
35              <Input
36                id="email-2"
37                name="email"
38                type="email"
39                autoComplete="email"
40                placeholder="you@example.com"
41                required
42                className="w-full"
43              />
44            </div>
45 
46            <Button type="submit" size="lg" className="w-full">
47              Send Reset Link
48            </Button>
49          </form>
50        </div>
51 
52        <div className="mt-6 text-center">
53          <Link
54            href="/work/forgot-password/one"
55            className="group inline-flex items-center justify-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
56          >
57            <ArrowLeft
58              aria-hidden="true"
59              className="size-4 shrink-0 transition-transform group-hover:-translate-x-0.5"
60            />
61            Back to <span className="font-medium underline underline-offset-2">Sign In</span>
62          </Link>
63        </div>
64      </div>
65    </section>
66  )
67}