From c8a34f2b3d2149176e5b481f4404e02056fc3c87 Mon Sep 17 00:00:00 2001
From: RameezIbrahimOfficial <rameezibrahimofficial@gmail.com>
Date: Tue, 15 Oct 2024 13:45:18 +0530
Subject: [PATCH] 1. Added Footer Component 2. Added Privacy Policy Pages 3. In
 Footer Page Option to View Privacy Policy 4. Fixed Bug on View Profiles

---
 src/App.jsx                                   |   6 +-
 src/Components/Footer/Footer.css              |  32 ++++++
 src/Components/{ => Footer}/Footer.jsx        |  43 ++++----
 .../Privacy Policy/PrivacyPolicy.css          |  21 ++++
 .../Privacy Policy/PrivacyPolicy.jsx          | 100 ++++++++++++++++++
 src/Components/PrivacyPolicy.jsx              |  65 ------------
 src/Pages/ViewProfile.jsx                     |  54 ++++++----
 7 files changed, 212 insertions(+), 109 deletions(-)
 create mode 100644 src/Components/Footer/Footer.css
 rename src/Components/{ => Footer}/Footer.jsx (58%)
 create mode 100644 src/Components/Privacy Policy/PrivacyPolicy.css
 create mode 100644 src/Components/Privacy Policy/PrivacyPolicy.jsx
 delete mode 100644 src/Components/PrivacyPolicy.jsx

