Skip to content

Commit 51f9358

Browse files
sivaprasath2004sivaprasath2004
authored
aboutus
1 parent a184841 commit 51f9358

File tree

1 file changed

+236
-0
lines changed

1 file changed

+236
-0
lines changed

‎src/components/Aboutpage/index.tsx

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import clsx from "clsx";
33
import Heading from "@theme/Heading";
44
import styles from "./styles.module.css";
55
import { motion } from "framer-motion";
6+
import {Chart,Community,Courses,Tutorials,Problems,Solutions} from "./chart";
7+
const ourmission= "/img/svg/our_mission.png";
68
const aboutImg = "/img/svg/about_me.svg";
79

810
export default function AboutUsSection() {
@@ -83,6 +85,240 @@ export default function AboutUsSection() {
8385
<img src={aboutImg} alt="About Us" />
8486
</motion.div>
8587
</div>
88+
<div className="row">
89+
<motion.div
90+
initial={{ scale: 0, y: -150 }}
91+
whileInView={{ scale: 0.8, y: 0 }}
92+
viewport={{ once: true }}
93+
transition={{
94+
duration: 1,
95+
type: "spring",
96+
stiffness: 100,
97+
delay: 0.5,
98+
}}
99+
className={clsx("col", "col--6", styles.aboutUsImage)}
100+
>
101+
{/* Placeholder for an about us image */}
102+
<img src={ourmission} alt="About Us" />
103+
</motion.div>
104+
<div className="col col--6">
105+
<motion.div
106+
initial={{ opacity: 0, x: -150 }}
107+
whileInView={{ opacity: 1, x: 0 }}
108+
viewport={{ once: true }}
109+
transition={{
110+
duration: 1,
111+
type: "spring",
112+
stiffness: 100,
113+
delay: 0.2,
114+
}}
115+
>
116+
<Heading as={"h1"}>Our Mission</Heading>
117+
</motion.div>
118+
<motion.p
119+
initial={{ opacity: 0, y: -150 }}
120+
whileInView={{ opacity: 1, y: 0 }}
121+
viewport={{ once: true }}
122+
transition={{
123+
duration: 1,
124+
type: "spring",
125+
stiffness: 100,
126+
delay: 0.5,
127+
}}
128+
className={styles.aboutUsDescription}
129+
>
130+
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.
131+
</motion.p>
132+
</div>
133+
</div>
134+
<div className="row">
135+
<div className="col col--6">
136+
<motion.div
137+
initial={{ opacity: 0, x: -150 }}
138+
whileInView={{ opacity: 1, x: 0 }}
139+
viewport={{ once: true }}
140+
transition={{
141+
duration: 1,
142+
type: "spring",
143+
stiffness: 100,
144+
delay: 0.2,
145+
}}
146+
>
147+
<Heading as={"h1"}>Our Learning Path</Heading>
148+
</motion.div>
149+
<motion.p
150+
initial={{ opacity: 0, y: -150 }}
151+
whileInView={{ opacity: 1, y: 0 }}
152+
viewport={{ once: true }}
153+
transition={{
154+
duration: 1,
155+
type: "spring",
156+
stiffness: 100,
157+
delay: 0.5,
158+
}}
159+
className={styles.aboutUsDescription}
160+
>
161+
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.
162+
</motion.p>
163+
<Heading as={"h2"}>Community</Heading>
164+
<motion.p
165+
initial={{ opacity: 0, y: -150 }}
166+
whileInView={{ opacity: 1, y: 0 }}
167+
viewport={{ once: true }}
168+
transition={{
169+
duration: 1,
170+
type: "spring",
171+
stiffness: 100,
172+
delay: 0.5,
173+
}}
174+
className={styles.aboutUsDescription}
175+
>
176+
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.
177+
</motion.p>
178+
<Heading as={"h2"}>Courses</Heading>
179+
<motion.p
180+
initial={{ opacity: 0, y: -150 }}
181+
whileInView={{ opacity: 1, y: 0 }}
182+
viewport={{ once: true }}
183+
transition={{
184+
duration: 1,
185+
type: "spring",
186+
stiffness: 100,
187+
delay: 0.5,
188+
}}
189+
className={styles.aboutUsDescription}
190+
>
191+
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.
192+
193+
</motion.p>
194+
<Heading as={"h2"}>Tutorials</Heading>
195+
<motion.p
196+
initial={{ opacity: 0, y: -150 }}
197+
whileInView={{ opacity: 1, y: 0 }}
198+
viewport={{ once: true }}
199+
transition={{
200+
duration: 1,
201+
type: "spring",
202+
stiffness: 100,
203+
delay: 0.5,
204+
}}
205+
className={styles.aboutUsDescription}
206+
>
207+
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.
208+
209+
</motion.p>
210+
<Heading as={"h2"}>Problems</Heading>
211+
212+
<motion.p
213+
initial={{ opacity: 0, y: -150 }}
214+
whileInView={{ opacity: 1, y: 0 }}
215+
viewport={{ once: true }}
216+
transition={{
217+
duration: 1,
218+
type: "spring",
219+
stiffness: 100,
220+
delay: 0.5,
221+
}}
222+
className={styles.aboutUsDescription}
223+
>
224+
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.
225+
226+
</motion.p>
227+
<Heading as={"h2"}>Solutions</Heading>
228+
<motion.p
229+
initial={{ opacity: 0, y: -150 }}
230+
whileInView={{ opacity: 1, y: 0 }}
231+
viewport={{ once: true }}
232+
transition={{
233+
duration: 1,
234+
type: "spring",
235+
stiffness: 100,
236+
delay: 0.5,
237+
}}
238+
className={styles.aboutUsDescription}
239+
>
240+
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.
241+
</motion.p>
242+
</div>
243+
<div className="col col--6">
244+
<motion.div
245+
initial={{ opacity: 0, x: -150 }}
246+
whileInView={{ opacity: 1, x: 0 }}
247+
viewport={{ once: true }}
248+
transition={{
249+
duration: 1,
250+
type: "spring",
251+
stiffness: 100,
252+
delay: 0.2,
253+
}}
254+
><Chart />
255+
</motion.div>
256+
<motion.div
257+
initial={{ opacity: 0, x: -150 }}
258+
whileInView={{ opacity: 1, x: 0 }}
259+
viewport={{ once: true }}
260+
transition={{
261+
duration: 1,
262+
type: "spring",
263+
stiffness: 100,
264+
delay: 0.2,
265+
}}
266+
>
267+
<Community />
268+
</motion.div>
269+
<motion.div
270+
initial={{ opacity: 0, x: -150 }}
271+
whileInView={{ opacity: 1, x: 0 }}
272+
viewport={{ once: true }}
273+
transition={{
274+
duration: 1,
275+
type: "spring",
276+
stiffness: 100,
277+
delay: 0.2,
278+
}}
279+
>
280+
<Courses />
281+
</motion.div><motion.div
282+
initial={{ opacity: 0, x: -150 }}
283+
whileInView={{ opacity: 1, x: 0 }}
284+
viewport={{ once: true }}
285+
transition={{
286+
duration: 1,
287+
type: "spring",
288+
stiffness: 100,
289+
delay: 0.2,
290+
}}
291+
>
292+
<Tutorials />
293+
</motion.div>
294+
<motion.div
295+
initial={{ opacity: 0, x: -150 }}
296+
whileInView={{ opacity: 1, x: 0 }}
297+
viewport={{ once: true }}
298+
transition={{
299+
duration: 1,
300+
type: "spring",
301+
stiffness: 100,
302+
delay: 0.2,
303+
}}
304+
>
305+
<Problems />
306+
</motion.div>
307+
<motion.div
308+
initial={{ opacity: 0, x: -150 }}
309+
whileInView={{ opacity: 1, x: 0 }}
310+
viewport={{ once: true }}
311+
transition={{
312+
duration: 1,
313+
type: "spring",
314+
stiffness: 100,
315+
delay: 0.2,
316+
}}
317+
>
318+
<Solutions />
319+
</motion.div>
320+
</div>
321+
</div>
86322
</div>
87323
</section>
88324
);

0 commit comments

Comments
 (0)