Pathway Page updated

src/Pages/Pathway/Pathway.jsx

@@ -1,21 +1,23 @@
 import React from 'react'
-import styles from "./Pathway.module.css"
-import Navbar from './components/menuBar/menubar'
-import Mainpage from './components/mainpage/mainpage'
-import Whatispathway from './components/what_is_pathway/what_is_pathway'
+import styles from './Pathway.module.css'
+import Navbar from './components/Navbar/menubar'
+import Mainpage from './components/HeroSection/mainpage'
+import Whatispathway from './components/About/About'
 import CourseOverview from './components/course Overview/CourseOverview'
 import Whoshouldattend from './components/WhoShouldAttend/WhoShouldAttend'
 import Contact from './components/contact/Contact'
 
 export default function Pathway() {
     return (
-        <div className={styles.pathway}>
+        <>
             <Navbar />
             <Mainpage />
-            <CourseOverview />
-            <Whoshouldattend />
-            <Whatispathway />
+            <div className={styles.pathway}>
+                <CourseOverview />
+                <Whoshouldattend />
+                <Whatispathway />
+            </div>
             <Contact />
-        </div>
+        </>
     )
 }

src/Pages/Pathway/Pathway.module.css

@@ -0,0 +1,10 @@
+.pathway {
+    padding: 0 4rem;
+    background-color: #F5F5F5;
+}
+
+@media(width<=820px) {
+    .pathway {
+        padding: 0 1rem;
+    }
+}

src/Pages/Pathway/components/what_is_pathway/what_is_pathway.jsx → src/Pages/Pathway/components/About/About.jsx

@@ -1,18 +1,17 @@
 import React from "react"
-import styles from './whatIsPathway.module.css'
-import img3 from "./assets/img3.webp";
+import styles from './About.module.css'
+import img3 from "../../assets/img3.webp";
 
