343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from "react";
|
||
import type { Metadata } from "next";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||
import Button from "@/components/Button";
|
||
|
||
export default function ContactPage() {
|
||
const [formData, setFormData] = useState({
|
||
fullName: '',
|
||
email: '',
|
||
subject: '',
|
||
message: '',
|
||
notRobot: false,
|
||
});
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||
const { name, value } = e.target;
|
||
setFormData(prev => ({ ...prev, [name]: value }));
|
||
};
|
||
|
||
const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
setFormData(prev => ({ ...prev, notRobot: e.target.checked }));
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsSubmitting(true);
|
||
|
||
// Simulation d'envoi
|
||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||
|
||
console.log('Form submitted:', formData);
|
||
alert('Votre message a été envoyé avec succès !');
|
||
|
||
// Reset form
|
||
setFormData({
|
||
fullName: '',
|
||
email: '',
|
||
subject: '',
|
||
message: '',
|
||
notRobot: false,
|
||
});
|
||
setIsSubmitting(false);
|
||
};
|
||
|
||
return (
|
||
<div className="py-12">
|
||
{/* Hero Section */}
|
||
<section className="text-center mb-16">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||
Contactez-nous
|
||
</h1>
|
||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
||
Une question, une suggestion ? Notre équipe est là pour vous accompagner.
|
||
</p>
|
||
</section>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-12 mb-16">
|
||
{/* Contact Form */}
|
||
<div>
|
||
<Card className="shadow-xl">
|
||
<CardHeader className="bg-gradient-to-r from-primary-50 to-green-50">
|
||
<CardTitle className="text-2xl text-primary-800">
|
||
Envoyez-nous un message
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="pt-6">
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
{/* Nom complet */}
|
||
<div>
|
||
<label htmlFor="fullName" className="block text-sm font-medium text-gray-700 mb-2">
|
||
Nom complet <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
id="fullName"
|
||
name="fullName"
|
||
type="text"
|
||
required
|
||
value={formData.fullName}
|
||
onChange={handleChange}
|
||
placeholder="Votre nom et prénom"
|
||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
{/* Email */}
|
||
<div>
|
||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||
Email <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
required
|
||
value={formData.email}
|
||
onChange={handleChange}
|
||
placeholder="votre@email.com"
|
||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
{/* Sujet */}
|
||
<div>
|
||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
|
||
Sujet <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
id="subject"
|
||
name="subject"
|
||
type="text"
|
||
required
|
||
value={formData.subject}
|
||
onChange={handleChange}
|
||
placeholder="L'objet de votre message"
|
||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
|
||
{/* Message */}
|
||
<div>
|
||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
||
Message <span className="text-red-500">*</span>
|
||
</label>
|
||
<textarea
|
||
id="message"
|
||
name="message"
|
||
required
|
||
value={formData.message}
|
||
onChange={handleChange}
|
||
placeholder="Décrivez votre demande..."
|
||
rows={6}
|
||
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
|
||
/>
|
||
</div>
|
||
|
||
{/* Checkbox Robot */}
|
||
<div className="flex items-center gap-3">
|
||
<input
|
||
id="notRobot"
|
||
name="notRobot"
|
||
type="checkbox"
|
||
required
|
||
checked={formData.notRobot}
|
||
onChange={handleCheckboxChange}
|
||
className="w-5 h-5 text-primary-600 border-gray-300 rounded focus:ring-2 focus:ring-primary-500"
|
||
/>
|
||
<label htmlFor="notRobot" className="text-gray-700 select-none cursor-pointer">
|
||
Je ne suis pas un robot 🤖
|
||
</label>
|
||
</div>
|
||
|
||
{/* Submit Button */}
|
||
<div>
|
||
<Button
|
||
type="submit"
|
||
isLoading={isSubmitting}
|
||
disabled={isSubmitting}
|
||
size="lg"
|
||
className="w-full"
|
||
>
|
||
{isSubmitting ? "Envoi en cours..." : "Envoyer le message"}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Contact Info */}
|
||
<div className="space-y-6">
|
||
<Card className="shadow-lg">
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">Nos coordonnées</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Adresse */}
|
||
<div className="flex items-start gap-4">
|
||
<div className="text-3xl">📍</div>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Adresse</h3>
|
||
<p className="text-gray-600">
|
||
123 Avenue des Thés<br />
|
||
06000 Nice, France
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Téléphone */}
|
||
<div className="flex items-start gap-4">
|
||
<div className="text-3xl">📞</div>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Téléphone</h3>
|
||
<p className="text-gray-600">
|
||
<a href="tel:+33187673218" className="hover:text-primary-600 transition-colors">
|
||
+33 1 87 67 32 18
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Email */}
|
||
<div className="flex items-start gap-4">
|
||
<div className="text-3xl">✉️</div>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Email</h3>
|
||
<p className="text-gray-600">
|
||
<a href="mailto:contact@the-tip-top.com" className="hover:text-primary-600 transition-colors">
|
||
contact@the-tip-top.com
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Horaires */}
|
||
<div className="flex items-start gap-4">
|
||
<div className="text-3xl">🕐</div>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">Horaires d'ouverture</h3>
|
||
<p className="text-gray-600 text-sm">
|
||
Lundi - Vendredi : 9h - 19h<br />
|
||
Samedi : 9h - 18h<br />
|
||
Dimanche : 10h - 17h
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Localisation */}
|
||
<Card className="shadow-lg">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl">Localisation</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="rounded-lg overflow-hidden h-64">
|
||
<iframe
|
||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2885.2563866557893!2d7.261953!1d43.7031922!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12cdd0106a852d31%3A0x40819a5fd970220!2sNice%2C%20France!5e0!3m2!1sfr!2sfr!4v1234567890123"
|
||
width="100%"
|
||
height="100%"
|
||
style={{ border: 0 }}
|
||
allowFullScreen
|
||
loading="lazy"
|
||
referrerPolicy="no-referrer-when-downgrade"
|
||
title="Localisation Thé Tip Top Nice"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Boutiques Section */}
|
||
<section className="bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
||
<div className="max-w-6xl mx-auto">
|
||
<h2 className="text-3xl font-bold text-center text-gray-900 mb-4">
|
||
Nos boutiques
|
||
</h2>
|
||
<p className="text-center text-gray-600 mb-12">
|
||
Retrouvez-nous dans nos points de vente niçois
|
||
</p>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{/* Boutique Centre-Ville */}
|
||
<Card className="bg-white hover:shadow-xl transition-shadow">
|
||
<CardHeader>
|
||
<div className="text-4xl text-center mb-2">🏪</div>
|
||
<CardTitle className="text-center text-xl">Boutique Centre-Ville</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
<div className="text-center">
|
||
<p className="text-gray-700 font-medium">15 rue de la Paix</p>
|
||
<p className="text-gray-600 text-sm">06000 Nice</p>
|
||
</div>
|
||
<div className="text-center pt-3 border-t border-gray-200">
|
||
<p className="text-primary-600 font-semibold mb-1">
|
||
<a href="tel:+33493123456" className="hover:text-primary-700">
|
||
04 93 12 34 56
|
||
</a>
|
||
</p>
|
||
<p className="text-gray-600 text-sm">
|
||
9h-19h du lundi au samedi
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Boutique Vieux-Nice */}
|
||
<Card className="bg-white hover:shadow-xl transition-shadow">
|
||
<CardHeader>
|
||
<div className="text-4xl text-center mb-2">🏪</div>
|
||
<CardTitle className="text-center text-xl">Boutique Vieux-Nice</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
<div className="text-center">
|
||
<p className="text-gray-700 font-medium">28 rue des Rosiers</p>
|
||
<p className="text-gray-600 text-sm">06300 Nice</p>
|
||
</div>
|
||
<div className="text-center pt-3 border-t border-gray-200">
|
||
<p className="text-primary-600 font-semibold mb-1">
|
||
<a href="tel:+33494872416" className="hover:text-primary-700">
|
||
04 94 87 24 16
|
||
</a>
|
||
</p>
|
||
<p className="text-gray-600 text-sm">
|
||
10h-20h du lundi au dimanche
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Boutique Promenade */}
|
||
<Card className="bg-white hover:shadow-xl transition-shadow">
|
||
<CardHeader>
|
||
<div className="text-4xl text-center mb-2">🏪</div>
|
||
<CardTitle className="text-center text-xl">Boutique Promenade</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
<div className="text-center">
|
||
<p className="text-gray-700 font-medium">42 Promenade des Anglais</p>
|
||
<p className="text-gray-600 text-sm">06000 Nice</p>
|
||
</div>
|
||
<div className="text-center pt-3 border-t border-gray-200">
|
||
<p className="text-primary-600 font-semibold mb-1">
|
||
<a href="tel:+33493296714" className="hover:text-primary-700">
|
||
04 93 29 67 14
|
||
</a>
|
||
</p>
|
||
<p className="text-gray-600 text-sm">
|
||
9h30-19h30 du mardi au samedi
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|