poc

add @babel/plugin-proposal-private-property-in-object
Changed readme
2024-04-15 00:13:53 +08:00 · 2024-04-14 15:02:14 +08:00 · 2024-04-14 15:00:36 +08:00
34 changed files with 5088 additions and 73 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-Safe QR marketing app for FYP-24-S2-43P
+# Safe QR marketing app for FYP-24-S2-43P

 # Getting Started with Create React App

--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "safeqr-marketing-app",
      "version": "0.1.0",
      "dependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
@@ -17,9 +18,13 @@
        "@types/react-dom": "^18.2.25",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
        "react-scripts": "5.0.1",
        "typescript": "^4.9.5",
        "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "gh-pages": "^6.1.1"
      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
@@ -664,9 +669,16 @@
      }
    },
    "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
      "engines": {
        "node": ">=6.9.0"
      },
@@ -1909,6 +1921,17 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
    "node_modules/@babel/preset-env/node_modules/semver": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -3354,6 +3377,14 @@
        }
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4981,6 +5012,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/array.prototype.findlast": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
@@ -7023,6 +7063,12 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.736.tgz",
      "integrity": "sha512-Rer6wc3ynLelKNM4lOCg7/zPQj8tPOCB2hzD32PX9wd3hgRRi9MxEbmkFCokzcEhRVMiOVLjnL9ig9cefJ+6+Q=="
    },
+    "node_modules/email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true
+    },
    "node_modules/emittery": {
      "version": "0.8.1",
      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -8225,6 +8271,32 @@
        "node": ">=10"
      }
    },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/filesize": {
      "version": "8.0.7",
      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -8716,6 +8788,79 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/gh-pages": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.1.tgz",
+      "integrity": "sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.4",
+        "commander": "^11.0.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^11.1.1",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/gh-pages/node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/gh-pages/node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -13116,6 +13261,27 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/pirates": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -14865,6 +15031,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -16246,6 +16442,18 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/style-loader": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
@@ -16753,6 +16961,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/tryer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -2,7 +2,9 @@
  "name": "safeqr-marketing-app",
  "version": "0.1.0",
  "private": true,
+  "homepage": "https://safeqr.github.io/marketing",
  "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
@@ -12,12 +14,15 @@
    "@types/react-dom": "^18.2.25",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
@@ -39,5 +44,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.1.1"
  }
 }
--- a/public/css/animate.css
+++ b/public/css/animate.css
--- a/public/images/applight-wave.svg
+++ b/public/images/applight-wave.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1920 204.8" style="enable-background:new 0 0 1920 204.8;" xml:space="preserve" preserveAspectRatio="none">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M367,41.4c235-43.3,518-74.9,736.8,23.9c121.4,54.9,250.6,103.2,395.6,103.2c116.1,0,242.4-31,383.1-114.4
+	c13.4-7.9,25.9-15.3,37.5-22.2v173H0l0-172C0,32.8,132,84.6,367,41.4z"/>
+</svg>
--- a/public/images/appstore.png
+++ b/public/images/appstore.png
--- a/public/images/arrow-left.png
+++ b/public/images/arrow-left.png
--- a/public/images/arrow-right.png
+++ b/public/images/arrow-right.png
--- a/public/images/iphone-screen-with-shadow.png
+++ b/public/images/iphone-screen-with-shadow.png
--- a/public/images/iphone-screen.png
+++ b/public/images/iphone-screen.png
--- a/public/images/logo-black.png
+++ b/public/images/logo-black.png
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/public/images/pattern.png
+++ b/public/images/pattern.png
--- a/public/images/playstore.png
+++ b/public/images/playstore.png
--- a/public/images/user1.jpg
+++ b/public/images/user1.jpg
--- a/public/images/user2.jpg
+++ b/public/images/user2.jpg
--- a/public/images/user3.jpg
+++ b/public/images/user3.jpg
--- a/public/images/video-bg.jpg
+++ b/public/images/video-bg.jpg
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,17 @@
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/style.css" type="text/css" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css" type="text/css" />
+
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+	<!-- Font Google -->
+	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
    <!--
      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/
@@ -27,6 +38,14 @@
    <title>React App</title>
  </head>
  <body>
