Added form contact and send email via formspree

src/app/page.tsx

@@ -1,7 +1,52 @@
-import React from 'react';
+'use client';
+
+import React, { useState } from 'react';
 import { resolveImage } from '@/data/stitch-images';
 
 export default function Home() {
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    message: ''
+  });
+
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+
+    try {
+      const response = await fetch("https://formspree.io/f/xbdaajlo", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json"
+        },
+        body: JSON.stringify(formData)
+      });
+
+      if (response.ok) {
+        setStatus('success');
+        setFormData({ firstName: '', lastName: '', email: '', message: '' });
+      } else {
+        setStatus('error');
+      }
+    } catch (error) {
+      setStatus('error');
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const scrollToContact = (e: React.MouseEvent) => {
+    e.preventDefault();
+    document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
+  };
   return (
     <main className="bg-slate-50 text-slate-900 selection:bg-primary/30 font-display">
       {/* Top Navigation */}
@@ -28,7 +73,10 @@ export default function Home() {
             >
               Connexion
             </a>
-            <button className="bg-primary hover:brightness-110 text-slate-900 font-extrabold text-sm px-6 py-3 rounded-full shadow-lg shadow-primary/20 transition-all active:scale-95">
+            <button
+              onClick={scrollToContact}
+              className="bg-primary hover:brightness-110 text-slate-900 font-extrabold text-sm px-6 py-3 rounded-full shadow-lg shadow-primary/20 transition-all active:scale-95"
+            >
               Demander une démo
             </button>
           </div>
@@ -53,7 +101,10 @@ export default function Home() {
                 Transformez l'expérience de vos visiteurs. Gérez vos parcours sur tablettes et mobiles en temps réel, sans aucune connaissance technique.
               </p>
               <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
-                <button className="w-full sm:w-auto px-8 py-4 bg-primary text-slate-900 font-extrabold rounded-full shadow-xl shadow-primary/30 flex items-center justify-center gap-2 group transition-all">
+                <button
+                  onClick={scrollToContact}
+                  className="w-full sm:w-auto px-8 py-4 bg-primary text-slate-900 font-extrabold rounded-full shadow-xl shadow-primary/30 flex items-center justify-center gap-2 group transition-all"
+                >
                   Demander une démo
                   <span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
                 </button>
@@ -233,7 +284,7 @@ export default function Home() {
         </section>
 
         {/* White Label / Value Proposition */}
-        <section className="py-24 bg-background-light relative overflow-hidden" id="solutions">
+        <section className="py-24 bg-white relative overflow-hidden" id="solutions">
           <div className="max-w-7xl mx-auto px-6">
             <div className="flex flex-col lg:flex-row items-center gap-20">
               <div className="flex-1 order-2 lg:order-1">
@@ -272,22 +323,22 @@ export default function Home() {
                 </div>
               </div>
               <div className="flex-1 order-1 lg:order-2">
-                <h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">White label</h2>
+                <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">White label</h2>
                 <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-8">Votre marque, votre application. Pas la nôtre.</h3>
                 <p className="text-lg text-slate-600 leading-relaxed mb-8">
                   Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre institution, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.
                 </p>
                 <ul className="space-y-4 mb-10 text-slate-700 font-semibold">
                   <li className="flex items-center gap-3">
-                    <span className="material-symbols-outlined text-primary">check_circle</span>
+                    <span className="material-symbols-outlined text-accent-orange">check_circle</span>
                     Personnalisation complète des interfaces
                   </li>
                   <li className="flex items-center gap-3">
-                    <span className="material-symbols-outlined text-primary">check_circle</span>
+                    <span className="material-symbols-outlined text-accent-orange">check_circle</span>
                     Logo institutionnel sur l'écran d'accueil
                   </li>
                   <li className="flex items-center gap-3">
-                    <span className="material-symbols-outlined text-primary">check_circle</span>
+                    <span className="material-symbols-outlined text-accent-orange">check_circle</span>
                     Typographies et iconographies sur-mesure
                   </li>
                 </ul>
@@ -301,7 +352,7 @@ export default function Home() {
         </section>
 
         {/* Target Audience */}
-        <section className="py-24 bg-white" id="audience">
+        <section className="py-24 bg-slate-50 border-y border-slate-100" id="audience">
           <div className="max-w-7xl mx-auto px-6">
             <div className="text-center mb-16">
               <h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">Une solution pensée pour vous</h3>
@@ -348,7 +399,10 @@ export default function Home() {
                 Rejoignez des dizaines d'institutions culturelles qui font confiance à MyInfoMate pour leur stratégie numérique.
               </p>
               <div className="flex flex-col sm:flex-row items-center justify-center gap-6 relative z-10">
-                <button className="w-full sm:w-auto px-10 py-5 bg-primary text-slate-900 font-extrabold rounded-full shadow-2xl shadow-primary/40 hover:scale-105 transition-all">
+                <button
+                  onClick={scrollToContact}
+                  className="w-full sm:w-auto px-10 py-5 bg-primary text-slate-900 font-extrabold rounded-full shadow-2xl shadow-primary/40 hover:scale-105 transition-all"
+                >
                   Demander une démo gratuite
                 </button>
                 <a
@@ -361,6 +415,110 @@ export default function Home() {
             </div>
           </div>
         </section>
+
+        {/* Contact Form Section */}
+        <section className="py-24 bg-white relative overflow-hidden" id="contact">
+          <div className="absolute top-0 right-0 -z-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-0 left-0 -z-10 w-96 h-96 bg-accent-violet/5 rounded-full blur-3xl"></div>
+
+          <div className="max-w-4xl mx-auto px-6">
+            <div className="bg-white rounded-[3rem] shadow-2xl border border-slate-100 p-10 lg:p-16 relative">
+              <div className="text-center mb-12">
+                <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">Contact & Démo</h2>
+                <h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">Prêt à commencer l'aventure ?</h3>
+                <p className="text-slate-600">Remplissez ce formulaire et nous reviendrons vers vous pour une démo personnalisée.</p>
+              </div>
+
+              {status === 'success' ? (
+                <div className="text-center py-20">
+                  <div className="w-20 h-20 bg-primary/20 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
+                    <span className="material-symbols-outlined text-5xl">task_alt</span>
+                  </div>
+                  <h3 className="text-3xl font-extrabold text-slate-900 mb-4">Message envoyé !</h3>
+                  <p className="text-slate-600 mb-8">Merci pour votre intérêt. Nous reviendrons vers vous très prochainement.</p>
+                  <button
+                    onClick={() => setStatus('idle')}
+                    className="text-primary font-bold hover:underline"
+                  >
+                    Envoyer un autre message
+                  </button>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  {status === 'error' && (
+                    <div className="p-4 bg-red-50 text-red-600 rounded-xl text-sm font-medium border border-red-100 flex items-center gap-2">
+                      <span className="material-symbols-outlined text-sm">error</span>
+                      Une erreur est survenue. Veuillez réessayer ou nous contacter directement par email.
+                    </div>
+                  )}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                      <label className="text-sm font-bold text-slate-700 ml-1">Prénom</label>
+                      <input
+                        type="text"
+                        name="firstName"
+                        required
+                        value={formData.firstName}
+                        onChange={handleChange}
+                        className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
+                        placeholder="Jean"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-sm font-bold text-slate-700 ml-1">Nom</label>
+                      <input
+                        type="text"
+                        name="lastName"
+                        required
+                        value={formData.lastName}
+                        onChange={handleChange}
+                        className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
+                        placeholder="Dupont"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-bold text-slate-700 ml-1">Email</label>
+                    <input
+                      type="email"
+                      name="email"
+                      required
+                      value={formData.email}
+                      onChange={handleChange}
+                      className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
+                      placeholder="jean.dupont@gmail.be"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-bold text-slate-700 ml-1">Votre message (facultatif)</label>
+                    <textarea
+                      name="message"
+                      rows={4}
+                      value={formData.message}
+                      onChange={handleChange}
+                      className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none"
+                      placeholder="Parlez-nous de votre projet..."
+                    ></textarea>
+                  </div>
+                  <button
+                    type="submit"
+                    disabled={status === 'loading'}
+                    className={`w-full py-5 bg-slate-900 text-white font-extrabold rounded-2xl shadow-xl hover:bg-slate-800 transition-all flex items-center justify-center gap-3 group ${status === 'loading' ? 'opacity-70 cursor-not-allowed' : ''}`}
+                  >
+                    {status === 'loading' ? (
+                      <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
+                    ) : (
+                      <>
+                        Envoyer ma demande
+                        <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
+                      </>
+                    )}
+                  </button>
+                </form>
+              )}
+            </div>
+          </div>
+        </section>
       </div>
 
       {/* Footer */}