From d3b094546d9396da3a9d1fe2a3b3e58fc6bc4d5b Mon Sep 17 00:00:00 2001
From: Kabir <44284877+kabir0x23@users.noreply.github.com>
Date: Wed, 27 Jul 2022 20:55:23 +0530
Subject: [PATCH] feat: courses

---
 src/App.css                                   | 20 +++++++
 src/App.jsx                                   | 15 ++---
 src/components/Buttons/ButtonElements.jsx     | 44 ++++++++++++--
 src/components/Courses.jsx                    |  6 +-
 src/components/Homepage/Info/Data.jsx         | 11 ++--
 src/components/Homepage/Info/Info.jsx         | 28 +++++++--
 src/components/Homepage/Navbar/Navbar.jsx     | 12 +---
 .../{ => Resources}/Courses/Card/Card.css     | 11 ++--
 .../{ => Resources}/Courses/Card/Card.jsx     |  2 +-
 .../{ => Resources}/Courses/Courses.jsx       |  0
 .../Courses/Sidebar/Sidebar.jsx               |  0
 .../Courses/Sidebar/SidebarElements.jsx       |  0
 .../{ => Resources}/Courses/YouTubeVideos.jsx |  0
 .../Courses/YouTubeVideosElements.jsx         |  0
 .../Courses/YoutubeCourses.jsx                |  0
 .../CyberSecYouTubeVIdeosData.jsx             |  2 +-
 .../LinuxYouTubeVIdeosData.jsx                |  2 +-
 .../Resources/CyberNews/CyberNews.jsx         | 21 +++++++
 .../ResourcesNavbar}/NavbarElements.jsx       | 59 +++++++++++++++----
 .../ResourcesNavbar/ResourcesNavbar.jsx}      | 38 ++++++++----
 src/components/index.js                       |  4 +-
 src/pages/Homepage.jsx                        |  8 ++-
 src/pages/Resources.jsx                       | 20 +++++++
 23 files changed, 226 insertions(+), 77 deletions(-)
 rename src/components/{ => Resources}/Courses/Card/Card.css (91%)
 rename src/components/{ => Resources}/Courses/Card/Card.jsx (94%)
 rename src/components/{ => Resources}/Courses/Courses.jsx (100%)
 rename src/components/{ => Resources}/Courses/Sidebar/Sidebar.jsx (100%)
 rename src/components/{ => Resources}/Courses/Sidebar/SidebarElements.jsx (100%)
 rename src/components/{ => Resources}/Courses/YouTubeVideos.jsx (100%)
 rename src/components/{ => Resources}/Courses/YouTubeVideosElements.jsx (100%)
 rename src/components/{ => Resources}/Courses/YoutubeCourses.jsx (100%)
 rename src/components/{ => Resources}/Courses/YoutubeCoursesData/CyberSecYouTubeVIdeosData.jsx (96%)
 rename src/components/{ => Resources}/Courses/YoutubeCoursesData/LinuxYouTubeVIdeosData.jsx (96%)
 create mode 100644 src/components/Resources/CyberNews/CyberNews.jsx
 rename src/components/{Courses/YoutubeCoursesNavbar => Resources/ResourcesNavbar}/NavbarElements.jsx (65%)
 rename src/components/{Courses/YoutubeCoursesNavbar/YoutubeCoursesNavbar.jsx => Resources/ResourcesNavbar/ResourcesNavbar.jsx} (63%)
 create mode 100644 src/pages/Resources.jsx

diff --git a/src/App.css b/src/App.css
index 9dc260ef..3272076b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,3 +3,23 @@
   margin:0;
   padding:0;
 }
