feat: Visual Storyboard for "How Neural Networks Learn" closes #45

[Nagajyothi-tammisetti]

🎨 What does this PR do?

This PR implements the Visual Storyboard for "How Neural Networks Learn" as proposed in Issue #45.

It introduces a fully interactive and beginner-friendly storyboard available at:

/storyboards/neural-network

The storyboard explains how neural networks work using a simple real-life analogy of a child named Zara learning to identify fruits. The implementation avoids complex mathematics and technical jargon, making the concept easier to understand for beginners and students.

The storyboard includes 6 interactive scenes covering:

• Input Layer
• Hidden Layers
• Pattern Recognition
• Learning Process
• Feedback & Correction
• Final Prediction

Each scene contains:

• Interactive visual explanations
• Beginner-friendly storytelling
• Key takeaway sections
• Smooth navigation controls
• Responsive UI support

---

✨ Features Added

• Interactive 6-scene storyboard
• Beginner-friendly neural network explanation
• Fully responsive layout
• Dynamic storyboard routing
• Available badge support for concept cards
• Scene navigation buttons and indicators
• Final recap summary section
• Accessibility and UI improvements

---

📁 Files Modified

• src/pages/NeuralNetworkStoryboard.jsx — Added complete storyboard implementation
• src/data/storyboards.js — Added storyboard availability and slug
• src/App.jsx — Registered storyboard route
• src/pages/Concepts.jsx — Added clickable storyboard cards

---

🛠 Tech Stack

• React.js
• Tailwind CSS
• React Router
• CSS Variables

---

📸 Screenshots

🏠 Homepage (/)

• Neural Network card now displays an Available badge in the Concepts section.

📚 Concepts Page (/concepts)

• Neural Network concept card is now clickable and redirects users to the storyboard page.

🧠 Storyboard Page (/storyboards/neural-network)

• Interactive storyboard scenes with visual learning flow, animated cards, navigation controls, and summary recap section.

---

✅ Testing

• Tested locally using npm run dev
• Verified responsive design
• Checked route navigation
• Confirmed no console errors
• Validated accessibility and UI consistency

---

🔗 Related Issue

Closes #45

[vercel]

@Nagajyothi-tammisetti is attempting to deploy a commit to the HerStack's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Nagajyothi-tammisetti]

mark the points as per GSSoC contribution guidelines? Thanks!