Merge version_9 into main

Add src/app/products/page.tsx
2026-03-12 12:44:49 +00:00 · 2026-03-12 12:44:45 +00:00 · 2026-03-12 12:44:45 +00:00 · 2026-03-12 12:44:44 +00:00 · 2026-03-12 12:44:44 +00:00 · 2026-03-12 12:38:02 +00:00
5 changed files with 405 additions and 267 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -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>
  );
-}
+}
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -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>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/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>
  );
-}
+}
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,9 +3,10 @@
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Camera, Upload, Trash2, Play } from "lucide-react";
+import { Camera, Upload, Trash2, Play, Maximize2 } from "lucide-react";
 import { useState } from "react";

 export default function PortfolioPage() {
@@ -103,6 +104,13 @@ export default function PortfolioPage() {
    setUploadedMedia((prev) => prev.filter((media) => media.id !== id));
  };

+  const featureItems = uploadedMedia.map((media) => ({
+    id: media.id,
+    title: media.name,
+    description: media.type === "photo" ? "📷 Photo du projet" : "🎥 Vidéo du projet",    imageSrc: media.src,
+    imageAlt: media.name,
+  }));
+
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
@@ -126,191 +134,125 @@ export default function PortfolioPage() {
        />
      </div>

-      {/* Media Upload and Management Section */}
-      <div id="media-manager" data-section="media-manager">
+      {/* Media Upload Section */}
+      <div id="media-upload" data-section="media-upload">
        <div className="w-full py-20 px-4 md:px-8">
          <div className="max-w-7xl mx-auto">
            {/* Header */}
            <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)]">
                <Camera size={16} />
-                <span className="text-sm font-medium">Portfolio Projets</span>
+                <span className="text-sm font-medium">Galerie Projets Complétés</span>
              </div>
              <h2 className="text-3xl md:text-5xl font-bold mb-4 text-[var(--foreground)]">
-                Galerie Photos & Vidéos de Projets
+                Photos & Vidéos de Nos Réalisations
              </h2>
              <p className="text-lg text-[var(--foreground)] opacity-75 max-w-2xl mx-auto">
-                Téléchargez et gérez les photos et vidéos de vos projets complétés. Présentez votre portefeuille aux clients potentiels avec une galerie professionnelle.
+                Découvrez nos projets complétés en grand format. Visualisez la qualité de notre travail et les transformations que nous avons accomplies pour nos clients.
              </p>
            </div>

-            <div className="grid md:grid-cols-1 gap-8">
-              {/* Large Media Gallery Frame */}
-              <div className="bg-[var(--card)] rounded-3xl p-8 md:p-12 border border-[var(--accent)] border-opacity-20 shadow-lg">
-                <div className="space-y-8">
-                  {/* Upload Controls */}
-                  <div className="grid md:grid-cols-2 gap-6">
-                    {/* Photo Upload */}
-                    <div>
-                      <h3 className="text-lg font-bold mb-4 text-[var(--foreground)] flex items-center gap-2">
-                        <Camera size={20} />
-                        Télécharger des Photos
-                      </h3>
-                      <label className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-[var(--accent)] border-opacity-40 rounded-xl cursor-pointer hover:border-opacity-60 transition-all bg-[var(--background)] bg-opacity-50">
-                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                          <Upload size={28} className="text-[var(--primary-cta)] mb-2" />
-                          <p className="text-sm font-medium text-[var(--foreground)] text-center">
-                            Cliquez pour télécharger<br />
-                            <span className="text-xs opacity-75">(JPG, PNG, WebP - Max 50MB)</span>
-                          </p>
-                        </div>
-                        <input
-                          type="file"
-                          multiple
-                          accept="image/*"
-                          onChange={(e) => handleMediaUpload(e, "photo")}
-                          className="hidden"
-                          aria-label="Télécharger des photos"
-                        />
-                      </label>
-                    </div>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              {/* Upload Controls - Sidebar */}
+              <div className="lg:col-span-1 space-y-6">
+                {/* Upload Controls */}
+                <div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg space-y-4">
+                  <h3 className="text-lg font-bold text-[var(--foreground)] flex items-center gap-2">
+                    <Upload size={20} />
+                    Ajouter Médias
+                  </h3>

-                    {/* Video Upload */}
-                    <div>
-                      <h3 className="text-lg font-bold mb-4 text-[var(--foreground)] flex items-center gap-2">
-                        <Play size={20} />
-                        Télécharger des Vidéos
-                      </h3>
-                      <label className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-[var(--accent)] border-opacity-40 rounded-xl cursor-pointer hover:border-opacity-60 transition-all bg-[var(--background)] bg-opacity-50">
-                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                          <Upload size={28} className="text-[var(--primary-cta)] mb-2" />
-                          <p className="text-sm font-medium text-[var(--foreground)] text-center">
-                            Cliquez pour télécharger<br />
-                            <span className="text-xs opacity-75">(MP4, WebM, OGG - Max 50MB)</span>
-                          </p>
-                        </div>
-                        <input
-                          type="file"
-                          multiple
-                          accept="video/*"
-                          onChange={(e) => handleMediaUpload(e, "video")}
-                          className="hidden"
-                          aria-label="Télécharger des vidéos"
-                        />
-                      </label>
+                  {/* Photo Upload */}
+                  <label className="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-[var(--accent)] border-opacity-40 rounded-xl cursor-pointer hover:border-opacity-60 transition-all bg-[var(--background)] bg-opacity-50">
+                    <div className="flex flex-col items-center justify-center">
+                      <Camera size={20} className="text-[var(--primary-cta)] mb-1" />
+                      <p className="text-xs font-medium text-[var(--foreground)] text-center">
+                        Ajouter Photos
+                      </p>
                    </div>
