20 question

[ibnhfidmehdi]

// Made by Mehdi IbnHfid
import React, { useState } from 'react';
import { motion } from 'framer-motion';

export default function SignInForm() {
const [submitted, setSubmitted] = useState(false);
const [name, setName] = useState('');
const [answers, setAnswers] = useState(Array(20).fill(''));

const handleSubmit = (e) => {
e.preventDefault();
setSubmitted(true);
};

const questions = [
"Quel est ton nom complet ?",
"Quel est ton pays préféré ?",
"Quel âge as-tu ?",
"Quelle est ta passion ?",
"As-tu un animal préféré ?",
"Quelle est ta couleur préférée ?",
"Quel est ton rêve ?",
"Aimes-tu la science ?",
"Quelle langue parles-tu ?",
"Quel est ton plat préféré ?",
"Quel sport pratiques-tu ?",
"Quel est ton chanteur préféré ?",
"Quel est ton film préféré ?",
"Aimes-tu l’intelligence artificielle ?",
"Quel est ton métier de rêve ?",
"Quelle saison préfères-tu ?",
"Que fais-tu pendant ton temps libre ?",
"Aimes-tu lire des livres ?",
"Quel est ton super héros préféré ?",
"Quel pays veux-tu visiter ?"
];

return (

<motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}
className="text-white text-4xl font-bold mb-8 text-center">
Made by Mehdi IbnHfid
</motion.h1>

  {!submitted ? (
    <motion.form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-3xl"
      initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
      <div className="mb-4">
        <label className="block font-semibold text-gray-700 mb-2">Ton nom</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)}
          className="w-full p-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500" />
      </div>
      {questions.map((q, i) => (
        <div className="mb-4" key={i}>
          <label className="block font-medium text-gray-700 mb-1">{q}</label>
          <input type="text" value={answers[i]} onChange={(e) => {
            const newAnswers = [...answers];
            newAnswers[i] = e.target.value;
            setAnswers(newAnswers);
          }} className="w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-400" />
        </div>
      ))}
      <motion.button whileHover={{ scale: 1.05 }} type="submit"
        className="mt-6 w-full bg-purple-600 text-white p-3 rounded-xl font-semibold hover:bg-purple-700 transition">
        Soumettre
      </motion.button>
    </motion.form>
  ) : (
    <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}
      className="bg-white p-8 rounded-2xl shadow-xl text-center max-w-xl">
      <h2 className="text-2xl font-bold text-gray-800 mb-4">Merci, {name} 🌟</h2>
      <p className="text-gray-600">Tu as rempli les 20 questions. Bien joué !</p>
    </motion.div>
  )}
</div>

);
}