initialisation du projet

frontend/src/pages/Inscription.jsx

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+export default function Inscription() {
+  const [form, setForm] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    acceptMarketing: false,
+  })
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target
+    setForm({ ...form, [name]: type === 'checkbox' ? checked : value })
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    // TODO: connecter au backend
+    alert(`Inscription de ${form.firstName} ${form.lastName}`)
+  }
+
+  return (
+    <div className="min-h-screen bg-green-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-green-800">Thé Tip Top</h1>
+          <p className="text-gray-500 mt-1">Créer votre compte</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
+              <input
+                type="text"
+                name="firstName"
+                value={form.firstName}
+                onChange={handleChange}
+                required
+                placeholder="Jean"
+                className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Nom</label>
+              <input
+                type="text"
+                name="lastName"
+                value={form.lastName}
+                onChange={handleChange}
+                required
+                placeholder="Dupont"
+                className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+            <input
+              type="email"
+              name="email"
+              value={form.email}
+              onChange={handleChange}
+              required
+              placeholder="exemple@email.com"
+              className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
+            <input
+              type="password"
+              name="password"
+              value={form.password}
+              onChange={handleChange}
+              required
+              placeholder="••••••••"
+              className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
+            />
+          </div>
+
+          <label className="flex items-start gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              name="acceptMarketing"
+              checked={form.acceptMarketing}
+              onChange={handleChange}
+              className="mt-1 accent-green-700"
+            />
+            <span className="text-sm text-gray-600">
+              J'accepte de recevoir des communications marketing de Thé Tip Top
+            </span>
+          </label>
+
+          <button
+            type="submit"
+            className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors"
+          >
+            Créer mon compte
+          </button>
+        </form>
+
+        <p className="text-center text-sm text-gray-500 mt-6">
+          Déjà un compte ?{' '}
+          <Link to="/connexion" className="text-green-700 font-medium hover:underline">
+            Se connecter
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}