Merge pull request #874 from CyB3RTYp3/old-dev

fix(EnablersPage):image changed from png to webp and Camelcasing implemented

src/Pages/EnablersPage/EnablersPage.module.css

@@ -14,7 +14,7 @@
     border-radius: 0 0 50px 50px;
     background: #ECE3FF;
     margin-bottom: 4rem;
-    background-image: url('./assests/wire.png');
+    background-image: url('./assests/wire.webp');
     background-repeat: no-repeat;
     background-position: 0 -1100px;
 }

src/Pages/EnablersPage/components/BenefitsEnabler/BenefitsEnabler.jsx

@@ -1,20 +1,20 @@
 import React from 'react'
 import styles from './BenfitsEnabler.module.css'
-import Benefits1 from '../../assests/Benefits1.png'
-import Benefits2 from '../../assests/Benefits2.png'
-import Benefits3 from '../../assests/Benefits3.png'
+import Benefits1 from '../../assests/Benefits1.webp'
+import Benefits2 from '../../assests/Benefits2.webp'
+import Benefits3 from '../../assests/Benefits3.webp'
 import BenefitsIcon1 from '../../assests/BenefitsIcon1.svg'
 import BenefitsIcon2 from '../../assests/BenefitsIcon2.svg'
 import BenefitsIcon3 from '../../assests/BenefitsIcon3.svg'
 
 
 export default function BenefitsEnabler() {
   return (
-    <div id='Benefits' className={styles.BenefitsEnabler}>
-        <h1 className={styles.BenefitsEnablerHeading}><span>Benefits</span> to the Enabler</h1>
+    <div id='Benefits' className={styles.benefitsEnabler}>
+        <h1 className={styles.benefitsEnablerHeading}><span>Benefits</span> to the Enabler</h1>
 
-            <div className={styles.BenefitsEnablerBenefits}>
-                <img className={styles.BenefitsEnablerBenefitsImage} src={Benefits1} alt="" />
+            <div className={styles.benefitsEnablerBenefits}>
+                <img className={styles.benefitsEnablerBenefitsImage} src={Benefits1} alt="" />
                  <div>
                     <h1>Industry Immersion Programs</h1>
                     <div>
@@ -28,7 +28,7 @@ export default function BenefitsEnabler() {
                  </div>
             </div>
 
-            <div className={styles.BenefitsEnablerBenefits}>
+            <div className={styles.benefitsEnablerBenefits}>
                  <div>
                     <h1>Up-Skill Programs</h1>
                     <div>
@@ -44,11 +44,11 @@ export default function BenefitsEnabler() {
                     <p>Workshops focused on technology, no-code solutions, Git, GitHub, and participation in open-source programs to enhance enablers' knowledge.</p>
                     </div>
                  </div>
-                 <img className={styles.BenefitsEnablerBenefitsImage} src={Benefits2} alt="" />
+                 <img className={styles.benefitsEnablerBenefitsImage} src={Benefits2} alt="" />
             </div>
 
-            <div className={styles.BenefitsEnablerBenefits}>
-                <img className={styles.BenefitsEnablerBenefitsImage} src={Benefits3} alt="" />
+            <div className={styles.benefitsEnablerBenefits}>
+                <img className={styles.benefitsEnablerBenefitsImage} src={Benefits3} alt="" />
                  <div>
                     <h1>Meet-ups</h1>
                     <div>

src/Pages/EnablersPage/components/BenefitsEnabler/BenfitsEnabler.module.css

@@ -1,13 +1,13 @@
 
-.BenefitsEnabler{
+.benefitsEnabler{
     width: 100%;
     display: grid;
     place-items: center;
     gap: 1.5rem;
 }
 
 
-.BenefitsEnabler h1{
+.benefitsEnabler h1{
     color: #9765FF;
     font-family: Inter;
     font-size: 48px;
@@ -17,34 +17,34 @@
     letter-spacing: -2.88px;
 }
 
-.BenefitsEnabler .BenefitsEnablerHeading{
-    background-image: url('../../assests/Underline.png');
+.benefitsEnabler .benefitsEnablerHeading{
+    background-image: url('../../assests/Underline.webp');
     background-repeat: no-repeat;
     background-position: -10px 52px;
     background-size: 200px;
 }
 
-.BenefitsEnabler h1 span{
+.benefitsEnabler h1 span{
     color: #FF7D40;
     text-align: center;
 }
 
-.BenefitsEnablerBenefits{
+.benefitsEnablerBenefits{
     display: flex;
     align-items: center;
     gap: 2rem;
 }
-.BenefitsEnablerBenefits h1{
+.benefitsEnablerBenefits h1{
     margin-bottom: 1rem;
     color: #383838;
 }
-.BenefitsEnablerBenefits div div{
+.benefitsEnablerBenefits div div{
     display: flex; 
     align-items:center; 
     gap: 32px;
 }
 
-.BenefitsEnablerBenefits div div p{
+.benefitsEnablerBenefits div div p{
     width: 435px;
     color: #696984;
     font-family: Raleway;

src/Pages/EnablersPage/components/Footer/Footer.jsx

@@ -3,7 +3,7 @@ import styles from './Footer.module.css'
 
 export default function Footer() {
   return (
-    <div className={styles.Footer}>
+    <div className={styles.footer}>
        <div>
         <p>Contact Us for your queries: [email protected]</p>
        </div>

src/Pages/EnablersPage/components/Footer/Footer.module.css

@@ -1,4 +1,4 @@
-.Footer{
+.footer{
     width: 100%;
     height: 129px;
     background: #9765FF;
@@ -8,7 +8,7 @@
     margin-top: 3rem;
 }
 
-.Footer div{
+.footer div{
     width: 1060px;
     height: 88px;
     background: #FF7D40;
@@ -18,7 +18,7 @@
     top: -40px;
 }
 
-.Footer div p{
+.footer div p{
     color: #FFF;
     font-family: Raleway;
     font-size: 22.392px;
@@ -27,7 +27,7 @@
     line-height: 36.077px;
 }
 
-.Footer p{
+.footer p{
     color: #EBD7FF;
     text-align: center;
     font-family: Plus Jakarta Sans;

src/Pages/EnablersPage/components/HeroSection/EnablersHero.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import styles from './EnablersHero.module.css'
-import hero from '../../assests/Hero.png'
+import hero from '../../assests/Hero.webp'
 
 export default function EnablersHero() {
   return (
-    <div className={styles.EnablersHero}>      
+    <div className={styles.enablersHero}>      
           <div>
-            <p>Polish your skills through <br />‘µLearn’ to make <br /> students industry ready!</p>
+            <p>Polish your <span>skills</span> through <br /> <span>‘µLearn’</span> to make <br /> students <span>industry ready</span> !</p>
             <button>EXPLORE MULEARN FOR ENABLERS</button>
           </div> 
           <img src={hero} alt="" />          

src/Pages/EnablersPage/components/HeroSection/EnablersHero.module.css

@@ -1,14 +1,14 @@
-.EnablersHero{
+.enablersHero{
     height: 100vh;
     width: 100%;
     display: flex;
     align-items: center;
 }
-.EnablersHero  div{
+.enablersHero  div{
     margin-left: 4rem;
 }
 
-.EnablersHero  div p{
+.enablersHero  div p{
     color: #9765FF;
     font-family: inherit;
     font-size: 64px;
@@ -17,7 +17,11 @@
     line-height: 75px;
     padding-bottom: 2rem;
 }
-.EnablersHero  div button{
+.enablersHero  div p span{
+    background: url("../../assests/Dash.webp") no-repeat;
+    background-position: 0 50px;
+}
+.enablersHero  div button{
     border-radius: 10px;
     background: #FF7D40;
     padding: 20px 30px;

src/Pages/EnablersPage/components/Navbar/Navbar.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './Navbar.module.css'
-import EnablerLogo from '../../assests/EnablerLogo.png'
+import EnablerLogo from '../../assests/EnablerLogo.webp'
 
 export default function Navbar() {
     const navbar = React.useRef(null)
@@ -24,7 +24,7 @@ export default function Navbar() {
 
     }, [])
   return (
-    <div ref={navbar} className={styles.menu_bar}>
+    <div ref={navbar} className={styles.menuBar}>
     <div className={styles.logo}>
         <a href=""><img src={EnablerLogo} alt="Logo" /></a>
     </div>

src/Pages/EnablersPage/components/Navbar/Navbar.module.css

@@ -1,4 +1,4 @@
-.menu_bar{
+.menuBar{
     position: fixed;
     top: 0;
     display: flex;
@@ -10,13 +10,13 @@
     z-index: 1;
 }
 
-.menu_bar .menu{
+.menuBar .menu{
     display: flex;
     align-items: center;
     gap: 2.5rem;
 }
 
-.menu_bar .menu a{
+.menuBar .menu a{
     color: #252641;
     font-family: Raleway;
     font-size: 18px;
@@ -26,11 +26,11 @@
     letter-spacing: 0.36px;
 }
 
-.menu_bar .menu a:hover{
+.menuBar .menu a:hover{
     color: #FF7D40;
 }
 
-.menu_bar button{
+.menuBar button{
    padding: 15px 40px;
    background: #9765FF;
    border-radius: 10px;

src/Pages/EnablersPage/components/Onboarding/Onboarding.jsx

@@ -1,23 +1,23 @@
 import React from 'react'
 import styles from './Onboarding.module.css'
-import Mu from '../../assests/Mu.png'
-import Discord from '../../assests/Discord.png'
-import Bulb from '../../assests/Bulb.png'
+import Mu from '../../assests/Mu.webp'
+import Discord from '../../assests/Discord.webp'
+import Bulb from '../../assests/Bulb.webp'
 export default function Onboarding() {
   return (
-    <div id="Onboarding" className={styles.Onboarding}>
-       <h1><span className={styles.OnboardingHeading}>Onboarding </span>Process</h1>
-        <div className={styles.OnboardingList}>
+    <div id="Onboarding" className={styles.onboarding}>
+       <h1><span className={styles.onboardingHeading}>Onboarding </span>Process</h1>
+        <div className={styles.onboardingList}>
             <h1><span>1</span><img src={Mu} alt="" />Create µLearn Profile</h1>
             <p>Enablers should create a profile via app.mulearn.org, and they should ensure to register as a faculty member by choosing the option “I’m teaching in an Institute”. Once you get a profile, go to “Connect Discord” and join our Discord server.</p>
         </div>
 
-        <div className={styles.OnboardingList}>
+        <div className={styles.onboardingList}>
             <h1><span>2</span><img src={Discord} alt="" />Welcome to Discord</h1>
             <p>Once you join the server, our bot, Aaronchetan will send you a DM asking you to connect your µ-ID, which is provided in the µlearn profile. Once it’s connected, you can start your onboarding process.</p>
         </div>
 
-        <div className={styles.OnboardingList}>
+        <div className={styles.onboardingList}>
             <h1><span>3</span><img src={Bulb} alt="" />Add Interest Groups</h1>
             <p>Now you will have access to the #lvl1-info channel, and as you do the tasks, you will progress through the levels. Once you reach level 4, you will have the option to edit Interest Groups on your µlearn profile page.</p>
         </div>

src/Pages/EnablersPage/components/Onboarding/Onboarding.module.css

@@ -1,15 +1,15 @@
-.Onboarding,
-.OnboardingList{
+.onboarding,
+.onboardingList{
     margin: 2rem 0;
     width: 100%;
     display: grid;
     place-items: center;
 }
-.Onboarding{
+.onboarding{
     margin: 2rem;
 }
 
-.Onboarding h1{
+.onboarding h1{
     color: #9765FF;
     font-family: Inter;
     font-size: 48px;
@@ -19,28 +19,28 @@
     letter-spacing: -2.88px;
 }
 
-.Onboarding h1 .OnboardingHeading{
+.onboarding h1 .onboardingHeading{
     color: #FF7D40;
-    background-image: url('../../assests/Underline.png');
+    background-image: url('../../assests/Underline.webp');
     background-repeat: no-repeat;
     background-position:0px 48px;
 }
-.Onboarding .OnboardingList h1{
+.onboarding .onboardingList h1{
     display: flex;
     gap:1rem;
     font-size: 30px;
     letter-spacing: normal;
     align-items: center;
 }
-.Onboarding .OnboardingList h1 span{
+.onboarding .onboardingList h1 span{
     color: rgba(0, 0, 0, 0.10);
     font-family: Raleway;
     text-align: center;
     font-size: 120px;
     font-weight: 800;
     line-height: normal;
 }
-.Onboarding .OnboardingList p{
+.onboarding .onboardingList p{
     width: 1022px;
     color: var(--gray, #696984);
     text-align: center;