added follow-us section

package.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "dotenv": "^16.4.5",
     "firebase": "^10.14.1",
     "react": "^18.2.0",

src/App.css

@@ -0,0 +1,30 @@
+/* src/App.css */
+.fixed {
+    position: fixed;
+    z-index: 999; /* Ensure the sidebar is above other elements */
+  }
+
+  .sidebar {
+    background-color: white; /* Adjust the background color */
+  }
+
+  .sidebar button {
+    background-color: transparent; /* Customize the close button */
+    border: none;
+    cursor: pointer;
+  }
+
+  .sidebar h2 {
+    margin-bottom: 20px; /* Spacing below the heading */
+  }
+
+  .sidebar a {
+    text-decoration: none; /* Remove underline from links */
+    color: #333; /* Default link color */
+    transition: color 0.3s; /* Smooth color transition */
+  }
+
+  .sidebar a:hover {
+    color: #007BFF; /* Color change on hover */
+  }
+

src/App.jsx

@@ -1,3 +1,4 @@
+// src/App.js
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { useState } from 'react';
 import './App.css';
@@ -6,6 +7,7 @@ import Manager from './components/Manager';
 import Footer from './components/Footer';
 import SignIn from './components/SignIn';
 import SignUp from './components/SignUp';
+import SocialSidebar from './components/Sidebar';
 
 function App() {
   return (
@@ -21,10 +23,9 @@ function App() {
         </Routes>
       </div>
       <Footer />
+      <SocialSidebar /> {/* Add the sidebar here */}
     </Router>
   );
 }
 
-
-
 export default App;

src/components/Sidebar.jsx

@@ -0,0 +1,51 @@
+// src/components/SocialSidebar.js
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF, faTwitter, faInstagram, faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
+import { faTimes, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+
+const SocialSidebar = () => {
+  const [isOpen, setIsOpen] = useState(true); // State to manage sidebar visibility
+
+  const toggleSidebar = () => {
+    setIsOpen(!isOpen); // Toggle the sidebar's visibility
+  };
+
+  return (
+    <>
+      {isOpen ? (
+        <div className="fixed top-1/2 left-0 transform -translate-y-1/2 bg-white shadow-lg p-4 z-50">
+          <button 
+            onClick={toggleSidebar} 
+            className="absolute top-[-10px] right-[-8px] bg-green-500 rounded-full w-5 h-5 flex items-center justify-center"
+          >
+            <FontAwesomeIcon icon={faTimes} size="lg" />
+          </button>
+          <div className="flex flex-col items-center space-y-4">
+            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="flex items-center hover:text-green-700 transition-colors duration-300">
+              <FontAwesomeIcon icon={faFacebookF} size="lg" />
+            </a>
+            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="flex items-center hover:text-green-700 transition-colors duration-300">
+              <FontAwesomeIcon icon={faTwitter} size="lg" />
+            </a>
+            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="flex items-center hover:text-green-700 transition-colors duration-300">
+              <FontAwesomeIcon icon={faInstagram} size="lg" />
+            </a>
+            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="flex items-center hover:text-green-700 transition-colors duration-300">
+              <FontAwesomeIcon icon={faLinkedinIn} size="lg" />
+            </a>
+          </div>
+        </div>
+      ) : (
+        <button
+          onClick={toggleSidebar}
+          className="fixed top-1/2 left-0 transform -translate-y-1/2 bg-white shadow-lg p-2 z-50"
+        >
+          <FontAwesomeIcon icon={faArrowRight} size="lg" />
+        </button>
+      )}
+    </>
+  );
+};
+
+export default SocialSidebar;