355 lines
14 KiB
TypeScript
355 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { Turnstile } from "@marsidev/react-turnstile";
|
|
import { motion, useInView } from "framer-motion";
|
|
import {
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
Github,
|
|
Linkedin,
|
|
Mail,
|
|
Send,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
import { useRef, useState } from "react";
|
|
|
|
const contactMethods = [
|
|
{
|
|
icon: Mail,
|
|
label: "Email",
|
|
value: "contact@jessy-david.dev",
|
|
href: "mailto:contact@jessy-david.dev",
|
|
color: "from-blue-500 to-cyan-500",
|
|
},
|
|
{
|
|
icon: Github,
|
|
label: "GitHub",
|
|
value: "@jessydavid",
|
|
href: "https://github.com/jessy-david-dev",
|
|
color: "from-slate-700 to-slate-900",
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
label: "LinkedIn",
|
|
value: "Jessy David",
|
|
href: "https://linkedin.com/in/jessy-david",
|
|
color: "from-blue-600 to-blue-800",
|
|
},
|
|
];
|
|
|
|
export default function Contact() {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [captchaToken, setCaptchaToken] = useState<string>("");
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
const form = e.currentTarget;
|
|
|
|
setIsSubmitting(true);
|
|
setError("");
|
|
setIsSubmitted(false);
|
|
|
|
if (!captchaToken) {
|
|
setError("Veuillez valider le captcha");
|
|
setIsSubmitting(false);
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(form);
|
|
const data = {
|
|
name: formData.get("name") as string,
|
|
email: formData.get("email") as string,
|
|
message: formData.get("message") as string,
|
|
captchaToken,
|
|
};
|
|
|
|
try {
|
|
const response = await fetch("/api/contact", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const result = await response.json();
|
|
throw new Error(result.error || "Erreur lors de l'envoi");
|
|
}
|
|
|
|
const result = await response.json();
|
|
console.log("Succès:", result);
|
|
|
|
setIsSubmitted(true);
|
|
form.reset();
|
|
setCaptchaToken("");
|
|
setTimeout(() => setIsSubmitted(false), 5000);
|
|
} catch (err) {
|
|
console.error("Erreur:", err);
|
|
setError(
|
|
err instanceof Error ? err.message : "Impossible d'envoyer le message.",
|
|
);
|
|
setCaptchaToken("");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section
|
|
id="contact"
|
|
className="py-20 bg-slate-900 relative overflow-hidden"
|
|
>
|
|
{/* Grid Background */}
|
|
<div
|
|
className="absolute inset-0 opacity-20"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
|
backgroundSize: "60px 60px",
|
|
}}
|
|
></div>
|
|
|
|
{/* Decorative blobs */}
|
|
<div className="absolute top-20 left-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
|
|
<div ref={ref} className="container mx-auto px-4 max-w-7xl relative z-10">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
|
|
<Sparkles className="w-4 h-4 text-blue-400" />
|
|
<span className="text-sm font-semibold text-slate-300">
|
|
Entrons en contact
|
|
</span>
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
|
Contactez-moi
|
|
</h2>
|
|
<p className="text-xl text-slate-400 max-w-2xl mx-auto">
|
|
Un projet en tête ? Une question ? N'hésitez pas à me contacter
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-8">
|
|
{/* Colonne de gauche - Méthodes de contact */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="space-y-6"
|
|
>
|
|
{/* Cartes de contact */}
|
|
<div className="space-y-4">
|
|
{contactMethods.map((method, index) => (
|
|
<motion.a
|
|
key={method.label}
|
|
href={method.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={
|
|
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
|
|
}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: 0.3 + index * 0.1,
|
|
}}
|
|
className="block group"
|
|
>
|
|
<div className="relative bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6 hover:border-blue-500/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-500/10">
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className={`p-3 bg-linear-to-br ${method.color} rounded-xl group-hover:scale-110 transition-transform duration-300`}
|
|
>
|
|
<method.icon className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-semibold text-slate-400 mb-1">
|
|
{method.label}
|
|
</h3>
|
|
<p className="text-white font-semibold">
|
|
{method.value}
|
|
</p>
|
|
</div>
|
|
<Send className="w-5 h-5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-1 transition-all duration-300" />
|
|
</div>
|
|
</div>
|
|
</motion.a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Informations complémentaires */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
|
transition={{ duration: 0.5, delay: 0.6 }}
|
|
className="bg-linear-to-br from-blue-500/10 to-purple-500/10 backdrop-blur-sm border border-blue-500/20 rounded-2xl p-6"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="relative h-3 w-3 mt-1">
|
|
{/* Effet ping */}
|
|
<span className="absolute h-3 w-3 rounded-full bg-green-500 opacity-75 animate-ping"></span>
|
|
{/* Pastille fixe */}
|
|
<span className="absolute h-3 w-3 rounded-full bg-green-500"></span>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-2">
|
|
Disponibilité
|
|
</h3>
|
|
<p className="text-slate-400">
|
|
Actuellement disponible pour vos projets.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Colonne de droite - Formulaire de contact */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
>
|
|
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-8">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
className="block text-sm font-semibold text-slate-300 mb-2"
|
|
>
|
|
Nom
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
disabled={isSubmitting}
|
|
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
placeholder="Votre Nom et Prénom"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-semibold text-slate-300 mb-2"
|
|
>
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
disabled={isSubmitting}
|
|
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
placeholder="votre@email.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="message"
|
|
className="block text-sm font-semibold text-slate-300 mb-2"
|
|
>
|
|
Message
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows={5}
|
|
required
|
|
disabled={isSubmitting}
|
|
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 resize-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
placeholder="Parlez-moi de votre projet..."
|
|
></textarea>
|
|
</div>
|
|
|
|
{/* Cloudflare Turnstile */}
|
|
<div className="flex justify-center">
|
|
<Turnstile
|
|
siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || ""}
|
|
onSuccess={(token) => setCaptchaToken(token)}
|
|
onError={() => setCaptchaToken("")}
|
|
onExpire={() => setCaptchaToken("")}
|
|
options={{
|
|
theme: "dark",
|
|
size: "normal",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Message d'erreur */}
|
|
{error && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex items-center gap-2 p-4 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 text-sm"
|
|
>
|
|
<AlertCircle className="w-5 h-5 shrink-0" />
|
|
<span>{error}</span>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Message de succès */}
|
|
{isSubmitted && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex items-center gap-2 p-4 bg-green-500/10 border border-green-500/50 rounded-lg text-green-400 text-sm"
|
|
>
|
|
<CheckCircle2 className="w-5 h-5 shrink-0" />
|
|
<span>
|
|
Message envoyé avec succès ! Je vous répondrai bientôt.
|
|
</span>
|
|
</motion.div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting || isSubmitted || !captchaToken}
|
|
className="w-full relative group disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<div className="absolute inset-0 bg-linear-to-r from-blue-600 to-purple-600 rounded-lg opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
|
|
<div className="absolute inset-0 bg-linear-to-r from-purple-600 to-blue-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
|
|
<div className="relative px-8 py-3 text-white font-semibold flex items-center justify-center gap-2">
|
|
{isSubmitting ? (
|
|
<>
|
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
Envoi en cours...
|
|
</>
|
|
) : isSubmitted ? (
|
|
<>
|
|
<CheckCircle2 className="w-5 h-5" />
|
|
Message envoyé !
|
|
</>
|
|
) : (
|
|
<>
|
|
<Send className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" />
|
|
Envoyer le message
|
|
</>
|
|
)}
|
|
</div>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|