@academy-sdk/sdk 0.1.1 → 0.2.1

package/src/components/pages/CoursePlayerPage.tsx

@@ -0,0 +1,481 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import {
+  ChevronLeft, ChevronRight, FileText, StickyNote, Bookmark,
+  FileAudio, FolderOpen, HelpCircle, List, X, Clock3,
+  CheckCircle2, PlayCircle, Lock, Award, Search,
+} from 'lucide-react';
+import type { CoursePlayerPageProps } from '../../contracts/pages.contract';
+import type { CoursePlayerCourse, CoursePlayerModule } from '../../types/course';
+import { CourseSidebar } from '../organisms/CourseSidebar';
+import { LoadingSpinner } from '../molecules/LoadingSpinner';
+
+/* ─────────────────────────── helpers ─────────────────────────── */
+
+function formatHeaderDuration(duration?: string): string {
+  if (!duration) return '';
+  const text = duration.trim();
+  if (!text) return '';
+  if (/[a-zA-Z]/.test(text)) return text;
+  const parts = text.split(':').map(Number);
+  if (parts.some(isNaN)) return text;
+  if (parts.length === 3) {
+    const [h, m] = parts;
+    if (h > 0 && m > 0) return `${h} ${h === 1 ? 'hour' : 'hours'} ${m} min`;
+    if (h > 0) return `${h} ${h === 1 ? 'hour' : 'hours'}`;
+    return `${m} min`;
+  }
+  if (parts.length === 2) {
+    const [m, s] = parts;
+    return `${m > 0 ? m : s > 0 ? 1 : 0} min`;
+  }
+  const s = parts[0];
+  return `${s > 0 ? Math.max(1, Math.round(s / 60)) : 0} min`;
+}
+
+/* ─────────────────────────── component ─────────────────────────── */
+
+export function CoursePlayerPage(props: Partial<CoursePlayerPageProps> & {
+  course?: CoursePlayerCourse | null;
+  onBack?: () => void;
+  onNavigateToLesson?: (lessonId: string) => void;
+}) {
+  const {
+    course,
+    isLoading = false,
+    courseNotFound = false,
+    onBack,
+    onNavigateToLesson,
+  } = props;
+
+  /* internal state – no external router needed */
+  const allLessons = useMemo(
+    () => (course?.modules ?? []).flatMap((m) => m.lessons),
+    [course],
+  );
+
+  const [currentLessonIdx, setCurrentLessonIdx] = useState(0);
+  const [expandedModules, setExpandedModules] = useState<Set<string>>(
+    () => new Set(course?.modules?.[0]?.id ? [course.modules[0].id] : []),
+  );
+  const [activeTab, setActiveTab] = useState('overview');
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
+
+  const currentLesson = allLessons[currentLessonIdx] ?? null;
+  const completedCount = allLessons.filter((l) => l.completed).length;
+  const totalCount = allLessons.length;
+
+  /* ── navigation ── */
+  const goToLesson = (lessonId: string) => {
+    const idx = allLessons.findIndex((l) => l.id === lessonId);
+    if (idx === -1) return;
+    const lesson = allLessons[idx] as any;
+    if (lesson?.locked) return;
+    setCurrentLessonIdx(idx);
+    setIsMobileSidebarOpen(false);
+    onNavigateToLesson?.(lessonId);
+  };
+
+  const goPrev = () => {
+    if (currentLessonIdx > 0) {
+      setCurrentLessonIdx((i) => i - 1);
+      onNavigateToLesson?.(allLessons[currentLessonIdx - 1].id);
+    }
+  };
+
+  const goNext = () => {
+    if (currentLessonIdx < allLessons.length - 1) {
+      setCurrentLessonIdx((i) => i + 1);
+      onNavigateToLesson?.(allLessons[currentLessonIdx + 1].id);
+    }
+  };
+
+  const toggleModule = (id: string) => {
+    setExpandedModules((prev) => {
+      const s = new Set(prev);
+      s.has(id) ? s.delete(id) : s.add(id);
+      return s;
+    });
+  };
+
+  /* ── early returns ── */
+  if (isLoading) return <LoadingSpinner className="py-20" text="Loading course..." />;
+
+  if (courseNotFound || !course) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center space-y-4">
+          <div className="text-6xl">📚</div>
+          <h1 className="text-3xl font-bold text-theme-text-primary">Course Not Found</h1>
+          <p className="text-theme-text-secondary max-w-md mx-auto">
+            The course you're looking for doesn't exist or has been removed.
+          </p>
+          <button
+            onClick={onBack ?? (() => window.history.back())}
+            className="mt-4 px-6 py-2.5 rounded-lg bg-theme-accent-primary text-white font-medium hover:opacity-90 transition-opacity cursor-pointer"
+          >
+            Go Back
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  /* ── sidebar props ── */
+  const sidebarProps = {
+    courseTitle: course.title,
+    modules: course.modules as any[],
+    currentLessonId: currentLesson?.id ?? '',
+    expandedModules,
+    completedCount,
+    totalCount,
+    onToggleModule: toggleModule,
+    onSelectLesson: goToLesson,
+    onBack: onBack ?? (() => window.history.back()),
+  };
+
+  /* ── tabs ── */
+  const tabs = [
+    { id: 'overview', label: 'Overview', icon: <FileText className="w-4 h-4" /> },
+    { id: 'notes', label: 'Notes', icon: <StickyNote className="w-4 h-4" /> },
+    { id: 'bookmarks', label: 'Bookmarks', icon: <Bookmark className="w-4 h-4" /> },
+    { id: 'transcript', label: 'Transcript', icon: <FileAudio className="w-4 h-4" /> },
+    { id: 'resources', label: 'Resources', icon: <FolderOpen className="w-4 h-4" /> },
+    { id: 'faq', label: 'FAQ', icon: <HelpCircle className="w-4 h-4" /> },
+  ];
+
+  /* ── video URL ── */
+  const videoUrl = (currentLesson as any)?.videoUrl ?? '';
+  const videoProvider = (currentLesson as any)?.videoProvider ?? 'YOUTUBE';
+
+  const getEmbedSrc = () => {
+    if (!videoUrl) return null;
+    if (videoProvider === 'YOUTUBE') return `https://www.youtube.com/embed/${videoUrl}?rel=0`;
+    if (videoProvider === 'VIMEO') return `https://player.vimeo.com/video/${videoUrl}`;
+    if (videoProvider === 'LOOM') return `https://www.loom.com/embed/${videoUrl}`;
+    return videoUrl;
+  };
+
+  const embedSrc = getEmbedSrc();
+
+  /* ── lesson metadata ── */
+  const lessonLocked = (currentLesson as any)?.locked ?? false;
+  const lessonType = (currentLesson as any)?.type;
+  const duration = formatHeaderDuration((currentLesson as any)?.duration);
+  const summary = (currentLesson as any)?.summary ?? course.description ?? '';
+  const learningObjectives: string[] = course.learningObjectives ?? [];
+  const faqs: { question: string; answer: string }[] = (currentLesson as any)?.settings?.faqs ?? [];
+  const secondaryResources: any[] = (currentLesson as any)?.secondaryResources ?? [];
+
+  return (
+    <div className="min-h-screen bg-[#f7f9fc] flex lg:flex-row lg:-mx-6">
+      {/* ── Desktop Sidebar ── */}
+      <div className="hidden lg:block">
+        <CourseSidebar {...sidebarProps} />
+      </div>
+
+      {/* ── Mobile Sidebar Drawer ── */}
+      {isMobileSidebarOpen && (
+        <div className="lg:hidden fixed inset-0 z-50">
+          <button
+            onClick={() => setIsMobileSidebarOpen(false)}
+            className="absolute inset-0 bg-black/40 cursor-pointer"
+            aria-label="Close lessons drawer"
+          />
+          <div className="relative h-full w-[88vw] max-w-[360px] bg-white shadow-xl overflow-y-auto">
+            <button
+              onClick={() => setIsMobileSidebarOpen(false)}
+              className="absolute top-3 right-3 z-10 w-9 h-9 rounded-full bg-white/90 border border-gray-200 text-gray-700 flex items-center justify-center cursor-pointer"
+              aria-label="Close"
+            >
+              <X className="w-4 h-4" />
+            </button>
+            <CourseSidebar {...sidebarProps} onSelectLesson={(id) => { goToLesson(id); setIsMobileSidebarOpen(false); }} />
+          </div>
+        </div>
+      )}
+
+      {/* ── Main Area ── */}
+      <div className="flex-1 flex flex-col min-w-0 bg-[#dce8f5]">
+        {/* Mobile top bar */}
+        <div className="lg:hidden sticky top-0 z-20 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3 flex items-center justify-between">
+          <button
+            onClick={() => setIsMobileSidebarOpen(true)}
+            className="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-theme-accent-primary text-white text-sm font-medium cursor-pointer"
+          >
+            <List className="w-4 h-4" />
+            Lessons
+          </button>
+          <span className="text-xs text-gray-600 font-medium">
+            Lesson {currentLessonIdx + 1} / {allLessons.length}
+          </span>
+        </div>
+
+        {/* ── Locked lesson screen ── */}
+        {lessonLocked ? (
+          <div className="flex items-center justify-center min-h-[70vh] p-4">
+            <div className="max-w-lg w-full bg-white rounded-2xl border border-gray-200 p-12 text-center space-y-6">
+              <div className="flex justify-center">
+                <Lock className="w-16 h-16 text-orange-500" />
+              </div>
+              <h1 className="text-2xl font-bold text-theme-text-primary">Lesson Locked</h1>
+              <p className="text-theme-text-secondary">
+                Complete the previous lesson to unlock this content.
+              </p>
+              <p className="text-lg font-semibold text-theme-text-primary">{currentLesson?.title}</p>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* ── Teal lesson title banner ── */}
+            <div className="bg-theme-accent-primary px-4 sm:px-6 lg:px-8 py-4 sm:py-6 text-white">
+              <div className="flex items-start">
+                <div className="flex-1 min-w-0">
+                  <h2 className="text-2xl lg:text-3xl font-bold">
+                    {currentLesson?.title
+                      ? `${currentLesson.title.charAt(0).toUpperCase()}${currentLesson.title.slice(1)}`
+                      : 'Select a lesson'}
+                  </h2>
+                  <div className="mt-1 flex items-center gap-3">
+                    <p className="text-white/90 text-sm lg:text-base opacity-90 line-clamp-1 flex-1 min-w-0">
+                      {summary}
+                    </p>
+                    {duration && (
+                      <span className="inline-flex items-center gap-1.5 whitespace-nowrap text-white/90 text-sm lg:text-base shrink-0">
+                        <Clock3 className="w-4 h-4" />
+                        {duration}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-4 lg:p-8 space-y-6 lg:space-y-8 max-w-5xl w-full">
+              {/* ── Video / Assignment card ── */}
+              <div className="bg-white rounded-2xl shadow-sm">
+                {/* Video area */}
+                <div className="relative group">
+                  <div className="overflow-hidden rounded-t-2xl">
+                    {embedSrc ? (
+                      <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
+                        <iframe
+                          src={embedSrc}
+                          className="absolute inset-0 w-full h-full"
+                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                          allowFullScreen
+                          title={currentLesson?.title ?? 'Lesson video'}
+                        />
+                      </div>
+                    ) : (
+                      <div className="relative w-full bg-gray-900 flex items-center justify-center" style={{ paddingBottom: '56.25%' }}>
+                        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-white/60">
+                          <PlayCircle className="w-16 h-16 opacity-40" />
+                          <p className="text-sm">No video available for this lesson</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Prev / Next hover buttons */}
+                  <button
+                    onClick={goPrev}
+                    disabled={currentLessonIdx === 0}
+                    className="hidden md:flex absolute -left-5 top-1/2 -translate-y-1/2 z-10 w-10 h-10 items-center justify-center rounded-full bg-[#F48C06] text-white opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                    title="Previous lesson"
+                  >
+                    <ChevronLeft className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={goNext}
+                    disabled={currentLessonIdx >= allLessons.length - 1}
+                    className="hidden md:flex absolute -right-5 top-1/2 -translate-y-1/2 z-10 w-10 h-10 items-center justify-center rounded-full bg-[#F48C06] text-white opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                    title="Next lesson"
+                  >
+                    <ChevronRight className="w-5 h-5" />
+                  </button>
+                </div>
+
+                {/* Video controls bar */}
+                <div className="px-4 sm:px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-100">
+                  <div className="flex items-center gap-3">
+                    {(currentLesson as any)?.completed && (
+                      <span className="inline-flex items-center gap-1 text-xs text-green-600 font-medium">
+                        <CheckCircle2 className="w-4 h-4" /> Completed
+                      </span>
+                    )}
+                    <span className="text-sm text-gray-500">
+                      Lesson {currentLessonIdx + 1} of {allLessons.length}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={goPrev}
+                      disabled={currentLessonIdx === 0}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                    >
+                      <ChevronLeft className="w-4 h-4" /> Prev
+                    </button>
+                    <button
+                      onClick={goNext}
+                      disabled={currentLessonIdx >= allLessons.length - 1}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-theme-accent-primary text-white text-sm hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                    >
+                      Next <ChevronRight className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* ── Tabs ── */}
+              <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+                {/* Tab bar */}
+                <div className="flex overflow-x-auto border-b border-gray-200 scrollbar-hide">
+                  {tabs.map((tab) => (
+                    <button
+                      key={tab.id}
+                      onClick={() => setActiveTab(tab.id)}
+                      className={`flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors cursor-pointer ${
+                        activeTab === tab.id
+                          ? 'border-theme-accent-primary text-theme-accent-primary'
+                          : 'border-transparent text-gray-500 hover:text-gray-700'
+                      }`}
+                    >
+                      {tab.icon}
+                      {tab.label}
+                    </button>
+                  ))}
+                </div>
+
+                {/* Tab content */}
+                <div className="px-6 py-6" style={{ minHeight: 480 }}>
+                  {/* Overview */}
+                  {activeTab === 'overview' && (
+                    <div className="space-y-6">
+                      <div>
+                        <h3 className="text-base font-semibold text-gray-900 mb-2">About This Lesson</h3>
+                        {summary ? (
+                          <p className="text-sm text-gray-700 leading-relaxed">{summary}</p>
+                        ) : (
+                          <p className="text-sm text-gray-400 italic">No description available.</p>
+                        )}
+                      </div>
+                      {learningObjectives.length > 0 && (
+                        <div>
+                          <h3 className="text-base font-semibold text-gray-900 mb-3">What You'll Learn</h3>
+                          <ul className="space-y-2">
+                            {learningObjectives.map((obj, i) => (
+                              <li key={i} className="flex items-start gap-2.5 text-sm text-gray-700">
+                                <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+                                {obj}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Notes */}
+                  {activeTab === 'notes' && (
+                    <div className="flex flex-col items-center justify-center py-12 text-center gap-3">
+                      <StickyNote className="w-12 h-12 text-gray-300" />
+                      <p className="text-sm font-medium text-gray-500">Your notes will appear here</p>
+                      <p className="text-xs text-gray-400">Take notes while watching to revisit key points later.</p>
+                    </div>
+                  )}
+
+                  {/* Bookmarks */}
+                  {activeTab === 'bookmarks' && (
+                    <div className="flex flex-col items-center justify-center py-12 text-center gap-3">
+                      <Bookmark className="w-12 h-12 text-gray-300" />
+                      <p className="text-sm font-medium text-gray-500">No bookmarks yet</p>
+                      <p className="text-xs text-gray-400">Bookmark key moments in the video to revisit them.</p>
+                    </div>
+                  )}
+
+                  {/* Transcript */}
+                  {activeTab === 'transcript' && (
+                    <div className="flex flex-col items-center justify-center py-12 text-center gap-3">
+                      <FileAudio className="w-12 h-12 text-gray-300" />
+                      <p className="text-sm font-medium text-gray-500">Transcript not available</p>
+                      <p className="text-xs text-gray-400">The transcript for this lesson has not been generated yet.</p>
+                    </div>
+                  )}
+
+                  {/* Resources */}
+                  {activeTab === 'resources' && (
+                    <div>
+                      {secondaryResources.length > 0 ? (
+                        <div className="space-y-3">
+                          {secondaryResources.map((res: any, i: number) => (
+                            <a
+                              key={i}
+                              href={res.url ?? res.metadataJson?.url ?? '#'}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="flex items-center gap-3 p-3 rounded-lg border border-gray-200 hover:border-theme-accent-primary hover:bg-theme-accent-primary/5 transition-colors"
+                            >
+                              <FolderOpen className="w-5 h-5 text-theme-accent-primary flex-shrink-0" />
+                              <span className="text-sm text-gray-700">{res.title ?? res.name ?? `Resource ${i + 1}`}</span>
+                            </a>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="flex flex-col items-center justify-center py-12 text-center gap-3">
+                          <FolderOpen className="w-12 h-12 text-gray-300" />
+                          <p className="text-sm font-medium text-gray-500">No resources available</p>
+                          <p className="text-xs text-gray-400">Downloadable files and links will appear here.</p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* FAQ */}
+                  {activeTab === 'faq' && (
+                    <div>
+                      {faqs.length > 0 ? (
+                        <FAQAccordion faqs={faqs} />
+                      ) : (
+                        <div className="flex flex-col items-center justify-center py-12 text-center gap-3">
+                          <HelpCircle className="w-12 h-12 text-gray-300" />
+                          <p className="text-sm font-medium text-gray-500">No FAQs for this lesson</p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ── FAQ sub-component ── */
+function FAQAccordion({ faqs }: { faqs: { question: string; answer: string }[] }) {
+  const [openIdx, setOpenIdx] = useState<number | null>(null);
+  return (
+    <div className="space-y-2">
+      {faqs.map((faq, i) => (
+        <div key={i} className="border border-gray-200 rounded-lg overflow-hidden">
+          <button
+            onClick={() => setOpenIdx(openIdx === i ? null : i)}
+            className="w-full flex items-center justify-between px-4 py-3 text-left text-sm font-medium text-gray-800 hover:bg-gray-50 transition-colors cursor-pointer"
+          >
+            {faq.question}
+            <ChevronLeft className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${openIdx === i ? '-rotate-90' : 'rotate-180'}`} />
+          </button>
+          {openIdx === i && (
+            <div className="px-4 pb-4 text-sm text-gray-600 border-t border-gray-100 pt-3">
+              {faq.answer}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/pages/CreatorProfilePage.tsx

@@ -0,0 +1,161 @@
+import { Mail, BookOpen, Award } from 'lucide-react';
+import type { CreatorProfilePageProps } from '../../contracts/pages.contract';
+import { CourseCard } from '../molecules/CourseCard';
+import { LoadingSpinner } from '../molecules/LoadingSpinner';
+import { EmptyState } from '../molecules/EmptyState';
+import { User } from 'lucide-react';
+
+export function CreatorProfilePage(props: Partial<CreatorProfilePageProps>) {
+  const noop = (..._args: any[]) => {};
+  const { creator, courses = [], isLoading = false, onCourseClick = noop } = props;
+
+  if (isLoading) return <LoadingSpinner className="py-20" />;
+  if (!creator) return <EmptyState icon={<User className="w-16 h-16" />} title="Creator not found" />;
+
+  const name = creator.name || 'Course Creator';
+  const email = creator.email || '';
+  const bio = creator.bio || 'An experienced educator and software developer with expertise in modern web development and software engineering. With years of industry experience, they create comprehensive courses that help students master cutting-edge technologies and build real-world applications.';
+  const expertise: string[] = creator.expertise || [];
+  const avatarInitial = name.charAt(0).toUpperCase();
+  const totalCourses = creator.totalCourses ?? courses.length;
+  const totalLessons = creator.totalLessons;
+  const totalStudents = creator.totalStudents;
+
+  return (
+    <div className="min-h-screen">
+      <div>
+        {/* Hero Header */}
+        <div className="mb-12">
+          <div className="flex flex-col md:flex-row items-center gap-10">
+            {/* Left: Info */}
+            <div className="flex-1 text-gray-900 text-center md:text-left space-y-4">
+              <div className="inline-flex items-center gap-2 bg-indigo-100 px-4 py-2 rounded-full text-sm font-medium text-indigo-700">
+                <Award className="h-4 w-4" />
+                Professional Creator
+              </div>
+              <h1 className="text-5xl md:text-6xl font-bold tracking-tight">
+                {name}
+              </h1>
+              {email && (
+                <div className="flex items-center gap-2 text-gray-600 justify-center md:justify-start">
+                  <Mail className="h-4 w-4" />
+                  <span className="text-lg">{email}</span>
+                </div>
+              )}
+              <div className="flex items-center gap-6 pt-4 justify-center md:justify-start">
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-gray-900">{totalCourses}</div>
+                  <div className="text-sm text-gray-600">Courses</div>
+                </div>
+                {totalLessons != null && (
+                  <>
+                    <div className="w-px h-12 bg-gray-300"></div>
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-gray-900">{totalLessons}</div>
+                      <div className="text-sm text-gray-600">Lessons</div>
+                    </div>
+                  </>
+                )}
+                {totalStudents != null && (
+                  <>
+                    <div className="w-px h-12 bg-gray-300"></div>
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-gray-900">{totalStudents}</div>
+                      <div className="text-sm text-gray-600">Students</div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Right: Avatar */}
+            <div className="flex-shrink-0">
+              <div className="relative">
+                {creator.profileImage ? (
+                  <img
+                    src={creator.profileImage}
+                    alt={name}
+                    className="w-48 h-48 rounded-full object-cover shadow-2xl"
+                  />
+                ) : (
+                  <div className="w-48 h-48 rounded-full bg-gradient-to-br from-indigo-600 to-purple-600 flex items-center justify-center text-white text-7xl font-bold shadow-2xl">
+                    {avatarInitial}
+                  </div>
+                )}
+                <div className="absolute -bottom-2 -right-2 bg-green-500 h-12 w-12 rounded-full border-4 border-white shadow-lg"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* About Section */}
+        <div className="mb-12">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-1 w-12 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full"></div>
+            <h2 className="text-3xl font-bold text-gray-900">About</h2>
+          </div>
+          <p className="text-gray-700 leading-relaxed text-lg">{bio}</p>
+        </div>
+
+        {/* Expertise Section */}
+        {expertise.length > 0 && (
+          <div className="mb-12">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="h-1 w-12 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full"></div>
+              <h2 className="text-3xl font-bold text-gray-900">Expertise</h2>
+            </div>
+            <div className="flex flex-wrap gap-3">
+              {expertise.map((skill: string) => (
+                <span
+                  key={skill}
+                  className="px-4 py-2 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium"
+                >
+                  {skill}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Courses Section */}
+        <div>
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center gap-3">
+              <div className="h-1 w-12 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full"></div>
+              <h2 className="text-3xl font-bold text-gray-900">Featured Courses</h2>
+            </div>
+            <div className="flex items-center gap-2 bg-indigo-50 px-4 py-2 rounded-full">
+              <BookOpen className="h-5 w-5 text-indigo-600" />
+              <span className="font-semibold text-indigo-600">{courses.length} Courses</span>
+            </div>
+          </div>
+
+          {courses.length === 0 ? (
+            <EmptyState title="No courses yet" />
+          ) : (
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {courses.map((course: any) => (
+                <CourseCard
+                  key={course.id}
+                  id={course.id}
+                  title={course.title || ''}
+                  thumbnail={course.thumbnail}
+                  totalLessons={course.totalLessons || 0}
+                  progress={0}
+                  isFree={course.isFree ?? false}
+                  price={course.price}
+                  showProgress={false}
+                  showPrice={true}
+                  description={course.description || course.summary?.replace(/<[^>]*>/g, '') || ''}
+                  instructorName={creator.name}
+                  category={course.category}
+                  onClick={() => onCourseClick(course.id)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}