Redesign home, login, register pages with magic-hotel dark aesthetic
Local Build and Deploy / deploy (push) Successful in 51s
Local Build and Deploy / deploy (push) Successful in 51s
This commit is contained in:
openhands committed
1 parent
d4ee1dc4a3
commit
9889131b03
7 files changed
+611
-430
No files matched your search
@@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { LogIn, UserPlus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { precheckLogin } from "@/actions/auth-precheck";
|
||||
@@ -47,86 +49,103 @@ export function HomeLoginForm() {
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="flex flex-col gap-4">
|
||||
<div className="space-y-3">
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-2.5">
|
||||
<p className="text-xs font-bold text-red-400 text-center m-0">
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3.5">
|
||||
<div>
|
||||
<label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text-muted-readable)] mb-1.5">
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Enter your username"
|
||||
className="w-full rounded-lg border-2 px-3 py-2.5 text-sm transition-all duration-200 bg-[var(--color-background)]"
|
||||
style={{ borderColor: "var(--input-border-color)" }}
|
||||
required
|
||||
disabled={needs2fa}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text-muted-readable)] mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
className="w-full rounded-lg border-2 px-3 py-2.5 text-sm transition-all duration-200 bg-[var(--color-background)]"
|
||||
style={{ borderColor: "var(--input-border-color)" }}
|
||||
required
|
||||
disabled={needs2fa}
|
||||
/>
|
||||
</div>
|
||||
{needs2fa ? (
|
||||
<div>
|
||||
<label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text-muted-readable)] mb-1.5">
|
||||
2FA Code
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="Enter your 2FA code"
|
||||
inputMode="numeric"
|
||||
className="w-full rounded-lg border-2 px-3 py-2.5 text-sm transition-all duration-200 bg-[var(--color-background)]"
|
||||
style={{ borderColor: "var(--input-border-color)" }}
|
||||
autoFocus
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Username"
|
||||
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
required
|
||||
disabled={needs2fa}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Password"
|
||||
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
required
|
||||
disabled={needs2fa}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{needs2fa && (
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
2FA Code
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="Enter your 2FA code"
|
||||
inputMode="numeric"
|
||||
autoFocus
|
||||
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<p className="m-0 text-center text-sm font-medium text-red-500 dark:text-red-400">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending}
|
||||
className="w-full cursor-pointer rounded-xl px-4 py-3 text-sm font-bold tracking-wide text-white transition-all duration-200 hover:opacity-90 active:scale-[0.98] disabled:opacity-50"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, var(--button-color), color-mix(in srgb, var(--button-color) 80%, #000000))",
|
||||
boxShadow: "0 4px 16px color-mix(in srgb, var(--button-color) 30%, transparent)",
|
||||
}}
|
||||
className="w-full group relative flex items-center justify-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6]/90 text-white font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest"
|
||||
>
|
||||
{pending ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
Please wait...
|
||||
</span>
|
||||
) : needs2fa ? (
|
||||
"Verify"
|
||||
) : (
|
||||
"Login"
|
||||
)}
|
||||
<LogIn size={14} />
|
||||
{pending ? "Please wait..." : needs2fa ? "Verify" : "Login"}
|
||||
</button>
|
||||
|
||||
<div className="pt-4 border-t border-white/5 text-center">
|
||||
<Link href="/register">
|
||||
<div className="flex items-center justify-center gap-2 w-full py-3 rounded-lg bg-white/5 border border-white/10 text-white text-[11px] font-black hover:bg-white/10 transition-all active:scale-95 uppercase tracking-wider">
|
||||
<UserPlus size={14} className="text-[#5AB4C6]" />
|
||||
Create account
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { Eye, EyeOff, Lock, Mail, User, UserPlus } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Eye, EyeOff, Lock, Mail, User } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useActionState, useState } from "react";
|
||||
import { register } from "@/actions/register";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
interface RegisterFormProps {
|
||||
hotelName: string;
|
||||
@@ -23,100 +20,130 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-lg animate-fade-in">
|
||||
<div className="text-center mb-8">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 shadow-lg">
|
||||
<UserPlus className="h-8 w-8 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-extrabold tracking-tight m-0">
|
||||
{t("title")}
|
||||
</h1>
|
||||
<p className="mt-1.5 text-sm text-[var(--color-text-muted-readable)]">
|
||||
{t("subtitle", { hotel: hotelName })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="animate-fade-in">
|
||||
<div
|
||||
className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8 md:p-10"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#5AB4C6]/5 via-transparent to-transparent" />
|
||||
<div className="absolute -top-40 -right-40 w-[500px] h-[500px] bg-[#5AB4C6]/5 rounded-full blur-[120px]" />
|
||||
|
||||
<Card className="border-[var(--border-subtle)] shadow-elevated">
|
||||
<CardHeader className="px-6 pt-6 pb-0">
|
||||
<CardTitle className="text-base font-bold">
|
||||
Create your account
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Fill in the details below to join {hotelName}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6">
|
||||
<form action={formAction} className="space-y-5">
|
||||
<div className="relative">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#5AB4C6]/10 border border-[#5AB4C6]/20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#5AB4C6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
|
||||
<polyline points="10 17 15 12 10 7" />
|
||||
<line x1="15" x2="3" y1="12" y2="12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-2xl font-black text-white tracking-tight m-0">
|
||||
{t("title")}
|
||||
</h1>
|
||||
<p className="mt-1.5 text-sm text-white/40">
|
||||
{t("subtitle", { hotel: hotelName })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action={formAction} className="space-y-5 max-w-md mx-auto">
|
||||
{(error || serverError) && (
|
||||
<div className="rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 px-4 py-3">
|
||||
<p className="text-sm font-medium text-red-600 dark:text-red-400 text-center m-0">
|
||||
<div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3">
|
||||
<p className="text-xs font-bold text-red-400 text-center m-0">
|
||||
{error || serverError}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-4 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Username
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
|
||||
<User size={15} />
|
||||
</div>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
||||
<input
|
||||
id="mail"
|
||||
name="mail"
|
||||
type="email"
|
||||
placeholder={t("emailPlaceholder")}
|
||||
autoComplete="email"
|
||||
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-4 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
|
||||
<Mail size={15} />
|
||||
</div>
|
||||
<input
|
||||
id="mail"
|
||||
name="mail"
|
||||
type="email"
|
||||
placeholder={t("emailPlaceholder")}
|
||||
autoComplete="email"
|
||||
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder={t("passwordPlaceholder")}
|
||||
autoComplete="new-password"
|
||||
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-10 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] hover:text-[var(--color-text-readable)]"
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
|
||||
<Lock size={15} />
|
||||
</div>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder={t("passwordPlaceholder")}
|
||||
autoComplete="new-password"
|
||||
className="w-full pl-10 pr-10 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors"
|
||||
>
|
||||
{showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-text-muted)]" />
|
||||
<input
|
||||
id="password_confirmation"
|
||||
name="password_confirmation"
|
||||
type="password"
|
||||
placeholder={t("confirmPasswordPlaceholder")}
|
||||
autoComplete="new-password"
|
||||
className="w-full rounded-xl border-2 border-[var(--input-border-color)] bg-[var(--color-background)] pl-10 pr-4 py-2.5 text-sm transition-all duration-200 focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
|
||||
Confirm
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
|
||||
<Lock size={15} />
|
||||
</div>
|
||||
<input
|
||||
id="password_confirmation"
|
||||
name="password_confirmation"
|
||||
type="password"
|
||||
placeholder={t("confirmPasswordPlaceholder")}
|
||||
autoComplete="new-password"
|
||||
className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terms */}
|
||||
<div className="flex items-start gap-3 rounded-xl border border-[var(--border-subtle)] bg-[var(--color-background)] p-4">
|
||||
<div className="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-4">
|
||||
<button
|
||||
type="button"
|
||||
role="checkbox"
|
||||
@@ -124,12 +151,8 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
onClick={() => setTermsAccepted(!termsAccepted)}
|
||||
className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 transition-all"
|
||||
style={{
|
||||
borderColor: termsAccepted
|
||||
? "var(--color-primary)"
|
||||
: "var(--input-border-color)",
|
||||
backgroundColor: termsAccepted
|
||||
? "var(--color-primary)"
|
||||
: "transparent",
|
||||
borderColor: termsAccepted ? "#5AB4C6" : "rgba(255,255,255,0.15)",
|
||||
backgroundColor: termsAccepted ? "#5AB4C6" : "transparent",
|
||||
}}
|
||||
>
|
||||
{termsAccepted && (
|
||||
@@ -140,8 +163,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
</button>
|
||||
<input type="hidden" name="terms" value={termsAccepted ? "1" : ""} />
|
||||
<label
|
||||
className="text-sm cursor-pointer select-none"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
className="text-sm cursor-pointer select-none text-white/60"
|
||||
onClick={() => setTermsAccepted(!termsAccepted)}
|
||||
>
|
||||
{t("termsAccept", { hotel: hotelName })}
|
||||
@@ -160,11 +182,10 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
size="lg"
|
||||
className="w-full font-bold text-base h-12 rounded-xl"
|
||||
className="w-full flex items-center justify-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6]/90 text-white font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#5AB4C6]/20"
|
||||
>
|
||||
{isPending ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
@@ -175,19 +196,19 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
|
||||
{t("creatingAccount")}
|
||||
</span>
|
||||
) : t("createAccount")}
|
||||
</Button>
|
||||
</button>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-[var(--color-text-muted-readable)]">
|
||||
<div className="text-center pt-2">
|
||||
<p className="text-sm text-white/40">
|
||||
{t("alreadyHaveAccount")}{" "}
|
||||
<Link href="/login" className="font-bold text-[var(--color-primary)] hover:underline">
|
||||
<Link href="/login" className="font-bold text-[#5AB4C6] hover:underline">
|
||||
{t("signIn")}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user