diff --git a/src/components/LearningPath.jsx b/src/components/LearningPath.jsx index 242b01a..a21150f 100644 --- a/src/components/LearningPath.jsx +++ b/src/components/LearningPath.jsx @@ -2,99 +2,357 @@ import { useState } from 'react' import { learningStages, resources } from '../data/resources' import { HighlightedText } from './Tooltip' -const featuredResources = resources.slice(0, 3) +const stageDetailsMap = { + 1: { + skills: ["Python programming fundamentals", "Variables, loops, and functions", "Understanding algorithms", "Basic command line & Git basics"], + highlightText: "This foundational stage is designed for absolute beginners. You'll master Python, which is the universal language of AI, and build confidence in computational thinking." + }, + 2: { + skills: ["Supervised vs Unsupervised learning", "Data cleaning & feature engineering", "Regression and Classification models", "Working with Pandas, NumPy, and Scikit-Learn"], + highlightText: "Now you'll dive into the core of Machine Learning. You will learn how computers learn from data patterns, clean datasets, and train your very first predictive models." + }, + 3: { + skills: ["Neural networks & Deep Learning", "Large Language Models (LLMs) & Prompts", "Developing and deploying AI web apps", "Using PyTorch and Hugging Face API"], + highlightText: "Level up to deep learning and generative AI. You'll work with advanced neural networks, leverage pre-trained LLMs, and build functional AI web applications." + }, + 4: { + skills: ["Contributing to open-source codebases", "Git collaboration & Pull Request workflows", "Weekly mentoring with women engineers", "Building real-world AI impact products"], + highlightText: "Put your skills into action! Join the HerStack Summer of AI program. You will collaborate on real open-source AI projects, receive 1:1 mentorship, and earn an industry-recognized certificate." + } +}; export default function LearningPath() { const [activeStage, setActiveStage] = useState(1) + const activeStageData = learningStages.find(s => s.id === activeStage) + const activeResources = resources.filter(r => r.stage === activeStage) + return ( -
-
+
+ {/* Header */} +
+
Start Here
+

Your path into AI,
step by step

+

No idea where to begin? We've mapped out exactly what to learn and in what order.

+
- {/* Left: Steps */} -
-
Start Here
-

Your path into AI,
step by step

-

No idea where to begin? We've mapped out exactly what to learn and in what order.

+ {/* Desktop Roadmap (Hidden on Mobile) */} +
+ {/* Connection Line */} +
+
+
-
- {learningStages.map((stage, i) => ( + {/* Nodes */} +
+ {learningStages.map((stage) => { + const isCompleted = stage.id < activeStage; + const isActive = stage.id === activeStage; + return ( + ); + })} +
+
+ + {/* Mobile Roadmap (Hidden on Desktop) */} +
+ {/* Connection Line */} +
+
+
+ + {/* Nodes */} +
+ {learningStages.map((stage) => { + const isCompleted = stage.id < activeStage; + const isActive = stage.id === activeStage; + return ( + - ))} + ); + })} +
+
+ + {/* Stage Details Section */} +
+ {/* Left Column: Stage Details (5 Columns) */} +
+
+
+ + {activeStageData.tag} + +

+ {activeStageData.title} +

+

+ +

+
+ +
+
+ What you'll master: +
+
    + {stageDetailsMap[activeStage].skills.map((skill, index) => ( +
  • + + + + {skill} +
    • + ))} +
+
- {/* Right: Resource cards */} -
- {featuredResources.map((r, i) => ( - -
+
+

+ {activeStage === 4 ? 'Program Opportunities' : 'Curated Resources'} +

+ {activeStage !== 4 && ( + + {activeResources.length} {activeResources.length === 1 ? 'resource' : 'resources'} available + + )} +
+ +
+ {activeResources.map((r) => ( + -
- {r.platform} -
-
- {r.title} +
+
+
+ + {r.platform} + + + {r.durationWeeks} {r.durationWeeks === 1 ? 'week' : 'weeks'} + +
+
+ +
+ + {/* Tags */} +
+ {r.tags.map((tag) => ( + + #{tag} + + ))} +
+
+ +
+ {r.free && Free} + {r.hasCert && Certificate} + {r.difficulty} +
-
- {r.free && Free} - {r.hasCert && Certificate} - {r.difficulty} + + ))} + + {activeStage === 4 && ( +
+
+ {/* Decorative background circle */} +
+ +
+
+ HERSTACK PROGRAM +
+
+ Summer of AI 2026 +
+

+ A specialized open-source program where you get to work on active repositories, learn professional Git workflows, participate in code reviews, and earn credit for your career. +

+
+ + { + e.currentTarget.style.transform = 'translateY(-2px)'; + e.currentTarget.style.boxShadow = '0 6px 20px rgba(0,0,0,0.15)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = 'none'; + }} + > + Join the Waitlist Now → +
- - ))} + )} +