Isaac

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() {
               <Route path="/about" element={<About />} />
               <Route path="/community" element={<Community />} />
               <Route path="/event" element={<Blockathon />} />
-              <Route path="/bootcamp" element={<Bootcamp />} />
+              <Route path="/bootcamp/dev" element={<DevBootcamp />} />
+              <Route path="/bootcamp/content" element={<ContentBootcamp />} />
               <Route
                 path="/bootcamp/dev/registeration"
                 element={<DevBootcampRegistration />}

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()}`;
   };

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 (
+    <div className="w-full md:px-[5rem] px-2 my-[3rem] py-6 flex flex-col items-center gap-8">
+      <div className="flex flex-col md:flex-row gap-4 items-center w-full px-4 ">
+        <div className="bottom-border w-full md:w-full h-[181px] rounded-xl bg-dark-mode-3 flex flex-col-reverse md:flex-row-reverse gap-32 items-center px-16 py-2 rotate-180">
+          <p className="text-white opacity-60 font-wallpoet text-[24px] md:text-[40px] font-[400] leading-tight -rotate-180">
+            Who is this Bootcamp for
+          </p>
+          <img src={question} alt="question mark" className="-rotate-180" />
+        </div>
+      </div>
+
+      <div className="flex flex-wrap md:flex-row gap-4 items-center ">
+        {aboutData.map((about, index) => (
+          <div
+            key={index}
+            className={`bg-dark-mode-3 w-full md:w-[288px] h-[100px] md:h-[153px] p-1 rounded-xl top-border`}
+          >
+            <div
+              className={`
+             text-white flex flex-col gap-4 p-4 rounded-xl`}
+            >
+              <div className="">
+                <h3 className="text-[13px] md:text-[18px] font-medium">
+                  {about.name}
+                </h3>
+              </div>
+              <p className="text-[9px] md:text-[16px] font-[300] w-full overflow-hidden break-words">
+                {about.message}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="w-full h-fit px-0 md:px-6 py-4 flex flex-col gap-[6rem] items-center relative">
+        <div
+          className="bottom-border h-fit md:h-[216px] w-full bg-dark-mode-3 rounded-xl border-b-[#202020] flex flex-col md:flex-row items-center px-4 md:px-[12rem] py-4 gap-4 md:gap-[8%]"
+          style={{
+            clipPath: "polygon(0% 0%, 100% 0%, 93% 100%, 7% 100%)",
+          }}
+        >
+          <div className=" w-full md:w-[370px] h-fit">
+            <div className="flex gap-2 items-center ">
+              <img src={clock} alt="clock" />
+              <p className="text-white font-inter font-bold text-[14px] md:text-[22px]">
+                Time
+              </p>
+            </div>
+            <p className="text-white text-[14px] md:text-[16px] pl-3 md:pl-8 mt-4 md:mt-0">
+              Both programs will run concurrently on the same day and time,
+              three times a wek. The proposed date and time are{" "}
+              <span className="font-bold"> 7:30-9:30pm WAT </span>
+              on <span className="font-bold"> Sundays </span> and{" "}
+              <span className="font-bold">Tuesday</span>, and{" "}
+              <span className="font-bold">5:00-7:00pm WAT</span> on{" "}
+              <span className="font-bold">Fridays.</span>
+            </p>
+          </div>
+
+          <div className="w-full md:w-[370px] h-fit">
+            <div className="flex gap-2 items-center">
+              <img src={location} alt="clock" />
+              <p className="text-white font-inter font-bold text-[14px] md:text-[22px]">
+                Location
+              </p>
+            </div>
+            <p className="text-white text-[14px] md:text-[16px] pl-3 md:pl-8 mt-4 md:mt-0">
+              The classes on <span className="font-bold"> Sundays </span>
+              and <span className="font-bold"> Tuesdays </span> will be held{" "}
+              <span className="font-bold">virtually</span>, while classes will
+              be held <span className="font-bold">physically</span> on{" "}
+              <span className="font-bold"> Fridays </span> at the{" "}
+              <span className="font-bold"> BlockchainUNN </span>
+              hacker house.
+            </p>
+          </div>
+        </div>
+        <img
+          src={arrowup}
+          alt="arrow up"
+          className="h-[192.07px] w-[192.07px] absolute top-[34%] md:top-[32%] z-50"
+        />
+        <div
+          className="border-b-[4px] rounded-xl  border-[#2CE85E] h-fit md:h-[216px] w-full bg-dark-mode-4 flex items-center px-4 md:px-[12rem] py-4 gap-4"
+          style={{
+            clipPath: "polygon(100% 100%, 0% 100%, 7% 0%, 93% 0%)",
+          }}
+        >
+          <div className="w-full h-fit">
+            <div className="flex gap-2 items-center">
+              <img src={clock} alt="clock" />
+              <p className="text-white font-inter font-bold text-[16px] md:text-[22px]">
+                Instructor preparations
+              </p>
+            </div>
+            <div className="flex flex-col md:flex-row items-center gap-8 mt-2">
+              <p className="text-white text-[14px] md:text-[16px] pl-3 md:pl-8">
+                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.
+              </p>
+              <p className="text-white text-[14px] md:text-[16px] pl-3 md:pl-0">
+                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.
+              </p>
+              <p className="text-white text-[14px] md:text-[16px] pl-3 md:pl-0">
+                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).
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BootcampAbout;

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(
+        <div className="w-full md:px-[5rem] px-4 md:my-[3rem] py-6 flex flex-col items-center md:gap-8 gap-4">
+            <p className="text-white font-inter-semibold text-[35px]">
+                INTRODUCING
+            </p>
+            <h1 className="text-white font-inter-extrabold text-[20px] md:text-[65px]">
+                Content Writers <span className="bg-white px-6 py-2 rounded-3xl text-black font-inter-extrabold text-[20px] md:text-[65px]">
+                    Bootcamp
+                </span>
+            </h1>
+            <h2 className="text-white font-inter-semibold text-center text-[12px] md:text-[36px]">
+            Raising experienced web2 and web3 content writers.
+            </h2>
+
+
+            <div className="w-full md:w-2/3 relative flex items-center h-[150px] md:h-[300px]">
+                <img src={bootcamp3} alt="bootcamp" className="md:w-[268.17px] w-[102.32px] h-[101.22px] md:h-[265.29px] md:rounded-3xl rounded-lg object-cover absolute left-5 md:left-8 top-4 md:top-8" />
+                <img src={bootcamp1} alt="bootcamp" className="md:w-[268.17px] w-[102.32px] h-[101.22px] md:h-[265.29px] md:rounded-3xl rounded-lg object-cover absolute left-1/3 z-50 top-2" />
+                <img src={bootcamp2} alt="bootcamp" className="md:w-[268.17px] w-[102.32px] h-[101.22px] md:h-[265.29px] md:rounded-3xl rounded-lg object-cover absolute right-5 md:right-9 top-4 md:top-8" />
+            </div>
+        </div>
+    );
+}
+
+export default BootcampHero;

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 (
+    <div className="w-full px-2 md:px-[6rem] flex flex-col items-center -mt-12">
+      <div className="top-border w-full h-fit md:h-[251px] rounded-xl bg-dark-mode-4 flex flex-col-reverse items-end px-8 py-6 rotate-180">
+        <p className="text-white opacity-60 font-wallpoet text-[20px] md:text-[40px] font-[400] leading-tight -rotate-180">
+          CONTENT CURRICULUM
+        </p>
+        <p className="text-white -rotate-180 mb-2 text-[12px] md:text-auto">
+          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.
+        </p>
+        <p className="text-white -rotate-180 mb-4 text-[12px] md:text-auto">
+          This stream runs for <span className="font-semibold">10 weeks</span>,
+          providing <span className="font-semibold">28 contacts</span> in total.
+        </p>
+        <p className="text-white -rotate-180 mb-4 text-[12px] md:text-auto">
+          Check below for Curriculum Summary
+        </p>
+      </div>
+
+      <div className="w-full flex flex-wrap gap-4 items-end mt-8 justify-evenly">
+        {web2_schedule.map((schedule, index) => (
+          <div
+            key={index}
+            className={`w-full md:w-[32%] h-[120px] md:h-[171px] p-1 rounded-[7px] ${
+              index % 2 === 0
+                ? "bg-white text-black"
+                : "bg-dark-mode-3 text-white top-border"
+            }`}
+          >
+            <div className="flex flex-col gap-4 p-4 rounded-xl">
+              <h3 className="text-[13px] md:text-[18px] font-medium">
+                {schedule.day}
+              </h3>
+              <p className="text-[9px] md:text-[16px] font-[300] w-full overflow-hidden break-words">
+                <span className="font-semibold">{schedule.topic}</span>
+                <br />
+                {schedule.description}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="top-border w-full h-fit md:h-[445px] rounded-xl bg-dark-mode-4 flex flex-col-reverse items-end px-2 md:px-8 py-6 rotate-180 mt-8">
+        <div className="flex flex-col-reverse md:flex-row-reverse gap-4 items-center p-0 md:p-6">
+          <div className="top-border w-[90%] md:w-[550px] h-[200px] md:h-[379px] rounded-xl bg-dark-mode-3 -rotate-180 -mb-4">
+            <img src={code} alt="web2" className="h-full w-full p-6" />
+          </div>
+          <div className="flex flex-col gap-8 w-[90%] md:w-auto">
+          <div className="top-border w-full md:w-[540px] h-[150px] md:h-[181px] rounded-xl bg-dark-mode-3 rotate-0 md:-mb-4 px-4 md:p-6 flex flex-col-reverse items-end">
+          <p className="text-white opacity-60 font-wallpoet text-[22px] md:text-[40px] font-[400] leading-tight rotate-180 my-2">
+                Twitter Spaces
+            </p>
+            <p className="text-white md:max-w-[85%] rotate-180 md:text-auto text-[14px]">
+                We will have 2 Twitter spaces: one at the start of the bootcamp and another at the end.
+            </p>
+          </div>
+          <div className="top-border w-full md:w-[540px] h-[150px] md:h-[181px] rounded-xl bg-dark-mode-3 rotate-0 md:-mb-4 px-4 md:p-6 flex flex-col-reverse items-end">
+            <p className="text-white opacity-60 font-wallpoet text-[22px] md:text-[40px] font-[400] leading-tight rotate-180 my-2">
+                Project Submission
+            </p>
+            <p className="text-white md:max-w-[85%] rotate-180 md:text-auto text-[14px]">
+                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   
+            </p>
+          </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Schedule;