feat: implement core micro-learning components and hooks for diverse educational formats

src/components/micro_learning/ConceptExplainer.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; // assuming some UI library, otherwise use standard divs
+import Card from '../ui/Card';
 
 export default function ConceptExplainer({ content, onComplete }) {
   const containerRef = useRef(null);
@@ -25,12 +25,12 @@ export default function ConceptExplainer({ content, onComplete }) {
   }, [onComplete]);
 
   return (
-    <Card className="w-full h-[60vh] flex flex-col">
-      <CardHeader>
-        <CardTitle>Concept Explainer</CardTitle>
-      </CardHeader>
-      <CardContent 
-        className="flex-1 overflow-y-auto prose dark:prose-invert"
+    <Card className="w-full h-[60vh] flex flex-col p-0">
+      <div className="p-6 border-b border-bg-warm">
+        <h2 className="text-xl font-bold">Concept Explainer</h2>
+      </div>
+      <div 
+        className="flex-1 overflow-y-auto p-6 prose dark:prose-invert"
         ref={containerRef}
       >
         {content?.sections?.map((section, i) => (
@@ -39,7 +39,7 @@ export default function ConceptExplainer({ content, onComplete }) {
             <div dangerouslySetInnerHTML={{ __html: section.content }} />
           </div>
         ))}
-      </CardContent>
+      </div>
     </Card>
   );
 }