feat: Introduce My Learning page with user progress and gamification, standardize LLM models on Llama 3, and optimize branding logo image loading.

web/experience/src/components/AppHeader.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from "next/link";
+import Image from "next/image";
 import { useBranding } from "@/context/BrandingContext";
 import { useAuth } from "@/context/AuthContext";
 import { useTranslation } from "@/context/I18nContext";
@@ -17,7 +18,7 @@ export default function AppHeader() {
             <Link href="/" className="flex items-center gap-3 group">
                 <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative">
                     {branding?.logo_url ? (
-                        <img src={branding.logo_url} alt={branding.name} className="w-full h-full object-contain" />
+                        <Image src={branding.logo_url} alt={branding.name} fill className="object-contain" sizes="40px" />
                     ) : (
                         <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
                     )}

web/experience/src/components/blocks/HotspotPlayer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef } from "react";
+import Image from "next/image";
 import { Search, CheckCircle, XCircle, MousePointer2 } from "lucide-react";
 
 interface Hotspot {
@@ -88,10 +89,12 @@ export default function HotspotPlayer({
                 onClick={handleClick}
                 className="relative aspect-video rounded-3xl overflow-hidden border-4 border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
             >
-                <img
+                <Image
                     src={imageUrl}
                     alt={title}
-                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+                    fill
+                    className="object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                 />
 
                 {/* Overlay found hotspots */}
@@ -144,8 +147,8 @@ export default function HotspotPlayer({
                     <div
                         key={h.id}
                         className={`px-4 py-2 rounded-xl text-xs font-black tracking-widest uppercase transition-all flex items-center gap-2 ${found.includes(h.id)
-                                ? "bg-green-500 text-white translate-y-[-2px] shadow-lg shadow-green-500/20"
-                                : "bg-white/5 text-gray-500 border border-white/5"
+                            ? "bg-green-500 text-white translate-y-[-2px] shadow-lg shadow-green-500/20"
+                            : "bg-white/5 text-gray-500 border border-white/5"
                             }`}
                     >
                         {found.includes(h.id) ? <CheckCircle size={14} /> : <div className="w-1 h-1 rounded-full bg-current" />}