Lou/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initialize Next.js project with essential configurations and components

Browse Source 
- 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.
This commit is contained in:
SarTron-NorthBlue
2025-11-14 16:15:21 +04:00
commit bed824059a
24 changed files with 4229 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
components/sections/Contact.tsx Normal file
View File

@@ -0,0 +1,312 @@
'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>
)
}