[FIX]: Improved Accessibility to 100%

src/assets/data/FooterContent.js

@@ -11,22 +11,27 @@ const footerContent = {
     {
       icon: github_logo,
       link: "https://github.com/hack4bengal",
+      name:"github_logo"
     },
     {
       icon: instagram_logo,
       link: "https://www.instagram.com/hack4bengal",
+      name:"instagram_logo"
     },
     {
       icon: twitter_logo,
       link: "https://twitter.com/hack4bengal",
+      name:"twitter_logo"
     },
     {
       icon: facebook_logo,
       link: "https://www.facebook.com/Hack4Bengal",
+      name:"facebook_logo"
     },
     {
       icon: linkedin_logo,
       link: "https://www.linkedin.com/company/hack4bengal",
+      name:"linkedin_logo"
     },
   ],
   links: [

src/components/private/about/About.jsx

@@ -21,11 +21,11 @@ const About = () => {
 
         <div className="about__content">
           <div className="about__desc">
-            <p>
+            <p className="light">
               Hack4Bengal empowers all fields to showcase creativity in solving
               real-life problems for a brighter future.
             </p>
-            <p>
+            <p >
               Join us for the reinvigorated Hack4Bengal! From three enthusiasts
               in 2021 to a thriving community of over 3000 developers, our
               mission is to empower tech talents. This time, we're taking it
@@ -41,8 +41,8 @@ const About = () => {
                 speed={50}
                 direction="right"
               >
-                <img src={two} alt="two" className="mq_img" />
-                <img src={three} alt="three" className="mq_img" />
+                <img src={two} alt="a large group of people sitting in a room" className="mq_img" />
+                <img src={three} alt="a group of people standing on a stage" className="mq_img" />
               </Marquee>
 
               <Marquee
@@ -52,9 +52,9 @@ const About = () => {
                 speed={50}
                 direction="left"
               >
-                <img src={four} alt="four" className="mq_img" />
-                <img src={five} alt="five" className="mq_img" />
-                <img src={six} alt="six" className="mq_img" />
+                <img src={four} alt="a group of people posing for a photo" className="mq_img" />
+                <img src={five} alt="a group of people standing on a stage" className="mq_img" />
+                <img src={six} alt="a group of people standing in a room" className="mq_img" />
               </Marquee>
             </div>
 
@@ -99,8 +99,8 @@ const About = () => {
               speed={50}
               direction="right"
             >
-              <img src={two} alt="two" className="mq_img" />
-              <img src={three} alt="three" className="mq_img" />
+              <img src={two} alt="a large group of people sitting in a room" className="mq_img" />
+              <img src={three} alt="a group of people standing on a stage" className="mq_img" />
             </Marquee>
 
             <Marquee
@@ -110,9 +110,9 @@ const About = () => {
               speed={50}
               direction="left"
             >
-              <img src={four} alt="four" className="mq_img" />
-              <img src={seven} alt="four" className="mq_img" />
-              <img src={eight} alt="four" className="mq_img" />
+              <img src={four} alt="a group of people posing for a photo" className="mq_img" />
+              <img src={seven} alt="a group of people sitting in a room with computers" className="mq_img" />
+              <img src={eight} alt="a sign on a building" className="mq_img" />
             </Marquee>
           </div>
         </div>

src/components/private/about/About.scss

@@ -21,12 +21,12 @@
     h1 {
       font-weight: 900;
       font-size: 120px;
-      color: rgba(255, 255, 255, 0.06);
+      color: rgba(112, 112, 112);
       position: absolute;
       transform: translate(-50%, -50%);
       left: 259px;
       top: 16px;
-      z-index: 2;
+      z-index: -2;
 
       @media screen and (max-width: 576px) {
         font-size: 73px;
@@ -47,6 +47,13 @@
     }
   }
 
+
+
+  .light{
+    color: rgba(240, 0, 0);
+  }
+
+
   .about__content {
     display: flex;
     align-items: start;
@@ -64,17 +71,20 @@
         p {
           font-size: 1rem;
         }
+
+        .light{
+          color: #FF6161;
+        }
+
       }
 
       p {
         font-size: 1.1rem;
         font-weight: 500;
         font-family: var(--body-font);
 
-        &:nth-of-type(1) {
-          color: var(--h4bred);
-          margin-bottom: 1rem;
-        }
+
+
       }
 
       h2 {
@@ -119,7 +129,7 @@
             font-size: 34px;
             font-weight: 700;
             font-family: var(--heading-font);
-            color: var(--h4bred);
+            color: rgba(240, 0, 0);
           }
 
           span {

src/components/private/faq/FAQ.jsx

@@ -5,7 +5,7 @@ import "./FAQ.scss";
 
 const Faq = () => {
   return (
-    <div className="faq" id="faq">
+    <div className="faq" id="faq"> 
       <div className="faq__content">
         <Header {...HeaderData.faq} />
 
@@ -73,10 +73,11 @@ const Faq = () => {
                   href="https://discord.com/invite/hack4bengal-2-0-920970750154899476"
                   target="_blank"
                   rel="noopener noreferrer"
+
                 >
-                  https://discord.com/invite/hack4bengal-2-0-920970750154899476
+                  in #🎫ticket-support
                 </a>
-                ) in #🎫ticket-support or email us at [email protected]!
+                ) or email us at <a href="mailto:[email protected]">[email protected]</a>!
               </p>
             </div>
           </div>

src/components/private/faq/FAQ.scss

@@ -91,7 +91,7 @@
           }
 
           p {
-            color: #646464;
+            color: #969696;
             font-family: var(--heading-font);
             font-size: 0.93563rem;
             font-style: normal;
@@ -147,7 +147,7 @@
           }
 
           p {
-            color: #646464;
+            color: #969696;
             font-family: var(--heading-font);
             font-size: 0.93563rem;
             font-style: normal;
@@ -239,7 +239,7 @@
               }
 
               p {
-                color: #646464;
+                color: #969696;
                 font-family: var(--heading-font);
                 font-size: 0.93563rem;
                 font-style: normal;
@@ -296,7 +296,7 @@
               }
 
               p {
-                color: #646464;
+                color: #969696;
                 font-family: var(--heading-font);
                 font-size: 0.93563rem;
                 font-style: normal;
@@ -354,7 +354,7 @@
             }
 
             p {
-              color: #646464;
+              color: #969696;
               font-family: var(--heading-font);
               font-size: 0.93563rem;
               font-style: normal;
@@ -452,7 +452,7 @@
           }
 
           p {
-            color: #646464;
+            color: #969696;
             font-family: var(--heading-font);
             font-size: 0.93563rem;
             font-style: normal;
@@ -464,7 +464,7 @@
             }
 
             a {
-              color: #646464;
+              color: #969696;
               font-family: var(--heading-font);
               font-size: 0.93563rem;
               font-style: normal;

src/components/private/landing/Landing.jsx

@@ -50,7 +50,7 @@ const Landing = () => {
 
         <img
           src={victoria}
-          alt=""
+          alt="a building with a dome and a statue on top"
           className="home__victoria"
           fetchpriority="high"
         />

src/components/private/mentors/singleMentors/SingleMentors.jsx

@@ -19,7 +19,8 @@ const SingleMentors = ({ mentor }) => {
           <hr />
           <div className="mentor__social_wrapper">
             <a href={mentor?.twitter} target="_blank" rel="noopener noreferrer">
-              <svg
+
+              <svg aria-label="Twitter"
                 stroke="currentColor"
                 fill="currentColor"
                 stroke-width="0"
@@ -37,7 +38,7 @@ const SingleMentors = ({ mentor }) => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <svg
+              <svg aria-label="LinkedIn"
                 stroke="currentColor"
                 fill="currentColor"
                 stroke-width="0"

src/components/private/sponsors/singlesponsors/SingleSponsors.jsx

@@ -5,7 +5,7 @@ const SingleSponsors = ({ sponsor }) => {
   return (
     <>
       <div className="single__sponsor">
-        <img src={sponsor?.img} alt={sponsor?.img} loading="lazy" />
+        <img src={sponsor?.img} alt={sponsor?.name} loading="lazy" />
       </div>
     </>
   );

src/components/private/testimonials/Testimonials.jsx

@@ -18,7 +18,7 @@ const Testimonials = () => {
       >
         {testimonials?.slice(0, 3).map((item, index) => {
           return (
-            <div className="testimonials__card" key={index}>
+            <div className="testimonials__card" key={index}> 
               <p className="testimonials__text">{item?.testimonial}</p>
 
               <div className="testimonials__card_footer">

src/components/private/testimonials/Testimonials.scss

@@ -50,10 +50,11 @@
             font-size: 1.2rem;
             font-weight: 700;
             line-height: 1;
-            color: var(--h4bred);
+            color: #FF1F1F;
 
             @media screen and (max-width: 576px) {
               font-size: 1rem;
+              color: #FF6161;
             }
           }
 

src/components/shared/comingsoon/ComingSoon.scss

@@ -5,7 +5,7 @@
   margin-top: 8rem;
 
   @media screen and (max-width: 576px) {
-    margin-top: 4rem;
+    margin-top: 4rem; 
   }
 
   h1 {
@@ -15,7 +15,7 @@
     text-align: center;
     letter-spacing: 0em;
     font-family: var(--heading-font);
-    color: var(--h4bred);
+    color: #F00000;
 
     @media screen and (max-width: 576px) {
       font-size: 1.5rem;

src/components/shared/footer/Footer.jsx

@@ -9,7 +9,7 @@ const Footer = () => {
     <footer className="footer">
       <div className="footer__content">
         <div className="footer__content__top">
-          <div className="footer__content__top__socials">
+          <div className="footer__content__top__socials"> 
             {footerContent.socials.map((social, index) => (
               <a
                 key={index}
@@ -18,11 +18,11 @@ const Footer = () => {
                 rel="noopener noreferrer"
                 className="disable-select"
               >
-                <img src={social?.icon} alt={social?.name} />
+                <img src={social?.icon} alt={social?.name}  />
               </a>
             ))}
           </div>
-          <img src={h4b} alt="logo" />
+          <img src={h4b} alt="A black and white logo representing Hack4Bengal" />
         </div>
         <div className="footer__content__bottom">
           <div className="footer__content__bottom__links">
@@ -44,8 +44,9 @@ const Footer = () => {
               rel="noopener noreferrer"
               className="footer__content__bottom__mail"
             >
-              {footerContent.mail.address}
+            Email us: {footerContent.mail.address}
             </a>
+
           </div>
 
           <div
@@ -92,6 +93,11 @@ const Footer = () => {
       </div>
       <span className="footer__bg_overlay" />
       <div className="footer__bg">
+        <img
+          className="footer_image"
+          src="https://www.hack4bengal.tech/assets/footer_bg-5b4bb7e1.svg"
+          alt="footer_bg"
+        />
         {/* <img className="footer_bg__img" src={footer_bg} alt="footer_bg" /> */}
         <span className="footer__bg__left" />
         <span className="footer__bg__right" />

src/components/shared/footer/Footer.scss

@@ -79,11 +79,11 @@
         }
 
         .footer__content__bottom__mailhead {
-          color: #737373;
+          color: #969696;
         }
 
         .footer__content__bottom__mail {
-          color: var(--h4bred);
+          color: #FF6161;
           text-transform: lowercase;
           transition: all 0.2s ease-in-out;
 

src/components/shared/header/Header.scss

@@ -10,12 +10,12 @@
 
   h1 {
     font-weight: 900;
-    color: rgba(255, 255, 255, 0.06);
+    color: rgba(112, 112, 112);
     position: absolute;
     transform: translate(-50%, -50%);
     left: 50%;
     top: 20%;
-    z-index: 2;
+    z-index: -2;
 
     &::after {
       content: "";