changed to hash router

Dev

package-lock.json

@@ -18,7 +18,7 @@
         "@types/react-dom": "^18.2.25",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.3",
+        "react-router-dom": "^6.26.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -3378,9 +3378,10 @@
       }
     },
     "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==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -15032,11 +15033,12 @@
       }
     },
     "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==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.19.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -15046,12 +15048,13 @@
       }
     },
     "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==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
       },
       "engines": {
         "node": ">=14.0.0"

package.json

@@ -2,7 +2,7 @@
   "name": "safeqr-marketing-app",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://safeqr.github.io/marketing",
+  "homepage": ".",
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.17.0",
@@ -14,7 +14,7 @@
     "@types/react-dom": "^18.2.25",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

public/css/jquery.bxslider.css

@@ -0,0 +1,178 @@
+/** VARIABLES
+===================================*/
+/** RESET AND LAYOUT
+===================================*/
+.bx-wrapper {
+    position: relative;
+    margin-bottom: 60px;
+    padding: 0;
+    *zoom: 1;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+  }
+  .bx-wrapper img {
+    max-width: 100%;
+    display: block;
+  }
+  .bxslider {
+    margin: 0;
+    padding: 0;
+  }
+  ul.bxslider {
+    list-style: none;
+  }
+  .bx-viewport {
+    /*fix other elements on the page moving (on Chrome)*/
+    -webkit-transform: translatez(0);
+  }
+  /** THEME
+  ===================================*/
+  .bx-wrapper {
+    -moz-box-shadow: 0 0 5px #ccc;
+    -webkit-box-shadow: 0 0 5px #ccc;
+    box-shadow: 0 0 5px #ccc;
+    border: 5px solid #fff;
+    background: #fff;
+  }
+  .bx-wrapper .bx-pager,
+  .bx-wrapper .bx-controls-auto {
+    position: absolute;
+    bottom: -30px;
+    width: 100%;
+  }
+  /* LOADER */
+  .bx-wrapper .bx-loading {
+    min-height: 50px;
+    background: url('images/bx_loader.gif') center center no-repeat #ffffff;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2000;
+  }
+  /* PAGER */
+  .bx-wrapper .bx-pager {
+    text-align: center;
+    font-size: .85em;
+    font-family: Arial;
+    font-weight: bold;
+    color: #666;
+    padding-top: 20px;
+  }
+  .bx-wrapper .bx-pager.bx-default-pager a {
+    background: #666;
+    text-indent: -9999px;
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    outline: 0;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+  }
+  .bx-wrapper .bx-pager.bx-default-pager a:hover,
+  .bx-wrapper .bx-pager.bx-default-pager a.active,
+  .bx-wrapper .bx-pager.bx-default-pager a:focus {
+    background: #000;
+  }
+  .bx-wrapper .bx-pager-item,
+  .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
+    display: inline-block;
+    vertical-align: bottom;
+    *zoom: 1;
+    *display: inline;
+  }
+  .bx-wrapper .bx-pager-item {
+    font-size: 0;
+    line-height: 0;
+  }
+  /* DIRECTION CONTROLS (NEXT / PREV) */
+  .bx-wrapper .bx-prev {
+    left: 10px;
+    background: url('images/controls.png') no-repeat 0 -32px;
+  }
+  .bx-wrapper .bx-prev:hover,
+  .bx-wrapper .bx-prev:focus {
+    background-position: 0 0;
+  }
+  .bx-wrapper .bx-next {
+    right: 10px;
+    background: url('images/controls.png') no-repeat -43px -32px;
+  }
+  .bx-wrapper .bx-next:hover,
+  .bx-wrapper .bx-next:focus {
+    background-position: -43px 0;
+  }
+  .bx-wrapper .bx-controls-direction a {
+    position: absolute;
+    top: 50%;
+    margin-top: -16px;
+    outline: 0;
+    width: 32px;
+    height: 32px;
+    text-indent: -9999px;
+    z-index: 9999;
+  }
+  .bx-wrapper .bx-controls-direction a.disabled {
+    display: none;
+  }
+  /* AUTO CONTROLS (START / STOP) */
+  .bx-wrapper .bx-controls-auto {
+    text-align: center;
+  }
+  .bx-wrapper .bx-controls-auto .bx-start {
+    display: block;
+    text-indent: -9999px;
+    width: 10px;
+    height: 11px;
+    outline: 0;
+    background: url('images/controls.png') -86px -11px no-repeat;
+    margin: 0 3px;
+  }
+  .bx-wrapper .bx-controls-auto .bx-start:hover,
+  .bx-wrapper .bx-controls-auto .bx-start.active,
+  .bx-wrapper .bx-controls-auto .bx-start:focus {
+    background-position: -86px 0;
+  }
+  .bx-wrapper .bx-controls-auto .bx-stop {
+    display: block;
+    text-indent: -9999px;
+    width: 9px;
+    height: 11px;
+    outline: 0;
+    background: url('images/controls.png') -86px -44px no-repeat;
+    margin: 0 3px;
+  }
+  .bx-wrapper .bx-controls-auto .bx-stop:hover,
+  .bx-wrapper .bx-controls-auto .bx-stop.active,
+  .bx-wrapper .bx-controls-auto .bx-stop:focus {
+    background-position: -86px -33px;
+  }
+  /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
+  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
+    text-align: left;
+    width: 80%;
+  }
+  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
+    right: 0;
+    width: 35px;
+  }
+  /* IMAGE CAPTIONS */
+  .bx-wrapper .bx-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: #666;
+    background: rgba(80, 80, 80, 0.75);
+    width: 100%;
+  }
+  .bx-wrapper .bx-caption span {
+    color: #fff;
+    font-family: Arial;
+    display: block;
+    font-size: .85em;
+    padding: 10px;
+  }
+  

