510 lines
21 KiB
TypeScript
510 lines
21 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Shield, ArrowLeft, Mail, User, MessageSquare, CheckCircle, Lightbulb, Loader2 } from 'lucide-react'
|
|
import { submitContactForm } from '@/app/actions/contact'
|
|
|
|
export default function ContactPage() {
|
|
const [formData, setFormData] = useState({
|
|
nom: '',
|
|
prenom: '',
|
|
email: '',
|
|
telephone: '',
|
|
entreprise: '',
|
|
fonction: '',
|
|
typeProjet: '',
|
|
budget: '',
|
|
delai: '',
|
|
description: '',
|
|
objectifs: '',
|
|
contraintes: '',
|
|
services: [] as string[],
|
|
demo: false,
|
|
accompagnement: false
|
|
})
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [submitResult, setSubmitResult] = useState<{ success: boolean; message: string } | null>(null)
|
|
|
|
const handleServiceChange = (service: string, checked: boolean) => {
|
|
if (checked) {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
services: [...prev.services, service]
|
|
}))
|
|
} else {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
services: prev.services.filter(s => s !== service)
|
|
}))
|
|
}
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
// Validation côté client
|
|
if (formData.description.trim().length < 10) {
|
|
setSubmitResult({
|
|
success: false,
|
|
message: 'La description doit contenir au moins 10 caractères.'
|
|
})
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
setSubmitResult(null)
|
|
|
|
try {
|
|
const formDataToSend = new FormData()
|
|
|
|
// Ajout de tous les champs au FormData
|
|
Object.entries(formData).forEach(([key, value]) => {
|
|
if (key === 'services') {
|
|
value.forEach((service: string) => formDataToSend.append('services', service))
|
|
} else if (typeof value === 'boolean') {
|
|
formDataToSend.append(key, value.toString())
|
|
} else {
|
|
formDataToSend.append(key, value)
|
|
}
|
|
})
|
|
|
|
const result = await submitContactForm(formDataToSend)
|
|
setSubmitResult(result)
|
|
|
|
if (result.success) {
|
|
// Reset du formulaire en cas de succès
|
|
setFormData({
|
|
nom: '',
|
|
prenom: '',
|
|
email: '',
|
|
telephone: '',
|
|
entreprise: '',
|
|
fonction: '',
|
|
typeProjet: '',
|
|
budget: '',
|
|
delai: '',
|
|
description: '',
|
|
objectifs: '',
|
|
contraintes: '',
|
|
services: [],
|
|
demo: false,
|
|
accompagnement: false
|
|
})
|
|
}
|
|
} catch (error) {
|
|
setSubmitResult({
|
|
success: false,
|
|
message: 'Une erreur inattendue est survenue. Veuillez réessayer.'
|
|
})
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
if (submitResult?.success) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center p-4">
|
|
<Card className="w-full max-w-2xl border-2 border-green-200 bg-green-50">
|
|
<CardHeader className="text-center">
|
|
<CheckCircle className="h-16 w-16 text-green-600 mx-auto mb-4" />
|
|
<CardTitle className="text-3xl text-green-700">Message envoyé !</CardTitle>
|
|
<CardDescription className="text-lg">
|
|
{submitResult.message}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="text-center space-y-6">
|
|
<div className="bg-white p-6 rounded-lg border border-green-200">
|
|
<h3 className="font-semibold text-green-800 mb-3">Prochaines étapes :</h3>
|
|
<ul className="text-left space-y-2 text-gray-700">
|
|
<li>• Un expert DocV vous contactera sous 24h</li>
|
|
<li>• Analyse de votre projet et de vos besoins</li>
|
|
<li>• Proposition de solution personnalisée</li>
|
|
<li>• Planification d'une démonstration si demandée</li>
|
|
</ul>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<p className="text-gray-600">
|
|
<strong>Contact direct :</strong> contact@docv.fr
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Link href="/">
|
|
<Button variant="outline">Retour à l'accueil</Button>
|
|
</Link>
|
|
<Link href="/formation">
|
|
<Button>Découvrir nos formations</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
|
{/* Header */}
|
|
<header className="border-b bg-white/80 backdrop-blur-sm">
|
|
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<Shield className="h-8 w-8 text-blue-600" />
|
|
<span className="text-2xl font-bold text-gray-900">DocV</span>
|
|
<Badge variant="secondary" className="ml-2">By 4NK</Badge>
|
|
</Link>
|
|
<Link href="/" className="flex items-center text-blue-600 hover:text-blue-700">
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Retour à l'accueil
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Hero */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
|
Contactez-nous pour <span className="text-blue-600">votre projet</span>
|
|
</h1>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Discutons de votre projet de souveraineté numérique. Nos experts vous accompagnent
|
|
dans la mise en œuvre de solutions DocV adaptées à vos besoins.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Message d'erreur */}
|
|
{submitResult && !submitResult.success && (
|
|
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
|
|
<p className="text-red-700">{submitResult.message}</p>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
{/* Informations Contact */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center">
|
|
<User className="h-5 w-5 mr-2 text-blue-600" />
|
|
Vos informations
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Renseignez vos coordonnées pour que nous puissions vous recontacter
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="nom">Nom *</Label>
|
|
<Input
|
|
id="nom"
|
|
value={formData.nom}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, nom: e.target.value }))}
|
|
placeholder="Votre nom"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="prenom">Prénom *</Label>
|
|
<Input
|
|
id="prenom"
|
|
value={formData.prenom}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, prenom: e.target.value }))}
|
|
placeholder="Votre prénom"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email *</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
|
placeholder="votre.email@entreprise.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="telephone">Téléphone</Label>
|
|
<Input
|
|
id="telephone"
|
|
type="tel"
|
|
value={formData.telephone}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, telephone: e.target.value }))}
|
|
placeholder="01 23 45 67 89"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="entreprise">Entreprise</Label>
|
|
<Input
|
|
id="entreprise"
|
|
value={formData.entreprise}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, entreprise: e.target.value }))}
|
|
placeholder="Nom de votre entreprise"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="fonction">Fonction</Label>
|
|
<Input
|
|
id="fonction"
|
|
value={formData.fonction}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, fonction: e.target.value }))}
|
|
placeholder="Votre fonction"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Type de projet */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center">
|
|
<Lightbulb className="h-5 w-5 mr-2 text-blue-600" />
|
|
Votre projet
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Décrivez-nous votre projet et vos besoins
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-3">
|
|
<Label>Type de projet</Label>
|
|
<RadioGroup
|
|
value={formData.typeProjet}
|
|
onValueChange={(value) => setFormData(prev => ({ ...prev, typeProjet: value }))}
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="integration" id="integration" />
|
|
<Label htmlFor="integration">Intégration DocV dans notre système</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="developpement" id="developpement" />
|
|
<Label htmlFor="developpement">Développement d'une solution sur-mesure</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="migration" id="migration" />
|
|
<Label htmlFor="migration">Migration vers une GED souveraine</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="conseil" id="conseil" />
|
|
<Label htmlFor="conseil">Conseil en souveraineté numérique</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="autre" id="autre" />
|
|
<Label htmlFor="autre">Autre</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="budget">Budget estimé</Label>
|
|
<Select onValueChange={(value) => setFormData(prev => ({ ...prev, budget: value }))}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Sélectionnez une fourchette" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="<10k">Moins de 10k€</SelectItem>
|
|
<SelectItem value="10k-50k">10k€ - 50k€</SelectItem>
|
|
<SelectItem value="50k-100k">50k€ - 100k€</SelectItem>
|
|
<SelectItem value="100k-500k">100k€ - 500k€</SelectItem>
|
|
<SelectItem value=">500k">Plus de 500k€</SelectItem>
|
|
<SelectItem value="non-defini">Non défini</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="delai">Délai souhaité</Label>
|
|
<Select onValueChange={(value) => setFormData(prev => ({ ...prev, delai: value }))}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Échéance du projet" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="urgent">Urgent (< 1 mois)</SelectItem>
|
|
<SelectItem value="court">Court terme (1-3 mois)</SelectItem>
|
|
<SelectItem value="moyen">Moyen terme (3-6 mois)</SelectItem>
|
|
<SelectItem value="long">Long terme ({'> 6 mois'})</SelectItem>
|
|
<SelectItem value="flexible">Flexible</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Services souhaités */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Services souhaités</CardTitle>
|
|
<CardDescription>
|
|
Sélectionnez les services qui vous intéressent
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="ged-souveraine"
|
|
checked={formData.services.includes('ged-souveraine')}
|
|
onCheckedChange={(checked) => handleServiceChange('ged-souveraine', checked as boolean)}
|
|
/>
|
|
<Label htmlFor="ged-souveraine">GED souveraine DocV</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="integration-marque-blanche"
|
|
checked={formData.services.includes('integration-marque-blanche')}
|
|
onCheckedChange={(checked) => handleServiceChange('integration-marque-blanche', checked as boolean)}
|
|
/>
|
|
<Label htmlFor="integration-marque-blanche">Intégration marque blanche</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="solutions-open-source"
|
|
checked={formData.services.includes('solutions-open-source')}
|
|
onCheckedChange={(checked) => handleServiceChange('solutions-open-source', checked as boolean)}
|
|
/>
|
|
<Label htmlFor="solutions-open-source">Solutions open source</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="formation"
|
|
checked={formData.services.includes('formation')}
|
|
onCheckedChange={(checked) => handleServiceChange('formation', checked as boolean)}
|
|
/>
|
|
<Label htmlFor="formation">Formation et accompagnement</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="audit"
|
|
checked={formData.services.includes('audit')}
|
|
onCheckedChange={(checked) => handleServiceChange('audit', checked as boolean)}
|
|
/>
|
|
<Label htmlFor="audit">Audit de sécurité</Label>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Description détaillée */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center">
|
|
<MessageSquare className="h-5 w-5 mr-2 text-blue-600" />
|
|
Description du projet
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Description générale *</Label>
|
|
<Textarea
|
|
id="description"
|
|
value={formData.description}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
|
placeholder="Décrivez votre projet, vos besoins, votre contexte... (minimum 10 caractères)"
|
|
rows={4}
|
|
required
|
|
className={formData.description.trim().length > 0 && formData.description.trim().length < 10 ? 'border-red-300' : ''}
|
|
/>
|
|
<p className="text-sm text-gray-500">
|
|
{formData.description.trim().length}/10 caractères minimum
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="objectifs">Objectifs principaux</Label>
|
|
<Textarea
|
|
id="objectifs"
|
|
value={formData.objectifs}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, objectifs: e.target.value }))}
|
|
placeholder="Quels sont vos objectifs avec ce projet ?"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="contraintes">Contraintes techniques ou organisationnelles</Label>
|
|
<Textarea
|
|
id="contraintes"
|
|
value={formData.contraintes}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, contraintes: e.target.value }))}
|
|
placeholder="Contraintes techniques, réglementaires, budgétaires..."
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Options */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Options</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="demo"
|
|
checked={formData.demo}
|
|
onCheckedChange={(checked) => setFormData(prev => ({ ...prev, demo: checked as boolean }))}
|
|
/>
|
|
<Label htmlFor="demo">
|
|
Je souhaite une démonstration de DocV
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="accompagnement"
|
|
checked={formData.accompagnement}
|
|
onCheckedChange={(checked) => setFormData(prev => ({ ...prev, accompagnement: checked as boolean }))}
|
|
/>
|
|
<Label htmlFor="accompagnement">
|
|
Je souhaite un accompagnement personnalisé
|
|
</Label>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Submit */}
|
|
<div className="text-center">
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
className="text-lg px-12 py-3"
|
|
disabled={isSubmitting || formData.description.trim().length < 10}
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Loader2 className="h-5 w-5 mr-2 animate-spin" />
|
|
Envoi en cours...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Mail className="h-5 w-5 mr-2" />
|
|
Envoyer la demande
|
|
</>
|
|
)}
|
|
</Button>
|
|
<p className="text-sm text-gray-600 mt-4">
|
|
Réponse sous 24h • Contact direct : contact@docv.fr
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|