From d39b4e253ac527c784ac5f8c51bfb988cb88fd3f Mon Sep 17 00:00:00 2001
From: LARBI Ishak <ishak.larbi@inttic.dz>
Date: Sat, 11 May 2024 23:12:02 +0000
Subject: [PATCH] product page responsive

---
 data/products.json                       |  68 +++++++++++-
 pages/products/[id].js                   | 125 +++++++++++++++--------
 src/components/ProdImgAgr.js             |  29 +++---
 src/components/productsComponents/fqa.js |   7 +-
 4 files changed, 164 insertions(+), 65 deletions(-)

diff --git a/data/products.json b/data/products.json
index 1555d97..58f413e 100644
--- a/data/products.json
+++ b/data/products.json
@@ -172,7 +172,7 @@
     },
     {
       "id": 5,
-      "title": "VITAMINE D3 5,000 UI",
+      "title": "VITAMINE D3 50,000 UI",
       "desc": "VITAMINE D3",
       "category": ["Compléments Alimentaires" , "Gynecologie"] ,
       "price": 720,
@@ -197,7 +197,7 @@
       "composantes": [
         {
           "composanteActive": "Vitamine D",
-          "concentration": "5,000 IU"
+          "concentration": "50,000 IU"
         }
       ],
     "image": "/vit_d3_5000.png"
@@ -881,6 +881,70 @@
         }
 
 
