enhance the sidebar and toggle button in oppurtunities page

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.multiCursorModifier": "ctrlCmd"
+}

src/Homepage.jsx

@@ -6,6 +6,7 @@ import Sidebar from './components/Sidebar/Sidebar';
 import ErrorPage from './components/ErrorPage/ErrorPage';
 import NoResultFound from './components/NoResultFound/NoResultFound';
 import Pagination from './components/Pagination/Pagination';
+import { motion } from 'framer-motion';
 import './App.css';
 import filenames from './ProfilesList.json';
 
@@ -118,28 +119,66 @@ function App() {
           {Array(5)
             .fill('profile-skeleton')
             .map((item, index) => (
-              <ProfileSkeleton key={index} />
+              <motion.div
+                key={index}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.1 * index }}
+              >
+                <ProfileSkeleton />
+              </motion.div>
             ))}
         </>
       );
     }
     const paginatedData = getPaginatedData();
-    return paginatedData.map((currentRecord, index) => <Profile data={currentRecord} key={index} />);
+    return paginatedData.map((currentRecord, index) => (
+      <motion.div
+        key={index}
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5, delay: 0.05 * index }}
+      >
+        <Profile data={currentRecord} key={index} />
+      </motion.div>
+    ));
   };
 
   return currentUrl === '/' ? (
     <div className="App flex flex-col bg-primaryColor dark:bg-secondaryColor md:flex-row">
       <Sidebar />
       <div className="w-full pl-5 pr-4 md:h-screen md:w-[77%] md:overflow-y-scroll md:py-7" ref={profilesRef}>
-        <Search onSearch={handleSearch} />
-        {profiles.length === 0 && searching ? <NoResultFound /> : renderProfiles()}
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <Search onSearch={handleSearch} />
+        </motion.div>
+        {profiles.length === 0 && searching ? (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <NoResultFound />
+          </motion.div>
+        ) : (
+          renderProfiles()
+        )}
         {combinedData.length > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage)}
-            onNextPage={handleNextPage}
-            onPrevPage={handlePrevPage}
-          />
+          <motion.div
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Pagination
+              currentPage={currentPage}
+              totalPages={Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage)}
+              onNextPage={handleNextPage}
+              onPrevPage={handlePrevPage}
+            />
+          </motion.div>
         )}
       </div>
     </div>

