From 8880e30b7635d0f91f67e8fba2d8c4477438ac6e Mon Sep 17 00:00:00 2001
From: Anshika Guleria <anshikaguleria532@gmail.com>
Date: Fri, 29 May 2026 10:11:19 +0530
Subject: [PATCH] Add dedicated concept learning pages with curated resources

Signed-off-by: Anshika Guleria <anshikaguleria532@gmail.com>
---
 package-lock.json              |  11 +
 src/App.jsx                    |  23 +-
 src/components/ConceptPage.jsx | 613 +++++++++++++++++++++++++
 src/data/conceptData.js        | 804 +++++++++++++++++++++++++++++++++
 src/data/storyboards.js        |   6 +
 src/pages/Concepts.jsx         |   6 +
 6 files changed, 1454 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ConceptPage.jsx
 create mode 100644 src/data/conceptData.js

diff --git a/package-lock.json b/package-lock.json
index b61648b..ec499e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1255,6 +1256,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1300,6 +1302,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1649,6 +1652,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2270,6 +2274,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3401,6 +3406,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -3969,6 +3975,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4180,6 +4187,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4191,6 +4199,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -4970,6 +4979,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5161,6 +5171,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/src/App.jsx b/src/App.jsx
index 7ee77a4..a734de7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,20 +1,21 @@
-import './styles/globals.css'
 import { useEffect } from 'react'
-import { Routes, Route, useLocation } from 'react-router-dom'
-import Nav from './components/Nav'
+import { Route, Routes, useLocation } from 'react-router-dom'
+import BackToTopButton from './components/Backtotop'
+import ConceptPage from './components/ConceptPage'
+import Contribute from './components/Contribute'
+import FAQ from './components/FAQ'
 import Footer from './components/Footer'
 import Hero from './components/Hero'
+import LearningPath from './components/LearningPath'
 import Marquee from './components/Marquee'
+import Mentors from './components/Mentors'
+import Nav from './components/Nav'
+import OurMission from './components/OurMission'
 import Pillars from './components/Pillars'
-import LearningPath from './components/LearningPath'
 import Storyboards from './components/Storyboards'
-import Mentors from './components/Mentors'
 import SummerOfAI from './components/SummerOfAI'
-import Contribute from './components/Contribute'
-import FAQ from './components/FAQ'
 import Concepts from './pages/Concepts'
