diff --git a/blockchain-unn/src/App.js b/blockchain-unn/src/App.js index 3609b72..6aa1430 100644 --- a/blockchain-unn/src/App.js +++ b/blockchain-unn/src/App.js @@ -11,7 +11,8 @@ import About from "./Pages/About"; import Community from "./Pages/community"; import HackathonLogin from "./Pages/events/HackathonLogin"; import HackathonDashboard from "./Pages/events/HackathonDashboard"; -import Bootcamp from "./Pages/bootcamp"; +import DevBootcamp from "./Pages/devbootcamp"; +import ContentBootcamp from "./Pages/contentbootcamp"; import ForgotPassword from "./Pages/events/forgetPassword"; import DevBootcampRegistration from "./Pages/bootcamps/devRegisteration"; import ContentBootcampRegisteration from "./Pages/bootcamps/contentRegisteration"; @@ -28,7 +29,8 @@ function App() { } /> } /> } /> - } /> + } /> + } /> } diff --git a/blockchain-unn/src/Components/Navbar.js b/blockchain-unn/src/Components/Navbar.js index 946e09f..76d52e9 100644 --- a/blockchain-unn/src/Components/Navbar.js +++ b/blockchain-unn/src/Components/Navbar.js @@ -9,7 +9,7 @@ import SocialLink from "./socialLink.js"; const Navbar = () => { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); - const navItems = ["Home", "Community", "Event", "Hackathon Login", "Bootcamp"]; //"Blog" + const navItems = ["Home", "Community", "Event", "Hackathon Login", "Dev Bootcamp", "Content Bootcamp"]; //"Blog" const { theme } = useContext(ThemeContext); const location = useLocation(); @@ -28,8 +28,10 @@ const Navbar = () => { return "/event"; } else if (item.toLowerCase() === "hackathon login") { return "/event/hackathon"; - } else if (item.toLowerCase() === "bootcamp") { - return "/bootcamp"; + } else if (item.toLowerCase() === "content bootcamp") { + return "/bootcamp/content"; + } else if (item.toLowerCase() === "dev bootcamp") { + return "/bootcamp/dev"; } return `/${item.toLowerCase()}`; }; diff --git a/blockchain-unn/src/Components/contentBootcamp/about.js b/blockchain-unn/src/Components/contentBootcamp/about.js new file mode 100644 index 0000000..e8ee267 --- /dev/null +++ b/blockchain-unn/src/Components/contentBootcamp/about.js @@ -0,0 +1,148 @@ +import React from "react"; +import question from "../../assets/icons/question.svg"; +import code from "../../assets/skill.jpeg"; +import arrowup from "../../assets/icons/arrow-up.svg"; +import clock from "../../assets/icons/clock.svg"; +import location from "../../assets/icons/location.svg"; + +const aboutData = [ + { + name: "Registration opens", + message: "Registration will open on Saturday, November 2nd, 2024.", + }, + { + name: "Registration closes", + message: "Registration will close on Saturday, November 9th, 2024.", + }, + { + name: "X space", + message: + "We will have an X space to kick off the bootcamp by 8pm WAT of the same day.", + }, + { + name: "Classes starts", + message: "Officially on Sunday, 10th November 2024, from 7:30-9:30 pm WAT.", + }, +]; + +const BootcampAbout = () => { + return ( +
+
+
+

+ Who is this Bootcamp for +

+ question mark +
+
+ +
+ {aboutData.map((about, index) => ( +
+
+
+

+ {about.name} +

+
+

+ {about.message} +

+
+
+ ))} +
+ +
+
+
+
+ clock +

+ Time +

+
+

+ Both programs will run concurrently on the same day and time, + three times a wek. The proposed date and time are{" "} + 7:30-9:30pm WAT + on Sundays and{" "} + Tuesday, and{" "} + 5:00-7:00pm WAT on{" "} + Fridays. +

+
+ +
+
+ clock +

+ Location +

+
+

+ The classes on Sundays + and Tuesdays will be held{" "} + virtually, while classes will + be held physically on{" "} + Fridays at the{" "} + BlockchainUNN + hacker house. +

+
+
+ arrow up +
+
+
+ clock +

+ Instructor preparations +

+
+
+

+ All instructions are expected to start working on their slides + fo the classes and are mandated to create a list of resources + the students should review. +

+

+ If for any reason an instructor an instructor won’t be available + for a class, it’s expected that you inform your cohort lead a + week before hand. +

+

+ If as an instructor, you run into any issues, amd you think we + could help with it (electricity, data, etc), reach out to the + bootcamp lead (Obi Nnaemeka). +

