Skip to content

Commit

Permalink
product page responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@larbi-ishak
larbi-ishak committed May 11, 2024
1 parent 83d905e commit d39b4e2
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 65 deletions.
68 changes: 66 additions & 2 deletions data/products.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -197,7 +197,7 @@
"composantes": [
{
"composanteActive": "Vitamine D",
"concentration": "5,000 IU"
"concentration": "50,000 IU"
}
],
"image": "/vit_d3_5000.png"
Expand Down Expand Up @@ -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": [
{
Expand Down
125 changes: 80 additions & 45 deletions pages/products/[id].js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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"
}

}))
Expand All @@ -39,6 +57,8 @@ const Product = ({ id, data, similarProds }) => {
},
wrapper: {
margin: "20px auto",
display: "flex",
alignItems: "center"
}
}
const [quantity, setQuantity] = useState(1);
Expand Down Expand Up @@ -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> */}
Expand All @@ -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>

{/*
Expand Down
29 changes: 17 additions & 12 deletions src/components/ProdImgAgr.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Link from 'next/link';
import Image from 'next/image';
import { useDisclosure } from '@mantine/hooks';
import { Modal } from '@mantine/core';
Expand All @@ -8,38 +9,42 @@ const useStyles = createStyles((theme) => ({
title: {
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
},

button: {
backgroundColor: "transparent",
color: "#5f594f",
textDecoration: "underline"
}
}));


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>
</>
);
}

Expand Down
7 changes: 1 addition & 6 deletions src/components/productsComponents/fqa.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},

Expand Down

0 comments on commit d39b4e2

Please sign in to comment.