Merge version_3 into main #6
261
src/app/page.tsx
261
src/app/page.tsx
@@ -5,14 +5,21 @@ import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarS
|
||||
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
||||
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Hammer, Wrench, CheckCircle, Camera, Star, Euro } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function HomePage() {
|
||||
const [reviewSubmitted, setReviewSubmitted] = useState(false);
|
||||
const [reviewError, setReviewError] = useState("");
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", role: "", company: "", rating: 5,
|
||||
testimonial: ""});
|
||||
|
||||
const navItems = [
|
||||
{ name: "Accueil", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
@@ -55,6 +62,38 @@ export default function HomePage() {
|
||||
},
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: name === "rating" ? parseInt(value) : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmitReview = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setReviewError("");
|
||||
|
||||
if (!formData.name.trim() || !formData.testimonial.trim() || !formData.role.trim() || !formData.company.trim()) {
|
||||
setReviewError("Tous les champs sont obligatoires.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.testimonial.length < 10) {
|
||||
setReviewError("Veuillez écrire au moins 10 caractères pour votre avis.");
|
||||
return;
|
||||
}
|
||||
|
||||
setReviewSubmitted(true);
|
||||
setFormData({
|
||||
name: "", role: "", company: "", rating: 5,
|
||||
testimonial: ""});
|
||||
|
||||
setTimeout(() => {
|
||||
setReviewSubmitted(false);
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
@@ -180,32 +219,26 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<TestimonialCardOne
|
||||
<TestimonialCardThirteen
|
||||
title="Nos Réalisations"
|
||||
description="Découvrez nos projets réussis et les transformations que nous avons accomplies pour nos clients."
|
||||
tag="Portfolio"
|
||||
tagIcon={Camera}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Rénovation Complète", role: "Appartement - Bruxelles", company: "2025", rating: 5,
|
||||
videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ad6CnlkMmKxHjsaejfvDw57RRf/uploaded-1773316062829-hhoyjsny.mp4", imageAlt: "Rénovation complète intérieur maison bruxelles"},
|
||||
id: "1", name: "Rénovation Complète", handle: "Appartement - Bruxelles", testimonial: "Projet de rénovation complète intérieur", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=1"},
|
||||
{
|
||||
id: "2", name: "Extension Résidentielle", role: "Addition 50m² - Liège", company: "2025", rating: 5,
|
||||
videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ?_wi=1", videoAriaLabel: "Vidéo extension résidentielle Liège"},
|
||||
id: "2", name: "Extension Résidentielle", handle: "Addition 50m² - Liège", testimonial: "Extension moderne de 50 mètres carrés", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=1"},
|
||||
{
|
||||
id: "3", name: "Terrasse Extérieure", role: "Piscine & Terrasse - Namur", company: "2023", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2669.jpg?_wi=1", imageAlt: "Terrasse piscine extérieur namur belgique"},
|
||||
id: "3", name: "Terrasse Extérieure", handle: "Piscine & Terrasse - Namur", testimonial: "Création d'espace extérieur avec piscine", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2669.jpg?_wi=1"},
|
||||
{
|
||||
id: "4", name: "Construction Neuve", role: "Maison moderne 150m² - Charleroi", company: "2023", rating: 5,
|
||||
videoSrc: "https://www.youtube.com/embed/jNQXAC9IVRw?_wi=1", videoAriaLabel: "Vidéo construction maison neuve Charleroi"},
|
||||
{
|
||||
id: "5", name: "Rénovation Toiture", role: "Toiture complète - Anvers", company: "2023", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-high-angle_23-2149714277.jpg?_wi=1", imageAlt: "Rénovation toiture ardoise anvers belgique"},
|
||||
{
|
||||
id: "6", name: "Aménagement Extérieur", role: "Jardin paysager - Mons", company: "2023", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/table-chair-with-white-umbrella-outdoor-patio_74190-1917.jpg?_wi=1", imageAlt: "Jardin paysager aménagement mons belgique"},
|
||||
id: "4", name: "Construction Neuve", handle: "Maison moderne 150m² - Charleroi", testimonial: "Construction neuve maison individuelle", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=1"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -214,31 +247,175 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
title="Avis de Nos Clients"
|
||||
description="Les témoignages authentiques de clients satisfaits qui ont fait confiance à Webild Construction."
|
||||
tag="Témoignages"
|
||||
tagIcon={Star}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Marc Dupont", role: "Propriétaire", company: "Bruxelles", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6626.jpg", imageAlt: "Portrait homme client satisfait sourire"},
|
||||
{
|
||||
id: "2", name: "Sophie Bernard", role: "Propriétaire", company: "Liège", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoors-background-hairstyle-one-zipper_1139-779.jpg", imageAlt: "Portrait femme propriétaire satisfaction sourire"},
|
||||
{
|
||||
id: "3", name: "Jean-Pierre Martin", role: "Propriétaire", company: "Namur", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-elderly-man-taking-stroll_23-2150233326.jpg", imageAlt: "Portrait homme senior propriétaire belgique"},
|
||||
{
|
||||
id: "4", name: "Catherine Lefevre", role: "Propriétaire", company: "Charleroi", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-doing-okay-symbol_1187-3855.jpg", imageAlt: "Portrait femme charleroi proprietaire satisfaction"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
<div className="w-full py-20 px-4 md:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header Section */}
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-[var(--accent)] text-[var(--background)]">
|
||||
<Star size={16} />
|
||||
<span className="text-sm font-medium">Témoignages</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 text-[var(--foreground)]">Avis de Nos Clients</h2>
|
||||
<p className="text-lg text-[var(--foreground)] opacity-75 max-w-2xl mx-auto">
|
||||
Partagez votre expérience avec Webild Construction. Vos avis nous aident à continuer à améliorer nos services.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
{/* Review Form */}
|
||||
<div className="bg-[var(--card)] rounded-2xl p-8 border border-[var(--accent)] border-opacity-20">
|
||||
<h3 className="text-2xl font-bold mb-6 text-[var(--foreground)]">Soumettre un Avis</h3>
|
||||
|
||||
{reviewSubmitted ? (
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
|
||||
<p className="text-green-800 font-semibold mb-2">✓ Merci pour votre avis!</p>
|
||||
<p className="text-green-700 text-sm">Votre témoignage a été reçu avec succès. Nous l'examinerons avant de le publier.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmitReview} className="space-y-4">
|
||||
{reviewError && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<p className="text-red-800 text-sm">{reviewError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Votre Nom *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Jean Dupont"
|
||||
className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Votre Poste *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="role"
|
||||
value={formData.role}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Propriétaire / Chef de projet"
|
||||
className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Votre Ville/Entreprise *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Bruxelles / Mon Entreprise"
|
||||
className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Notation *
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<button
|
||||
key={star}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setFormData((prev) => ({ ...prev, rating: star }))
|
||||
}
|
||||
className={`text-3xl transition-colors ${
|
||||
star <= formData.rating
|
||||
? "text-yellow-400"
|
||||
: "text-gray-300"
|
||||
}`}
|
||||
>
|
||||
★
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Votre Avis *
|
||||
</label>
|
||||
<textarea
|
||||
name="testimonial"
|
||||
value={formData.testimonial}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Partagez votre expérience avec Webild Construction..."
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)] resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 rounded-lg bg-[var(--primary-cta)] text-[var(--primary-cta-text)] font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Soumettre mon Avis
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Testimonials Display */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-[var(--foreground)] mb-6">Témoignages Récents</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)] border-opacity-20">
|
||||
<div className="flex gap-1 mb-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[var(--foreground)] mb-4">
|
||||
"Excellent travail! L'équipe Webild a complètement transformé notre maison. Professionnels, à l'écoute et respectueux des délais."
|
||||
</p>
|
||||
<p className="font-semibold text-[var(--foreground)]">Marc Dupont</p>
|
||||
<p className="text-sm text-[var(--foreground)] opacity-60">Propriétaire, Bruxelles</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)] border-opacity-20">
|
||||
<div className="flex gap-1 mb-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[var(--foreground)] mb-4">
|
||||
"Nous recommandons vivement Webild Construction. Devis clair, communication excellente et résultat final impeccable."
|
||||
</p>
|
||||
<p className="font-semibold text-[var(--foreground)]">Sophie Bernard</p>
|
||||
<p className="text-sm text-[var(--foreground)] opacity-60">Chef de projet, Liège</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)] border-opacity-20">
|
||||
<div className="flex gap-1 mb-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[var(--foreground)] mb-4">
|
||||
"Service impeccable du début à la fin. L'équipe est très professionnelle et attentive au détail. Nous sommes très satisfaits."
|
||||
</p>
|
||||
<p className="font-semibold text-[var(--foreground)]">Jean-Pierre Martin</p>
|
||||
<p className="text-sm text-[var(--foreground)] opacity-60">Propriétaire, Namur</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
|
||||
Reference in New Issue
Block a user