-                  </div>
+                    <input
+                      type="file"
+                      multiple
+                      accept="image/*"
+                      onChange={(e) => handleMediaUpload(e, "photo")}
+                      className="hidden"
+                      aria-label="Télécharger des photos"
+                    />
+                  </label>
+
+                  {/* Video Upload */}
+                  <label className="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-[var(--accent)] border-opacity-40 rounded-xl cursor-pointer hover:border-opacity-60 transition-all bg-[var(--background)] bg-opacity-50">
+                    <div className="flex flex-col items-center justify-center">
+                      <Play size={20} className="text-[var(--primary-cta)] mb-1" />
+                      <p className="text-xs font-medium text-[var(--foreground)] text-center">
+                        Ajouter Vidéos
+                      </p>
+                    </div>
+                    <input
+                      type="file"
+                      multiple
+                      accept="video/*"
+                      onChange={(e) => handleMediaUpload(e, "video")}
+                      className="hidden"
+                      aria-label="Télécharger des vidéos"
+                    />
+                  </label>

                  {/* Feedback Messages */}
                  {uploadError && (
-                    <div className="bg-red-50 border border-red-200 rounded-lg p-4">
-                      <p className="text-red-800 text-sm">{uploadError}</p>
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                      <p className="text-red-800 text-xs">{uploadError}</p>
                    </div>
                  )}
                  {uploadSuccess && (
-                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
-                      <p className="text-green-800 text-sm font-semibold">✓ Fichier uploadé avec succès!</p>
-                    </div>
-                  )}
-
-                  {/* Media Gallery Display */}
-                  <div>
-                    <div className="flex items-center justify-between mb-6">
-                      <h3 className="text-2xl font-bold text-[var(--foreground)]">
-                        Galerie des Projets ({uploadedMedia.length})
-                      </h3>
-                      {uploadedMedia.length > 0 && (
-                        <span className="text-sm text-[var(--foreground)] opacity-60">
-                          {uploadedMedia.filter(m => m.type === 'photo').length} photos, {uploadedMedia.filter(m => m.type === 'video').length} vidéos
-                        </span>
-                      )}
-                    </div>
-
-                    {uploadedMedia.length === 0 ? (
-                      <div className="text-center py-24 bg-[var(--background)] bg-opacity-50 rounded-xl border border-[var(--accent)] border-opacity-20">
-                        <Camera size={56} className="mx-auto text-[var(--accent)] opacity-30 mb-4" />
-                        <p className="text-[var(--foreground)] opacity-60 text-lg">
-                          Aucun média téléchargé pour le moment.<br />
-                          <span className="text-sm">Commencez par ajouter des photos ou des vidéos de vos projets réussis.</span>
-                        </p>
-                      </div>
-                    ) : (
-                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {uploadedMedia.map((media) => (
-                          <div
-                            key={media.id}
-                            className="relative group rounded-xl overflow-hidden border border-[var(--accent)] border-opacity-20 shadow-md hover:shadow-lg transition-all duration-300"
-                          >
-                            {/* Media Preview */}
-                            <div className="relative w-full h-56 bg-[var(--background)]">
-                              {media.type === "photo" ? (
-                                <img
-                                  src={media.src}
-                                  alt={media.name}
-                                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
-                                />
-                              ) : (
-                                <div className="w-full h-full flex items-center justify-center bg-black bg-opacity-20">
-                                  <video
-                                    src={media.src}
-                                    controls
-                                    className="w-full h-full object-contain"
-                                    aria-label={media.name}
-                                  />
-                                </div>
-                              )}
-
-                              {/* Overlay */}
-                              <div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
-
-                              {/* Type Badge */}
-                              <div className="absolute top-3 left-3 px-3 py-1 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] text-xs font-semibold rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                                {media.type === "photo" ? "📷 Photo" : "🎥 Vidéo"}
-                              </div>
-
-                              {/* Delete Button */}
-                              <button
-                                onClick={() => handleDeleteMedia(media.id)}
-                                className="absolute top-3 right-3 p-2 bg-red-500 hover:bg-red-600 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 hover:scale-110"
-                                aria-label={`Supprimer ${media.name}`}
-                              >
-                                <Trash2 size={16} />
-                              </button>
-                            </div>
-
-                            {/* File Info Footer */}
-                            <div className="bg-[var(--background)] border-t border-[var(--accent)] border-opacity-20 p-4">
-                              <p className="text-sm font-semibold text-[var(--foreground)] truncate mb-1">
-                                {media.name}
-                              </p>
-                              <p className="text-xs text-[var(--foreground)] opacity-60">
-                                {media.type === "photo" ? "Photo de projet" : "Vidéo de projet"}
-                              </p>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Gallery Statistics */}
-                  {uploadedMedia.length > 0 && (
-                    <div className="grid grid-cols-3 gap-4 pt-8 border-t border-[var(--accent)] border-opacity-20">
-                      <div className="text-center p-4 bg-[var(--background)] bg-opacity-50 rounded-lg">
-                        <p className="text-2xl font-bold text-[var(--primary-cta)]">{uploadedMedia.length}</p>
-                        <p className="text-xs text-[var(--foreground)] opacity-60 mt-1">Total Médias</p>
-                      </div>
-                      <div className="text-center p-4 bg-[var(--background)] bg-opacity-50 rounded-lg">
-                        <p className="text-2xl font-bold text-[var(--primary-cta)]">{uploadedMedia.filter(m => m.type === 'photo').length}</p>
-                        <p className="text-xs text-[var(--foreground)] opacity-60 mt-1">Photos</p>
-                      </div>
-                      <div className="text-center p-4 bg-[var(--background)] bg-opacity-50 rounded-lg">
-                        <p className="text-2xl font-bold text-[var(--primary-cta)]">{uploadedMedia.filter(m => m.type === 'video').length}</p>
-                        <p className="text-xs text-[var(--foreground)] opacity-60 mt-1">Vidéos</p>
-                      </div>
+                    <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+                      <p className="text-green-800 text-xs font-semibold">✓ Uploadé avec succès!</p>
                    </div>
                  )}
                </div>
+
+                {/* Media Count */}
+                <div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg">
+                  <div className="text-center">
+                    <p className="text-3xl font-bold text-[var(--primary-cta)] mb-2">
+                      {uploadedMedia.length}
+                    </p>
+                    <p className="text-sm text-[var(--foreground)] opacity-60">
+                      {uploadedMedia.length === 1 ? "Média" : "Médias"} ajoutés
+                    </p>
+                    {uploadedMedia.length > 0 && (
+                      <p className="text-xs text-[var(--foreground)] opacity-40 mt-3">
+                        {uploadedMedia.filter((m) => m.type === "photo").length}📷 {uploadedMedia.filter((m) => m.type === "video").length}🎥
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Feature Card Gallery - Takes 2 columns */}
+              <div className="lg:col-span-2">
+                {featureItems.length > 0 ? (
+                  <FeatureCardOne
+                    features={featureItems}
+                    title="Vos Réalisations"
+                    description="Galerie complète de vos projets de construction et rénovation"
+                    tag="Projets"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                    gridVariant="uniform-all-items-equal"
+                  />
+                ) : (
+                  <div className="bg-[var(--card)] rounded-3xl p-12 border border-[var(--accent)] border-opacity-20 shadow-lg text-center">
+                    <Camera size={48} className="mx-auto text-[var(--accent)] opacity-20 mb-4" />
+                    <p className="text-[var(--foreground)] opacity-60 text-lg">
+                      Aucun média ajouté pour le moment
+                    </p>
+                    <p className="text-[var(--foreground)] opacity-40 text-sm mt-2">
+                      Commencez à ajouter des photos et vidéos de vos projets ci-contre
+                    </p>
+                  </div>
+                )}
              </div>
            </div>
          </div>
@@ -343,4 +285,4 @@ export default function PortfolioPage() {
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -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>
+  );
+}
Author	SHA1	Message	Date
bender	eeb9f2e3e2	Merge version_9 into main Merge version_9 into main	2026-03-12 12:44:49 +00:00
bender	3c9c30249b	Add src/app/products/page.tsx	2026-03-12 12:44:45 +00:00
bender	d19059e2b7	Update src/app/page.tsx	2026-03-12 12:44:45 +00:00
bender	b5c52fc95d	Update src/app/contact/page.tsx	2026-03-12 12:44:44 +00:00
bender	80e90d0d24	Update src/app/about/page.tsx	2026-03-12 12:44:44 +00:00
bender	68428d69b5	Merge version_8 into main Merge version_8 into main	2026-03-12 12:38:02 +00:00
bender	fc281504eb	Update src/app/portfolio/page.tsx	2026-03-12 12:37:58 +00:00
bender	ed2a9e4072	Merge version_8 into main Merge version_8 into main	2026-03-12 12:37:16 +00:00
bender	cb70d0e5e9	Update src/app/portfolio/page.tsx	2026-03-12 12:37:12 +00:00
bender	c1e0019a5e	Merge version_7 into main Merge version_7 into main	2026-03-12 12:26:43 +00:00
bender	f67a04ed63	Update src/app/portfolio/page.tsx	2026-03-12 12:26:39 +00:00
bender	0dcfa33f04	Merge version_6 into main Merge version_6 into main	2026-03-12 12:10:49 +00:00