+
+body {background: #010606; height: auto;}
+html {
+  scrollbar-face-color: #646464;
+  scrollbar-base-color: #646464;
+  scrollbar-3dlight-color: #646464;
+  scrollbar-highlight-color: #646464;
+  scrollbar-track-color: #000;
+  scrollbar-arrow-color: #000;
+  scrollbar-shadow-color: #646464;
+  /*scrollbar-dark-shadow-color: #646464;*/
+}
+
+::-webkit-scrollbar { width: 8px; height: 3px;}
+::-webkit-scrollbar-button {  background-color: #666; }
+::-webkit-scrollbar-track {  background-color: #646464;}
+::-webkit-scrollbar-track-piece { background-color: #000;}
+::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
+::-webkit-scrollbar-corner { background-color: #646464;}
+::-webkit-resizer { background-color: #666;}
diff --git a/src/App.jsx b/src/App.jsx
index c4404101..f5547b90 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,26 +4,21 @@ import './App.css';
 import {Route, Routes} from "react-router-dom";
 
 import Homepage from './pages/Homepage';
-import {Footer, Navbar, Sidebar} from "./components";
+import {Footer} from "./components";
 import ScrollToTop from "./components/ScrollToTop";
-import {Navigate} from "react-router";
-import {YoutubeCourses} from './components'
+import Resources from "./pages/Resources";
 
 const App = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const toggle = () => setIsOpen(!isOpen);
     return (
-        <>
-            <Sidebar isOpen={isOpen} toggle={toggle}/>
-            <Navbar toggle={toggle}/>
+        <div>
             <ScrollToTop>
                 <Routes>
                     <Route exact path={"/"} element={<Homepage/>}/>
-                    <Route exact path={"/courses"} element={<YoutubeCourses/>}/>
+                    <Route exact path={"/resources"} element={<Resources/>}/>
                 </Routes>
             </ScrollToTop>
             <Footer/>
-        </>
+        </div>
     );
 };
 
diff --git a/src/components/Buttons/ButtonElements.jsx b/src/components/Buttons/ButtonElements.jsx
index 8935cce5..b7ef5731 100644
--- a/src/components/Buttons/ButtonElements.jsx
+++ b/src/components/Buttons/ButtonElements.jsx
@@ -40,25 +40,30 @@ export const Button = styled(ScrollLink)`
 `
 
 export const RouterButton = styled(RouterLink)`
-  border-radius: 10px;
+  text-decoration: none;
+  border-radius: 5px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #343434;
+  background: transparent;
   margin-right: 20px; //border-radius: 50px;
-  background: ${({primary}) => primary ? '#01BF71' : '#010606'};
   white-space: nowrap;
   padding: ${({big}) => (big ? '14px 48px' : '12px 30px')};
-  color: ${({dark}) => dark ? '#010606' : '#fff'};
+    //color: ${({dark}) => dark ? '#ffffff' : '#0e0e0e'};
   font-size: ${({fontBig}) => (fontBig ? '20px' : '16px')};
   outline: none;
-  border: none;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-in-out;
-  text-decoration: none;
+  color: #47cf73;
 
   &:hover {
     transition: all 0.2s ease-in-out;
-    background: ${({primary}) => primary ? '#fff' : '#01BF71'};
+    background: transparent;
+    border-color: #343434;
+    font-size: 18px;
   }
 `
 
@@ -80,6 +85,33 @@ export const ButtonLink = styled.a`
   transition: all 0.2s ease-in-out;
   text-decoration: none;
 
+  &:hover {
+    transition: all 0.2s ease-in-out;
+    background: transparent;
+    color: #47cf73;
+    border-color: #343434;
+    font-size: 18px;
+  }
+`
+
+export const ButtonRouterLink = styled(RouterLink)`
+  border-width: 1px;
+  border-style: solid;
+  border-color: #343434;
+  background: transparent;
+  margin-right: 20px;
+  white-space: nowrap;
+  padding: ${({big}) => (big ? '14px 48px' : '12px 30px')};
+  color: ${({dark}) => dark ? '#ffffff' : '#0e0e0e'};
+  font-size: ${({fontBig}) => (fontBig ? '20px' : '16px')};
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+
   &:hover {
     transition: all 0.2s ease-in-out;
     background: transparent;
diff --git a/src/components/Courses.jsx b/src/components/Courses.jsx
index 866c3cca..97910491 100644
--- a/src/components/Courses.jsx
+++ b/src/components/Courses.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import YoutubeCoursesNavbar from "./Courses/YoutubeCoursesNavbar/YoutubeCoursesNavbar";
-import YoutubeCourses from "./Courses/YoutubeCourses";
+import ResourcesNavbar from "./Resources/ResourcesNavbar/ResourcesNavbar";
+import YoutubeCourses from "./Resources/Courses/YoutubeCourses";
 
 const Courses = () => {
     return (
         <div>
-            {/*<YoutubeCoursesNavbar/>*/}
+            {/*<ResourcesNavbar/>*/}
             <YoutubeCourses/>
         </div>
     );
diff --git a/src/components/Homepage/Info/Data.jsx b/src/components/Homepage/Info/Data.jsx
index 6ef0c308..4c86bb98 100644
--- a/src/components/Homepage/Info/Data.jsx
+++ b/src/components/Homepage/Info/Data.jsx
@@ -1,8 +1,9 @@
 import contributeSvg from '../../../assets/images/open-source-contribution.svg';
 import VersionControlSvg from '../../../assets/images/Servies/undraw_version_control_re_mg66.svg';
 import communitySvg from '../../../assets/images/undraw_public_discussion_re_w9up.svg';
-import coursesSvg from '../../../assets/images/undraw_programming_re_kg9v.svg';
+import ResourcesSvg from '../../../assets/images/undraw_programming_re_kg9v.svg';
 import logo_thecyberworld from '../../../assets/LogoTrans_theCyberw0rld.png';
+
 import {FaGithub} from "react-icons/fa";
 import {IconsSpacing} from "../../Buttons/ButtonElements";
 import {IconsSpacing2} from "../../Buttons/ButtonElements";
@@ -43,8 +44,8 @@ export const aboutData = {
 export const ResourcesData = {
     id: 'resources',
     idTo: 'resources',
-    buttonType: 'link',
-    link: "/courses",
+    buttonType: 'router',
+    link: "/resources",
     lightBg: false,
     lightText: true,
     lightTextDesc: true,
@@ -57,8 +58,8 @@ export const ResourcesData = {
         </p>,
     buttonLabel: <> Explore <IconsSpacing2> <BsFillPlayFill/> </IconsSpacing2>  </>,
     imgStart: true,
-    img: coursesSvg,
-    alt: 'coursesSvg',
+    img: ResourcesSvg,
+    alt: 'ResourcesSvg',
     dark: true,
     primary: true,
     darkText: false,
diff --git a/src/components/Homepage/Info/Info.jsx b/src/components/Homepage/Info/Info.jsx
index aeb7301d..2e74d450 100644
--- a/src/components/Homepage/Info/Info.jsx
+++ b/src/components/Homepage/Info/Info.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, ButtonLink} from '../../Buttons/ButtonElements';
+import {Button, ButtonLink, RouterButton} from '../../Buttons/ButtonElements';
 import {
     InfoContainer,
     InfoWrapper,
@@ -15,6 +15,7 @@ import {
     Img,
     ScrollText
 } from "./InfoElements";
+import {Link} from "react-router-dom";
 
 const InfoSection = ({
                          id,
@@ -49,8 +50,21 @@ const InfoSection = ({
                                 <Heading lightText={lightText}> {headline} </Heading>
                                 <Subtitle darkText={darkText}> {description} </Subtitle>
                                 <BtnWrap>
-                                    {buttonType === 'scroll' ?
-                                        (
+                                    {buttonType === 'router' && (
+                                            // <Link to='/resources'>
+                                        <RouterButton
+                                            to='/resources'
+                                                primary={primary ? 'true' : ''}
+                                                dark={dark ? 1 : 0}
+                                                dark2={dark2 ? 1 : 0}
+                                        >
+                                                {buttonLabel}
+                                        </RouterButton>
+                                            // </Link>
+
+                                    )}
+
+                                    {buttonType === 'scroll' && (
                                             <Button
                                                 to={idTo}
                                                 smooth={true}
@@ -64,7 +78,9 @@ const InfoSection = ({
                                             >
                                                 {buttonLabel}
                                             </Button>
-                                        ) : (
+                                        ) }
+
+                                    {buttonType === 'link' && (
                                             <ButtonLink
                                                 href={link}
                                                 primary={primary ? 'true' : ''}
@@ -73,8 +89,8 @@ const InfoSection = ({
                                             >
                                                 {buttonLabel}
                                             </ButtonLink>
-                                        )
-                                    }
+                                        ) }
+
                                     <ScrollText
                                         to={"contribute"}
                                         smooth={true}
diff --git a/src/components/Homepage/Navbar/Navbar.jsx b/src/components/Homepage/Navbar/Navbar.jsx
index d0641767..b428c0b5 100644
--- a/src/components/Homepage/Navbar/Navbar.jsx
+++ b/src/components/Homepage/Navbar/Navbar.jsx
@@ -2,17 +2,7 @@ import React, {useEffect, useState} from 'react'
 import {IconContext} from 'react-icons/lib';
 import {animateScroll as scroll} from 'react-scroll';
 import {FaBars} from 'react-icons/fa';
-import {
-    Nav,
-    NavbarContainer,
-    NavLogo,
-    MobileIcon,
-    NavMenu,
-    NavItem,
-    NavLinks,
-    NavLinkRouter,
-    NavBtn,
-    NavBtnLink
+import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks, NavLinkRouter, NavBtn, NavBtnLink
 } from "./NavbarElements";
 import {Button} from "../../Buttons/ButtonElements";
 
diff --git a/src/components/Courses/Card/Card.css b/src/components/Resources/Courses/Card/Card.css
similarity index 91%
rename from src/components/Courses/Card/Card.css
rename to src/components/Resources/Courses/Card/Card.css
index 85eb7676..dcdb0b34 100644
--- a/src/components/Courses/Card/Card.css
+++ b/src/components/Resources/Courses/Card/Card.css
@@ -10,12 +10,13 @@
 
 .videoHeading{
     text-decoration:none;
-    color: inherit;
+    color: #e8e6e3;
+
 }
 
 .ChannelHeading{
     text-decoration:none;
-    color: inherit;
+    color: #e8e6e3;
 }
 
 .paddingTop{
@@ -61,9 +62,7 @@ img {
     overflow: hidden;
     box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
     border-radius: 1em;
-    background: #ECE9E6;
-    background: linear-gradient(to right, #FFFFFF, #ECE9E6);
-
+    background: #1a1c1d;
 }
 
 .card__body {
@@ -93,7 +92,7 @@ img {
 
 .tag-brown {
     background: #D1913C;
-    background: linear-gradient(to bottom, #29254f, #171e26);
+    background: linear-gradient(to right, #0e0e0e, #2a2a2a);
     color: #fafafa;
 }
 
diff --git a/src/components/Courses/Card/Card.jsx b/src/components/Resources/Courses/Card/Card.jsx
similarity index 94%
rename from src/components/Courses/Card/Card.jsx
rename to src/components/Resources/Courses/Card/Card.jsx
index c9d368f3..ea42621e 100644
--- a/src/components/Courses/Card/Card.jsx
+++ b/src/components/Resources/Courses/Card/Card.jsx
@@ -43,7 +43,7 @@ export const LinuxYoutubeVideosCard = LinuxCourses__Youtube.map(
                 </div>
                 <div className="card__body">
                     <span className="tag tag-brown">{data.tag}</span>
-                    <h3><a href={data.videoLink} target={"_blank"} className={"videoHeading"}>{data.videoHeading}</a></h3>
+                    <h3 className={"courseHeading"}><a href={data.videoLink} target={"_blank"} className={"videoHeading"}>{data.videoHeading}</a></h3>
                 </div>
 
                 <hr/>
diff --git a/src/components/Courses/Courses.jsx b/src/components/Resources/Courses/Courses.jsx
similarity index 100%
rename from src/components/Courses/Courses.jsx
rename to src/components/Resources/Courses/Courses.jsx
diff --git a/src/components/Courses/Sidebar/Sidebar.jsx b/src/components/Resources/Courses/Sidebar/Sidebar.jsx
similarity index 100%
rename from src/components/Courses/Sidebar/Sidebar.jsx
rename to src/components/Resources/Courses/Sidebar/Sidebar.jsx
diff --git a/src/components/Courses/Sidebar/SidebarElements.jsx b/src/components/Resources/Courses/Sidebar/SidebarElements.jsx
similarity index 100%
rename from src/components/Courses/Sidebar/SidebarElements.jsx
rename to src/components/Resources/Courses/Sidebar/SidebarElements.jsx
diff --git a/src/components/Courses/YouTubeVideos.jsx b/src/components/Resources/Courses/YouTubeVideos.jsx
similarity index 100%
rename from src/components/Courses/YouTubeVideos.jsx
rename to src/components/Resources/Courses/YouTubeVideos.jsx
diff --git a/src/components/Courses/YouTubeVideosElements.jsx b/src/components/Resources/Courses/YouTubeVideosElements.jsx
similarity index 100%
rename from src/components/Courses/YouTubeVideosElements.jsx
rename to src/components/Resources/Courses/YouTubeVideosElements.jsx
diff --git a/src/components/Courses/YoutubeCourses.jsx b/src/components/Resources/Courses/YoutubeCourses.jsx
similarity index 100%
rename from src/components/Courses/YoutubeCourses.jsx
rename to src/components/Resources/Courses/YoutubeCourses.jsx
diff --git a/src/components/Courses/YoutubeCoursesData/CyberSecYouTubeVIdeosData.jsx b/src/components/Resources/Courses/YoutubeCoursesData/CyberSecYouTubeVIdeosData.jsx
similarity index 96%
rename from src/components/Courses/YoutubeCoursesData/CyberSecYouTubeVIdeosData.jsx
rename to src/components/Resources/Courses/YoutubeCoursesData/CyberSecYouTubeVIdeosData.jsx
index e5a6b504..578d55eb 100644
--- a/src/components/Courses/YoutubeCoursesData/CyberSecYouTubeVIdeosData.jsx
+++ b/src/components/Resources/Courses/YoutubeCoursesData/CyberSecYouTubeVIdeosData.jsx
@@ -11,7 +11,7 @@ export const CyberSecFreeYoutubeVideosData = [
         channelName: "The Cyber Mentor",
         channelLogo: "https://yt3.ggpht.com/ytc/AKedOLRGnc0be-YXi3zenYi6s8uwgPxi_IrLBZ7Rigv7=s48-c-k-c0x00ffffff-no-rj",
         timeStamp: "Today",
-        alt: 'coursesSvg',
+        alt: 'ResourcesSvg',
         channelLink: "https://www.youtube.com/c/TheCyberMentor",
     }
 ];
diff --git a/src/components/Courses/YoutubeCoursesData/LinuxYouTubeVIdeosData.jsx b/src/components/Resources/Courses/YoutubeCoursesData/LinuxYouTubeVIdeosData.jsx
similarity index 96%
rename from src/components/Courses/YoutubeCoursesData/LinuxYouTubeVIdeosData.jsx
rename to src/components/Resources/Courses/YoutubeCoursesData/LinuxYouTubeVIdeosData.jsx
index 3ebc306d..4408d401 100644
--- a/src/components/Courses/YoutubeCoursesData/LinuxYouTubeVIdeosData.jsx
+++ b/src/components/Resources/Courses/YoutubeCoursesData/LinuxYouTubeVIdeosData.jsx
@@ -11,7 +11,7 @@ export const LinuxCourses__Youtube = [
         channelName: "The Cyber Mentor",
         channelLogo: "https://yt3.ggpht.com/ytc/AKedOLRGnc0be-YXi3zenYi6s8uwgPxi_IrLBZ7Rigv7=s48-c-k-c0x00ffffff-no-rj",
         timeStamp: "Today",
-        alt: 'coursesSvg',
+        alt: 'ResourcesSvg',
         channelLink: "https://www.youtube.com/c/TheCyberMentor",
     }
 ];
diff --git a/src/components/Resources/CyberNews/CyberNews.jsx b/src/components/Resources/CyberNews/CyberNews.jsx
new file mode 100644
index 00000000..5713e9e9
--- /dev/null
+++ b/src/components/Resources/CyberNews/CyberNews.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const CyberNews = () => {
+    return (
+        <div>
+            <buttons>
+            <h1>Cyber News Soon</h1>
+
+            </buttons>
+            <h2>Cyber News Soon</h2>
+            <h3>Cyber News Soon</h3>
+            <h4>Cyber News Soon</h4>
+            <h5>Cyber News Soon</h5>
+            <h6>Cyber News Soon</h6>
+            <p>Cyber News Soon</p>
+            <a>Cyber News Soon</a>
+        </div>
+    );
+};
+
+export default CyberNews;
\ No newline at end of file
diff --git a/src/components/Courses/YoutubeCoursesNavbar/NavbarElements.jsx b/src/components/Resources/ResourcesNavbar/NavbarElements.jsx
similarity index 65%
rename from src/components/Courses/YoutubeCoursesNavbar/NavbarElements.jsx
rename to src/components/Resources/ResourcesNavbar/NavbarElements.jsx
index 59ed36af..a7610ce5 100644
--- a/src/components/Courses/YoutubeCoursesNavbar/NavbarElements.jsx
+++ b/src/components/Resources/ResourcesNavbar/NavbarElements.jsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import {Link as LinkRouter} from 'react-router-dom';
+import {Link as RouterLink} from 'react-router-dom';
 import {Link as LinkScroll} from 'react-scroll'
 
 export const Nav = styled.nav`
@@ -29,7 +29,7 @@ export const NavbarContainer = styled.div`
   max-width: 1100px;
 `
 
-export const NavLogo = styled(LinkRouter)`
+export const NavLogo = styled(RouterLink)`
   color: #fff;
   justify-self: flex-start;
   cursor: pointer;
@@ -72,7 +72,20 @@ export const NavItem = styled.li`
   height: 80px;
 `
 
-export const NavLinks = styled(LinkScroll)`
+export const NavLinks = styled(RouterLink)`
+  color: #fff;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  padding: 0 1rem;
+  height: 100%;
+  cursor: pointer;
+
+  &.active {
+    border-bottom: 3px solid #01bf71;
+  }
+`
+export const NavLinkRouter = styled.a`
   color: #fff;
   display: flex;
   align-items: center;
@@ -96,23 +109,45 @@ export const NavBtn = styled.nav`
 `
 
 export const NavBtnLink = styled.a`
-  border-radius: 50px;
-  background: #01bf71;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #343434;
+  background: transparent;
   white-space: nowrap;
   padding: 10px 22px;
-  color: #010606;
+  color: #ffffff;
   font-size: 16px;
   outline: none;
-  border: none;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   text-decoration: none;
-  
+
   &:hover {
     transition: all 0.2s ease-in-out;
-    background: #fff;
-    color: #010606;
-
-
+    background: transparent;
+    color: #47cf73;
+    border-color: #343434;
+    font-size: 18px;
   }
 `
+// export const NavBtnLink = styled.a`
+//   border-radius: 50px;
+//   background: #01bf71;
+//   white-space: nowrap;
+//   padding: 10px 22px;
+//   color: #010606;
+//   font-size: 16px;
+//   outline: none;
+//   border: none;
+//   cursor: pointer;
+//   transition: all 0.2s ease-in-out;
+//   text-decoration: none;
+//
+//   &:hover {
+//     transition: all 0.2s ease-in-out;
+//     background: #fff;
+//     color: #010606;
+//
+//
+//   }
+// `
diff --git a/src/components/Courses/YoutubeCoursesNavbar/YoutubeCoursesNavbar.jsx b/src/components/Resources/ResourcesNavbar/ResourcesNavbar.jsx
similarity index 63%
rename from src/components/Courses/YoutubeCoursesNavbar/YoutubeCoursesNavbar.jsx
rename to src/components/Resources/ResourcesNavbar/ResourcesNavbar.jsx
index 0444c6dd..cb492d47 100644
--- a/src/components/Courses/YoutubeCoursesNavbar/YoutubeCoursesNavbar.jsx
+++ b/src/components/Resources/ResourcesNavbar/ResourcesNavbar.jsx
@@ -10,11 +10,14 @@ import {
     NavMenu,
     NavItem,
     NavLinks,
+    NavLinkRouter,
     NavBtn,
     NavBtnLink
 } from "./NavbarElements";
+import {Button} from "../../Buttons/ButtonElements";
+import {Link} from "react-router-dom";
 
-const YoutubeCoursesNavbar = ({toggle}) => {
+const Navbar = ({toggle}) => {
     const [scrollNav, setScrollNav] = useState(false);
 
     const changeNav = () => {
@@ -47,12 +50,11 @@ const YoutubeCoursesNavbar = ({toggle}) => {
                         </MobileIcon>
                         <NavMenu>
                             {[
-                                {to: 'about', title: 'About',},
-                                {to: 'courses', title: 'Courses',},
-                                // {to: 'events', title: 'Events',},
-                                // {to: 'Testimonials', title: 'Testimonials',},
-                                // {to: 'join', title: 'Join',},
-                                // {to: 'Newsletter', title: 'Newsletter',},
+                                {to: 'about', title: 'Home',},
+                                {to: 'resources', title: 'Courses',},
+                                {to: 'resources', title: 'WriteUps',},
+                                {to: 'contribute', title: 'Events',},
+                                {to: '/resources/cybernews', title: 'Cyber News',},
                             ].map(({to, title}) => (
                                 <NavItem key={to}>
                                     <NavLinks
@@ -65,21 +67,35 @@ const YoutubeCoursesNavbar = ({toggle}) => {
                                     >
                                         {title}
                                     </NavLinks>
+
                                 </NavItem>
                             ))}
+                            <NavLinkRouter
+                                href={"https://blog.thecyberhub.org/"}
+                                target={"_blank"}
+                            >
+                                Blog
+                            </NavLinkRouter>
                         </NavMenu>
                         <NavBtn>
-                            <NavBtnLink href={"https://www.youtube.com/c/thecyberworld?sub_confirmation=1"}
-                                        target="_blank"> Subscribe </NavBtnLink>
+                            <Button
+                                to={"join"}
+                                smooth={true}
+                                duration={500}
+                                spy={true}
+                                exact="true"
+                                offset={-80}
+                            >
+                                Join us
+                            </Button>
                         </NavBtn>
                     </NavbarContainer>
-
                 </Nav>
             </IconContext.Provider>
         </>
     );
 };
 
-export default YoutubeCoursesNavbar;
+export default Navbar;
 
 
diff --git a/src/components/index.js b/src/components/index.js
index 1577cf9f..2385a42f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,7 +7,9 @@ export {default as Info} from './Homepage/Info/Info'
 export {default as Services} from './Homepage/Services/Services'
 export {default as Socials} from './Homepage/Socials/Socials'
 
-export {default as YoutubeCourses} from './Courses/YoutubeCourses'
+export {default as ResourcesNavbar} from './Resources/ResourcesNavbar/ResourcesNavbar'
+export {default as Courses} from './Resources/Courses/YoutubeCourses'
+export {default as CyberNews} from './Resources/CyberNews/CyberNews'
 
 export {default as Contribute} from './Contribute/Contribute'
 export {default as Footer} from './Footer/Footer'
diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx
index 80e30aca..7f3fed51 100644
--- a/src/pages/Homepage.jsx
+++ b/src/pages/Homepage.jsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Navbar, Sidebar, Hero, Info, Contribute,Socials, ComingSoon} from '../components'
+import {Hero, Info, Contribute, Socials, ComingSoon, Sidebar, Navbar} from '../components'
 import {aboutData, ResourcesData, communityData, contributeData} from "../components/Homepage/Info/Data";
 
 const Homepage = () => {
@@ -8,9 +8,11 @@ const Homepage = () => {
 
     return (
         <>
-
+            <navbar>
+                <Sidebar isOpen={isOpen} toggle={toggle}/>
+                <Navbar toggle={toggle}/>
+            </navbar>
             <Hero/>
-
             <Info {...aboutData}/>
             {/*<Services/>*/}
             <Info {...ResourcesData}/>
diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx
new file mode 100644
index 00000000..73ed0991
--- /dev/null
+++ b/src/pages/Resources.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {ResourcesNavbar, Courses} from "../components";
+import {Route, Routes} from "react-router-dom";
+import CyberNews from "../components/Resources/CyberNews/CyberNews";
+
+const Resources = () => {
+    return (
+        <div>
+            <navbar>
+                <ResourcesNavbar />
+            </navbar>
+            <Routes>
+                <Route exact path={"/"} element={<Courses/>}/>
+                {/*<Route exact path={"/resources/cybernews"} element={<CyberNews/>}/>*/}
+            </Routes>
+        </div>
+    );
+};
+
+export default Resources;
\ No newline at end of file