12 Commits

Author SHA1 Message Date
57d8ac7a2e Update src/app/page.tsx 2026-03-12 11:58:56 +00:00
9520661d18 Merge version_2 into main
Merge version_2 into main
2026-03-12 11:52:13 +00:00
574c8cd013 Update src/app/page.tsx 2026-03-12 11:52:09 +00:00
21bdb1fe15 Merge version_2 into main
Merge version_2 into main
2026-03-12 11:23:23 +00:00
f682f2caa5 Update src/app/portfolio/page.tsx 2026-03-12 11:23:19 +00:00
43b78279e5 Update src/app/page.tsx 2026-03-12 11:23:18 +00:00
f30bc38c09 Merge version_2 into main
Merge version_2 into main
2026-03-12 11:22:58 +00:00
4b99824f2b Update src/app/services/page.tsx 2026-03-12 11:22:54 +00:00
a323d80cf5 Update src/app/portfolio/page.tsx 2026-03-12 11:22:53 +00:00
7a1ffe8179 Update src/app/page.tsx 2026-03-12 11:22:53 +00:00
9fe14c5233 Merge version_1 into main
Merge version_1 into main
2026-03-12 11:12:05 +00:00
ea1558fab8 Merge version_1 into main
Merge version_1 into main
2026-03-12 11:11:36 +00:00
3 changed files with 327 additions and 311 deletions

View File