-import BackToTopButton from './components/Backtotop'
-import OurMission from './components/OurMission'
+import './styles/globals.css'
 
 function ScrollToTop() {
   const { pathname } = useLocation()
@@ -49,6 +50,10 @@ export default function App() {
               } />
               <Route path="/our-mission" element={<OurMission />} />
               <Route path="/concepts" element={<Concepts />} />
+              <Route
+  path="/concepts/:slug"
+  element={<ConceptPage />}
+/>
           </Routes>
       </main>
       <Footer />
diff --git a/src/components/ConceptPage.jsx b/src/components/ConceptPage.jsx
new file mode 100644
index 0000000..07a4f65
--- /dev/null
+++ b/src/components/ConceptPage.jsx
@@ -0,0 +1,613 @@
+import { useMemo, useState } from "react";
+import { FaArrowRight } from "react-icons/fa";
+import { Link, useParams } from "react-router-dom";
+import { getConceptBySlug } from "../data/conceptData";
+
+function extractYouTubeId(url = "") {
+  // handles youtu.be/ID, watch?v=ID, embed/ID
+  const patterns = [
+    /youtu\.be\/([^?&#]+)/,
+    /[?&]v=([^?&#]+)/,
+    /embed\/([^?&#]+)/,
+    /youtube\.com\/shorts\/([^?&#]+)/,
+  ];
+  for (const re of patterns) {
+    const m = url.match(re);
+    if (m) return m[1];
+  }
+  return null;
+}
+
+function getTypeIcon(type) {
+  switch (type) {
+    case "video": return "🎥";
+    case "github": return "💻";
+    case "docs": return "📚";
+    case "article": return "📖";
+    default: return "🔗";
+  }
+}
+
+function getTypeLabel(type) {
+  switch (type) {
+    case "video": return "Video";
+    case "github": return "GitHub";
+    case "docs": return "Docs";
+    case "article": return "Article";
+    default: return "Link";
+  }
+}
+
+const DIFFICULTY_CHIP = {
+  intermediate: { bg: "rgba(0,201,167,0.18)", border: "rgba(0,201,167,0.35)" },
+  advanced: { bg: "rgba(245,166,35,0.18)", border: "rgba(245,166,35,0.35)" },
+  beginner: { bg: "rgba(123,92,240,0.18)", border: "rgba(123,92,240,0.35)" },
+};
+
+//progresshook 
+
+function useProgress(slug) {
+  const key = `concept-done-${slug}`;
+  const [done, setDone] = useState(() => {
+    try { return localStorage.getItem(key) === "1"; } catch { return false; }
+  });
+  const toggle = () => setDone((prev) => {
+    const next = !prev;
+    try { next ? localStorage.setItem(key, "1") : localStorage.removeItem(key); } catch { }
+    return next;
+  });
+  return [done, toggle];
+}
+
+//videoplayer 
+
+function YouTubeVideoPlayer({ url, title }) {
+  const id = extractYouTubeId(url);
+  if (!id) return null;
+  return (
+    <div style={{ borderRadius: 20, overflow: "hidden", border: "1px solid rgba(255,255,255,0.1)", background: "#000" }}>
+      <div style={{ position: "relative", paddingBottom: "56.25%", height: 0 }}>
+        <iframe
+          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
+          src={`https://www.youtube.com/embed/${id}`}
+          title={title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </div>
+    </div>
+  );
+}
+
+// resource card
+
+function LearningResourceCard({ resource }) {
+  const [expanded, setExpanded] = useState(false);
+  const isVideo = resource.type === "video";
+  const hasEmbed = isVideo && !!extractYouTubeId(resource.url);
+
+  return (
+    <div
+      style={{
+        borderRadius: 20,
+        border: "1px solid rgba(255,255,255,0.1)",
+        background: "rgba(255,255,255,0.03)",
+        overflow: "hidden",
+        transition: "border-color 0.2s",
+      }}
+      onMouseEnter={(e) => e.currentTarget.style.borderColor = "rgba(168,85,247,0.4)"}
+      onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"}
+    >
+
+      <div style={{ display: "flex", alignItems: "flex-start", gap: 16, padding: "20px 24px" }}>
+
+        <div
+          style={{
+            width: 48, height: 48, borderRadius: 14, flexShrink: 0,
+            background: "linear-gradient(135deg, rgba(124,58,237,0.2), rgba(6,182,212,0.2))",
+            display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22,
+          }}
+        >
+          {getTypeIcon(resource.type)}
+        </div>
+
+  
+        <div style={{ flex: 1, minWidth: 0 }}>
+          //badges
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 6 }}>
+            <TypeBadge type={resource.type} />
+            {resource.difficulty && <MetaBadge label={resource.difficulty} />}
+            {resource.free && <MetaBadge label="Free" accent />}
+            {resource.hasCert && <MetaBadge label="Certificate" />}
+          </div>
+
+          <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600, color: "white", lineHeight: 1.35 }}>
+            {resource.title}
+          </h3>
+
+          {resource.meta && (
+            <p style={{ margin: "4px 0 0", fontSize: 13, color: "rgba(255,255,255,0.5)" }}>
+              {resource.meta}
+            </p>
+          )}
+        </div>
+
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            flexShrink: 0,
+          }}
+        >
+          {hasEmbed && (
+            <button
+              onClick={() => setExpanded((v) => !v)}
+              style={{
+                background: expanded
+                  ? "rgba(168,85,247,0.25)"
+                  : "rgba(255,255,255,0.06)",
+                border: `1px solid ${expanded
+                    ? "rgba(168,85,247,0.5)"
+                    : "rgba(255,255,255,0.15)"
+                  }`,
+                borderRadius: 10,
+                padding: "6px 14px",
+                fontSize: 12,
+                fontWeight: 600,
+                color: expanded
+                  ? "rgba(216,180,254,1)"
+                  : "rgba(255,255,255,0.8)",
+                cursor: "pointer",
+                transition: "all 0.15s",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {expanded ? "▲ Hide" : "▶ Watch"}
+            </button>
+          )}
+
+          <a
+            href={resource.url}
+            target="_blank"
+            rel="noreferrer"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "8px 14px",
+              borderRadius: 999,
+              textDecoration: "none",
+              fontSize: 13,
+              fontWeight: 600,
+              color: "rgba(255,255,255,0.9)",
+              background: "rgba(168,85,247,0.12)",
+              border: "1px solid rgba(168,85,247,0.22)",
+              transition: "all 0.18s ease",
+              whiteSpace: "nowrap",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background =
+                "rgba(168,85,247,0.18)";
+              e.currentTarget.style.borderColor =
+                "rgba(168,85,247,0.4)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background =
+                "rgba(168,85,247,0.12)";
+              e.currentTarget.style.borderColor =
+                "rgba(168,85,247,0.22)";
+            }}
+          >
+            Learn
+
+            <div
+              style={{
+                width: 20,
+                height: 20,
+                borderRadius: 999,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "rgba(255,255,255,0.08)",
+              }}
+            >
+              <FaArrowRight
+                style={{
+                  fontSize: "9px",
+                  color: "rgba(255,255,255,0.9)",
+                }}
+              />
+            </div>
+          </a>
+        </div>
+      </div>
+
+      {/* inline video player */}
+      {hasEmbed && expanded && (
+        <div style={{ padding: "0 24px 24px" }}>
+          <YouTubeVideoPlayer url={resource.url} title={resource.title} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TypeBadge({ type }) {
+  const colors = {
+    video: { bg: "rgba(239,68,68,0.15)", border: "rgba(239,68,68,0.35)", color: "rgba(252,165,165,1)" },
+    github: { bg: "rgba(55,65,81,0.4)", border: "rgba(156,163,175,0.3)", color: "rgba(209,213,219,1)" },
+    docs: { bg: "rgba(14,165,233,0.15)", border: "rgba(14,165,233,0.35)", color: "rgba(125,211,252,1)" },
+    article: { bg: "rgba(234,179,8,0.15)", border: "rgba(234,179,8,0.35)", color: "rgba(253,224,71,1)" },
+  };
+  const s = colors[type] ?? { bg: "rgba(255,255,255,0.08)", border: "rgba(255,255,255,0.2)", color: "rgba(255,255,255,0.7)" };
+  return (
+    <span style={{
+      fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase",
+      padding: "3px 10px", borderRadius: 99, background: s.bg, border: `1px solid ${s.border}`, color: s.color,
+    }}>
+      {getTypeLabel(type)}
+    </span>
+  );
+}
+
+function MetaBadge({ label, accent }) {
+  return (
+    <span style={{
+      fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase",
+      padding: "3px 10px", borderRadius: 99,
+      background: accent ? "rgba(0,201,167,0.15)" : "rgba(255,255,255,0.07)",
+      border: `1px solid ${accent ? "rgba(0,201,167,0.35)" : "rgba(255,255,255,0.12)"}`,
+      color: accent ? "rgba(52,211,153,1)" : "rgba(255,255,255,0.6)",
+    }}>
+      {label}
+    </span>
+  );
+}
+
+//filter pills
+
+function FilterPills({ options, active, onChange }) {
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 24 }}>
+      {["all", ...options].map((t) => {
+        const isActive = active === t;
+        return (
+          <button
+            key={t}
+            onClick={() => onChange(t)}
+            style={{
+              padding: "8px 18px", borderRadius: 99, fontSize: 13, fontWeight: 600, cursor: "pointer",
+              border: `1px solid ${isActive ? "rgba(168,85,247,0.6)" : "rgba(255,255,255,0.15)"}`,
+              background: isActive ? "rgba(168,85,247,0.2)" : "rgba(255,255,255,0.04)",
+              color: isActive ? "rgba(216,180,254,1)" : "rgba(255,255,255,0.7)",
+              transition: "all 0.15s",
+              textTransform: "capitalize",
+            }}
+          >
+            {t === "all" ? "All" : getTypeLabel(t)}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// stat pill
+
+function StatPill({ label, value }) {
+  return (
+    <div style={{
+      padding: "12px 20px", borderRadius: 16,
+      background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)",
+    }}>
+      <div style={{ color: "white", fontSize: 18, fontWeight: 700 }}>{value}</div>
+      <div style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(255,255,255,0.4)", marginTop: 2 }}>{label}</div>
+    </div>
+  );
+}
+
+
+
+export default function ConceptPage() {
+  const { slug } = useParams();
+  const concept = getConceptBySlug(slug);
+  const [done, toggleDone] = useProgress(slug);
+
+  if (!concept) {
+    return (
+      <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 24, color: "white", background: "var(--ink)" }}>
+        <p style={{ fontSize: 18 }}>Concept not found</p>
+        <Link to="/concepts" style={{ borderRadius: 99, border: "1px solid rgba(255,255,255,0.2)", padding: "8px 20px", fontSize: 14, color: "white", textDecoration: "none" }}>
+          ← Back to all concepts
+        </Link>
+      </div>
+    );
+  }
+
+  const featuredId = concept.featuredVideo?.youtubeId;
+  const rawResources = useMemo(() => {
+    if (!featuredId) return concept.resources;
+    return concept.resources.filter((r) => {
+      const rid = extractYouTubeId(r.url);
+      return rid !== featuredId;
+    });
+  }, [concept.resources, featuredId]);
+
+  const resourceTypes = useMemo(() => {
+    const set = new Set(rawResources.map((r) => r.type).filter(Boolean));
+    return Array.from(set);
+  }, [rawResources]);
+
+  const [resourceType, setResourceType] = useState("all");
+  const filteredResources = useMemo(() => {
+    if (resourceType === "all") return rawResources;
+    return rawResources.filter((r) => r.type === resourceType);
+  }, [rawResources, resourceType]);
+
+  const videoCount = rawResources.filter((r) => r.type === "video").length;
+  const diffKey = (concept.difficulty || "").toLowerCase();
+  const chip = DIFFICULTY_CHIP[diffKey] ?? DIFFICULTY_CHIP.beginner;
+
+  return (
+    <main style={{ minHeight: "100vh", background: "var(--ink)" }}>
+
+
+      <section style={{ position: "relative", overflow: "hidden" }}>
+        <div style={{
+          position: "absolute", inset: 0, opacity: 0.9,
+          background: concept.gradient || "linear-gradient(135deg, rgba(124,58,237,0.45), rgba(6,182,212,0.35))",
+        }} />
+
+        <div style={{ position: "relative", maxWidth: 1152, margin: "0 auto", padding: "96px 24px 80px" }}>
+
+          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 10 }}>
+            {concept.status && (
+              <span style={{
+                padding: "8px 16px", borderRadius: 99, fontSize: 11, fontWeight: 700,
+                letterSpacing: "0.2em", textTransform: "uppercase",
+                background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.12)",
+                color: "rgba(255,255,255,0.85)",
+              }}>
+                {String(concept.status).replace("-", " ")}
+              </span>
+            )}
+            <span style={{
+              padding: "8px 16px", borderRadius: 99, fontSize: 11, fontWeight: 700,
+              letterSpacing: "0.2em", textTransform: "uppercase",
+              background: chip.bg, border: `1px solid ${chip.border}`, color: "rgba(255,255,255,0.9)",
+            }}>
+              {concept.difficulty}
+            </span>
+          </div>
+
+          <div style={{ fontSize: 80, marginTop: 32 }}>{concept.icon}</div>
+
+          <h1 style={{
+            marginTop: 24, fontWeight: 700, lineHeight: 1, letterSpacing: "-0.04em",
+            fontSize: "clamp(2.5rem, 7vw, 5.5rem)", color: "white",
+          }}>
+            {concept.title}
+          </h1>
+
+          <p style={{ marginTop: 24, maxWidth: 680, fontSize: 18, lineHeight: 1.7, color: "rgba(255,255,255,0.6)" }}>
+            {concept.description}
+          </p>
+
+          {/* stat pills + mark done */}
+          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12, marginTop: 36 }}>
+            <StatPill label="Resources" value={rawResources.length} />
+            <StatPill label="Videos" value={videoCount} />
+            {concept.estimatedTime && <StatPill label="Learning Time" value={concept.estimatedTime} />}
+
+            <button
+              onClick={toggleDone}
+              style={{
+                marginLeft: "auto", padding: "12px 24px", borderRadius: 99, fontSize: 14,
+                fontWeight: 600, cursor: "pointer", transition: "all 0.2s",
+                background: done ? "rgba(0,201,167,0.25)" : "rgba(255,255,255,0.07)",
+                border: `1px solid ${done ? "rgba(0,201,167,0.5)" : "rgba(255,255,255,0.2)"}`,
+                color: done ? "rgba(52,211,153,1)" : "rgba(255,255,255,0.75)",
+              }}
+            >
+              {done ? "✓ Completed" : "Mark as complete"}
+            </button>
+          </div>
+        </div>
+      </section>
+
+      //StoryBoard
+      <section style={{ maxWidth: 1152, margin: "0 auto", padding: "80px 24px" }}>
+        <SectionLabel>Visual Storyboard</SectionLabel>
+        <h2 style={{ fontSize: 36, fontWeight: 700, color: "white", margin: "12px 0 40px" }}>
+          Understanding the Concept
+        </h2>
+
+        {concept.storyboard.length > 0 ? (
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 20, position: "relative" }}>
+            {concept.storyboard.map((step, i) => (
+              <div key={step.title} style={{ position: "relative" }}>
+                {/* connector line */}
+                {i < concept.storyboard.length - 1 && (
+                  <div style={{
+                    display: "none", // shown via CSS at md+ if you have responsive setup
+                    position: "absolute", right: -10, top: "50%",
+                    transform: "translateY(-50%)",
+                    width: 20, height: 2,
+                    background: "linear-gradient(90deg, rgba(168,85,247,0.5), rgba(6,182,212,0.5))",
+                    zIndex: 1,
+                  }} />
+                )}
+                <div style={{
+                  borderRadius: 24, padding: 32,
+                  border: "1px solid rgba(255,255,255,0.1)",
+                  background: "rgba(255,255,255,0.03)",
+                  height: "100%",
+                  transition: "border-color 0.2s, transform 0.2s",
+                }}
+                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = "rgba(168,85,247,0.4)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.transform = ""; }}
+                >
+                  {/* step number */}
+                  <div style={{
+                    display: "inline-flex", alignItems: "center", justifyContent: "center",
+                    width: 36, height: 36, borderRadius: 10,
+                    background: "rgba(168,85,247,0.2)", border: "1px solid rgba(168,85,247,0.4)",
+                    fontSize: 15, fontWeight: 700, color: "rgba(216,180,254,1)", marginBottom: 16,
+                  }}>
+                    {i + 1}
+                  </div>
+
+                  <h3 style={{ margin: "0 0 12px", fontSize: 22, fontWeight: 700, color: "white" }}>
+                    {step.title}
+                  </h3>
+
+                  <p style={{ margin: 0, color: "rgba(255,255,255,0.6)", lineHeight: 1.7, fontSize: 15 }}>
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div style={{
+            borderRadius: 24, border: "1px solid rgba(255,255,255,0.1)",
+            background: "rgba(255,255,255,0.03)", padding: 48, textAlign: "center",
+          }}>
+            <p style={{ fontSize: 22, fontWeight: 700, color: "white", margin: "0 0 12px" }}>Visual explainer coming soon</p>
+            <p style={{ color: "rgba(255,255,255,0.6)", maxWidth: 480, margin: "0 auto 32px", lineHeight: 1.7 }}>
+              We're building the step-by-step storyboard for this concept. Check back soon or browse other concepts.
+            </p>
+            <Link to="/concepts" style={{
+              display: "inline-block", borderRadius: 99, border: "1px solid rgba(255,255,255,0.2)",
+              padding: "12px 24px", fontSize: 14, color: "white", textDecoration: "none",
+            }}>
+              Browse all concepts
+            </Link>
+          </div>
+        )}
+      </section>
+
+     //Featured video
+      {concept.featuredVideo && (
+        <section style={{ maxWidth: 1152, margin: "0 auto", padding: "0 24px 80px" }}>
+          <SectionLabel>Featured Lesson</SectionLabel>
+          <h2 style={{ fontSize: 36, fontWeight: 700, color: "white", margin: "12px 0 32px" }}>
+            Watch &amp; Learn
+          </h2>
+
+          <div style={{ borderRadius: 28, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.03)", overflow: "hidden" }}>
+            <div style={{ position: "relative", paddingBottom: "56.25%", height: 0, background: "#000" }}>
+              <iframe
+                style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
+                src={`https://www.youtube.com/embed/${concept.featuredVideo.youtubeId}`}
+                title={concept.featuredVideo.title}
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            </div>
+            <div style={{ padding: "28px 32px" }}>
+              <h3 style={{ margin: "0 0 8px", fontSize: 22, fontWeight: 700, color: "white" }}>
+                {concept.featuredVideo.title}
+              </h3>
+              {concept.featuredVideo.description && (
+                <p style={{ margin: 0, color: "rgba(255,255,255,0.6)", lineHeight: 1.7 }}>
+                  {concept.featuredVideo.description}
+                </p>
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+
+      //Resources
+      {rawResources.length > 0 && (
+        <section style={{ maxWidth: 1152, margin: "0 auto", padding: "0 24px 80px" }}>
+          <SectionLabel>Continue Learning</SectionLabel>
+          <h2 style={{ fontSize: 36, fontWeight: 700, color: "white", margin: "12px 0 32px" }}>
+            Curated Resources
+          </h2>
+
+          {resourceTypes.length > 1 && (
+            <FilterPills
+              options={resourceTypes}
+              active={resourceType}
+              onChange={setResourceType}
+            />
+          )}
+
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            {filteredResources.map((resource) => (
+              <LearningResourceCard key={resource.title + resource.url} resource={resource} />
+            ))}
+          </div>
+
+          {filteredResources.length === 0 && (
+            <div style={{ textAlign: "center", padding: 48, color: "rgba(255,255,255,0.4)", fontSize: 15 }}>
+              No {resourceType} resources for this concept yet.
+            </div>
+          )}
+        </section>
+      )}
+
+      //next concepts
+      {concept.nextConcepts?.length > 0 && (
+        <section style={{ maxWidth: 1152, margin: "0 auto", padding: "0 24px 96px" }}>
+          <SectionLabel>Continue Your Journey</SectionLabel>
+          <h2 style={{ fontSize: 36, fontWeight: 700, color: "white", margin: "12px 0 32px" }}>
+            Learn Next
+          </h2>
+
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 20 }}>
+            {concept.nextConcepts.map((next) => (
+              <Link
+                key={next.title}
+                to={next.slug ? `/concepts/${next.slug}` : "/concepts"}
+                style={{ textDecoration: "none" }}
+              >
+                <div
+                  style={{
+                    borderRadius: 24, padding: 32,
+                    border: "1px solid rgba(255,255,255,0.1)",
+                    background: "linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02))",
+                    transition: "border-color 0.2s, transform 0.2s",
+                    height: "100%",
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = "rgba(168,85,247,0.4)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.transform = ""; }}
+                >
+                  <div style={{ fontSize: 44, marginBottom: 20 }}>{next.icon}</div>
+                  <h3 style={{ margin: "0 0 8px", fontSize: 22, fontWeight: 700, color: "white" }}>
+                    {next.title}
+                  </h3>
+                  <p style={{ margin: 0, color: "rgba(255,255,255,0.45)", fontSize: 14, fontWeight: 500 }}>
+                    {next.difficulty}
+                  </p>
+                  {next.reason && (
+                    <p style={{ margin: "10px 0 0", color: "rgba(255,255,255,0.55)", fontSize: 14, lineHeight: 1.6 }}>
+                      {next.reason}
+                    </p>
+                  )}
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+    </main>
+  );
+}
+
+// tiny section label 
+
+function SectionLabel({ children }) {
+  return (
+    <div style={{
+      fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase",
+      color: "rgba(255,255,255,0.3)", fontWeight: 600,
+    }}>
+      {children}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/data/conceptData.js b/src/data/conceptData.js
new file mode 100644
index 0000000..40decd3
--- /dev/null
+++ b/src/data/conceptData.js
@@ -0,0 +1,804 @@
+import { resources as learningResources } from "./resources";
+import { storyboards } from "./storyboards";
+
+function capitalizeDifficulty(difficulty) {
+  if (!difficulty) return "";
+  return difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
+}
+
+function resourceTypeFromTags(tags = [], url = "") {
+  const t = (tags || []).map(String);
+  if (url.includes("github.com") || t.includes("github")) return "github";
+  if (t.includes("video")) return "video";
+  if (t.includes("article")) return "article";
+  return "docs";
+}
+
+function toConceptResource(r) {
+  const type = resourceTypeFromTags(r.tags, r.url);
+  const bits = [];
+  if (r.difficulty) bits.push(r.difficulty);
+  if (typeof r.stage !== "undefined" && r.stage !== null) bits.push(`Stage ${r.stage}`);
+  if (r.free) bits.push("Free");
+  if (r.hasCert) bits.push("Certificate");
+  return {
+    type, title: r.title, url: r.url, meta: bits.join(" • "),
+    platform: r.platform, difficulty: r.difficulty,
+    stage: r.stage, free: r.free, hasCert: r.hasCert,
+  };
+}
+
+function slugToTagHints(slug) {
+  switch (slug) {
+    case "machine-learning":             return ["ml", "ai", "data", "python", "overview", "no-code"];
+    case "large-language-models":        return ["llm", "prompting", "ai", "overview"];
+    case "classification-vs-regression": return ["ml", "data", "python", "tensorflow"];
+    case "neural-networks":              return ["deep-learning", "pytorch", "python", "ml"];
+    case "loss-and-training":            return ["deep-learning", "pytorch", "python", "ml"];
+    case "datasets":                     return ["data", "ml", "python"];
+    default:                             return ["ai", "ml", "python"];
+  }
+}
+
+function getFallbackResourcesForSlug(slug) {
+  const hints = slugToTagHints(slug);
+  const scored = learningResources
+    .map((r) => {
+      const tags = (r.tags || []).map(String);
+      const score = tags.reduce((acc, tag) => acc + (hints.includes(tag) ? 1 : 0), 0);
+      return { r, score };
+    })
+    .sort((a, b) => b.score - a.score);
+  const best = scored.filter((x) => x.score > 0).slice(0, 5);
+  const fallback = best.length ? best : scored.slice(0, 5);
+  return fallback.map(({ r }) => toConceptResource(r));
+}
+
+export function getConceptBySlug(slug) {
+  const normalized = slug?.trim();
+  if (!normalized) return null;
+  const card   = storyboards.find((item) => item.slug?.trim() === normalized);
+  const detail = conceptData.find((item) => item.slug?.trim() === normalized);
+  if (!card && !detail) return null;
+  const fallbackResources = getFallbackResourcesForSlug(normalized);
+  const mergedResources =
+    detail?.resources && detail.resources.length > 0 ? detail.resources : fallbackResources;
+  return {
+    slug: normalized,
+    title:         detail?.title         ?? card?.title       ?? "",
+    icon:          detail?.icon          ?? card?.emoji        ?? "📖",
+    description:   detail?.description   ?? card?.description  ?? "",
+    difficulty:    detail?.difficulty    ?? capitalizeDifficulty(card?.difficulty),
+    estimatedTime: detail?.estimatedTime ?? null,
+    storyboard:    detail?.storyboard    ?? [],
+    featuredVideo: detail?.featuredVideo ?? null,
+    resources:     mergedResources       ?? [],
+    nextConcepts:  detail?.nextConcepts  ?? [],
+    status:        card?.status          ?? null,
+    gradient:      card?.gradient        ?? null,
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Featured Videos (6 total)
+//   machine-learning      StatQuest: A Gentle Introduction to ML
+//   large-language-models Karpathy: Intro to Large Language Models
+//   classification        StatQuest: Classification vs Regression
+//    neural-networks       3B1B: But what is a neural network? ch.1
+//   loss-and-training     3B1B: Gradient Descent ch.2
+//    datasets              How Datasets Work in ML
+//
+// Resources (11 total)
+//    machine-learning      freeCodeCamp: ML for Everybody (Kylie Ying)
+//    machine-learning      IBM Technology: ML Explained
+//    machine-learning      MIT OCW 6.0002: Introduction to ML
+//    large-language-models 3B1B: But what is a GPT? (transformers ch.5)
+//    classification        StatQuest: Bias and Variance
+//    neural-networks       StatQuest: Neural Networks – Inside the Black Box
+//    neural-networks       IBM: Neural Networks Explained in 5 min
+//  loss-and-training     3B1B: Backpropagation ch.3
+//   loss-and-training     StatQuest: Gradient Descent Step-by-Step
+//    loss-and-training     Karpathy: Building micrograd from scratch
+//    datasets              StatQuest: Train/Test/Validation Split
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const conceptData = [
+
+ 
+  {
+    slug: "machine-learning",
+    title: "What is Machine Learning?",
+    icon: "🧠",
+    difficulty: "Beginner",
+    estimatedTime: "15 min",
+    description:
+      "Learn how computers discover patterns in data and use those patterns to make predictions — without being explicitly programmed.",
+    storyboard: [
+      {
+        title: "Collect Data",
+        description:
+          "Machine learning starts with examples. The more high-quality examples you feed the algorithm, the better it can learn.",
+      },
+      {
+        title: "Learn Patterns",
+        description:
+          "Algorithms identify relationships and structure hidden inside the data — things a human might never spot manually.",
+      },
+      {
+        title: "Make Predictions",
+        description:
+          "The trained model applies what it learned to brand-new data, making predictions or decisions automatically.",
+      },
+    ],
+    featuredVideo: {
+      title: "A Gentle Introduction to Machine Learning — StatQuest",
+      youtubeId: "Gv9_4yMHFhI",
+      description:
+        "Josh Starmer cuts through ML hype and builds the essential foundations in plain language. The perfect first video for any beginner.",
+    },
+    resources: [
+
+      {
+        type: "video",
+        title: "Machine Learning for Everybody – Full Course",
+        url: "https://www.youtube.com/watch?v=i_LwzRVP7bg",
+        meta: "freeCodeCamp · Kylie Ying (MIT/CERN) · ~4 hrs · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "video",
+        title: "Machine Learning Explained: ML, AI & Deep Learning",
+        url: "https://www.youtube.com/watch?v=znF2U_3Z210",
+        meta: "IBM Technology · Non-technical overview · 2025 · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "video",
+        title: "Introduction to Machine Learning – MIT 6.0002",
+        url: "https://www.youtube.com/watch?v=h0e2HAPTGF4",
+        meta: "MIT OpenCourseWare · Prof. Eric Grimson · University-grade · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "A Visual Introduction to Machine Learning — R2D3",
+        url: "http://www.r2d3.us/visual-intro-to-machine-learning-part-1/",
+        meta: "R2D3 · Award-winning animated scrollytelling explainer · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "An Overview of Deep Learning for Curious People — Lilian Weng",
+        url: "https://lilianweng.github.io/posts/2017-06-21-overview/",
+        meta: "Lilian Weng (OpenAI) · Dense but accessible survey · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "What is Machine Learning? — IBM Think",
+        url: "https://www.ibm.com/think/topics/machine-learning",
+        meta: "IBM · Comprehensive, regularly updated · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "docs",
+        title: "Google Machine Learning Crash Course",
+        url: "https://developers.google.com/machine-learning/crash-course",
+        meta: "Google · Interactive exercises & videos · Beginner → Intermediate · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "docs",
+        title: "Scikit-learn: Getting Started",
+        url: "https://scikit-learn.org/stable/getting_started.html",
+        meta: "Scikit-learn · The go-to Python ML library · Official docs · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "docs",
+        title: "Practical Deep Learning for Coders — fast.ai",
+        url: "https://course.fast.ai/",
+        meta: "fast.ai · Jeremy Howard · Top-down hands-on approach · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "github",
+        title: "Microsoft ML-For-Beginners",
+        url: "https://github.com/microsoft/ML-For-Beginners",
+        meta: "Microsoft · 12 weeks · 26 lessons · 52 quizzes · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "github",
+        title: "Dive into Deep Learning (d2l.ai)",
+        url: "https://github.com/d2l-ai/d2l-en",
+        meta: "Berkeley / Carnegie Mellon · Interactive Jupyter book · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "Deep Learning — LeCun, Bengio & Hinton (Nature, 2015)",
+        url: "https://www.nature.com/articles/nature14539",
+        meta: "Nature · The paper that defined the modern deep learning era · Seminal",
+        difficulty: "Advanced",
+        free: false,
+      },
+    ],
+    nextConcepts: [
+      { title: "Neural Networks",             slug: "neural-networks",             difficulty: "Beginner", icon: "⚡" },
+      { title: "Classification vs Regression", slug: "classification-vs-regression", difficulty: "Beginner", icon: "📊" },
+      { title: "What is a Dataset?",           slug: "datasets",                    difficulty: "Beginner", icon: "🗂️" },
+    ],
+  },
+
+ 
+  {
+    slug: "large-language-models",
+    title: "How do LLMs work?",
+    icon: "🔮",
+    difficulty: "Intermediate",
+    estimatedTime: "20 min",
+    description:
+      "Unpack the magic behind ChatGPT and other large language models — from tokens and transformers to how they generate human-like text.",
+    storyboard: [
+      {
+        title: "Tokenize Text",
+        description:
+          "Text is broken into small chunks called tokens. The model never sees raw words — it sees numbers representing those chunks.",
+      },
+      {
+        title: "Predict the Next Token",
+        description:
+          "LLMs are trained on one objective: given all previous tokens, predict the next one. Repeated billions of times, this produces surprisingly capable models.",
+      },
+      {
+        title: "Attention & Context",
+        description:
+          "Transformer attention lets the model weigh which earlier tokens matter most when generating each new word — enabling long-range reasoning.",
+      },
+    ],
+    featuredVideo: {
+      title: "Intro to Large Language Models — Andrej Karpathy",
+      youtubeId: "zjkBMFhNj_g",
+      description:
+        "Karpathy's one-hour talk gives a clear, first-principles mental model of what LLMs are, how they're trained, and where they're headed.",
+    },
+    resources: [
+
+      {
+        type: "video",
+        title: "But what is a GPT? Visual intro to Transformers | 3Blue1Brown ch.5",
+        url: "https://www.youtube.com/watch?v=wjZofJX0v4M",
+        meta: "3Blue1Brown · Stunning animated deep-dive · ~27 min · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "The Illustrated GPT-2 — Jay Alammar",
+        url: "https://jalammar.github.io/illustrated-gpt2/",
+        meta: "Jay Alammar · Visual walkthrough of GPT-2 internals · Referenced at MIT · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "The Illustrated Transformer — Jay Alammar",
+        url: "https://jalammar.github.io/illustrated-transformer/",
+        meta: "Jay Alammar · Used in ML courses at MIT, Cornell, Stanford · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "Large Language Models Explained with Minimum Math",
+        url: "https://www.understandingai.org/p/large-language-models-explained-with",
+        meta: "UnderstandingAI · Tim Lee & Sean Trott · Beginner-friendly deep dive · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "The Unreasonable Effectiveness of Recurrent Neural Networks — Karpathy",
+        url: "https://karpathy.github.io/2015/05/21/rnn-effectiveness/",
+        meta: "Andrej Karpathy's Blog · Classic influential post on language models · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "What Are Large Language Models? — IBM Think",
+        url: "https://www.ibm.com/think/topics/large-language-models",
+        meta: "IBM · Comprehensive overview · Regularly updated · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "docs",
+        title: "Hugging Face NLP Course",
+        url: "https://huggingface.co/learn/nlp-course/chapter1/1",
+        meta: "Hugging Face · The industry-standard LLM library · Free full course · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "github",
+        title: "Hands-On Large Language Models — Jay Alammar & Maarten Grootendorst",
+        url: "https://github.com/HandsOnLLM/Hands-On-Large-Language-Models",
+        meta: "O'Reilly book companion · Full Jupyter notebooks · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "Attention Is All You Need — Vaswani et al. (arXiv, 2017)",
+        url: "https://arxiv.org/abs/1706.03762",
+        meta: "arXiv · The transformer paper that started everything · Seminal · Free",
+        difficulty: "Advanced",
+        free: true,
+      },
+    ],
+    nextConcepts: [
+      { title: "Neural Networks", slug: "neural-networks",    difficulty: "Beginner",     icon: "⚡" },
+      { title: "Loss & Training",  slug: "loss-and-training",  difficulty: "Intermediate", icon: "🎯" },
+    ],
+  },
+
+  {
+    slug: "classification-vs-regression",
+    title: "Classification vs Regression",
+    icon: "📊",
+    difficulty: "Beginner",
+    estimatedTime: "12 min",
+    description:
+      "Two fundamental ways ML models make predictions — one outputs a category, the other a number. Knowing which to use is step one of any ML project.",
+    storyboard: [
+      {
+        title: "Classification: Pick a Box",
+        description:
+          "Is this email spam or not? Is this tumor malignant or benign? Classification outputs a discrete label from a fixed set of categories.",
+      },
+      {
+        title: "Regression: Predict a Number",
+        description:
+          "What will this house sell for? How many units will we ship? Regression outputs a continuous value on a numeric scale.",
+      },
+      {
+        title: "Choosing the Right One",
+        description:
+          "The output type determines everything: loss function, evaluation metrics, and model architecture. Get this choice right first.",
+      },
+    ],
+    featuredVideo: {
+      title: "Regression vs Classification in Machine Learning — StatQuest",
+      youtubeId: "TJveOYsK6MY",
+      description:
+        "Josh Starmer gives a clear visual explanation of the difference between regression and classification with real-world examples.",
+    },
+    resources: [
+
+      {
+        type: "video",
+        title: "Machine Learning Fundamentals: Bias and Variance — StatQuest",
+        url: "https://www.youtube.com/watch?v=EuBBz3bI-aA",
+        meta: "StatQuest · Josh Starmer · Essential follow-up concept · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "Classification vs Regression — Machine Learning Mastery",
+        url: "https://machinelearningmastery.com/classification-versus-regression-in-machine-learning/",
+        meta: "Jason Brownlee · Definitive written breakdown · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "A Visual Introduction to Machine Learning Part II — R2D3",
+        url: "http://www.r2d3.us/visual-intro-to-machine-learning-part-2/",
+        meta: "R2D3 · Animated bias-variance tradeoff explainer · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "An Overview of Gradient Descent Optimization Algorithms — Sebastian Ruder",
+        url: "https://www.ruder.io/optimizing-gradient-descent/",
+        meta: "Sebastian Ruder · The most-cited blog post on optimizers · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "docs",
+        title: "Framing: ML Terminology — Google ML Crash Course",
+        url: "https://developers.google.com/machine-learning/crash-course/framing/ml-terminology",
+        meta: "Google · Authoritative definitions · Beginner · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "docs",
+        title: "Supervised Learning — Scikit-learn User Guide",
+        url: "https://scikit-learn.org/stable/supervised_learning.html",
+        meta: "Scikit-learn · Official guide to classification & regression models · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      // ── GitHub ──────────────────────────────────────────────────────────
+      {
+        type: "github",
+        title: "Microsoft ML-For-Beginners: Regression Lessons",
+        url: "https://github.com/microsoft/ML-For-Beginners/tree/main/2-Regression",
+        meta: "Microsoft · Hands-on Jupyter notebooks · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+    ],
+    nextConcepts: [
+      { title: "Loss & Training", slug: "loss-and-training", difficulty: "Intermediate", icon: "🎯" },
+      { title: "Neural Networks", slug: "neural-networks",   difficulty: "Beginner",     icon: "⚡" },
+    ],
+  },
+
+
+  {
+    slug: "neural-networks",
+    title: "What is a Neural Network?",
+    icon: "⚡",
+    difficulty: "Beginner",
+    estimatedTime: "20 min",
+    description:
+      "The building blocks of modern AI — layers of interconnected neurons that learn to recognize patterns by adjusting billions of small weights.",
+    storyboard: [
+      {
+        title: "Neurons & Layers",
+        description:
+          "A neural network is a stack of layers. Each layer is a set of neurons — simple math functions that take in numbers, transform them, and pass them forward.",
+      },
+      {
+        title: "Weights & Learning",
+        description:
+          "Every connection between neurons has a weight. Training adjusts these weights so the network's outputs get closer to the right answers.",
+      },
+      {
+        title: "Deep = Many Layers",
+        description:
+          "'Deep learning' just means many layers. Deeper networks learn increasingly abstract features — edges → shapes → faces, for example.",
+      },
+    ],
+    featuredVideo: {
+      title: "But what is a neural network? | 3Blue1Brown ch.1",
+      youtubeId: "aircAruvnKk",
+      description:
+        "The definitive animated introduction. Grant Sanderson's visuals make the math click instantly. Part 1 of the Deep Learning series.",
+    },
+    resources: [
+
+      {
+        type: "video",
+        title: "StatQuest: Neural Networks – Inside the Black Box",
+        url: "https://www.youtube.com/watch?v=CqOfi41LfDw",
+        meta: "StatQuest · Josh Starmer · Step-by-step with worked examples · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "video",
+        title: "Neural Networks Explained in 5 Minutes",
+        url: "https://www.youtube.com/watch?v=jmmW0F0biz0",
+        meta: "IBM Technology · Non-technical quick overview · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "Neural Networks, Manifolds, and Topology — Colah's Blog",
+        url: "https://colah.github.io/posts/2014-03-NN-Manifolds-Topology/",
+        meta: "Chris Olah (Anthropic) · Intuition-first visual essay · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "Understanding LSTM Networks — Colah's Blog",
+        url: "https://colah.github.io/posts/2015-08-Understanding-LSTMs/",
+        meta: "Chris Olah · Most-read blog post on LSTMs · Read by millions · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "Neural Networks and Deep Learning — Free Online Book",
+        url: "http://neuralnetworksanddeeplearning.com/",
+        meta: "Michael Nielsen · Complete free book · Beginner → Intermediate · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "docs",
+        title: "TensorFlow Playground — Train a Neural Net in Your Browser",
+        url: "https://playground.tensorflow.org/",
+        meta: "Google Brain · Interactive · No code required · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "docs",
+        title: "CNN Explainer — Visual CNN Explorer",
+        url: "https://poloclub.github.io/cnn-explainer/",
+        meta: "Georgia Tech · Interactive CNN visualization tool · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "github",
+        title: "nn-zero-to-hero — Andrej Karpathy",
+        url: "https://github.com/karpathy/nn-zero-to-hero",
+        meta: "Karpathy · Build neural nets from scratch in Python · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "github",
+        title: "fast.ai — Practical Deep Learning Library",
+        url: "https://github.com/fastai/fastai",
+        meta: "fast.ai · Jeremy Howard · High-level PyTorch wrappers + course · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+    ],
+    nextConcepts: [
+      { title: "Loss & Training",   slug: "loss-and-training",    difficulty: "Intermediate", icon: "🎯" },
+      { title: "How do LLMs work?", slug: "large-language-models", difficulty: "Intermediate", icon: "🔮" },
+    ],
+  },
+
+  {
+    slug: "loss-and-training",
+    title: "What is Loss & Training?",
+    icon: "🎯",
+    difficulty: "Intermediate",
+    estimatedTime: "18 min",
+    description:
+      "How an AI model learns by making mistakes and correcting itself — the feedback loop of loss functions, gradient descent, and backpropagation.",
+    storyboard: [
+      {
+        title: "Measure the Mistake",
+        description:
+          "A loss function scores how wrong the model's prediction is. Low loss = good; high loss = bad. This single number is the entire learning signal.",
+      },
+      {
+        title: "Gradient Descent",
+        description:
+          "The model computes which direction to nudge each weight to reduce the loss — then takes a small step. Repeat millions of times.",
+      },
+      {
+        title: "Backpropagation",
+        description:
+          "Backprop efficiently calculates the gradient for every weight in the network in one backward pass using the chain rule from calculus.",
+      },
+    ],
+    featuredVideo: {
+      title: "Gradient Descent, How Neural Networks Learn | 3Blue1Brown ch.2",
+      youtubeId: "IHZwWFHWa-w",
+      description:
+        "3Blue1Brown's chapter 2 explains gradient descent and loss with beautiful animations — the clearest visual explanation available.",
+    },
+    resources: [
+
+      {
+        type: "video",
+        title: "What is Backpropagation Really Doing? | 3Blue1Brown ch.3",
+        url: "https://www.youtube.com/watch?v=Ilg3gGewQ5U",
+        meta: "3Blue1Brown · Visual deep-dive into backpropagation · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "video",
+        title: "StatQuest: Gradient Descent, Step-by-Step",
+        url: "https://www.youtube.com/watch?v=sDv4f4s2SB8",
+        meta: "StatQuest · Josh Starmer · Clear worked numerical example · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "video",
+        title: "Building micrograd: Backprop from Scratch — Andrej Karpathy",
+        url: "https://www.youtube.com/watch?v=VMj-3S1tku0",
+        meta: "Karpathy · The most step-by-step backprop explanation ever made · ~2.5 hrs · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "Calculus on Computational Graphs: Backpropagation — Colah's Blog",
+        url: "https://colah.github.io/posts/2015-08-Backprop/",
+        meta: "Chris Olah (Anthropic) · The classic intuition-first essay on backprop · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "An Overview of Gradient Descent Optimization Algorithms — Sebastian Ruder",
+        url: "https://www.ruder.io/optimizing-gradient-descent/",
+        meta: "Sebastian Ruder (Google DeepMind) · Most-cited optimizer reference · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "Loss Functions for Deep Learning — Machine Learning Mastery",
+        url: "https://machinelearningmastery.com/loss-and-loss-functions-for-training-deep-learning-neural-networks/",
+        meta: "Jason Brownlee · Comprehensive reference on every common loss function · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "docs",
+        title: "Gradient Descent — Google ML Crash Course",
+        url: "https://developers.google.com/machine-learning/crash-course/linear-regression/gradient-descent",
+        meta: "Google · Interactive diagrams · Beginner-friendly · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "github",
+        title: "micrograd — Tiny Autograd Engine by Karpathy",
+        url: "https://github.com/karpathy/micrograd",
+        meta: "Karpathy · Full backprop engine in ~150 lines of Python · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "Learning Representations by Back-propagating Errors — Rumelhart et al. (Nature, 1986)",
+        url: "https://www.nature.com/articles/323533a0",
+        meta: "Nature · The original backpropagation paper · Hinton, Rumelhart & Williams · Seminal",
+        difficulty: "Advanced",
+        free: false,
+      },
+    ],
+    nextConcepts: [
+      { title: "Neural Networks",   slug: "neural-networks",      difficulty: "Beginner",     icon: "⚡" },
+      { title: "How do LLMs work?", slug: "large-language-models", difficulty: "Intermediate", icon: "🔮" },
+    ],
+  },
+
+
+  {
+    slug: "datasets",
+    title: "What is a Dataset?",
+    icon: "🗂️",
+    difficulty: "Beginner",
+    estimatedTime: "10 min",
+    description:
+      "Data is the fuel of AI — a model is only as good as what it learned from. Learn what makes a dataset, and what makes a good one.",
+    storyboard: [
+      {
+        title: "Rows & Features",
+        description:
+          "A dataset is a table. Each row is one example (a photo, a sentence, a transaction). Each column is a feature — a measurable property of that example.",
+      },
+      {
+        title: "Labels",
+        description:
+          "Supervised learning requires labels: the correct answer for each row. Labels are expensive because a human usually has to provide them.",
+      },
+      {
+        title: "Quality > Quantity",
+        description:
+          "Biased, incomplete, or mislabeled data produces bad models regardless of how sophisticated the algorithm. Garbage in, garbage out.",
+      },
+    ],
+    featuredVideo: {
+      title: "How Datasets Work in Machine Learning (Beginner Friendly)",
+      youtubeId: "RqPR7GqSWRM",
+      description:
+        "A concise practical overview of training, validation, and test sets — and why the split matters for every ML project.",
+    },
+    resources: [
+
+      {
+        type: "video",
+        title: "StatQuest: Training/Test/Validation Split, Clearly Explained",
+        url: "https://www.youtube.com/watch?v=dSCFk168vmo",
+        meta: "StatQuest · Josh Starmer · Short & crystal clear · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+
+      {
+        type: "article",
+        title: "Data Preparation for Machine Learning — Machine Learning Mastery",
+        url: "https://machinelearningmastery.com/data-preparation-for-machine-learning/",
+        meta: "Jason Brownlee · Practical guide to cleaning & preparing data · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "article",
+        title: "Datasheets for Datasets — Gebru et al. (Communications of the ACM, 2021)",
+        url: "https://dl.acm.org/doi/10.1145/3458723",
+        meta: "ACM · Landmark paper on dataset documentation & ethics · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "docs",
+        title: "Splitting Data — Google ML Crash Course",
+        url: "https://developers.google.com/machine-learning/crash-course/training-and-test-sets/splitting-data",
+        meta: "Google · Authoritative · Interactive · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "docs",
+        title: "Kaggle Datasets — Browse & Download Free Datasets",
+        url: "https://www.kaggle.com/datasets",
+        meta: "Kaggle · Thousands of real-world datasets for practice · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "docs",
+        title: "Hugging Face Datasets Hub",
+        url: "https://huggingface.co/datasets",
+        meta: "Hugging Face · 50,000+ ML-ready datasets · Searchable · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+      {
+        type: "docs",
+        title: "Papers With Code — Datasets",
+        url: "https://paperswithcode.com/datasets",
+        meta: "Papers With Code · Research benchmarks with leaderboards · Free",
+        difficulty: "Intermediate",
+        free: true,
+      },
+
+      {
+        type: "github",
+        title: "Awesome Public Datasets",
+        url: "https://github.com/awesomedata/awesome-public-datasets",
+        meta: "Community curated · 500+ datasets across every domain · Free",
+        difficulty: "Beginner",
+        free: true,
+      },
+    ],
+    nextConcepts: [
+      { title: "What is Machine Learning?",    slug: "machine-learning",            difficulty: "Beginner", icon: "🧠" },
+      { title: "Classification vs Regression", slug: "classification-vs-regression", difficulty: "Beginner", icon: "📊" },
+    ],
+  },
+];
\ No newline at end of file
diff --git a/src/data/storyboards.js b/src/data/storyboards.js
index a90e7ed..04316ad 100644
--- a/src/data/storyboards.js
+++ b/src/data/storyboards.js
@@ -17,6 +17,7 @@ export const storyboards = [
   {
     id: 1,
     emoji: '🧠',
+    slug: "machine-learning",
     title: 'What is Machine Learning?',
     description: 'How computers learn from examples instead of being programmed with rules.',
     difficulty: 'beginner',
@@ -26,6 +27,7 @@ export const storyboards = [
   {
     id: 2,
     emoji: '🔮',
+    slug: "large-language-models",
     title: 'How do LLMs work?',
     description: 'The magic behind ChatGPT and other large language models, explained simply.',
     difficulty: 'intermediate',
@@ -35,6 +37,7 @@ export const storyboards = [
   {
     id: 3,
     emoji: '📊',
+    slug: "classification-vs-regression",
     title: 'Classification vs Regression',
     description: 'Two fundamental ways ML models make predictions — and when to use which.',
     difficulty: 'beginner',
@@ -44,6 +47,7 @@ export const storyboards = [
   {
     id: 4,
     emoji: '⚡',
+    slug: "neural-networks",
     title: 'What is a Neural Network?',
     description: 'The building blocks of modern AI — inspired by the human brain.',
     difficulty: 'beginner',
@@ -53,6 +57,7 @@ export const storyboards = [
   {
     id: 5,
     emoji: '🎯',
+    slug: "loss-and-training",
     title: 'What is Loss & Training?',
     description: 'How an AI model learns by making mistakes and correcting itself.',
     difficulty: 'intermediate',
@@ -62,6 +67,7 @@ export const storyboards = [
   {
     id: 6,
     emoji: '🗂️',
+    slug: "datasets",
     title: 'What is a Dataset?',
     description: 'Why data is the fuel of AI — and what makes a good dataset.',
     difficulty: 'beginner',
diff --git a/src/pages/Concepts.jsx b/src/pages/Concepts.jsx
index c5b634c..d892f63 100644
--- a/src/pages/Concepts.jsx
+++ b/src/pages/Concepts.jsx
@@ -57,6 +57,11 @@ export default function Concepts() {
 
         <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
           {filteredConcepts.map((concept) => (
+             <Link
+    key={concept.id}
+    to={`/concepts/${concept.slug}`}
+    className="block"
+  >
             <article
               key={concept.id}
               className="rounded-3xl overflow-hidden border border-[rgba(13,13,13,0.08)] bg-white shadow-sm transition-transform duration-200 hover:-translate-y-1"
@@ -84,6 +89,7 @@ export default function Concepts() {
                 </p>
               </div>
             </article>
+            </Link>
           ))}
         </div>
       </div>