Skip to content

Commit 47dc548

Browse files
bleriotnoguiableriotnoguia
committed
🎨 Redesign Register Page with French Localization and Community Features
1 parent bc57dbd commit 47dc548

1 file changed

Lines changed: 130 additions & 20 deletions

File tree

‎inertia/pages/auth/register.tsx‎

Lines changed: 130 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,139 @@ export default function Register() {
1919
return (
2020
<>
2121
<Navbar />
22-
<div className="min-h-screen bg-gray-50 py-12">
23-
<div className="grid lg:grid-cols-2 h-screen">
24-
<div className="flex flex-col justify-center px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
25-
<div className="mx-auto w-full max-w-sm lg:w-96">
22+
<div className="bg-gray-50 py-12">
23+
<div className="grid lg:grid-cols-3 max-w-7xl mx-auto items-start">
24+
<div className="flex flex-col justify-center px-4 sm:px-6 lg:px-8 col-span-2">
25+
<div className="max-w-2xl">
26+
<h2 className="text-2xl font-bold mb-4">
27+
Ouvrez votre esprit pour découvrir de nouveaux horizons.
28+
</h2>
29+
30+
<div className="grid grid-cols-2 gap-6 mt-8">
31+
<div className="flex flex-col space-y-2">
32+
<div className="flex items-center">
33+
<svg
34+
xmlns="http://www.w3.org/2000/svg"
35+
className="h-6 w-6 text-indigo-300"
36+
fill="none"
37+
viewBox="0 0 24 24"
38+
stroke="currentColor"
39+
>
40+
<path
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
strokeWidth={2}
44+
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
45+
/>
46+
</svg>
47+
<h3 className="ml-2 font-medium">Podcast</h3>
48+
</div>
49+
<p className="text-sm text-gray-500">
50+
Suivez des podcasts sur différentes thématiques avec des freelancers,
51+
développeurs, entrepreneurs etc.
52+
</p>
53+
</div>
54+
55+
<div className="flex flex-col space-y-2">
56+
<div className="flex items-center">
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
className="h-6 w-6 text-indigo-300"
60+
fill="none"
61+
viewBox="0 0 24 24"
62+
stroke="currentColor"
63+
>
64+
<path
65+
strokeLinecap="round"
66+
strokeLinejoin="round"
67+
strokeWidth={2}
68+
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
69+
/>
70+
</svg>
71+
<h3 className="ml-2 font-medium">Discussions</h3>
72+
</div>
73+
<p className="text-sm text-gray-600">
74+
Participez à des discussions et débats ouverts avec plusieurs autres
75+
participants.
76+
</p>
77+
</div>
78+
79+
<div className="flex flex-col space-y-2">
80+
<div className="flex items-center">
81+
<svg
82+
xmlns="http://www.w3.org/2000/svg"
83+
className="h-6 w-6 text-indigo-300"
84+
fill="none"
85+
viewBox="0 0 24 24"
86+
stroke="currentColor"
87+
>
88+
<path
89+
strokeLinecap="round"
90+
strokeLinejoin="round"
91+
strokeWidth={2}
92+
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
93+
/>
94+
</svg>
95+
<h3 className="ml-2 font-medium">Code Snippets</h3>
96+
</div>
97+
<p className="text-sm text-gray-500">
98+
Partagez des codes sources de différents langages pour venir en aide à d'autres
99+
développeurs.
100+
</p>
101+
</div>
102+
103+
<div className="flex flex-col space-y-2">
104+
<div className="flex items-center">
105+
<svg
106+
xmlns="http://www.w3.org/2000/svg"
107+
className="h-6 w-6 text-indigo-300"
108+
fill="none"
109+
viewBox="0 0 24 24"
110+
stroke="currentColor"
111+
>
112+
<path
113+
strokeLinecap="round"
114+
strokeLinejoin="round"
115+
strokeWidth={2}
116+
d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
117+
/>
118+
</svg>
119+
<h3 className="ml-2 font-medium">Premium</h3>
120+
</div>
121+
<p className="text-sm text-gray-500">
122+
Devenez premium, supportez la communauté et accédez à des contenus et codes
123+
sources privés.
124+
</p>
125+
</div>
126+
</div>
127+
128+
<div className="mt-12">
129+
<blockquote className="italic text-gray-700">
130+
"Un développeur solitaire est comme un nœud isolé – limité en termes de portée,
131+
d'influence et de croissance. Tout comme les logiciels se développent grâce à des
132+
composants interconnectés, les développeurs s'épanouissent dans l'écosystème
133+
collaboratif d'une communauté."
134+
</blockquote>
135+
<p className="mt-2 text-sm text-gray-900">- The Pragmatic Programmer</p>
136+
</div>
137+
</div>
138+
</div>
139+
<div className="flex flex-col justify-center lg:flex-none px-4 sm:px-6 lg:px-8">
140+
<div className="mx-auto w-full">
26141
<div className="text-center">
27-
<h2 className="mt-6 text-2xl font-bold text-gray-900">
28-
Ouvrez votre esprit pour découvrir de nouveaux horizons.
29-
</h2>
142+
<h2 className="text-2xl font-bold text-gray-900">Rejoindre JavaScript Cameroun</h2>
143+
<p className="mt-2 text-sm text-gray-500">
144+
Rejoignez près de 1000 développeurs et designers. Parce qu'il n'y a pas que le
145+
code dans la vie.
146+
</p>
30147
</div>
31148

32149
<div className="mt-8">
33150
<div className="mt-6">
34151
<form onSubmit={handleSubmit} className="space-y-6">
35152
<div>
36153
<label htmlFor="username" className="block text-sm font-medium text-gray-700">
37-
Username
154+
Nom d'utilisateur
38155
</label>
39156
<input
40157
type="text"
@@ -50,7 +167,7 @@ export default function Register() {
50167

51168
<div>
52169
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
53-
Full Name
170+
Nom complet
54171
</label>
55172
<input
56173
type="text"
@@ -64,7 +181,7 @@ export default function Register() {
64181

65182
<div>
66183
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
67-
Email
184+
Adresse email
68185
</label>
69186
<input
70187
type="email"
@@ -78,7 +195,7 @@ export default function Register() {
78195

79196
<div>
80197
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
81-
Password
198+
Mot de passe (min. 8 caractères)
82199
</label>
83200
<input
84201
type="password"
@@ -98,7 +215,7 @@ export default function Register() {
98215
disabled={processing}
99216
className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
100217
>
101-
Create Account
218+
Créer mon compte
102219
</button>
103220
</div>
104221
</form>
@@ -109,7 +226,7 @@ export default function Register() {
109226
<div className="w-full border-t border-gray-300" />
110227
</div>
111228
<div className="relative flex justify-center text-sm">
112-
<span className="bg-gray-50 px-2 text-gray-500">Or continue with</span>
229+
<span className="bg-gray-50 px-2 text-gray-500">Ou continuer avec</span>
113230
</div>
114231
</div>
115232

@@ -133,13 +250,6 @@ export default function Register() {
133250
</div>
134251
</div>
135252
</div>
136-
<div className="relative hidden lg:block">
137-
<img
138-
className="absolute inset-0 h-full w-full object-cover"
139-
src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
140-
alt=""
141-
/>
142-
</div>
143253
</div>
144254
</div>
145255
<Footer />

0 commit comments

Comments
 (0)