GISE/landing-page-GISE
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Test #2

Merged
maxime.daniels merged 3 commits from test into master 2026-07-28 19:00:57 +02:00
Conversation 0 Commits 3 Files Changed 3
+69 -26
3 changed files with 69 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 32e1068ace - Show all commits
src/index.css
+7
View File
@@ -3,6 +3,13 @@
/* Configuration pour forcer le mode sombre via une classe .dark */
@custom-variant dark (&:where(.dark, .dark *));
@layer base {
:root {
--color-gise-blue: #1a73e8;
--color-gise-emerald: #10b981;
}
}
@theme {
--color-gise-accent: #2563eb;
--color-gise-accentHover: #1d4ed8;
src/pages/GiseLandingPage.tsx
+52 -16
View File
@@ -378,7 +378,7 @@ export default function GiseLandingPage() {
</section>
{/* --- SECTEURS D'ACTIVITÉ (Google Material Category Cards) --- */}
<section id="secteurs" className="py-20 bg-white dark:bg-slate-900/40 border-t border-slate-200/80 dark:border-slate-800/80">
<section id="secteurs" className="py-20 bg-white/60 dark:bg-slate-900/85 border-t border-slate-200/80 dark:border-slate-800/80">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
<span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
@@ -472,10 +472,8 @@ export default function GiseLandingPage() {
</div>
{/* GISE */}
<div className="p-8 rounded-[28px] bg-blue-50/60 dark:bg-blue-950/30 border-2 border-blue-600/40 space-y-4 relative">
<span className="absolute -top-3 right-6 bg-blue-600 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-0.5 rounded-full shadow-sm">
Recommandé
</span>
<div className="p-8 rounded-[28px] bg-blue-50 dark:bg-blue-950 border-2 border-blue-600/40 space-y-4 relative">
<h3 className="font-bold text-blue-600 dark:text-blue-400 text-xs uppercase tracking-wider">Offre GISE & AEGIS</h3>
<ul className="space-y-3.5 text-xs text-slate-800 dark:text-slate-200 font-semibold">
<li className="flex items-start gap-2.5">
@@ -495,16 +493,16 @@ export default function GiseLandingPage() {
</div>
</section>
{/* FORMULAIRE DE CONTACT (Google Forms Outlined Material Style) */}
<section id="contact" className="py-24 bg-white dark:bg-slate-900/60 border-t border-slate-200/80 dark:border-slate-800">
{/* FORMULAIRE DE CONTACT (Web3Forms + Google Material Style) */}
<section id="contact" className="py-24 bg-white dark:bg-slate-900 border-t border-slate-200/80 dark:border-slate-800 transition-colors">
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12 space-y-2">
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
Demandez votre diagnostic offert
Demandez votre diagnostic
</h2>
<p className="text-slate-600 dark:text-slate-400 text-sm">
Un premier bilan rapide de votre infrastructure, sans aucun engagement.
Un premier bilan rapide de votre infrastructure, sans engagement.
</p>
</div>
@@ -517,13 +515,43 @@ export default function GiseLandingPage() {
</p>
<button
onClick={() => setFormStatus('idle')}
className="mt-4 text-xs font-semibold text-blue-600 hover:underline"
className="mt-4 text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline"
>
Envoyer un autre message
</button>
</div>
) : (
<form onSubmit={handleContactSubmit} className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px]">
<form
onSubmit={async (event) => {
event.preventDefault();
setFormStatus('submitting');
// Logique officielle Web3Forms
const formData = new FormData(event.currentTarget);
formData.append("access_key", "6d360b7b-731f-4cbc-b6d1-9e9f21504bcc"); // <-- Votre clé
formData.append("subject", "Demande de diagnostic (Site GISE)");
try {
const response = await fetch("https://api.web3forms.com/submit", {
method: "POST",
body: formData
});
const data = await response.json();
if (data.success) {
setFormStatus('success');
} else {
setFormStatus('idle');
alert("Erreur lors de l'envoi : " + data.message);
}
} catch (error) {
setFormStatus('idle');
alert("Erreur de connexion. Veuillez réessayer.");
}
}}
className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px] shadow-sm"
>
<div className="grid sm:grid-cols-2 gap-4">
<div>
@@ -535,6 +563,7 @@ export default function GiseLandingPage() {
required
type="text"
id="name"
name="name" // Indispensable pour Web3Forms
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
placeholder="Jean Dupont"
/>
@@ -551,6 +580,7 @@ export default function GiseLandingPage() {
required
type="text"
id="company"
name="company" // Indispensable
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
placeholder="Cabinet Dupont & Associés"
/>
@@ -569,6 +599,7 @@ export default function GiseLandingPage() {
required
type="email"
id="email"
name="email" // Indispensable
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
placeholder="jean@dupont-avocats.be"
/>
@@ -582,11 +613,12 @@ export default function GiseLandingPage() {
</label>
<select
id="size"
name="taille_parc" // Nom du champ dans le mail
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
>
<option>5 à 15 postes</option>
<option>15 à 50 postes</option>
<option>Plus de 50 postes</option>
<option value="5 à 15 postes">5 à 15 postes</option>
<option value="15 à 50 postes">15 à 50 postes</option>
<option value="Plus de 50 postes">Plus de 50 postes</option>
</select>
</div>
</div>
@@ -599,6 +631,7 @@ export default function GiseLandingPage() {
<textarea
required
id="message"
name="message" // Indispensable
rows={4}
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs resize-none transition-all"
placeholder="Décrivez brièvement votre informatique actuelle..."
@@ -607,12 +640,15 @@ export default function GiseLandingPage() {
</div>
</div>
{/* Protection Anti-spam native de Web3Forms */}
<input type="checkbox" name="botcheck" className="hidden" style={{ display: 'none' }} />
<button
disabled={formStatus === 'submitting'}
type="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 rounded-full transition-all flex items-center justify-center gap-2 shadow-sm disabled:opacity-70 text-xs active:scale-95"
>
{formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic offert'}
{formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic'}
</button>
</form>
)}
@@ -627,7 +663,7 @@ export default function GiseLandingPage() {
<div className="h-6 w-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
<Shield className="h-3.5 w-3.5" />
</div>
<span className="font-bold text-slate-900 dark:text-white text-sm">GISE SRL</span>
<span className="font-bold text-slate-900 dark:text-white text-sm">GISE</span>
</div>
<div className="flex flex-wrap justify-center gap-x-6 gap-y-2 font-medium">