+
+
+
+
+
+ ); +}; + +export default BootcampAbout; diff --git a/blockchain-unn/src/Components/contentBootcamp/bootcampHero.js b/blockchain-unn/src/Components/contentBootcamp/bootcampHero.js new file mode 100644 index 0000000..fd2cb0f --- /dev/null +++ b/blockchain-unn/src/Components/contentBootcamp/bootcampHero.js @@ -0,0 +1,31 @@ +import React from "react"; +import bootcamp1 from '../../assets/events/bootcamp1.png'; +import bootcamp2 from '../../assets/events/bootcamp2.png'; +import bootcamp3 from '../../assets/events/bootcamp3.png'; + +const BootcampHero = () => { + return( +
+

+ INTRODUCING +

+

+ Content Writers + Bootcamp + +

+

+ Raising experienced web2 and web3 content writers. +

+ + +
+ bootcamp + bootcamp + bootcamp +
+
+ ); +} + +export default BootcampHero; \ No newline at end of file diff --git a/blockchain-unn/src/Components/Bootcamp/detail-card.js b/blockchain-unn/src/Components/contentBootcamp/detail-card.js similarity index 100% rename from blockchain-unn/src/Components/Bootcamp/detail-card.js rename to blockchain-unn/src/Components/contentBootcamp/detail-card.js diff --git a/blockchain-unn/src/Components/contentBootcamp/schedule.js b/blockchain-unn/src/Components/contentBootcamp/schedule.js new file mode 100644 index 0000000..4961aaa --- /dev/null +++ b/blockchain-unn/src/Components/contentBootcamp/schedule.js @@ -0,0 +1,146 @@ +import React from "react"; +import code from "../../assets/code.png"; + +const web2_schedule = [ + { + day: "Classes 1-2", + topic: "Introduction to Software Development.", + description: "Tools explanations, installation and setup.", + }, + { + day: "Classes 3-4", + topic: "HTML Fundamentals", + description: "Understanding HTML structure and its applications. ", + }, + { + day: "Classes 5-7", + topic: "CSS and Responsive Design principles", + description: "Styling web pages and creating responsive layouts. ", + }, + { + day: "Classes 8", + topic: "Introduction to Terminal Commands", + description: "Basic terminal commands and navigation.", + }, + { + day: "Classes 9-10", + topic: "Git and Github", + description: "version control systems and collaborative workflows using GitHub.", + }, + { + day: "Classes 11-14", + topic: "Javascript", + description: "Introduction to Javascript fundamentals for dynamic web development.", + }, + { + day: "Classes 15-19", + topic: "React", + description: + "Building interactive user interfaces using React.", + }, + { + day: "Classes 20", + topic: "Deployment Platforms", + description: "Deploying applications on Vercel, Render and Netlify.", + }, + { + day: "Classes 21-23", + topic: "Node.js Basics using Express.js", + description: "Introduction to server-side Javascript and building APIs with Ecpress.js.", + }, + { + day: "Classes 24-26", + topic: "Introduction to AJAX", + description: "Making asynchronous requests using JavaScript.", + }, + { + day: "Classes 27", + topic: "Introduction to React", + description: "React components, props, state and lifecycle methods.", + }, + { + day: "Classes 28", + topic: "Introduction to React Router", + description: "React Router components, props and navigation.", + }, +]; + + +const Schedule = () => { + return ( +
+
+

+ CONTENT CURRICULUM +

+

+ The web2 stream is focused on students new to programming or already + existing web2 devs looking to improve their skills. Since the goal is + prepping the students for web3 development, we’d mostly be looking + into the front-end side of web2 development. +

+

+ This stream runs for 10 weeks, + providing 28 contacts in total. +

+

+ Check below for Curriculum Summary +

+
+ +
+ {web2_schedule.map((schedule, index) => ( +
+
+

+ {schedule.day} +

+

+ {schedule.topic} +
+ {schedule.description} +

+
+
+ ))} +
+ +
+
+
+ web2 +
+
+
+

+ Twitter Spaces +

+

+ We will have 2 Twitter spaces: one at the start of the bootcamp and another at the end. +

+
+
+

+ Project Submission +

+

+ After the bootcamp is over, participant are required + to build a project using the skills acquired and + submit it by the end of the bootcamp +

+
+
+
+
+
+ ); +}; + +export default Schedule; diff --git a/blockchain-unn/src/Components/Bootcamp/about.js b/blockchain-unn/src/Components/devBootcamp/about.js similarity index 100% rename from blockchain-unn/src/Components/Bootcamp/about.js rename to blockchain-unn/src/Components/devBootcamp/about.js diff --git a/blockchain-unn/src/Components/Bootcamp/bootcampHero.js b/blockchain-unn/src/Components/devBootcamp/bootcampHero.js similarity index 100% rename from blockchain-unn/src/Components/Bootcamp/bootcampHero.js rename to blockchain-unn/src/Components/devBootcamp/bootcampHero.js diff --git a/blockchain-unn/src/Components/devBootcamp/detail-card.js b/blockchain-unn/src/Components/devBootcamp/detail-card.js new file mode 100644 index 0000000..32ec41a --- /dev/null +++ b/blockchain-unn/src/Components/devBootcamp/detail-card.js @@ -0,0 +1,105 @@ +import React, {useState, useEffect} from 'react'; + +const cardData = [ + { + id: 1, + description: 'Emails with meeting links will be sent beforehand to all registered participants.', + style: { top: '10%', left: '8.5%', width: '268.17px', height: '182.47px', rotate: '-10deg' }, + mobileStyle: { top: '10%', left: '2%', width: '162.59px', height: '110.47px', rotate: '-10deg' }, + }, + { + id: 2, + description: 'All classes will hold on Gmeet and will be recorded to be upload later to the BlockchainUNN youtube channel', + style: { top: '10%', left: '27%', width: '327.9px', height: '178.02px', rotate: '9deg', zIndex: '10' }, + mobileStyle: { top: '10%', left: '44%', width: '198.17px', height: '107.47px', rotate: '10deg' }, + }, + { + id: 3, + description: 'Each class will be led by 2 persons, The main instructor and an assistant teacher to help with attendance and questions', + style: { top: '11%', left: '50%', width: '327.9px', height: '178.02px', rotate: '-3deg', zIndex: '2' }, + mobileStyle: { top: '22.5%', left: '1%', width: '162.17px', height: '110.47px', rotate: '-10deg', zIndex: '3' }, + }, + { + id: 4, + description: 'Attendance will be taken for every class by the cohort lead', + style: { top: '10%', left: '72%', width: '292.32px', height: '178.02px', rotate: '3deg', zIndex: '5' }, + mobileStyle: { top: '21%', left: '45%', width: '198.17px', height: '107.47px', rotate: '10deg', zIndex: '2' }, + }, + { + id: 5, + description: 'an assignment will be given every Tuesday, covering topics within that week, to be submitted by the next Tuesday (a duration of 1 week). Students are expected to submit a total of 14 assignments by the end of the bootcamp.', + style: { top: '31%', left: '10.5%', width: '393.52px', height: '182.47px', rotate: '-10deg', zIndex: '1' }, + mobileStyle: { top: '36%', left: '1%', width: '358.17px', height: '88.47px', rotate: '2deg', zIndex: '4' }, + }, + { + id: 6, + description: 'The assignments will form critical criteria for graduation.', + style: { top: '29%', left: '37.5%', width: '327.9px', height: '178.02px', rotate: '9deg', zIndex: '2' }, + mobileStyle: { top: '46.5%', left: '1%', width: '148.17px', height: '100.47px', rotate: '10deg', zIndex: '4' }, + }, + { + id: 7, + description: 'After 12 weeks, the student will be given a final project which they are expected to complete in order to graduate. They have a time period of 4 weeks from when they are given to submit.', + style: { top: '32%', left: '60%', width: '455.64px', height: '178.02px', rotate: '-4deg', zIndex: '3' }, + mobileStyle: { top: '48%', left: '42%', width: '210.17px', height: '120.47px', rotate: '-10deg', zIndex: '5' }, + }, + { + id: 8, + description: 'Graduation will be determined by 3 major criteria- 60% attendance to classes, 70% assignment and classwork completion, and submission of a final project.', + style: { top: '52%', left: '12%', width: '520.4px', height: '182.47px', rotate: '-10deg', zIndex: '1' }, + mobileStyle: { top: '61%', left: '8.5%', width: '268.17px', height: '128.47px', rotate: '12deg', zIndex: '4' }, + }, + { + id: 9, + description: 'Upon graduation, Students are awarded a certificate of excellence and added to the BlockchainUNN Alumni group for the top developers within the community', + style: { top: '51%', left: '49%', width: '606.84px', height: '178.02px', rotate: '3.5deg', zIndex: '5' }, + mobileStyle: { top: '76%', left: '0%', width: '358px', height: '120.47px', rotate: '-10deg', zIndex: '6' }, + }, + +]; + +const Card = ({ description, style, mobileStyle }) => { + const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); + + useEffect(() => { + // Function to handle resizing + const handleResize = () => { + setIsMobile(window.innerWidth <= 768); + }; + + // Listen for resize events + window.addEventListener('resize', handleResize); + + // Clean up event listener on component unmount + return () => window.removeEventListener('resize', handleResize); + }, []); + + return ( +
+
+

{description}

+
+
+ ); +}; + +const DetailCardContainer = () => { + return ( +
+ {cardData.map((card) => ( + + ))} +
+ ); +}; + +export default DetailCardContainer; diff --git a/blockchain-unn/src/Components/Bootcamp/footer.js b/blockchain-unn/src/Components/devBootcamp/footer.js similarity index 100% rename from blockchain-unn/src/Components/Bootcamp/footer.js rename to blockchain-unn/src/Components/devBootcamp/footer.js diff --git a/blockchain-unn/src/Components/Bootcamp/navbar.js b/blockchain-unn/src/Components/devBootcamp/navbar.js similarity index 68% rename from blockchain-unn/src/Components/Bootcamp/navbar.js rename to blockchain-unn/src/Components/devBootcamp/navbar.js index d8150ae..846b6e3 100644 --- a/blockchain-unn/src/Components/Bootcamp/navbar.js +++ b/blockchain-unn/src/Components/devBootcamp/navbar.js @@ -2,12 +2,23 @@ import React, {useState, useContext } from "react"; import LogoWhite from "../../assets/blockathonlogo.png"; import { FaBars, FaTimes } from "react-icons/fa"; import { ThemeContext } from "../Theme"; -import { Link } from "react-router-dom"; +import { Link, useLocation } from "react-router-dom"; const Navbar = () => { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const { theme } = useContext(ThemeContext); - const navItems = ["Home", "Community", "Event"]; + const navItems = ["Register"]; + const location = useLocation(); + + + // Determine register link based on current URL path + const registerLink = + location.pathname === "/bootcamp/dev" + ? "/bootcamp/dev/registeration" + : location.pathname === "/bootcamp/content" + ? "/bootcamp/content/registeration" + : null; + const toggleMobileMenu = () => { setIsMobileMenuOpen(!isMobileMenuOpen); @@ -51,8 +62,20 @@ const Navbar = () => { -
-
+ + +
+ {registerLink && ( +

setIsMobileMenuOpen(false)} + > + + REGISTER + +

+ )} +
{!isMobileMenuOpen && }
@@ -76,7 +99,18 @@ const Navbar = () => { {item} + ))} + {registerLink && ( +
  • setIsMobileMenuOpen(false)} + > + + Register + +
    • + )}
    )} diff --git a/blockchain-unn/src/Components/Bootcamp/schedule.js b/blockchain-unn/src/Components/devBootcamp/schedule.js similarity index 100% rename from blockchain-unn/src/Components/Bootcamp/schedule.js rename to blockchain-unn/src/Components/devBootcamp/schedule.js diff --git a/blockchain-unn/src/Pages/contentbootcamp.js b/blockchain-unn/src/Pages/contentbootcamp.js new file mode 100644 index 0000000..0f7dc1c --- /dev/null +++ b/blockchain-unn/src/Pages/contentbootcamp.js @@ -0,0 +1,22 @@ +import React from "react"; +import Navbar from "../Components/devBootcamp/navbar"; +import BootcampHero from "../Components/contentBootcamp/bootcampHero"; +import BootcampAbout from "../Components/contentBootcamp/about"; +import Schedule from "../Components/contentBootcamp/schedule"; +import Footer from "../Components/devBootcamp/footer"; +import DetailCardContainer from "../Components/contentBootcamp/detail-card"; + +const Bootcamp = () => { + return ( +
    + + + + + +
    + ); +} + +export default Bootcamp \ No newline at end of file diff --git a/blockchain-unn/src/Pages/bootcamp.js b/blockchain-unn/src/Pages/devbootcamp.js similarity index 50% rename from blockchain-unn/src/Pages/bootcamp.js rename to blockchain-unn/src/Pages/devbootcamp.js index ec976cc..1edc2fd 100644 --- a/blockchain-unn/src/Pages/bootcamp.js +++ b/blockchain-unn/src/Pages/devbootcamp.js @@ -1,10 +1,10 @@ import React from "react"; -import Navbar from "../Components/Bootcamp/navbar"; -import BootcampHero from "../Components/Bootcamp/bootcampHero"; -import BootcampAbout from "../Components/Bootcamp/about"; -import Schedule from "../Components/Bootcamp/schedule"; -import Footer from "../Components/Bootcamp/footer"; -import DetailCardContainer from "../Components/Bootcamp/detail-card"; +import Navbar from "../Components/devBootcamp/navbar"; +import BootcampHero from "../Components/devBootcamp/bootcampHero"; +import BootcampAbout from "../Components/devBootcamp/about"; +import Schedule from "../Components/devBootcamp/schedule"; +import Footer from "../Components/devBootcamp/footer"; +import DetailCardContainer from "../Components/devBootcamp/detail-card"; const Bootcamp = () => { return (