src/Page/Opportunities.jsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { ExternalLink } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 
 const opportunities = [
   {
@@ -9,13 +11,13 @@ const opportunities = [
   },
   {
     title: 'Remote Jobs',
-    items: ['Software Engineer at Microsoft', 'JAVA Develoepr at YULK', 'UI Designer at Xdesign'],
+    items: ['Software Engineer at Microsoft', 'JAVA Developer at YULK', 'UI Designer at Xdesign'],
   },
   {
     title: 'Internships',
     items: ['Summer Internship at Google', 'Fall Internship at Microsoft', 'Remote Internship at Amazon'],
   },
-  { title: 'Freelance Work', items: ['  Web developer', 'Web Designer', 'AI Enginner'] },
+  { title: 'Freelance Work', items: ['Web developer', 'Web Designer', 'AI Engineer'] },
   { title: 'Hackathons', items: ['Global AI Hackathon', 'Blockchain Innovation Challenge', 'Green Tech Hackathon'] },
   { title: 'Open Source', items: ['DevDisplay', 'Hacktoberfest - 2024', 'GSSOC - 2024'] },
   { title: 'Tech Events', items: ['TechCrunch Disrupt', 'Web Summit', 'Google I/O'] },
@@ -24,10 +26,36 @@ const opportunities = [
 ];
 
 export default function Opportunities() {
+  const [theme, setTheme] = useState(() => {
+    const storedTheme = JSON.parse(localStorage.getItem('theme'));
+    return storedTheme || (document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+  });
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    htmlElement.classList.toggle('dark', theme === 'dark');
+    htmlElement.classList.toggle('light', theme === 'light');
+    localStorage.setItem('theme', JSON.stringify(theme));
+  }, [theme]);
+
+  function toggleTheme() {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  }
+
   return (
-    <div className="min-h-screen bg-[#141d2f] text-center text-white">
-      <header className="bg-[#00a6fb] p-4">
-        <h1 className="text-2xl font-bold">Opportunities Hub</h1>
+    <div className={`min-h-screen ${theme === 'dark' ? 'bg-[#141d2f]' : 'bg-white'} transition-colors duration-500`}>
+      <header className="flex items-center justify-between bg-[#00a6fb] p-4">
+        <h1 className="text-2xl font-bold text-white">Opportunities Hub</h1>
+        <button
+          onClick={toggleTheme}
+          className="rounded-lg bg-white p-2 dark:bg-[#141d2f] dark:text-white"
+        >
+          {theme === 'dark' ? (
+            <FontAwesomeIcon icon={faSun} className="text-yellow-500" />
+          ) : (
+            <FontAwesomeIcon icon={faMoon} className="text-gray-900" />
+          )}
+        </button>
       </header>
 
       <section className="relative flex h-[50vh] items-center justify-center overflow-hidden">
@@ -48,40 +76,55 @@ export default function Opportunities() {
           }}
         />
         <div className="relative z-10 text-center">
-          <h2 className="mb-4 text-4xl font-bold">Opportunities In Tech Fields</h2>
-          <p className="text-xl">
-            Explore the hub of all the latest & upcoming Opportunities in one place
-            <br />
-            (jobs, internships, hackathons, events, bootcamps, webinars, devfests)
+          <motion.h2
+            className={`mb-4 text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Opportunities In Tech Fields
+          </motion.h2>
+          <p className="text-xl text-white">
+            Explore all the latest & upcoming opportunities (jobs, internships, hackathons, events, etc.)
           </p>
         </div>
       </section>
 
       <main className="container mx-auto grid gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
         {opportunities.map((category) => (
-          <div key={category.title} className="rounded-lg bg-[#1e2a42] p-4 shadow-lg">
-            <h3 className="mb-4 text-2xl font-bold text-[#00a6fb]">{category.title}</h3>
+          <motion.div
+            key={category.title}
+            className={`rounded-lg p-4 shadow-lg transition-colors ${theme === 'dark' ? 'bg-[#1e2a42]' : 'bg-gray-100'}`}
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <h3 className={`mb-4 text-2xl font-bold ${theme === 'dark' ? 'text-[#00a6fb]' : 'text-[#141d2f]'}`}>
+              {category.title}
+            </h3>
             <ul className="space-y-2">
               {category.items.map((item, index) => (
                 <li key={index} className="flex items-center">
-                  <ExternalLink className="mr-2 h-4 w-4 text-[#00a6fb]" />
-                  <button className="text-left transition-colors hover:text-[#00a6fb]">{item}</button>
+                  <ExternalLink className={`mr-2 h-4 w-4 ${theme === 'dark' ? 'text-[#00a6fb]' : 'text-gray-700'}`} />
+                  <button className="text-left transition-colors dark:text-white dark:hover:text-[#00a6fb] text-black hover:text-[#00a6fb]">
+  {item}
+</button>
                 </li>
               ))}
             </ul>
-          </div>
+          </motion.div>
         ))}
       </main>
 
       <footer className="mt-12 bg-[#00a6fb] p-8">
         <div className="container mx-auto text-center">
-          <h3 className="mb-4 text-2xl font-bold">Join the Tech Revolution</h3>
-          <p className="mb-4">Stay updated with the latest opportunities and events in the tech world.</p>
+          <h3 className="mb-4 text-2xl font-bold text-white">Join the Tech Revolution</h3>
+          <p className="mb-4 text-white">Stay updated with the latest opportunities and events in the tech world.</p>
           <form className="flex flex-col items-center justify-center gap-4 sm:flex-row">
             <input
               type="email"
               placeholder="Enter your email"
-              className="w-full rounded-lg px-4 py-2 text-[#141d2f] sm:w-auto"
+              className="w-full rounded-lg px-4 py-2 text-gray-800 sm:w-auto"
             />
             <button
               type="submit"