fix(dashboard): DPP tags properly dynamic based on user target exam

src/components/StreakCounter.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Flame } from "lucide-react"
+import { motion } from "framer-motion"
 
 interface StreakCounterProps {
   streak: number
@@ -8,9 +9,15 @@ interface StreakCounterProps {
 
 export function StreakCounter({ streak }: StreakCounterProps) {
   return (
-    <div 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 transition-transform hover:scale-105">
+    <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] }}
+      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"
+    >
       <Flame size={18} className="animate-pulse" />
       <span>{streak}</span>
-    </div>
+    </motion.div>
   )
 }