Refactor footer icons: added tooltips, updated social icon colors, and improved UX

Author: Nikunj-Mehta

CODE_OF_CONDUCT.md

@@ -17,17 +17,14 @@ In the interest of fostering an open and welcoming environment, we as contributo
 We expect all participants to:
 
 1. **Be Respectful:**
-
    - Treat everyone with respect and courtesy.
    - Approach disagreements constructively and considerately.
 
 2. **Be Inclusive:**
-
    - Ensure everyone feels welcome and valued.
    - Avoid discriminatory, exclusionary, or harmful language and actions.
 
 3. **Be Collaborative:**
-
    - Share knowledge and help others.
    - Focus on improving the platform and the experience for all.
 
@@ -52,11 +49,9 @@ The following behaviors are unacceptable in the DevDisplay community:
 
 - **Join DevDisplay Discord Community**: [Discord Community](https://discord.gg/chyt2UgTv5)
 - **Join DevDisplay WhatsApp Community**: [WhatsApp Community](https://chat.whatsapp.com/Dcl21sgGDIpHURESSuH0p4)
-
   - Connect with other developers and collaborate on exciting projects.
 
 - **Reach Out to the Team**:
-
   - Organization Email: team@devdisplay.org
   - Creator's Email: hellow.ashutosh@gmail.com
 
@@ -69,7 +64,6 @@ The following behaviors are unacceptable in the DevDisplay community:
 ---
 
 2. **Provide Details:**
-
    - Include a description of the incident, relevant links, or screenshots if possible.
 
 3. **Expect a Response:**

SECURITY.md

@@ -23,19 +23,16 @@ We take the security of DevDisplay seriously. If you discover any security vulne
 ### For Contributors
 
 1. **Code Review**
-
    - All code changes must go through peer review
    - Security-sensitive code requires additional review
    - Follow secure coding guidelines
 
 2. **Dependencies**
-
    - Keep all dependencies up to date
    - Regularly check for known vulnerabilities in dependencies
    - Use only trusted and well-maintained packages
 
 3. **Authentication & Authorization**
-
    - Use strong password policies
    - Implement proper session management
    - Follow the principle of least privilege
@@ -48,7 +45,6 @@ We take the security of DevDisplay seriously. If you discover any security vulne
 ### For Users
 
 1. **Account Security**
-
    - Use strong, unique passwords
    - Enable two-factor authentication when available
    - Keep your access tokens secure

src/Page/Home.jsx

@@ -321,7 +321,7 @@ const StyledDot = styled.div`
 const TechFeatures = () => {
   return (
     <section className="tech-features-section mt-[60%] max-w-[90%] px-4 py-16 text-white xs:mt-0">
-      <div className="mx-auto my-12 max-w-[80%] text-center ">
+      <div className="mx-auto my-12 max-w-[80%] text-center">
         <h2 className="custom-font my-4 text-4xl font-bold text-[#00a6fb]">Dive into DevDisplay</h2>
         <div className="mb-6 mt-4 flex flex-col items-center">
           <p className="max-w-2xl text-center text-lg text-gray-400">

src/Page/OpportunitiesHub/CompetitionList.jsx

@@ -163,10 +163,7 @@ const CompetitionsCardComponent = ({ organizer, title, location, date, domains,
 
       <div className="mt-2 flex flex-wrap justify-center gap-2 p-2">
         {domains.map((domain, idx) => (
-          <span
-            key={idx}
-            className="bg-gray-1000 rounded-full border border-[#00a6fb]  px-2 py-1 text-xs text-gray-300"
-          >
+          <span key={idx} className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300">
             {domain}
           </span>
         ))}

src/Page/OpportunitiesHub/EventsList.jsx

@@ -254,10 +254,7 @@ const TecheventsCardComponent = ({ organizer, title, location, date, domains, ap
 
       <div className="mt-2 flex flex-wrap justify-center gap-2 p-2">
         {domains.map((domain, idx) => (
-          <span
-            key={idx}
-            className="bg-gray-1000 rounded-full border border-[#00a6fb]  px-2 py-1 text-xs text-gray-300"
-          >
+          <span key={idx} className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300">
             {domain}
           </span>
         ))}

src/Page/OpportunitiesHub/HackathonList.jsx

@@ -734,10 +734,7 @@ const HackathonCardComponent = React.forwardRef(
 
       <div className="mt-2 flex flex-wrap justify-center gap-2 p-2">
         {domains.map((domain, idx) => (
-          <span
-            key={idx}
-            className="bg-gray-1000 rounded-full border border-[#00a6fb]  px-2 py-1 text-xs text-gray-300"
-          >
+          <span key={idx} className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300">
             {domain}
           </span>
         ))}

src/Page/OpportunitiesHub/InternshipList.jsx

@@ -28,7 +28,7 @@ const Internship1 = () => {
           <div className="flex items-start justify-between">
             <div className="flex gap-4">
               <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white p-2">
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br  to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
                 <img src="/assets/LocalCompany/WOODESY.png" alt="Custom Icon" className="h-10 w-10" />
               </div>
               <div>
@@ -166,7 +166,7 @@ const Internship2 = () => {
           <div className="flex items-start justify-between">
             <div className="flex gap-4">
               <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white p-2">
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br  to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
                 <img src="/assets/LocalCompany/Vijetha Softwares Pvt.Ltd.jpg" alt="Custom Icon" className="h-10 w-10" />
               </div>
               <div>
@@ -308,7 +308,7 @@ const Internship3 = () => {
           <div className="flex items-start justify-between">
             <div className="flex gap-4">
               <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white p-2">
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br  to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
                 <img src="/assets/LocalCompany/Webfuture.jpg" alt="Custom Icon" className="h-10 w-10" />
               </div>
               <div>

src/Page/OpportunitiesHub/OpenSource.jsx

@@ -715,7 +715,7 @@ const OSProgramCardComponent = ({
             <div className="status-user" />
             Apply Now
           </a>
-          <div className="mt-2 flex flex-col items-start gap-1 rounded-lg border border-[#00a6fb] bg-gray-900 bg-opacity-50 px-14 py-3 text-sm text-xs text-white text-white shadow-lg backdrop-blur-md transition-all hover:bg-gray-800">
+          <div className="mt-2 flex flex-col items-start gap-1 rounded-lg border border-[#00a6fb] bg-gray-900 bg-opacity-50 px-14 py-3 text-sm text-xs text-white shadow-lg backdrop-blur-md transition-all hover:bg-gray-800">
             <div className="flex items-center">
               <FontAwesomeIcon icon={faCalendarAlt} className="mr-2 text-[#00a6fb]" />
               <span className="font-medium">{timeline}</span>

src/Page/Sponsor.jsx

@@ -20,7 +20,7 @@ const SponsorUs = () => {
           within the tech community.
         </p>
 
-        <div className="mb-8 ">
+        <div className="mb-8">
           <h6 className="mb-2 text-xl font-semibold">What is DevDisplay?</h6>
           <p className="mb-4">
             DevDisplay is a global open-source tech community with the mission to unite all tech-related needs under one

src/components/AchievementJourney/IndividualJourney.js

@@ -53,7 +53,7 @@ const AchieverJourneyPage = () => {
         </div>
       </header>
 
-      <section className=" mx-auto mt-4 p-8">
+      <section className="mx-auto mt-4 p-8">
         <motion.h2
           className="text-3xl font-bold text-[#00a6fb]"
           initial={{ opacity: 0, y: -20 }}
@@ -113,7 +113,7 @@ const AchieverJourneyPage = () => {
         </ul>
       </section>
 
-      <section className=" mx-auto mt-12 p-8">
+      <section className="mx-auto mt-12 p-8">
         <h2 className="text-2xl font-semibold text-[#00a6fb]">Interview Process</h2>
         <h3 className="mt-4 text-xl font-semibold">Preparation</h3>
         <ul className="list-disc pl-6">
@@ -158,7 +158,7 @@ const AchieverJourneyPage = () => {
         </ul>
       </section>
 
-      <section className=" mx-auto mt-12 p-8">
+      <section className="mx-auto mt-12 p-8">
         <h2 className="text-2xl font-semibold text-[#00a6fb]">Resources for Preparation</h2>
         {achieverData.resources.learningMaterials.map((material, index) => (
           <div key={index} className="mt-4">
@@ -179,7 +179,7 @@ const AchieverJourneyPage = () => {
         </ul>
       </section>
 
-      <section className=" mx-auto mt-12 p-8">
+      <section className="mx-auto mt-12 p-8">
         <h2 className="text-2xl font-semibold text-[#00a6fb]">Inspiration & Guidance</h2>
         {achieverData.inspirationAndGuidance.roadmaps.map((roadmap, index) => (
           <div key={index} className="mt-8">