bed824059a
- Added .gitignore to exclude unnecessary files and directories. - Created next.config.js for Next.js configuration. - Set up package.json and package-lock.json with dependencies including Next.js, React, and TypeScript. - Implemented Tailwind CSS for styling with a dedicated tailwind.config.ts. - Developed core application structure including layout, pages, and components for header, footer, and various sections (Hero, Services, Pricing, etc.). - Integrated contact form functionality using nodemailer for email handling. - Established global styles in globals.css and added animations with Framer Motion. - Included README.md for project documentation and setup instructions.
313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { useState } from 'react'
|
|
import { Mail, Phone, MapPin, Clock, Send, Shield, MessageSquare } from 'lucide-react'
|
|
import BackgroundAnimations from '@/components/BackgroundAnimations'
|
|
|
|
const contactInfo = [
|
|
{
|
|
icon: Mail,
|
|
label: 'Email',
|
|
value: 'contact@runlock.re',
|
|
href: 'mailto:contact@runlock.re',
|
|
},
|
|
{
|
|
icon: Phone,
|
|
label: 'Téléphone',
|
|
value: '0693 51 15 58',
|
|
href: 'tel:0693511558',
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
label: 'Adresse',
|
|
value: 'La Réunion',
|
|
href: null,
|
|
},
|
|
{
|
|
icon: Clock,
|
|
label: 'Horaires',
|
|
value: 'Lundi - Vendredi: 9h00 - 18h00\nWeekend: Fermé',
|
|
href: null,
|
|
},
|
|
]
|
|
|
|
const services = [
|
|
'Hébergement Cloud',
|
|
'Installation NAS',
|
|
'Installation Mini PC',
|
|
'Autre',
|
|
]
|
|
|
|
export default function Contact() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
service: '',
|
|
message: '',
|
|
})
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [submitStatus, setSubmitStatus] = useState<{ type: 'success' | 'error' | null; message: string }>({
|
|
type: null,
|
|
message: '',
|
|
})
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setIsSubmitting(true)
|
|
setSubmitStatus({ type: null, message: '' })
|
|
|
|
try {
|
|
const response = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (response.ok) {
|
|
setSubmitStatus({
|
|
type: 'success',
|
|
message: data.message || 'Votre message a été envoyé avec succès !',
|
|
})
|
|
// Réinitialiser le formulaire
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
service: '',
|
|
message: '',
|
|
})
|
|
} else {
|
|
setSubmitStatus({
|
|
type: 'error',
|
|
message: data.error || 'Une erreur est survenue. Veuillez réessayer.',
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de l\'envoi du formulaire:', error)
|
|
setSubmitStatus({
|
|
type: 'error',
|
|
message: 'Une erreur est survenue lors de l\'envoi de votre message. Veuillez réessayer.',
|
|
})
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section id="contact" className="section-padding bg-security-darker relative overflow-hidden">
|
|
<BackgroundAnimations variant="gradient" />
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
{/* Centered Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<div className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6">
|
|
<MessageSquare className="w-10 h-10 text-security-accent" />
|
|
</div>
|
|
<h2 className="text-5xl md:text-6xl font-black mb-4 text-white">
|
|
<span className="gradient-text">Contactez-nous</span>
|
|
</h2>
|
|
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
|
Nous sommes là pour répondre à vos questions
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="grid lg:grid-cols-3 gap-8">
|
|
{/* Left - Contact Info Cards */}
|
|
<div className="lg:col-span-1 space-y-4">
|
|
{contactInfo.map((info, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="card-dark p-5 rounded-xl card-hover"
|
|
>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="w-12 h-12 bg-security-accent/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<info.icon className="w-6 h-6 text-security-accent" />
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-gray-500 mb-1">{info.label}</div>
|
|
{info.href ? (
|
|
<a
|
|
href={info.href}
|
|
className="text-white hover:text-security-accent transition-colors font-medium text-sm"
|
|
>
|
|
{info.value}
|
|
</a>
|
|
) : (
|
|
<div className="text-white whitespace-pre-line font-medium text-sm">{info.value}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
|
|
{/* Security Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
className="card-dark p-5 rounded-xl border border-security-accent/20"
|
|
>
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
<Shield className="w-5 h-5 text-security-accent" />
|
|
<span className="text-white font-semibold text-sm">Protection anti-spam</span>
|
|
</div>
|
|
<p className="text-gray-400 text-xs">
|
|
Vos données sont sécurisées et ne seront jamais partagées.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Right - Contact Form */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="lg:col-span-2 card-dark p-8 rounded-3xl"
|
|
>
|
|
<h3 className="text-2xl font-bold text-white mb-6">Envoyez-nous un message</h3>
|
|
|
|
{/* Message de statut */}
|
|
{submitStatus.type && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className={`p-4 rounded-xl mb-6 ${
|
|
submitStatus.type === 'success'
|
|
? 'bg-green-500/10 border border-green-500/30 text-green-400'
|
|
: 'bg-red-500/10 border border-red-500/30 text-red-400'
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
{submitStatus.type === 'success' ? (
|
|
<Shield className="w-5 h-5" />
|
|
) : (
|
|
<MessageSquare className="w-5 h-5" />
|
|
)}
|
|
<span className="text-sm font-medium">{submitStatus.message}</span>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div className="grid md:grid-cols-2 gap-5">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-400 mb-2">
|
|
Nom complet
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full px-4 py-3 bg-security-dark border border-security-border rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-security-accent transition-colors"
|
|
placeholder="Votre nom"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
className="w-full px-4 py-3 bg-security-dark border border-security-border rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-security-accent transition-colors"
|
|
placeholder="votre@email.com"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-5">
|
|
<div>
|
|
<label htmlFor="company" className="block text-sm font-medium text-gray-400 mb-2">
|
|
Entreprise
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
value={formData.company}
|
|
onChange={(e) => setFormData({ ...formData, company: e.target.value })}
|
|
className="w-full px-4 py-3 bg-security-dark border border-security-border rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-security-accent transition-colors"
|
|
placeholder="Nom de votre entreprise"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="service" className="block text-sm font-medium text-gray-400 mb-2">
|
|
Service souhaité
|
|
</label>
|
|
<select
|
|
id="service"
|
|
value={formData.service}
|
|
onChange={(e) => setFormData({ ...formData, service: e.target.value })}
|
|
className="w-full px-4 py-3 bg-security-dark border border-security-border rounded-xl text-white focus:outline-none focus:border-security-accent transition-colors"
|
|
required
|
|
>
|
|
<option value="">Sélectionnez un service</option>
|
|
{services.map((service) => (
|
|
<option key={service} value={service}>
|
|
{service}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-gray-400 mb-2">
|
|
Message
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
value={formData.message}
|
|
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
|
rows={5}
|
|
className="w-full px-4 py-3 bg-security-dark border border-security-border rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-security-accent transition-colors resize-none"
|
|
placeholder="Votre message..."
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<motion.button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
whileHover={!isSubmitting ? { scale: 1.02 } : {}}
|
|
whileTap={!isSubmitting ? { scale: 0.98 } : {}}
|
|
className={`w-full py-4 px-6 bg-gradient-to-r from-security-accent to-green-500 text-black rounded-xl font-bold shadow-lg shadow-security-accent/50 hover:shadow-xl transition-all duration-300 flex items-center justify-center space-x-2 ${
|
|
isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
|
|
}`}
|
|
>
|
|
<span>{isSubmitting ? 'Envoi en cours...' : 'Envoyer le message'}</span>
|
|
{!isSubmitting && <Send className="w-5 h-5" />}
|
|
</motion.button>
|
|
</form>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|