asdf

Author: larbi-ishak

pages/cart.js

@@ -27,6 +27,9 @@ const useStyles = createStyles((theme) => ({
   badge: {
     color: theme.colors.teal[9],
   },
+  btnClear: {
+      backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[4]} 0%, ${theme.colors.teal[4]} 100%)`,
+  }
 }));
 
 const Cart = () => {
@@ -44,7 +47,6 @@ const Cart = () => {
     },
     buttonClear: {
       padding: " 4px 20px",
-      backgroundColor: "transparent",
       textDecoration: "none",
       color: "white",
       border: "none",
@@ -176,18 +178,20 @@ const Cart = () => {
           <br />
           <Badge className={classes.badge}>+ prix de livraison</Badge>
         </Center>
+        <div style={{display: "flex", justifyContent: "flex-end", marginRight: "50px"}}>
         <Button className={classes.button}>
-          <button style={styles.buttonClear} onClick={handleClear}>
+          <button style={styles.buttonClear} className={classes.btnClear} onClick={handleClear}>
             <IconTrashXFilled />
             vider le panier
           </button>
         </Button>
+</div>
 
         <form
           action="https://formsubmit.co/[email protected]"
           method="POST"
         >
-          <Grid>
+          <Grid style={{margin: "2px auto", width: "800px"}}>
             <Grid.Col md={4}>
               <Text style={{ display: "inline" }}>
                 Nom: <span style={{ color: "red" }}>*</span>
@@ -211,14 +215,6 @@ const Cart = () => {
               />
               <input type="hidden" name="_next" value="https://ambinternationale.com" />
             </Grid.Col>
-            <Grid.Col md={4}>
-              <Text style={{ display: "inline" }}>Email:</Text>
-              <input
-                type="email"
-                name="email"
-                style={{ margin: "8px", padding: "8px", borderRadius: "5px" }}
-              />
-            </Grid.Col>
             <Grid.Col md={4}>
               <Text style={{ display: "inline" }}>
                 Addresse: <span style={{ color: "red" }}>*</span>
@@ -230,6 +226,14 @@ const Cart = () => {
                 style={{ margin: "8px", padding: "8px", borderRadius: "5px" }}
               />
             </Grid.Col>
+            <Grid.Col md={4}>
+              <Text style={{ display: "inline" }}>Email:</Text>
+              <input
+                type="email"
+                name="email"
+                style={{ margin: "8px", padding: "8px", borderRadius: "5px" }}
+              />
+            </Grid.Col>
           </Grid>
           <input type="hidden" name="_subject" value="New Order!" />
           <input type="hidden" name="cart" value={JSON.stringify(cart)} />

pages/discover/index.js

@@ -1,4 +1,5 @@
 import { Text, Grid, Center, Button} from "@mantine/core";
+import BaseButton from "@/src/components/baseButton";
 import { VenteCard } from "@/src/components/productsComponents/mainProd2";
 import Head from "next/head";
 import { CardsCarousel } from "@/src/components/carousel";
@@ -34,7 +35,7 @@ const Events = ({ bestSelling }) => {
       fontSize: "18px"
     },
     wrapper: {
-      margin: "0 15px"
+      margin: "10px 55px"
     }
   }
 
@@ -55,7 +56,7 @@ const Events = ({ bestSelling }) => {
     <div>
         <CardsCarousel />
         <div style={styles.wrapper}>
-            <h1>Meilleurs Ventes</h1>
+            <h2 style={{marginTop: "20px", color: "#937b44"}}>NOS MEILLEURS VENTES</h2>
             <Grid style={{padding: "30px" }}>
                 {bestSelling &&
                 bestSelling.map((product) => {
@@ -70,18 +71,19 @@ const Events = ({ bestSelling }) => {
                     <Grid.Col sm={10} offset={1} md={5}>
                         <Image src={"/VIT_D.jpg"} style={{borderRadius: "32px"}} width={500} height={380} />
                     </Grid.Col>
-                    <Grid.Col sm={10} md={5}>
-                      <h1>DÉCOUVREZ Les Vitamines D3 a plusieurs dosages  </h1>
+                    <Grid.Col style={{margin: "50px"}} sm={10} md={5}>
+                      <h2>DÉCOUVREZ Les Vitamines D3 a plusieurs dosages  </h2>
                     <p>Dosée à 500,1000,4000,50.000 UI par comprimé, elles est très agréable à utiliser au quotidien. La vitamine D contribue au fonctionnement normal du système immunitaire. Elles contribue également à maintenir une ossature et une fonction musculaire normale.</p>
-                    <Link href={"/products/d3"}>Découvrir le produit</Link>
+                    <Link href={"/products/d3"}></Link>
+        <BaseButton link={"/products/d3"}  text={"Découvrir le produit"} />
                     </Grid.Col>
             </Grid>
 
-            <Grid>
-                    <Grid.Col offset={1} sm={10} md={5}>
-                    <h1>apple cider complex newgate </h1>
+            <Grid style={{marginTop: "20px"}}>
+                    <Grid.Col style={{paddingLeft: "50px",display: "flex", justifyContent:"center", flexDirection: "column"}} offset={1} sm={10} md={5}>
+                    <h1 style={{textTransform: "uppercase"}}>Apple Cider Complex<br /> Newgate </h1>
                     <p>lorem ipsum </p>
-                    <Link href={"/products/1"}>Découvrir le produit</Link>
+                    <BaseButton link={"/products/1"} text={"Découvrir le produit"} />
                     </Grid.Col>
                     <Grid.Col sm={10}  md={5}>
                         <Image src={"/appl2.jpg"} width={500} height={500} />
@@ -99,23 +101,28 @@ const Events = ({ bestSelling }) => {
                 </Grid>
             </section>
 
-            <Center> <h1>Découvrez nos offres du moment</h1> </Center>
+          <section style={{margin: "40px 0", textTransform: "uppercase"}}>
+            <Center> <h2>Découvrez nos offres du moment</h2> </Center>
             <Center> <Text>Profitez de nos promotions pour essayer quelque chose de nouveau!</Text> </Center>
-
+          </section>
             <Grid>
-                    <Grid.Col style={{border: "1px solid #ccc"}} offset={1} sm={10}  md={4}>
+                    <Grid.Col style={{border: "1px solid #ccc", padding: "40px"}} offset={1} sm={10}  md={4}>
                       <Center>
                         <Image src={"/NG.jpg"} width={350} height={350} />
-</Center>
-                        <h1>DISPONNIBLE DANS LES PHARMACIES </h1>
+                      </Center>
+                      <Center>
+                        <h3 style={{textAlign: "center"}}>DISPONNIBLE DANS LES PHARMACIES </h3>
+                      </Center>
                     </Grid.Col>
-                    <Grid.Col style={{border: "1px solid #ccc"}} offset={1} sm={10}  md={4}>
+                    <Grid.Col style={{border: "1px solid #ccc", padding: "40px"}} offset={1} sm={10}  md={4}>
                       <Center>
                         <Image src={"/az3.jpg"} width={350} height={350} />
-</Center>
-                        <h1>nos Meilleurs ventes</h1>
+                      </Center>
+                      <div style={{textAlign: "Center"}}>
+                        <h3 style={{textTransform: "uppercase", marginTop:"10px"}}>nos Meilleurs ventes</h3>
                         <Text>Découvrez vos produits préférés dès maintenant sur notre site</Text>
-                        <Link href={"/products/8"}>Découvrir</Link>
+                        <BaseButton link={"/products/8"} text={"Découvrir"} />
+                      </div>
                     </Grid.Col>
             </Grid>
         </div>

pages/products/[id].js

@@ -7,6 +7,7 @@ import { FaqWithBg } from "@/src/components/productsComponents/fqa";
 import { useDisclosure } from '@mantine/hooks';
 import { Modal } from '@mantine/core';
 import Head from "next/head";
+import AgrandirImg from "@/src/components/ProdImgAgr";
 
 const useStyles = createStyles((theme) => ({
     kbd: {
@@ -26,7 +27,6 @@ const useStyles = createStyles((theme) => ({
 }))
 const Product = ({ id, data, similarProds }) => {
   const [opened, { open, close }] = useDisclosure(false);
-  const [ImgOpened, { ImgOpen, ImgClose }] = useDisclosure(false);
 
   const styles={
     button: {
@@ -108,15 +108,7 @@ const Product = ({ id, data, similarProds }) => {
       <Grid gutter={{ base: 2 }}>
 
             <Grid.Col sm={12} md={4} offset={1} span={"auto"} >
-              <Center  style={{padding: "10px", display: "block", paddingBottom: "0"}}>
-                <Image src={image} height={250} width={300} alt="just iamge" style={{objectFit: "contain"}}/>
-              </Center>
-
-                  <Modal opened={ImgOpened} onClose={ImgClose} withCloseButton={false}>
-                    sdfasd
-                <Image src={image} height={350} width={400} alt="just iamge" style={{objectFit: "contain"}}/>
-                  </Modal>
-                  <Button className={classes.button} onClick={ImgOpen} style={styles.buttonWrapper}>Agrandir</Button>
+              <AgrandirImg image={image}/>
             </Grid.Col>
 
             <Grid.Col md={6}>

src/components/MainImg.js

@@ -65,6 +65,7 @@ const useStyles = createStyles((theme) => ({
 
   control: {
     color: "white",
+    textTransform: "uppercase",
     height: rem(42),
     lineHeight: rem(42),
     fontSize: theme.fontSizes.md,
@@ -102,7 +103,7 @@ function MainImg() {
       <div className={classes.inner}>
         <div className={classes.controls}>
           <Button onClick={ScrollDown} className={classes.control} size="lg">
-            DECOUVRIR
+            Découvrir
           </Button>
         </div>
       </div>

src/components/ProdImgAgr.js

@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import { useDisclosure } from '@mantine/hooks';
+import { Modal } from '@mantine/core';
+import { Button, createStyles, Title, Center } from '@mantine/core';
+
+
+const useStyles = createStyles((theme) => ({
+  title: {
+    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+  },
+}));
+
+
+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 (
+    <>
+            <Center  style={{padding: "10px", display: "block", paddingBottom: "0"}}>
+            <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"}}/>
+            </Modal>
+
+            <Button className={classes.button} onClick={open} >Agrandir</Button>
+</>
+  );
+}
+
+

src/components/banner.js

@@ -29,7 +29,6 @@ const useStyles = createStyles((theme) => ({
     paddingLeft: theme.spacing.md,
     paddingRight: theme.spacing.md,
     color: theme.white,
-    marginBottom: theme.spacing.xs,
     textAlign: 'center',
     fontFamily: `Greycliff CF, ${theme.fontFamily}`,
 
@@ -88,16 +87,15 @@ const useStyles = createStyles((theme) => ({
     alignItems: "center"
   },
   IconWrapper: {
-
     color: "white",
     textAlign: "center",
-
   },
   Icon:{
     broderRadius: "50%",
   },
   IconText:{
     marginTop: "-35px",
+    fontWeight:"700"
   },
   secondaryControl: {
     color: theme.white,
@@ -127,15 +125,15 @@ export default function Banner() {
           </div>
           <div className={classes.IconWrapper}>
             <div ><Image className={classes.Icon} src={"/icon2.png"} width={250} height={250} /></div>
-            <p className={classes.IconText}>Beaute</p>
+            <p className={classes.IconText}>Beauté</p>
           </div>
           <div className={classes.IconWrapper}>
             <div ><Image className={classes.Icon} src={"/icon1.png"} width={250} height={250} /></div>
-            <p className={classes.IconText}>Defenses Immunitaires</p>
+            <p className={classes.IconText}>Défenses immunitaires</p>
           </div>
           <div className={classes.IconWrapper}>
             <div ><Image className={classes.Icon} src={"/icon4.png"} width={250} height={250} /></div>
-            <p className={classes.IconText}>Energie</p>
+            <p className={classes.IconText}>Énergie</p>
           </div>
         </div>
       </div>

src/components/baseButton.js

@@ -0,0 +1,25 @@
+import { createStyles} from '@mantine/core';
+import Link from 'next/link';
+
+const useStyles = createStyles((theme) => ({
+  Link: {
+    textDecoration: "none",
+    color: "white",
+    backgroundColor: "black",
+    fontWeight: "bold",
+    textTransform: "uppercase",
+    padding: "15px 40px",
+  },
+}));
+
+export default function BaseButton({ link, text}) {
+  const { classes } = useStyles();
+
+  return (
+    <>
+    <div style={{marginLeft: "15px", marginTop: "20px"}}>
+        <Link className={classes.Link} href={link}>{text}</Link>
+</div>
+    </>
+  );
+}

src/components/carousel.js

@@ -1,7 +1,7 @@
 import { Carousel } from '@mantine/carousel';
 import { useMediaQuery } from '@mantine/hooks';
-import { createStyles, Paper, Text, Title, Button, useMantineTheme, rem } from '@mantine/core';
-import Link from 'next/link';
+import { createStyles, Paper, useMantineTheme, rem } from '@mantine/core';
+import BaseButton from './baseButton';
 
 const useStyles = createStyles((theme) => ({
   card: {
@@ -13,7 +13,22 @@ const useStyles = createStyles((theme) => ({
     backgroundSize: 'cover',
     backgroundPosition: 'center',
   },
-
+  CarouselTxtWrapper: {
+    marginLeft: "150px",
+    marginTop: "60px",
+  },
+  CarouselText: {
+    fontWeight: "1000",
+    fontSize: "2rem",
+    lineHeight: "32px",
+    textTransform: "uppercase",
+    letterSpacing: "2px",
+    color: `${theme.colors.teal[9]}`,
+  },
+  button: {
+    lineHeight: "52px",
+    marginTop: "20px",
+  },
   title: {
     fontFamily: `Greycliff CF, ${theme.fontFamily}`,
     fontWeight: 900,
@@ -43,10 +58,9 @@ function Card({ image, title}) {
       sx={{ backgroundImage: `url(${image})` }}
       className={classes.card}
     >
-      <div>
-        {/* <Title order={3} className={classes.title}> {title} </Title>*/}
-        <h3 className={classes.CarouselText}>renforcer votre<br />immunite avec newgate</h3>
-        <Link className={classes.CarouselBtn} href={"/products"}>je decouvre</Link>
+      <div className={classes.CarouselTxtWrapper}>
+        <h3 className={classes.CarouselText}>renforcer votre<br />immunité avec newgate</h3>
+        <BaseButton link={"/products"} className={classes.button} text={"je découvre"} />
       </div>
     </Paper>
   );