diff --git a/src/App.jsx b/src/App.jsx
index a5869b6..4955aaf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,8 +7,8 @@ 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';
-import PrivacyPolicy from './Components/PrivacyPolicy';
+import Footer from './Components/Footer/Footer';
+import PrivacyPolicy from './Components/Privacy Policy/PrivacyPolicy';
 
 const App = () => {
   const [loggedInUser, setLoggedInUser] = useState(null);
@@ -38,7 +38,7 @@ const App = () => {
 };
 
 const Home = () => {
-  return <h2>Welcome to the Home Page</h2>;
+  return <h2 className='text-white'>Welcome to the Home Page</h2>;
 };
 
 export default App;
diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
new file mode 100644
index 0000000..277ebc5
--- /dev/null
+++ b/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;
+}
diff --git a/src/Components/Footer.jsx b/src/Components/Footer/Footer.jsx
similarity index 58%
rename from src/Components/Footer.jsx
rename to src/Components/Footer/Footer.jsx
index ea661e0..8d1758d 100644
--- a/src/Components/Footer.jsx
+++ b/src/Components/Footer/Footer.jsx
@@ -7,66 +7,67 @@ import {
   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-4">
+      <div className="container py-5">
         <div className="row">
-          <div className="col-md-4 mb-3">
-            <h5>About Us</h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          <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-3">
-            <h5>Quick Links</h5>
+          <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">
+                <Link to="/privacy" className="text-white footer-link">
                   Privacy Policy
                 </Link>
               </li>
               <li>
-                <a href="/terms" className="text-white">
+                <Link to="/terms" className="text-white footer-link">
                   Terms of Service
-                </a>
+                </Link>
               </li>
               <li>
-                <a href="/contact" className="text-white">
+                <Link to="/contact" className="text-white footer-link">
                   Contact Us
-                </a>
+                </Link>
               </li>
             </ul>
           </div>
-          <div className="col-md-4 mb-3">
-            <h5>Follow Us</h5>
+          <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"
+                className="text-white me-3 footer-icon"
                 aria-label="Facebook"
               >
                 <FontAwesomeIcon icon={faFacebook} />
               </a>
               <a
                 href="https://twitter.com"
-                className="text-white me-3"
+                className="text-white me-3 footer-icon"
                 aria-label="Twitter"
               >
                 <FontAwesomeIcon icon={faTwitter} />
               </a>
               <a
                 href="https://instagram.com"
-                className="text-white me-3"
+                className="text-white me-3 footer-icon"
                 aria-label="Instagram"
               >
                 <FontAwesomeIcon icon={faInstagram} />
               </a>
               <a
                 href="https://linkedin.com"
-                className="text-white"
+                className="text-white footer-icon"
                 aria-label="LinkedIn"
               >
                 <FontAwesomeIcon icon={faLinkedin} />
@@ -75,8 +76,8 @@ const Footer = () => {
           </div>
         </div>
         <div className="text-center mt-4">
-          <small>
-            &copy; {new Date().getFullYear()} Your Company. All Rights Reserved.
+          <small className="footer-small">
+            &copy; {new Date().getFullYear()} Profile App. All Rights Reserved.
           </small>
         </div>
       </div>
diff --git a/src/Components/Privacy Policy/PrivacyPolicy.css b/src/Components/Privacy Policy/PrivacyPolicy.css
new file mode 100644
index 0000000..891dd49
--- /dev/null
+++ b/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; 
+}
diff --git a/src/Components/Privacy Policy/PrivacyPolicy.jsx b/src/Components/Privacy Policy/PrivacyPolicy.jsx
new file mode 100644
index 0000000..578f793
--- /dev/null
+++ b/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:support@profile-app.com" className="text-light">
+          support@profile-app.com
+        </a>
+      </p>
+      <p>Phone: +1 (123) 456-7890</p>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;
diff --git a/src/Components/PrivacyPolicy.jsx b/src/Components/PrivacyPolicy.jsx
deleted file mode 100644
index 626d3d6..0000000
--- a/src/Components/PrivacyPolicy.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-const PrivacyPolicy = () => {
-    return (
-        <div className="container my-5 bg-dark text-white pt-3 pb-3">
-            <h1 className="mb-4">Privacy Policy for OSINT Application</h1>
-            <p>
-                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>
-                <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>
-                <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>
-                <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: support@yourapp.com</p>
-            <p>Phone: +1 (123) 456-7890</p>
-        </div>
-    );
-};
-
-export default PrivacyPolicy;
\ No newline at end of file
diff --git a/src/Pages/ViewProfile.jsx b/src/Pages/ViewProfile.jsx
index ae865aa..2a8a1ba 100644
--- a/src/Pages/ViewProfile.jsx
+++ b/src/Pages/ViewProfile.jsx
@@ -1,28 +1,31 @@
-import { Client, Databases } from 'appwrite';
-import { project_id, database_id, collection_id } from '../lib/appwrite';
-import { ToastContainer, toast } from 'react-toastify';
-import { Link } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { Client, Databases } from "appwrite";
+import { project_id, database_id, collection_id } from "../lib/appwrite";
+import { ToastContainer, toast } from "react-toastify";
+import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
 
 const ViewProfiles = () => {
   const [profiles, setProfiles] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
 
   const client = new Client()
-    .setEndpoint('https://cloud.appwrite.io/v1') // Your Appwrite endpoint
+    .setEndpoint("https://cloud.appwrite.io/v1") // Your Appwrite endpoint
     .setProject(project_id); // Your Appwrite project ID
 
   const databases = new Databases(client);
 
   const fetchProfiles = async () => {
     try {
-      const response = await databases.listDocuments(database_id, collection_id);
+      const response = await databases.listDocuments(
+        database_id,
+        collection_id
+      );
       setProfiles(response.documents);
-      toast.success('Profiles loaded successfully!');
+      toast.success("Profiles loaded successfully!");
     } catch (error) {
       console.error("Error fetching profiles:", error);
-      toast.error('Failed to load profiles!');
+      toast.error("Failed to load profiles!");
     } finally {
       setLoading(false);
     }
@@ -32,36 +35,47 @@ const ViewProfiles = () => {
     fetchProfiles();
   }, []);
 
-  const filteredProfiles = profiles.filter(profile =>
+  const filteredProfiles = profiles.filter((profile) =>
     profile.Name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   return (
-    <div className='container mt-4'>
+    <div className="container mt-4 text-white">
       <ToastContainer />
       <h2>View Profiles</h2>
       <input
         type="text"
         placeholder="Search by Name"
         value={searchTerm}
-        onChange={e => setSearchTerm(e.target.value)}
+        onChange={(e) => setSearchTerm(e.target.value)}
         className="form-control mb-3"
       />
       {loading ? (
         <p>Loading...</p>
       ) : filteredProfiles.length > 0 ? (
         <div className="row">
-          {filteredProfiles.map(profile => (
+          {filteredProfiles.map((profile) => (
             <div className="col-md-4 mb-4" key={profile.$id}>
               <div className="card">
-                <img src={`https://thispersondoesnotexist.com/`}/>
+                <img src={`https://thispersondoesnotexist.com/`} />
                 <div className="card-body">
                   <h5 className="card-title">{profile.Name}</h5>
-                  <p className="card-text"><strong>Gender:</strong> {profile.Gender}</p>
-                  <p className="card-text"><strong>Age:</strong> {profile.Age}</p>
-                  <p className="card-text"><strong>Country:</strong> {profile.Country}</p>
-                  <p className="card-text"><strong>Religion:</strong> {profile.Religion}</p>
-                  <Link to={`/edit-profile/${profile.$id}`} className="btn btn-primary">
+                  <p className="card-text">
+                    <strong>Gender:</strong> {profile.Gender}
+                  </p>
+                  <p className="card-text">
+                    <strong>Age:</strong> {profile.Age}
+                  </p>
+                  <p className="card-text">
+                    <strong>Country:</strong> {profile.Country}
+                  </p>
+                  <p className="card-text">
+                    <strong>Religion:</strong> {profile.Religion}
+                  </p>
+                  <Link
+                    to={`/edit-profile/${profile.$id}`}
+                    className="btn btn-primary"
+                  >
                     Edit Profile
                   </Link>
                 </div>