UNOV/myinfomate-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added form contact and send email via formspree

Browse Source
This commit is contained in:
Thomas Fransolet 2026-02-19 17:32:08 +01:00
parent c372418f58
commit 36d69fe2b4
1 changed files with 168 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/app/page.tsx
View File

@ -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 */}