public/index.html

@@ -12,13 +12,12 @@
     <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="%PUBLIC_URL%/css/bootstrap.min.css" type="text/css" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/css/jquery.bxslider.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">
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!--
@@ -35,12 +34,11 @@
       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>
+    <title>Safe QR 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="%PUBLIC_URL%/js/bootstrap.min.js"></script> 
+	<script src="%PUBLIC_URL%/js/jquery.min.js"></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> 

src/About.tsx

@@ -13,9 +13,16 @@ const About: React.FC = () => {
                             <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.
+                            Currently, in the QR code security landscape, there is a gap in comprehensive protection against potential 
+                            threats posed by malicious QR codes. Existing solutions often provide basic functionality, such as scanning QR 
+                            codes to extract website URLs. However, these applications lack robust security measures to defend users against 
+                            various types of malicious content embedded within QR codes.
+                            </p>
+                            <p>
+                            Our intention with the SafeQR project is to bridge this gap by developing a comprehensive mobile application 
+                            that offers advanced security features for scanning and interacting with QR codes. Unlike existing solutions 
+                            that primarily focus on verifying website URLs, our app aims to take a more proactive and broad approach to QR 
+                            code security.
                             </p>
                         </div>
                         <div className="section-content text-center">
@@ -30,11 +37,9 @@ const About: React.FC = () => {
                                             className="fa fa-life-ring"
                                             aria-hidden="true"
                                         ></i>
-                                        <h5>Support</h5>
+                                        <h5>QR Code Scanning</h5>
                                         <p>
-                                            Phasellus lobortis justo a magna
-                                            facilisis, in commodo tellus rutrum.
-                                            Sed vitae condimentum nulla.
+                                        The application will have the capability to scan QR codes directly using a camera or from saved images.
                                         </p>
                                     </div>
                                 </div>
@@ -50,9 +55,8 @@ const About: React.FC = () => {
                                         ></i>
                                         <h5>Cross Platform</h5>
                                         <p>
-                                            Phasellus lobortis justo a magna
-                                            facilisis, in commodo tellus rutrum.
-                                            Sed vitae condimentum nulla.
+                                        Designed to function seamlessly on both iOS and Android platforms, ensuring a broad user base can 
+                                        benefit from the application's protective features.
                                         </p>
                                     </div>
                                 </div>
@@ -66,18 +70,17 @@ const About: React.FC = () => {
                                             className="fa fa-bolt"
                                             aria-hidden="true"
                                         ></i>
-                                        <h5>Fast</h5>
+                                        <h5>Sandboxing for Safe Browsing</h5>
                                         <p>
-                                            Phasellus lobortis justo a magna
-                                            facilisis, in commodo tellus rutrum.
-                                            Sed vitae condimentum nulla.
+                                        To enhance security, the application will open links in a sandboxed environment. This protected mode 
+                                        helps isolate and contain potential threats away from the user's device.
                                         </p>
                                     </div>
                                 </div>
                             </div>
-                            <a href="#" className="about-btn">
+                            <a href="#" data-scroll-nav="2" className="about-btn">
                                 Learn More
-                            </a>{" "}
+                            </a>
                         </div>
                     </div>
                 </div>

src/App.tsx

@@ -1,25 +1,36 @@
-import React from 'react';
-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'
+import React from "react";
+import { HashRouter as Router, Route, Routes } from "react-router-dom";
+import Header from "./Header";
+import Banner from "./Banner";
+import About from "./About";
+import Features from "./Features";
+import Team from "./Team";
+import Faq from "./Faq";
+import Footer from "./Footer";
+import ContactUs from "./ContactUs";
+import TermsOfService from "./TermsOfService";
+import PrivacyPolicy from "./PrivacyPolicy";
 
 function App() {
   return (
-    <div>
+    <Router>
+      <Routes>
+        <Route path="/" element={
+          <>
             <Header />
             <Banner />
             <About />
-      <Video />
             <Features />
             <Team />
             <Faq />
+            <ContactUs />
             <Footer />
-    </div>
+          </>
+        } />
+        <Route path="/terms-of-service" element={<TermsOfService />} />
+        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+      </Routes>
+    </Router>
   );
 }
 

src/Banner.tsx

@@ -11,18 +11,6 @@ const Banner: React.FC = () => {
                                 <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
@@ -30,15 +18,16 @@ const Banner: React.FC = () => {
                                     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.
+                                    a peace of mind.
                                 </p>
                                 <ul>
                                     <li>
-                                        <a href="#">
+                                        <a href="#" rel="noopener noreferrer">
                                             <img
                                                 src="../marketing/images/appstore.png"
                                                 className="wow fadeInUp"
                                                 data-wow-delay="0.4s"
+                                                alt=""
                                             />
                                         </a>
                                     </li>
@@ -48,6 +37,7 @@ const Banner: React.FC = () => {
                                                 src="../marketing/images/playstore.png"
                                                 className="wow fadeInUp"
                                                 data-wow-delay="0.7s"
+                                                alt=""
                                             />
                                         </a>
                                     </li>
@@ -59,6 +49,7 @@ const Banner: React.FC = () => {
                             <img
                                 src="../marketing/images/iphone-screen.png"
                                 className="img-fluid wow fadeInUp"
+                                alt=""
                             />{" "}
                         </div>
                     </div>
@@ -69,6 +60,7 @@ const Banner: React.FC = () => {
                 <img
                     className="svg-hero"
                     src="../marketing/images/applight-wave.svg"
+                    alt=""
                 />{" "}
             </span>
         </section>

src/ContactUs.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+const ContactUs: React.FC = () => {
+    return (
+        <section className="contact section-padding" data-scroll-index='6'>
+          <div className="container">
+            <div className="row">
+              <div className="col-md-12">
+                <div className="sectioner-header text-center">
+                  <h3>Contact us</h3>
+                  <span className="line"></span>
+                  <p>We'd love to hear from you! Whether you are curious about the features, a free Trial, We're ready to serve you!</p>
+                </div>
+                <div className="section-content">
+                  <div className="row">
+                    <div className="col-sm-12 col-md-12 col-lg-6">
+                    <div className="contact-info white">
+                        <div className="contact-item media"> <i className="fa fa-envelope media-left media-right-margin"></i>
+                          <div className="media-body">
+                            <p className="text-uppercase">E-mail</p>
+                            <p className="text-uppercase"><a className="text-white" href="mailto:safeqr.fyp.24.s2.43p@gmail.com">safeqr.fyp.24.s2.43p@gmail.com</a> </p>
+                          </div>
+                        </div>
+                      </div>
+                      
+                    </div>
+                    <div className="col-sm-12 col-md-12 col-lg-6">
+                      <div className="contact-info white">
+                        <div className="contact-item media"> <i className="fa fa-clock media-left media-right-margin"></i>
+                          <div className="media-body">
+                            <p className="text-uppercase">Working Hours</p>
+                            <p className="text-uppercase">Mon-Fri 9.00 AM to 5.00PM.</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+    );
+};
+
+export default ContactUs;

src/Features.tsx

@@ -9,29 +9,31 @@ const Features: React.FC = () => {
         <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>
+          <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>
+                  <h5>SSL Checking</h5>
+                  <p>The security of the connection to the website associated with the QR code by verifying its SSL/TLS certificate.</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>
+                  <h5>Payload Inspection</h5>
+                  <p> Preview the contents of a URL to assess its relevance and safety before deciding to proceed with opening it.</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>
+                  <h5>Copy payload to Clipboard</h5>
+                  <p>Copy the contents of the URL extracted from a QR code to the device’s clipboard.</p>
                 </div>
                 <div className="media-right icon-border"> <span className="fa fa-wifi" aria-hidden="true"></span> </div>
               </div>
@@ -43,22 +45,24 @@ const Features: React.FC = () => {
               <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>
+                  <h5>History of scans</h5>
+                  <p>View the list of saved QR codes in the application's history for reference.</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>
+                  <h5>Open in selected browser</h5>
+                  <p>Open the scanned QR code in your favourite browser</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>
+                  <h5>Bookmarking scans</h5>
+                  <p>Automatically saved to the application's history for future reference or sharing. Bookmark a scanned QR code for 
+                    easy access and reference during the payload inspection phase.
+                  </p>
                 </div>
               </div>
             </div>

src/Footer.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import TermsOfService from "./TermsOfService";
+import PrivacyPolicy from "./PrivacyPolicy";
+import { Link } from "react-router-dom";
 
 const Footer: React.FC = () => {
     return (
@@ -9,7 +12,12 @@ const Footer: React.FC = () => {
                 <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>
+                  <p className="white">Inspired by the growing reliance on QR codes for various interactions and the increasing need for heightened 
+                  security in the digital landscape, our motivation is to empower users with a secure and seamless QR code experience. We are driven 
+                  by the desire to mitigate security risks associated with QR code usage and to provide users with peace of mind while engaging in
+                   digital transactions. Our motivation fuels our commitment to innovation and excellence in developing a solution that addresses 
+                   the evolving challenges of QR code security.
+                </p>
                 </div>
               </div>
               <div className="col-md-12">
@@ -18,11 +26,16 @@ const Footer: React.FC = () => {
                     <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>
+                  <p className="white mt-4">
+                    <Link to="/terms-of-service" className="footer-link">Terms of Service</Link> | 
+                    <Link to="/privacy-policy" className="footer-link">Privacy Policy</Link>
+                  </p>
                 </div>
               </div>
             </div>
           </div>
         </section>
+        
     )
 }
 

src/Header.tsx

@@ -5,7 +5,7 @@ const Header: React.FC = () => {
 
     useEffect(() => {
         function setFixed() {
-            if (window.scrollY > 0) {
+            if (window.scrollY > 50) {
                 setFix(true);
                 return;
             } 
@@ -19,9 +19,9 @@ const Header: React.FC = () => {
     }, []);
 
     return (
-        <nav className="navbar navbar-expand-lg banner">
+        <nav className={fix ? "navbar navbar-expand-lg nav-scroll": "navbar navbar-expand-lg banner"}>
             <div className="container">
-                <img src="../marketing/images/logo.png" alt="logo" className="logo-1" />
+                <img src={fix ? "../marketing/images/logo-black.png" : "../marketing/images/logo.png"} alt="logo" width="160" height="80" />
                 <button
                     className="navbar-toggler"
                     type="button"
@@ -75,16 +75,6 @@ const Header: React.FC = () => {
                                 Team
                             </a>{" "}
                         </li>
-                        <li className="nav-item">
-                            {" "}
-                            <a
-                                className="nav-link"
-                                href="#"
-                                data-scroll-nav="4"
-                            >
-                                Testimonials
-                            </a>{" "}
-                        </li>
                         <li className="nav-item">
                             {" "}
                             <a

src/PrivacyPolicy.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const PrivacyPolicy: React.FC = () => {
+    const navigate = useNavigate();
+    const handleBackToHome = () => {
+        navigate("/");
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+    return (
+        <section className="privacy-policy section-padding">
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-12">
+                        <div className="sectioner-header text-center">
+                            <h3>SafeQR Privacy Policy</h3>
+                            <span className="line"></span>
+                            <p>Effective Date: 12 August 2024</p>
+                            <button onClick={handleBackToHome}  className="btn btn-primary mt-4">
+                                Back to Home
+                            </button>
+                        </div>
+                    </div>
+                    <div className="col-md-12">
+                        <div className="section-content">
+                            <h4>1. Introduction</h4>
+                            <p>
+                                This Privacy Policy describes how SafeQR ("we", "our", "us") collects, uses, and shares information about you when you use our application ("the Service"). By using the Service, you agree to the collection and use of information in accordance with this Privacy Policy.
+                            </p>
+
+                            <h4>2. Information We Collect</h4>
+                            <p>
+                                <strong>Personal Information:</strong> When you create an account or use our Service, we may collect personal information such as your email address, username, and other identifying details.<br />
+                                <strong>Gmail Data:</strong> With your consent, we access your Gmail account to scan emails for QR codes. We do not store your Gmail credentials or email content beyond what is necessary for scanning and analysis.<br />
+                                <strong>QR Code Data:</strong> We collect and process data related to QR codes you scan, including URLs, QR code types, and any associated metadata.
+                            </p>
+
+                            <h4>3. How We Use Your Information</h4>
+                            <p>
+                                <strong>Service Provision:</strong> We use your information to provide, maintain, and improve the Service, including scanning QR codes and analyzing potential security threats.<br />
+                                <strong>Gmail Integration:</strong> We access and analyze your Gmail data solely to scan QR codes within your emails and return the relevant analysis to you.<br />
+                                <strong>Security Enhancements:</strong> We may use information collected to enhance the security features of our Service, including identifying and mitigating potential security threats.
+                            </p>
+
+                            <h4>4. Information Sharing and Disclosure</h4>
+                            <p>
+                                <strong>Service Providers:</strong> We may share your information with third-party service providers who assist us in operating the Service, such as cloud storage providers and security analysis tools. These providers are contractually obligated to protect your information.<br />
+                                <strong>Legal Compliance:</strong> We may disclose your information if required by law or in response to valid requests by public authorities.
+                            </p>
+
+                            <h4>5. Data Security</h4>
+                            <p>
+                                We implement a variety of security measures to protect your personal information and Gmail data. However, no method of transmission over the internet or electronic storage is 100% secure, and we cannot guarantee absolute security.
+                            </p>
+
+                            <h4>6. Data Retention</h4>
+                            <p>
+                                We retain your information only for as long as necessary to provide the Service and fulfill the purposes described in this Privacy Policy. Once your information is no longer needed, we will securely delete or anonymize it.
+                            </p>
+
+                            <h4>7. Your Rights</h4>
+                            <p>
+                                You have the right to access, update, or delete your personal information at any time by contacting us at <a href="mailto:safeqr.fyp.24.s2.43p@gmail.com">safeqr.fyp.24.s2.43p@gmail.com</a>. You can also revoke our access to your Gmail data through your Google account settings.
+                            </p>
+
+                            <h4>8. Changes to This Privacy Policy</h4>
+                            <p>
+                                We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on the Service. Your continued use of the Service after such changes will constitute your acceptance of the new Privacy Policy.
+                            </p>
+
+                            <h4>9. Contact Information</h4>
+                            <p>
+                                If you have any questions about this Privacy Policy, please contact us at <a href="mailto:safeqr.fyp.24.s2.43p@gmail.com">safeqr.fyp.24.s2.43p@gmail.com</a>.
+                            </p>
+                            
+                        </div>
+                        
+                    </div>
+                    <div className="col-md-12">
+                        <div className="sectioner-header text-center">
+                            <button onClick={handleBackToHome} className="btn btn-primary mt-4">
+                                Back to Home
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+            
+        </section>
+    );
+};
+
+export default PrivacyPolicy;

src/Team.tsx

@@ -9,7 +9,9 @@ const Team: React.FC = () => {
         <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>
+          <p>Our mission is to pioneer the development of a robust QR code security solution that not only safeguards users from malicious
+            activities but also fosters trust and confidence in QR code technology. We aim to achieve this by continuously innovating and 
+            adapting our solution to evolving threats while promoting collaboration and integration with other QR scanning applications.</p>
         </div>
         <div className="section-content text-center">
           <div className="row">
@@ -26,14 +28,14 @@ const Team: React.FC = () => {
               </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"/>
+              <div className="team-detail wow bounce" data-wow-delay="0.2s"> <img src="../marketing/images/user4.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>
+                <h4>Muhammed Iskander Shah</h4>
                 <p>Team Leader, Full Stack Developer</p>
               </div>
             </div>

src/TermsOfService.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const TermsOfService: React.FC = () => {
+    const navigate = useNavigate();
+    const handleBackToHome = () => {
+        navigate("/");
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+    return (
+        <section className="terms-of-service section-padding">
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-12">
+                        <div className="sectioner-header text-center">
+                            <h3>SafeQR Terms of Service</h3>
+                            <span className="line"></span>
+                            <p>Effective Date: 12 August 2024</p>
+                            <button onClick={handleBackToHome} className="btn btn-primary mt-4">
+                                Back to Home
+                             </button>
+                        </div>
+                        
+                    </div>
+                    <div className="col-md-12">
+                        <div className="section-content">
+                            <h4>1. Acceptance of Terms</h4>
+                            <p>
+                                By accessing or using the SafeQR application ("the Service"), you agree to be bound by these Terms of Service ("Terms"). If you do not agree to these Terms, you must not access or use the Service.
+                            </p>
+
+                            <h4>2. Service Description</h4>
+                            <p>
+                                SafeQR provides users with the ability to scan QR codes, classify QR code types, integrate with Gmail for scanning QR codes within emails, and manage scanned data including bookmarks and history.
+                            </p>
+
+                            <h4>3. User Responsibilities</h4>
+                            <p>
+                                <strong>Account Security:</strong> You are responsible for maintaining the confidentiality of your account information, including your password.<br />
+                                <strong>Prohibited Activities:</strong> You agree not to use the Service for any unlawful purposes, including but not limited to phishing, spreading malware, or engaging in any activity that could harm other users or third parties.
+                            </p>
+
+                            <h4>4. Gmail Integration</h4>
+                            <p>
+                                By using the Gmail integration feature, you authorize SafeQR to access and process your Gmail data solely for the purpose of scanning emails for QR codes and providing the relevant security analysis. SafeQR will not store your Gmail credentials or email content beyond what is necessary to perform the QR code scanning and analysis.
+                            </p>
+
+                            <h4>5. QR Code Scanning</h4>
+                            <p>
+                                The Service allows you to scan QR codes and classify them based on potential security risks. SafeQR does not guarantee the accuracy of the classification and is not liable for any harm resulting from the use of the scanned data.
+                            </p>
+
+                            <h4>6. Privacy and Data Security</h4>
+                            <p>
+                                Your use of the Service is also governed by our Privacy Policy, which explains how we collect, use, and protect your information. By using the Service, you agree to the collection and use of information in accordance with the Privacy Policy.
+                            </p>
+
+                            <h4>7. Termination</h4>
+                            <p>
+                                SafeQR reserves the right to suspend or terminate your access to the Service at any time, without notice, for conduct that violates these Terms or is otherwise harmful to other users, third parties, or the Service.
+                            </p>
+
+                            <h4>8. Limitation of Liability</h4>
+                            <p>
+                                To the maximum extent permitted by law, SafeQR shall not be liable for any direct, indirect, incidental, special, or consequential damages resulting from your use of the Service, even if SafeQR has been advised of the possibility of such damages.
+                            </p>
+
+                            <h4>9. Changes to the Terms</h4>
+                            <p>
+                                SafeQR may modify these Terms at any time. We will notify you of any changes by posting the new Terms on the Service. Your continued use of the Service after such changes will constitute your acceptance of the new Terms.
+                            </p>
+
+                            <h4>10. Governing Law</h4>
+                            <p>
+                                These Terms shall be governed by and construed in accordance with the laws of Singapore, without regard to its conflict of law principles.
+                            </p>
+
+                            <h4>11. Contact Information</h4>
+                            <p>
+                                If you have any questions about these Terms, please contact us at <a href="mailto:safeqr.fyp.24.s2.43p@gmail.com">safeqr.fyp.24.s2.43p@gmail.com</a>.
+                            </p>
+                        </div>
+                    </div>
+                    <div className="col-md-12">
+                        <div className="sectioner-header text-center">
+                            <button onClick={handleBackToHome} className="btn btn-primary mt-4">
+                                Back to Home
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default TermsOfService;

src/index.css

@@ -0,0 +1,627 @@
+* {
+	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 {
+	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;
+	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:20px 0px;
+	padding-bottom: 100px;
+	position:relative;
+}
+.banner::before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(../public/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(../public/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(../public/images/pattern.png);
+}
+.bx-prev {
+	left: -90px !important;
+	background: url(../public/images/arrow-left.png) no-repeat !important;
+	background-size: auto auto !important;
+	background-size: 100% 100% !important;
+}
+.bx-next {
+	right: -90px !important;
+	background: url(../public/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(../public/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;
+}
+}
+
+.footer-link {
+    color: #FFFFFF; /* White text color for better contrast */
+    font-weight: 600; /* Bold the text slightly */
+    margin: 0 10px; /* Add some space between the links */
+    text-decoration: none; /* Remove underline */
+    transition: color 0.3s ease; /* Smooth transition on hover */
+}
+
+.footer-link:hover {
+    color: #6C63FF; /* Change to a highlighted color on hover */
+    text-decoration: underline; /* Add underline on hover */
+}