feat: courses

th3cyb3rhub · Jul 27, 2022 · d3b0945 · d3b0945
1 parent 753fe3c
commit d3b0945
Show file tree

Hide file tree

Showing 23 changed files with 226 additions and 77 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → ...omponents/Resources/Courses/Card/Card.css b/src/components/Courses/Card/Card.css → ...omponents/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 → ...omponents/Resources/Courses/Card/Card.jsx b/src/components/Courses/Card/Card.jsx → ...omponents/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 → src/components/Resources/Courses/Courses.jsx b/src/components/Courses/Courses.jsx → src/components/Resources/Courses/Courses.jsx
diff --git a/src/components/Courses/Sidebar/Sidebar.jsx → ...nts/Resources/Courses/Sidebar/Sidebar.jsx b/src/components/Courses/Sidebar/Sidebar.jsx → ...nts/Resources/Courses/Sidebar/Sidebar.jsx
diff --git a/...nents/Courses/Sidebar/SidebarElements.jsx → ...urces/Courses/Sidebar/SidebarElements.jsx b/...nents/Courses/Sidebar/SidebarElements.jsx → ...urces/Courses/Sidebar/SidebarElements.jsx
diff --git a/src/components/Courses/YouTubeVideos.jsx → ...nents/Resources/Courses/YouTubeVideos.jsx b/src/components/Courses/YouTubeVideos.jsx → ...nents/Resources/Courses/YouTubeVideos.jsx
diff --git a/...ponents/Courses/YouTubeVideosElements.jsx → ...sources/Courses/YouTubeVideosElements.jsx b/...ponents/Courses/YouTubeVideosElements.jsx → ...sources/Courses/YouTubeVideosElements.jsx
diff --git a/src/components/Courses/YoutubeCourses.jsx → ...ents/Resources/Courses/YoutubeCourses.jsx b/src/components/Courses/YoutubeCourses.jsx → ...ents/Resources/Courses/YoutubeCourses.jsx
diff --git a/...CoursesData/CyberSecYouTubeVIdeosData.jsx → ...CoursesData/CyberSecYouTubeVIdeosData.jsx b/...CoursesData/CyberSecYouTubeVIdeosData.jsx → ...CoursesData/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/...ubeCoursesData/LinuxYouTubeVIdeosData.jsx → ...ubeCoursesData/LinuxYouTubeVIdeosData.jsx b/...ubeCoursesData/LinuxYouTubeVIdeosData.jsx → ...ubeCoursesData/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
@@ -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;