feat: implement dataset storyboard interactive modal and dynamic rout…

src/data/datasetStory.js

@@ -0,0 +1,56 @@
+export const datasetScenes = [
+  {
+    scene: 1,
+    title: "The Everyday Mystery",
+    narrative: "Think about the lists you see every day: your phone's contact list, a weekly weather forecast, or a sports league table.",
+
+  },
+  {
+    scene: 2,
+    title: "Naming the Thing",
+    narrative: "When we take those lists and organize them neatly, they transform into a table.",
+
+  },
+  {
+    scene: 3,
+    title: "One Row, One Story",
+    narrative: "In a dataset, every horizontal row is a single, complete story—like one individual person, one specific day, or one single transaction.",
+
+  },
+  {
+    scene: 4,
+    title: "Many Shapes of Data",
+    narrative: "Datasets aren't just numbers and text. They can be collections of images, folders of audio files, or libraries of books.",
+
+  },
+  {
+    scene: 5,
+    title: "Where Data Comes From",
+    narrative: "Where do they come from? Everywhere. Weather sensors, online surveys, website clicks, and smartwatches all feed information into datasets.",
+
+  },
+  {
+    scene: 6,
+    title: "Clean vs. Messy",
+    narrative: "Before AI can use data, it has to be cleaned. Real-world data is often messy—filled with missing values, typos, and duplicates.",
+
+  },
+  {
+    scene: 7,
+    title: "What You Can Do",
+    narrative: "Once you have a clean dataset, the possibilities branch out: you can visualize trends, analyze statistics, or train an AI model.",
+
+  },
+  {
+    scene: 8,
+    title: "A Dataset in the Wild",
+    narrative: "Let's look at a real example: a dataset of house prices. By looking at columns like 'Size' and 'Bedrooms', we can predict 'Price'.",
+
+  },
+  {
+    scene: 9,
+    title: "The Core Definition",
+    narrative: "At its core, a dataset is simply a structured collection of related information used to help humans—and machines—make sense of the world.",
+
+  }
+];

src/data/datasetStoryboard.jsx