-export default function what_is_pathway() {
+export default function About() {
     return (
-        <div>
+        <div id="about" className={styles.About}>
             <div class={styles.Overview_container_head}>
                 <hr />
                 <p>What is Pathway</p>
-                <hr />
             </div>
             <div class={styles.WhatIsPathway_main}>
                 <div class={styles.WhatIsPathway_img}>
-                    <img src={img3} />
+                    <img src={img3} alt="" />
                 </div>
                 <div class={styles.WhatIsPathway_desc}>
                     <p>

src/Pages/Pathway/components/what_is_pathway/whatIsPathway.module.css → src/Pages/Pathway/components/About/About.module.css

@@ -1,20 +1,30 @@
+.About{
+    padding: 1rem 0;
+}
+
 .Overview_container_head {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 3rem;
+    padding: 5rem;
     gap: 2rem;
+    position: relative;
 }
 
 .Overview_container_head hr {
-    width: 25%;
-    color: blue;
+    width: 100%;
+    background-color: #1C1CF0;
+    height: .25rem;
 }
 
 .Overview_container_head p {
+    position: absolute;
+    background-color: #F5F5F5;
+    padding: 0 1.5rem;
     color: #000;
     font-size: 3rem;
-    font-weight: 700;
+    font-weight: 900;
+    width: max-content;
 }
 
 .WhatIsPathway_main {
@@ -24,7 +34,6 @@
     padding-left: 3rem;
     padding-right: 8rem;
     margin: 3rem;
-
 }
 
 .WhatIsPathway_img img {
@@ -45,37 +54,3 @@
 .WhatIsPathway_desc span {
     font-weight: 800;
 }
-
-@media (width<1000px) {
-    .Overview_container_head p {
-        font-size: 1rem;
-    }
-
-    /* .Overview_container_head hr{
-        width: 7rem;
-    }*/
-    .Overview_container_head {
-        padding: 1rem;
-        gap: 1rem;
-
-    }
-
-    .WhatIsPathway_main {
-        font-size: .8rem;
-        gap: 2rem;
-        padding: 1.5rem;
-        margin: 0;
-        padding-left: 1rem;
-        padding-right: .6rem;
-        flex-direction: column;
-
-    }
-
-    .WhatIsPathway_desc {
-        width: 100%;
-    }
-
-    .WhatIsPathway_img {
-        margin-left: -2rem;
-    }
-}

src/Pages/Pathway/components/mainpage/mainpage.jsx → src/Pages/Pathway/components/HeroSection/mainpage.jsx

@@ -1,38 +1,36 @@
 import React from "react"
 import styles from "./mainpage.module.css"
-import img2 from "./assets/img2.webp";
-import pre from "./assets/pre.png";
+import img2 from "../../assets/img2.webp";
+import pre from "../../assets/pre.png";
 
 export default function mainpage() {
     return (
-        <div className={styles.mainpage}>
-            <section class={styles.First}>
-                <div class={styles.Container}>
+        <div id="heroSection" className={styles.mainpage}>
+            <section className={styles.First}>
+                <div className={styles.Container}>
                     <div className={styles.Container_image_one}>
                         <img src={img2} />
                     </div>
-                    <div class={styles.Container_desc}>
-                        <div class={styles.Container_head}>
+                    <div className={styles.Container_desc}>
+                        <div className={styles.Container_head}>
                             Breaking into <br />
                             <span className={styles.Head_two}>Artificial<br />Intelligence</span>
                         </div>
-                        <div class={styles.Container_img_two}>
+                        <div className={styles.Container_img_two}>
                             A µLearn x <span style={{ color: "#39D3F4", backgroundColor: "transparent" }}>Pathway</span> Initiative.
                         </div>
-                        <div class={styles.Container_button}>
-                            <button class={styles.Container_button_one}>
+                        <div className={styles.Container_button}>
+                            <button className={styles.Container_button_one}>
                                 <img src={pre} alt="" /> Pre apply
                             </button>
-                            <button class={styles.Container_button_two}>Explore Beta</button>
+                            <button className={styles.Container_button_two}>Explore Beta</button>
                         </div>
                     </div>
                 </div>
-                <div class={styles.Lower_desc}>
-                    <p class={styles.desc}>
-                        Join us on an exciting adventure into the world of <b>Artificial Intelligence (AI)</b> through our collaborative <br />
-                        initiative with Pathway. In this comprehensive course.
-                    </p>
-                </div>
+                <p className={styles.desc}>
+                    Join us on an exciting adventure into the world of <b>Artificial Intelligence (AI)</b> through our collaborative <br />
+                    initiative with Pathway. In this comprehensive course.
+                </p>
             </section>
             <p className={styles.Lower_red}>
                 Only <b> 20 individuals </b> will be selected for the <b> beta cohort,</b> while the remaining applicants will be placed on a waiting list.

src/Pages/Pathway/components/mainpage/mainpage.module.css → src/Pages/Pathway/components/HeroSection/mainpage.module.css

@@ -15,6 +15,7 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    gap: 1rem;
 }
 
 .Container {
@@ -23,6 +24,7 @@
     align-items: center;
     flex-direction: row;
     padding: 0 4rem;
+    gap: 1rem;
 }
 
 .Container_image_one {
@@ -102,11 +104,8 @@
     gap: 2rem;
 }
 
-.Lower_desc {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+.desc {
+    width: 100%;
     text-align: center;
     font-size: 1.2rem;
 }
@@ -126,4 +125,31 @@
 .Lower_red b {
     background-color: #DC280B;
     padding: 0 .3rem;
+}
+
+@media(width<=820px) {
+    .Container {
+        flex-direction: column;
+    }
+
+    .Container_image_one {
+        width: 100%;
+    }
+
+    .Container_desc {
+        width: 100%;
+    }
+
+    .Container_head {
+        font-size: 4rem;
+        line-height: 4rem;
+    }
+
+    .desc {
+        font-size: 1rem;
+    }
+
+    .Lower_red {
+        font-size: .8rem;
+    }
 }

src/Pages/Pathway/components/Navbar/menubar.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styles from './menubar.module.css';
+import img4 from "../../assets/logo.webp";
+import pre from '../../assets/pre.png';
+
+export default function Menubar() {
+    const navbar = React.useRef(null)
+
+    React.useEffect(() => {
+        var prevScrollpos = window.pageYOffset;
+        window.onscroll = function () {
+            var currentScrollPos = window.pageYOffset;
+            if (prevScrollpos > currentScrollPos) {
+                navbar.current.style.top = "0";
+            } else {
+                navbar.current.style.top = "-150px";
+            }
+            prevScrollpos = currentScrollPos;
+        }
+    }, [])
+
+    return (
+        <div ref={navbar} className={styles.menu_bar}>
+            <div className={styles.logo}>
+                <a href=""><img src={img4} alt="Logo" /></a>
+            </div>
+            <div className={styles.menu}>
+                <a href="#heroSection">Home</a>
+                <a href="#Course">Course Overview</a>
+                <a href="#who">Who Should Attend?</a>
+                <a href="#about">About Pathway</a>
+            </div>
+            <div className={styles.pre_rg}>
+                <a href="">
+                    <img src={pre} alt="Pre-register" />
+                    Pre-register
+                </a>
+            </div>
+        </div>
+    );
+}

src/Pages/Pathway/components/menuBar/menubar.module.css → src/Pages/Pathway/components/Navbar/menubar.module.css

@@ -3,12 +3,13 @@
     top: 0;
     display: flex;
     width: 100%;
-    padding: 2rem 0;
-    justify-content: space-around;
+    padding: 2rem;
+    justify-content: space-between;
     align-items: center;
     background-color: #fff;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, .25);
     z-index: 1;
+    transition: all .5s ease-in-out;
 }
 
 .menu_bar a {
@@ -43,4 +44,23 @@
 
 .pre_rg a img {
     background-color: #DC280B;
+}
+
+@media(width<=820px) {
+    .menu_bar {
+        padding: 1rem;
+    }
+
+    .logo img {
+        height: 1rem;
+    }
+
+    .menu {
+        display: none;
+    }
+
+    .pre_rg a {
+        border-radius: .4rem;
+        padding: .5rem 1rem;
+    }
 }