Merge version_9 into main #13
@@ -11,17 +11,17 @@ import { CheckCircle } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Accueil", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Réalisations", id: "portfolio" },
|
||||
{ name: "À propos", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Accueil", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Produits", id: "/products" },
|
||||
{ name: "Réalisations", id: "/portfolio" },
|
||||
{ name: "À propos", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{ label: "Rénovation", href: "/#services" },
|
||||
{ label: "Construction", href: "/#services" },
|
||||
{ label: "Maçonnerie", href: "/#services" },
|
||||
@@ -29,8 +29,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Entreprise",
|
||||
items: [
|
||||
title: "Entreprise", items: [
|
||||
{ label: "À propos", href: "/about" },
|
||||
{ label: "Nos Réalisations", href: "/portfolio" },
|
||||
{ label: "Avis Clients", href: "/#testimonials" },
|
||||
@@ -38,8 +37,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
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: "#" },
|
||||
@@ -47,8 +45,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Légal",
|
||||
items: [
|
||||
title: "Légal", items: [
|
||||
{ label: "Politique de Confidentialité", href: "#" },
|
||||
{ label: "Conditions d'Utilisation", href: "#" },
|
||||
{ label: "Mentions Légales", href: "#" },
|
||||
@@ -74,9 +71,7 @@ export default function AboutPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Demander un devis",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Demander un devis", href: "#contact"}}
|
||||
brandName="Webild Construction"
|
||||
/>
|
||||
</div>
|
||||
@@ -90,25 +85,17 @@ export default function AboutPage() {
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=3",
|
||||
imageAlt: "Équipe professionnelle sur un chantier",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=3", imageAlt: "Équipe professionnelle sur un chantier"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=3",
|
||||
imageAlt: "Construction de qualité en cours",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=3", imageAlt: "Construction de qualité en cours"},
|
||||
]}
|
||||
rating={5}
|
||||
ratingText="Plus de 20 années de confiance"
|
||||
buttons={[
|
||||
{
|
||||
text: "Voir Nos Réalisations",
|
||||
href: "/portfolio",
|
||||
},
|
||||
text: "Voir Nos Réalisations", href: "/portfolio"},
|
||||
{
|
||||
text: "Nous Contacter",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Nous Contacter", href: "#contact"},
|
||||
]}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
@@ -125,22 +112,11 @@ export default function AboutPage() {
|
||||
tagIcon={CheckCircle}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Approche générique et impersonnelle",
|
||||
"Manque de transparence",
|
||||
"Travail précipité et sans qualité",
|
||||
"Aucune responsabilité",
|
||||
"Service client inexistant",
|
||||
],
|
||||
"Approche générique et impersonnelle", "Manque de transparence", "Travail précipité et sans qualité", "Aucune responsabilité", "Service client inexistant"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"✔ Approche personnalisée pour chaque client",
|
||||
"✔ Transparence totale dans chaque démarche",
|
||||
"✔ Excellence et soin dans chaque détail",
|
||||
"✔ Responsabilité complète et garanties",
|
||||
"✔ Service client réactif et professionnel",
|
||||
"✔ Éthique professionnelle irréprochable",
|
||||
],
|
||||
"✔ Approche personnalisée pour chaque client", "✔ Transparence totale dans chaque démarche", "✔ Excellence et soin dans chaque détail", "✔ Responsabilité complète et garanties", "✔ Service client réactif et professionnel", "✔ Éthique professionnelle irréprochable"],
|
||||
}}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -158,13 +134,9 @@ export default function AboutPage() {
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Demander un Devis",
|
||||
href: "#",
|
||||
},
|
||||
text: "Demander un Devis", href: "#"},
|
||||
{
|
||||
text: "Consultation Gratuite",
|
||||
href: "tel:+32123456789",
|
||||
},
|
||||
text: "Consultation Gratuite", href: "tel:+32123456789"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -179,4 +151,4 @@ export default function AboutPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,17 +8,17 @@ import Link from "next/link";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Accueil", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Réalisations", id: "portfolio" },
|
||||
{ name: "À propos", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Accueil", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Produits", id: "/products" },
|
||||
{ name: "Réalisations", id: "/portfolio" },
|
||||
{ name: "À propos", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{ label: "Rénovation", href: "/services" },
|
||||
{ label: "Construction", href: "/services" },
|
||||
{ label: "Maçonnerie", href: "/services" },
|
||||
@@ -26,8 +26,7 @@ export default function ContactPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Entreprise",
|
||||
items: [
|
||||
title: "Entreprise", items: [
|
||||
{ label: "À propos", href: "/about" },
|
||||
{ label: "Nos Réalisations", href: "/portfolio" },
|
||||
{ label: "Avis Clients", href: "/" },
|
||||
@@ -35,8 +34,7 @@ export default function ContactPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
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: "#" },
|
||||
@@ -44,8 +42,7 @@ export default function ContactPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Légal",
|
||||
items: [
|
||||
title: "Légal", items: [
|
||||
{ label: "Politique de Confidentialité", href: "#" },
|
||||
{ label: "Conditions d'Utilisation", href: "#" },
|
||||
{ label: "Mentions Légales", href: "#" },
|
||||
@@ -96,4 +93,4 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
148
src/app/page.tsx
148
src/app/page.tsx
@@ -21,11 +21,12 @@ export default function HomePage() {
|
||||
testimonial: ""});
|
||||
|
||||
const navItems = [
|
||||
{ name: "Accueil", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Réalisations", id: "portfolio" },
|
||||
{ name: "À propos", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Accueil", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Produits", id: "/products" },
|
||||
{ name: "Réalisations", id: "/portfolio" },
|
||||
{ name: "À propos", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -62,7 +63,11 @@ export default function HomePage() {
|
||||
},
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
@@ -74,13 +79,20 @@ export default function HomePage() {
|
||||
e.preventDefault();
|
||||
setReviewError("");
|
||||
|
||||
if (!formData.name.trim() || !formData.testimonial.trim() || !formData.role.trim() || !formData.company.trim()) {
|
||||
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.");
|
||||
setReviewError(
|
||||
"Veuillez écrire au moins 10 caractères pour votre avis."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -124,9 +136,11 @@ 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"
|
||||
@@ -148,19 +162,26 @@ export default function HomePage() {
|
||||
tagIcon={Wrench}
|
||||
products={[
|
||||
{
|
||||
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: "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"
|
||||
@@ -200,12 +221,14 @@ export default function HomePage() {
|
||||
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" },
|
||||
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" },
|
||||
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"],
|
||||
},
|
||||
@@ -227,16 +250,20 @@ export default function HomePage() {
|
||||
testimonials={[
|
||||
{
|
||||
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"},
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=1"},
|
||||
{
|
||||
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"},
|
||||
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", 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"},
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2669.jpg?_wi=1"},
|
||||
{
|
||||
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"},
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=1"},
|
||||
]}
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
@@ -255,21 +282,29 @@ export default function HomePage() {
|
||||
<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>
|
||||
<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.
|
||||
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>
|
||||
<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>
|
||||
<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">
|
||||
@@ -371,45 +406,74 @@ export default function HomePage() {
|
||||
|
||||
{/* Testimonials Display */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-[var(--foreground)] mb-6">Témoignages Récents</h3>
|
||||
<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" />
|
||||
<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."
|
||||
"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>
|
||||
<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" />
|
||||
<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."
|
||||
"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>
|
||||
<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" />
|
||||
<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."
|
||||
"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>
|
||||
<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>
|
||||
@@ -440,4 +504,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
163
src/app/products/page.tsx
Normal file
163
src/app/products/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Package, ShoppingCart } from "lucide-react";
|
||||
|
||||
export default function ProductsPage() {
|
||||
const navItems = [
|
||||
{ name: "Accueil", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Produits", id: "/products" },
|
||||
{ name: "Réalisations", id: "/portfolio" },
|
||||
{ name: "À propos", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Rénovation", href: "/services" },
|
||||
{ label: "Construction", href: "/services" },
|
||||
{ label: "Maçonnerie", href: "/services" },
|
||||
{ label: "Toiture", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Entreprise", items: [
|
||||
{ label: "À propos", href: "/about" },
|
||||
{ label: "Nos Réalisations", href: "/portfolio" },
|
||||
{ label: "Avis Clients", href: "/" },
|
||||
{ label: "Contactez-nous", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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: "#" },
|
||||
{ label: "WhatsApp", href: "https://wa.me/32212345678" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Légal", items: [
|
||||
{ label: "Politique de Confidentialité", href: "#" },
|
||||
{ label: "Conditions d'Utilisation", href: "#" },
|
||||
{ label: "Mentions Légales", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Demander un devis", href: "/contact"}}
|
||||
brandName="Webild Construction"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Products Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
tag="Nos Produits"
|
||||
tagIcon={Package}
|
||||
title="Produits et Matériaux de Construction de Qualité"
|
||||
description="Découvrez notre sélection complète de produits et matériaux de construction. Nous proposons uniquement des produits de qualité supérieure pour garantir l'excellence de vos projets."
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=3", imageAlt: "Matériaux de construction professionnels"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=3", imageAlt: "Produits de qualité premium"},
|
||||
]}
|
||||
rating={5}
|
||||
ratingText="Produits certifiés et garantis"
|
||||
buttons={[
|
||||
{
|
||||
text: "Parcourir les Produits", href: "#products"},
|
||||
{
|
||||
text: "Commander Maintenant", href: "#contact"},
|
||||
]}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Products Section */}
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
title="Notre Catalogue de Produits"
|
||||
description="Une gamme complète de matériaux et produits pour tous vos projets de construction et rénovation."
|
||||
tag="Produits Disponibles"
|
||||
tagIcon={ShoppingCart}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Ciment Portland Premium", price: "45€/sac", imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=1", imageAlt: "Ciment de qualité professionnelle"},
|
||||
{
|
||||
id: "2", name: "Briques de Construction", price: "0.80€/pièce", imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=1", imageAlt: "Briques rouges standard"},
|
||||
{
|
||||
id: "3", name: "Acier de Renforcement", price: "800€/tonne", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=1", imageAlt: "Barres d'acier renforcé"},
|
||||
{
|
||||
id: "4", name: "Tuiles de Toiture", price: "25€/m²", imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg?_wi=1", imageAlt: "Tuiles en céramique"},
|
||||
{
|
||||
id: "5", name: "Mortier de Joint", price: "12€/sac", 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: "Mortier professionnel"},
|
||||
{
|
||||
id: "6", name: "Peinture Façade", price: "35€/litre", imageSrc: "http://img.b2bpic.net/free-photo/side-view-family-sitting-table_23-2150231683.jpg?_wi=1", imageAlt: "Peinture résistante aux intempéries"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactText
|
||||
text="Intéressé par nos produits? Contactez notre équipe commerciale pour des devis personnalisés et des conditions spéciales pour les gros volumes."
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Demander un Devis", href: "/contact"},
|
||||
{
|
||||
text: "Nous Appeler", href: "tel:+32123456789"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Webild Construction"
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2024 Webild Construction. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user