+      ],
+      "composantes": [
+        {
+          "composanteActive": "Vitamine B3",
+          "concentration": "16 mg"
+        },
+        {
+          "composanteActive": "Vitamine B5",
+          "concentration": "6 mg"
+        },
+        {
+          "composanteActive": "Vitamine B6",
+          "concentration": "1.4 mg"
+        },
+        {
+          "composanteActive": "Vitamine B1 (Thiamin)",
+          "concentration": "1.1 mg"
+        },
+        {
+          "composanteActive": "Vitamine B2 (Riboflavin)",
+          "concentration": "1.4 mg"
+        },
+        {
+          "composanteActive": "Vitamine B12",
+          "concentration": "2.5 ug"
+        },
+        {
+          "composanteActive": "Vitamine B9 (Folic Acid)",
+          "concentration": "200 ug"
+        },
+        {
+          "composanteActive": "Vitamine B8 (Biotin)",
+          "concentration": "50 ug"
+        }
+        
+      ],
+    "image": "/b_complex.png"
+    },{
+      "id": 19,
+      "title": "COMPLEX B",
+      "desc": "COMPLEX B",
+      "category": ["Compléments Alimentaires", "Dermatologie", "Gynecologie", "Pediatrie"] ,
+      "price": 949.98,
+      "comprimes": "30 comprimes",
+      "utilisation": "6 ans et plus",
+      "mode d'emploi": "1 à 2 comprimés par jour a croquer ou selon les recommandations de votre médecin ou de votre pharmacien.",
+      "indications":[
+        { 
+        "name": "Prévention des malformations congénitales"
+        },
+        { 
+        "name": "Prévention d’anémie par carence en B9 et B12"
+        },
+        { 
+        "name": "Améliore les signes cutanéo-muqueax telle que: dermite séborréhéique, chéilite stomatite"
+        },
+        { 
+        "name": "Protège des neurones et réduit les douleurs neuropathiques"
+        },
+        { 
+        "name": "Augmente le métabolisme énergétique"
+        }
+
+
       ],
       "composantes": [
         {
diff --git a/pages/products/[id].js b/pages/products/[id].js
index ef3f15b..8134ed0 100644
--- a/pages/products/[id].js
+++ b/pages/products/[id].js
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { IconCheck } from '@tabler/icons-react';
 import { Text, Button, Grid, Kbd,  Center, createStyles, Title, Divider} from "@mantine/core";
 import { BadgeCard } from "@/src/components/productsComponents/mainProd";
 import Link from "next/link";
@@ -10,18 +11,35 @@ import Head from "next/head";
 import AgrandirImg from "@/src/components/ProdImgAgr";
 
 const useStyles = createStyles((theme) => ({
+  hip:{
+    padding: "5px",
+    margin: '3px',
+    backgroundColor: "white",
+    color: "black",
+    borderRadius: "14px"
+
+  },
     kbd: {
       fontSize: "23px",
       color: "black",
       fontWeight: "bold",
       letterSpacing: "1px"
     },
-
+    Link: {
+      textDecoration: "none",
+      color: "white",
+      backgroundColor: "black",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+      padding: "15px 40px",
+      width: "100%",
+      [theme.fn.smallerThan("sm")]: {
+        display: "block"
+      }
+    },
     button: {
-    backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${
-      theme.colors.teal[4]
-    } 100%)`,
-    marginLeft: "8px"
+      backgroundColor: "#5f594f",
+      marginLeft: "8px"
     }
 
 }))
@@ -39,6 +57,8 @@ const Product = ({ id, data, similarProds }) => {
     },
     wrapper: {
       margin: "20px auto",
+      display: "flex",
+      alignItems: "center"
     }
   }
   const [quantity, setQuantity] = useState(1);
@@ -105,39 +125,42 @@ const Product = ({ id, data, similarProds }) => {
       </Head>
     
     <div>
-      <Grid gutter={{ base: 2 }}>
+            <section style={{display: "flex", justifyContent: "space-around", flexWrap: "wrap"}} >
 
-            <Grid.Col sm={12} md={4} offset={1} span={"auto"} >
               <AgrandirImg image={image}/>
-            </Grid.Col>
 
-            <Grid.Col md={6}>
+              <div>
                 <Title>{data.title}</Title>
+                <div className={classes.kbd} >{data.price} DA</div>
+                <Divider />
+
                 <div style={styles.wrapper}>
-                  <div className={classes.kbd} >{data.price} DA</div>
-                  <fieldset style={{display:"inline"}}>
+
+                  <fieldset style={{width:"220px"}}>
                     <legend>
-                 <Title order={5} style={{display: "inline", padding: "10px 5px"}}>Quantité:</Title> 
+                      <Title order={5} style={{display: "inline", padding: "10px 5px", color: "#5f594f"}}>Quantité:</Title> 
                     </legend>
-                        <Button className={classes.button} style={styles.buttonWrapper}>
-                          <button style={styles.button} onClick={() => handleQuantity("+")}>+</button>
-                        </Button>
-                            <Kbd className={classes.kbd}>{quantity}</Kbd>
-                        <Button className={classes.button} style={styles.buttonWrapper}>
-                          <button style={styles.button} onClick={() => handleQuantity("-")}>-</button>
-                        </Button>
+
+                    <Button className={classes.button} style={styles.buttonWrapper}>
+                      <button style={styles.button} onClick={() => handleQuantity("+")}>+</button>
+                    </Button>
+
+                    <span >{quantity}</span>
+
+                    <Button className={classes.button} style={styles.buttonWrapper}>
+                      <button style={styles.button} onClick={() => handleQuantity("-")}>-</button>
+                    </Button>
                   </fieldset>
+
                   <Modal opened={opened} onClose={close} withCloseButton={false}>
-                  Article ajouté au panier
+                     Article ajouté au panier
                   </Modal>
-                  <Button className={classes.button} onClick={open} style={styles.buttonWrapper}>
-                    <button style={styles.button} onClick={handle_add_to_cart}>Ajouter au panier</button>{" "}
+
+                  <Button className={classes.Link} onClick={open} style={styles.buttonWrapper}>
+                    <button style={styles.button}  onClick={handle_add_to_cart}>Ajouter au panier</button>{" "}
                   </Button>
 
                   <Divider></Divider>
-                     <Text>Habituellement expédiée sous 24h</Text>
-                    <Text>Livraison standard offerte</Text>
-                      <Text>Retour facile </Text>
 
                   <br />
                   {/*<Title order={5} style={{display: "inline"}}>PRIX TOTAL: </Title><Kbd className={classes.kbd} >{Math.round(data.price * quantity)} DA</Kbd> */}
@@ -150,33 +173,45 @@ const Product = ({ id, data, similarProds }) => {
                   </Button> */}
 
                 </div>
-            </Grid.Col>
+                    <Text style={{color: "#5f594f"}}><IconCheck /> Habituellement expédiée sous 24h</Text>
+                    <Text style={{color: "#5f594f"}}><IconCheck />Livraison standard offerte</Text>
+                    <Text style={{color: "#5f594f"}}><IconCheck />Retour facile </Text>
+              </div>
 
-      </Grid>
+            </section>
 
-      <Grid >
-            <Grid.Col sm={12} md={5} offset={1} >
+      <Grid style={{marginTop: "10px"}}>
+            <Grid.Col sm={12} md={5} offset={1}  style={{backgroundColor: "#B3F4CD"}}>
               <FaqWithBg data={data}/>
             </Grid.Col>
-            <Grid.Col md={5}>
-            <h1>Besoins alimentaires</h1>
-            <p>Vegan</p>
-            <p>Végétarien</p>
-            <p>Sans gluten</p>
-<h2>Besoin d’aide ?</h2>
-<Text>
-Solgar met à votre disposition une équipe de conseillers
-qui répond à toutes vos questions.
-Informations
-</Text>
-<Link href={"/contact"}>Contactez-nous</Link>
+            <Grid.Col md={5} style={{backgroundColor: "#B3F4CD"}}>
+              <section style={{display: "flex", flexDirection: "column", justifyContent: "space-between"}}>
+                <div >
+                    <h2 style={{marginBottom: "10px", textTransform: "uppercase"}}>Besoins alimentaires</h2>
+                    <div style={{display: "flex"}}>
+                      <p className={classes.hip}>Vegan</p>
+                      <p className={classes.hip}>Végétarien</p>
+                      <p className={classes.hip}>Sans gluten</p>
+                    </div>
+                </div>
+                <div style={{color: "#5f594f", marginTop: '20px'}} >
+                    <h2>Besoin d’aide ?</h2>
+                    <Text>
+                      Solgar met à votre disposition une équipe de conseillers
+                      qui répond à toutes vos questions.
+                      Informations
+                    </Text>
+                    <Link href={"/contact"} style={{textDecoration: "underline", color: "#5f594f"}}>Contactez-nous</Link>
+                </div>
+
+              </section>
             </Grid.Col>
       </Grid>
 
-      <section>
-        <h3>Experiences et avis</h3>
-        aucun avis sur ce produit
-        <button> ECRIRE UN AVIS</button>
+      <section style={{margin: '10px 60px'}}>
+        <h3 style={{textTransform: "uppercase"}}>Expériences et avis</h3>
+        aucun avis sur ce produit <br />
+        <button className={classes.Link} style={{marginTop: "20px",width:"200px"}}> ECRIRE UN AVIS</button>
       </section>
 
         {/*
diff --git a/src/components/ProdImgAgr.js b/src/components/ProdImgAgr.js
index 5fcee21..ee7702a 100644
--- a/src/components/ProdImgAgr.js
+++ b/src/components/ProdImgAgr.js
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import Image from 'next/image';
 import { useDisclosure } from '@mantine/hooks';
 import { Modal } from '@mantine/core';
@@ -8,6 +9,12 @@ const useStyles = createStyles((theme) => ({
   title: {
     color: theme.colorScheme === 'dark' ? theme.white : theme.black,
   },
+
+  button: {
+    backgroundColor: "transparent",
+    color: "#5f594f",
+    textDecoration: "underline"
+  }
 }));
 
 
@@ -15,31 +22,29 @@ export default function AgrandirImg({image}) {
   const [opened, { open, close }] = useDisclosure(false);
 
   const styles={
-    button: {
-        padding: "18px",backgroundColor: "transparent", textDecoration: "none",color: "white", border: "none",
-        fontWeight: "bold"
-    },
-    buttonWrapper: {
-      margin: "5px",
-      padding: 0
-    },
     wrapper: {
       margin: "20px auto",
     }
   }
+
   const {classes} = useStyles();
   return (
     <>
+    <div>
+
             <Center  style={{padding: "10px", display: "block", paddingBottom: "0"}}>
-            <Image src={image} height={250} width={300} alt="just iamge" style={{objectFit: "contain"}}/>
+              <Image src={image} height={250} width={300} alt="just iamge" style={{objectFit: "contain"}}/>
             </Center>
 
             <Modal opened={opened} onClose={close} withCloseButton={false}>
-            <Image src={image} height={350} width={400} alt="just iamge" style={{objectFit: "contain"}}/>
+              <Image src={image} height={350} width={400} alt="just iamge" style={{objectFit: "contain"}}/>
             </Modal>
 
-            <Button className={classes.button} onClick={open} >Agrandir</Button>
-</>
+            <Center>
+              <Link href={"#"} className={classes.button} onClick={open} >Appuyer pour agrandir</Link>
+            </Center>
+    </div>
+    </>
   );
 }
 
diff --git a/src/components/productsComponents/fqa.js b/src/components/productsComponents/fqa.js
index 0902311..2c18559 100644
--- a/src/components/productsComponents/fqa.js
+++ b/src/components/productsComponents/fqa.js
@@ -15,12 +15,7 @@ import { TableScrollAr } from "@/src/components/productsComponents/inTable";
     wrapper: {
       paddingTop: "15px",
       paddingBottom: "15px",
-    backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${
-      theme.colors.teal[4]
-    } 100%)`,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'top left',
-      position: 'relative',
+      backgroundColor: "#B3F4CD",
       color: theme.black,
     },