feat: enhance login/register pages with animated backgrounds and unified design
- Add animated tea icon backgrounds to login and register pages (35 icons) - Update color scheme from green to golden/beige theme matching header - Change header navigation text from "Loto à gagner" to "Lots à gagner" - Update form placeholders to lowercase French (prénom, nom, email, etc.) - Standardize Facebook login button style to match Google button - Update all focus rings and button colors to #d4a574 (golden) theme 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
7e079dfede
commit
c8fdd59553
|
|
@ -118,24 +118,25 @@
|
||||||
@keyframes fallDown {
|
@keyframes fallDown {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(-100vh) translateX(0px);
|
transform: translateY(-100vh) translateX(0px);
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
10% {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
transform: translateY(-60vh) translateX(15px);
|
transform: translateY(-60vh) translateX(15px);
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
40% {
|
40% {
|
||||||
transform: translateY(-20vh) translateX(-10px);
|
transform: translateY(-20vh) translateX(-10px);
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
60% {
|
60% {
|
||||||
transform: translateY(20vh) translateX(20px);
|
transform: translateY(20vh) translateX(20px);
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
transform: translateY(60vh) translateX(-15px);
|
transform: translateY(60vh) translateX(-15px);
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
90% {
|
95% {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
|
|
@ -146,5 +147,7 @@
|
||||||
|
|
||||||
.animate-float-gentle {
|
.animate-float-gentle {
|
||||||
animation: fallDown 15s linear infinite;
|
animation: fallDown 15s linear infinite;
|
||||||
|
opacity: 0;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import { loginSchema, LoginFormData } from "@/lib/validations";
|
||||||
import { Input } from "@/components/ui/Input";
|
import { Input } from "@/components/ui/Input";
|
||||||
import Button from "@/components/Button";
|
import Button from "@/components/Button";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
import { ROUTES } from "@/utils/constants";
|
import { ROUTES } from "@/utils/constants";
|
||||||
import { GoogleLoginButton } from "@/components/GoogleLoginButton";
|
import { GoogleLoginButton } from "@/components/GoogleLoginButton";
|
||||||
import { initFacebookSDK, loginWithFacebook } from "@/lib/facebook-sdk";
|
import { initFacebookSDK, loginWithFacebook } from "@/lib/facebook-sdk";
|
||||||
|
|
@ -20,6 +21,7 @@ export default function LoginPage() {
|
||||||
const [isFacebookLoading, setIsFacebookLoading] = useState(false);
|
const [isFacebookLoading, setIsFacebookLoading] = useState(false);
|
||||||
const [isFacebookSDKLoaded, setIsFacebookSDKLoaded] = useState(false);
|
const [isFacebookSDKLoaded, setIsFacebookSDKLoaded] = useState(false);
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
const [animationKey] = useState(Date.now());
|
||||||
|
|
||||||
const hasGoogleAuth = !!process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
|
const hasGoogleAuth = !!process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
|
||||||
const hasFacebookAuth = !!process.env.NEXT_PUBLIC_FACEBOOK_APP_ID;
|
const hasFacebookAuth = !!process.env.NEXT_PUBLIC_FACEBOOK_APP_ID;
|
||||||
|
|
@ -76,8 +78,69 @@ export default function LoginPage() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
<div className="min-h-screen relative flex items-center justify-center py-12 px-4">
|
||||||
<div className="w-full max-w-md">
|
{/* Background avec icônes de thé */}
|
||||||
|
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||||||
|
{/* Fond dégradé beige clair */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
|
||||||
|
|
||||||
|
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
|
||||||
|
<div key={animationKey} className="absolute inset-0 opacity-[0.5]">
|
||||||
|
{/* Ligne 1 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 2 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 3 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 4 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 5 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 6 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 7 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Overlay lumineux pour harmoniser */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full max-w-md relative z-10">
|
||||||
|
|
||||||
{/* Title */}
|
{/* Title */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
|
|
@ -92,7 +155,7 @@ export default function LoginPage() {
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
<div className="flex border-b border-gray-200">
|
<div className="flex border-b border-gray-200">
|
||||||
<button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#1a4d2e]">
|
<button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#d4a574]">
|
||||||
Connexion
|
Connexion
|
||||||
</button>
|
</button>
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -114,19 +177,19 @@ export default function LoginPage() {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{hasFacebookAuth && (
|
{hasFacebookAuth && (
|
||||||
<button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
variant="outline"
|
||||||
onClick={handleFacebookLogin}
|
onClick={handleFacebookLogin}
|
||||||
disabled={isFacebookLoading || !isFacebookSDKLoaded}
|
disabled={isFacebookLoading || !isFacebookSDKLoaded}
|
||||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 border-2 border-primary-600 rounded-lg hover:bg-primary-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
isLoading={isFacebookLoading}
|
||||||
|
fullWidth
|
||||||
>
|
>
|
||||||
<svg className="w-5 h-5" fill="#1877F2" viewBox="0 0 24 24">
|
<svg className="w-5 h-5 mr-2" fill="#1877F2" viewBox="0 0 24 24">
|
||||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span className="font-medium text-primary-600">
|
Facebook
|
||||||
{isFacebookLoading ? "Connexion..." : "Continuer avec Facebook"}
|
</Button>
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -156,9 +219,9 @@ export default function LoginPage() {
|
||||||
<input
|
<input
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="votre@email.com"
|
placeholder="email"
|
||||||
{...register("email")}
|
{...register("email")}
|
||||||
className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
|
||||||
/>
|
/>
|
||||||
{errors.email && (
|
{errors.email && (
|
||||||
<p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
|
<p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
|
||||||
|
|
@ -174,9 +237,9 @@ export default function LoginPage() {
|
||||||
<input
|
<input
|
||||||
id="password"
|
id="password"
|
||||||
type={showPassword ? "text" : "password"}
|
type={showPassword ? "text" : "password"}
|
||||||
placeholder="••••••••"
|
placeholder="mot de passe"
|
||||||
{...register("password")}
|
{...register("password")}
|
||||||
className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
|
className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -204,7 +267,7 @@ export default function LoginPage() {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
className="w-full bg-[#d4a574] hover:bg-[#c4956a] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
||||||
>
|
>
|
||||||
{isSubmitting ? "Connexion..." : "Se connecter"}
|
{isSubmitting ? "Connexion..." : "Se connecter"}
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -213,7 +276,7 @@ export default function LoginPage() {
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<Link
|
<Link
|
||||||
href="/forgot-password"
|
href="/forgot-password"
|
||||||
className="text-sm text-[#1a4d2e] hover:text-[#f59e0b] hover:underline transition-colors"
|
className="text-sm text-[#5a5a4e] hover:text-[#d4a574] hover:underline transition-colors"
|
||||||
>
|
>
|
||||||
Mot de passe oublié ?
|
Mot de passe oublié ?
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
79
app/page.tsx
79
app/page.tsx
|
|
@ -7,15 +7,10 @@ import CountdownTimer from "@/components/CountdownTimer";
|
||||||
import GamePeriod from "@/components/GamePeriod";
|
import GamePeriod from "@/components/GamePeriod";
|
||||||
import GrandPrize from "@/components/GrandPrize";
|
import GrandPrize from "@/components/GrandPrize";
|
||||||
import AboutContest from "@/components/AboutContest";
|
import AboutContest from "@/components/AboutContest";
|
||||||
import { useState, useEffect } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const [animationKey, setAnimationKey] = useState(0);
|
const [animationKey] = useState(Date.now());
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Redémarrer l'animation à chaque chargement de la page
|
|
||||||
setAnimationKey(Date.now());
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen -mt-[4.5rem] relative">
|
<div className="min-h-screen -mt-[4.5rem] relative">
|
||||||
|
|
@ -27,53 +22,53 @@ export default function HomePage() {
|
||||||
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
|
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
|
||||||
<div key={animationKey} className="absolute inset-0 opacity-[0.5]">
|
<div key={animationKey} className="absolute inset-0 opacity-[0.5]">
|
||||||
{/* Ligne 1 - 5 icons */}
|
{/* Ligne 1 - 5 icons */}
|
||||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDelay: '0s', animationDuration: '28s'}} />
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '32s'}} />
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDelay: '6s', animationDuration: '30s'}} />
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDelay: '9s', animationDuration: '27s'}} />
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDelay: '2s', animationDuration: '31s'}} />
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
|
||||||
{/* Ligne 2 - 5 icons */}
|
{/* Ligne 2 - 5 icons */}
|
||||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDelay: '4s', animationDuration: '29s'}} />
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDelay: '7s', animationDuration: '26s'}} />
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDelay: '1s', animationDuration: '33s'}} />
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
||||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDelay: '10s', animationDuration: '28s'}} />
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDelay: '5s', animationDuration: '30s'}} />
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
|
||||||
{/* Ligne 3 - 5 icons */}
|
{/* Ligne 3 - 5 icons */}
|
||||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDelay: '8s', animationDuration: '27s'}} />
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDelay: '11s', animationDuration: '31s'}} />
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '29s'}} />
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDelay: '6s', animationDuration: '26s'}} />
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDelay: '12s', animationDuration: '32s'}} />
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
|
||||||
{/* Ligne 4 - 5 icons */}
|
{/* Ligne 4 - 5 icons */}
|
||||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDelay: '2s', animationDuration: '28s'}} />
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDelay: '9s', animationDuration: '30s'}} />
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDelay: '4s', animationDuration: '33s'}} />
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDelay: '7s', animationDuration: '27s'}} />
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDelay: '1s', animationDuration: '29s'}} />
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
|
||||||
{/* Ligne 5 - 5 icons */}
|
{/* Ligne 5 - 5 icons */}
|
||||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDelay: '10s', animationDuration: '31s'}} />
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDelay: '5s', animationDuration: '26s'}} />
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDelay: '8s', animationDuration: '30s'}} />
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDelay: '11s', animationDuration: '28s'}} />
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '32s'}} />
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
|
||||||
{/* Ligne 6 - 5 icons */}
|
{/* Ligne 6 - 5 icons */}
|
||||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDelay: '6s', animationDuration: '29s'}} />
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDelay: '9s', animationDuration: '27s'}} />
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDelay: '2s', animationDuration: '31s'}} />
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDelay: '12s', animationDuration: '28s'}} />
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDelay: '4s', animationDuration: '30s'}} />
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
|
||||||
{/* Ligne 7 - 5 icons */}
|
{/* Ligne 7 - 5 icons */}
|
||||||
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDelay: '7s', animationDuration: '26s'}} />
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDelay: '1s', animationDuration: '32s'}} />
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDelay: '10s', animationDuration: '29s'}} />
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDelay: '5s', animationDuration: '27s'}} />
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDelay: '8s', animationDuration: '31s'}} />
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Overlay lumineux pour harmoniser */}
|
{/* Overlay lumineux pour harmoniser */}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { useAuth } from "@/contexts/AuthContext";
|
import { useAuth } from "@/contexts/AuthContext";
|
||||||
import { registerSchema, RegisterFormData } from "@/lib/validations";
|
import { registerSchema, RegisterFormData } from "@/lib/validations";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
import { ROUTES } from "@/utils/constants";
|
import { ROUTES } from "@/utils/constants";
|
||||||
|
|
||||||
export default function RegisterPage() {
|
export default function RegisterPage() {
|
||||||
|
|
@ -12,6 +13,7 @@ export default function RegisterPage() {
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||||
|
const [animationKey] = useState(Date.now());
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
|
|
@ -33,8 +35,69 @@ export default function RegisterPage() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
<div className="min-h-screen relative flex items-center justify-center py-12 px-4">
|
||||||
<div className="w-full max-w-md">
|
{/* Background avec icônes de thé */}
|
||||||
|
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||||||
|
{/* Fond dégradé beige clair */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
|
||||||
|
|
||||||
|
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
|
||||||
|
<div key={animationKey} className="absolute inset-0 opacity-[0.5]">
|
||||||
|
{/* Ligne 1 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 2 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 3 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 4 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 5 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 6 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
||||||
|
|
||||||
|
{/* Ligne 7 - 5 icons */}
|
||||||
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
||||||
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
||||||
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Overlay lumineux pour harmoniser */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full max-w-md relative z-10">
|
||||||
|
|
||||||
{/* Title */}
|
{/* Title */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
|
|
@ -55,7 +118,7 @@ export default function RegisterPage() {
|
||||||
>
|
>
|
||||||
Connexion
|
Connexion
|
||||||
</Link>
|
</Link>
|
||||||
<button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#1a4d2e]">
|
<button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#d4a574]">
|
||||||
Inscription
|
Inscription
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -75,9 +138,9 @@ export default function RegisterPage() {
|
||||||
<input
|
<input
|
||||||
id="firstName"
|
id="firstName"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Jean"
|
placeholder="prénom"
|
||||||
{...register("firstName")}
|
{...register("firstName")}
|
||||||
className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
|
||||||
/>
|
/>
|
||||||
{errors.firstName && (
|
{errors.firstName && (
|
||||||
<p className="mt-1 text-sm text-red-500">{errors.firstName.message}</p>
|
<p className="mt-1 text-sm text-red-500">{errors.firstName.message}</p>
|
||||||
|
|
@ -91,9 +154,9 @@ export default function RegisterPage() {
|
||||||
<input
|
<input
|
||||||
id="lastName"
|
id="lastName"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Dupont"
|
placeholder="nom"
|
||||||
{...register("lastName")}
|
{...register("lastName")}
|
||||||
className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
|
||||||
/>
|
/>
|
||||||
{errors.lastName && (
|
{errors.lastName && (
|
||||||
<p className="mt-1 text-sm text-red-500">{errors.lastName.message}</p>
|
<p className="mt-1 text-sm text-red-500">{errors.lastName.message}</p>
|
||||||
|
|
@ -109,9 +172,9 @@ export default function RegisterPage() {
|
||||||
<input
|
<input
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="votre.email@example.com"
|
placeholder="email"
|
||||||
{...register("email")}
|
{...register("email")}
|
||||||
className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
|
||||||
/>
|
/>
|
||||||
{errors.email && (
|
{errors.email && (
|
||||||
<p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
|
<p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
|
||||||
|
|
@ -126,9 +189,9 @@ export default function RegisterPage() {
|
||||||
<input
|
<input
|
||||||
id="phone"
|
id="phone"
|
||||||
type="tel"
|
type="tel"
|
||||||
placeholder="0612345678"
|
placeholder="téléphone"
|
||||||
{...register("phone")}
|
{...register("phone")}
|
||||||
className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
|
||||||
/>
|
/>
|
||||||
<p className="mt-1 text-xs text-gray-500">Optionnel - Format: 06 12 34 56 78</p>
|
<p className="mt-1 text-xs text-gray-500">Optionnel - Format: 06 12 34 56 78</p>
|
||||||
{errors.phone && (
|
{errors.phone && (
|
||||||
|
|
@ -145,9 +208,9 @@ export default function RegisterPage() {
|
||||||
<input
|
<input
|
||||||
id="password"
|
id="password"
|
||||||
type={showPassword ? "text" : "password"}
|
type={showPassword ? "text" : "password"}
|
||||||
placeholder="••••••••"
|
placeholder="mot de passe"
|
||||||
{...register("password")}
|
{...register("password")}
|
||||||
className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
|
className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -181,9 +244,9 @@ export default function RegisterPage() {
|
||||||
<input
|
<input
|
||||||
id="confirmPassword"
|
id="confirmPassword"
|
||||||
type={showConfirmPassword ? "text" : "password"}
|
type={showConfirmPassword ? "text" : "password"}
|
||||||
placeholder="••••••••"
|
placeholder="confirmer mot de passe"
|
||||||
{...register("confirmPassword")}
|
{...register("confirmPassword")}
|
||||||
className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
|
className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -213,15 +276,15 @@ export default function RegisterPage() {
|
||||||
id="terms"
|
id="terms"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
required
|
required
|
||||||
className="mt-1 w-5 h-5 text-[#1a4d2e] border-gray-300 rounded focus:ring-2 focus:ring-[#1a4d2e]"
|
className="mt-1 w-5 h-5 text-[#d4a574] border-gray-300 rounded focus:ring-2 focus:ring-[#d4a574]"
|
||||||
/>
|
/>
|
||||||
<label htmlFor="terms" className="text-sm text-gray-700 select-none cursor-pointer">
|
<label htmlFor="terms" className="text-sm text-gray-700 select-none cursor-pointer">
|
||||||
J'accepte les{' '}
|
J'accepte les{' '}
|
||||||
<Link href="/terms" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
|
<Link href="/terms" className="text-[#5a5a4e] underline hover:text-[#d4a574]">
|
||||||
conditions d'utilisation
|
conditions d'utilisation
|
||||||
</Link>{' '}
|
</Link>{' '}
|
||||||
et la{' '}
|
et la{' '}
|
||||||
<Link href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
|
<Link href="/privacy" className="text-[#5a5a4e] underline hover:text-[#d4a574]">
|
||||||
politique de confidentialité
|
politique de confidentialité
|
||||||
</Link>{' '}
|
</Link>{' '}
|
||||||
<span className="text-red-500">*</span>
|
<span className="text-red-500">*</span>
|
||||||
|
|
@ -232,7 +295,7 @@ export default function RegisterPage() {
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
className="w-full bg-[#d4a574] hover:bg-[#c4956a] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
||||||
>
|
>
|
||||||
{isSubmitting ? "Inscription..." : "S'inscrire"}
|
{isSubmitting ? "Inscription..." : "S'inscrire"}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@ export default function Header() {
|
||||||
href={ROUTES.LOTS}
|
href={ROUTES.LOTS}
|
||||||
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
|
className="text-[#5a5a4e] hover:text-[#d4a574] font-medium transition-colors"
|
||||||
>
|
>
|
||||||
Loto à gagner
|
Lots à gagner
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/rules"
|
href="/rules"
|
||||||
|
|
@ -229,7 +229,7 @@ export default function Header() {
|
||||||
className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
|
className="text-gray-700 hover:text-primary-600 font-medium py-2 transition-colors"
|
||||||
onClick={() => setIsMobileMenuOpen(false)}
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
>
|
>
|
||||||
Gains
|
Lots
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/about"
|
href="/about"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user