@@ -5,13 +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 } from "lucide-react";
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" },
@@ -22,8 +30,7 @@ export default function HomePage() {
const footerColumns = [
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Rénovation", href: "/services" },
{ label: "Construction", href: "/services" },
{ label: "Maçonnerie", href: "/services" },
@@ -31,8 +38,7 @@ export default function HomePage() {
],
},
{
title: "Entreprise",
items: [
title: "Entreprise", items: [
{ label: "À propos", href: "/about" },
{ label: "Nos Réalisations", href: "/portfolio" },
{ label: "Avis Clients", href: "/" },
@@ -40,8 +46,7 @@ export default function HomePage() {
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{ label: "Téléphone: +32 (0) 2 123 45 67", href: "tel:+32212345678" },
{ label: "Email: info@webild.be", href: "mailto:info@webild.be" },
{ label: "Belgique", href: "#" },
@@ -49,8 +54,7 @@ export default function HomePage() {
],
},
{
title: "Légal",
items: [
title: "Légal", items: [
{ label: "Politique de Confidentialité", href: "#" },
{ label: "Conditions d'Utilisation", href: "#" },
{ label: "Mentions Légales", href: "#" },
@@ -58,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"
@@ -88,13 +124,9 @@ export default function HomePage() {
background={{ variant: "plain" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/young-man-civil-engineer-safety-hat_185193-108529.jpg",
imageAlt: "Chantier de construction professionnel",
},
imageSrc: "http://img.b2bpic.net/free-photo/young-man-civil-engineer-safety-hat_185193-108529.jpg", imageAlt: "Chantier de construction professionnel"},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-holding-placard_23-2149366672.jpg",
imageAlt: "Réalisation de qualité en construction",
},
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-holding-placard_23-2149366672.jpg", imageAlt: "Réalisation de qualité en construction"},
]}
rating={5}
ratingText="Confiance des clients depuis 20 ans"
@@ -116,54 +148,19 @@ export default function HomePage() {
tagIcon={Wrench}
products={[
{
id: "1",
name: "Rénovation Maison",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=1",
imageAlt: "Rénovation complète de maison",
},
id: "1", name: "Rénovation Maison", price: "À partir de 900€/m²", imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=1", imageAlt: "Rénovation complète de maison"},
{
id: "2",
name: "Construction Neuve",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=1",
imageAlt: "Construction neuve moderne",
},
id: "2", name: "Construction Neuve", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=1", imageAlt: "Construction neuve moderne"},
{
id: "3",
name: "Maçonnerie",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=1",
imageAlt: "Travaux de maçonnerie professionnels",
},
id: "3", name: "Maçonnerie", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=1", imageAlt: "Travaux de maçonnerie professionnels"},
{
id: "4",
name: "Terrasse",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/empty-table-chair-dining-set-nearly-sea-ocean-beach-white-cloud-blue-sky_74190-9983.jpg?_wi=1",
imageAlt: "Construction de terrasse extérieure",
},
id: "4", name: "Terrasse", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/empty-table-chair-dining-set-nearly-sea-ocean-beach-white-cloud-blue-sky_74190-9983.jpg?_wi=1", imageAlt: "Construction de terrasse extérieure"},
{
id: "5",
name: "Toiture",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg?_wi=1",
imageAlt: "Travaux de toiture de qualité",
},
id: "5", name: "Toiture", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg?_wi=1", imageAlt: "Travaux de toiture de qualité"},
{
id: "6",
name: "Extension Maison",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-family-sitting-table_23-2150231683.jpg?_wi=1",
imageAlt: "Extension résidentielle moderne",
},
id: "6", name: "Extension Maison", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/side-view-family-sitting-table_23-2150231683.jpg?_wi=1", imageAlt: "Extension résidentielle moderne"},
{
id: "7",
name: "Aménagement Extérieur",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-working-field-with-chest-vegetables_329181-12449.jpg?_wi=1",
imageAlt: "Aménagement paysager professionnel",
},
id: "7", name: "Aménagement Extérieur", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-working-field-with-chest-vegetables_329181-12449.jpg?_wi=1", imageAlt: "Aménagement paysager professionnel"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -182,22 +179,11 @@ export default function HomePage() {
tagIcon={CheckCircle}
negativeCard={{
items: [
"Travail bâclé et sans suivi",
"Délais non respectés",
"Coûts cachés et surprises",
"Pas de garantie ou d'assurance",
"Communication inexistante",
],
"Travail bâclé et sans suivi", "Délais non respectés", "Coûts cachés et surprises", "Pas de garantie ou d'assurance", "Communication inexistante"],
}}
positiveCard={{
items: [
"✔ Travail soigné et professionnel",
"✔ Respect des délais convenus",
"✔ Devis transparent et rapide",
"✔ Garantie et assurance complètes",
"✔ Communication régulière et claire",
"✔ Plus de 20 années d'expérience",
],
"✔ Travail soigné et professionnel", "✔ Respect des délais convenus", "✔ Devis transparent et rapide", "✔ Garantie et assurance complètes", "✔ Communication régulière et claire", "✔ Plus de 20 années d'expérience"],
}}
animationType="slide-up"
textboxLayout="default"
@@ -206,69 +192,53 @@ export default function HomePage() {
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Nos Tarifs de Rénovation"
description="Rénovation complète avec matériaux inclus. Devis gratuit et sans engagement."
tag="Tarification"
tagIcon={Euro}
plans={[
{
id: "renovation-complete", title: "Rénovation Complète", price: "900", period: "€/m²", imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=1", imageAlt: "Rénovation complète avec matériaux", button: { text: "Demander un Devis", href: "/contact" },
features: [
"✔ Matériaux de qualité inclus", "✔ Main d'œuvre professionnelle", "✔ Garantie de 5 ans", "✔ Suivi de chantier régulier", "✔ Nettoyage et finitions"],
},
{
id: "renovation-standard", title: "Rénovation Partielle", price: "Sur devis", period: "", imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=1", imageAlt: "Rénovation partielle", button: { text: "Contacter", href: "/contact" },
features: [
"✔ Devis personnalisé", "✔ Choix des matériaux", "✔ Travaux ciblés", "✔ Flexibilité de budget", "✔ Équipe expérimentée"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</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: "Maison - Bruxelles",
company: "2024",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg?_wi=1",
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: "2024",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571916.jpg?_wi=1",
imageAlt: "Extension 50 mètres carré maison 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,
imageSrc: "http://img.b2bpic.net/free-photo/white-collar-workers-works-building-site_1398-5097.jpg?_wi=1",
imageAlt: "Construction maison neuve moderne 150m 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}
@@ -277,55 +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 é 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">

View File

@@ -19,8 +19,7 @@ export default function PortfolioPage() {
const footerColumns = [
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Rénovation", href: "/#services" },
{ label: "Construction", href: "/#services" },
{ label: "Maçonnerie", href: "/#services" },
@@ -28,8 +27,7 @@ export default function PortfolioPage() {
],
},
{
title: "Entreprise",
items: [
title: "Entreprise", items: [
{ label: "À propos", href: "/about" },
{ label: "Nos Réalisations", href: "/portfolio" },
{ label: "Avis Clients", href: "/#testimonials" },
@@ -37,8 +35,7 @@ export default function PortfolioPage() {
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{ label: "Téléphone: +32 (0) 2 123 45 67", href: "tel:+32212345678" },
{ label: "Email: info@webild.be", href: "mailto:info@webild.be" },
{ label: "Belgique", href: "#" },
@@ -46,8 +43,7 @@ export default function PortfolioPage() {
],
},
{
title: "Légal",
items: [
title: "Légal", items: [
{ label: "Politique de Confidentialité", href: "#" },
{ label: "Conditions d'Utilisation", href: "#" },
{ label: "Mentions Légales", href: "#" },
@@ -73,9 +69,7 @@ export default function PortfolioPage() {
<NavbarStyleCentered
navItems={navItems}
button={{
text: "Demander un devis",
href: "#contact",
}}
text: "Demander un devis", href: "#contact"}}
brandName="Webild Construction"
/>
</div>
@@ -84,64 +78,28 @@ export default function PortfolioPage() {
<div id="portfolio" data-section="portfolio">
<TestimonialCardOne
title="Nos Réalisations"
description="Découvrez tous nos projets réussis et les transformations que nous avons accomplies pour nos clients en Belgique."
description="Découvrez tous nos projets réussis et les transformations que nous avons accomplies pour nos clients en Belgique. Nos réalisations incluent des photos et vidéos de chantiers."
tag="Portfolio Complet"
tagIcon={Camera}
testimonials={[
{
id: "1",
name: "Rénovation Complète",
role: "Maison - Bruxelles",
company: "2024",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg?_wi=2",
imageAlt: "Rénovation complète intérieur maison bruxelles",
},
id: "1", name: "Rénovation Complète", role: "Maison - Bruxelles", company: "2024", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg?_wi=2", imageAlt: "Rénovation complète intérieur maison bruxelles"},
{
id: "2",
name: "Extension Résidentielle",
role: "Addition 50m² - Liège",
company: "2024",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571916.jpg?_wi=2",
imageAlt: "Extension 50 mètres carré maison liège",
},
id: "2", name: "Extension Résidentielle", role: "Addition 50m² - Liège", company: "2024", rating: 5,
videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ?_wi=2", videoAriaLabel: "Vidéo extension résidentielle Liège"},
{
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=2",
imageAlt: "Terrasse piscine extérieur namur belgique",
},
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=2", imageAlt: "Terrasse piscine extérieur namur belgique"},
{
id: "4",
name: "Construction Neuve",
role: "Maison moderne 150m² - Charleroi",
company: "2023",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/white-collar-workers-works-building-site_1398-5097.jpg?_wi=2",
imageAlt: "Construction maison neuve moderne 150m charleroi",
},
id: "4", name: "Construction Neuve", role: "Maison moderne 150m² - Charleroi", company: "2023", rating: 5,
videoSrc: "https://www.youtube.com/embed/jNQXAC9IVRw?_wi=2", 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=2",
imageAlt: "rénovation toiture ardoise anvers belgique",
},
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=2", 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=2",
imageAlt: "jardin paysager aménagement mons 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=2", imageAlt: "jardin paysager aménagement mons belgique"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -160,13 +118,9 @@ export default function PortfolioPage() {
useInvertedBackground={false}
buttons={[
{
text: "Demander un Devis",
href: "#",
},
text: "Demander un Devis", href: "#"},
{
text: "Nous Contacter",
href: "tel:+32123456789",
},
text: "Nous Contacter", href: "tel:+32123456789"},
]}
/>
</div>

View File

@@ -4,10 +4,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import Link from "next/link";
import { Wrench, CheckCircle } from "lucide-react";
import { Wrench, CheckCircle, Euro } from "lucide-react";
export default function ServicesPage() {
return (
@@ -35,9 +36,7 @@ export default function ServicesPage() {
{ name: "Contact", id: "contact" },
]}
button={{
text: "Demander un devis",
href: "contact",
}}
text: "Demander un devis", href: "contact"}}
/>
</div>
@@ -50,54 +49,19 @@ export default function ServicesPage() {
tagIcon={Wrench}
products={[
{
id: "1",
name: "Rénovation Maison",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=2",
imageAlt: "Rénovation complète de maison",
},
id: "1", name: "Rénovation Maison", price: "À partir de 900€/m²", imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=2", imageAlt: "Rénovation complète de maison"},
{
id: "2",
name: "Construction Neuve",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=2",
imageAlt: "Construction neuve moderne",
},
id: "2", name: "Construction Neuve", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=2", imageAlt: "Construction neuve moderne"},
{
id: "3",
name: "Maçonnerie",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=2",
imageAlt: "Travaux de maçonnerie professionnels",
},
id: "3", name: "Maçonnerie", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=2", imageAlt: "Travaux de maçonnerie professionnels"},
{
id: "4",
name: "Terrasse",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/empty-table-chair-dining-set-nearly-sea-ocean-beach-white-cloud-blue-sky_74190-9983.jpg?_wi=2",
imageAlt: "Construction de terrasse extérieure",
},
id: "4", name: "Terrasse", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/empty-table-chair-dining-set-nearly-sea-ocean-beach-white-cloud-blue-sky_74190-9983.jpg?_wi=2", imageAlt: "Construction de terrasse extérieure"},
{
id: "5",
name: "Toiture",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg?_wi=2",
imageAlt: "Travaux de toiture de qualité",
},
id: "5", name: "Toiture", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg?_wi=2", imageAlt: "Travaux de toiture de qualité"},
{
id: "6",
name: "Extension Maison",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-family-sitting-table_23-2150231683.jpg?_wi=2",
imageAlt: "Extension résidentielle moderne",
},
id: "6", name: "Extension Maison", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/side-view-family-sitting-table_23-2150231683.jpg?_wi=2", imageAlt: "Extension résidentielle moderne"},
{
id: "7",
name: "Aménagement Extérieur",
price: "Sur devis",
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-working-field-with-chest-vegetables_329181-12449.jpg?_wi=2",
imageAlt: "Aménagement paysager professionnel",
},
id: "7", name: "Aménagement Extérieur", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-working-field-with-chest-vegetables_329181-12449.jpg?_wi=2", imageAlt: "Aménagement paysager professionnel"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -108,6 +72,33 @@ export default function ServicesPage() {
/>
</div>
{/* Pricing Section */}
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Nos Tarifs de Rénovation"
description="Rénovation complète avec matériaux inclus. Devis gratuit et sans engagement."
tag="Tarification"
tagIcon={Euro}
plans={[
{
id: "renovation-complete", title: "Rénovation Complète", price: "900", period: "€/m²", imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=2", imageAlt: "Rénovation complète avec matériaux", button: { text: "Demander un Devis", href: "/contact" },
features: [
"✔ Matériaux de qualité inclus", "✔ Main d'œuvre professionnelle", "✔ Garantie de 5 ans", "✔ Suivi de chantier régulier", "✔ Nettoyage et finitions"],
},
{
id: "renovation-standard", title: "Rénovation Partielle", price: "Sur devis", period: "", imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=2", imageAlt: "Rénovation partielle", button: { text: "Contacter", href: "/contact" },
features: [
"✔ Devis personnalisé", "✔ Choix des matériaux", "✔ Travaux ciblés", "✔ Flexibilité de budget", "✔ Équipe expérimentée"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
{/* Our Expertise Section */}
<div id="features" data-section="features">
<FeatureCardSixteen
@@ -117,22 +108,11 @@ export default function ServicesPage() {
tagIcon={CheckCircle}
negativeCard={{
items: [
"Résultats inconsistants",
"Manque de suivi du projet",
"Dépassements de budget",
"Délais ignorés",
"Absence de responsabilité",
],
"Résultats inconsistants", "Manque de suivi du projet", "Dépassements de budget", "Délais ignorés", "Absence de responsabilité"],
}}
positiveCard={{
items: [
"✔ Résultats constants et fiables",
"✔ Suivi régulier et transparent",
"✔ Budget maîtrisé et respecté",
"✔ Délais tenus rigoureusement",
"✔ Responsabilité totale garantie",
"✔ Certification et assurance",
],
"✔ Résultats constants et fiables", "✔ Suivi régulier et transparent", "✔ Budget maîtrisé et respecté", "✔ Délais tenus rigoureusement", "✔ Responsabilité totale garantie", "✔ Certification et assurance"],
}}
animationType="slide-up"
textboxLayout="default"
@@ -150,13 +130,9 @@ export default function ServicesPage() {
useInvertedBackground={false}
buttons={[
{
text: "Demander un Devis",
href: "/contact",
},
text: "Demander un Devis", href: "/contact"},
{
text: "Nous Contacter",
href: "/contact",
},
text: "Nous Contacter", href: "/contact"},
]}
/>
</div>
@@ -167,8 +143,7 @@ export default function ServicesPage() {
logoText="Webild Construction"
columns={[
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Rénovation", href: "/services" },
{ label: "Construction", href: "/services" },
{ label: "Maçonnerie", href: "/services" },
@@ -176,8 +151,7 @@ export default function ServicesPage() {
],
},
{
title: "Entreprise",
items: [
title: "Entreprise", items: [
{ label: "À propos", href: "/" },
{ label: "Nos Réalisations", href: "/" },
{ label: "Avis Clients", href: "/" },
@@ -185,8 +159,7 @@ export default function ServicesPage() {
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{ label: "Téléphone: +32 (0) 2 123 45 67", href: "tel:+32212345678" },
{ label: "Email: info@webild.be", href: "mailto:info@webild.be" },
{ label: "Belgique", href: "#" },
@@ -194,8 +167,7 @@ export default function ServicesPage() {
],
},
{
title: "Légal",
items: [
title: "Légal", items: [
{ label: "Politique de Confidentialité", href: "#" },
{ label: "Conditions d'Utilisation", href: "#" },
{ label: "Mentions Légales", href: "#" },