add interactive demo

Author: mikebarkmin

platforms/web/src/Landing.css

@@ -423,6 +423,44 @@ body {
   box-shadow: 0 4px 12px rgba(0, 120, 100, 0.2);
 }
 
+/* Demo Section */
+.demo-section {
+  padding: 4rem 2rem;
+  background: linear-gradient(
+    135deg,
+    var(--learningmap-color-whitesmoke, #f5f5f5) 0%,
+    white 100%
+  );
+}
+
+.demo-title {
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: #1f2937;
+}
+
+.demo-subtitle {
+  text-align: center;
+  font-size: 1.1rem;
+  color: var(--learningmap-color-quicksilver, #a4a4a4);
+  margin-bottom: 2rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.demo-map-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  height: 800px;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .hero-title {
@@ -466,6 +504,22 @@ body {
   .role-section {
     grid-template-columns: 1fr;
   }
+
+  .demo-section {
+    padding: 2rem 1rem;
+  }
+
+  .demo-title {
+    font-size: 1.5rem;
+  }
+
+  .demo-subtitle {
+    font-size: 1rem;
+  }
+
+  .demo-map-container {
+    height: 400px;
+  }
 }
 
 @media (max-width: 480px) {

platforms/web/src/Landing.tsx

@@ -2,39 +2,16 @@ import { useNavigate } from "react-router-dom";
 import "./Landing.css";
 import { Header } from "./Header";
 import { Footer } from "./Footer";
+import { LearningMap } from "@learningmap/learningmap";
+import "@learningmap/learningmap/index.css";
+import demoMapRaw from "./getting-started.learningmap?raw";
+import type { RoadmapData } from "@learningmap/learningmap";
 
 function Landing() {
   const navigate = useNavigate();
-
-  // Featured learning maps with example JSON IDs
-  /*
-  const featuredMaps = [
-    {
-      id: 'example-1',
-      title: 'Getting Started with Programming',
-      description: 'A comprehensive guide to learning programming fundamentals, from variables to functions.',
-      thumbnail: '📚',
-      editUrl: '/create',
-      learnUrl: '/learn',
-    },
-    {
-      id: 'example-2',
-      title: 'Web Development Basics',
-      description: 'Learn HTML, CSS, and JavaScript to build your first website step by step.',
-      thumbnail: '🌐',
-      editUrl: '/create',
-      learnUrl: '/learn',
-    },
-    {
-      id: 'example-3',
-      title: 'Data Science Journey',
-      description: 'Explore data analysis, visualization, and machine learning concepts progressively.',
-      thumbnail: '📊',
-      editUrl: '/create',
-      learnUrl: '/learn',
-    },
-  ];
-  */
+  
+  // Parse the demo map from raw JSON
+  const demoMap: RoadmapData = JSON.parse(demoMapRaw);
 
   return (
     <div className="landing-container">
@@ -90,6 +67,18 @@ function Landing() {
         </div>
       </section>
 
+      {/* Demo LearningMap */}
+      <section className="demo-section">
+        <h2 className="demo-title">Try It Out: Interactive Demo</h2>
+        <p className="demo-subtitle">
+          Explore this interactive learning map to see how it works. Click on
+          nodes to learn more!
+        </p>
+        <div className="demo-map-container">
+          <LearningMap roadmapData={demoMap} />
+        </div>
+      </section>
+
       {/* Teacher-Student Use Case */}
       <section className="use-case-section">
         <div className="use-case-content">