Skip to content

Commit 158ff72

Browse files
author
iitzIrFan
committed
Enhance Learning Paths section with improved descriptions, animations, and styles
1 parent 575b362 commit 158ff72

File tree

2 files changed

+730
-38
lines changed

2 files changed

+730
-38
lines changed

‎src/pages/get-started/index.tsx

Lines changed: 142 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -228,25 +228,25 @@ const stats = [
228228
const learningPaths = [
229229
{
230230
title: "Web Development",
231-
description: "Master full-stack web development with modern technologies",
231+
description: "Master full-stack development with modern frameworks like React, Node.js, and databases. Build responsive, interactive web applications.",
232232
icon: "🖥️",
233-
color: "#3b82f6"
233+
color: "#4f46e5"
234234
},
235235
{
236236
title: "Data Science",
237-
description: "Dive into data analysis, visualization, and machine learning",
237+
description: "Learn data analysis, visualization, and machine learning with Python, Pandas, and TensorFlow. Turn data into actionable insights.",
238238
icon: "📊",
239239
color: "#8b5cf6"
240240
},
241241
{
242242
title: "Mobile Apps",
243-
description: "Build cross-platform mobile applications with React Native",
243+
description: "Create beautiful, performant cross-platform mobile applications using React Native and modern mobile development practices.",
244244
icon: "📱",
245245
color: "#10b981"
246246
},
247247
{
248248
title: "DevOps",
249-
description: "Learn CI/CD, Docker, Kubernetes, and cloud deployment",
249+
description: "Master CI/CD, Docker, Kubernetes, and cloud deployment to build scalable, reliable infrastructure and deployment pipelines.",
250250
icon: "⚙️",
251251
color: "#f59e0b"
252252
}
@@ -354,36 +354,81 @@ function StatCard({ value, label, index = 0 }: StatCardProps) {
354354
);
355355
}
356356

357-
function LearningPath({ title, description, icon, color }: LearningPathProps) {
358-
const iconStyle = {
359-
backgroundColor: `${color}10`,
360-
color: color
361-
};
362-
357+
const LearningPath = ({ title, description, icon, color, index }: LearningPathProps & { index: number }) => {
358+
const isEven = index % 2 === 0;
359+
const delay = index * 0.15;
360+
361+
// Calculate position based on index
362+
const topPosition = 100 + (index * 250); // 250px spacing between cards
363+
363364
return (
364-
<article className={styles.learningPath}>
365-
<div
366-
className={styles.pathIcon}
367-
style={iconStyle}
368-
aria-hidden="true"
369-
>
370-
{icon}
371-
</div>
372-
<div className={styles.pathContent}>
373-
<h3 className={styles.pathTitle}>{title}</h3>
374-
<p className={styles.pathDescription}>{description}</p>
375-
</div>
376-
<div className={styles.pathArrow} aria-hidden="true">
377-
→
365+
<motion.article
366+
className={`${styles.pathCard} ${isEven ? styles.left : styles.right} group`}
367+
style={{
368+
'--card-color': color || '#3b82f6',
369+
'--card-color-light': color ? `${color}20` : 'rgba(59, 130, 246, 0.2)',
370+
position: 'absolute',
371+
top: `${topPosition}px`,
372+
[isEven ? 'left' : 'right']: '50%',
373+
transform: isEven ? 'none' : 'translateX(50%)',
374+
marginLeft: isEven ? '0' : 'auto',
375+
marginRight: isEven ? 'auto' : '0',
376+
} as React.CSSProperties}
377+
initial={{ opacity: 0, x: isEven ? -100 : 100, y: 20 }}
378+
animate={{
379+
opacity: 1,
380+
x: 0,
381+
y: 0,
382+
transition: {
383+
type: "spring",
384+
damping: 15,
385+
stiffness: 100,
386+
delay: delay
387+
}
388+
}}
389+
>
390+
<div className="flex items-start gap-4">
391+
<motion.div
392+
className="flex-shrink-0 w-14 h-14 flex items-center justify-center rounded-xl text-2xl"
393+
style={{
394+
background: `linear-gradient(135deg, ${color || '#3b82f6'}, ${color ? `${color}80` : '#2563eb'})`,
395+
boxShadow: `0 4px 15px -5px ${color || '#3b82f6'}80`
396+
}}
397+
whileHover={{
398+
scale: 1.1,
399+
rotate: 5,
400+
transition: { duration: 0.2 }
401+
}}
402+
>
403+
{icon}
404+
</motion.div>
405+
<div className="flex-1">
406+
<h3 className="text-xl font-bold mb-2 text-white">{title}</h3>
407+
<p className="text-gray-300 mb-4 leading-relaxed">{description}</p>
408+
<Link
409+
to="/docs"
410+
className="inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors group-hover:underline"
411+
>
412+
Start Learning
413+
<svg
414+
className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1"
415+
fill="none"
416+
viewBox="0 0 24 24"
417+
stroke="currentColor"
418+
>
419+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
420+
</svg>
421+
</Link>
422+
</div>
378423
</div>
379-
</article>
424+
</motion.article>
380425
);
381-
}
426+
};
382427

383428
export default function GetStarted() {
384429
const { siteConfig } = useDocusaurusContext();
385430
const currentYear = new Date().getFullYear();
386-
431+
387432
return (
388433
<Layout
389434
title={`Get Started | ${siteConfig.title}`}
@@ -449,16 +494,75 @@ export default function GetStarted() {
449494

450495
{/* Learning Paths */}
451496
<AnimatedSection delay={2}>
452-
<div className={styles.sectionHeader}>
453-
<h2>Start Your Journey</h2>
454-
<p>Choose your learning path and start building real projects</p>
455-
</div>
456-
457-
<div className={styles.learningPaths}>
458-
{learningPaths.map((path, idx) => (
459-
<LearningPath key={idx} {...path} />
460-
))}
461-
</div>
497+
<section className={styles.learningPaths}>
498+
<div className="container">
499+
<div className="text-center mb-16">
500+
<motion.h2
501+
className="text-3xl md:text-4xl font-bold mb-4 px-6 py-3 inline-block rounded-xl bg-blue-100 text-gray-900"
502+
initial={{ opacity: 0, y: 20 }}
503+
whileInView={{
504+
opacity: 1,
505+
y: 0,
506+
transition: {
507+
duration: 0.8,
508+
ease: "easeOut"
509+
}
510+
}}
511+
viewport={{ once: true, margin: "-100px 0px -100px 0px" }}
512+
style={{
513+
textShadow: '0 0 10px rgba(255, 213, 0, 0.5)'
514+
}}
515+
>
516+
Start Your Journey
517+
</motion.h2>
518+
</div>
519+
520+
<div className={styles.timelineContainer}>
521+
<div className={styles.timeline}></div>
522+
<div className={styles.pathsContainer}>
523+
{learningPaths.map((path, idx) => (
524+
<LearningPath
525+
key={path.title}
526+
title={path.title}
527+
description={path.description}
528+
icon={path.icon}
529+
color={path.color}
530+
index={idx}
531+
/>
532+
))}
533+
</div>
534+
</div>
535+
536+
<motion.div
537+
className="text-center mt-12"
538+
initial={{ opacity: 0, y: 20 }}
539+
whileInView={{ opacity: 1, y: 0 }}
540+
viewport={{ once: true, margin: "-50px 0px -50px 0px" }}
541+
transition={{ duration: 0.5, delay: 0.3 }}
542+
>
543+
<Link
544+
to="/courses"
545+
className="group inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-200 to-blue-300 text-gray-900 font-semibold text-lg rounded-xl hover:from-blue-300 hover:to-blue-400 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1"
546+
style={{
547+
textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
548+
}}
549+
>
550+
<span className="relative z-10">
551+
Explore All Paths
552+
</span>
553+
<svg
554+
className="w-6 h-6 ml-3 transform group-hover:translate-x-1 transition-transform duration-300"
555+
fill="none"
556+
viewBox="0 0 24 24"
557+
stroke="currentColor"
558+
strokeWidth={2.5}
559+
>
560+
<path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
561+
</svg>
562+
</Link>
563+
</motion.div>
564+
</div>
565+
</section>
462566
</AnimatedSection>
463567

464568
{/* Final CTA */}

0 commit comments

Comments
 (0)