diff --git a/src/components/Aboutpage/chart.tsx b/src/components/Aboutpage/chart.tsx new file mode 100644 index 000000000..d01b51e49 --- /dev/null +++ b/src/components/Aboutpage/chart.tsx @@ -0,0 +1,200 @@ +import React from 'react'; +import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell, Legend, ResponsiveContainer } from 'recharts'; + +const data = [ + { name: 'Community', team: 80 }, + { name: 'Courses', team: 78 }, + { name: 'Tutorials', team: 70 }, + { name: 'Problems', team: 67 }, + { name: 'Solutions', team: 65 } +]; + +const colors = [ + 'rgba(239,216,29,0.9)', + 'rgba(49,105,148,0.9)', + 'rgba(234,140,16,0.9)', + 'rgba(42,1,100,0.9)', + 'rgba(115,119,173,0.9)' +]; + +const CustomTooltip = ({ active, payload, label }) => { + if (active && payload && payload.length) { + return ( +
+

{label}

+
+ ); + } + return null; +}; + +const Community: React.FC = () => { + return ( + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + + ); + }; + + const Courses: React.FC = () => { + return ( + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + + ); + }; + + const Tutorials: React.FC = () => { + return ( + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + + ); + }; + const Problems: React.FC = () => { + return ( + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + + ); + }; + const Solutions: React.FC = () => { + return ( + + + + + + + + + {data.map((entry, index) => ( + + ))} + + + + ); + }; +const Chart: React.FC = () => { + return ( + <> +

Join our Dynamic team to learn and success of our .

+ + + + + + } /> + + + {data.map((entry, index) => ( + + ))} + + + + + ); +}; + +export { Chart,Community,Courses,Tutorials,Problems,Solutions}; diff --git a/src/components/Aboutpage/index.tsx b/src/components/Aboutpage/index.tsx index cd6766bac..f032b1fd0 100644 --- a/src/components/Aboutpage/index.tsx +++ b/src/components/Aboutpage/index.tsx @@ -3,6 +3,8 @@ import clsx from "clsx"; import Heading from "@theme/Heading"; import styles from "./styles.module.css"; import { motion } from "framer-motion"; +import {Chart,Community,Courses,Tutorials,Problems,Solutions} from "./chart"; +const ourmission= "/img/svg/our_mission.png"; const aboutImg = "/img/svg/about_me.svg"; export default function AboutUsSection() { @@ -83,6 +85,240 @@ export default function AboutUsSection() { About Us +
+ + {/* Placeholder for an about us image */} + About Us + +
+ + Our Mission + + + At Codeharborhub, our mission is to empower every student to enhance their career opportunities and achieve their goals. We are committed to providing high-quality educational resources and courses that foster growth, learning, and success. Through our comprehensive and engaging curriculum, we aim to equip students with the knowledge and skills they need to excel in their chosen fields. Our goal is to create a supportive and inclusive learning environment that inspires and motivates students to reach their full potential. Together, we strive to make a positive impact on the future of education and the professional success of our learners. + +
+
+
+
+ + Our Learning Path + + +we believe in a structured and comprehensive approach to learning. Our learning paths are meticulously designed to guide you through a progressive journey, ensuring you master the skills you need. Each path is tailored to different levels of expertise, from beginners to advanced learners, with a blend of theoretical knowledge and practical experience. + + Community + +Our vibrant community is at the heart of our learning experience. Join a diverse group of learners, educators, and industry professionals who are passionate about sharing knowledge and helping each other grow. Participate in discussions, share your progress, ask questions, and get feedback. Our community is here to support you every step of the way. + + Courses + +Our courses are crafted by industry experts and experienced educators to provide you with in-depth knowledge and practical skills. Each course is divided into easily digestible modules, allowing you to learn at your own pace. From foundational concepts to advanced techniques, our courses cover a wide range of topics to cater to your learning needs. + + + Tutorials + +Dive into our extensive library of tutorials designed to help you understand specific concepts and tools. Whether you're looking to master a programming language, learn a new framework, or understand a complex algorithm, our tutorials offer step-by-step guidance to help you achieve your goals. + + + Problems + + +Challenge yourself with our collection of problems designed to test your understanding and improve your problem-solving skills. Our problems range from beginner to advanced levels, covering various topics and difficulty levels. Each problem comes with detailed instructions and hints to help you along the way. + + + Solutions + +Learn from detailed solutions provided for each problem. Our solutions not only give you the correct answer but also explain the thought process and logic behind them. This helps you understand different approaches to solving problems and enhances your critical thinking skills. + +
+
+ + + + + + + + + + + + + + + + +
+
); diff --git a/static/img/svg/our_mission.png b/static/img/svg/our_mission.png new file mode 100644 index 000000000..060089805 Binary files /dev/null and b/static/img/svg/our_mission.png differ