@@ -0,0 +1,55 @@
+// src/data/DatasetStoryboard.jsx
+
+import { useState } from "react";
+import { datasetScenes } from "./datasetStory";
+import DatasetVisualCues from "./datasetVisualCues";
+
+export default function DatasetStoryboard({ onClose }) {
+  const [currentSceneIdx, setCurrentSceneIdx] = useState(0);
+
+  return (
+    <div className="w-full flex flex-col max-h-[90vh] border border-[rgba(13,13,13,0.08)] bg-white rounded-3xl overflow-hidden">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-[rgba(13,13,13,0.05)] flex items-center justify-between bg-[var(--cream)]">
+        <div className="flex items-center gap-2">
+          <span className="text-xl">🗂️</span>
+          <h3 className="font-bold text-base text-[var(--ink)]">What is a Dataset?</h3>
+        </div>
+        <button onClick={onClose} className="text-xs font-semibold px-3 py-1.5 bg-white border border-[rgba(13,13,13,0.1)] rounded-xl hover:bg-gray-50 text-[var(--ink)]">
+          ✕ Close
+        </button>
+      </div>
+
+      {/* Visual Canvas Box */}
+      <div className="p-8 flex flex-col items-center justify-center min-h-[220px] text-center text-white" style={{ background: 'linear-gradient(135deg, var(--ink-soft), var(--purple))' }}>
+        <span className="text-xs uppercase tracking-widest bg-white/20 px-3 py-1 rounded-full mb-3">
+          Scene {datasetScenes[currentSceneIdx].scene} of {datasetScenes.length}
+        </span>
+        <h4 className="text-2xl font-bold mb-2 font-display">{datasetScenes[currentSceneIdx].title}</h4>
+        <DatasetVisualCues currentSceneIdx={currentSceneIdx} />
+      </div>
+
+      {/* Narrative */}
+      <div className="p-6 bg-white min-h-[100px] flex items-center justify-center">
+        <p className="text-base leading-relaxed text-[var(--ink)] text-center font-medium">{datasetScenes[currentSceneIdx].narrative}</p>
+      </div>
+
+      {/* Navigation Footer */}
+      <div className="px-6 py-4 bg-[var(--cream)] border-t border-[rgba(13,13,13,0.05)] flex items-center justify-between">
+        <button disabled={currentSceneIdx === 0} onClick={() => setCurrentSceneIdx(prev => prev - 1)} className="px-4 py-2 rounded-xl text-sm font-semibold bg-white border border-[rgba(13,13,13,0.1)] text-[var(--ink)] disabled:opacity-40">
+          ← Back
+        </button>
+        <div className="text-xs font-bold text-[var(--ink-muted)] uppercase">{Math.round(((currentSceneIdx + 1) / datasetScenes.length) * 100)}% Done</div>
+        {currentSceneIdx < datasetScenes.length - 1 ? (
+          <button onClick={() => setCurrentSceneIdx(prev => prev + 1)} className="px-4 py-2 rounded-xl text-sm font-semibold bg-[var(--purple)] text-white">
+            Next →
+          </button>
+        ) : (
+          <button onClick={onClose} className="px-4 py-2 rounded-xl text-sm font-semibold bg-[var(--teal)] text-white">
+            Finish 🎉
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/data/datasetVisualCues.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+export default function DatasetVisualCues({ currentSceneIdx }) {
+  return (
+    <div className="w-full max-w-md flex flex-col items-center justify-center min-h-[120px] transition-all duration-300 z-10">
+
+      {/* Scene 1: The Everyday Mystery */}
+      {currentSceneIdx === 0 && (
+        <div className="flex gap-3  text-sm text-[var(--ink)]">
+          <div className="bg-white p-2 rounded-lg shadow-md font-mono">📅 Mon: ☀️ 24°C</div>
+          <div className="bg-white p-2 rounded-lg shadow-md font-mono">📝 Todo List</div>
+          <div className="bg-white p-2 rounded-lg shadow-md font-mono">🏀 Team Roster</div>
+        </div>
+      )}
+
+      {/* Scene 2: Naming the Thing */}
+      {currentSceneIdx === 1 && (
+        <div className="grid grid-cols-3 gap-1 bg-white/20 p-2 rounded-xl text-xs font-mono w-full max-w-xs border border-white/20 animate-pulse">
+          <div className="bg-white/30 p-1 font-bold">Monday</div>
+          <div className="bg-white/30 p-1 font-bold">Tuesday</div>
+          <div className="bg-white/30 p-1 font-bold">Wednesday</div>
+          <div className="bg-white/10 p-1">35.8° C</div>
+          <div className="bg-white/10 p-1">36.2° C</div>
+          <div className="bg-white/10 p-1">35.9° C</div>
+        </div>
+      )}
+
+      {/* Scene 3: One Row, One Story */}
+      {currentSceneIdx === 2 && (
+        <div className="w-full max-w-xs bg-white/10 p-2 rounded-lg flex gap-1 border border-white/20">
+          <div className="bg-amber-400 p-2 text-xs font-mono text-slate-900 rounded flex-1 transition delay-100 duration-500 animate-pulse">ID: 101</div>
+          <div className="bg-amber-400 p-2 text-xs font-mono text-slate-900 rounded flex-1 transition delay-300 duration-500 animate-pulse">Name: Alice</div>
+          <div className="bg-amber-400 p-2 text-xs font-mono text-slate-900 rounded flex-1 transition delay-500 duration-500 animate-pulse">Age: 24</div>
+        </div>
+      )}
+
+      {/* Scene 4: Many Shapes of Data */}
+      {currentSceneIdx === 3 && (
+        <div className="flex gap-4 text-3xl bg-white/10 p-4 rounded-2xl border border-white/20">
+          <div className="p-2 bg-white/10 rounded-xl hover:scale-110 transition">📊</div>
+          <div className="p-2 bg-white/10 rounded-xl hover:scale-110 transition">🖼️</div>
+          <div className="p-2 bg-white/10 rounded-xl hover:scale-110 transition">♫</div>
+          <div className="p-2 bg-white/10 rounded-xl hover:scale-110 transition">📄</div>
+        </div>
+      )}
+
+      {/* Scene 5: Where Data Comes From */}
+      {currentSceneIdx === 4 && (
+        <div className="relative w-full h-16 flex items-center justify-between text-2xl px-6">
+          <span className="text-4xl">🛰️</span>
+          <span className="text-4xl">📱</span>
+          <span className="text-4xl ">📥</span>
+          <span className="text-4xl">💻</span>
+          <span className="text-4xl">⏱️</span>
+        </div>
+      )}
+
+      {/* Scene 6: Clean vs Messy */}
+      {currentSceneIdx === 5 && (
+        <div className="flex items-center gap-2 w-full max-w-xs text-xs font-mono">
+          <div className="bg-red-500/30 border border-red-500 p-2 rounded flex-1 line-through opacity-70">
+            [NULL] undefined NY!!
+          </div>
+          <div className="text-xl">🧹</div>
+          <div className="bg-emerald-500/40 border border-emerald-500 p-2 rounded flex-1 font-bold">
+            "New York"
+          </div>
+        </div>
+      )}
+
+      {/* Scene 7: What You Can Do */}
+      {currentSceneIdx === 6 && (
+        <div className="flex flex-col items-center w-full">
+          <div className="bg-white/20 px-3 py-1 rounded text-xs">Dataset</div>
+          <div className="h-4 w-0.5 bg-white/40"></div>
+          <div className="flex gap-4 text-xs">
+            <div className="bg-purple-500/40 p-1.5 rounded border border-purple-400">📈 Charts</div>
+            <div className="bg-teal-500/40 p-1.5 rounded border border-teal-400">🧮 Math</div>
+            <div className="bg-amber-500/40 p-1.5 rounded border border-amber-400">🤖 Train AI</div>
+          </div>
+        </div>
+      )}
+
+      {/* Scene 8: A Dataset in the Wild */}
+      {currentSceneIdx === 7 && (
+        <div className="w-full max-w-xs bg-slate-900/60 p-3 rounded-xl border border-white/10 text-left text-[11px] font-mono">
+          <div className="border-b border-white/10 pb-1 mb-1 text-white/50 flex justify-between">
+            <span>sqft: 1200</span><span>beds: 2</span>
+          </div>
+          <div className="flex justify-between items-center text-amber-300 font-bold">
+            <span>Price Estimate:</span>
+            <span className="text-sm bg-amber-400/20 px-2 py-0.5 rounded border border-amber-400/40 animate-pulse">
+              ❓ Calculating...
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Scene 9: Core Definition */}
+      {currentSceneIdx === 8 && (
+        <div className="text-5xl transform scale-110 ">
+          🗂️
+        </div>
+      )}
+
+    </div>
+  );
+}

src/data/storyboardMapping.js

@@ -0,0 +1,6 @@
+// src/data/storyboardMapping.js
+import DatasetStoryboard from './datasetStoryboard'; 
+
+export const storyboardComponents = {
+  6: DatasetStoryboard,
+};

src/data/storyboards.js

@@ -16,56 +16,61 @@
 export const storyboards = [
   {
     id: 1,
-    emoji: '🧠',
-    title: 'What is Machine Learning?',
-    description: 'How computers learn from examples instead of being programmed with rules.',
-    difficulty: 'beginner',
-    status: 'coming-soon',
-    gradient: 'linear-gradient(135deg, var(--purple-dark), var(--purple))',
+    emoji: "🧠",
+    title: "What is Machine Learning?",
+    description:
+      "How computers learn from examples instead of being programmed with rules.",
+    difficulty: "beginner",
+    status: "coming-soon",
+    gradient: "linear-gradient(135deg, var(--purple-dark), var(--purple))",
   },
   {
     id: 2,
-    emoji: '🔮',
-    title: 'How do LLMs work?',
-    description: 'The magic behind ChatGPT and other large language models, explained simply.',
-    difficulty: 'intermediate',
-    status: 'coming-soon',
-    gradient: 'linear-gradient(135deg, var(--purple-dark), var(--purple-mid))',
+    emoji: "🔮",
+    title: "How do LLMs work?",
+    description:
+      "The magic behind ChatGPT and other large language models, explained simply.",
+    difficulty: "intermediate",
+    status: "coming-soon",
+    gradient: "linear-gradient(135deg, var(--purple-dark), var(--purple-mid))",
   },
   {
     id: 3,
-    emoji: '📊',
-    title: 'Classification vs Regression',
-    description: 'Two fundamental ways ML models make predictions — and when to use which.',
-    difficulty: 'beginner',
-    status: 'coming-soon',
-    gradient: 'linear-gradient(135deg, var(--purple-dark), var(--purple))',
+    emoji: "📊",
+    title: "Classification vs Regression",
+    description:
+      "Two fundamental ways ML models make predictions — and when to use which.",
+    difficulty: "beginner",
+    status: "coming-soon",
+    gradient: "linear-gradient(135deg, var(--purple-dark), var(--purple))",
   },
   {
     id: 4,
-    emoji: '⚡',
-    title: 'What is a Neural Network?',
-    description: 'The building blocks of modern AI — inspired by the human brain.',
-    difficulty: 'beginner',
-    status: 'coming-soon',
-    gradient: 'linear-gradient(135deg, var(--teal), var(--teal-light))',
+    emoji: "⚡",
+    title: "What is a Neural Network?",
+    description:
+      "The building blocks of modern AI — inspired by the human brain.",
+    difficulty: "beginner",
+    status: "coming-soon",
+    gradient: "linear-gradient(135deg, var(--teal), var(--teal-light))",
   },
   {
     id: 5,
-    emoji: '🎯',
-    title: 'What is Loss & Training?',
-    description: 'How an AI model learns by making mistakes and correcting itself.',
-    difficulty: 'intermediate',
-    status: 'coming-soon',
-    gradient: 'linear-gradient(135deg, var(--amber), var(--amber-light))',
+    emoji: "🎯",
+    title: "What is Loss & Training?",
+    description:
+      "How an AI model learns by making mistakes and correcting itself.",
+    difficulty: "intermediate",
+    status: "coming-soon",
+    gradient: "linear-gradient(135deg, var(--amber), var(--amber-light))",
   },
   {
     id: 6,
-    emoji: '🗂️',
-    title: 'What is a Dataset?',
-    description: 'Why data is the fuel of AI — and what makes a good dataset.',
-    difficulty: 'beginner',
-    status: 'coming-soon',
-    gradient: 'linear-gradient(135deg, var(--ink-soft), var(--purple))',
+    emoji: "🗂️",
+    title: "What is a Dataset?",
+    description: "Why data is the fuel of AI — and what makes a good dataset.",
+    difficulty: "beginner",
+    status: "available",
+    gradient: "linear-gradient(135deg, var(--ink-soft), var(--purple))",
   },
-]
+];