+	
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 
+<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 
+<!-- scrollIt js --> 
+<script src="%PUBLIC_URL%/js/scrollIt.min.js"></script> 
+<script src="%PUBLIC_URL%/js/wow.min.js"></script> 
+
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
@@ -39,5 +58,71 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
+    
+	<script>
+		wow = new WOW();
+		wow.init();
+	$(document).ready(function(e) {
+	
+		$('#video-icon').on('click',function(e){
+		e.preventDefault();
+		$('.video-popup').css('display','flex');
+		$('.iframe-src').slideDown();
+		});
+		$('.video-popup').on('click',function(e){
+		var $target = e.target.nodeName;
+		var video_src = $(this).find('iframe').attr('src');
+		if($target != 'IFRAME'){
+		$('.video-popup').fadeOut();
+		$('.iframe-src').slideUp();
+		$('.video-popup iframe').attr('src'," ");
+		$('.video-popup iframe').attr('src',video_src);
+		}
+		});
+	
+		$('.slider').bxSlider({
+		pager: false
+		});
+	});
+		
+	$(window).on("scroll",function () {
+	
+		var bodyScroll = $(window).scrollTop(),
+		navbar = $(".navbar");
+		
+		if(bodyScroll > 50){
+		$('.navbar-logo img').attr('src','../marketing/images/logo-black.png');
+		navbar.addClass("nav-scroll");
+	
+	}else{
+		$('.navbar-logo img').attr('src','../marketing/images/logo.png');
+		navbar.removeClass("nav-scroll");
+	}
+	
+	});
+	$(window).on("load",function (){
+		var bodyScroll = $(window).scrollTop(),
+		navbar = $(".navbar");
+		
+		if(bodyScroll > 50){
+		$('.navbar-logo img').attr('src','images/logo-black.png');
+		navbar.addClass("nav-scroll");
+		}else{
+		$('.navbar-logo img').attr('src','images/logo.png');
+		navbar.removeClass("nav-scroll");
+		}
+	
+		$.scrollIt({
+		
+		easing: 'swing',      // the easing function for animation
+		scrollTime: 900,       // how long (in ms) the animation takes
+		activeClass: 'active', // class given to the active nav element
+		onPageChange: null,    // function(pageIndex) that is called when page is changed
+		topOffset: -63
+		});
+	});
+	
+	</script>
+	
  </body>
 </html>
