Skip to content

Commit ee6ef06

Browse files
larbi-ishaklarbi-ishak
committed
do it
1 parent 00533cf commit ee6ef06

File tree

12 files changed

+180
-41
lines changed

12 files changed

+180
-41
lines changed

‎pages/discover/index.js

Lines changed: 13 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,29 @@ import Head from "next/head";
55
import { CardsCarousel } from "@/src/components/carousel";
66
import Image from "next/image";
77
import Link from "next/link";
8+
import BannerProd from "@/src/components/banner_prod";
89

910

1011

1112
const useStyles = createStyles((theme) => ({
12-
banner: {
13-
marginTop: "20px",
14-
color:"white",
15-
width: "100%",
16-
backgroundColor: "#5f594f",
17-
height: "350px",
13+
imgSized: {
14+
[theme.fn.smallerThan("sm")]: {
15+
width: "200px",
16+
height: "200px",
17+
18+
},
1819
},
1920
IcoText: {
2021
fontWeight: "300",
2122
letterSpacing: "1px",
2223
marginLeft: "10px",
2324
marginTop: '-20px',
2425
},
25-
bannerContent:{
26-
margin:"5px auto",
27-
width: "1000px"
28-
}
2926
}));
3027

3128

3229

33-
34-
35-
const Events = ({ bestSelling }) => {
30+
const Discover = ({ bestSelling }) => {
3631
const { classes, theme } = useStyles();
3732

3833
const styles= {
@@ -109,39 +104,24 @@ const Events = ({ bestSelling }) => {
109104
</Grid.Col>
110105
</Grid>
111106

112-
<section className={classes.banner}>
113-
<Center>
114-
<h4 style={{marginTop: "30px"}}>
115-
LA MAJORITÉ DE NOS PRODUITS SONT
116-
</h4>
117-
</Center>
118-
<Center>
119-
<Grid className={classes.bannerContent}>
120-
<Grid.Col span={2}><Image src={"/icon1.png"} width={180} height={180} objectFit={"contain"} /><br /><Center className={classes.IcoText}>SANS OGM</Center></Grid.Col>
121-
<Grid.Col span={2}><Image src={"/icon2.png"} width={180} height={180} objectFit={"contain"} /><br /><Center className={classes.IcoText}>VÉGÉTALIEN</Center></Grid.Col>
122-
<Grid.Col span={2}><Image src={"/icon3.png"} width={180} height={180} objectFit={"contain"} /><br /><Center className={classes.IcoText}>SANS GLUTEN</Center></Grid.Col>
123-
<Grid.Col span={2}><Image src={"/icon4.png"} width={180} height={180} objectFit={"contain"} /><br /><Center className={classes.IcoText}>SANS PRODUITS LAITIERS</Center></Grid.Col>
124-
<Grid.Col span={2}><Image src={"/icon1.png"} width={180} height={180} objectFit={"contain"} /><br /><Center className={classes.IcoText}>HALAL</Center></Grid.Col>
125-
</Grid>
126-
</Center>
127-
</section>
107+
<BannerProd />
128108

129109
<section style={{margin: "40px 0", textTransform: "uppercase"}}>
130110
<Center> <h2>Découvrez nos offres du moment</h2> </Center>
131111
<Center> <Text>Profitez de nos promotions pour essayer quelque chose de nouveau!</Text> </Center>
132112
</section>
133113
<Grid>
134-
<Grid.Col style={{border: "1px solid #ccc", padding: "40px"}} offset={1} sm={10} md={4}>
114+
<Grid.Col style={{border: "1px solid #ccc", padding: "40px", marginBottom: "10px"}} offset={1} sm={10} md={4}>
135115
<Center>
136-
<Image src={"/NG.jpg"} width={350} height={350} />
116+
<Image src={"/NG.jpg"} width={350} height={350} className={classes.imgSized}/>
137117
</Center>
138118
<Center>
139119
<h3 style={{textAlign: "center"}}>DISPONNIBLE DANS LES PHARMACIES </h3>
140120
</Center>
141121
</Grid.Col>
142122
<Grid.Col style={{border: "1px solid #ccc", padding: "40px"}} offset={1} sm={10} md={4}>
143123
<Center>
144-
<Image src={"/az3.jpg"} width={350} height={350} />
124+
<img src={"/az3.jpg"} width={350} height={350} className={classes.imgSized}/>
145125
</Center>
146126
<div style={{textAlign: "Center"}}>
147127
<h3 style={{textTransform: "uppercase", marginTop:"10px"}}>nos Meilleurs ventes</h3>
@@ -156,7 +136,7 @@ const Events = ({ bestSelling }) => {
156136
);
157137
};
158138

159-
export default Events;
139+
export default Discover;
160140

161141
export async function getServerSideProps() {
162142
const { products } = await import("../../data/products.json");

‎pages/products/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Events = ({ productsList }) => {
6161
{productsList &&
6262
productsList.map((product) => {
6363
return (
64-
<Grid.Col sm={4} md={2} key={product.id}>
64+
<Grid.Col xs={3} sm={4} md={2} key={product.id}>
6565
<BadgeCard {...product} />
6666
</Grid.Col>
6767
);

‎public/feature1.png

41.7 KB
Loading

‎public/feature2.png

45.8 KB
Loading

‎public/feature3.png

41.7 KB
Loading

‎public/feature4.png

40.3 KB
Loading

‎public/feature5.png

45.1 KB
Loading

‎src/components/banner.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Title, createStyles, rem } from '@mantine/core';
1+
import { Center, Title, createStyles, rem } from '@mantine/core';
22
import Image from "next/image"
33

44
const useStyles = createStyles((theme) => ({
@@ -115,7 +115,9 @@ export default function Banner() {
115115

116116
<div className={classes.inner}>
117117
<Title className={classes.title}>
118-
Vos besoins
118+
<Center>
119+
Vos besoins
120+
</Center>
119121
</Title>
120122

121123
<div className={classes.IconsContainer}>

‎src/components/banner_prod.js

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import { Center, Title, createStyles, rem } from '@mantine/core';
2+
import Image from "next/image"
3+
4+
const useStyles = createStyles((theme) => ({
5+
wrapper: {
6+
position: 'relative',
7+
marginTop: "10px",
8+
paddingTop: rem(100),
9+
paddingBottom: rem(100),
10+
backgroundColor: "#5f594f",
11+
backgroundSize: 'cover',
12+
backgroundPosition: 'center',
13+
14+
[theme.fn.smallerThan('xs')]: {
15+
paddingTop: rem(80),
16+
paddingBottom: rem(50),
17+
},
18+
},
19+
20+
inner: {
21+
position: 'relative',
22+
zIndex: 1,
23+
},
24+
25+
title: {
26+
fontWeight: 800,
27+
fontSize: rem(20),
28+
letterSpacing: rem(-1),
29+
color: theme.white,
30+
textAlign: 'center',
31+
fontFamily: `Greycliff CF, ${theme.fontFamily}`,
32+
33+
[theme.fn.smallerThan('xs')]: {
34+
fontSize: rem(16),
35+
},
36+
},
37+
38+
highlight: {
39+
color: theme.colors.teal[7]
40+
},
41+
42+
description: {
43+
color: theme.colors.gray[4],
44+
textAlign: 'center',
45+
[theme.fn.smallerThan('xs')]: {
46+
fontSize: theme.fontSizes.md,
47+
textAlign: 'left',
48+
},
49+
},
50+
51+
controls: {
52+
marginTop: `calc(${theme.spacing.xl} * 1.5)`,
53+
display: 'flex',
54+
justifyContent: 'center',
55+
paddingLeft: theme.spacing.md,
56+
paddingRight: theme.spacing.md,
57+
58+
[theme.fn.smallerThan('xs')]: {
59+
flexDirection: 'column',
60+
},
61+
},
62+
63+
control: {
64+
color: theme.colors.teal[7],
65+
height: rem(42),
66+
fontSize: theme.fontSizes.md,
67+
68+
'&:not(:first-of-type)': {
69+
marginLeft: theme.spacing.md,
70+
},
71+
72+
[theme.fn.smallerThan('xs')]: {
73+
'&:not(:first-of-type)': {
74+
marginTop: theme.spacing.md,
75+
marginLeft: 0,
76+
},
77+
},
78+
},
79+
80+
IconsContainer: {
81+
display: "flex",
82+
flexWrap: "wrap",
83+
justifyContent: "center",
84+
alignItems: "center"
85+
},
86+
IconWrapper: {
87+
color: "white",
88+
textAlign: "center",
89+
},
90+
Icon:{
91+
broderRadius: "50%",
92+
},
93+
IconText:{
94+
marginTop: "-35px",
95+
fontWeight:"700"
96+
},
97+
secondaryControl: {
98+
color: theme.white,
99+
backgroundColor: 'rgba(255, 255, 255, .4)',
100+
101+
'&:hover': {
102+
backgroundColor: 'rgba(255, 255, 255, .45) !important',
103+
},
104+
},
105+
}));
106+
107+
export default function BannerProd() {
108+
const { classes} = useStyles();
109+
110+
return (
111+
<div className={classes.wrapper}>
112+
113+
<div className={classes.inner}>
114+
<Title className={classes.title}>
115+
<Center>
116+
LA MAJORITÉ DE NOS PRODUITS SONT
117+
</Center>
118+
</Title>
119+
120+
<div className={classes.IconsContainer}>
121+
<div className={classes.IconWrapper}>
122+
<div ><Image className={classes.Icon} src={"/feature1.png"} width={200} height={200} /></div>
123+
<p className={classes.IconText}>SANS PRODUITS LAITIERS </p>
124+
</div>
125+
<div className={classes.IconWrapper}>
126+
<div ><Image className={classes.Icon} src={"/feature2.png"} width={200} height={200} /></div>
127+
<p className={classes.IconText}>VÉGÉTALIEN</p>
128+
</div>
129+
<div className={classes.IconWrapper}>
130+
<div ><Image className={classes.Icon} src={"/feature3.png"} width={200} height={200} /></div>
131+
<p className={classes.IconText}>SANS GLUTEN </p>
132+
</div>
133+
<div className={classes.IconWrapper}>
134+
<div ><Image className={classes.Icon} src={"/feature4.png"} width={200} height={200} /></div>
135+
<p className={classes.IconText}>SANS OGM </p>
136+
</div>
137+
<div className={classes.IconWrapper}>
138+
<div ><Image className={classes.Icon} src={"/feature5.png"} width={200} height={200} /></div>
139+
<p className={classes.IconText}>HALAL</p>
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
);
145+
}

‎src/components/carousel.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import BaseButton from './baseButton';
55

66
const useStyles = createStyles((theme) => ({
77
card: {
8-
height: rem(300),
8+
height: rem(310),
99
display: 'flex',
1010
flexDirection: 'column',
1111
justifyContent: 'space-between',
@@ -14,8 +14,11 @@ const useStyles = createStyles((theme) => ({
1414
backgroundPosition: 'center',
1515
},
1616
CarouselTxtWrapper: {
17-
marginLeft: "150px",
1817
marginTop: "60px",
18+
[theme.fn.smallerThan('sm')]: {
19+
margin: "0",
20+
marginLeft: "15px",
21+
},
1922
},
2023
CarouselText: {
2124
fontWeight: "1000",
@@ -55,7 +58,7 @@ function Card({ image, title}) {
5558
shadow="md"
5659
p="xl"
5760
radius="md"
58-
sx={{ backgroundImage: `url(${image})` }}
61+
sx={{ backgroundImage: `url(${image})`,backgroundSize: "contain"}}
5962
className={classes.card}
6063
>
6164
<div className={classes.CarouselTxtWrapper}>

0 commit comments

Comments
 (0)