March-Frontend-Project · Geraldekene07 · Jun 11, 2023 · Jun 11, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.0",
     "font-awesome": "^4.7.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

diff --git a/public/index.html b/public/index.html
@@ -11,36 +11,31 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!-- bootstrap link -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
+      crossorigin="anonymous"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,191 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");
+
+.form-container {
+  border: 2px solid #eee;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.form-control {
+  height: 40px;
+  border: 1px solid #878787;
+}
+.form-control:focus {
+  border: none;
+  box-shadow: none;
+  border: 2px solid #222;
+}
+
+a {
+  text-decoration: none;
+}
+
+input::placeholder {
+  font-family: "Open Sans";
+  font-style: normal;
+  opacity: 0.5 !important;
+  font-size: 13px;
+  line-height: 31px;
+  color: #878787;
+}
+
+.create {
+  left: calc(50% - 260px / 2 + 23.98px);
+  top: 238.81px;
+
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 34px;
+
+  color: #000000;
+}
+
+.label {
+  left: 0.12px;
+  top: 333.65px;
+  font-style: normal;
+  line-height: 25px;
+  color: #878787;
+  font-size: 13px;
+}
+.label1 {
+  font-size: 13px;
+}
+.btn-create:hover {
+  background: rgba(255, 0, 0, 0.676);
+}
+.btn-create {
+  width: 100%;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  color: #ffffff;
+  background: #f31d1d;
+  border-radius: 3px;
+  border: none;
+  outline: none;
+  padding: 1.5%;
+}
+
+input[type="tel"] {
+  padding-left: 50px;
+}
+.toolkit-con {
+  position: relative;
+}
+
+.toolkit {
+  position: absolute;
+
+  bottom: 0px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 35px;
+  color: #000000;
+  background: rgba(185, 183, 183, 0.56);
+  display: grid;
+  place-content: center;
+  height: 40px;
+  padding: 5px;
+  border: none;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.foot {
+  font-style: normal;
+  text-align: center;
+  color: #000000;
+}
+
+.login {
+  position: relative;
+}
+.btn-password {
+  position: absolute;
+  right: 2%;
+  bottom: 13%;
+  border: none;
+  outline: none;
+  background-color: #fff;
+}
+
+.error {
+  border: 1px solid red;
+}
+.keep {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 31px;
+
+  color: rgba(0, 0, 0, 0.82);
+}
+
+.have {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 31px;
+
+  color: #000000;
+}
+.error:focus {
+  border: 1px solid red;
+}
+.label2 {
+  margin-top: -30px;
+  margin-bottom: 20px;
+  font-size: 13px;
+}
+.label3 {
+  margin-top: -40px;
+  margin-bottom: 20px;
+  font-size: 13px;
+}
+
+.disabled {
+  width: 15%;
+  border-radius: 7px;
+  border: none;
+  background: rgba(185, 183, 183, 0.56);
+}
+
+.disabledTxt {
+  width: 85%;
+  border: none;
+  border-radius: inherit;
+}
+.disabledTxt:focus {
+  border: none;
+}
+
+.disabled-cont {
+  border: 0.6px solid rgb(121, 121, 121);
+  border-radius: 7px;
+}
+input[type="checkbox"] {
+  margin-right: 10px;
+  display: inline-block;
+  transform: scale(1.5);
+}
+.body {
+  align-items: center;
+  color: green;
+}
+.modal-cont {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 31px;
+
+  color: rgba(0, 0, 0, 0.82);
+}
diff --git a/src/App.js b/src/App.js
@@ -1,62 +1,13 @@
-import { useState } from "react";
-import data from "./ProductStore";
-import Card from "./component/Card";
-import background1 from "./assets/background/image 4.png";
-function App() {
-  const [products, setProducts] = useState(data);
-
-  const handleIncrease = (id) => {
-    const newProducts = products.map((product) => {
-      if (product.id === id) {
-        product.count++;
-      }
-      return product;
-    });
-    setProducts(newProducts);
-  };
+import './App.css';
+import Signup from './components/Signup';
 
-  const handleReduce = (id) => {
-    const newProducts = products.map((product) => {
-      if (product.id === id && product.count > 1) {
-        product.count--;
-      }
-      return product;
-    });
-    setProducts(newProducts);
-  };
 
-  const toCartButton = (id) => {
-    const newProducts = products.map((product) => {
-      if (product.id === id) {
-        product.cart = !product.cart;
-      }
-      return product;
-    });
-    setProducts(newProducts);
-  };
 
+function App() {
   return (
     <div className="App">
-      <main className="main-section">
-        <div className="hero-section">
-          <img
-            src={background1}
-            alt="backgroung-img"
-            className="img-fluid"
-          ></img>
-        </div>
-        <div className="card-con">
-          {products.map((product) => (
-            <Card
-              product={product}
-              key={product.id}
-              handleIncrease={handleIncrease}
-              handleReduce={handleReduce}
-              toCartButton={toCartButton}
-            />
-          ))}
-        </div>
-      </main>
+      <Signup/>
+
     </div>
   );
 }

diff --git a/src/ProductStore.js b/src/ProductStore.js
diff --git a/src/assets/background/image 4.png b/src/assets/background/image 4.png
diff --git a/src/assets/burger-img/burger-1.png b/src/assets/burger-img/burger-1.png
diff --git a/src/assets/burger-img/burger-2.png b/src/assets/burger-img/burger-2.png
diff --git a/src/assets/burger-img/burger-3.png b/src/assets/burger-img/burger-3.png
diff --git a/src/assets/burger-img/burger-4.png b/src/assets/burger-img/burger-4.png
diff --git a/src/assets/burger-img/burger-5.png b/src/assets/burger-img/burger-5.png
diff --git a/src/assets/burger-img/burger-6.png b/src/assets/burger-img/burger-6.png
diff --git a/src/assets/fruit-group/group1.png b/src/assets/fruit-group/group1.png
diff --git a/src/assets/fruit-group/group2.png b/src/assets/fruit-group/group2.png
diff --git a/src/assets/fruit-group/group3.png b/src/assets/fruit-group/group3.png
diff --git a/src/assets/fruit-group/group4.png b/src/assets/fruit-group/group4.png
diff --git a/src/assets/fruit-group/group6.png b/src/assets/fruit-group/group6.png
diff --git a/src/assets/icons8-eye-30.png b/src/assets/icons8-eye-30.png
diff --git a/src/assets/icons8-hide-password-24.png b/src/assets/icons8-hide-password-24.png
diff --git a/src/assets/landing page for desktop/Rectangle 5 (1).png b/src/assets/landing page for desktop/Rectangle 5 (1).png
diff --git a/src/assets/landing page for desktop/Rectangle 5 (2).png b/src/assets/landing page for desktop/Rectangle 5 (2).png
diff --git a/src/assets/landing page for desktop/Rectangle 5 (3).png b/src/assets/landing page for desktop/Rectangle 5 (3).png
diff --git a/src/assets/landing page for desktop/Rectangle 5 (4).png b/src/assets/landing page for desktop/Rectangle 5 (4).png
diff --git a/src/assets/landing page for desktop/Rectangle 5 (5).png b/src/assets/landing page for desktop/Rectangle 5 (5).png
diff --git a/src/assets/landing page for desktop/Rectangle 5.png b/src/assets/landing page for desktop/Rectangle 5.png
diff --git a/src/assets/landing page for desktop/Vector (1).png b/src/assets/landing page for desktop/Vector (1).png
diff --git a/src/assets/landing page for desktop/Vector (2).png b/src/assets/landing page for desktop/Vector (2).png
diff --git a/src/assets/landing page for desktop/Vector.png b/src/assets/landing page for desktop/Vector.png
diff --git a/src/assets/landing page for desktop/image 10.png b/src/assets/landing page for desktop/image 10.png
diff --git a/src/assets/landing page for desktop/image 2.png b/src/assets/landing page for desktop/image 2.png
diff --git a/src/assets/landing page for desktop/image 3 (1).png b/src/assets/landing page for desktop/image 3 (1).png
diff --git a/src/assets/landing page for desktop/image 3.png b/src/assets/landing page for desktop/image 3.png
diff --git a/src/assets/landing page for desktop/image 4 (1).png b/src/assets/landing page for desktop/image 4 (1).png
diff --git a/src/assets/landing page for desktop/image 4.png b/src/assets/landing page for desktop/image 4.png
diff --git a/src/assets/landing page for desktop/image 5.png b/src/assets/landing page for desktop/image 5.png
diff --git a/src/assets/landing page for desktop/image 6.png b/src/assets/landing page for desktop/image 6.png
diff --git a/src/assets/landing page for desktop/image 7.png b/src/assets/landing page for desktop/image 7.png
diff --git a/src/assets/landing page for desktop/image 8.png b/src/assets/landing page for desktop/image 8.png
diff --git a/src/assets/landing page for desktop/image 9.png b/src/assets/landing page for desktop/image 9.png
diff --git a/src/assets/mobile/Rectangle 5 (1).png b/src/assets/mobile/Rectangle 5 (1).png
diff --git a/src/assets/mobile/Rectangle 5 (2).png b/src/assets/mobile/Rectangle 5 (2).png
diff --git a/src/assets/mobile/Rectangle 5 (3).png b/src/assets/mobile/Rectangle 5 (3).png
diff --git a/src/assets/mobile/Rectangle 5 (4).png b/src/assets/mobile/Rectangle 5 (4).png
diff --git a/src/assets/mobile/Rectangle 5 (5).png b/src/assets/mobile/Rectangle 5 (5).png
diff --git a/src/assets/mobile/Rectangle 5 (6).png b/src/assets/mobile/Rectangle 5 (6).png
diff --git a/src/assets/mobile/Rectangle 5 (7).png b/src/assets/mobile/Rectangle 5 (7).png
diff --git a/src/assets/mobile/Rectangle 5.png b/src/assets/mobile/Rectangle 5.png
diff --git a/src/assets/mobile/Rectangle 6 (1).png b/src/assets/mobile/Rectangle 6 (1).png
diff --git a/src/assets/mobile/Rectangle 6.png b/src/assets/mobile/Rectangle 6.png
diff --git a/src/assets/mobile/image 12.png b/src/assets/mobile/image 12.png
diff --git a/src/assets/mobile/image 2 (1).png b/src/assets/mobile/image 2 (1).png
diff --git a/src/assets/mobile/image 2.png b/src/assets/mobile/image 2.png
diff --git a/src/assets/mobile/image 3 (1).png b/src/assets/mobile/image 3 (1).png
diff --git a/src/assets/mobile/image 3.png b/src/assets/mobile/image 3.png
diff --git a/src/assets/mobile/image 4.png b/src/assets/mobile/image 4.png
diff --git a/src/assets/vector-images/Vector.png b/src/assets/vector-images/Vector.png
diff --git a/src/assets/vector-images/like.png b/src/assets/vector-images/like.png
diff --git a/src/assets/vector-images/like2.png b/src/assets/vector-images/like2.png