ajout de la fiche bks esthetique, price non obligatoire ajout du bout…

…on affiliation non obligatoire

src/components/global/TemplateConfig.astro

@@ -1,7 +1,6 @@
 ---
-const { title, enderTitle, typeMotor, typeMotor1, description, price, images, pieces, logo, alt } = Astro.props;
+const { title, enderTitle, typeMotor, typeMotor1, description, price, images, pieces, logo, alt, link } = Astro.props;
 import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-astro';
-import motor from '/public/images/motor.png';
 import Picture from 'components/global/Picture.astro';
 ---
 
@@ -49,7 +48,7 @@ import Picture from 'components/global/Picture.astro';
             )}
             <div class="flex gap-2 items-center">
                 {typeMotor && (
-                    <Picture src={motor} alt="moteur" class="w-12 h-12"></Picture>
+                    <img src="/images/motor.png" alt="moteur" class="w-12 h-12">
                     <div class="flex flex-col lg:flex-row gap-2 md:mr-8 lg:mr-0">
                         <p class="px-3 bg-orange-500 rounded-3xl items-center flex justify-center text-white">{typeMotor}</p>
                         {typeMotor1 && (
@@ -60,10 +59,12 @@ import Picture from 'components/global/Picture.astro';
             </div>
         </div>
         <div class="mt-2" set:html={description}></div>
-        <div class="flex items-center gap-4 mt-4">
-            <p class="text-gray-400">Coût total :</p>
-            <p class="font-bold text-4xl">{price}€</p>
-        </div>
+        {price && (
+            <div class="flex items-center gap-4 mt-4">
+                <p class="text-gray-400">Coût total :</p>
+                <p class="font-bold text-4xl">{price}€</p>
+            </div>
+        )}
         <div class="w-full flex justify-center">
             {pieces && (
                 <details class="mt-4">
@@ -80,6 +81,11 @@ import Picture from 'components/global/Picture.astro';
                         )}
                     </div>
                 </details>
+            )}          
+            {link &&(
+                <a href={link} target="_blank" rel="noopener noreferrer" class="rounded-full bg-amber-600 w-fit p-2 px-8 mt-4 text-white flex gap-4 text-xl lg:hover:bg-slate-900 items-center">
+                        Consulter le site
+                </a>
             )}
         </div>  
     </div>

src/libs/esthetique.ts

@@ -0,0 +1,36 @@
+export const getCurrentEsthe = (esthetique: string | number) => configurations[esthetique] || configurations["bks"];
+const imagePrefix = "/images";
+
+// Fonction de création de configuration
+const createConfig = (title: string, logo: string, alt: string, description: string, link: string, images: any[]) => ({
+	title,
+	logo,
+	alt,
+	description,
+	link,
+	images: images.map((image: any) => `${imagePrefix}/${image}`),
+});
+
+const configurations = {
+	"bks": createConfig(
+		"Bikes sellier",
+		`${imagePrefix}/bks.png`,
+		"housse de selle",
+		`
+		<b>Fabriquant français de housses de selles personnalisées</b> <br> pour motos 50cc (Derbi, Rieju, Beta, Yamaha, MBK,  Sherco, Aprilia, Honda...), kits déco, caches allumages et pièces imprimés en 3D. <br>Votre spécialiste de housse de selle 50cc totalement personnalisable et sur mesure, mousse de guidon personnalisées ainsi que des poignées personnalisable.
+		`,
+		"https://bikesellier.fr/",
+		["selle.png", "poignee.png"],
+	),
+	"test": createConfig(
+		"test",
+		`${imagePrefix}/bks.png`,
+		"housse de selle",
+		`
+		<b>Fabriquant français de housses de selles personnalisées</b> <br> pour motos 50cc (Derbi, Rieju, Beta, Yamaha, MBK,  Sherco, Aprilia, Honda...), kits déco, caches allumages et pièces imprimés en 3D. <br>Votre spécialiste de housse de selle 50cc totalement personnalisable et sur mesure, mousse de guidon personnalisées ainsi que des poignées personnalisable.
+		`,
+		"https://bikesellier.fr/",
+		["selle.png", "poignee.png"],
+	),
+};
+

src/libs/produit-outillage.ts

@@ -1,16 +1,16 @@
 import { config } from 'libs/donner';
 
-export const getCurrentProduit = (produit) => configurations[produit] || configurations["nettoyant"];
+export const getCurrentProduit = (produits: string | number) => configurations[produits] || configurations["nettoyant"];
 const imagePrefix = "/images";
 
 // Fonction de création de configuration
-const createConfig = (title, logo, alt, description, price, images) => ({
+const createConfig = (title: string, logo: string, alt: string, description: string, price: number | undefined, images: any[]) => ({
 	title,
 	logo,
 	alt,
 	description,
 	price,
-	images: images.map(image => `${imagePrefix}/${image}`),
+	images: images.map((image: any) => `${imagePrefix}/${image}`),
 });
 
 const configurations = {

src/pages/categorie/esthetique.astro

@@ -34,7 +34,7 @@ import { MoveUp } from 'lucide-astro';
                 lien=""
             />
             <Cards 
-                title="Impresson 3D"
+                title="Impression 3D"
                 alt="Impresson 3d"
                 logo="/images/logo.svg"
                 description="nom de l'entreprise"
@@ -44,12 +44,12 @@ import { MoveUp } from 'lucide-astro';
         </div>
         <div class="flex justify-center my-8 gap-4 flex-wrap">
             <Cards 
-                title="Selle"
+                title="Bikes sellier"
                 alt="housse de selle perso"
-                logo="/images/logo.svg"
-                description="nom de l'entreprise"
+                logo="/images/bks.png"
+                description="Fabriquant français de housses de selles personnalisées pour motos, kits déco, poignéees, mousse de guidon."
                 imageSrc="/images/selle.png"
-                lien=""
+                lien="/product/produit?esthetique=bks#item-1"
             />
             <Cards 
                 title="Carbone"

src/pages/product/produit.astro

@@ -2,25 +2,39 @@
 import MainLayout from 'layouts/MainLayout.astro';
 import TemplateConfig from 'components/global/TemplateConfig.astro';
 import { getCurrentProduit } from 'libs/produit-outillage';
+import { getCurrentEsthe } from 'libs/esthetique';
 
 
-const configType = Astro.url.searchParams.get("produit");
+const produits = Astro.url.searchParams.get("produit");
+const esthetique = Astro.url.searchParams.get("esthetique");
+const produit =  Astro.url.searchParams.get("produit");
+let title
 
+if (produit) {
+    title = "Produit - outillage"
+} else {
+    title = "Esthetique"
+}
 
 let currentConfig;
 
-if (configType !== null) {
-    currentConfig = getCurrentProduit(configType);
-} 
+if (produits !== null) {
+    currentConfig = getCurrentProduit(produits);
+} else if (esthetique !== null) {
+    currentConfig = getCurrentEsthe(esthetique);
+} else {
+    currentConfig = {}; 
+}
 ---
 
-<MainLayout title=`Trouve ta pièce | Produit - outillage` class="overflow-x-hidden">
+<MainLayout title=`Trouve ta pièce | ${title}` class="overflow-x-hidden">
     <main class="flex justify-center items-center">
         <TemplateConfig
             title={currentConfig.title}
             logo={currentConfig.logo}
             alt={currentConfig.alt}
             description={currentConfig.description}
+            link={currentConfig.link}
             price={currentConfig.price}
             images={currentConfig.images}
         />