de gea save

larbi-ishak · Jul 24, 2023 · a0d6c13 · a0d6c13
1 parent 36454ad
commit a0d6c13
Show file tree

Hide file tree

Showing 18 changed files with 347 additions and 65 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+    "rules": {
+      "react/no-unescaped-entities": "off",
+      "@next/next/no-page-custom-font": "off"
+    }
 }
diff --git a/pages/404.js b/pages/404.js
@@ -1,15 +1,30 @@
 import { NotFoundImage } from "@/src/components/notFound";
 import { useRouter } from "next/router";
+import Head from "next/head";
 
 const Not_found = () => {
   const router = useRouter();
     setTimeout(() => {
       router.push("/");
     }, 2500);
   return (
+    <>
+      <Head>
+        <title>Not Found Page</title>
+        <meta
+          name="description"
+          content="Generated by create next app"
+        />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
     <>
     <NotFoundImage />
     </>
+    </>
   );
 };
 

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,11 +1,11 @@
 
-import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { MantineProvider } from '@mantine/core';
 import RootLayout from "@/src/layouts/routLayout";
 import Navbar from "@/src/components/navbar";
 import Footer from "@/src/components/footer";
 import "@/styles/globals.css";
+import { Demo } from '@/src/components/affix';
 
 export default function App(props) {
   const { Component, pageProps } = props;
@@ -33,6 +33,7 @@ export default function App(props) {
                 <Component {...pageProps} />
                 <Footer />
             </RootLayout>
+                <Demo/>
       </MantineProvider>
     </>
   );

diff --git a/pages/about.js b/pages/about.js
@@ -2,9 +2,24 @@ import { FeaturesAsymmetrical} from "@/src/components/aboutComp";
 
 const About = () => {
   return (
+
+    <>
+      <Head>
+        <title>About Page</title>
+        <meta
+          name="description"
+          content="Generated by create next app"
+        />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
     <div>
         <FeaturesAsymmetrical />
     </div>
+    </>
   );
 };
 

diff --git a/pages/blogs.js b/pages/blogs.js
@@ -1,12 +1,28 @@
 import { ArticlesCardsGrid } from "@/src/components/blogComp";
+import Head from "next/head";
 
 const Blogs = ({ blogs }) => {
+
         return (
+    <>
+      <Head>
+        <title>Blogs Page</title>
+        <meta
+          name="description"
+          content="Generated by create next app"
+        />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
           <div>
       <ArticlesCardsGrid mockdata={blogs}/>
             <div>
             </div>
           </div>
+          </>
         );
       };
 

diff --git a/pages/cart.js b/pages/cart.js
@@ -48,6 +48,19 @@ const Cart = () => {
   };
 
   return (
+<>
+            <Head>
+                <title>Cart Page</title>
+                <meta
+                    name="description"
+                    content="Generated by create next app"
+                />
+                <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1"
+                />
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
     <div>
       {cart &&
         cart.map((item) => {
@@ -88,7 +101,8 @@ const Cart = () => {
       </form>
         {/* TODO after show page of order and thanks page  all this in Modal*/}
     </div>
+</>
   );
 };
 
-export default Cart;
+export default Cart
diff --git a/pages/contact.js b/pages/contact.js
@@ -5,7 +5,7 @@ const Contact = () => {
   return (
     <>
       <Head>
-        <title>ContactPage</title>
+        <title>Contact Page</title>
         <meta
           name="description"
           content="Generated by create next app"

diff --git a/pages/index.js b/pages/index.js
@@ -5,6 +5,7 @@ import { StatsGridIcons } from "@/src/components/indexComponents/indStats";
 import Head from "next/head.js";
 import { Button, Group,createStyles } from '@mantine/core';
 import Link from "next/link";
+import { Demo } from "@/src/components/affix";
 
 export default function Home() {
  const useStyles = createStyles((theme) => ({

diff --git a/pages/products/[id].js b/pages/products/[id].js
@@ -1,18 +1,39 @@
 import { useEffect, useState } from "react";
-import { Button, Grid, Center} from "@mantine/core";
+import { Button, Grid, Kbd,  Center, createStyles, Title, Divider} from "@mantine/core";
 import { BadgeCard } from "@/src/components/productsComponents/mainProd";
 import Link from "next/link";
-import { TableScrollArea } from "@/src/components/productsComponents/inPordTable";
-import { TableScrollAr } from "@/src/components/productsComponents/inTable";
 import Image from "next/image";
+import { FaqWithBg } from "@/src/components/productsComponents/fqa";
+import { useDisclosure } from '@mantine/hooks';
+import { Modal } from '@mantine/core';
 
+const useStyles = createStyles((theme) => ({
+    kbd: {
+      fontSize: "23px",
+      colro: "black"
+    },
+
+    button: {
+    backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${
+      theme.colors.teal[4]
+    } 100%)`,
+    marginLeft: "8px"
+    }
+
+}))
 const Product = ({ id, data, similarProds }) => {
+  const [opened, { open, close }] = useDisclosure(false);
+
   const styles={
     button: {
-padding: "8px",backgroundColor: "transparent", textDecoration: "none",color: "white", border: "none"
+        padding: "18px",backgroundColor: "transparent", textDecoration: "none",color: "white", border: "none",
     },
     buttonWrapper: {
-      margin: "5px"
+      margin: "5px",
+      padding: 0
+    },
+    wrapper: {
+      margin: "20px auto",
     }
   }
   const [quantity, setQuantity] = useState(1);
@@ -59,54 +80,60 @@ padding: "8px",backgroundColor: "transparent", textDecoration: "none",color: "wh
     }
   };
 
-  const {composantes, indications,image}=data
+  const { classes } = useStyles();
+  const {image}=data
   return (
     <div>
       <Grid>
-            <Grid.Col sm={12} md={4} >
-              <Center>
-              <Image src={image} height={250} width={250} alt="just iamge1l" />
-</Center>
-            </Grid.Col>
-            <Grid.Col sm={6} md={4} >
-              <TableScrollArea data={composantes} />
-              mode demploi
-              utilisation
+            <Grid.Col sm={12} md={4} offset={1} span={"auto"} >
+              <Center  style={{borderRadius: "24px",padding: "10px", display: "block", border: "4px solid #ccc", paddingBottom: "0"}}>
+                <Image src={image} height={300} width={300} alt="just iamge" />
+                <br></br>
+                <div style={styles.wrapper}>
+                  <Title order={5} style={{display: "inline"}}>Unit price:</Title> <Kbd className={classes.kbd} >{data.price} DA</Kbd>
+                 {"  "} <Title order={5} style={{display: "inline"}}>Quantity:</Title> <Kbd className={classes.kbd}>{quantity}</Kbd>
+                  <br />
+                  <Title order={5} style={{display: "inline"}}>total price: </Title><Kbd className={classes.kbd} >{data.price * quantity} DA</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>
+                  <br />
+                  {/*// TODO notification that it is added to cart*/}
+                  <Modal opened={opened} onClose={close} withCloseButton={false}>
+                    Item added to Cart
+                  </Modal>
+                  <Button className={classes.button} onClick={open} style={styles.buttonWrapper}>
+                    <button style={styles.button} onClick={handle_add_to_cart}>Add to Cart</button>{" "}
+                  </Button>
+
+                  <Button className={classes.button}>
+                        <Link href={"/cart"}>
+                    <button style={styles.button} onClick={handle_add_to_cart}>Order Now</button>{" "}
+                        </Link>
+                  </Button>
+                </div>
+              </Center>
             </Grid.Col>
-            <Grid.Col sm={6} md={3} >
-              <TableScrollAr data={indications} />
+
+            <Grid.Col md={6}>
+            <FaqWithBg data={data}/>
             </Grid.Col>
+
       </Grid>
-      <div>
-        quantity: {quantity}
-        <br />
-        price: {data.price * quantity}
-        <br />
-        <Button style={styles.buttonWrapper}>
-          <button style={styles.button} onClick={() => handleQuantity("+")}>+</button>
-        </Button>
-
-        <Button style={styles.buttonWrapper}>
-          <button style={styles.button} onClick={() => handleQuantity("-")}>-</button>
-        </Button>
-        <br />
-        {/*// TODO notification that it is added to cart*/}
-        <Button style={styles.buttonWrapper}>
-          <button style={styles.button} onClick={handle_add_to_cart}>Add to Cart</button>{" "}
-        </Button>
-        <Button>
-              <Link href={"/cart"}>
-          <button style={styles.button} onClick={handle_add_to_cart}>Order Now</button>{" "}
-              </Link>
-        </Button>
-      </div>
-      <h3>similar products</h3>
-      <div>
+
+<Divider size="sm" />
+
+      <div style={{margin: "30px"}}>
+      <h2>similar products</h2>
       <Grid >
         {similarProds &&
           similarProds.map((product) => {
             return (
-            <Grid.Col span={4} key={product.id}>
+            <Grid.Col md={4} key={product.id}>
               <BadgeCard {...product} />
             </Grid.Col>
             );
@@ -151,3 +178,12 @@ export async function getStaticProps(context) {
     },
   };
 }
+
+function Demo() {
+
+  return (
+    <>
+
+    </>
+  );
+}
diff --git a/pages/products/index.js b/pages/products/index.js
@@ -38,6 +38,19 @@ const Events = ({ productsList }) => {
     }
   }
   return (
+    <>
+      <Head>
+        <title>Contact Page</title>
+        <meta
+          name="description"
+          content="Generated by create next app"
+        />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
     <div>
       <Center maw={400} h={100} mx="auto">
       <h2 style={{marginTop: "-30px"}}>Products:</h2>
@@ -64,6 +77,7 @@ const Events = ({ productsList }) => {
           })}
     </Grid>
     </div>
+    </>
   );
 };
 

diff --git a/public/bg.svg b/public/bg.svg
diff --git a/src/components/affix.js b/src/components/affix.js
@@ -0,0 +1,33 @@
+import { IconArrowUp } from '@tabler/icons-react';
+import { useWindowScroll } from '@mantine/hooks';
+import {  createStyles, Affix, Button, Transition, rem } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+  button: {
+    backgroundImage: `linear-gradient(135deg, ${theme.colors.teal[9]} 0%, ${
+      theme.colors.teal[4]
+    } 100%)`,
+  },
+}))
+export function Demo() {
+  const [scroll, scrollTo] = useWindowScroll();
+  const { classes } = useStyles();
+  return (
+    <>
+      <Affix position={{ bottom: rem(20), right: rem(20) }}>
+        <Transition transition="slide-up" mounted={scroll.y > 0}>
+          {(transitionStyles) => (
+            <Button
+            className={classes.button}
+              leftIcon={<IconArrowUp size="1rem" />}
+              style={transitionStyles}
+              onClick={() => scrollTo({ y: 0 })}
+            >
+              Scroll to top
+            </Button>
+          )}
+        </Transition>
+      </Affix>
+    </>
+  );
+}
diff --git a/src/components/carousel.js b/src/components/carousel.js
@@ -96,7 +96,7 @@ export function CardsCarousel() {
   return (
     <Carousel
       slideSize="50%"
-      breakpoints={[{ maxWidth: 'lg', slideSize: '100%', slideGap: rem(2) }]}
+      breakpoints={[{ maxWidth: 'xl', slideSize: '100%', slideGap: rem(2) }]}
       slideGap="xl"
       align="start"
     >