Merge pull request #873 from CyB3RTYp3/old-dev

feat(EnablersPage):page created

src/App.js

@@ -50,6 +50,7 @@ import Level1 from "./Pages/CapTF/Level1";
 import Spiderman from "./Pages/CapTF/Spiderman";
 import Submission from "./Pages/CapTF/Submission";
 import Pathway from "./Pages/Pathway/Pathway";
+import EnablersPage from "./Pages/EnablersPage/EnablersPage";
 function App() {
   const [redirects, setRedirects] = useState([]);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -145,6 +146,7 @@ function App() {
             <Route path="/yipredirect" element={<YipForm />} />
             <Route path="/journey" element={<Journey />} />
             <Route path="/pathway" element={<Pathway />} />
+            <Route path="/EnablersPage" element={<EnablersPage />} />
           </Route>
 
           <Route path="/level1" element={<Level1 />} />

src/Pages/EnablersPage/EnablersPage.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import styles from './EnablersPage.module.css'
+import EnablersHero from './components/HeroSection/EnablersHero'
+import WhoIsEnabler from './components/WhoISEnabler/WhoIsEnabler'
+import BenefitsEnabler from './components/BenefitsEnabler/BenefitsEnabler'
+import ProgramsProject from './components/ProgramsProject/ProgramsProject'
+import Onboarding from './components/Onboarding/Onboarding'
+import Footer from './components/Footer/Footer'
+import Navbar from './components/Navbar/Navbar'
+
+export default function EnablersPage() {
+  return (
+    <>
+
+    <div className={styles.EnablersPage}>
+      <Navbar/>
+      <EnablersHero/>
+    </div>
+
+    <WhoIsEnabler/>
+    <BenefitsEnabler/>
+    <ProgramsProject/>
+    <Onboarding/>
+    <Footer/>
+    </>
+  )
+}

src/Pages/EnablersPage/EnablersPage.module.css

@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+}
+::-webkit-scrollbar{
+   display: none;
+}
+
+.EnablersPage{
+    width: 100%;
+    height: 90vh;
+    border-radius: 0 0 50px 50px;
+    background: #ECE3FF;
+    margin-bottom: 4rem;
+    background-image: url('./assests/wire.png');
+    background-repeat: no-repeat;
+    background-position: 0 -1100px;
+}

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

@@ -0,0 +1,75 @@
+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 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 className={styles.BenefitsEnablerBenefits}>
+                <img className={styles.BenefitsEnablerBenefitsImage} src={Benefits1} alt="" />
+                 <div>
+                    <h1>Industry Immersion Programs</h1>
+                    <div>
+                       <img src={BenefitsIcon1} alt="" />
+                      <p>Offering Enablers short-term industry internships to stay connected with current practices and emerging technologies.</p>
+                    </div>
+                    <div>
+                    <img src={BenefitsIcon2} alt="" />
+                    <p>TA’s and presenters can be moved to the front of the class.</p>
+                    </div>
+                 </div>
+            </div>
+
+            <div className={styles.BenefitsEnablerBenefits}>
+                 <div>
+                    <h1>Up-Skill Programs</h1>
+                    <div>
+                       <img src={BenefitsIcon1} alt="" />
+                      <p>Providing a platform for enablers to gain insights from industry mentors.</p>
+                    </div>
+                    <div>
+                    <img src={BenefitsIcon2} alt="" />
+                    <p>Enablers can enhance their skills and stay updated with emerging technologies.</p>
+                    </div>
+                    <div>
+                    <img src={BenefitsIcon3} alt="" />
+                    <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="" />
+            </div>
+
+            <div className={styles.BenefitsEnablerBenefits}>
+                <img className={styles.BenefitsEnablerBenefitsImage} src={Benefits3} alt="" />
+                 <div>
+                    <h1>Meet-ups</h1>
+                    <div>
+                       <img src={BenefitsIcon3} alt="" />
+                      <p>Enabler meet-ups with industry and peers offer statewide networking, benefiting both their network and their institution's reputation.</p>
+                    </div>
+
+                    <div>
+                    <img src={BenefitsIcon1} alt="" />
+                    <p>Monthly District Meetups: Virtual/Offline event to check the status of involvement in colleges.</p>
+                   </div>
+
+                   <div>
+                    <img src={BenefitsIcon2} alt="" />
+                    <p>Zonal Meetups: Offline event organized with the help of our three zonal heads once in 3 months.</p>
+                   </div>
+
+                 </div>
+            </div>
+
+
+    </div>
+  )
+}

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

@@ -0,0 +1,57 @@
+
+.BenefitsEnabler{
+    width: 100%;
+    display: grid;
+    place-items: center;
+    gap: 1.5rem;
+}
+
+
+.BenefitsEnabler h1{
+    color: #9765FF;
+    font-family: Inter;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 62.4px;
+    letter-spacing: -2.88px;
+}
+
+.BenefitsEnabler .BenefitsEnablerHeading{
+    background-image: url('../../assests/Underline.png');
+    background-repeat: no-repeat;
+    background-position: -10px 52px;
+    background-size: 200px;
+}
+
+.BenefitsEnabler h1 span{
+    color: #FF7D40;
+    text-align: center;
+}
+
+.BenefitsEnablerBenefits{
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+.BenefitsEnablerBenefits h1{
+    margin-bottom: 1rem;
+    color: #383838;
+}
+.BenefitsEnablerBenefits div div{
+    display: flex; 
+    align-items:center; 
+    gap: 32px;
+}
+
+.BenefitsEnablerBenefits div div p{
+    width: 435px;
+    color: #696984;
+    font-family: Raleway;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 180%;
+    letter-spacing: 0.36px;
+    margin-bottom: 1rem;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './Footer.module.css'
+
+export default function Footer() {
+  return (
+    <div className={styles.Footer}>
+       <div>
+        <p>Contact Us for your queries: [email protected]</p>
+       </div>
+       <p>Copyright © 2023. All Rights Reserved. µLearn Foundation</p>
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+.Footer{
+    width: 100%;
+    height: 129px;
+    background: #9765FF;
+    display: grid;
+    place-items: center;
+    padding-bottom: 100px;
+    margin-top: 3rem;
+}
+
+.Footer div{
+    width: 1060px;
+    height: 88px;
+    background: #FF7D40;
+    display: grid;
+    place-content: center;
+    position: relative;
+    top: -40px;
+}
+
+.Footer div p{
+    color: #FFF;
+    font-family: Raleway;
+    font-size: 22.392px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 36.077px;
+}
+
+.Footer p{
+    color: #EBD7FF;
+    text-align: center;
+    font-family: Plus Jakarta Sans;
+    font-size: 14.023px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16.519px;
+}

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

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

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

@@ -0,0 +1,25 @@
+.EnablersHero{
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+.EnablersHero  div{
+    margin-left: 4rem;
+}
+
+.EnablersHero  div p{
+    color: #9765FF;
+    font-family: inherit;
+    font-size: 64px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 75px;
+    padding-bottom: 2rem;
+}
+.EnablersHero  div button{
+    border-radius: 10px;
+    background: #FF7D40;
+    padding: 20px 30px;
+    color: #fff;
+}