--- a/public/js/scrollIt.min.js
+++ b/public/js/scrollIt.min.js
@@ -0,0 +1 @@
+(function(e){"use strict";var t="ScrollIt",n="1.0.3";var r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:0};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t<0||t>s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")||e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&&(r==n.upKey||r==n.downKey)){return false}if(r==n.upKey&&i>0){o(parseInt(i)-1);return false}else if(r==n.downKey&&i<s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&&t&&i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t>=e(i).offset().top+n.topOffset&&t<e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)
--- a/public/js/wow.min.js
+++ b/public/js/wow.min.js
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,603 @@
+* {
+	padding:0;
+	margin:0;
+}
+body {
+	font-family: 'Poppins', sans-serif;
+	font-size: 14px;
+}
+a {
+	color:#5f0099;
+}
+a:hover {
+	color:#5f0099;
+}
+h1, h2, h3 {
+	font-weight: 700;
+}
+h4, h5 {
+	font-weight:600;
+}
+h6 {
+	font-weight:500;
+}
+.white {
+	color:#ffffff !important;
+}
+.black {
+	color:#000000;
+}
+.navbar {
+	position: fixed;
+	right: 0;
+	left: 0;
+	width: 100%;
+	padding-left: 0;
+	padding-right: 0;
+	min-height: 50px;
+	line-height: 50px;
+	background: transparent;
+	z-index: 9999999;
+}
+.navbar .active {
+	color: #5f0099 !important;
+}
+.navbar .navbar-brand {
+}
+.navbar .nav-item {
+	margin: 0 5px;
+	padding: 0;
+}
+.navbar .nav-item a {
+	color: #fff;
+	text-transform: uppercase;
+	font-weight: 600;
+	font-size: 13px;
+}
+.navbar .nav-item a:hover {
+	color: #5f0099;
+}
+.navbar .nav-link {
+	position: relative;
+	padding: 0;
+}
+.navbar .navbar-toggler {
+	cursor: pointer;
+}
+.navbar .navbar-toggler span {
+	color: #fff;
+}
+.navbar-style2 .active:after, .navbar-style2 .nav-link:after {
+	display: none;
+}
+.nav-scroll {
+	background: #fff;
+	-webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
+	box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
+	-webkit-transition: all .4s ease;
+	transition: all .4s ease;
+}
+.nav-scroll .navbar-nav > li > a {
+	color: #333;
+}
+.nav-scroll .navbar-brand img {
+	-webkit-transform: scale(1.03) !important;
+	transform: scale(1.03) !important;
+}
+.nav-scroll .navbar-toggler {
+	cursor: pointer;
+}
+.nav-scroll .navbar-toggler span {
+	color: #333;
+}
+.nav-scroll .nav-link:hover:after {
+	background-color: #2388ed;
+}
+.nav-scroll .active {
+	position: relative;
+}
+.banner {
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	padding:100px 0px;
+	position:relative;
+}
+.banner::before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(images/pattern.png);
+}
+.banner a.weblink {
+	color:#ffffff;
+	border-bottom:1px dotted #ffffff;
+}
+.banner a:hover {
+	text-decoration:none;
+}
+.svg-wave {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+}
+.banner-text {
+	padding-right:80px;
+	margin:50px 0px 0px;
+}
+.banner-text p {
+	margin:40px 0px;
+}
+.banner-text ul {
+	list-style: none;
+}
+.banner-text ul li {
+	display: inline-block;
+	margin: 0px 10px 10px 0px;
+}
+.banner-text ul li a {
+	display: block;
+}
+.banner-text ul li a img {
+	width: 150px;
+	border-radius: 7px;
+}
+.prelative {
+	position:relative
+}
+.section-padding {
+	padding:80px 0px;
+}
+.sectioner-header {
+	width:69%;
+	margin:0 auto;
+}
+.line {
+	height: 2px;
+	width: 50px;
+	background: #8e1efc;
+	display: block;
+	margin: 20px auto 20px;
+}
+.line::after {
+	content:"";
+	position: absolute;
+	left: 50%;
+	width: 150px;
+	height: 2px;
+	border-bottom: 2px dashed #8e1efc;
+	margin-left: -75px;
+}
+.sectioner-header p {
+	color:#818992;
+	font-size: 17px;
+}
+.section-content {
+	margin-top: 80px;
+}
+.icon-box {
+	margin-bottom:50px;
+}
+.icon-box i {
+	display: block;
+	position: relative;
+	width: 135px;
+	height: 135px;
+	border-radius: 100px;
+	background: #7a60ff;
+	background:  linear-gradient(to left, #7a60ff, #cd9ffa);
+	color: #ffffff;
+	font-size: 50px;
+	line-height: 135px;
+	margin: 0 auto;
+}
+.icon-box h5 {
+	margin-top:30px;
+}
+.icon-box p {
+	color: #818992;
+	font-size: 14px;
+	width: 80%;
+	margin: 0 auto;
+}
+.about-btn {
+	color: #8e1efc;
+	padding: 10px 40px;
+	border: 2px solid #8e1efc;
+	border-radius: 7px;
+	margin-top: 30px;
+	display: inline-block;
+	font-size: 18px;
+}
+.about-btn:hover {
+	background:#8e1efc;
+	color:#ffffff;
+	text-decoration:none;
+}
+.video-section {
+	background: url(images/video-bg.jpg) no-repeat fixed center;
+	background-size: cover;
+	overflow: hidden;
+}
+.video-overlay {
+	background: linear-gradient(to left, rgba(122, 96, 255, 0.90), rgba(205, 159, 250, 0.90));
+}
+.video-section h3 {
+	font-weight: 600;
+	font-size: 38px;
+}
+.video-section i {
+	display: block;
+	position: relative;
+	width: 70px;
+	height: 70px;
+	border-radius: 100px;
+	background: #ffffff;
+	color: #8e1efc;
+	font-size: 30px;
+	line-height: 70px;
+	margin: 0 auto;
+	cursor:pointer;
+}
+.video-popup {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 99999;
+	background: rgba(0, 0, 0, 0.5);
+	display: none;
+	align-content: center !important;
+	-ms-flex-line-pack: center !important;
+	-ms-flex-align: center !important;
+	align-items: center !important;
+	-ms-flex-pack: center !important;
+	justify-content: center !important;
+}
+.video-popup .video-src {
+	position: relative;
+	width: 700px;
+	max-width: 80%;
+}
+.video-popup .iframe-src {
+	width: 100%;
+	height: 0;
+	padding-top: 56.3%;
+	position: relative;
+	display: none;
+}
+.video-popup .iframe-src iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.single-feature {
+	margin-bottom: 80px;
+	margin-top: 40px;
+}
+.single-feature h5 {
+	font-size: 16px;
+}
+.media-right-margin {
+	margin-right:25px;
+}
+.single-feature p {
+	font-size: 13px;
+}
+.icon-border {
+}
+.icon-border span {
+	display: block;
+	position: relative;
+	width: 50px;
+	height: 50px;
+	border-radius: 100px;
+	color: rgb(142, 30, 252);
+	font-size: 18px;
+	line-height: 50px;
+	border: 1px solid rgb(142, 30, 252);
+}
+.team {
+	background: #fafafa;
+	border-top: 1px solid #e4e4e4;
+}
+.team-detail {
+	margin-top:40px;
+}
+.team-detail img {
+	border-radius: 50%;
+	width: 70%;
+}
+.team-detail h4 {
+	color:rgb(142, 30, 252);
+	margin-top: 20px;
+	font-size: 17px;
+	margin-bottom: 0px;
+}
+.testimonial {
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	padding:100px 0px;
+	position:relative;
+}
+.testimonial::before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(images/pattern.png);
+}
+.bx-prev {
+	left: -90px !important;
+	background: url(images/arrow-left.png) no-repeat !important;
+	background-size: auto auto !important;
+	background-size: 100% 100% !important;
+}
+.bx-next {
+	right: -90px !important;
+	background: url(images/arrow-right.png) no-repeat !important;
+	background-size: auto auto !important;
+	background-size: 100% 100% !important;
+}
+.bx-wrapper {
+	border: none !important;
+	background: rgba(255, 255, 255, 0.81) !important;
+	border-radius: 5px !important;
+	box-shadow:none !important;
+}
+.slider-item {
+	padding:20px;
+}
+.slider .test-img img {
+	border: 12px solid #fff;
+	border-radius: 50%;
+	width: 100%;
+	height: auto;
+}
+.test-img {
+	float: left;
+	width: 20%;
+	margin-right:5%;
+}
+.test-text {
+	float: left;
+	width: 75%;
+}
+.slider .title {
+	display: block;
+	position: relative;
+	margin: 0 0 20px;
+	font-size: 1.125em;
+	line-height: 1.25;
+}
+.slider .title span {
+	display: block;
+	font-size: 1.5em;
+	font-weight: 700;
+}
+.faq {
+	background: #fafafa;
+	border-bottom: 1px solid #e4e4e4;
+}
+.faq-content {
+	margin: 20px 0px;
+}
+.faq-content h4 {
+	font-weight: 400;
+	font-size: 20px;
+}
+.faq-content p {
+	color: #818992;
+	font-weight:300;
+	margin-top:15px;
+}
+#contact_form .form-input {
+	border: 1px solid #e4e4e4;
+}
+input {
+	height: 42px;
+	padding: 0 1rem;
+	background: #fff;
+	border-radius: 30px;
+	margin-bottom: 1rem;
+	-webkit-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+	border:0;
+}
+#contact_form textarea {
+	resize: none;
+	padding: 1rem;
+	height: 150px;
+	background: #fff;
+	border: 0;
+	border-radius: 30px;
+	margin-bottom: 1rem;
+	-webkit-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+}
+.btn-grad {
+ padding: .7rem 2rem;
+	display: inline-block;
+	color: #fff;
+	border-radius: 2rem;
+	border: 0;
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	cursor:pointer;
+}
+.contact-info {
+	padding: 2rem 2rem 1rem;
+	border-radius: 8px;
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+}
+.contact-item {
+	margin:23px 0px;
+}
+.contact-item i {
+	font-size: 20px;
+}
+.contact-item p {
+	line-height: 20px;
+	margin: 0;
+}
+.download {
+	background: #7a60ff;
+	background: linear-gradient(to left, #7a60ff, #cd9ffa);
+	padding:100px 0px;
+	position:relative;
+}
+.download::before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(images/pattern.png);
+}
+.download ul {
+	list-style: none;
+}
+.download ul li {
+	display: inline-block;
+	margin: 0px 10px 10px 0px;
+}
+.download ul li a {
+	display: block;
+}
+.download ul li a img {
+	width: 150px;
+	border-radius: 7px;
+}
+.footer-copy {
+	background: #ffffff;
+	color: #242424;
+	font-size: 13px;
+	text-align: center;
+	padding:15px 0px;
+}
+.footer-copy p {
+	margin-bottom:0px;
+}
+@media all and (max-width:991px) {
+.navbar .navbar-collapse {
+	overflow: auto;
+	background:  rgb(213, 198, 221);
+	color: #fff !important;
+	text-align: center;
+	padding: 10px 0;
+}
+.nav-scroll .navbar-collapse {
+	background: #fff !important;
+}
+#contact_form {
+	margin-bottom:20px;
+}
+}
+@media all and (max-width:768px) {
+.nav-scroll .navbar-brand img, .navbar-brand img {
+	transform: scale(0.75) !important;
+	-webkit-transform: scale(0.75) !important;
+}
+.banner-text {
+	padding-right: 0px;
+	margin: 10px 0px 0px;
+}
+h2 {
+	font-size: 25px;
+}
+h3 {
+	font-size: 23px;
+}
+.section-padding {
+	padding: 40px 0px;
+}
+.banner-text p {
+	margin: 25px 0px;
+}
+.banner-text ul li a img {
+	width: 140px;
+	border-radius: 7px;
+}
+.sectioner-header {
+	width: 90%;
+}
+.sectioner-header p {
+	font-size: 14px;
+}
+.about-btn {
+	padding: 5px 30px;
+	margin-top: 0px;
+	font-size: 16px;
+}
+.single-feature {
+	margin-bottom: 20px;
+	margin-top: 20px;
+}
+.team-detail {
+	margin-top: 20px;
+}
+.team-detail img {
+	width: 50%;
+}
+.bx-controls
+{
+	display:none;
+}
+.bx-wrapper {
+	margin: 0px 20px !important;
+}
+.slider .test-img img {
+	margin: 0 auto;
+}
+.test-img {
+	float:none;
+	width: 200px;
+	height: 200px;
+	margin: 0 auto;
+}
+.test-text {
+	float: none;
+	width: 100%;
+	text-align: center;
+}
+.section-content {
+	margin-top: 40px;
+}
+.faq-content {
+	margin: 10px 0px;
+}
+.faq-content h4 {
+	font-size: 16px;
+}
+.faq-content p {
+	font-size: 13px;
+}
+#contact_form {
+	margin-bottom:20px;
+}
+.contact-item {
+	font-size: 12px;
+}
+.download ul li a img {
+	width: 120px;
+}
+.footer-copy p {
+	font-size: 10px;
+}
+}
--- a/src/About.tsx
+++ b/src/About.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+
+const About: React.FC = () => {
+    return (
+        <section
+            className="about section-padding prelative"
+            data-scroll-index="1"
+        >
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-12">
+                        <div className="sectioner-header text-center">
+                            <h3>About</h3>
+                            <span className="line"></span>
+                            <p>
+                                Sed quis nisi nisi. Proin consectetur porttitor
+                                dui sit amet viverra. Fusce sit amet lorem
+                                faucibus, vestibulum ante in, pharetra ante.
+                            </p>
+                        </div>
+                        <div className="section-content text-center">
+                            <div className="row">
+                                <div className="col-md-4">
+                                    <div
+                                        className="icon-box wow fadeInUp"
+                                        data-wow-delay="0.2s"
+                                    >
+                                        {" "}
+                                        <i
+                                            className="fa fa-life-ring"
+                                            aria-hidden="true"
+                                        ></i>
+                                        <h5>Support</h5>
+                                        <p>
+                                            Phasellus lobortis justo a magna
+                                            facilisis, in commodo tellus rutrum.
+                                            Sed vitae condimentum nulla.
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="col-md-4">
+                                    <div
+                                        className="icon-box wow fadeInUp"
+                                        data-wow-delay="0.4s"
+                                    >
+                                        {" "}
+                                        <i
+                                            className="fa fa-mobile"
+                                            aria-hidden="true"
+                                        ></i>
+                                        <h5>Cross Platform</h5>
+                                        <p>
+                                            Phasellus lobortis justo a magna
+                                            facilisis, in commodo tellus rutrum.
+                                            Sed vitae condimentum nulla.
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="col-md-4">
+                                    <div
+                                        className="icon-box wow fadeInUp"
+                                        data-wow-delay="0.6s"
+                                    >
+                                        {" "}
+                                        <i
+                                            className="fa fa-bolt"
+                                            aria-hidden="true"
+                                        ></i>
+                                        <h5>Fast</h5>
+                                        <p>
+                                            Phasellus lobortis justo a magna
+                                            facilisis, in commodo tellus rutrum.
+                                            Sed vitae condimentum nulla.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <a href="#" className="about-btn">
+                                Learn More
+                            </a>{" "}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default About;
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,24 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import Header from './Header'
+import Banner from './Banner'
+import About from './About'
+import Video from './Video'
+import Features from './Features'
+import Team from './Team'
+import Faq from './Faq'
+import Footer from './Footer'

 function App() {
  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Header />
+      <Banner />
+      <About />
+      <Video />
+      <Features />
+      <Team />
+      <Faq />
+      <Footer />
    </div>
  );
 }
--- a/src/Banner.tsx
+++ b/src/Banner.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+const Banner: React.FC = () => {
+    return (
+        <section className="banner" data-scroll-index="0">
+            <div className="banner-overlay">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-md-8 col-sm-12">
+                            <div className="banner-text">
+                                <h2 className="white">
+                                    Safe QR - Your Secure QR Code Scanner
+                                </h2>
+                                <h6 className="white">
+                                    This awesome template designed by{" "}
+                                    <a
+                                        href="http://w3Template.com"
+                                        target="_blank"
+                                        rel="dofollow"
+                                        className="weblink"
+                                    >
+                                        W3 Template
+                                    </a>
+                                    .
+                                </h6>
+                                <p className="banner-text white">
+                                    Safe QR is a mobile app designed for
+                                    scanning QR codes, offering a simple and
+                                    effective QR code scanning service. The app
+                                    is easy to use and provides an interactive
+                                    and intuitive experience for users. With
+                                    Safe QR, you can quickly scan QR codes with
+                                    high-quality results.
+                                </p>
+                                <ul>
+                                    <li>
+                                        <a href="#">
+                                            <img
+                                                src="../marketing/images/appstore.png"
+                                                className="wow fadeInUp"
+                                                data-wow-delay="0.4s"
+                                            />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#">
+                                            <img
+                                                src="../marketing/images/playstore.png"
+                                                className="wow fadeInUp"
+                                                data-wow-delay="0.7s"
+                                            />
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div className="col-md-4 col-sm-12">
+                            {" "}
+                            <img
+                                src="../marketing/images/iphone-screen.png"
+                                className="img-fluid wow fadeInUp"
+                            />{" "}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <span className="svg-wave">
+                {" "}
+                <img
+                    className="svg-hero"
+                    src="../marketing/images/applight-wave.svg"
+                />{" "}
+            </span>
+        </section>
+    );
+};
+
+export default Banner;
--- a/src/Faq.tsx
+++ b/src/Faq.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+const Faq: React.FC = () => {
+    return (
+        <section className="faq section-padding prelative" data-scroll-index='5'>
+  <div className="container">
+    <div className="row">
+      <div className="col-md-12">
+        <div className="sectioner-header text-center">
+          <h3>Frequently Asked Questions</h3>
+          <span className="line"></span>
+          <p>Have more Questions ?</p>
+        </div>
+        <div className="section-content">
+          <div className="row">
+            <div className="col-md-6 faq-content wow fadeInUp" data-wow-delay="0.2s">
+              <h4>What is a QR Code ?</h4>
+              <p>Quick response, or QR, is a type of barcode that can store a multitude of information. The obvious difference between a QR Code and Barcode is its appearance. A QR Code is always in the shape of a square and contains smaller, even blocks similar to Tetris. A Barcode, on the other hand, has vertical bars in different thicknesses and often accompanied by a serial number.</p>
+            </div>
+            <div className="col-md-6 faq-content wow fadeInUp" data-wow-delay="0.2s">
+              <h4>How do Secure QR codes work ?</h4>
+              <p>Secure QR codes can be detected as faked or copied due to the loss of information that occurs when the QR code is scanned and re-printed on a counterfeit product or document.</p>
+            </div>
+            <div className="col-md-6 faq-content wow fadeInUp" data-wow-delay="0.4s">
+            <h4>What can a QR Code do ?</h4>
+              <p>Because of its versatility, a QR Code can be programmed to do a multitude of things. It can be split into two formats: Dynamic and Static. A Dynamic QR Code is useful for businesses or nonprofits in their marketing strategy because of its advantages. Though it needs a subscription to work, it is a small price to pay compared to the benefits it offers. Dynamic QR Code solutions are editable, which means if you made a mistake and only noticed it after the QR Codes are printed, you can easily log in to the dashboard and fix them without changing the appearance of the already printed Codes.</p>
+            </div>
+            <div className="col-md-6 faq-content wow fadeInUp" data-wow-delay="0.4s">
+              <h4>How long are QR Code valid for ? Do they expire ?</h4>
+              <p>Static QR Codes are valid for as long as you want and will never expire. The only instance where the Code might “expire” is when the link is changed or deleted, rendering it unscannable.</p>
+            </div>
+            <div className="col-md-6 faq-content wow fadeInUp" data-wow-delay="0.6s">
+              <h4>What does Static and Dynamic QR Code mean ?</h4>
+              <p>Once generated, a Static Code cannot be edited and its scans cannot be tracked. Dynamic Code, on the other hand, is very flexible and is virtually indestructible. You can update its content, change/add links, and fix typos; even after print. You can also track the number of scans, including where and when.</p>
+            </div>
+            <div className="col-md-6 faq-content wow fadeInUp" data-wow-delay="0.6s">
+              <h4>Does QR Code have to be Black or White ?</h4>
+              <p>Not at all. You can use your brand or company colors, or whatever color you like. There are 16,777,216 colors using #RRGGBB notation so feel free to play around with the color picker!</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+    )
+}
+
+export default Faq;
--- a/src/Features.tsx
+++ b/src/Features.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+
+const Features: React.FC = () => {
+    return (
+        <section className="feature section-padding" data-scroll-index='2'>
+  <div className="container">
+    <div className="row">
+      <div className="col-md-12">
+        <div className="sectioner-header text-center">
+          <h3>Features</h3>
+          <span className="line"></span>
+          <p>Safe QR is a mobile app designed for scanning QR codes, offering a simple and effective QR code scanning service. The app is easy to use and provides an interactive and intuitive experience for users. With Safe QR, you can quickly scan QR codes with high-quality results.</p>
+        </div>
+        <div className="section-content text-center">
+          <div className="row">
+            <div className="col-md-4 col-sm-12">
+              <div className="media single-feature wow fadeInUp" data-wow-delay="0.2s">
+                <div className="media-body text-right media-right-margin">
+                  <h5>Safe and Secure</h5>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                </div>
+                <div className="media-right icon-border"> <span className="fa fa-bolt" aria-hidden="true"></span> </div>
+              </div>
+              <div className="media single-feature wow fadeInUp" data-wow-delay="0.4s">
+                <div className="media-body text-right media-right-margin">
+                  <h5>Efficient Scanning</h5>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                </div>
+                <div className="media-right icon-border"> <span className="fa fa-battery-full" aria-hidden="true"></span> </div>
+              </div>
+              <div className="media single-feature wow fadeInUp" data-wow-delay="0.6s">
+                <div className="media-body text-right media-right-margin">
+                  <h5>User Friendly Interface</h5>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                </div>
+                <div className="media-right icon-border"> <span className="fa fa-wifi" aria-hidden="true"></span> </div>
+              </div>
+            </div>
+            <div className="col-md-4 d-none d-md-block d-lg-block">
+              <div className="feature-mobile"> <img src="../marketing/images/iphone-screen-with-shadow.png" className="img-fluid wow fadeInUp"/> </div>
+            </div>
+            <div className="col-md-4 col-sm-12">
+              <div className="media single-feature wow fadeInUp" data-wow-delay="0.2s">
+                <div className="media-left icon-border media-right-margin"> <span className="fa fa-check-double" aria-hidden="true"></span> </div>
+                <div className="media-body text-left">
+                  <h5>Reliable Performance</h5>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                </div>
+              </div>
+              <div className="media single-feature wow fadeInUp" data-wow-delay="0.4s">
+                <div className="media-left icon-border media-right-margin"> <span className="fa fa-dollar-sign" aria-hidden="true"></span> </div>
+                <div className="media-body text-left">
+                  <h5>Effortless QR Scanning</h5>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                </div>
+              </div>
+              <div className="media single-feature wow fadeInUp" data-wow-delay="0.6s">
+                <div className="media-left icon-border media-right-margin"> <span className="fa fa-hdd" aria-hidden="true"></span> </div>
+                <div className="media-body text-left">
+                  <h5>Instant Results</h5>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididugnt ut labore</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+    )
+}
+
+export default Features;
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+const Footer: React.FC = () => {
+    return (
+        <section className="download section-padding">
+  <div className="container">
+    <div className="row">
+      <div className="col-md-12">
+        <div className="sectioner-header text-center white">
+          <h3>Download Our App</h3>
+          <span className="line"></span>
+          <p className="white">Sed quis nisi nisi. Proin consectetur porttitor dui sit amet viverra. Fusce sit amet lorem faucibus, vestibulum ante in, pharetra ante.</p>
+        </div>
+      </div>
+      <div className="col-md-12">
+        <div className="section-content text-center">
+          <ul>
+            <li><a href="#"><img src="../marketing/images/appstore.png" className="wow fadeInUp" data-wow-delay="0.4s"/></a></li>
+            <li><a href="#"><img src="../marketing/images/playstore.png" className="wow fadeInUp" data-wow-delay="0.7s"/></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+    )
+}
+
+export default Footer;
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from "react";
+
+const Header: React.FC = () => {
+    const [fix, setFix] = useState(false);
+
+    useEffect(() => {
+        function setFixed() {
+            if (window.scrollY > 0) {
+                setFix(true);
+                return;
+            } 
+            setFix(false);
+        }
+        window.addEventListener("scroll", setFixed);
+        // Cleanup function
+        return () => {
+            window.removeEventListener("scroll", setFixed);
+        };
+    }, []);
+
+    return (
+        <nav className="navbar navbar-expand-lg banner">
+            <div className="container">
+                <img src="../marketing/images/logo.png" alt="logo" className="logo-1" />
+                <button
+                    className="navbar-toggler"
+                    type="button"
+                    data-toggle="collapse"
+                    data-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation"
+                >
+                    {" "}
+                    <span className="fas fa-bars"></span>{" "}
+                </button>
+                <div
+                    className="collapse navbar-collapse"
+                    id="navbarSupportedContent"
+                >
+                    <ul className="navbar-nav ml-auto">
+                        <li className="nav-item">
+                            {" "}
+                            <a className="nav-link" data-scroll-nav="0">
+                                Home
+                            </a>{" "}
+                        </li>
+                        <li className="nav-item">
+                            {" "}
+                            <a
+                                className="nav-link"
+                                href="#"
+                                data-scroll-nav="1"
+                            >
+                                About
+                            </a>{" "}
+                        </li>
+                        <li className="nav-item">
+                            {" "}
+                            <a
+                                className="nav-link"
+                                href="#"
+                                data-scroll-nav="2"
+                            >
+                                Features
+                            </a>{" "}
+                        </li>
+                        <li className="nav-item">
+                            {" "}
+                            <a
+                                className="nav-link"
+                                href="#"
+                                data-scroll-nav="3"
+                            >
+                                Team
+                            </a>{" "}
+                        </li>
+                        <li className="nav-item">
+                            {" "}
+                            <a
+                                className="nav-link"
+                                href="#"
+                                data-scroll-nav="4"
+                            >
+                                Testimonials
+                            </a>{" "}
+                        </li>
+                        <li className="nav-item">
+                            {" "}
+                            <a
+                                className="nav-link"
+                                href="#"
+                                data-scroll-nav="5"
+                            >
+                                Faq
+                            </a>{" "}
+                        </li>
+                        <li className="nav-item">
+                            {" "}
+                            <a
+                                className="nav-link"
+                                href="#"
+                                data-scroll-nav="6"
+                            >
+                                Contact
+                            </a>{" "}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Header;
--- a/src/Team.tsx
+++ b/src/Team.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+const Team: React.FC = () => {
+    return (
+        <section className="team section-padding" data-scroll-index='3'>
+  <div className="container">
+    <div className="row">
+      <div className="col-md-12">
+        <div className="sectioner-header text-center">
+          <h3>Our Team</h3>
+          <span className="line"></span>
+          <p>Our mission is to provide the most secured QR code scans to achieve your business or personal goals.</p>
+        </div>
+        <div className="section-content text-center">
+          <div className="row">
+            <div className="col-md-3">
+              <div className="team-detail wow bounce" data-wow-delay="0.2s"> <img src="../marketing/images/user1.jpg" className="img-fluid"/>
+                <h4>Jerin Tan</h4>
+                <p>Frontend Developer</p>
+              </div>
+            </div>
+            <div className="col-md-3">
+              <div className="team-detail wow bounce" data-wow-delay="0.6s"> <img src="../marketing/images/user3.jpg" className="img-fluid"/>
+                <h4>Alex Lim</h4>
+                <p>System Architect</p>
+              </div>
+            </div>
+            <div className="col-md-3">
+              <div className="team-detail wow bounce" data-wow-delay="0.2s"> <img src="../marketing/images/user1.jpg" className="img-fluid"/>
+                <h4>Seng Jin Hui</h4>
+                <p>Marketing Specialist, Backend Developer</p>
+              </div>
+            </div>
+            <div className="col-md-3">
+              <div className="team-detail wow bounce" data-wow-delay="0.4s"> <img src="../marketing/images/user2.jpg" className="img-fluid"/>
+                <h4>MUHAMMED ISKANDER SHAH</h4>
+                <p>Team Leader, Full Stack Developer</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+    )
+}
+
+export default Team;
--- a/src/Video.tsx
+++ b/src/Video.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const Video: React.FC = () => {
+    return (
+        <>
+            <section className="video-section prelative text-center white">
+                <div className="section-padding video-overlay">
+                    <div className="container">
+                        <h3>Watch Now</h3>
+                        <i
+                            className="fa fa-play"
+                            id="video-icon"
+                            aria-hidden="true"
+                        ></i>
+                        <div className="video-popup">
+                            <div className="video-src">
+                                <div className="iframe-src">
+                                    <iframe
+                                        src="https://www.youtube.com/embed/Ku52zNnft8k?rel=0&amp;showinfo=0"
+                                        allowFullScreen
+                                    ></iframe>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default Video;
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,5 +22,5 @@
  },
  "include": [
    "src"
-  ]
+, "public/js"  ]
 }
Author	SHA1	Message	Date
heyethereum	cb38f25e8e	poc	2024-04-15 00:13:53 +08:00
heyethereum	86104f903a	add @babel/plugin-proposal-private-property-in-object	2024-04-14 15:02:14 +08:00
heyethereum	1a249b0031	Changed readme	2024-04-14 15:00:36 +08:00
				`@@ -0,0 +1 @@`
				(function(e){"use strict";var t="ScrollIt",n="1.0.3";var r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:0};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t<0\|\|t>s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")\|\|e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&&(r==n.upKey\|\|r==n.downKey)){return false}if(r==n.upKey&&i>0){o(parseInt(i)-1);return false}else if(r==n.downKey&&i<s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&&t&&i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t>=e(i).offset().top+n.topOffset&&t<e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)