Merge pull request #15 from RameezIbrahimOfficial/main

Added Footer Component & Privacy Policy Page ( Closes #9 , #8 )

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "appwrite": "^14.0.1",
     "bootstrap": "^5.3.3",
     "react": "^18.3.1",

src/App.jsx

@@ -1,11 +1,14 @@
-import React, { useState } from 'react';
+/* eslint-disable no-unused-vars */
+import { useState } from 'react';
 import { account } from './lib/appwrite';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import CreateDocument from './Pages/CreateDocument';
 import Profiler from './Pages/Profiler';
 import ViewProfiles from './Pages/ViewProfile';
 import EditProfile from './Pages/EditProfile';
 import Navbar from './Components/Navbar';
+import Footer from './Components/Footer/Footer';
+import PrivacyPolicy from './Components/Privacy Policy/PrivacyPolicy';
 
 const App = () => {
   const [loggedInUser, setLoggedInUser] = useState(null);
@@ -27,13 +30,15 @@ const App = () => {
         <Route path="/create-profile" element={<Profiler />} />
         <Route path="/view-profile" element={<ViewProfiles />} />
         <Route path="/edit-profile/:id" element={<EditProfile />} />
+        <Route path="/privacy" element={<PrivacyPolicy />} />
       </Routes>
+      <Footer />
     </Router>
   );
 };
 
 const Home = () => {
-  return <h2>Welcome to the Home Page</h2>;
+  return <h2 className='text-white'>Welcome to the Home Page</h2>;
 };
 
 export default App;

src/Components/Footer/Footer.css

@@ -0,0 +1,32 @@
+.footer-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    border-bottom: 1px solid #555;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.footer-text {
+    font-size: 0.9rem;
+}
+
+.footer-link {
+    transition: color 0.3s;
+}
+
+.footer-link:hover {
+    color: #1e90ff; 
+}
+
+.footer-icon {
+    font-size: 1.5rem;
+    transition: transform 0.3s;
+}
+
+.footer-icon:hover {
+    transform: scale(1.1);
+}
+
+.footer-small {
+    font-size: 0.8rem;
+}

src/Components/Footer/Footer.jsx

