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"

src/App.tsx

@@ -1,25 +1,36 @@
-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 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 (
-    <>
-      <Header />
-      <Banner />
-      <About />
-      <Features />
-      <Team />
-      <Faq />
-      <ContactUs />
-      <Footer />
-    </>
+    <Router>
+      <Routes>
+        <Route path="/" element={
+          <>
+            <Header />
+            <Banner />
+            <About />
+            <Features />
+            <Team />
+            <Faq />
+            <ContactUs />
+            <Footer />
+          </>
+        } />
+        <Route path="/terms-of-service" element={<TermsOfService />} />
+        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+      </Routes>
+    </Router>
   );
 }
 

src/Footer.tsx

@@ -1,33 +1,41 @@
 import React from "react";
+import TermsOfService from "./TermsOfService";
+import PrivacyPolicy from "./PrivacyPolicy";
+import { Link } from "react-router-dom";
 
 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">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">
-        <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>
+          <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">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">
+                <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>
+                  <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/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/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

@@ -612,3 +612,16 @@ h3 {
 	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 */
+}