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

src/app/page.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent } from "@/components/ui/card"
-import { BrainCircuit, Activity, Zap, CheckCircle2, Shield, ArrowRight, Play, BookOpen, LineChart, Trophy, Sparkles, MessageSquare } from "lucide-react"
+import { BrainCircuit, Activity, Zap, CheckCircle2, Shield, ArrowRight, Play, BookOpen, LineChart, Trophy, Sparkles, MessageSquare, X, Minus } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { motion, useScroll, useTransform, Variants } from "framer-motion"
@@ -488,6 +488,66 @@ export default function MarketingPage() {
             </motion.div>
           </div>
         </section>
+
+        {/* Tier Comparison Matrix */}
+        <section className="py-24 px-6 max-w-5xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-5xl font-bold tracking-tighter mb-4">Compare Features</h2>
+            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">See exactly what you get with each PragatiVeer plan.</p>
+          </div>
+          
+          <div className="overflow-x-auto rounded-2xl border border-border/50 bg-secondary/10 backdrop-blur-sm shadow-xl">
+            <table className="w-full text-left border-collapse min-w-[700px]">
+              <thead>
+                <tr className="border-b border-border/50 bg-background/50">
+                  <th className="p-4 md:p-6 font-bold text-lg w-2/5">Feature</th>
+                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5">Free</th>
+                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-primary drop-shadow-[0_0_5px_var(--color-primary)]">Pro</th>
+                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-[#00F0FF] drop-shadow-[0_0_5px_rgba(0,240,255,0.5)]">AI Coach</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border/30 text-sm md:text-base">
+                {[
+                  { name: "Daily Practice Sheets", free: "1/day", pro: "Unlimited", ai: "Unlimited" },
+                  { name: "Answer Keys", free: true, pro: true, ai: true },
+                  { name: "Basic Progress Dashboard", free: true, pro: true, ai: true },
+                  { name: "Streak Tracking", free: true, pro: true, ai: true },
+                  { name: "Leaderboard (City/School)", free: true, pro: true, ai: true },
+                  { name: "Topic-wise Micro-tests", free: "5/day", pro: "Unlimited", ai: "Unlimited" },
+                  { name: "Weekly Test Series", free: false, pro: true, ai: true },
+                  { name: "Full-Length Mock Tests", free: false, pro: "4/month", ai: "Unlimited" },
+                  { name: "Previous Year Papers", free: false, pro: true, ai: true },
+                  { name: "Detailed Performance Analytics", free: false, pro: true, ai: true },
+                  { name: "Chapter-wise Progress", free: false, pro: true, ai: true },
+                  { name: "Doubt Resolution (Community)", free: false, pro: true, ai: true },
+                  { name: "Parent Dashboard", free: false, pro: true, ai: true },
+                  { name: "Offline Mode (Download DPS)", free: false, pro: true, ai: true },
+                  { name: "AI Mistake Tracking", free: false, pro: false, ai: true },
+                  { name: "Spaced Repetition", free: false, pro: false, ai: true },
+                  { name: "Personalized Daily Study Plan", free: false, pro: false, ai: true },
+                  { name: "AI Tutor Chat", free: false, pro: false, ai: true },
+                  { name: "Exam Readiness Score", free: false, pro: false, ai: true },
+                  { name: "Exam Day Strategy", free: false, pro: false, ai: true },
+                  { name: "College Predictor", free: false, pro: false, ai: true },
+                  { name: "Study Time Optimization", free: false, pro: false, ai: true },
+                ].map((feature, idx) => (
+                  <tr key={idx} className="hover:bg-background/40 transition-colors">
+                    <td className="p-4 md:p-6 font-medium">{feature.name}</td>
+                    <td className="p-4 md:p-6 text-center text-muted-foreground">
+                      {typeof feature.free === 'boolean' ? (feature.free ? <CheckCircle2 className="mx-auto text-muted-foreground" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold">{feature.free}</span>}
+                    </td>
+                    <td className="p-4 md:p-6 text-center">
+                      {typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-primary" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-primary">{feature.pro}</span>}
+                    </td>
+                    <td className="p-4 md:p-6 text-center bg-[#00F0FF]/5">
+                      {typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
       </main>
 
       {/* Global Footer (Static) */}

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 
+             <img 
-                src="https://sciencenotes.org/wp-content/uploads/2021/01/PeriodicTable2021-Color.png"
+                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}
+                className="object-contain w-full h-full max-h-[90vh]"
-                height={1080}
-                className="object-contain w-full h-full"
-                unoptimized
              />
           </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"
     >