Login Exemple 1

1"use client"
2
3import { useState } from "react"
4import Link from "next/link"
5
6export default function LoginForm() {
7    const [showPassword, setShowPassword] = useState(false)
8
9    return (
10        <div className="min-h-screen flex items-center justify-center bg-background p-4">
11            <div className="w-full max-w-4xl flex flex-col gap-6">
12
13                {/* ── Card ── */}
14                <div className="overflow-hidden rounded-xl border border-border shadow-sm grid md:grid-cols-2 bg-card">
15
16                    {/* ── Form side ── */}
17                    <form className="p-6 md:p-8 flex flex-col gap-6">
18
19                        {/* Header */}
20                        <div className="flex flex-col items-center text-center">
21                            <h1 className="text-2xl font-bold text-foreground">Welcome back</h1>
22                            <p className="text-sm text-muted-foreground mt-1">
23                                Sign in to your Bag\Ui account
24                            </p>
25                        </div>
26
27                        {/* Email */}
28                        <div className="flex flex-col gap-1.5">
29                            <label
30                                htmlFor="email"
31                                className="text-sm font-medium text-foreground"
32                            >
33                                Email
34                            </label>
35                            <input
36                                id="email"
37                                type="email"
38                                placeholder="you@example.com"
39                                className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
40                            />
41                        </div>
42
43                        {/* Password */}
44                        <div className="flex flex-col gap-1.5">
45                            <div className="flex items-center justify-between">
46                                <label
47                                    htmlFor="password"
48                                    className="text-sm font-medium text-foreground"
49                                >
50                                    Password
51                                </label>
52                                <Link
53// … truncated