update serviceworker.js and AppRouter.js

public/serviceworker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "version-26-6-19aaaii";
+const CACHE_NAME = "version-26-6-19aimmi";
 const urlsToCache = ["index.html", "offline.html"];
 
 const self = this;

src/AppRouter.js

@@ -12,6 +12,7 @@ import { userProduct } from "~/Redux/actions";
 import proxy from "./Redux/proxy";
 import Home from "./views/Home/index";
 import Faq from "./views/Faq/index";
+import Arabickar from "./views/Arabickar/index";
 import Contact from "./views/Contact/index";
 import About from "./views/About/index";
 import Products from "./views/Products/index";
@@ -90,7 +91,7 @@ class AppRouter extends Component {
         )}
       </Route>
     );
-
+    const pathname = window.location.pathname;
     return (
       <div
         className={` ${
@@ -101,6 +102,9 @@ class AppRouter extends Component {
         <Router>
           <Switch>
             {home}
+            <Route path={"/Arabickar"}>
+              <Arabickar lang={this.props.lang} />
+            </Route>
             <Route exact path={"/reset"}>
               <Reset lang={this.props.lang} />
             </Route>
@@ -292,6 +296,7 @@ class AppRouter extends Component {
                 />
               )}
             </Route>
+
             <Route exact path={"/cart"}>
               <Cart lang={this.props.lang} />
               {/* {status ? (
@@ -380,6 +385,9 @@ class AppRouter extends Component {
               )}
             </Route>
             <Route path={""}>
+              {/* {pathname.split("/").slice(-1)[0] == "origami" ? (
+                <Origami />
+              ) : ( */}
               <Redirect
                 to={{
                   pathname: "/qr",
@@ -391,6 +399,7 @@ class AppRouter extends Component {
                     ),
                 }}
               />
+              {/* )} */}
             </Route>
           </Switch>
         </Router>

src/views/Arabickar/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+import ArabickarImg from "../../assets/images/origami.jpg";
+
+class Arabickar extends Component {
+  render() {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          textAlign: "center",
+          height: "100vh",
+        }}
+      >
+        <img
+          src={ArabickarImg}
+          alt={"حرفة ورقية"}
+          style={{
+            padding: "5px",
+            maxHheight: "70vh",
+            maxWidth: "80vw",
+            margin: "auto",
+          }}
+        />
+        <a
+          style={{
+            display: "flex",
+            backgroundColor: "#0099ff",
+            color: "#fff",
+            textDecoration: "none",
+            textAlign: "center",
+            margin: "30px auto",
+            fontSize: "20px",
+            fontWeight: "bold",
+            padding: "5px 80px",
+            borderRadius: "5px",
+          }}
+          href="https://zil.ink/arabickar"
+        >
+          حرفة ورقية
+        </a>
+      </div>
+    );
+  }
+}
+
+export default Arabickar;

src/views/Arabickar/index.scss

@@ -0,0 +1,114 @@
+.faq {
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  min-height: calc(100vh - 288px);
+  padding-top: 70px;
+  &__header {
+    margin-top: 30px;
+    width: 600px;
+    h1 {
+      letter-spacing: -2px;
+      font-family: numeralMedium;
+      font-size: calc(100vw / 25);
+      color: #424246;
+    }
+    &--search {
+      margin-top: 20px;
+      width: 100%;
+      border: 2px solid rgb(197, 197, 197);
+      border-radius: 10px;
+      padding: 5px;
+      justify-content: space-between;
+      input {
+        border: 0px;
+        flex: 1;
+        border: 0px;
+        font-size: calc(100vw / 90);
+        color: green;
+        padding: 0px 10px 0px;
+        font-size: 16px;
+        font-family: numeralMedium;
+        &::placeholder {
+          color: #d8dce5;
+          font-size: 16px;
+        }
+        &:focus {
+          outline: 0px !important;
+        }
+      }
+
+      button {
+        font-family: numeralMedium;
+        border: 0px;
+        background-color: #7dc241;
+        color: white;
+        border-radius: 10px;
+        padding: 7px 50px;
+      }
+    }
+  }
+  &__list {
+    width: 100%;
+    max-width: 1000px;
+    margin: 30px 0px;
+  }
+}
+
+.mobile-faq {
+  width: 100vw;
+  max-width: 650px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  direction: rtl;
+  overflow-x: hidden;
+  padding-top: 70px;
+  &__header {
+    margin-top: 30px;
+    width: 100%;
+    h1 {
+      letter-spacing: -2px;
+      font-family: numeralMedium;
+      color: #424246;
+    }
+
+    input {
+      border: 0px;
+      flex: 1;
+      border: 0px;
+      color: green;
+      padding: 0px 10px 0px;
+      font-size: 16px;
+      font-family: numeralMedium;
+      border: 1px solid #afafaf;
+      border-radius: 10px;
+      width: 100%;
+      padding: 8px 5px;
+      margin: 15px 0px;
+      max-width: 400px;
+      &::placeholder {
+        color: #d8dce5;
+        font-size: 16px;
+      }
+      &:focus {
+        outline: 0px !important;
+      }
+    }
+
+    button {
+      font-family: numeralMedium;
+      border: 0px;
+      background-color: #7dc241;
+      color: white;
+      border-radius: 10px;
+      padding: 7px 50px;
+    }
+  }
+  &__list {
+    width: 100%;
+    max-width: 1000px;
+    margin: 30px 0px;
+  }
+}