Fix StreakCounter animation, PeriodicTable image, and add Feature Comparison matrix

src/components/CBT/PeriodicTable.tsx

@@ -25,13 +25,10 @@ export function PeriodicTable({ isOpen, onClose }: PeriodicTableProps) {
         </div>
         <div className="flex-1 bg-white p-4 flex items-center justify-center overflow-auto">
           <div className="relative min-w-[1000px] w-full h-full flex items-center justify-center">
-             <Image 
-                src="https://sciencenotes.org/wp-content/uploads/2021/01/PeriodicTable2021-Color.png"
+             <img 
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Periodic_table_large.svg/1920px-Periodic_table_large.svg.png"
                 alt="Periodic Table"
-                width={1920}
-                height={1080}
-                className="object-contain w-full h-full"
-                unoptimized
+                className="object-contain w-full h-full max-h-[90vh]"
              />
           </div>
         </div>

src/components/StreakCounter.tsx

@@ -12,7 +12,7 @@ export function StreakCounter({ streak }: StreakCounterProps) {
     <motion.div 
       initial={{ scale: 0.5, opacity: 0, y: -10 }}
       animate={{ scale: 1, opacity: 1, y: 0 }}
-      whileHover={{ scale: 1.1, rotate: [0, -5, 5, -5, 0] }}
+      whileHover={{ scale: 1.1, rotate: 5 }}
       transition={{ type: "spring", stiffness: 300, damping: 15 }}
       className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-orange-500/10 border border-orange-500/20 text-orange-500 font-bold shadow-[0_0_10px_-2px_rgba(249,115,22,0.5)] cursor-default"
     >