@@ -0,0 +1,88 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faFacebook,
+  faTwitter,
+  faInstagram,
+  faLinkedin,
+} from "@fortawesome/free-brands-svg-icons";
+import { Link } from "react-router-dom";
+import "./Footer.css"; // Import custom CSS for additional styles
+
+const Footer = () => {
+  return (
+    <footer className="bg-dark text-white mt-5">
+      <div className="container py-5">
+        <div className="row">
+          <div className="col-md-4 mb-4">
+            <h5 className="footer-title">About Us</h5>
+            <p className="footer-text">
+              We are committed to providing high-quality OSINT tools and
+              resources. Your privacy and security are our top priorities.
+            </p>
+          </div>
+          <div className="col-md-4 mb-4">
+            <h5 className="footer-title">Quick Links</h5>
+            <ul className="list-unstyled">
+              <li>
+                <Link to="/privacy" className="text-white footer-link">
+                  Privacy Policy
+                </Link>
+              </li>
+              <li>
+                <Link to="/terms" className="text-white footer-link">
+                  Terms of Service
+                </Link>
+              </li>
+              <li>
+                <Link to="/contact" className="text-white footer-link">
+                  Contact Us
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="col-md-4 mb-4">
+            <h5 className="footer-title">Follow Us</h5>
+            <div>
+              <a
+                href="https://facebook.com"
+                className="text-white me-3 footer-icon"
+                aria-label="Facebook"
+              >
+                <FontAwesomeIcon icon={faFacebook} />
+              </a>
+              <a
+                href="https://twitter.com"
+                className="text-white me-3 footer-icon"
+                aria-label="Twitter"
+              >
+                <FontAwesomeIcon icon={faTwitter} />
+              </a>
+              <a
+                href="https://instagram.com"
+                className="text-white me-3 footer-icon"
+                aria-label="Instagram"
+              >
+                <FontAwesomeIcon icon={faInstagram} />
+              </a>
+              <a
+                href="https://linkedin.com"
+                className="text-white footer-icon"
+                aria-label="LinkedIn"
+              >
+                <FontAwesomeIcon icon={faLinkedin} />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="text-center mt-4">
+          <small className="footer-small">
+            &copy; {new Date().getFullYear()} Profile App. All Rights Reserved.
+          </small>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/Components/Privacy Policy/PrivacyPolicy.css

@@ -0,0 +1,21 @@
+body {
+    background-color: #121212; 
+}
+
+h1, h2 {
+    border-bottom: 2px solid #555; 
+    padding-bottom: 0.5rem; 
+}
+
+ul li {
+    margin-bottom: 0.5rem; 
+}
+
+a {
+    text-decoration: underline;
+    transition: color 0.3s; 
+}
+
+a:hover {
+    color: #1e90ff; 
+}

src/Components/Privacy Policy/PrivacyPolicy.jsx

@@ -0,0 +1,100 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./PrivacyPolicy.css";
+
+const PrivacyPolicy = () => {
+  return (
+    <div className="container my-5 bg-dark text-white pt-3 pb-3 rounded">
+      <h1 className="mb-4 text-center">Privacy Policy for OSINT Application</h1>
+      <p className="lead text-justify">
+        At Profile App, we value your privacy and are committed to protecting
+        your personal information. This Privacy Policy outlines how we collect,
+        use, and safeguard your information when you use our OSINT application.
+      </p>
+
+      <h2 className="mt-4">Information We Collect</h2>
+      <ul className="list-unstyled">
+        <li>
+          <strong>Personal Information:</strong> We may collect personal
+          information such as your name, email address, and contact details when
+          you register or interact with our app.
+        </li>
+        <li>
+          <strong>Usage Data:</strong> We automatically collect information
+          about your interactions with the app, including device information, IP
+          address, and browsing behavior.
+        </li>
+        <li>
+          <strong>Publicly Available Information:</strong> As an OSINT
+          application, we may aggregate and analyze publicly available data from
+          various sources.
+        </li>
+      </ul>
+
+      <h2 className="mt-4">How We Use Your Information</h2>
+      <p>
+        We may use the information we collect for various purposes, including:
+      </p>
+      <ul className="list-unstyled">
+        <li>To provide and maintain our service.</li>
+        <li>To improve, personalize, and expand our app s features.</li>
+        <li>
+          To communicate with you, including sending updates, newsletters, or
+          promotional content.
+        </li>
+        <li>To analyze user behavior and trends to enhance user experience.</li>
+      </ul>
+
+      <h2 className="mt-4">Data Protection</h2>
+      <p>
+        We implement reasonable security measures to protect your personal
+        information from unauthorized access, use, or disclosure. However,
+        please be aware that no method of transmission over the internet or
+        method of electronic storage is 100% secure.
+      </p>
+
+      <h2 className="mt-4">Information Sharing</h2>
+      <p>
+        We do not sell or rent your personal information to third parties. We
+        may share information with trusted partners who assist us in operating
+        our application, conducting our business, or servicing you, as long as
+        those parties agree to keep this information confidential.
+      </p>
+
+      <h2 className="mt-4">Your Rights</h2>
+      <p>
+        Depending on your jurisdiction, you may have the following rights
+        regarding your personal information:
+      </p>
+      <ul className="list-unstyled">
+        <li>The right to access your personal information.</li>
+        <li>The right to request correction of inaccurate data.</li>
+        <li>The right to request deletion of your personal data.</li>
+        <li>
+          The right to object to or restrict the processing of your information.
+        </li>
+      </ul>
+
+      <h2 className="mt-4">Changes to This Privacy Policy</h2>
+      <p>
+        We may update our Privacy Policy from time to time. We will notify you
+        of any changes by posting the new Privacy Policy on this page with a
+        revised effective date.
+      </p>
+
+      <h2 className="mt-4">Contact Us</h2>
+      <p>
+        If you have any questions about this Privacy Policy, please contact us
+        at:
+      </p>
+      <p>
+        Email:{" "}
+        <a href="mailto:[email protected]" className="text-light">
+          [email protected]
+        </a>
+      </p>
+      <p>Phone: +1 (123) 456-7890</p>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;