diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 43a3388e..c72ee4d6 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -145,22 +145,6 @@ const config: Config = {
                  </div>
                </div>`,
             },
-            {
-              type: "html",
-              value: '<hr style="margin: 0.3rem 0;">',
-            },
-            {
-              type: "html",
-              value: `<div class="grid grid-cols-3 gap-4">
-                 <a class="border-r col-span-1" href="/interview-prep/" target="_self">Interview Prep</a>
-                 <div class="grid grid-cols-1 col-span-2">
-                   <a href="/interview-prep/?tab=technical" target="_self" class="nav__icons"> 🧩Technical </a>
-                   <a href="/interview-prep/?tab=behavioral" target="_self" class="nav__icons"> 💡Behavioral </a>
-                   <a href="/interview-prep/?tab=companies" target="_self" class="nav__icons"> 🏢Companies </a>
-                   <a href="/interview-prep/?tab=practice" target="_self" class="nav__icons"> 🎯Practice </a>
-                 </div>
-               </div>`,
-            },
           ],
         },
         {
diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index ad1e6ff6..c429b31d 100644
--- a/src/pages/blogs/index.tsx
+++ b/src/pages/blogs/index.tsx
@@ -341,7 +341,7 @@ const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
                         rel="noopener noreferrer"
                         title={author.name}
                       >
-                        @{author.id || author.name.toLowerCase().replace(/\s+/g, "")}
+                        {author.name}
                       </Link>
                     </React.Fragment>
                   ))}
diff --git a/src/pages/interview-prep/BehavioralTab.tsx b/src/pages/interview-prep/BehavioralTab.tsx
deleted file mode 100644
index 63d1b4ce..00000000
--- a/src/pages/interview-prep/BehavioralTab.tsx
+++ /dev/null
@@ -1,638 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import Link from "@docusaurus/Link";
-
-interface BehavioralCategory {
-  category: string;
-  questions: string[];
-}
-
-interface BehavioralTabProps {
-  behavioralQuestions?: BehavioralCategory[];
-  expandedCategories?: { [key: number]: boolean };
-  toggleCategory: (index: number) => void;
-}
-
-const fadeIn = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
-};
-const staggerContainer = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.2 } },
-};
-
-const BehavioralTab: React.FC<BehavioralTabProps> = ({
-  behavioralQuestions = [],
-  expandedCategories = [],
-  toggleCategory,
-}) => {
-  return (
-    <motion.div initial="hidden" animate="visible" variants={staggerContainer}>
-      {/* Introduction Section */}
-      <motion.div className="mb-12 text-center" variants={fadeIn}>
-        <h2 className="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
-          Behavioral Interview Preparation
-        </h2>
-        <p className="ml-3 text-center text-xl text-gray-800 dark:text-gray-200">
-          Master the art of storytelling and showcase your soft skills with
-          confidence
-        </p>
-      </motion.div>
-
-      {/* What are Behavioral Interviews */}
-      <motion.div
-        className="mb-12 rounded-xl bg-gradient-to-r from-blue-50 to-purple-50 p-8 dark:from-blue-900/20 dark:to-purple-900/20"
-        variants={fadeIn}
-      >
-        <div className="mx-auto max-w-4xl">
-          <h3 className="mb-6 flex items-center text-2xl font-bold text-gray-900 dark:text-white">
-            <span className="mr-3 text-3xl">🤝</span>
-            What are Behavioral Interviews?
-          </h3>
-          <div className="grid gap-12 md:grid-cols-2">
-            <div>
-              <p className="mb-4 text-gray-800 dark:text-gray-200">
-                Behavioral interviews focus on how you've handled situations in
-                the past to predict your future performance. These questions
-                typically start with phrases like "Tell me about a time when..."
-                or "Describe a situation where..."
-              </p>
-              <p className="text-gray-800 dark:text-gray-200">
-                Unlike technical interviews that test your coding skills,
-                behavioral interviews evaluate your soft skills, cultural fit,
-                and ability to work in a team environment.
-              </p>
-            </div>
-            <div className="-mt-10 rounded-lg bg-white p-6 dark:bg-gray-800">
-              <h4 className="mb-4 font-bold text-gray-900 dark:text-white">
-                Why They Matter
-              </h4>
-              <ul className="space-y-2 text-sm">
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-800 dark:text-gray-200">
-                    70% of hiring decisions are based on cultural fit
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-800 dark:text-gray-200">
-                    Assess leadership and communication skills
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-800 dark:text-gray-200">
-                    Evaluate problem-solving approach
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-800 dark:text-gray-200">
-                    Determine team collaboration ability
-                  </span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* STAR Method Guide */}
-      <motion.div
-        className="mb-12 rounded-xl bg-gradient-to-r from-green-50 to-blue-50 p-8 dark:from-green-900/20 dark:to-blue-900/20"
-        variants={fadeIn}
-      >
-        <h3 className="mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white">
-          The STAR Method Framework
-        </h3>
-        <div className="mb-8 grid gap-6 md:grid-cols-4">
-          {[
-            {
-              letter: "S",
-              word: "Situation",
-              desc: "Set the context and background of your story",
-              color: "bg-red-500",
-            },
-            {
-              letter: "T",
-              word: "Task",
-              desc: "Describe your responsibility or goal",
-              color: "bg-yellow-500",
-            },
-            {
-              letter: "A",
-              word: "Action",
-              desc: "Explain the specific steps you took",
-              color: "bg-green-500",
-            },
-            {
-              letter: "R",
-              word: "Result",
-              desc: "Share the outcome and what you learned",
-              color: "bg-blue-500",
-            },
-          ].map((item, i) => (
-            <div key={i} className="text-center">
-              <div
-                className={`h-16 w-16 ${item.color} mx-auto mb-3 flex items-center justify-center rounded-full text-2xl font-bold text-white shadow-lg`}
-              >
-                {item.letter}
-              </div>
-              <h4 className="mb-2 font-bold text-gray-900 dark:text-white">
-                {item.word}
-              </h4>
-              <p className="text-sm text-gray-800 dark:text-gray-200">
-                {item.desc}
-              </p>
-            </div>
-          ))}
-        </div>
-
-        {/* STAR Method Examples */}
-        <div className="grid gap-8 md:grid-cols-2">
-          <div className="rounded-lg bg-white p-6 dark:bg-gray-800">
-            <h4 className="mb-4 flex items-center font-bold text-gray-900 dark:text-white">
-              <span className="mr-2 text-xl">💡</span>
-              Example 1: Leadership Challenge
-            </h4>
-            <div className="space-y-3 text-sm">
-              <div className="star-border-red border-l-4 border-red-500 pl-4">
-                <strong className="text-red-600 dark:text-red-400">
-                  Situation:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "During my internship, our team was behind schedule on a
-                  critical project with only 2 weeks left before the deadline."
-                </p>
-              </div>
-              <div className="star-border-yellow border-l-4 border-yellow-500 pl-4">
-                <strong className="text-yellow-600 dark:text-yellow-400">
-                  Task:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "As the junior developer, I needed to help coordinate efforts
-                  and find ways to accelerate our progress."
-                </p>
-              </div>
-              <div className="star-border-green border-l-4 border-green-500 pl-4">
-                <strong className="text-green-600 dark:text-green-400">
-                  Action:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "I organized daily stand-ups, created a shared task board, and
-                  volunteered to work extra hours on critical features."
-                </p>
-              </div>
-              <div className="star-border-blue border-l-4 border-blue-500 pl-4">
-                <strong className="text-blue-600 dark:text-blue-400">
-                  Result:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "We delivered the project on time, and my manager praised my
-                  initiative. I learned the importance of proactive
-                  communication."
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="rounded-lg bg-white p-6 dark:bg-gray-800">
-            <h4 className="mb-4 flex items-center font-bold text-gray-900 dark:text-white">
-              <span className="mr-2 text-xl">🔧</span>
-              Example 2: Problem Solving
-            </h4>
-            <div className="space-y-3 text-sm">
-              <div className="star-border-red border-l-4 border-red-500 pl-4">
-                <strong className="text-red-600 dark:text-red-400">
-                  Situation:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "Our main application was experiencing frequent crashes
-                  affecting 30% of users during peak hours."
-                </p>
-              </div>
-              <div className="star-border-yellow border-l-4 border-yellow-500 pl-4">
-                <strong className="text-yellow-600 dark:text-yellow-400">
-                  Task:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "I was assigned to identify the root cause and implement a
-                  solution within 48 hours."
-                </p>
-              </div>
-              <div className="star-border-green border-l-4 border-green-500 pl-4">
-                <strong className="text-green-600 dark:text-green-400">
-                  Action:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "I analyzed logs, reproduced the issue, and discovered a
-                  memory leak in our caching system. I implemented a fix and
-                  added monitoring."
-                </p>
-              </div>
-              <div className="star-border-blue border-l-4 border-blue-500 pl-4">
-                <strong className="text-blue-600 dark:text-blue-400">
-                  Result:
-                </strong>
-                <p className="mt-1 text-gray-800 dark:text-gray-200">
-                  "Crashes reduced by 95%, user satisfaction improved, and we
-                  prevented similar issues with better monitoring."
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Common Behavioral Questions - Collapsible */}
-      <motion.div className="mb-12" variants={fadeIn}>
-        <h3 className="mb-8 text-center text-2xl font-bold text-gray-900 dark:text-white">
-          Common Behavioral Questions by Category
-        </h3>
-        <div className="space-y-6">
-          {[
-            {
-              category: "Leadership & Initiative",
-              icon: "👑",
-              color: "from-purple-500 to-pink-500",
-              questions: [
-                "Tell me about yourself",
-                "Tell me about a time you led a team through a difficult project",
-                "Describe a situation where you had to influence others without authority",
-                "How do you handle team conflicts?",
-                "Give an example of when you took initiative on a project",
-              ],
-            },
-            {
-              category: "Problem Solving & Challenges",
-              icon: "🧩",
-              color: "from-blue-500 to-cyan-500",
-              questions: [
-                "Describe a challenging situation you faced and how you handled it",
-                "Tell me about the most challenging technical problem you've solved",
-                "Describe a time you failed and what you learned",
-                "How do you approach debugging complex issues?",
-                "Tell me about a time you had to make a decision with incomplete information",
-              ],
-            },
-            {
-              category: "Teamwork & Communication",
-              icon: "🤝",
-              color: "from-green-500 to-teal-500",
-              questions: [
-                "How do you handle conflict with team members?",
-                "Explain a complex technical concept to a non-technical person",
-                "Tell me about a time you had to give difficult feedback",
-                "Describe a time you disagreed with your manager",
-                "How do you handle disagreements with stakeholders?",
-              ],
-            },
-            {
-              category: "Growth & Learning",
-              icon: "📚",
-              color: "from-orange-500 to-red-500",
-              questions: [
-                "How do you stay updated with new technologies?",
-                "Tell me about a time you had to learn something completely new",
-                "What's the most important thing you've learned in your career?",
-                "Describe a time you received constructive criticism",
-                "How do you handle tight deadlines and pressure?",
-              ],
-            },
-          ].map((section, index) => (
-            <div
-              key={index}
-              className="overflow-hidden rounded-xl bg-white shadow-lg dark:bg-gray-800"
-            >
-              <button
-                onClick={() => toggleCategory(index)}
-                className={`w-full bg-gradient-to-r ${section.color} p-6 text-left transition-opacity hover:opacity-90`}
-              >
-                <div className="flex items-center justify-between">
-                  <h4 className="flex items-center text-xl font-bold text-white">
-                    <span className="mr-3 text-2xl">{section.icon}</span>
-                    {section.category}
-                  </h4>
-                  <span
-                    className="transform text-2xl text-white transition-transform duration-200"
-                    style={{
-                      transform: expandedCategories[index]
-                        ? "rotate(180deg)"
-                        : "rotate(0deg)",
-                    }}
-                  >
-                    ▼
-                  </span>
-                </div>
-              </button>
-
-              {expandedCategories[index] && (
-                <motion.div
-                  className="p-6"
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: "auto" }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <div className="grid gap-3">
-                    {section.questions.map((question, i) => (
-                      <div
-                        key={i}
-                        className="interview-prep-sidebar cursor-pointer rounded-lg border-l-4 border-gray-300 bg-gray-50 p-4 transition-colors hover:border-blue-500 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
-                      >
-                        <p className="font-medium text-gray-800 dark:text-gray-300">
-                          "{question}"
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </motion.div>
-              )}
-            </div>
-          ))}
-        </div>
-      </motion.div>
-
-      {/* Do's and Don'ts */}
-      <motion.div
-        className="mb-12 rounded-xl bg-white p-8 shadow-lg dark:bg-gray-800"
-        variants={fadeIn}
-      >
-        <h3 className="mb-8 text-center text-2xl font-bold text-gray-900 dark:text-white">
-          Do's and Don'ts for Behavioral Interviews
-        </h3>
-        <div className="grid gap-8 md:grid-cols-2">
-          {/* Do's */}
-          <div className="rounded-lg bg-green-50 p-6 dark:bg-green-900/20">
-            <h4 className="mb-6 flex items-center text-xl font-bold text-green-800 dark:text-green-300">
-              <span className="mr-2 text-2xl">✅</span>
-              Do's
-            </h4>
-            <div className="space-y-4">
-              {[
-                "Practice with real scenarios from your experience",
-                "Be concise and specific in your answers",
-                "Show enthusiasm and passion for your work",
-                "Use the STAR method to structure responses",
-                "Prepare 5-7 strong examples beforehand",
-                "Focus on your individual contributions",
-                "Quantify results whenever possible",
-                "Show what you learned from each experience",
-              ].map((item, i) => (
-                <div key={i} className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-green-500"></span>
-                  <span className="text-gray-800 dark:text-gray-300">
-                    {item}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Don'ts */}
-          <div className="rounded-lg bg-red-50 p-6 dark:bg-red-900/20">
-            <h4 className="mb-6 flex items-center text-xl font-bold text-red-800 dark:text-red-300">
-              <span className="mr-2 text-2xl">❌</span>
-              Don'ts
-            </h4>
-            <div className="space-y-4">
-              {[
-                "Memorize robotic, scripted answers",
-                "Be vague or over-explain situations",
-                "Appear disinterested or unenthusiastic",
-                "Speak negatively about previous employers",
-                "Make up stories or exaggerate experiences",
-                "Focus only on team achievements without your role",
-                "Give answers without clear structure",
-                "Forget to mention the results or outcomes",
-              ].map((item, i) => (
-                <div key={i} className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-red-500"></span>
-                  <span className="text-gray-800 dark:text-gray-300">
-                    {item}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Video Resources */}
-      <motion.div
-        className="mb-12 rounded-xl bg-gradient-to-r from-indigo-50 to-purple-50 p-8 dark:from-indigo-900/20 dark:to-purple-900/20"
-        variants={fadeIn}
-      >
-        <h3 className="mb-8 flex items-center justify-center text-center text-2xl font-bold text-gray-900 dark:text-white">
-          <span className="mr-3 text-3xl">🎥</span>
-          Video Resources & Learning Materials
-        </h3>
-        <div className="mb-8 grid gap-6 md:grid-cols-3">
-          {[
-            {
-              title: "Behavioral Interview Masterclass",
-              channel: "CareerVidz",
-              duration: "25 min",
-              description:
-                "Complete guide to behavioral interviews with real examples",
-              url: "https://www.youtube.com/watch?v=PJKYqLP6MRE",
-              thumbnail: "../../img/Behavioural_Interviews1.png",
-            },
-            {
-              title: "STAR Method Explained",
-              channel: "Interview Success",
-              duration: "15 min",
-              description:
-                "Step-by-step breakdown of the STAR method with practice",
-              url: "https://www.youtube.com/watch?v=V0jktOX8Jog",
-              thumbnail: "../../img/Behavioural_Interviews2.png",
-            },
-            {
-              title: "Mock Behavioral Interview",
-              channel: "Tech Interview Pro",
-              duration: "30 min",
-              description: "Real behavioral interview simulation with feedback",
-              url: "https://www.youtube.com/watch?v=1qw5ITr3k9E",
-              thumbnail: "../../img/Behavioural_Interviews3.png",
-            },
-          ].map((video, i) => (
-            <div
-              key={i}
-              className="transform overflow-hidden rounded-lg bg-white shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-800"
-            >
-              <img
-                src={video.thumbnail || "/placeholder.svg"}
-                alt={video.title}
-                className="h-40 w-full object-cover"
-              />
-              <div className="p-4">
-                <h4 className="mb-2 font-bold text-gray-900 dark:text-white">
-                  {video.title}
-                </h4>
-                <p className="mb-2 text-sm text-gray-700 dark:text-gray-300">
-                  {video.description}
-                </p>
-                <div className="mb-3 flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
-                  <span className="text-gray-600 dark:text-gray-400">
-                    {video.channel}
-                  </span>
-                  <span className="text-gray-600 dark:text-gray-400">
-                    {video.duration}
-                  </span>
-                </div>
-                <a
-                  href={video.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="watch-video-btn"
-                >
-                  <span className="mr-2 text-inherit">▶️</span>
-                  Watch Video
-                </a>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Additional Resources */}
-        <div className="rounded-lg bg-white p-6 dark:bg-gray-800">
-          <h4 className="mb-4 font-bold text-gray-900 dark:text-white">
-            Additional Learning Resources
-          </h4>
-          <div className="grid gap-4 md:grid-cols-2">
-            <div>
-              <h5 className="mb-2 font-semibold text-gray-800 dark:text-gray-200">
-                📚 Recommended Books
-              </h5>
-              <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-300">
-                <li>• "Cracking the Coding Interview" by Gayle McDowell</li>
-                <li>• "The Behavioral Interview Handbook" by Lewis Lin</li>
-                <li>• "What Color Is Your Parachute?" by Richard N. Bolles</li>
-              </ul>
-            </div>
-            <div>
-              <h5 className="mb-2 font-semibold text-gray-800 dark:text-gray-200">
-                🌐 Online Platforms
-              </h5>
-              <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-300">
-                <li>• Pramp - Free mock interviews</li>
-                <li>• InterviewBit - Behavioral question bank</li>
-                <li>• Glassdoor - Company-specific questions</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Contributor Note */}
-      <motion.div
-        className="interview-prep-join-comm rounded-xl border-2 border-yellow-200 bg-gradient-to-r from-yellow-50 to-orange-50 p-8 dark:border-yellow-800 dark:from-yellow-900/20 dark:to-orange-900/20 dark:outline dark:outline-2 dark:outline-yellow-800"
-        variants={fadeIn}
-      >
-        <div className="mb-6 text-center">
-          <h3 className="flex items-center justify-center text-2xl font-bold text-gray-900 dark:text-white">
-            <span className="mr-3 text-3xl">🤝</span>
-            Join Our Community & Contribute
-          </h3>
-          <p className="mt-2 text-gray-700 dark:text-gray-300">
-            Help make this resource better for everyone in the recode hive
-            community
-          </p>
-        </div>
-
-        <div className="mb-8 grid gap-6 md:grid-cols-3">
-          <div className="rounded-lg bg-white p-4 text-center dark:bg-gray-800">
-            <div className="mb-3 text-3xl">💬</div>
-            <h4 className="mb-2 font-bold text-gray-900 dark:text-white">
-              Share Your Experience
-            </h4>
-            <p className="text-sm text-gray-700 dark:text-gray-300">
-              Share your behavioral interview experiences, both successes and
-              challenges
-            </p>
-          </div>
-          <div className="rounded-lg bg-white p-4 text-center dark:bg-gray-800">
-            <div className="mb-3 text-3xl">📝</div>
-            <h4 className="mb-2 font-bold text-gray-900 dark:text-white">
-              Suggest Resources
-            </h4>
-            <p className="text-sm text-gray-700 dark:text-gray-300">
-              Recommend helpful videos, articles, or tools you've found useful
-            </p>
-          </div>
-          <div className="rounded-lg bg-white p-4 text-center dark:bg-gray-800">
-            <div className="mb-3 text-3xl">🔧</div>
-            <h4 className="mb-2 font-bold text-gray-900 dark:text-white">
-              Improve Content
-            </h4>
-            <p className="text-sm text-gray-700 dark:text-gray-300">
-              Help us add more examples, questions, or improve existing content
-            </p>
-          </div>
-        </div>
-
-        <div className="rounded-lg bg-white p-6 dark:bg-gray-800">
-          <h4 className="mb-4 text-center font-bold text-gray-900 dark:text-white">
-            How to Contribute
-          </h4>
-          <div className="grid gap-6 md:grid-cols-2">
-            <div>
-              <h5 className="mb-3 font-semibold text-gray-800 dark:text-gray-200">
-                🚀 Quick Ways to Help
-              </h5>
-              <ul className="space-y-2 text-sm">
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-700 dark:text-gray-300">
-                    Join our Discord community and share tips
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-700 dark:text-gray-300">
-                    Submit interview questions you've encountered
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-700 dark:text-gray-300">
-                    Review and suggest improvements to examples
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-700 dark:text-gray-300">
-                    Share company-specific behavioral interview tips
-                  </span>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <h5 className="mb-3 font-semibold text-gray-800 dark:text-gray-200">
-                📋 Getting Started
-              </h5>
-              <div className="space-y-3">
-                <Link
-                  to="/community"
-                  className="interview-prep-discord-btn block rounded-lg bg-blue-600 px-4 py-2 text-center font-medium text-white transition-colors hover:bg-blue-700"
-                >
-                  Join Discord Community
-                </Link>
-                <Link
-                  to="/get-started"
-                  className="block rounded-lg px-4 py-2 text-center font-medium text-blue-600 transition-colors dark:text-blue-400 dark:outline dark:outline-2 dark:outline-yellow-800 dark:hover:bg-yellow-800/20"
-                >
-                  Contributing Guide
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default BehavioralTab;
diff --git a/src/pages/interview-prep/CompaniesTab.tsx b/src/pages/interview-prep/CompaniesTab.tsx
deleted file mode 100644
index 0d974397..00000000
--- a/src/pages/interview-prep/CompaniesTab.tsx
+++ /dev/null
@@ -1,738 +0,0 @@
-import React from "react";
-import { useState, useMemo } from "react";
-import { motion } from "framer-motion";
-import Link from "@docusaurus/Link";
-import {
-  Search,
-  ChevronDown,
-  Users,
-  MessageSquare,
-  Building2,
-  Target,
-  Lightbulb,
-  Star,
-  TrendingUp,
-  Award,
-  Zap,
-} from "lucide-react";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import { Badge } from "../../components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../../components/ui/card";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../../components/ui/collapsible";
-
-interface CompanyTip {
-  company: string;
-  logo: string;
-  focus: string;
-  industry: string;
-  roleTypes: string[];
-  tips: string[];
-  commonQuestions: Array<{
-    question: string;
-    answer: string;
-    category: string;
-  }>;
-  focusAreas: string[];
-}
-
-interface CompaniesTabProps {
-  companyTips?: CompanyTip[];
-  toggleTips: (index: number) => void;
-  toggleQuestions: (index: number) => void;
-  showTips: { [key: number]: boolean };
-  showQuestions: { [key: number]: boolean };
-}
-
-const fadeIn = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
-};
-const staggerContainer = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.1 } },
-};
-
-const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedIndustry, setSelectedIndustry] = useState("");
-  const [selectedRole, setSelectedRole] = useState("");
-  const [expandedQuestions, setExpandedQuestions] = useState<{
-    [key: string]: boolean;
-  }>({});
-
-  const filteredCompanies = useMemo(() => {
-    return (companyTips || []).filter((company) => {
-      const matchesSearch =
-        company.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        company.focus.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        company.focusAreas.some((area) =>
-          area.toLowerCase().includes(searchTerm.toLowerCase()),
-        );
-
-      const matchesIndustry =
-        !selectedIndustry || company.industry === selectedIndustry;
-      const matchesRole =
-        !selectedRole || company.roleTypes.includes(selectedRole);
-
-      return matchesSearch && matchesIndustry && matchesRole;
-    });
-  }, [companyTips, searchTerm, selectedIndustry, selectedRole]);
-
-  const industries = [...new Set((companyTips || []).map((c) => c.industry))];
-  const roles = [...new Set((companyTips || []).flatMap((c) => c.roleTypes))];
-
-  const toggleQuestion = (companyIndex: number, questionIndex: number) => {
-    const key = `${companyIndex}-${questionIndex}`;
-    setExpandedQuestions((prev) => ({
-      ...prev,
-      [key]: !prev[key],
-    }));
-  };
-  const [expandedCompanies, setExpandedCompanies] = useState<{
-    [key: number]: boolean;
-  }>({});
-
-  const toggleCompany = (index: number) => {
-    setExpandedCompanies((prev) => ({
-      ...prev,
-      [index]: !prev[index],
-    }));
-  };
-
-  return (
-    <motion.div
-      initial="hidden"
-      animate="visible"
-      variants={staggerContainer}
-      className="space-y-8"
-    >
-      <motion.div className="mb-16 text-center" variants={fadeIn}>
-        <div className="mb-6 inline-flex items-center rounded-full bg-blue-100 px-4 py-2 text-sm font-medium text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
-          <span className="mr-2 h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
-          Master FAANG+ Company Interviews
-        </div>
-        <h2 className="mb-6 text-5xl font-bold text-gray-900 dark:text-white">
-          Company-Specific Interview Prep
-        </h2>
-        <p className="text-xl leading-relaxed text-gray-800 dark:text-gray-200">
-          Get insider knowledge, real interview questions, and proven strategies
-          for landing your dream job at top tech companies
-        </p>
-      </motion.div>
-
-      <motion.div
-        className="relative mb-16 overflow-hidden rounded-3xl border bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 p-12 dark:from-slate-900/50 dark:via-blue-900/20 dark:to-indigo-900/20"
-        variants={fadeIn}
-      >
-        <div className="absolute inset-0 opacity-5">
-          <div
-            className="absolute inset-0"
-            style={{
-              backgroundImage: `radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.3) 1px, transparent 0)`,
-              backgroundSize: "20px 20px",
-            }}
-          ></div>
-        </div>
-
-        <div className="relative z-10 mx-auto max-w-6xl">
-          <div className="mb-12 text-center">
-            <h3 className="mb-4 flex items-center justify-center text-3xl font-bold text-gray-900 dark:text-white">
-              <span className="mr-4 text-4xl">🏢</span>
-              FAANG+ Companies Overview
-            </h3>
-            <p className="text-lg text-gray-800 dark:text-gray-200">
-              Navigate the unique interview processes of the world's most
-              competitive tech companies
-            </p>
-          </div>
-
-          <div className="mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
-            {[
-              {
-                title: "Big Tech Focus",
-                icon: "🎯",
-                description:
-                  "Google, Amazon, Meta, Apple, Netflix, Microsoft + emerging unicorns",
-                color: "from-blue-500 to-blue-600",
-                stats: "6+ Companies",
-              },
-              {
-                title: "Interview Styles",
-                icon: "💼",
-                description:
-                  "System Design, Behavioral, Coding, Product Sense, Leadership",
-                color: "from-green-500 to-green-600",
-                stats: "5 Categories",
-              },
-              {
-                title: "Success Factors",
-                icon: "⭐",
-                description:
-                  "Company culture fit, technical excellence, leadership principles",
-                color: "from-purple-500 to-purple-600",
-                stats: "95% Success",
-              },
-              {
-                title: "Real Questions",
-                icon: "❓",
-                description:
-                  "Actual questions from recent interviews with detailed answers",
-                color: "from-orange-500 to-orange-600",
-                stats: "100+ Questions",
-              },
-            ].map((item, i) => (
-              <motion.div
-                key={i}
-                className="transform rounded-2xl bg-white p-6 text-center shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-800"
-                whileHover={{ y: -5 }}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: i * 0.1 }}
-              >
-                <div
-                  className={`relative mx-auto mb-4 flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br ${item.color} text-2xl font-bold text-white shadow-lg`}
-                >
-                  <motion.div
-                    className="absolute inset-0 rounded-2xl bg-white opacity-20"
-                    animate={{ scale: [1, 1.2, 1] }}
-                    transition={{
-                      duration: 2,
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: "easeInOut",
-                    }}
-                  />
-                  <span className="relative z-10">{item.icon}</span>
-                </div>
-                <h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
-                  {item.title}
-                </h4>
-                <p className="mb-3 text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-                  {item.description}
-                </p>
-                <div className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
-                  {item.stats}
-                </div>
-              </motion.div>
-            ))}
-          </div>
-
-          <div className="grid gap-8 rounded-xl md:grid-cols-3">
-            {[
-              {
-                metric: "92%",
-                label: "Interview Success Rate",
-                icon: "📈",
-                color: "text-green-600",
-              },
-              {
-                metric: "150+",
-                label: "Companies Covered",
-                icon: "🏢",
-                color: "text-blue-600",
-              },
-              {
-                metric: "50K+",
-                label: "Successful Candidates",
-                icon: "👥",
-                color: "text-purple-600",
-              },
-            ].map((stat, i) => (
-              <motion.div
-                key={i}
-                className="rounded-xl border bg-white/50 p-6 text-center backdrop-blur-sm dark:bg-gray-800/50"
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.5, delay: 0.5 + i * 0.1 }}
-              >
-                <div className={`mb-2 text-3xl font-bold ${stat.color}`}>
-                  {stat.metric}
-                </div>
-                <div className="flex items-center justify-center gap-2 text-sm text-gray-700 dark:text-gray-300">
-                  <span>{stat.icon}</span>
-                  {stat.label}
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </motion.div>
-
-      <motion.div
-        variants={fadeIn}
-        className="rounded-2xl border border-gray-100 bg-white p-8 shadow-xl dark:border-gray-700 dark:bg-gray-800"
-      >
-        <div className="mb-8 flex flex-col gap-6 md:flex-row">
-          <div className="relative flex-1">
-            <Search className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 transform text-gray-400" />
-            <Input
-              placeholder="Search companies, focus areas, technologies, or interview types..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="h-12 rounded-xl border-gray-200 bg-gray-50 pl-12 text-lg text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-            />
-          </div>
-          <div className="flex gap-3">
-            <select
-              value={selectedIndustry}
-              onChange={(e) => setSelectedIndustry(e.target.value)}
-              className="min-w-[140px] rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-            >
-              <option value="">All Industries</option>
-              {industries.map((industry) => (
-                <option key={industry} value={industry}>
-                  {industry}
-                </option>
-              ))}
-            </select>
-            <select
-              value={selectedRole}
-              onChange={(e) => setSelectedRole(e.target.value)}
-              className="min-w-[120px] rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-            >
-              <option value="">All Roles</option>
-              {roles.map((role) => (
-                <option key={role} value={role}>
-                  {role}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-            <Building2 className="h-4 w-4" />
-            Showing {filteredCompanies.length} of {companyTips?.length || 0}{" "}
-            companies
-          </div>
-          <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
-            <Star className="h-3 w-3" />
-            Updated weekly with latest interview insights
-          </div>
-        </div>
-      </motion.div>
-
-      <div className="space-y-12">
-        {filteredCompanies.map((company, companyIndex) => {
-          const isOpen = expandedCompanies[companyIndex] || false;
-          return (
-            <motion.div key={companyIndex} variants={fadeIn} className="group">
-              <Card className="transform overflow-hidden border-0 shadow-xl transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl">
-                <CardHeader className="relative bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 pb-6 dark:from-gray-800 dark:via-blue-900/20 dark:to-indigo-900/20">
-                  <div className="absolute inset-0 opacity-5">
-                    <div
-                      className="absolute inset-0"
-                      style={{
-                        backgroundImage: `radial-gradient(circle at 2px 2px, rgba(59, 130, 246, 0.3) 1px, transparent 0)`,
-                        backgroundSize: "24px 24px",
-                      }}
-                    ></div>
-                  </div>
-
-                  <div className="relative z-10 mt-8">
-                    <div className="mb-6 flex items-start gap-6">
-                      <motion.div
-                        className="relative"
-                        whileHover={{ scale: 1.1, rotate: 5 }}
-                        transition={{ type: "spring", stiffness: 300 }}
-                      >
-                        <img
-                          src={company.logo || "/placeholder.svg"}
-                          alt={`${company.company} logo`}
-                          className="h-20 w-20 rounded-2xl border border-gray-100 bg-white object-contain p-3 shadow-lg"
-                        />
-                        <div className="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500">
-                          <Award className="h-3 w-3 text-white" />
-                        </div>
-                      </motion.div>
-
-                      <div className="flex-1">
-                        <CardTitle className="mb-3 text-3xl text-gray-900 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">
-                          {company.company}
-                        </CardTitle>
-                        <div className="mb-4 flex items-center gap-2">
-                          <Target className="h-5 w-5 flex-shrink-0 text-blue-600" />
-                          <p className="text-lg leading-tight font-semibold text-blue-600 dark:text-blue-400">
-                            Focus: {company.focus}
-                          </p>
-                        </div>
-
-                        <div className="mb-4 flex flex-wrap gap-2">
-                          {company.focusAreas.slice(0, 4).map((area, i) => (
-                            <Badge
-                              key={i}
-                              variant="secondary"
-                              className="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                            >
-                              {area}
-                            </Badge>
-                          ))}
-                          {company.focusAreas.length > 4 && (
-                            <Badge
-                              variant="outline"
-                              className="rounded-full px-3 py-1 text-sm"
-                            >
-                              +{company.focusAreas.length - 4} more
-                            </Badge>
-                          )}
-                        </div>
-                      </div>
-
-                      <div className="text-right">
-                        <div className="mb-2 inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                          <TrendingUp className="mr-1 h-3 w-3" />
-                          High Demand
-                        </div>
-                        <div className="text-sm text-gray-600 dark:text-gray-400">
-                          {company.industry}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex flex-wrap items-center justify-between gap-2">
-                      <span className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-400">
-                        <Users className="h-4 w-4" />
-                        Common roles:
-                        {company.roleTypes.map((role, i) => (
-                          <Badge
-                            key={i}
-                            variant="outline"
-                            className="rounded-full border-gray-300 px-3 py-1 text-sm dark:border-gray-600"
-                          >
-                            {role}
-                          </Badge>
-                        ))}
-                      </span>
-
-                      <button
-                        onClick={() => toggleCompany(companyIndex)}
-                        className="rounded-full p-2 transition hover:bg-gray-200 dark:hover:bg-gray-700"
-                      >
-                        <motion.div
-                          animate={{ rotate: isOpen ? 180 : 0 }}
-                          transition={{ duration: 0.2 }}
-                        >
-                          <ChevronDown className="h-6 w-6 text-gray-700 dark:text-gray-300" />
-                        </motion.div>
-                      </button>
-                    </div>
-                  </div>
-                </CardHeader>
-
-                <motion.div
-                  initial={false}
-                  animate={{
-                    height: isOpen ? "auto" : 0,
-                    opacity: isOpen ? 1 : 0,
-                  }}
-                  transition={{ duration: 0.3 }}
-                  className="overflow-hidden"
-                >
-                  <CardContent className="space-y-8 p-8">
-                    <div className="grid gap-8 lg:grid-cols-2">
-                      <motion.div
-                        className="rounded-2xl border border-green-100 bg-gradient-to-br from-green-50 to-emerald-50 p-8 dark:border-green-800 dark:from-green-900/20 dark:to-emerald-900/20"
-                        whileHover={{ scale: 1.02 }}
-                        transition={{ type: "spring", stiffness: 300 }}
-                      >
-                        <h4 className="mb-6 flex items-center gap-3 text-xl font-bold text-gray-900 dark:text-white">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-green-500">
-                            <Lightbulb className="h-5 w-5 text-white" />
-                          </div>
-                          Key Preparation Tips
-                        </h4>
-                        <ul className="space-y-4">
-                          {company.tips.map((tip, i) => (
-                            <motion.li
-                              key={i}
-                              className="group flex items-start gap-4"
-                              initial={{ opacity: 0, x: -20 }}
-                              animate={{ opacity: 1, x: 0 }}
-                              transition={{ duration: 0.5, delay: i * 0.1 }}
-                            >
-                              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-500 transition-transform group-hover:scale-110">
-                                <span className="text-xs font-bold text-white">
-                                  {i + 1}
-                                </span>
-                              </div>
-                              <span className="leading-relaxed text-gray-800 dark:text-gray-200">
-                                {tip}
-                              </span>
-                            </motion.li>
-                          ))}
-                        </ul>
-                      </motion.div>
-
-                      <motion.div
-                        className="rounded-2xl border border-purple-100 bg-gradient-to-br from-purple-50 to-indigo-50 p-8 dark:border-purple-800 dark:from-purple-900/20 dark:to-indigo-900/20"
-                        whileHover={{ scale: 1.02 }}
-                        transition={{ type: "spring", stiffness: 300 }}
-                      >
-                        <h4 className="mb-6 flex items-center gap-3 text-xl font-bold text-gray-900 dark:text-white">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-500">
-                            <MessageSquare className="h-5 w-5 text-white" />
-                          </div>
-                          Common Interview Questions
-                        </h4>
-                        <div className="space-y-4">
-                          {company.commonQuestions.map((item, i) => {
-                            const questionKey = `${companyIndex}-${i}`;
-                            const isExpanded = expandedQuestions[questionKey];
-
-                            return (
-                              <Collapsible key={i}>
-                                <CollapsibleTrigger
-                                  onClick={() =>
-                                    toggleQuestion(companyIndex, i)
-                                  }
-                                  className="w-full text-left"
-                                >
-                                  <motion.div
-                                    className="flex items-start justify-between gap-3 rounded-xl border bg-white p-4 shadow-sm transition-all hover:bg-gray-50 hover:shadow-md dark:bg-gray-800 dark:hover:bg-gray-700"
-                                    whileHover={{ scale: 1.02 }}
-                                    whileTap={{ scale: 0.98 }}
-                                  >
-                                    <div className="flex-1">
-                                      <p className="mb-2 text-sm leading-relaxed font-semibold text-gray-900 dark:text-white">
-                                        "{item.question}"
-                                      </p>
-                                      <Badge
-                                        variant="outline"
-                                        className={`rounded-full px-2 py-1 text-xs ${
-                                          item.category === "System Design"
-                                            ? "border-blue-300 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
-                                            : item.category === "Behavioral"
-                                              ? "border-green-300 bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300"
-                                              : item.category === "Technical"
-                                                ? "border-purple-300 bg-purple-50 text-purple-700 dark:bg-purple-900/20 dark:text-purple-300"
-                                                : "border-orange-300 bg-orange-50 text-orange-700 dark:bg-orange-900/20 dark:text-orange-300"
-                                        }`}
-                                      >
-                                        {item.category}
-                                      </Badge>
-                                    </div>
-                                    <motion.div
-                                      animate={{ rotate: isExpanded ? 180 : 0 }}
-                                      transition={{ duration: 0.2 }}
-                                    >
-                                      <ChevronDown className="h-5 w-5 flex-shrink-0 text-gray-600" />
-                                    </motion.div>
-                                  </motion.div>
-                                </CollapsibleTrigger>
-                                <CollapsibleContent>
-                                  <motion.div
-                                    className="mt-3 rounded-xl border-l-4 border-blue-500 bg-gradient-to-r from-blue-50 to-purple-50 p-6 dark:from-blue-900/20 dark:to-purple-900/20"
-                                    initial={{ opacity: 0, y: -10 }}
-                                    animate={{ opacity: 1, y: 0 }}
-                                    transition={{ duration: 0.3 }}
-                                  >
-                                    <p className="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-                                      {item.answer}
-                                    </p>
-                                  </motion.div>
-                                </CollapsibleContent>
-                              </Collapsible>
-                            );
-                          })}
-                        </div>
-                      </motion.div>
-                    </div>
-
-                    <motion.div
-                      className="border-t pt-8"
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.5, delay: 0.3 }}
-                    >
-                      <div className="relative overflow-hidden rounded-2xl border-2 border-yellow-200 bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 p-8 dark:border-yellow-800 dark:from-yellow-900/20 dark:via-orange-900/20 dark:to-red-900/20">
-                        <div className="absolute top-4 right-4 text-4xl opacity-20">
-                          🚀
-                        </div>
-                        <div className="relative z-10">
-                          <div className="mb-4 flex items-center gap-3">
-                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500">
-                              <Users className="h-5 w-5 text-white" />
-                            </div>
-                            <h5 className="text-xl font-bold text-gray-900 dark:text-white">
-                              Community Contributors Needed!
-                            </h5>
-                          </div>
-                          <p className="mb-6 leading-relaxed text-gray-800 dark:text-gray-200">
-                            Help keep {company.company}'s interview information
-                            current! Share recent questions, tips, or insights
-                            you've encountered to help fellow candidates
-                            succeed.
-                          </p>
-                          <div className="flex flex-wrap gap-3">
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="rounded-xl border-orange-200 bg-white px-4 py-2 text-orange-700 hover:bg-orange-50 dark:border-orange-700 dark:bg-orange-900/20 dark:text-orange-300 dark:hover:bg-orange-800"
-                            >
-                              <Zap className="mr-2 h-4 w-4" />
-                              <Link to="/community">
-                                Share Interview Experience
-                              </Link>
-                            </Button>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="rounded-xl border-orange-200 bg-white px-4 py-2 text-orange-700 hover:bg-orange-50 dark:border-orange-700 dark:bg-orange-900/20 dark:text-orange-300 dark:hover:bg-orange-800"
-                            >
-                              <MessageSquare className="mr-2 h-4 w-4" />
-                              <Link to="/community">Add Recent Questions</Link>
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                    </motion.div>
-                  </CardContent>
-                </motion.div>
-              </Card>
-            </motion.div>
-          );
-        })}
-      </div>
-
-      {filteredCompanies.length === 0 && (
-        <motion.div
-          variants={fadeIn}
-          className="rounded-xl bg-white py-12 text-center shadow-lg dark:bg-gray-800"
-        >
-          <div className="mb-4 text-6xl">🔍</div>
-          <p className="mb-4 text-gray-700 dark:text-gray-400">
-            No companies match your current filters.
-          </p>
-          <Button
-            variant="outline"
-            onClick={() => {
-              setSearchTerm("");
-              setSelectedIndustry("");
-              setSelectedRole("");
-            }}
-            className="bg-blue-600 text-white hover:bg-blue-700"
-          >
-            Clear All Filters
-          </Button>
-        </motion.div>
-      )}
-
-      <motion.div
-        className="relative overflow-hidden rounded-3xl border-2 border-indigo-200 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-12 dark:border-indigo-800 dark:from-indigo-900/20 dark:via-purple-900/20 dark:to-pink-900/20"
-        variants={fadeIn}
-      >
-        <div className="absolute top-10 right-10 text-6xl opacity-10">🤝</div>
-        <div className="absolute bottom-10 left-10 text-4xl opacity-10">💡</div>
-
-        <div className="relative z-10">
-          <div className="mb-12 text-center">
-            <h3 className="mb-4 flex items-center justify-center text-4xl font-bold text-gray-900 dark:text-white">
-              <span className="mr-4 text-5xl">🤝</span>
-              Join Our Interview Prep Community
-            </h3>
-            <p className="text-xl text-gray-800 dark:text-gray-200">
-              Help build the most comprehensive company interview resource and
-              accelerate your career growth
-            </p>
-          </div>
-
-          <div className="mb-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-            {[
-              {
-                title: "Share Experiences",
-                icon: "💬",
-                description:
-                  "Recent interview questions and experiences from your interviews",
-                color: "from-blue-500 to-blue-600",
-                benefit: "Help 1000+ candidates",
-              },
-              {
-                title: "Update Tips",
-                icon: "💡",
-                description:
-                  "Company-specific preparation strategies and insider knowledge",
-                color: "from-green-500 to-green-600",
-                benefit: "Earn community points",
-              },
-              {
-                title: "Add Companies",
-                icon: "🏢",
-                description:
-                  "Request coverage for new companies and emerging startups",
-                color: "from-purple-500 to-purple-600",
-                benefit: "Shape our roadmap",
-              },
-              {
-                title: "Improve Content",
-                icon: "✨",
-                description:
-                  "Enhance existing company profiles with updated information",
-                color: "from-orange-500 to-orange-600",
-                benefit: "Get featured contributor",
-              },
-            ].map((item, i) => (
-              <motion.div
-                key={i}
-                className="transform rounded-2xl border border-gray-100 bg-white p-8 text-center transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:border-gray-700 dark:bg-gray-800"
-                whileHover={{ y: -10 }}
-                initial={{ opacity: 0, y: 30 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: i * 0.1 }}
-              >
-                <div
-                  className={`relative mx-auto mb-6 flex h-20 w-20 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br ${item.color} text-3xl font-bold text-white shadow-lg`}
-                >
-                  <motion.div
-                    className="absolute inset-0 rounded-2xl bg-white opacity-20"
-                    animate={{ scale: [1, 1.2, 1] }}
-                    transition={{
-                      duration: 3,
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: "easeInOut",
-                    }}
-                  />
-                  <span className="relative z-10">{item.icon}</span>
-                </div>
-                <h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
-                  {item.title}
-                </h4>
-                <p className="mb-4 text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-                  {item.description}
-                </p>
-                <div className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
-                  {item.benefit}
-                </div>
-              </motion.div>
-            ))}
-          </div>
-
-          <div className="text-center">
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-              <Link to="/community" className="inline-block">
-                <Button className="rounded-2xl bg-gradient-to-r from-indigo-600 to-purple-600 px-12 py-4 text-lg text-white shadow-lg hover:from-indigo-700 hover:to-purple-700">
-                  <Users className="mr-3 h-5 w-5" />
-                  Join Community Discord
-                </Button>
-              </Link>
-            </motion.div>
-            <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-              Join 50,000+ developers preparing for their dream jobs
-            </p>
-          </div>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default CompaniesTab;
diff --git a/src/pages/interview-prep/OverviewTab.tsx b/src/pages/interview-prep/OverviewTab.tsx
deleted file mode 100644
index 8437b66e..00000000
--- a/src/pages/interview-prep/OverviewTab.tsx
+++ /dev/null
@@ -1,739 +0,0 @@
-import React from "react";
-import { useState, useMemo } from "react";
-import { motion } from "framer-motion";
-import Link from "@docusaurus/Link";
-import {
-  Search,
-  ChevronDown,
-  Users,
-  MessageSquare,
-  Building2,
-  Target,
-  Lightbulb,
-  Star,
-  TrendingUp,
-  Award,
-  Zap,
-} from "lucide-react";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import { Badge } from "../../components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../../components/ui/card";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../../components/ui/collapsible";
-
-interface CompanyTip {
-  company: string;
-  logo: string;
-  focus: string;
-  industry: string;
-  roleTypes: string[];
-  tips: string[];
-  commonQuestions: Array<{
-    question: string;
-    answer: string;
-    category: string;
-  }>;
-  focusAreas: string[];
-}
-
-interface CompaniesTabProps {
-  companyTips?: CompanyTip[];
-  toggleTips: (index: number) => void;
-  toggleQuestions: (index: number) => void;
-  showTips: { [key: number]: boolean };
-  showQuestions: { [key: number]: boolean };
-  setActiveTab?: (tab: "overview" | "technical" | "behavioral" | "companies" | "practice") => void;
-}
-
-const fadeIn = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
-};
-const staggerContainer = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.1 } },
-};
-
-const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedIndustry, setSelectedIndustry] = useState("");
-  const [selectedRole, setSelectedRole] = useState("");
-  const [expandedQuestions, setExpandedQuestions] = useState<{
-    [key: string]: boolean;
-  }>({});
-
-  const filteredCompanies = useMemo(() => {
-    return (companyTips || []).filter((company) => {
-      const matchesSearch =
-        company.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        company.focus.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        company.focusAreas.some((area) =>
-          area.toLowerCase().includes(searchTerm.toLowerCase()),
-        );
-
-      const matchesIndustry =
-        !selectedIndustry || company.industry === selectedIndustry;
-      const matchesRole =
-        !selectedRole || company.roleTypes.includes(selectedRole);
-
-      return matchesSearch && matchesIndustry && matchesRole;
-    });
-  }, [companyTips, searchTerm, selectedIndustry, selectedRole]);
-
-  const industries = [...new Set((companyTips || []).map((c) => c.industry))];
-  const roles = [...new Set((companyTips || []).flatMap((c) => c.roleTypes))];
-
-  const toggleQuestion = (companyIndex: number, questionIndex: number) => {
-    const key = `${companyIndex}-${questionIndex}`;
-    setExpandedQuestions((prev) => ({
-      ...prev,
-      [key]: !prev[key],
-    }));
-  };
-  const [expandedCompanies, setExpandedCompanies] = useState<{
-    [key: number]: boolean;
-  }>({});
-
-  const toggleCompany = (index: number) => {
-    setExpandedCompanies((prev) => ({
-      ...prev,
-      [index]: !prev[index],
-    }));
-  };
-
-  return (
-    <motion.div
-      initial="hidden"
-      animate="visible"
-      variants={staggerContainer}
-      className="space-y-8"
-    >
-      <motion.div className="mb-16 text-center" variants={fadeIn}>
-        <div className="mb-6 inline-flex items-center rounded-full bg-blue-100 px-4 py-2 text-sm font-medium text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
-          <span className="mr-2 h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
-          Master FAANG+ Company Interviews
-        </div>
-        <h2 className="mb-6 text-5xl font-bold text-gray-900 dark:text-white">
-          Company-Specific Interview Prep
-        </h2>
-        <p className="text-xl text-center text-gray-800 dark:text-gray-200">
-          Get insider knowledge, real interview questions, and proven strategies
-          for landing your dream job at top tech companies
-        </p>
-      </motion.div>
-
-      <motion.div
-        className="relative mb-16 overflow-hidden rounded-3xl border bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 p-12 dark:from-slate-900/50 dark:via-blue-900/20 dark:to-indigo-900/20"
-        variants={fadeIn}
-      >
-        <div className="absolute inset-0 opacity-5">
-          <div
-            className="absolute inset-0"
-            style={{
-              backgroundImage: `radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.3) 1px, transparent 0)`,
-              backgroundSize: "20px 20px",
-            }}
-          ></div>
-        </div>
-
-        <div className="relative z-10 mx-auto max-w-6xl">
-          <div className="mb-12 text-center">
-            <h3 className="mb-4 flex items-center justify-center text-3xl font-bold text-gray-900 dark:text-white">
-              <span className="mr-4 text-4xl">🏢</span>
-              FAANG+ Companies Overview
-            </h3>
-            <p className="text-lg text-gray-800 dark:text-gray-200">
-              Navigate the unique interview processes of the world's most
-              competitive tech companies
-            </p>
-          </div>
-
-          <div className="mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
-            {[
-              {
-                title: "Big Tech Focus",
-                icon: "🎯",
-                description:
-                  "Google, Amazon, Meta, Apple, Netflix, Microsoft + emerging unicorns",
-                color: "from-blue-500 to-blue-600",
-                stats: "6+ Companies",
-              },
-              {
-                title: "Interview Styles",
-                icon: "💼",
-                description:
-                  "System Design, Behavioral, Coding, Product Sense, Leadership",
-                color: "from-green-500 to-green-600",
-                stats: "5 Categories",
-              },
-              {
-                title: "Success Factors",
-                icon: "⭐",
-                description:
-                  "Company culture fit, technical excellence, leadership principles",
-                color: "from-purple-500 to-purple-600",
-                stats: "95% Success",
-              },
-              {
-                title: "Real Questions",
-                icon: "❓",
-                description:
-                  "Actual questions from recent interviews with detailed answers",
-                color: "from-orange-500 to-orange-600",
-                stats: "100+ Questions",
-              },
-            ].map((item, i) => (
-              <motion.div
-                key={i}
-                className="transform rounded-2xl bg-white p-6 text-center shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-800"
-                whileHover={{ y: -5 }}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: i * 0.1 }}
-              >
-                <div
-                  className={`relative mx-auto mb-4 flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br ${item.color} text-2xl font-bold text-white shadow-lg`}
-                >
-                  <motion.div
-                    className="absolute inset-0 rounded-2xl bg-white opacity-20"
-                    animate={{ scale: [1, 1.2, 1] }}
-                    transition={{
-                      duration: 2,
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: "easeInOut",
-                    }}
-                  />
-                  <span className="relative z-10">{item.icon}</span>
-                </div>
-                <h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
-                  {item.title}
-                </h4>
-                <p className="mb-3 text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-                  {item.description}
-                </p>
-                <div className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
-                  {item.stats}
-                </div>
-              </motion.div>
-            ))}
-          </div>
-
-          <div className="grid gap-8 rounded-xl md:grid-cols-3">
-            {[
-              {
-                metric: "92%",
-                label: "Interview Success Rate",
-                icon: "📈",
-                color: "text-green-600",
-              },
-              {
-                metric: "150+",
-                label: "Companies Covered",
-                icon: "🏢",
-                color: "text-blue-600",
-              },
-              {
-                metric: "50K+",
-                label: "Successful Candidates",
-                icon: "👥",
-                color: "text-purple-600",
-              },
-            ].map((stat, i) => (
-              <motion.div
-                key={i}
-                className="rounded-xl border bg-white/50 p-6 text-center backdrop-blur-sm dark:bg-gray-800/50"
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.5, delay: 0.5 + i * 0.1 }}
-              >
-                <div className={`mb-2 text-3xl font-bold ${stat.color}`}>
-                  {stat.metric}
-                </div>
-                <div className="flex items-center justify-center gap-2 text-sm text-gray-700 dark:text-gray-300">
-                  <span>{stat.icon}</span>
-                  {stat.label}
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </motion.div>
-
-      <motion.div
-        variants={fadeIn}
-        className="rounded-2xl border border-gray-100 bg-white p-8 shadow-xl dark:border-gray-700 dark:bg-gray-800"
-      >
-        <div className="mb-8 flex flex-col gap-6 md:flex-row">
-          <div className="relative flex-1">
-            <Search className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 transform text-gray-400" />
-            <Input
-              placeholder="Search companies, focus areas, technologies, or interview types..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="h-12 rounded-xl border-gray-200 bg-gray-50 pl-12 text-lg text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-            />
-          </div>
-          <div className="flex gap-3">
-            <select
-              value={selectedIndustry}
-              onChange={(e) => setSelectedIndustry(e.target.value)}
-              className="min-w-[140px] rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-            >
-              <option value="">All Industries</option>
-              {industries.map((industry) => (
-                <option key={industry} value={industry}>
-                  {industry}
-                </option>
-              ))}
-            </select>
-            <select
-              value={selectedRole}
-              onChange={(e) => setSelectedRole(e.target.value)}
-              className="min-w-[120px] rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-            >
-              <option value="">All Roles</option>
-              {roles.map((role) => (
-                <option key={role} value={role}>
-                  {role}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-            <Building2 className="h-4 w-4" />
-            Showing {filteredCompanies.length} of {companyTips?.length || 0}{" "}
-            companies
-          </div>
-          <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
-            <Star className="h-3 w-3" />
-            Updated weekly with latest interview insights
-          </div>
-        </div>
-      </motion.div>
-
-      <div className="space-y-12">
-        {filteredCompanies.map((company, companyIndex) => {
-          const isOpen = expandedCompanies[companyIndex] || false;
-          return (
-            <motion.div key={companyIndex} variants={fadeIn} className="group">
-              <Card className="transform overflow-hidden border-0 shadow-xl transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl">
-                <CardHeader className="relative bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 pb-6 dark:from-gray-800 dark:via-blue-900/20 dark:to-indigo-900/20">
-                  <div className="absolute inset-0 opacity-5">
-                    <div
-                      className="absolute inset-0"
-                      style={{
-                        backgroundImage: `radial-gradient(circle at 2px 2px, rgba(59, 130, 246, 0.3) 1px, transparent 0)`,
-                        backgroundSize: "24px 24px",
-                      }}
-                    ></div>
-                  </div>
-
-                  <div className="relative z-10 mt-8">
-                    <div className="mb-6 flex items-start gap-6">
-                      <motion.div
-                        className="relative"
-                        whileHover={{ scale: 1.1, rotate: 5 }}
-                        transition={{ type: "spring", stiffness: 300 }}
-                      >
-                        <img
-                          src={company.logo || "/placeholder.svg"}
-                          alt={`${company.company} logo`}
-                          className="h-20 w-20 rounded-2xl border border-gray-100 bg-white object-contain p-3 shadow-lg"
-                        />
-                        <div className="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500">
-                          <Award className="h-3 w-3 text-white" />
-                        </div>
-                      </motion.div>
-
-                      <div className="flex-1">
-                        <CardTitle className="mb-3 text-3xl text-gray-900 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">
-                          {company.company}
-                        </CardTitle>
-                        <div className="mb-4 flex items-center gap-2">
-                          <Target className="h-5 w-5 flex-shrink-0 text-blue-600" />
-                          <p className="text-lg leading-tight font-semibold text-blue-600 dark:text-blue-400">
-                            Focus: {company.focus}
-                          </p>
-                        </div>
-
-                        <div className="mb-4 flex flex-wrap gap-2">
-                          {company.focusAreas.slice(0, 4).map((area, i) => (
-                            <Badge
-                              key={i}
-                              variant="secondary"
-                              className="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                            >
-                              {area}
-                            </Badge>
-                          ))}
-                          {company.focusAreas.length > 4 && (
-                            <Badge
-                              variant="outline"
-                              className="rounded-full px-3 py-1 text-sm"
-                            >
-                              +{company.focusAreas.length - 4} more
-                            </Badge>
-                          )}
-                        </div>
-                      </div>
-
-                      <div className="text-right">
-                        <div className="mb-2 inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                          <TrendingUp className="mr-1 h-3 w-3" />
-                          High Demand
-                        </div>
-                        <div className="text-sm text-gray-600 dark:text-gray-400">
-                          {company.industry}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex flex-wrap items-center justify-between gap-2">
-                      <span className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-400">
-                        <Users className="h-4 w-4" />
-                        Common roles:
-                        {company.roleTypes.map((role, i) => (
-                          <Badge
-                            key={i}
-                            variant="outline"
-                            className="rounded-full border-gray-300 px-3 py-1 text-sm dark:border-gray-600"
-                          >
-                            {role}
-                          </Badge>
-                        ))}
-                      </span>
-
-                      <button
-                        onClick={() => toggleCompany(companyIndex)}
-                        className="rounded-full p-2 transition hover:bg-gray-200 dark:hover:bg-gray-700"
-                      >
-                        <motion.div
-                          animate={{ rotate: isOpen ? 180 : 0 }}
-                          transition={{ duration: 0.2 }}
-                        >
-                          <ChevronDown className="h-6 w-6 text-gray-700 dark:text-gray-300" />
-                        </motion.div>
-                      </button>
-                    </div>
-                  </div>
-                </CardHeader>
-
-                <motion.div
-                  initial={false}
-                  animate={{
-                    height: isOpen ? "auto" : 0,
-                    opacity: isOpen ? 1 : 0,
-                  }}
-                  transition={{ duration: 0.3 }}
-                  className="overflow-hidden"
-                >
-                  <CardContent className="space-y-8 p-8">
-                    <div className="grid gap-8 lg:grid-cols-2">
-                      <motion.div
-                        className="rounded-2xl border border-green-100 bg-gradient-to-br from-green-50 to-emerald-50 p-8 dark:border-green-800 dark:from-green-900/20 dark:to-emerald-900/20"
-                        whileHover={{ scale: 1.02 }}
-                        transition={{ type: "spring", stiffness: 300 }}
-                      >
-                        <h4 className="mb-6 flex items-center gap-3 text-xl font-bold text-gray-900 dark:text-white">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-green-500">
-                            <Lightbulb className="h-5 w-5 text-white" />
-                          </div>
-                          Key Preparation Tips
-                        </h4>
-                        <ul className="space-y-4">
-                          {company.tips.map((tip, i) => (
-                            <motion.li
-                              key={i}
-                              className="group flex items-start gap-4"
-                              initial={{ opacity: 0, x: -20 }}
-                              animate={{ opacity: 1, x: 0 }}
-                              transition={{ duration: 0.5, delay: i * 0.1 }}
-                            >
-                              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-500 transition-transform group-hover:scale-110">
-                                <span className="text-xs font-bold text-white">
-                                  {i + 1}
-                                </span>
-                              </div>
-                              <span className="leading-relaxed text-gray-800 dark:text-gray-200">
-                                {tip}
-                              </span>
-                            </motion.li>
-                          ))}
-                        </ul>
-                      </motion.div>
-
-                      <motion.div
-                        className="rounded-2xl border border-purple-100 bg-gradient-to-br from-purple-50 to-indigo-50 p-8 dark:border-purple-800 dark:from-purple-900/20 dark:to-indigo-900/20"
-                        whileHover={{ scale: 1.02 }}
-                        transition={{ type: "spring", stiffness: 300 }}
-                      >
-                        <h4 className="mb-6 flex items-center gap-3 text-xl font-bold text-gray-900 dark:text-white">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-500">
-                            <MessageSquare className="h-5 w-5 text-white" />
-                          </div>
-                          Common Interview Questions
-                        </h4>
-                        <div className="space-y-4">
-                          {company.commonQuestions.map((item, i) => {
-                            const questionKey = `${companyIndex}-${i}`;
-                            const isExpanded = expandedQuestions[questionKey];
-
-                            return (
-                              <Collapsible key={i}>
-                                <CollapsibleTrigger
-                                  onClick={() =>
-                                    toggleQuestion(companyIndex, i)
-                                  }
-                                  className="w-full text-left"
-                                >
-                                  <motion.div
-                                    className="flex items-start justify-between gap-3 rounded-xl border bg-white p-4 shadow-sm transition-all hover:bg-gray-50 hover:shadow-md dark:bg-gray-800 dark:hover:bg-gray-700"
-                                    whileHover={{ scale: 1.02 }}
-                                    whileTap={{ scale: 0.98 }}
-                                  >
-                                    <div className="flex-1">
-                                      <p className="mb-2 text-sm leading-relaxed font-semibold text-gray-900 dark:text-white">
-                                        "{item.question}"
-                                      </p>
-                                      <Badge
-                                        variant="outline"
-                                        className={`rounded-full px-2 py-1 text-xs ${
-                                          item.category === "System Design"
-                                            ? "border-blue-300 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
-                                            : item.category === "Behavioral"
-                                              ? "border-green-300 bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300"
-                                              : item.category === "Technical"
-                                                ? "border-purple-300 bg-purple-50 text-purple-700 dark:bg-purple-900/20 dark:text-purple-300"
-                                                : "border-orange-300 bg-orange-50 text-orange-700 dark:bg-orange-900/20 dark:text-orange-300"
-                                        }`}
-                                      >
-                                        {item.category}
-                                      </Badge>
-                                    </div>
-                                    <motion.div
-                                      animate={{ rotate: isExpanded ? 180 : 0 }}
-                                      transition={{ duration: 0.2 }}
-                                    >
-                                      <ChevronDown className="h-5 w-5 flex-shrink-0 text-gray-600" />
-                                    </motion.div>
-                                  </motion.div>
-                                </CollapsibleTrigger>
-                                <CollapsibleContent>
-                                  <motion.div
-                                    className="mt-3 rounded-xl border-l-4 border-blue-500 bg-gradient-to-r from-blue-50 to-purple-50 p-6 dark:from-blue-900/20 dark:to-purple-900/20"
-                                    initial={{ opacity: 0, y: -10 }}
-                                    animate={{ opacity: 1, y: 0 }}
-                                    transition={{ duration: 0.3 }}
-                                  >
-                                    <p className="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-                                      {item.answer}
-                                    </p>
-                                  </motion.div>
-                                </CollapsibleContent>
-                              </Collapsible>
-                            );
-                          })}
-                        </div>
-                      </motion.div>
-                    </div>
-
-                    <motion.div
-                      className="border-t pt-8"
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.5, delay: 0.3 }}
-                    >
-                      <div className="relative overflow-hidden rounded-2xl border-2 border-yellow-200 bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 p-8 dark:border-yellow-800 dark:from-yellow-900/20 dark:via-orange-900/20 dark:to-red-900/20">
-                        <div className="absolute top-4 right-4 text-4xl opacity-20">
-                          🚀
-                        </div>
-                        <div className="relative z-10">
-                          <div className="mb-4 flex items-center gap-3">
-                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500">
-                              <Users className="h-5 w-5 text-white" />
-                            </div>
-                            <h5 className="text-xl font-bold text-gray-900 dark:text-white">
-                              Community Contributors Needed!
-                            </h5>
-                          </div>
-                          <p className="mb-6 leading-relaxed text-gray-800 dark:text-gray-200">
-                            Help keep {company.company}'s interview information
-                            current! Share recent questions, tips, or insights
-                            you've encountered to help fellow candidates
-                            succeed.
-                          </p>
-                          <div className="flex flex-wrap gap-3">
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="rounded-xl border-orange-200 bg-white px-4 py-2 text-orange-700 hover:bg-orange-50 dark:border-orange-700 dark:bg-orange-900/20 dark:text-orange-300 dark:hover:bg-orange-800"
-                            >
-                              <Zap className="mr-2 h-4 w-4" />
-                              <Link to="/community">
-                                Share Interview Experience
-                              </Link>
-                            </Button>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="rounded-xl border-orange-200 bg-white px-4 py-2 text-orange-700 hover:bg-orange-50 dark:border-orange-700 dark:bg-orange-900/20 dark:text-orange-300 dark:hover:bg-orange-800"
-                            >
-                              <MessageSquare className="mr-2 h-4 w-4" />
-                              <Link to="/community">Add Recent Questions</Link>
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                    </motion.div>
-                  </CardContent>
-                </motion.div>
-              </Card>
-            </motion.div>
-          );
-        })}
-      </div>
-
-      {filteredCompanies.length === 0 && (
-        <motion.div
-          variants={fadeIn}
-          className="rounded-xl bg-white py-12 text-center shadow-lg dark:bg-gray-800"
-        >
-          <div className="mb-4 text-6xl">🔍</div>
-          <p className="mb-4 text-gray-700 dark:text-gray-400">
-            No companies match your current filters.
-          </p>
-          <Button
-            variant="outline"
-            onClick={() => {
-              setSearchTerm("");
-              setSelectedIndustry("");
-              setSelectedRole("");
-            }}
-            className="bg-blue-600 text-white hover:bg-blue-700"
-          >
-            Clear All Filters
-          </Button>
-        </motion.div>
-      )}
-
-      <motion.div
-        className="relative overflow-hidden rounded-3xl border-2 border-indigo-200 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-12 dark:border-indigo-800 dark:from-indigo-900/20 dark:via-purple-900/20 dark:to-pink-900/20"
-        variants={fadeIn}
-      >
-        <div className="absolute top-10 right-10 text-6xl opacity-10">🤝</div>
-        <div className="absolute bottom-10 left-10 text-4xl opacity-10">💡</div>
-
-        <div className="relative z-10">
-          <div className="mb-12 text-center">
-            <h3 className="mb-4 flex items-center justify-center text-4xl font-bold text-gray-900 dark:text-white">
-              <span className="mr-4 text-5xl">🤝</span>
-              Join Our Interview Prep Community
-            </h3>
-            <p className="text-xl text-gray-800 dark:text-gray-200">
-              Help build the most comprehensive company interview resource and
-              accelerate your career growth
-            </p>
-          </div>
-
-          <div className="mb-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-            {[
-              {
-                title: "Share Experiences",
-                icon: "💬",
-                description:
-                  "Recent interview questions and experiences from your interviews",
-                color: "from-blue-500 to-blue-600",
-                benefit: "Help 1000+ candidates",
-              },
-              {
-                title: "Update Tips",
-                icon: "💡",
-                description:
-                  "Company-specific preparation strategies and insider knowledge",
-                color: "from-green-500 to-green-600",
-                benefit: "Earn community points",
-              },
-              {
-                title: "Add Companies",
-                icon: "🏢",
-                description:
-                  "Request coverage for new companies and emerging startups",
-                color: "from-purple-500 to-purple-600",
-                benefit: "Shape our roadmap",
-              },
-              {
-                title: "Improve Content",
-                icon: "✨",
-                description:
-                  "Enhance existing company profiles with updated information",
-                color: "from-orange-500 to-orange-600",
-                benefit: "Get featured contributor",
-              },
-            ].map((item, i) => (
-              <motion.div
-                key={i}
-                className="transform rounded-2xl border border-gray-100 bg-white p-8 text-center transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:border-gray-700 dark:bg-gray-800"
-                whileHover={{ y: -10 }}
-                initial={{ opacity: 0, y: 30 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: i * 0.1 }}
-              >
-                <div
-                  className={`relative mx-auto mb-6 flex h-20 w-20 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br ${item.color} text-3xl font-bold text-white shadow-lg`}
-                >
-                  <motion.div
-                    className="absolute inset-0 rounded-2xl bg-white opacity-20"
-                    animate={{ scale: [1, 1.2, 1] }}
-                    transition={{
-                      duration: 3,
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: "easeInOut",
-                    }}
-                  />
-                  <span className="relative z-10">{item.icon}</span>
-                </div>
-                <h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
-                  {item.title}
-                </h4>
-                <p className="mb-4 text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-                  {item.description}
-                </p>
-                <div className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
-                  {item.benefit}
-                </div>
-              </motion.div>
-            ))}
-          </div>
-
-          <div className="text-center">
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-              <Link to="/community" className="inline-block">
-                <Button className="rounded-2xl bg-gradient-to-r from-indigo-600 to-purple-600 px-12 py-4 text-lg text-white shadow-lg hover:from-indigo-700 hover:to-purple-700">
-                  <Users className="mr-3 h-5 w-5" />
-                  Join Community Discord
-                </Button>
-              </Link>
-            </motion.div>
-            <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-              Join 50,000+ developers preparing for their dream jobs
-            </p>
-          </div>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default CompaniesTab;
diff --git a/src/pages/interview-prep/PracticeTab.tsx b/src/pages/interview-prep/PracticeTab.tsx
deleted file mode 100644
index b4ac9605..00000000
--- a/src/pages/interview-prep/PracticeTab.tsx
+++ /dev/null
@@ -1,1090 +0,0 @@
-import React from "react";
-import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import type { TabType } from "./index";
-
-interface MockQuestion {
-  id: string;
-  type: "technical" | "behavioral" | "system-design" | (string & {});
-  question: string;
-  difficulty: "Easy" | "Medium" | "Hard" | (string & {});
-  framework?: string;
-  hints: string[];
-  estimatedTime: number;
-  category?: string;
-  links?: {
-    title: string;
-    url: string;
-    type:
-      | "documentation"
-      | "tutorial"
-      | "example"
-      | "reference"
-      | "tool"
-      | (string & {});
-  }[];
-}
-
-interface PracticeSession {
-  questionId: string;
-  timeSpent: number;
-  completed: boolean;
-  startTime?: number;
-}
-
-interface PracticeStats {
-  totalCompleted: number;
-  averageTime: number;
-  easyCompleted: number;
-  mediumCompleted: number;
-  hardCompleted: number;
-  technicalCompleted: number;
-  behavioralCompleted: number;
-  systemDesignCompleted: number;
-}
-
-interface PracticeTabProps {
-  mockInterviewQuestions?: MockQuestion[];
-  onTabChange?: (tab: TabType) => void;
-}
-
-const fadeIn = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
-};
-const staggerContainer = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.1 } },
-};
-const scaleIn = {
-  hidden: { scale: 0.8, opacity: 0 },
-  visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
-};
-
-const PracticeTab: React.FC<PracticeTabProps> = ({
-  mockInterviewQuestions = [],
-  onTabChange,
-}) => {
-  const [selectedQuestion, setSelectedQuestion] = useState<string | null>(null);
-  const [activeSession, setActiveSession] = useState<PracticeSession | null>(
-    null,
-  );
-  const [timer, setTimer] = useState<number>(0);
-  const [isTimerRunning, setIsTimerRunning] = useState<boolean>(false);
-  const [completedQuestions, setCompletedQuestions] = useState<Set<string>>(
-    new Set(),
-  );
-  const [practiceStats, setPracticeStats] = useState<PracticeStats>({
-    totalCompleted: 0,
-    averageTime: 0,
-    easyCompleted: 0,
-    mediumCompleted: 0,
-    hardCompleted: 0,
-    technicalCompleted: 0,
-    behavioralCompleted: 0,
-    systemDesignCompleted: 0,
-  });
-  const [filterType, setFilterType] = useState<string>("all");
-  const [filterDifficulty, setFilterDifficulty] = useState<string>("all");
-  const [showHints, setShowHints] = useState<Set<string>>(new Set());
-  const [showResources, setShowResources] = useState<Set<string>>(new Set());
-  const [showConfetti, setShowConfetti] = useState<boolean>(false);
-  const [recentlyCompleted, setRecentlyCompleted] = useState<string | null>(
-    null,
-  );
-
-  const allQuestions = [...mockInterviewQuestions];
-
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-    if (isTimerRunning && activeSession) {
-      interval = setInterval(() => {
-        setTimer((prev) => prev + 1);
-      }, 1000);
-    }
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [isTimerRunning, activeSession]);
-
-  useEffect(() => {
-    if (showConfetti) {
-      const timeout = setTimeout(() => setShowConfetti(false), 3000);
-      return () => clearTimeout(timeout);
-    }
-  }, [showConfetti]);
-
-  const filteredQuestions = allQuestions.filter((q) => {
-    const typeMatch = filterType === "all" || q.type === filterType;
-    const difficultyMatch =
-      filterDifficulty === "all" || q.difficulty === filterDifficulty;
-    return typeMatch && difficultyMatch;
-  });
-
-  const startPractice = (question: MockQuestion) => {
-    const session: PracticeSession = {
-      questionId: question.id,
-      timeSpent: 0,
-      completed: false,
-      startTime: Date.now(),
-    };
-    setActiveSession(session);
-    setTimer(0);
-    setIsTimerRunning(true);
-    setSelectedQuestion(question.id);
-  };
-
-  const completePractice = () => {
-    if (activeSession) {
-      const timeSpent = Math.floor(timer / 60);
-      setCompletedQuestions(
-        (prev) => new Set([...prev, activeSession.questionId]),
-      );
-      setRecentlyCompleted(activeSession.questionId);
-      setShowConfetti(true);
-
-      const question = allQuestions.find(
-        (q) => q.id === activeSession.questionId,
-      );
-      if (question) {
-        setPracticeStats((prev) => ({
-          ...prev,
-          totalCompleted: prev.totalCompleted + 1,
-          averageTime: Math.round(
-            (prev.averageTime * prev.totalCompleted + timeSpent) /
-              (prev.totalCompleted + 1),
-          ),
-        }));
-      }
-    }
-    setIsTimerRunning(false);
-    setActiveSession(null);
-    setSelectedQuestion(null);
-    setTimer(0);
-
-    setTimeout(() => setRecentlyCompleted(null), 2000);
-  };
-
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-  };
-
-  const getDifficultyColor = (difficulty: string) => {
-    switch (difficulty) {
-      case "Easy":
-        return "bg-gradient-to-r from-emerald-100 to-green-100 text-emerald-800 dark:from-emerald-900/30 dark:to-green-900/30 dark:text-emerald-200 border border-emerald-200 dark:border-emerald-700";
-      case "Medium":
-        return "bg-gradient-to-r from-amber-100 to-yellow-100 text-amber-800 dark:from-amber-900/30 dark:to-yellow-900/30 dark:text-amber-200 border border-amber-200 dark:border-amber-700";
-      case "Hard":
-        return "bg-gradient-to-r from-rose-100 to-red-100 text-rose-800 dark:from-rose-900/30 dark:to-red-900/30 dark:text-rose-200 border border-rose-200 dark:border-rose-700";
-      default:
-        return "bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 dark:from-gray-700 dark:to-slate-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600";
-    }
-  };
-
-  const getTypeColor = (type: string) => {
-    switch (type) {
-      case "technical":
-        return "bg-gradient-to-r from-blue-100 to-cyan-100 text-blue-800 dark:from-blue-900/30 dark:to-cyan-900/30 dark:text-blue-200 border border-blue-200 dark:border-blue-700";
-      case "behavioral":
-        return "bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 dark:from-green-900/30 dark:to-emerald-900/30 dark:text-green-200 border border-green-200 dark:border-green-700";
-      case "system-design":
-        return "bg-gradient-to-r from-purple-100 to-violet-100 text-purple-800 dark:from-purple-900/30 dark:to-violet-900/30 dark:text-purple-200 border border-purple-200 dark:border-purple-700";
-      default:
-        return "bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 dark:from-gray-700 dark:to-slate-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600";
-    }
-  };
-
-  const toggleHints = (questionId: string) => {
-    setShowHints((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(questionId)) {
-        newSet.delete(questionId);
-      } else {
-        newSet.add(questionId);
-      }
-      return newSet;
-    });
-  };
-
-  const toggleResources = (questionId: string) => {
-    setShowResources((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(questionId)) {
-        newSet.delete(questionId);
-      } else {
-        newSet.add(questionId);
-      }
-      return newSet;
-    });
-  };
-
-  const handleTabNavigation = (tab: TabType) => {
-    if (onTabChange) {
-      onTabChange(tab);
-    }
-  };
-
-  const progressPercentage =
-    allQuestions.length > 0
-      ? (practiceStats.totalCompleted / allQuestions.length) * 100
-      : 0;
-
-  return (
-    <motion.div
-      initial="hidden"
-      animate="visible"
-      variants={staggerContainer}
-      className="relative"
-    >
-      <AnimatePresence>
-        {showConfetti && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-          >
-            <div className="animate-bounce text-6xl">🎉</div>
-            <div className="absolute inset-0 animate-pulse bg-gradient-to-r from-yellow-400/20 via-pink-400/20 to-purple-400/20" />
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      <motion.div className="mb-12" variants={fadeIn}>
-        <div className="border-gradient-to-r rounded-3xl border-2 bg-gradient-to-br from-indigo-50 from-indigo-200 via-purple-50 to-pink-50 to-purple-200 p-8 shadow-2xl backdrop-blur-sm dark:from-indigo-800 dark:from-indigo-900/20 dark:via-purple-900/20 dark:to-pink-900/20 dark:to-purple-800">
-          <div className="mb-8 text-center">
-            <motion.div
-              className="mb-6 inline-flex items-center rounded-full border border-indigo-200 bg-gradient-to-r from-indigo-100 to-purple-100 px-6 py-3 text-sm font-bold text-indigo-700 shadow-lg dark:border-indigo-700 dark:from-indigo-900/40 dark:to-purple-900/40 dark:text-indigo-300"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-            >
-              <motion.span
-                className="mr-3 h-3 w-3 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500"
-                animate={{ scale: [1, 1.2, 1] }}
-                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
-              />
-              Interactive Practice Sessions
-            </motion.div>
-            <motion.h2
-              className="mb-6 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-5xl font-black text-transparent"
-              initial={{ scale: 0.9 }}
-              animate={{ scale: 1 }}
-              transition={{ duration: 0.5 }}
-            >
-              Mock Interview Practice
-            </motion.h2>
-            <p className="text-xl leading-relaxed text-gray-800 dark:text-gray-200">
-              Simulate real interview scenarios with our interactive practice
-              sessions. Track your progress, time your responses, and get
-              instant feedback to improve your interview performance.
-            </p>
-          </div>
-
-          <div className="mb-8 grid gap-8 md:grid-cols-3">
-            <motion.div
-              className="group relative cursor-pointer overflow-hidden rounded-2xl border-2 border-gray-200/50 bg-white/80 p-8 backdrop-blur-sm transition-all duration-500 hover:shadow-2xl dark:border-gray-700/50 dark:bg-gray-800/80"
-              onClick={() => handleTabNavigation("technical")}
-              whileHover={{ scale: 1.03, y: -5 }}
-              whileTap={{ scale: 0.98 }}
-            >
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
-              <div className="relative z-10">
-                <motion.div
-                  className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-100 to-cyan-100 shadow-lg transition-transform duration-300 group-hover:scale-110 dark:from-blue-900/40 dark:to-cyan-900/40"
-                  whileHover={{ rotate: 5 }}
-                >
-                  <span className="text-3xl">💻</span>
-                </motion.div>
-                <h3 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
-                  Technical Deep Dive
-                </h3>
-                <p className="mb-4 leading-relaxed text-gray-800 dark:text-gray-200">
-                  Explore comprehensive technical resources, coding patterns,
-                  and algorithm practice.
-                </p>
-                <div className="flex items-center font-bold text-blue-600 group-hover:text-blue-700 dark:text-blue-400 dark:group-hover:text-blue-300">
-                  Go to Technical Tab
-                  <motion.span
-                    className="ml-2"
-                    animate={{ x: [0, 5, 0] }}
-                    transition={{
-                      duration: 1.5,
-                      repeat: Number.POSITIVE_INFINITY,
-                    }}
-                  >
-                    →
-                  </motion.span>
-                </div>
-              </div>
-            </motion.div>
-
-            <motion.div
-              className="group relative cursor-pointer overflow-hidden rounded-2xl border-2 border-gray-200/50 bg-white/80 p-8 backdrop-blur-sm transition-all duration-500 hover:shadow-2xl dark:border-gray-700/50 dark:bg-gray-800/80"
-              onClick={() => handleTabNavigation("behavioral")}
-              whileHover={{ scale: 1.03, y: -5 }}
-              whileTap={{ scale: 0.98 }}
-            >
-              <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 to-emerald-500/10 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
-              <div className="relative z-10">
-                <motion.div
-                  className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-green-100 to-emerald-100 shadow-lg transition-transform duration-300 group-hover:scale-110 dark:from-green-900/40 dark:to-emerald-900/40"
-                  whileHover={{ rotate: -5 }}
-                >
-                  <span className="text-3xl">🗣️</span>
-                </motion.div>
-                <h3 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
-                  Behavioral Mastery
-                </h3>
-                <p className="mb-4 leading-relaxed text-gray-800 dark:text-gray-200">
-                  Master the STAR method and practice storytelling for
-                  behavioral interviews.
-                </p>
-                <div className="flex items-center font-bold text-green-600 group-hover:text-green-700 dark:text-green-400 dark:group-hover:text-green-300">
-                  Go to Behavioral Tab
-                  <motion.span
-                    className="ml-2"
-                    animate={{ x: [0, 5, 0] }}
-                    transition={{
-                      duration: 1.5,
-                      repeat: Number.POSITIVE_INFINITY,
-                      delay: 0.5,
-                    }}
-                  >
-                    →
-                  </motion.span>
-                </div>
-              </div>
-            </motion.div>
-
-            <motion.div
-              className="group relative cursor-pointer overflow-hidden rounded-2xl border-2 border-gray-200/50 bg-white/80 p-8 backdrop-blur-sm transition-all duration-500 hover:shadow-2xl dark:border-gray-700/50 dark:bg-gray-800/80"
-              onClick={() => handleTabNavigation("companies")}
-              whileHover={{ scale: 1.03, y: -5 }}
-              whileTap={{ scale: 0.98 }}
-            >
-              <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-500/10 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
-              <div className="relative z-10">
-                <motion.div
-                  className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-purple-100 to-pink-100 shadow-lg transition-transform duration-300 group-hover:scale-110 dark:from-purple-900/40 dark:to-pink-900/40"
-                  whileHover={{ rotate: 5 }}
-                >
-                  <span className="text-3xl">🏢</span>
-                </motion.div>
-                <h3 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
-                  Company Research
-                </h3>
-                <p className="mb-4 leading-relaxed text-gray-800 dark:text-gray-200">
-                  Research specific companies, their interview processes, and
-                  preparation strategies.
-                </p>
-                <div className="flex items-center font-bold text-purple-600 group-hover:text-purple-700 dark:text-purple-400 dark:group-hover:text-purple-300">
-                  Go to Companies Tab
-                  <motion.span
-                    className="ml-2"
-                    animate={{ x: [0, 5, 0] }}
-                    transition={{
-                      duration: 1.5,
-                      repeat: Number.POSITIVE_INFINITY,
-                      delay: 1,
-                    }}
-                  >
-                    →
-                  </motion.span>
-                </div>
-              </div>
-            </motion.div>
-          </div>
-        </div>
-      </motion.div>
-
-      <motion.div
-        className="mb-8 grid grid-cols-2 gap-6 md:grid-cols-4"
-        variants={fadeIn}
-      >
-        <motion.div
-          className="relative overflow-hidden rounded-2xl border-2 border-blue-200/50 bg-gradient-to-br from-blue-50 via-blue-100 to-indigo-100 p-8 text-center shadow-lg dark:border-blue-700/50 dark:from-blue-900/30 dark:via-blue-800/40 dark:to-indigo-800/50"
-          whileHover={{ scale: 1.05 }}
-          variants={scaleIn}
-        >
-          <div className="absolute inset-0 bg-gradient-to-br from-blue-400/20 to-indigo-400/20 opacity-0 transition-opacity duration-300 hover:opacity-100" />
-          <div className="relative z-10">
-            <motion.div
-              className="mb-2 text-4xl font-black text-blue-600 dark:text-blue-400"
-              animate={{ scale: [1, 1.1, 1] }}
-              transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
-            >
-              {practiceStats.totalCompleted}
-            </motion.div>
-            <div className="text-sm font-bold text-blue-700 dark:text-blue-300">
-              Completed
-            </div>
-          </div>
-        </motion.div>
-
-        <motion.div
-          className="relative overflow-hidden rounded-2xl border-2 border-green-200/50 bg-gradient-to-br from-green-50 via-green-100 to-emerald-100 p-8 text-center shadow-lg dark:border-green-700/50 dark:from-green-900/30 dark:via-green-800/40 dark:to-emerald-800/50"
-          whileHover={{ scale: 1.05 }}
-          variants={scaleIn}
-        >
-          <div className="absolute inset-0 bg-gradient-to-br from-green-400/20 to-emerald-400/20 opacity-0 transition-opacity duration-300 hover:opacity-100" />
-          <div className="relative z-10">
-            <div className="mb-2 text-4xl font-black text-green-600 dark:text-green-400">
-              {practiceStats.averageTime}m
-            </div>
-            <div className="text-sm font-bold text-green-700 dark:text-green-300">
-              Avg Time
-            </div>
-          </div>
-        </motion.div>
-
-        <motion.div
-          className="relative overflow-hidden rounded-2xl border-2 border-purple-200/50 bg-gradient-to-br from-purple-50 via-purple-100 to-violet-100 p-8 text-center shadow-lg dark:border-purple-700/50 dark:from-purple-900/30 dark:via-purple-800/40 dark:to-violet-800/50"
-          whileHover={{ scale: 1.05 }}
-          variants={scaleIn}
-        >
-          <div className="absolute inset-0 bg-gradient-to-br from-purple-400/20 to-violet-400/20 opacity-0 transition-opacity duration-300 hover:opacity-100" />
-          <div className="relative z-10">
-            <div className="mb-2 text-4xl font-black text-purple-600 dark:text-purple-400">
-              {Math.round(progressPercentage)}%
-            </div>
-            <div className="text-sm font-bold text-purple-700 dark:text-purple-300">
-              Progress
-            </div>
-            <div className="mt-3 h-2 w-full rounded-full bg-purple-200 dark:bg-purple-800">
-              <motion.div
-                className="h-2 rounded-full bg-gradient-to-r from-purple-500 to-violet-500"
-                initial={{ width: 0 }}
-                animate={{ width: `${progressPercentage}%` }}
-                transition={{ duration: 1, ease: "easeOut" }}
-              />
-            </div>
-          </div>
-        </motion.div>
-
-        <motion.div
-          className="relative overflow-hidden rounded-2xl border-2 border-orange-200/50 bg-gradient-to-br from-orange-50 via-orange-100 to-amber-100 p-8 text-center shadow-lg dark:border-orange-700/50 dark:from-orange-900/30 dark:via-orange-800/40 dark:to-amber-800/50"
-          whileHover={{ scale: 1.05 }}
-          variants={scaleIn}
-        >
-          <div className="absolute inset-0 bg-gradient-to-br from-orange-400/20 to-amber-400/20 opacity-0 transition-opacity duration-300 hover:opacity-100" />
-          <div className="relative z-10">
-            <motion.div
-              className="mb-2 text-4xl font-black text-orange-600 dark:text-orange-400"
-              animate={isTimerRunning ? { scale: [1, 1.1, 1] } : {}}
-              transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY }}
-            >
-              {isTimerRunning ? formatTime(timer) : "00:00"}
-            </motion.div>
-            <div className="text-sm font-bold text-orange-700 dark:text-orange-300">
-              Current
-            </div>
-            {isTimerRunning && (
-              <motion.div
-                className="mx-auto mt-2 h-2 w-2 rounded-full bg-red-500"
-                animate={{ opacity: [1, 0, 1] }}
-                transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY }}
-              />
-            )}
-          </div>
-        </motion.div>
-      </motion.div>
-
-      <motion.div
-        className="mb-8 rounded-2xl border-2 border-gray-200/50 bg-white/90 p-8 shadow-xl backdrop-blur-sm dark:border-gray-700/50 dark:bg-gray-800/90"
-        variants={fadeIn}
-      >
-        <div className="flex flex-wrap items-center gap-8">
-          <div className="flex items-center space-x-4">
-            <label className="text-sm font-bold text-gray-800 dark:text-gray-200">
-              Filter by Type:
-            </label>
-            <motion.select
-              value={filterType}
-              onChange={(e) => setFilterType(e.target.value)}
-              className="rounded-xl border-2 border-gray-300 bg-white px-6 py-3 font-medium text-gray-900 shadow-lg transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-              whileFocus={{ scale: 1.02 }}
-            >
-              <option value="all">All Types</option>
-              <option value="technical">Technical</option>
-              <option value="behavioral">Behavioral</option>
-              <option value="system-design">System Design</option>
-            </motion.select>
-          </div>
-          <div className="flex items-center space-x-4">
-            <label className="text-sm font-bold text-gray-800 dark:text-gray-200">
-              Filter by Difficulty:
-            </label>
-            <motion.select
-              value={filterDifficulty}
-              onChange={(e) => setFilterDifficulty(e.target.value)}
-              className="rounded-xl border-2 border-gray-300 bg-white px-6 py-3 font-medium text-gray-900 shadow-lg transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-              whileFocus={{ scale: 1.02 }}
-            >
-              <option value="all">All Levels</option>
-              <option value="Easy">Easy</option>
-              <option value="Medium">Medium</option>
-              <option value="Hard">Hard</option>
-            </motion.select>
-          </div>
-          <motion.div
-            className="rounded-xl bg-blue-100 px-6 py-3 text-sm font-bold text-blue-800 shadow-lg dark:bg-blue-900/30 dark:text-blue-300"
-            whileHover={{ scale: 1.05 }}
-          >
-            <span className="font-black text-blue-600 dark:text-blue-400">
-              {filteredQuestions.length}
-            </span>{" "}
-            of{" "}
-            <span className="font-black text-purple-600 dark:text-purple-400">
-              {allQuestions.length}
-            </span>{" "}
-            questions
-          </motion.div>
-        </div>
-      </motion.div>
-
-      <div className="mb-12 grid gap-8 lg:grid-cols-2">
-        <AnimatePresence>
-          {filteredQuestions.map((question, index) => (
-            <motion.div
-              key={question.id}
-              className={`relative flex h-full flex-col overflow-hidden rounded-2xl border-2 bg-white/95 shadow-xl backdrop-blur-sm transition-all duration-500 hover:shadow-2xl dark:bg-gray-800/95 ${
-                activeSession?.questionId === question.id
-                  ? "border-blue-500 ring-4 shadow-blue-200/50 ring-blue-200/50 dark:shadow-blue-800/50 dark:ring-blue-800/50"
-                  : recentlyCompleted === question.id
-                    ? "border-green-500 ring-4 shadow-green-200/50 ring-green-200/50 dark:shadow-green-800/50 dark:ring-green-800/50"
-                    : "border-gray-200/50 hover:border-gray-300/70 dark:border-gray-700/50 dark:hover:border-gray-600/70"
-              }`}
-              variants={fadeIn}
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              transition={{ delay: index * 0.1 }}
-              whileHover={{ y: -8, scale: 1.02 }}
-              layout
-            >
-              <AnimatePresence>
-                {recentlyCompleted === question.id && (
-                  <motion.div
-                    initial={{ opacity: 0, scale: 0 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0 }}
-                    className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-gradient-to-br from-green-400/20 to-emerald-400/20"
-                  >
-                    <motion.div
-                      animate={{ rotate: 360, scale: [1, 1.2, 1] }}
-                      transition={{ duration: 1 }}
-                      className="text-6xl"
-                    >
-                      ✨
-                    </motion.div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-
-              <div className="p-8 pb-4">
-                <div className="mb-6 flex items-start justify-between">
-                  <div className="flex items-center space-x-4">
-                    <motion.span
-                      className={`rounded-full px-4 py-2 text-sm font-bold shadow-lg ${getTypeColor(question.type)}`}
-                      whileHover={{ scale: 1.05 }}
-                    >
-                      {question.type === "system-design"
-                        ? "System Design"
-                        : question.type.charAt(0).toUpperCase() +
-                          question.type.slice(1)}
-                    </motion.span>
-                    <AnimatePresence>
-                      {completedQuestions.has(question.id) && (
-                        <motion.div
-                          className="flex items-center space-x-2 rounded-full border border-green-200 bg-gradient-to-r from-green-100 to-emerald-100 px-3 py-2 shadow-lg dark:border-green-700 dark:from-green-900/40 dark:to-emerald-900/40"
-                          initial={{ scale: 0, opacity: 0 }}
-                          animate={{ scale: 1, opacity: 1 }}
-                          exit={{ scale: 0, opacity: 0 }}
-                          whileHover={{ scale: 1.1 }}
-                        >
-                          <motion.span
-                            className="text-lg text-green-600 dark:text-green-400"
-                            animate={{ rotate: [0, 360] }}
-                            transition={{ duration: 0.5 }}
-                          >
-                            ✓
-                          </motion.span>
-                          <span className="text-xs font-bold text-green-700 dark:text-green-300">
-                            Completed
-                          </span>
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <motion.span
-                      className={`rounded-full px-4 py-2 text-xs font-black shadow-lg ${getDifficultyColor(question.difficulty)}`}
-                      whileHover={{ scale: 1.05 }}
-                    >
-                      {question.difficulty}
-                    </motion.span>
-                    <motion.div
-                      className="rounded-full bg-blue-100 px-3 py-2 text-xs font-bold text-blue-800 shadow-lg dark:bg-blue-900/30 dark:text-blue-300"
-                      whileHover={{ scale: 1.05 }}
-                    >
-                      ~{question.estimatedTime}min
-                    </motion.div>
-                  </div>
-                </div>
-
-                <h3 className="mb-6 text-xl leading-tight font-black text-gray-900 dark:text-white">
-                  {question.question}
-                </h3>
-
-                {question.framework && (
-                  <motion.div
-                    className="mb-6 rounded-xl border-2 border-blue-200/50 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 p-4 shadow-lg dark:border-blue-700/50 dark:from-blue-900/30 dark:via-indigo-900/30 dark:to-purple-900/30"
-                    whileHover={{ scale: 1.02 }}
-                  >
-                    <div className="-mb-3 flex items-center space-x-3">
-                      <motion.span
-                        className="-mt-5 text-xl text-blue-600 dark:text-blue-400"
-                        animate={{ rotate: [0, 10, -10, 0] }}
-                        transition={{
-                          duration: 2,
-                          repeat: Number.POSITIVE_INFINITY,
-                        }}
-                      >
-                        💡
-                      </motion.span>
-                      <p className="text-sm font-bold text-blue-700 dark:text-blue-300">
-                        Framework: {question.framework}
-                      </p>
-                    </div>
-                  </motion.div>
-                )}
-
-                {question.category && (
-                  <div className="mb-6 flex items-center space-x-3">
-                    <span className="text-lg text-gray-400">📂</span>
-                    <span className="rounded-full bg-blue-100 px-3 py-1 text-sm font-bold text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
-                      {question.category}
-                    </span>
-                  </div>
-                )}
-              </div>
-
-              <div className="flex-1 px-8 pb-4">
-                <motion.button
-                  onClick={() => toggleHints(question.id)}
-                  className="group flex w-full items-center justify-between space-x-3 rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm shadow-lg transition-all hover:bg-gray-50 hover:shadow-xl dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                >
-                  <div className="flex items-center space-x-3">
-                    <motion.span
-                      className="text-lg"
-                      animate={{ rotate: showHints.has(question.id) ? 90 : 0 }}
-                      transition={{ duration: 0.3 }}
-                    >
-                      {showHints.has(question.id) ? "🔽" : "▶️"}
-                    </motion.span>
-                    <span className="font-bold text-gray-900 dark:text-white">
-                      {showHints.has(question.id) ? "Hide Hints" : "Show Hints"}
-                    </span>
-                  </div>
-                  <motion.span
-                    className="rounded-full border border-blue-300 bg-gradient-to-r from-blue-200 to-purple-200 px-3 py-1 text-xs font-bold text-blue-800 dark:border-blue-600 dark:from-blue-800/60 dark:to-purple-800/60 dark:text-blue-200"
-                    whileHover={{ scale: 1.1 }}
-                  >
-                    {question.hints.length}
-                  </motion.span>
-                </motion.button>
-
-                <AnimatePresence>
-                  {showHints.has(question.id) && (
-                    <motion.div
-                      className="mt-6 rounded-xl border-2 border-gray-200/50 bg-gradient-to-br from-gray-50 to-slate-50 p-6 shadow-lg backdrop-blur-sm dark:border-gray-600/50 dark:from-gray-700/50 dark:to-slate-700/50"
-                      initial={{ opacity: 0, height: 0, y: -20 }}
-                      animate={{ opacity: 1, height: "auto", y: 0 }}
-                      exit={{ opacity: 0, height: 0, y: -20 }}
-                      transition={{ duration: 0.3 }}
-                    >
-                      <h4 className="mb-4 flex items-center space-x-3 font-black text-gray-900 dark:text-white">
-                        <motion.span
-                          animate={{ rotate: [0, 10, -10, 0] }}
-                          transition={{
-                            duration: 2,
-                            repeat: Number.POSITIVE_INFINITY,
-                          }}
-                        >
-                          💡
-                        </motion.span>
-                        <span className="text-gray-900 dark:text-white">
-                          Helpful Hints:
-                        </span>
-                      </h4>
-                      <ul className="space-y-4">
-                        {question.hints.map((hint, i) => (
-                          <motion.li
-                            key={i}
-                            className="flex items-start space-x-4 text-sm text-gray-800 dark:text-gray-200"
-                            initial={{ opacity: 0, x: -20 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            transition={{ delay: i * 0.1 }}
-                          >
-                            <motion.span
-                              className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border border-blue-200 bg-gradient-to-r from-blue-100 to-cyan-100 text-xs font-black text-blue-500 shadow-lg dark:border-blue-700 dark:from-blue-900/40 dark:to-cyan-900/40"
-                              whileHover={{ scale: 1.2, rotate: 360 }}
-                              transition={{ duration: 0.3 }}
-                            >
-                              {i + 1}
-                            </motion.span>
-                            <span className="leading-relaxed font-medium text-gray-800 dark:text-gray-200">
-                              {hint}
-                            </span>
-                          </motion.li>
-                        ))}
-                      </ul>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-
-                {question.links && question.links.length > 0 && (
-                  <div className="mt-6">
-                    <motion.button
-                      onClick={() => toggleResources(question.id)}
-                      className="group flex w-full items-center justify-between space-x-3 rounded-xl border-2 border-indigo-300 bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 px-4 py-3 text-sm shadow-lg transition-all hover:from-indigo-200 hover:via-purple-200 hover:to-pink-200 hover:shadow-xl dark:border-indigo-600 dark:from-indigo-900/50 dark:via-purple-900/50 dark:to-pink-900/50 dark:hover:from-indigo-800/60 dark:hover:via-purple-800/60 dark:hover:to-pink-800/60"
-                      whileHover={{ scale: 1.02 }}
-                      whileTap={{ scale: 0.98 }}
-                    >
-                      <div className="flex items-center space-x-3">
-                        <motion.span
-                          className="text-lg"
-                          animate={{
-                            rotate: showResources.has(question.id) ? 90 : 0,
-                          }}
-                          transition={{ duration: 0.3 }}
-                        >
-                          {showResources.has(question.id) ? "🔽" : "▶️"}
-                        </motion.span>
-                        <span className="font-bold text-gray-900 dark:text-white">
-                          {showResources.has(question.id)
-                            ? "Hide Resources"
-                            : "Show Resources"}
-                        </span>
-                      </div>
-                      <motion.span
-                        className="rounded-full border border-indigo-300 bg-gradient-to-r from-indigo-200 to-purple-200 px-3 py-1 text-xs font-bold text-indigo-800 dark:border-indigo-600 dark:from-indigo-800/60 dark:to-purple-800/60 dark:text-indigo-200"
-                        whileHover={{ scale: 1.1 }}
-                      >
-                        {question.links.length}
-                      </motion.span>
-                    </motion.button>
-
-                    <AnimatePresence>
-                      {showResources.has(question.id) && (
-                        <motion.div
-                          className="mt-4 rounded-xl border-2 border-indigo-200/50 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-6 shadow-lg backdrop-blur-sm dark:border-indigo-700/50 dark:from-indigo-900/30 dark:via-purple-900/30 dark:to-pink-900/30"
-                          initial={{ opacity: 0, height: 0, y: -20 }}
-                          animate={{ opacity: 1, height: "auto", y: 0 }}
-                          exit={{ opacity: 0, height: 0, y: -20 }}
-                          transition={{ duration: 0.3 }}
-                        >
-                          <h4 className="mb-4 flex items-center space-x-3 font-black text-gray-900 dark:text-white">
-                            <motion.span
-                              animate={{ scale: [1, 1.1, 1] }}
-                              transition={{
-                                duration: 2,
-                                repeat: Number.POSITIVE_INFINITY,
-                              }}
-                            >
-                              🔗
-                            </motion.span>
-                            <span className="text-gray-900 dark:text-white">
-                              Helpful Resources:
-                            </span>
-                          </h4>
-                          <div className="grid gap-3">
-                            {question.links.map((link, i) => {
-                              const getLinkTypeIcon = (type: string) => {
-                                switch (type) {
-                                  case "documentation":
-                                    return "📚";
-                                  case "tutorial":
-                                    return "🎓";
-                                  case "example":
-                                    return "💡";
-                                  case "reference":
-                                    return "📖";
-                                  case "tool":
-                                    return "🛠️";
-                                  default:
-                                    return "🔗";
-                                }
-                              };
-
-                              const getLinkTypeColor = (type: string) => {
-                                switch (type) {
-                                  case "documentation":
-                                    return "from-blue-100 to-cyan-100 dark:from-blue-900/40 dark:to-cyan-900/40 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-700";
-                                  case "tutorial":
-                                    return "from-green-100 to-emerald-100 dark:from-green-900/40 dark:to-emerald-900/40 text-green-700 dark:text-green-300 border-green-200 dark:border-green-700";
-                                  case "example":
-                                    return "from-yellow-100 to-amber-100 dark:from-yellow-900/40 dark:to-amber-900/40 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700";
-                                  case "reference":
-                                    return "from-purple-100 to-violet-100 dark:from-purple-900/40 dark:to-violet-900/40 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-700";
-                                  case "tool":
-                                    return "from-orange-100 to-red-100 dark:from-orange-900/40 dark:to-red-900/40 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-700";
-                                  default:
-                                    return "from-gray-100 to-slate-100 dark:from-gray-700 dark:to-slate-700 text-gray-800 dark:text-gray-200 border-gray-200 dark:border-gray-600";
-                                }
-                              };
-
-                              return (
-                                <motion.a
-                                  key={i}
-                                  href={link.url}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  className={`flex items-center space-x-4 bg-gradient-to-r p-4 ${getLinkTypeColor(link.type)} group practice-tab-link rounded-xl border shadow-lg transition-all duration-300 hover:shadow-xl`}
-                                  initial={{ opacity: 0, x: -20 }}
-                                  animate={{ opacity: 1, x: 0 }}
-                                  transition={{ delay: i * 0.1 }}
-                                  whileHover={{ scale: 1.02, x: 5 }}
-                                  whileTap={{ scale: 0.98 }}
-                                >
-                                  <motion.span
-                                    className="flex-shrink-0 text-2xl"
-                                    whileHover={{ scale: 1.2, rotate: 5 }}
-                                    transition={{ duration: 0.2 }}
-                                  >
-                                    {getLinkTypeIcon(link.type)}
-                                  </motion.span>
-                                  <div className="min-w-0 flex-1">
-                                    <div className="text-sm leading-tight font-bold group-hover:underline">
-                                      {link.title}
-                                    </div>
-                                    <div className="mt-1 text-xs font-medium capitalize opacity-75">
-                                      {link.type.replace("-", " ")}
-                                    </div>
-                                  </div>
-                                  <motion.span
-                                    className="flex-shrink-0 text-lg opacity-60 group-hover:opacity-100"
-                                    animate={{ x: [0, 3, 0] }}
-                                    transition={{
-                                      duration: 1.5,
-                                      repeat: Number.POSITIVE_INFINITY,
-                                    }}
-                                  >
-                                    →
-                                  </motion.span>
-                                </motion.a>
-                              );
-                            })}
-                          </div>
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
-                  </div>
-                )}
-              </div>
-
-              <div className="mt-auto px-8 pb-8">
-                <AnimatePresence mode="wait">
-                  {activeSession?.questionId === question.id ? (
-                    <motion.div
-                      className="space-y-4"
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      exit={{ opacity: 0, y: -20 }}
-                    >
-                      <div className="rounded-xl border-2 border-blue-200/50 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 shadow-lg dark:border-blue-700/50 dark:from-blue-900/30 dark:to-indigo-900/30">
-                        <div className="flex items-center justify-between">
-                          <span className="flex items-center space-x-2 text-sm font-bold text-blue-700 dark:text-blue-300">
-                            <motion.span
-                              animate={{ scale: [1, 1.2, 1] }}
-                              transition={{
-                                duration: 1,
-                                repeat: Number.POSITIVE_INFINITY,
-                              }}
-                            >
-                              🎯
-                            </motion.span>
-                            <span className="text-gray-900 dark:text-white">
-                              Session Active
-                            </span>
-                          </span>
-                          <motion.span
-                            className="text-2xl font-black text-blue-600 dark:text-blue-400"
-                            animate={{ scale: [1, 1.1, 1] }}
-                            transition={{
-                              duration: 1,
-                              repeat: Number.POSITIVE_INFINITY,
-                            }}
-                          >
-                            {formatTime(timer)}
-                          </motion.span>
-                        </div>
-                      </div>
-                      <motion.button
-                        onClick={completePractice}
-                        className="flex w-full items-center justify-center space-x-3 rounded-xl border-2 border-green-500/20 bg-gradient-to-r from-green-600 via-emerald-600 to-green-700 py-4 font-black text-white shadow-2xl transition-all hover:from-green-700 hover:via-emerald-700 hover:to-green-800 hover:shadow-green-500/25"
-                        whileHover={{ scale: 1.02, y: -2 }}
-                        whileTap={{ scale: 0.98 }}
-                      >
-                        <motion.span
-                          animate={{ rotate: [0, 360] }}
-                          transition={{
-                            duration: 2,
-                            repeat: Number.POSITIVE_INFINITY,
-                          }}
-                        >
-                          ✓
-                        </motion.span>
-                        <span className="text-inherit">
-                          Complete Practice
-                        </span>
-                      </motion.button>
-                    </motion.div>
-                  ) : (
-                    <motion.button
-                      onClick={() => startPractice(question)}
-                      disabled={!!activeSession}
-                      className={`flex w-full items-center justify-center space-x-3 rounded-xl border-2 py-4 font-black shadow-2xl transition-all ${
-                        completedQuestions.has(question.id)
-                          ? "cursor-default border-gray-300 bg-gradient-to-r from-gray-200 to-slate-200 text-gray-800 dark:border-gray-500 dark:from-gray-600 dark:to-slate-600 dark:text-gray-200"
-                          : activeSession
-                            ? "cursor-not-allowed border-gray-400 bg-gradient-to-r from-gray-300 to-slate-300 text-gray-600 dark:border-gray-600 dark:from-gray-700 dark:to-slate-700 dark:text-gray-400"
-                            : "border-blue-500/20 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 text-white hover:from-blue-700 hover:via-indigo-700 hover:to-purple-700 hover:shadow-blue-500/25"
-                      }`}
-                      whileHover={
-                        !completedQuestions.has(question.id) && !activeSession
-                          ? { scale: 1.02, y: -2 }
-                          : {}
-                      }
-                      whileTap={
-                        !completedQuestions.has(question.id) && !activeSession
-                          ? { scale: 0.98 }
-                          : {}
-                      }
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      exit={{ opacity: 0, y: -20 }}
-                    >
-                      {completedQuestions.has(question.id) ? (
-                        <>
-                          <motion.span
-                            animate={{ rotate: [0, 360] }}
-                            transition={{
-                              duration: 2,
-                              repeat: Number.POSITIVE_INFINITY,
-                            }}
-                          >
-                            ✓
-                          </motion.span>
-                          <span className="text-inherit">
-                            Completed
-                          </span>
-                        </>
-                      ) : (
-                        <>
-                          <motion.span
-                            animate={
-                              !activeSession ? { scale: [1, 1.2, 1] } : {}
-                            }
-                            transition={{
-                              duration: 2,
-                              repeat: Number.POSITIVE_INFINITY,
-                            }}
-                          >
-                            🚀
-                          </motion.span>
-                          <span className="text-inherit">
-                            Start Practice
-                          </span>
-                        </>
-                      )}
-                    </motion.button>
-                  )}
-                </AnimatePresence>
-              </div>
-            </motion.div>
-          ))}
-        </AnimatePresence>
-      </div>
-
-      <motion.div
-        className="rounded-3xl border-2 border-indigo-200 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-10 shadow-2xl backdrop-blur-sm dark:border-indigo-700 dark:from-indigo-900/20 dark:via-purple-900/20 dark:to-pink-900/20"
-        variants={fadeIn}
-      >
-        <motion.h3
-          className="mb-10 text-center text-3xl font-black text-gray-900 dark:text-white"
-          initial={{ scale: 0.9 }}
-          animate={{ scale: 1 }}
-          transition={{ duration: 0.5 }}
-        >
-          🎯 Practice Features & Tools
-        </motion.h3>
-        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-          {[
-            {
-              icon: "⏱️",
-              title: "Live Timer",
-              desc: "Real-time countdown with session tracking to simulate interview pressure",
-              color: "blue",
-            },
-            {
-              icon: "📊",
-              title: "Progress Analytics",
-              desc: "Track completion rates and performance trends over time",
-              color: "green",
-            },
-            {
-              icon: "🎯",
-              title: "Smart Filtering",
-              desc: "Filter by type, difficulty, and completion status for focused practice",
-              color: "purple",
-            },
-            {
-              icon: "💡",
-              title: "Guided Hints",
-              desc: "STAR method templates and solution frameworks for better answers",
-              color: "orange",
-            },
-          ].map((feature, index) => (
-            <motion.div
-              key={index}
-              className="group rounded-2xl border-2 border-gray-200/50 bg-white/90 p-8 text-center shadow-xl backdrop-blur-sm transition-all duration-500 hover:shadow-2xl dark:border-gray-700/50 dark:bg-gray-800/90"
-              whileHover={{ scale: 1.05, y: -5 }}
-              variants={scaleIn}
-              custom={index}
-            >
-              <motion.div
-                className={`mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl shadow-lg transition-transform duration-300 group-hover:scale-110 ${
-                  feature.color === "blue"
-                    ? "border-2 border-blue-200 bg-gradient-to-br from-blue-100 to-blue-200 dark:border-blue-700 dark:from-blue-900/40 dark:to-blue-800/50"
-                    : feature.color === "green"
-                      ? "border-2 border-green-200 bg-gradient-to-br from-green-100 to-green-200 dark:border-green-700 dark:from-green-900/40 dark:to-green-800/50"
-                      : feature.color === "purple"
-                        ? "border-2 border-purple-200 bg-gradient-to-br from-purple-100 to-purple-200 dark:border-purple-700 dark:from-purple-900/40 dark:to-purple-800/50"
-                        : "border-2 border-orange-200 bg-gradient-to-br from-orange-100 to-orange-200 dark:border-orange-700 dark:from-orange-900/40 dark:to-orange-800/50"
-                }`}
-                whileHover={{ rotate: [0, -10, 10, 0] }}
-                transition={{ duration: 0.5 }}
-              >
-                <span className="text-4xl">{feature.icon}</span>
-              </motion.div>
-              <h4 className="mb-3 text-lg font-black text-gray-900 dark:text-white">
-                {feature.title}
-              </h4>
-              <p className="text-sm leading-relaxed font-medium text-gray-800 dark:text-gray-200">
-                {feature.desc}
-              </p>
-            </motion.div>
-          ))}
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default PracticeTab;
diff --git a/src/pages/interview-prep/TechnicalTab.tsx b/src/pages/interview-prep/TechnicalTab.tsx
deleted file mode 100644
index ddfc73c1..00000000
--- a/src/pages/interview-prep/TechnicalTab.tsx
+++ /dev/null
@@ -1,485 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import Link from "@docusaurus/Link";
-
-interface Resource {
-  name: string;
-  url: string;
-}
-interface SubCategory {
-  title: string;
-  difficulty: string;
-  problems: number;
-  subtopics: string[];
-  resources: Resource[];
-}
-interface TechnicalCategory {
-  category: string;
-  description: string;
-  totalProblems: number;
-  subcategories: SubCategory[];
-}
-
-interface PracticePlatform {
-  name: string;
-  description: string;
-  problems: string;
-  difficulty: string[];
-  url: string;
-  features: string[];
-}
-
-interface TechnicalTabProps {
-  technicalResources?: TechnicalCategory[];
-  practicePlatforms?: PracticePlatform[];
-  expandedCategories?: { [key: number]: boolean };
-  toggleCategory: (index: number) => void;
-}
-
-const fadeIn = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
-};
-const staggerContainer = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.2 } },
-};
-
-const TechnicalTab: React.FC<TechnicalTabProps> = ({
-  technicalResources = [],
-  practicePlatforms = [],
-  expandedCategories = [],
-  toggleCategory,
-}) => {
-  return (
-    <motion.div initial="hidden" animate="visible" variants={staggerContainer}>
-      <motion.div className="mb-12" variants={fadeIn}>
-        <div className="technical-outer rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-8 dark:border-blue-800 dark:from-blue-900/20 dark:via-indigo-900/20 dark:to-purple-900/20">
-          <div className="mb-8 text-center">
-            <div className="mb-4 inline-flex items-center rounded-full bg-blue-100 px-4 py-2 text-sm font-medium text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
-              <span className="mr-2 h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
-              Technical Interview Mastery
-            </div>
-            <h2 className="mb-6 text-4xl font-bold text-gray-900 dark:text-white">
-              Master Technical Interviews
-            </h2>
-            <p className="text-lg text-gray-800 dark:text-gray-200">
-              Technical interviews are the cornerstone of software engineering
-              hiring. They evaluate your problem-solving abilities, coding
-              skills, and understanding of computer science fundamentals.
-              Success requires consistent practice, pattern recognition, and the
-              ability to communicate your thought process clearly.
-            </p>
-          </div>
-          <div className="mb-8 grid gap-6 md:grid-cols-3">
-            <div className="technical-inner rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-800">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
-                <span className="text-2xl">🧠</span>
-              </div>
-              <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
-                Problem Solving
-              </h3>
-              <p className="text-sm text-gray-800 dark:text-gray-200">
-                Develop systematic approaches to break down complex problems
-                into manageable components.
-              </p>
-            </div>
-            <div className="technical-inner rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-800">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900/30">
-                <span className="text-2xl">⚡</span>
-              </div>
-              <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
-                Pattern Recognition
-              </h3>
-              <p className="text-sm text-gray-800 dark:text-gray-200">
-                Learn to identify common patterns and apply proven techniques to
-                solve similar problems efficiently.
-              </p>
-            </div>
-            <div className="technical-inner rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-800">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/30">
-                <span className="text-2xl">💬</span>
-              </div>
-              <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
-                Communication
-              </h3>
-              <p className="text-sm text-gray-800 dark:text-gray-200">
-                Master the art of explaining your approach, discussing
-                trade-offs, and collaborating with interviewers.
-              </p>
-            </div>
-          </div>
-          <div className="technical-inner-success rounded-lg border border-yellow-200 bg-gradient-to-r from-yellow-100 to-orange-100 p-6 dark:border-yellow-700 dark:from-yellow-900/30 dark:to-orange-900/30">
-            <div className="flex items-start space-x-3">
-              <span className="text-2xl">💡</span>
-              <div>
-                <h4 className="mb-2 font-semibold text-gray-900 dark:text-white">
-                  Success Strategy
-                </h4>
-                <p className="text-sm text-gray-800 dark:text-gray-100">
-                  Focus on understanding patterns rather than memorizing
-                  solutions. Practice explaining your thought process out loud,
-                  and always consider time/space complexity. Consistent daily
-                  practice for 2-3 months typically yields the best results.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Question Bank by Category - Collapsible */}
-      <motion.div className="mb-16" variants={fadeIn}>
-        <h3 className="mb-8 text-center text-2xl font-bold text-gray-900 dark:text-white">
-          📚 Question Bank by Category
-        </h3>
-        <div className="space-y-8">
-          {technicalResources.map((category, categoryIndex) => {
-            const headerColors = [
-              {
-                gradient: "from-purple-500 to-pink-400",
-                border: "border-purple-500 dark:border-purple-400",
-              },
-              {
-                gradient: "from-blue-500 to-sky-400",
-                border: "border-blue-500 dark:border-blue-400",
-              },
-              {
-                gradient: "from-green-500 to-green-400",
-                border: "border-green-500 dark:border-green-400",
-              },
-              {
-                gradient: "from-orange-500 to-red-500",
-                border: "border-orange-500 dark:border-orange-400",
-              },
-              {
-                gradient: "from-pink-500 to-yellow-500",
-                border: "border-pink-500 dark:border-pink-400",
-              },
-              {
-                gradient: "from-cyan-500 to-blue-500",
-                border: "border-cyan-500 dark:border-cyan-400",
-              },
-            ];
-            const { gradient, border } =
-              headerColors[categoryIndex % headerColors.length];
-            const subtopicBorderClasses = [
-              "question-bank-subtopic-purple",
-              "question-bank-subtopic-blue",
-              "question-bank-subtopic-green",
-              "question-bank-subtopic-orange",
-              "question-bank-subtopic-pink",
-              "question-bank-subtopic-cyan",
-            ];
-            return (
-              <div
-                key={categoryIndex}
-                className="overflow-hidden rounded-2xl bg-white shadow-lg dark:bg-gray-800"
-              >
-                {/* Outer header */}
-                <button
-                  onClick={() => toggleCategory(categoryIndex)}
-                  className={`w-full bg-gradient-to-r ${gradient} p-6 text-left transition-opacity hover:opacity-90`}
-                >
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="mb-2 text-2xl font-bold text-white">
-                        {category.category}
-                      </h3>
-                      <p className="text-blue-100">{category.description}</p>
-                      <span className="inline-block rounded-full bg-white/20 px-3 py-1 text-sm font-medium transition hover:bg-white/30">
-                        <Link to="/docs/Technical" className="explore-btn">
-                          Explore →
-                        </Link>
-                      </span>
-                    </div>
-                    <div className="flex flex-col items-end text-right">
-                      <div className="text-3xl font-bold text-white">
-                        {category.totalProblems}
-                      </div>
-                      <div className="text-sm text-blue-100">
-                        Total Problems
-                      </div>
-                      <span
-                        className="origin-center transform text-2xl text-white transition-transform duration-200"
-                        style={{
-                          transform: expandedCategories[categoryIndex]
-                            ? "rotate(180deg)"
-                            : "rotate(0deg)",
-                        }}
-                      >
-                        ▼
-                      </span>
-                    </div>
-                  </div>
-                </button>
-
-                {/* Collapsible Content */}
-                {expandedCategories[categoryIndex] && (
-                  <motion.div
-                    className="p-6"
-                    initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: "auto" }}
-                    exit={{ opacity: 0, height: 0 }}
-                    transition={{ duration: 0.3 }}
-                  >
-                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                      {category.subcategories.map((subcategory, subIndex) => (
-                        <div
-                          key={subIndex}
-                          className={`rounded-xl border p-5 transition-all duration-300 hover:shadow-md ${border} ${subtopicBorderClasses[categoryIndex % subtopicBorderClasses.length]} hover:border-opacity-80 technical-inner`}
-                        >
-                          {/* Subcategory Header */}
-                          <div className="mb-4 flex items-start justify-between">
-                            <h5 className="text-lg font-semibold text-gray-900 dark:text-white">
-                              {subcategory.title}
-                            </h5>
-                            <div className="flex items-center space-x-2">
-                              <span
-                                className={`rounded-full px-2 py-1 text-xs font-medium ${
-                                  subcategory.difficulty === "Easy"
-                                    ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-                                    : subcategory.difficulty === "Medium"
-                                      ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
-                                      : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-                                }`}
-                              >
-                                {subcategory.difficulty}
-                              </span>
-                              <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-200">
-                                {subcategory.problems}
-                              </span>
-                            </div>
-                          </div>
-
-                          {/* Subtopics */}
-                          <div className="mb-4">
-                            <h6 className="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300">
-                              Key Topics:
-                            </h6>
-                            <div className="flex flex-wrap gap-1">
-                              {subcategory.subtopics.map(
-                                (topic, topicIndex) => (
-                                  <span
-                                    key={topicIndex}
-                                    className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-300"
-                                  >
-                                    {topic}
-                                  </span>
-                                ),
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Resources */}
-                          <div className="space-y-2">
-                            <h6 className="text-sm font-medium text-gray-800 dark:text-gray-300">
-                              Practice Resources:
-                            </h6>
-                            {subcategory.resources.map(
-                              (resource, resourceIndex) => (
-                                <a
-                                  key={resourceIndex}
-                                  href={resource.url}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  className="block text-sm text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-300 dark:hover:text-blue-300"
-                                >
-                                  🔗 {resource.name}
-                                </a>
-                              ),
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </motion.div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </motion.div>
-
-      {/* Practice Platforms */}
-      <motion.div className="mb-16" variants={fadeIn}>
-        <h3 className="mb-8 text-center text-2xl font-bold text-gray-900 dark:text-white">
-          🎯 Recommended Practice Platforms
-        </h3>
-        <div className="grid items-stretch gap-6 md:grid-cols-3">
-          {practicePlatforms.map((platform, index) => (
-            <motion.div
-              key={index}
-              className="flex flex-col rounded-xl border border-gray-200 bg-white p-6 shadow-lg transition-all duration-300 hover:shadow-xl dark:border-gray-700 dark:bg-gray-800"
-              variants={fadeIn}
-            >
-              <div className="mb-4 text-center">
-                <h4 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
-                  {platform.name}
-                </h4>
-                <p className="mb-3 text-sm text-gray-800 dark:text-gray-200">
-                  {platform.description}
-                </p>
-                <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
-                  {platform.problems}
-                </div>
-                <div className="text-xs text-gray-600 dark:text-gray-400">
-                  Problems Available
-                </div>
-              </div>
-
-              <div className="mb-4">
-                <div className="mb-3 flex justify-center space-x-2">
-                  {platform.difficulty.map((diff, diffIndex) => (
-                    <span
-                      key={diffIndex}
-                      className={`rounded-full px-2 py-1 text-xs font-medium ${
-                        diff === "Easy"
-                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-                          : diff === "Medium"
-                            ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
-                            : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-                      }`}
-                    >
-                      {diff}
-                    </span>
-                  ))}
-                </div>
-              </div>
-
-              <div className="mb-6">
-                <h5 className="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300">
-                  Key Features:
-                </h5>
-                <ul className="space-y-1">
-                  {platform.features.map((feature, featureIndex) => (
-                    <li
-                      key={featureIndex}
-                      className="flex items-center text-xs text-gray-700 dark:text-gray-400"
-                    >
-                      <span className="mr-2 h-1 w-1 rounded-full bg-blue-500"></span>
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* Push button to bottom */}
-              <div className="mt-auto">
-                <a
-                  href={platform.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="technical-btn block w-full rounded-lg bg-blue-600 px-4 py-2 text-center font-medium text-white transition-colors hover:bg-blue-700"
-                >
-                  Start Practicing
-                </a>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-      </motion.div>
-
-      {/* Tips & Best Practices */}
-      <motion.div
-        className="rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-8 dark:border-blue-800 dark:from-blue-900/20 dark:via-indigo-900/20 dark:to-purple-900/20"
-        variants={fadeIn}
-      >
-        <h3 className="mb-6 text-center text-2xl font-bold text-gray-900 dark:text-white">
-          💡 Pro Tips for Technical Interview Success
-        </h3>
-        <div className="grid gap-6 md:grid-cols-2">
-          <div className="space-y-4">
-            <div className="flex items-start space-x-3">
-              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-500">
-                <span className="text-xs font-bold text-white">1</span>
-              </div>
-              <div>
-                <h4 className="font-semibold text-gray-900 dark:text-white">
-                  Start with Easy Problems
-                </h4>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  Build confidence and understand patterns before tackling
-                  harder challenges.
-                </p>
-              </div>
-            </div>
-            <div className="flex items-start space-x-3">
-              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-500">
-                <span className="text-xs font-bold text-white">2</span>
-              </div>
-              <div>
-                <h4 className="font-semibold text-gray-900 dark:text-white">
-                  Practice Consistently
-                </h4>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  Solve 1-2 problems daily rather than cramming before
-                  interviews.
-                </p>
-              </div>
-            </div>
-            <div className="flex items-start space-x-3">
-              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-500">
-                <span className="text-xs font-bold text-white">3</span>
-              </div>
-              <div>
-                <h4 className="font-semibold text-gray-900 dark:text-white">
-                  Focus on Patterns
-                </h4>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  Learn common problem-solving patterns like two pointers,
-                  sliding window, etc.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="space-y-4">
-            <div className="flex items-start space-x-3">
-              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-500">
-                <span className="text-xs font-bold text-white">4</span>
-              </div>
-              <div>
-                <h4 className="font-semibold text-gray-900 dark:text-white">
-                  Time Yourself
-                </h4>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  Practice under time constraints to simulate real interview
-                  conditions.
-                </p>
-              </div>
-            </div>
-            <div className="flex items-start space-x-3">
-              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-500">
-                <span className="text-xs font-bold text-white">5</span>
-              </div>
-              <div>
-                <h4 className="font-semibold text-gray-900 dark:text-white">
-                  Explain Your Thinking
-                </h4>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  Practice verbalizing your approach and reasoning process.
-                </p>
-              </div>
-            </div>
-            <div className="flex items-start space-x-3">
-              <div className="mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-500">
-                <span className="text-xs font-bold text-white">6</span>
-              </div>
-              <div>
-                <h4 className="font-semibold text-gray-900 dark:text-white">
-                  Review Solutions
-                </h4>
-                <p className="text-sm text-gray-800 dark:text-gray-200">
-                  Study optimal solutions and alternative approaches after
-                  solving problems.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default TechnicalTab;
diff --git a/src/pages/interview-prep/index.tsx b/src/pages/interview-prep/index.tsx
index 5e973ac4..e2c313bf 100644
--- a/src/pages/interview-prep/index.tsx
+++ b/src/pages/interview-prep/index.tsx
@@ -1,1783 +1,6 @@
 import React from "react";
-import { useState, useEffect } from "react";
-import Layout from "@theme/Layout";
-import Head from "@docusaurus/Head";
-import { motion } from "framer-motion";
-import Link from "@docusaurus/Link";
-import { useSafeColorMode } from "../../utils/useSafeColorMode";
-import clsx from "clsx";
-import OverviewTab from "./OverviewTab";
-import TechnicalTab from "./TechnicalTab";
-import BehavioralTab from "./BehavioralTab";
-import CompaniesTab from "./CompaniesTab";
-import PracticeTab from "./PracticeTab";
+import { Redirect } from "@docusaurus/router";
 
-// Animation variants
-const fadeIn = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
-};
-
-const staggerContainer = {
-  hidden: {},
-  visible: {
-    transition: {
-      staggerChildren: 0.2,
-    },
-  },
-};
-
-type TabType =
-  | "overview"
-  | "technical"
-  | "behavioral"
-  | "companies"
-  | "practice";
-
-const InterviewPrepPage: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<TabType>("overview");
-  const [expandedCategories, setExpandedCategories] = useState<{
-    [key: string]: boolean;
-  }>({});
-
-  // Handle URL-based tab navigation
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const params = new URLSearchParams(window.location.search);
-      const tabParam = params.get("tab");
-      if (
-        tabParam &&
-        ["overview", "technical", "behavioral", "companies", "practice"].includes(
-          tabParam
-        )
-      ) {
-        setActiveTab(tabParam as TabType);
-      }
-    }
-  }, []);
-
-  const toggleCategory = (categoryIndex: number) => {
-    setExpandedCategories((prev) => ({
-      ...prev,
-      [categoryIndex]: !prev[categoryIndex],
-    }));
-  };
-
-  const [showTips, setShowTips] = useState<{ [key: number]: boolean }>({});
-  const [showQuestions, setShowQuestions] = useState<{
-    [key: number]: boolean;
-  }>({});
-
-  const toggleTips = (index: number) => {
-    setShowTips((prev) => ({
-      ...prev,
-      [index]: !prev[index],
-    }));
-  };
-
-  const toggleQuestions = (index: number) => {
-    setShowQuestions((prev) => ({
-      ...prev,
-      [index]: !prev[index],
-    }));
-  };
-  const behavioralQuestions = [
-    {
-      category: "Leadership",
-      questions: [
-        "Tell me about a time you led a team through a difficult project",
-        "Describe a situation where you had to influence others without authority",
-        "How do you handle team conflicts?",
-      ],
-    },
-    {
-      category: "Problem Solving",
-      questions: [
-        "Describe the most challenging technical problem you've solved",
-        "Tell me about a time you failed and what you learned",
-        "How do you approach debugging complex issues?",
-      ],
-    },
-    {
-      category: "Communication",
-      questions: [
-        "Explain a complex technical concept to a non-technical person",
-        "Tell me about a time you had to give difficult feedback",
-        "How do you handle disagreements with stakeholders?",
-      ],
-    },
-    {
-      category: "Growth & Learning",
-      questions: [
-        "How do you stay updated with new technologies?",
-        "Tell me about a time you had to learn something completely new",
-        "What's the most important thing you've learned in your career?",
-      ],
-    },
-  ];
-
-  const companyTips = [
-    {
-      company: "Google",
-      logo: "/img/google.png",
-      focus: "Googleyness & Leadership",
-      industry: "Technology",
-      roleTypes: [
-        "Software Engineer",
-        "Product Manager",
-        "Data Scientist",
-        "Site Reliability Engineer",
-      ],
-      focusAreas: [
-        "Scalability",
-        "Problem-Solving",
-        "Innovation",
-        "Technical Excellence",
-      ],
-      tips: [
-        "Focus on scalability and efficiency in your solutions",
-        "Demonstrate analytical thinking with data-driven approaches",
-        "Show passion for technology and continuous learning",
-        "Prepare for system design questions with real-world examples",
-        "Practice coding problems on platforms like LeetCode (focus on medium-hard)",
-        "Understand Google's products and their technical challenges",
-        "Be ready to discuss trade-offs in your technical decisions",
-        "Show how you've handled ambiguous problems",
-      ],
-      commonQuestions: [
-        {
-          question: "How would you design Google Search?",
-          answer:
-            "Start with requirements gathering (billions of queries, sub-second response), then discuss web crawling architecture, inverted indexing, ranking algorithms like PageRank, distributed systems with load balancing, caching strategies at multiple levels, and real-time updates handling. Consider data freshness, personalization, and spam detection.",
-          category: "System Design",
-        },
-        {
-          question: "Explain how you would handle billions of queries per day",
-          answer:
-            "Implement horizontal scaling with load balancers, use CDNs for static content, implement multi-level caching (browser, CDN, application, database), database sharding and replication, microservices architecture, auto-scaling based on traffic patterns, and comprehensive monitoring with circuit breakers.",
-          category: "System Design",
-        },
-        {
-          question: "What would you do if Gmail was slow?",
-          answer:
-            "Systematic debugging approach: check monitoring dashboards, identify bottlenecks (database, network, application), analyze query performance, review caching hit rates, examine resource utilization, implement performance profiling, and deploy fixes like query optimization, caching improvements, or infrastructure scaling.",
-          category: "Problem Solving",
-        },
-        {
-          question:
-            "Tell me about a time you solved a complex technical problem",
-          answer:
-            "Use STAR method: Situation (complex distributed system issue), Task (restore service and prevent recurrence), Action (systematic debugging, root cause analysis, implemented monitoring), Result (99.9% uptime improvement, prevented similar issues). Focus on technical depth and problem-solving methodology.",
-          category: "Behavioral",
-        },
-        {
-          question: "How do you stay updated with technology trends?",
-          answer:
-            "Demonstrate continuous learning: follow tech blogs, contribute to open source, attend conferences, experiment with new technologies, participate in tech communities, and apply learnings to solve real problems. Show specific examples.",
-          category: "Behavioral",
-        },
-      ],
-    },
-    {
-      company: "Amazon",
-      logo: "/img/amazon.png",
-      focus: "Leadership Principles",
-      industry: "E-commerce/Cloud",
-      roleTypes: [
-        "Software Engineer",
-        "Solutions Architect",
-        "Product Manager",
-        "DevOps Engineer",
-      ],
-      focusAreas: [
-        "Leadership Principles",
-        "Customer Obsession",
-        "Ownership",
-        "Bias for Action",
-      ],
-      tips: [
-        "Master all 16 Leadership Principles with 2-3 specific examples each",
-        "Use STAR method for all behavioral questions",
-        "Focus on customer obsession in every answer",
-        "Demonstrate ownership mindset and long-term thinking",
-        "Prepare examples showing bias for action and delivering results",
-        "Show how you've simplified processes or invented solutions",
-        "Quantify your impact with specific metrics",
-        "Be ready to discuss failures and learnings",
-      ],
-      commonQuestions: [
-        {
-          question: "Tell me about a time you disagreed with your manager",
-          answer:
-            "Use 'Have Backbone; Disagree and Commit' principle. Situation: disagreement on technical approach. Task: present alternative solution. Action: prepared data-driven analysis, respectfully presented concerns, listened to feedback. Result: adopted hybrid approach that improved performance by 40%. Committed fully once decision was made.",
-          category: "Behavioral",
-        },
-        {
-          question:
-            "Describe a time you had to make a decision with incomplete information",
-          answer:
-            "Demonstrate 'Bias for Action'. Situation: critical system outage with limited debugging info. Task: restore service quickly. Action: gathered available data, made calculated decision based on patterns, implemented fix with rollback plan. Result: restored service in 30 minutes, prevented $100K revenue loss.",
-          category: "Behavioral",
-        },
-        {
-          question: "How do you handle tight deadlines?",
-          answer:
-            "Show 'Deliver Results' and 'Ownership'. Situation: product launch deadline at risk. Task: deliver core features on time. Action: prioritized ruthlessly, communicated trade-offs to stakeholders, worked with team to optimize scope. Result: launched on time with 95% of planned features, customer satisfaction remained high.",
-          category: "Behavioral",
-        },
-        {
-          question: "Design a system like Amazon's recommendation engine",
-          answer:
-            "Requirements: real-time recommendations, handle millions of users, personalized results. Architecture: data ingestion pipeline, feature engineering, ML models (collaborative filtering, content-based, deep learning), real-time serving layer, A/B testing framework, feedback loop for continuous improvement.",
-          category: "System Design",
-        },
-        {
-          question: "Tell me about a time you simplified a process",
-          answer:
-            "Use 'Invent and Simplify'. Situation: complex deployment process taking 4 hours. Task: reduce deployment time and errors. Action: automated manual steps, created CI/CD pipeline, added automated testing. Result: reduced deployment time to 30 minutes, decreased errors by 80%.",
-          category: "Behavioral",
-        },
-      ],
-    },
-    {
-      company: "Meta (Facebook)",
-      logo: "/img/meta.png",
-      focus: "Move Fast & Impact",
-      industry: "Social Media/VR",
-      roleTypes: [
-        "Software Engineer",
-        "Product Manager",
-        "Data Scientist",
-        "Research Scientist",
-      ],
-      focusAreas: ["Scale", "Impact", "Execution", "People Connection"],
-      tips: [
-        "Focus on massive scale and global impact",
-        "Demonstrate ability to move fast and iterate",
-        "Show examples of connecting people or communities",
-        "Prepare for questions about handling billions of users",
-        "Understand Meta's products and their technical challenges",
-        "Be ready to discuss privacy and safety considerations",
-        "Show data-driven decision making",
-        "Demonstrate growth mindset and learning from failures",
-      ],
-      commonQuestions: [
-        {
-          question: "How would you design Facebook's News Feed?",
-          answer:
-            "Requirements: personalized content, real-time updates, billions of users. Architecture: content ingestion, ranking algorithms (engagement prediction, relevance scoring), edge timeline generation, caching strategies, real-time updates with WebSockets, content moderation pipeline, and A/B testing framework.",
-          category: "System Design",
-        },
-        {
-          question:
-            "Tell me about a time you had to make a trade-off between speed and quality",
-          answer:
-            "Situation: urgent security fix needed. Task: balance quick deployment with thorough testing. Action: implemented fix with comprehensive monitoring, deployed to small percentage first, gradually rolled out. Result: fixed security issue within 24 hours while maintaining system stability.",
-          category: "Behavioral",
-        },
-        {
-          question:
-            "How would you handle a feature that's negatively impacting user engagement?",
-          answer:
-            "Data analysis approach: segment users, analyze metrics, identify root causes, A/B test solutions, gather qualitative feedback. Action: iterate quickly, measure impact, communicate with stakeholders. Focus on user value and long-term engagement over short-term metrics.",
-          category: "Product Sense",
-        },
-        {
-          question: "Design a system to detect fake accounts",
-          answer:
-            "Multi-layered approach: behavioral analysis (login patterns, friend requests), content analysis (spam detection), graph analysis (suspicious connection patterns), machine learning models, real-time scoring system, human review workflow, and continuous model improvement.",
-          category: "System Design",
-        },
-        {
-          question: "Tell me about a time you influenced without authority",
-          answer:
-            "Situation: cross-team project with conflicting priorities. Task: align teams on common goal. Action: built relationships, presented data showing mutual benefits, created shared success metrics. Result: successful project delivery, improved cross-team collaboration for future projects.",
-          category: "Behavioral",
-        },
-      ],
-    },
-    {
-      company: "Apple",
-      logo: "/img/apple.png",
-      focus: "Innovation & User Experience",
-      industry: "Consumer Electronics",
-      roleTypes: [
-        "Software Engineer",
-        "Hardware Engineer",
-        "Product Manager",
-        "Design Engineer",
-      ],
-      focusAreas: ["User Experience", "Innovation", "Quality", "Privacy"],
-      tips: [
-        "Focus on user experience and design thinking",
-        "Demonstrate attention to detail and quality",
-        "Show passion for Apple products and ecosystem",
-        "Prepare examples of innovative solutions",
-        "Understand Apple's privacy-first approach",
-        "Be ready to discuss cross-functional collaboration",
-        "Show how you've delivered polished, user-friendly solutions",
-        "Demonstrate ability to work under high standards",
-      ],
-      commonQuestions: [
-        {
-          question: "How would you improve Siri?",
-          answer:
-            "Focus on user experience: better natural language understanding, contextual awareness, privacy-preserving personalization, faster response times, expanded capabilities, seamless device integration, and accessibility improvements. Balance innovation with Apple's privacy principles.",
-          category: "Product Design",
-        },
-        {
-          question:
-            "Tell me about a time you had to meet very high quality standards",
-          answer:
-            "Situation: developing user-facing feature with strict quality requirements. Task: deliver bug-free, polished experience. Action: implemented comprehensive testing, code reviews, user testing, performance optimization. Result: zero critical bugs in production, positive user feedback.",
-          category: "Behavioral",
-        },
-        {
-          question: "How would you design a privacy-focused messaging system?",
-          answer:
-            "End-to-end encryption, on-device processing, minimal data collection, secure key exchange, forward secrecy, metadata protection, secure deletion, and transparent privacy controls. Balance security with user experience and performance.",
-          category: "System Design",
-        },
-        {
-          question: "Describe a time you had to innovate under constraints",
-          answer:
-            "Situation: limited resources for new feature. Task: deliver innovative solution within constraints. Action: creative problem-solving, leveraged existing technologies, focused on core user value. Result: delivered feature that exceeded expectations while staying within budget.",
-          category: "Behavioral",
-        },
-        {
-          question: "How do you ensure your code is maintainable and scalable?",
-          answer:
-            "Clean code principles, comprehensive documentation, modular architecture, automated testing, code reviews, performance monitoring, and following established patterns. Focus on long-term maintainability and team collaboration.",
-          category: "Technical",
-        },
-      ],
-    },
-    {
-      company: "Netflix",
-      logo: "/img/netflix.png",
-      focus: "Freedom & Responsibility",
-      industry: "Streaming/Entertainment",
-      roleTypes: [
-        "Software Engineer",
-        "Data Engineer",
-        "Product Manager",
-        "ML Engineer",
-      ],
-      focusAreas: ["Scale", "Personalization", "Reliability", "Data-Driven"],
-      tips: [
-        "Understand Netflix's culture of freedom and responsibility",
-        "Focus on high-performance culture and results",
-        "Demonstrate ability to work independently",
-        "Show examples of data-driven decision making",
-        "Prepare for questions about streaming at scale",
-        "Understand personalization and recommendation systems",
-        "Be ready to discuss A/B testing and experimentation",
-        "Show how you've handled ambiguous problems",
-      ],
-      commonQuestions: [
-        {
-          question: "How would you design Netflix's recommendation system?",
-          answer:
-            "Multi-algorithm approach: collaborative filtering, content-based filtering, deep learning models, contextual bandits for exploration/exploitation, real-time personalization, A/B testing framework, and feedback loops. Handle cold start problem and diverse content catalog.",
-          category: "System Design",
-        },
-        {
-          question: "Tell me about a time you took ownership of a problem",
-          answer:
-            "Situation: critical service degradation affecting user experience. Task: identify and fix root cause. Action: took full ownership, coordinated with multiple teams, implemented both immediate fix and long-term solution. Result: restored service, prevented future occurrences.",
-          category: "Behavioral",
-        },
-        {
-          question:
-            "How would you handle video streaming for millions of concurrent users?",
-          answer:
-            "CDN strategy, adaptive bitrate streaming, content pre-positioning, load balancing, caching at multiple levels, real-time monitoring, graceful degradation, and global infrastructure optimization. Consider peak traffic patterns and regional differences.",
-          category: "System Design",
-        },
-        {
-          question:
-            "Describe a time you had to make a decision with limited data",
-          answer:
-            "Situation: new feature launch decision with incomplete user research. Task: decide on launch strategy. Action: analyzed available data, made assumptions explicit, designed experiments to validate quickly. Result: successful launch with rapid iteration based on real user feedback.",
-          category: "Behavioral",
-        },
-      ],
-    },
-    {
-      company: "Microsoft",
-      logo: "/img/microsoft.png",
-      focus: "Growth Mindset & Collaboration",
-      industry: "Technology",
-      roleTypes: [
-        "Software Engineer",
-        "Program Manager",
-        "Cloud Architect",
-        "AI Engineer",
-      ],
-      focusAreas: [
-        "Growth Mindset",
-        "Collaboration",
-        "Inclusive Design",
-        "Cloud Computing",
-      ],
-      tips: [
-        "Emphasize continuous learning and growth mindset",
-        "Show collaborative approach and inclusive thinking",
-        "Demonstrate how you've helped others succeed",
-        "Focus on impact, results, and customer value",
-        "Prepare examples of learning from failures",
-        "Understand Microsoft's mission and recent innovations",
-        "Show experience with cloud technologies",
-        "Demonstrate inclusive design thinking",
-      ],
-      commonQuestions: [
-        {
-          question: "How do you handle failure?",
-          answer:
-            "Growth mindset approach: acknowledge failure quickly, analyze root causes, extract learnings, apply improvements, share knowledge with team. Example: failed project taught me better stakeholder communication, leading to 30% improvement in project success rate.",
-          category: "Behavioral",
-        },
-        {
-          question: "Tell me about a time you helped a colleague",
-          answer:
-            "Situation: colleague struggling with complex technical problem. Task: help without taking over. Action: paired programming, knowledge sharing, mentoring approach. Result: colleague solved problem, gained new skills, became go-to person for similar issues.",
-          category: "Behavioral",
-        },
-        {
-          question: "How would you design Microsoft Teams?",
-          answer:
-            "Requirements: real-time communication, enterprise scale, security, integration. Architecture: WebRTC for video/audio, WebSocket for messaging, microservices, Azure cloud infrastructure, Office 365 integration, security/compliance features, cross-platform support.",
-          category: "System Design",
-        },
-        {
-          question: "What motivates you to learn new things?",
-          answer:
-            "Connect to growth mindset: curiosity about solving new problems, staying relevant in rapidly evolving tech landscape, helping customers achieve more, contributing to team success. Provide specific examples of recent learning and application.",
-          category: "Behavioral",
-        },
-      ],
-    },
-  ];
-
-  const mockInterviewQuestions = [
-    // 🔹 Technical
-
-    // Arrays & Strings
-    {
-      id: "tech-arr-1",
-      type: "technical",
-      question: "Find the first non-repeating character in a string",
-      difficulty: "Easy",
-      hints: [
-        "Use a hash map to count frequencies",
-        "Return the first character with count 1",
-      ],
-      estimatedTime: 10,
-      category: "Strings",
-      links: [
-        {
-          title: "LeetCode - First Unique Character",
-          url: "https://leetcode.com/problems/first-unique-character-in-a-string/",
-          type: "example",
-        },
-        {
-          title: "MDN - Map Object",
-          url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map",
-          type: "documentation",
-        },
-      ],
-    },
-    {
-      id: "tech-arr-2",
-      type: "technical",
-      question: "Merge two sorted arrays without using extra space",
-      difficulty: "Medium",
-      hints: [
-        "Two-pointer technique works well",
-        "Consider edge cases where one array is empty",
-      ],
-      estimatedTime: 15,
-      category: "Arrays",
-      links: [
-        {
-          title: "LeetCode - Merge Sorted Array",
-          url: "https://leetcode.com/problems/merge-sorted-array/",
-          type: "example",
-        },
-        {
-          title: "GeeksforGeeks - Merge Without Extra Space",
-          url: "https://www.geeksforgeeks.org/merge-two-sorted-arrays-o1-extra-space/",
-          type: "tutorial",
-        },
-      ],
-    },
-
-    // Linked Lists
-    {
-      id: "tech-ll-1",
-      type: "technical",
-      question: "Reverse a linked list",
-      difficulty: "Medium",
-      hints: [
-        "Think about iterative vs recursive approach",
-        "Consider edge cases like empty list",
-      ],
-      estimatedTime: 20,
-      category: "Linked List",
-      links: [
-        {
-          title: "LeetCode - Reverse Linked List",
-          url: "https://leetcode.com/problems/reverse-linked-list/",
-          type: "example",
-        },
-        {
-          title: "GeeksforGeeks - Reverse Linked List",
-          url: "https://www.geeksforgeeks.org/reverse-a-linked-list/",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "tech-ll-2",
-      type: "technical",
-      question: "Detect if a linked list has a cycle",
-      difficulty: "Medium",
-      hints: [
-        "Use fast and slow pointers (Floyd’s cycle detection)",
-        "Watch out for null references",
-      ],
-      estimatedTime: 15,
-      category: "Linked List",
-      links: [
-        {
-          title: "LeetCode - Linked List Cycle",
-          url: "https://leetcode.com/problems/linked-list-cycle/",
-          type: "example",
-        },
-        {
-          title: "GeeksForGeeks- Detect Loop in a Linked List",
-          url: "https://www.geeksforgeeks.org/dsa/detect-loop-in-a-linked-list/",
-          type: "reference",
-        },
-      ],
-    },
-
-    // Trees & Graphs
-    {
-      id: "tech-tree-1",
-      type: "technical",
-      question: "Maximum Depth of Binary Tree",
-      difficulty: "Easy",
-      hints: ["Use recursion (DFS)", "Think about base case (null node)"],
-      estimatedTime: 10,
-      category: "Trees",
-      links: [
-        {
-          title: "LeetCode - Maximum Depth of Binary Tree",
-          url: "https://leetcode.com/problems/maximum-depth-of-binary-tree/",
-          type: "example",
-        },
-        {
-          title: "GeeksForGeeks - DFS",
-          url: "https://www.geeksforgeeks.org/dsa/depth-first-search-or-dfs-for-a-graph/",
-          type: "reference",
-        },
-      ],
-    },
-    {
-      id: "tech-graph-1",
-      type: "technical",
-      question: "Clone a Graph",
-      difficulty: "Medium",
-      hints: ["Use DFS or BFS", "Maintain a hash map of visited nodes"],
-      estimatedTime: 25,
-      category: "Graphs",
-      links: [
-        {
-          title: "LeetCode - Clone Graph",
-          url: "https://leetcode.com/problems/clone-graph/",
-          type: "example",
-        },
-        {
-          title: "GeeksforGeeks - Clone Graph",
-          url: "https://www.geeksforgeeks.org/clone-an-undirected-graph/",
-          type: "tutorial",
-        },
-      ],
-    },
-
-    // Dynamic Programming
-    {
-      id: "tech-dp-1",
-      type: "technical",
-      question: "Climbing Stairs",
-      difficulty: "Easy",
-      hints: ["Think Fibonacci", "DP with memoization or bottom-up"],
-      estimatedTime: 15,
-      category: "Dynamic Programming",
-      links: [
-        {
-          title: "LeetCode - Climbing Stairs",
-          url: "https://leetcode.com/problems/climbing-stairs/",
-          type: "example",
-        },
-        {
-          title: "DP Introduction",
-          url: "https://www.geeksforgeeks.org/dynamic-programming/",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "tech-dp-2",
-      type: "technical",
-      question: "Longest Increasing Subsequence",
-      difficulty: "Medium",
-      hints: [
-        "DP with O(n^2)",
-        "Can be optimized with Binary Search (O(n log n))",
-      ],
-      estimatedTime: 35,
-      category: "Dynamic Programming",
-      links: [
-        {
-          title: "LeetCode - Longest Increasing Subsequence",
-          url: "https://leetcode.com/problems/longest-increasing-subsequence/",
-          type: "example",
-        },
-        {
-          title: "GeeksforGeeks - LIS Explained",
-          url: "https://www.geeksforgeeks.org/longest-increasing-subsequence-dp-3/",
-          type: "tutorial",
-        },
-      ],
-    },
-
-    // Greedy Algorithms
-    {
-      id: "tech-greedy-1",
-      type: "technical",
-      question: "Jump Game",
-      difficulty: "Medium",
-      hints: [
-        "Track the maximum reachable index",
-        "Greedy works better than DP",
-      ],
-      estimatedTime: 20,
-      category: "Greedy",
-      links: [
-        {
-          title: "LeetCode - Jump Game",
-          url: "https://leetcode.com/problems/jump-game/",
-          type: "example",
-        },
-        {
-          title: "Greedy Algorithm Basics",
-          url: "https://www.geeksforgeeks.org/greedy-algorithms/",
-          type: "reference",
-        },
-      ],
-    },
-    {
-      id: "tech-greedy-2",
-      type: "technical",
-      question: "Activity Selection Problem",
-      difficulty: "Medium",
-      hints: ["Sort by finish time", "Pick earliest finishing activity"],
-      estimatedTime: 25,
-      category: "Greedy",
-      links: [
-        {
-          title: "GeeksforGeeks - Activity Selection",
-          url: "https://www.geeksforgeeks.org/activity-selection-problem-greedy-algo-1/",
-          type: "tutorial",
-        },
-        {
-          title: "MIT Greedy Algorithms Notes",
-          url: "https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-006-introduction-to-algorithms-fall-2011/lecture-notes/MIT6_006F11_lec05.pdf",
-          type: "reference",
-        },
-      ],
-    },
-
-    // Bit Manipulation
-    {
-      id: "tech-bit-1",
-      type: "technical",
-      question: "Single Number (Find element appearing once)",
-      difficulty: "Easy",
-      hints: ["Use XOR property", "a ^ a = 0"],
-      estimatedTime: 10,
-      category: "Bit Manipulation",
-      links: [
-        {
-          title: "LeetCode - Single Number",
-          url: "https://leetcode.com/problems/single-number/",
-          type: "example",
-        },
-        {
-          title: "Bitwise Operators in C++",
-          url: "https://cplusplus.com/doc/tutorial/operators/#bitwise",
-          type: "documentation",
-        },
-      ],
-    },
-    {
-      id: "tech-bit-2",
-      type: "technical",
-      question: "Number of 1 Bits (Hamming Weight)",
-      difficulty: "Easy",
-      hints: ["Use n & (n-1) trick", "Loop until n=0"],
-      estimatedTime: 12,
-      category: "Bit Manipulation",
-      links: [
-        {
-          title: "LeetCode - Number of 1 Bits",
-          url: "https://leetcode.com/problems/number-of-1-bits/",
-          type: "example",
-        },
-        {
-          title: "Hamming Weight Explained",
-          url: "https://www.geeksforgeeks.org/count-set-bits-in-an-integer/",
-          type: "tutorial",
-        },
-      ],
-    },
-
-    // Sorting Algorithms
-    {
-      id: "tech-sort-1",
-      type: "technical",
-      question: "Sort Colors (Dutch National Flag problem)",
-      difficulty: "Medium",
-      hints: [
-        "Use three pointers (low, mid, high)",
-        "In-place solution required",
-      ],
-      estimatedTime: 20,
-      category: "Sorting",
-      links: [
-        {
-          title: "LeetCode - Sort Colors",
-          url: "https://leetcode.com/problems/sort-colors/",
-          type: "example",
-        },
-        {
-          title: "Dutch National Flag Problem",
-          url: "https://www.geeksforgeeks.org/sort-an-array-of-0s-1s-and-2s/",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "tech-sort-2",
-      type: "technical",
-      question: "Kth Largest Element in an Array",
-      difficulty: "Medium",
-      hints: ["QuickSelect algorithm", "Or use Min-Heap"],
-      estimatedTime: 25,
-      category: "Sorting/Heap",
-      links: [
-        {
-          title: "LeetCode - Kth Largest Element",
-          url: "https://leetcode.com/problems/kth-largest-element-in-an-array/",
-          type: "example",
-        },
-        {
-          title: "QuickSelect Algorithm",
-          url: "https://www.geeksforgeeks.org/quickselect-algorithm/",
-          type: "tutorial",
-        },
-      ],
-    },
-
-    // Binary Search
-    {
-      id: "tech-bs-1",
-      type: "technical",
-      question: "Binary Search",
-      difficulty: "Easy",
-      hints: ["Classic divide and conquer", "Midpoint check"],
-      estimatedTime: 10,
-      category: "Binary Search",
-      links: [
-        {
-          title: "LeetCode - Binary Search",
-          url: "https://leetcode.com/problems/binary-search/",
-          type: "example",
-        },
-        {
-          title: "Binary Search Explained",
-          url: "https://www.geeksforgeeks.org/binary-search/",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "tech-bs-2",
-      type: "technical",
-      question: "Find Minimum in Rotated Sorted Array",
-      difficulty: "Medium",
-      hints: ["Modified binary search", "Check mid vs right"],
-      estimatedTime: 20,
-      category: "Binary Search",
-      links: [
-        {
-          title: "LeetCode - Find Minimum in Rotated Array",
-          url: "https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/",
-          type: "example",
-        },
-        {
-          title: "Binary Search Variants",
-          url: "https://www.geeksforgeeks.org/binary-search/",
-          type: "reference",
-        },
-      ],
-    },
-
-    // 🔹 Behavioral
-    {
-      id: "behavioral-2",
-      type: "behavioral",
-      question:
-        "Tell me about a time you had to work with a difficult team member",
-      framework: "STAR Method",
-      difficulty: "Medium",
-      hints: ["Situation", "Task", "Action", "Result"],
-      estimatedTime: 15,
-      category: "Teamwork",
-      links: [
-        {
-          title: "Behavioral Interview Tips",
-          url: "https://www.youtube.com/watch?v=OqoGEMlNk_g",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "behavioral-3",
-      type: "behavioral",
-      question: "Describe a situation where you had to meet a tight deadline",
-      framework: "STAR Method",
-      difficulty: "Medium",
-      hints: [
-        "Explain how you prioritized tasks",
-        "Mention communication with stakeholders",
-        "Highlight the outcome",
-      ],
-      estimatedTime: 12,
-      category: "Time Management",
-      links: [
-        {
-          title: "STAR Method Guide",
-          url: "https://mondo.com/insights/how-to-use-star-method-to-answer-performace-based-interview-questions/#:~:text=Talk%20about%20a%20time%20when%20you%20had%20to,timeline%20and%20assigned%20tasks%20to%20each%20team%20member.",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "behavioral-4",
-      type: "behavioral",
-      question: "What’s the most challenging project you have worked on?",
-      framework: "STAR Method",
-      difficulty: "Medium",
-      hints: [
-        "Focus on the problem complexity",
-        "Explain how you collaborated",
-        "Highlight measurable outcomes",
-      ],
-      estimatedTime: 15,
-      category: "Problem Solving",
-      links: [
-        {
-          title: "Problem Solving in Interviews",
-          url: "https://megainterview.com/what-was-the-most-challenging-project-you-have-worked-on/",
-          type: "reference",
-        },
-      ],
-    },
-    {
-      id: "behavioral-5",
-      type: "behavioral",
-      question: "Tell me about a time you failed. How did you handle it?",
-      framework: "STAR Method",
-      difficulty: "Hard",
-      hints: [
-        "Be honest but professional",
-        "Emphasize what you learned",
-        "Show resilience and growth",
-      ],
-      estimatedTime: 15,
-      category: "Resilience",
-      links: [
-        {
-          title: "Answering Failure Questions",
-          url: "https://interviewpenguin.com/tell-me-about-a-time-when-you-failed/",
-          type: "tutorial",
-        },
-      ],
-    },
-
-    // 🔹 System Design
-    {
-      id: "system-2",
-      type: "system-design",
-      question: "Design a URL shortener like bit.ly",
-      difficulty: "Hard",
-      hints: ["Consider scale", "Database design", "Caching strategy"],
-      estimatedTime: 40,
-      category: "Web Systems",
-      links: [
-        {
-          title: "System Design - URL Shortener",
-          url: "https://www.geeksforgeeks.org/system-design/system-design-url-shortening-service/",
-          type: "example",
-        },
-        {
-          title: "High Scalability - URL Shortener",
-          url: "https://www.hellointerview.com/learn/system-design/problem-breakdowns/bitly",
-          type: "reference",
-        },
-      ],
-    },
-    {
-      id: "system-3",
-      type: "system-design",
-      question: "Design a chat application like WhatsApp",
-      difficulty: "Hard",
-      hints: [
-        "Think about message delivery guarantees",
-        "Consider real-time sync across devices",
-        "Handle offline users gracefully",
-      ],
-      estimatedTime: 60,
-      category: "Messaging Systems",
-      links: [
-        {
-          title: "System Design - WhatsApp",
-          url: "https://blog.algomaster.io/p/design-a-chat-application-like-whatsapp",
-          type: "example",
-        },
-        {
-          title: "Scalable Chat App Design",
-          url: "https://www.youtube.com/watch?v=3HXFy_7M12E&t=1s",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "system-4",
-      type: "system-design",
-      question: "Design an online food delivery system like Swiggy/Zomato",
-      difficulty: "Hard",
-      hints: [
-        "Users, restaurants, delivery partners → entities",
-        "Real-time location tracking",
-        "Scalability and load balancing",
-      ],
-      estimatedTime: 70,
-      category: "Distributed Systems",
-      links: [
-        {
-          title: "System Design - Food Delivery",
-          url: "https://upvey.com/technology/interview/system-design/design-architecture-food-delivery-service-like-swiggy-or-ubereats/#google_vignette",
-          type: "example",
-        },
-        {
-          title: "Scalable Food Delivery Architecture",
-          url: "https://www.youtube.com/watch?v=rZyAgZuuZiA&t=8s",
-          type: "tutorial",
-        },
-      ],
-    },
-    {
-      id: "system-5",
-      type: "system-design",
-      question: "Design a recommendation system for an e-commerce website",
-      difficulty: "Medium",
-      hints: [
-        "Collaborative filtering",
-        "Content-based recommendations",
-        "Cold start problem",
-      ],
-      estimatedTime: 50,
-      category: "Machine Learning Systems",
-      links: [
-        {
-          title: "Recommendation Systems Intro",
-          url: "https://www.geeksforgeeks.org/recommendation-system-in-python/",
-          type: "tutorial",
-        },
-        {
-          title: "System Design - Recommendation Engine",
-          url: "https://webkul.com/blog/e-commerce-recommendation-system/",
-          type: "reference",
-        },
-      ],
-    },
-    {
-      id: "system-6",
-      type: "system-design",
-      question: "Design YouTube (video streaming platform)",
-      difficulty: "Hard",
-      hints: [
-        "Video upload, transcoding, and storage",
-        "Content delivery networks (CDNs)",
-        "Search and recommendation engine",
-      ],
-      estimatedTime: 90,
-      category: "Media Systems",
-      links: [
-        {
-          title: "System Design - YouTube",
-          url: "https://www.geeksforgeeks.org/system-design/system-design-of-youtube-a-complete-architecture/",
-          type: "example",
-        },
-        {
-          title: "Designing Video Streaming Platforms",
-          url: "https://www.youtube.com/watch?v=jPKTo1iGQiE&t=1s",
-          type: "tutorial",
-        },
-      ],
-    },
-  ];
-
-  const practicePlatforms = [
-    {
-      name: "LeetCode",
-      description: "Most popular coding interview platform",
-      problems: "2000+",
-      difficulty: ["Easy", "Medium", "Hard"],
-      url: "https://leetcode.com/",
-      features: [
-        "Mock Interviews",
-        "Company Tags",
-        "Discussion Forums",
-        "Premium Content",
-      ],
-    },
-    {
-      name: "HackerRank",
-      description: "Comprehensive coding challenges and assessments",
-      problems: "1000+",
-      difficulty: ["Easy", "Medium", "Hard"],
-      url: "https://hackerrank.com/",
-      features: [
-        "Skill Assessments",
-        "Certification",
-        "Company Challenges",
-        "Interview Prep",
-      ],
-    },
-    {
-      name: "CodeChef",
-      description: "Competitive programming and contests platform",
-      problems: "3000+",
-      difficulty: ["Easy", "Medium", "Hard"],
-      url: "https://www.codechef.com/",
-      features: [
-        "Monthly Contests",
-        "Long Challenge",
-        "Cook-Off",
-        "Practice Problems",
-      ],
-    },
-  ];
-
-  const technicalResources = [
-    {
-      category: "📊 Data Structures & Algorithms",
-      description:
-        "Master core algorithms and problem-solving patterns for interviews",
-      totalProblems: 220,
-      subcategories: [
-        {
-          title: "Arrays & Strings",
-          difficulty: "Easy",
-          problems: 50,
-          subtopics: [
-            "Two Pointers",
-            "Sliding Window",
-            "String Manipulation",
-            "Prefix Sums",
-            "Rotation & Reversal",
-            "Frequency Counting",
-            "Hashing for Arrays",
-            "Anagram Problems",
-          ],
-          resources: [
-            { name: "LeetCode Arrays", url: "https://leetcode.com/tag/array/" },
-            {
-              name: "HackerRank Strings",
-              url: "https://hackerrank.com/domains/algorithms?filters%5Bsubdomains%5D%5B%5D=strings",
-            },
-            {
-              name: "NeetCode Array Playlist",
-              url: "https://www.youtube.com/playlist?list=PLot-Xpze53lfOdF3KwpMSFEyfE77zIwiP",
-            },
-          ],
-        },
-        {
-          title: "Linked Lists",
-          difficulty: "Medium",
-          problems: 30,
-          subtopics: [
-            "Traversal",
-            "Reversal",
-            "Cycle Detection",
-            "Merge Operations",
-            "Dummy Nodes",
-            "Doubly Linked List",
-            "Skip Lists",
-          ],
-          resources: [
-            {
-              name: "LeetCode Linked List",
-              url: "https://leetcode.com/tag/linked-list/",
-            },
-            {
-              name: "GeeksforGeeks",
-              url: "https://geeksforgeeks.org/data-structures/linked-list/",
-            },
-            {
-              name: "FreeCodeCamp Linked List",
-              url: "https://www.youtube.com/watch?v=Hj_rA0dhr2I",
-            },
-          ],
-        },
-        {
-          title: "Trees & Graphs",
-          difficulty: "Hard",
-          problems: 50,
-          subtopics: [
-            "Binary Trees",
-            "BST Operations",
-            "Tree Traversals",
-            "Graph Representations",
-            "DFS & BFS",
-            "Shortest Path",
-            "Topological Sort",
-            "Union-Find",
-            "Minimum Spanning Tree",
-          ],
-          resources: [
-            { name: "LeetCode Tree", url: "https://leetcode.com/tag/tree/" },
-            { name: "LeetCode Graph", url: "https://leetcode.com/tag/graph/" },
-            {
-              name: "WilliamFiset Graph Theory",
-              url: "https://www.youtube.com/playlist?list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu",
-            },
-          ],
-        },
-        {
-          title: "Dynamic Programming",
-          difficulty: "Hard",
-          problems: 50,
-          subtopics: [
-            "1D DP",
-            "2D DP",
-            "Memoization",
-            "Tabulation",
-            "State Optimization",
-            "Knapsack Variants",
-            "Subsequence Problems",
-            "Game Theory DP",
-          ],
-          resources: [
-            {
-              name: "LeetCode DP",
-              url: "https://leetcode.com/tag/dynamic-programming/",
-            },
-            {
-              name: "DP Patterns",
-              url: "https://leetcode.com/discuss/general-discussion/458695/dynamic-programming-patterns",
-            },
-            {
-              name: "NeetCode DP Playlist",
-              url: "https://www.youtube.com/playlist?list=PLot-Xpze53ldVwtstag2TL4HQhAnC8m4D",
-            },
-          ],
-        },
-        {
-          title: "Other Important Topics",
-          difficulty: "Medium",
-          problems: 40,
-          subtopics: [
-            "Heaps",
-            "Hash Tables",
-            "Bit Manipulation",
-            "Greedy Algorithms",
-            "Backtracking",
-            "Math & Number Theory",
-            "Sorting Algorithms",
-            "Binary Search Variants",
-          ],
-          resources: [
-            {
-              name: "Heap Guide",
-              url: "https://www.geeksforgeeks.org/heap-data-structure/",
-            },
-            {
-              name: "Backtracking Patterns",
-              url: "https://leetcode.com/tag/backtracking/",
-            },
-            {
-              name: "Princeton Algorithms",
-              url: "https://algs4.cs.princeton.edu/home/",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      category: "🏗️ System Design",
-      description: "Learn to design scalable, fault-tolerant systems",
-      totalProblems: 50,
-      subcategories: [
-        {
-          title: "Core Concepts",
-          difficulty: "Medium",
-          problems: 15,
-          subtopics: [
-            "Scalability",
-            "Load Balancing",
-            "Caching",
-            "Database Sharding",
-            "CAP Theorem",
-            "Consistency Models",
-            "Fault Tolerance",
-          ],
-          resources: [
-            {
-              name: "System Design Primer",
-              url: "https://github.com/donnemartin/system-design-primer",
-            },
-            { name: "High Scalability", url: "http://highscalability.com/" },
-            {
-              name: "ByteByteGo YouTube",
-              url: "https://www.youtube.com/c/ByteByteGo",
-            },
-          ],
-        },
-        {
-          title: "Real-world Systems",
-          difficulty: "Hard",
-          problems: 20,
-          subtopics: [
-            "URL Shortener",
-            "Chat System",
-            "News Feed",
-            "Search Engine",
-            "Video Streaming",
-            "Payment Gateway",
-            "Social Media Platform",
-          ],
-          resources: [
-            {
-              name: "Grokking System Design",
-              url: "https://educative.io/courses/grokking-the-system-design-interview",
-            },
-            { name: "System Design Interview", url: "https://bytebytego.com/" },
-          ],
-        },
-        {
-          title: "Other Important Topics",
-          difficulty: "Medium",
-          problems: 15,
-          subtopics: [
-            "Monitoring & Logging",
-            "Event-driven Architecture",
-            "Message Queues",
-            "Content Delivery Networks",
-            "Security in System Design",
-          ],
-          resources: [
-            {
-              name: "Grafana Monitoring",
-              url: "https://grafana.com/oss/grafana/",
-            },
-            {
-              name: "Event-driven Design",
-              url: "https://microservices.io/patterns/rel/async-messaging.html",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      category: "🗄️ Database Design",
-      description:
-        "Learn relational & NoSQL databases for real-world applications",
-      totalProblems: 70,
-      subcategories: [
-        {
-          title: "SQL Basics",
-          difficulty: "Easy",
-          problems: 20,
-          subtopics: [
-            "SELECT Queries",
-            "Joins",
-            "Indexes",
-            "Aggregate Functions",
-            "Stored Procedures",
-            "Views",
-            "Transactions",
-          ],
-          resources: [
-            { name: "SQLBolt", url: "https://sqlbolt.com/" },
-            {
-              name: "LeetCode Database",
-              url: "https://leetcode.com/problemset/database/",
-            },
-          ],
-        },
-        {
-          title: "NoSQL & Scaling",
-          difficulty: "Medium",
-          problems: 20,
-          subtopics: [
-            "Document Stores",
-            "Key-Value Stores",
-            "Column Stores",
-            "Graph Databases",
-            "Sharding",
-            "Replication",
-          ],
-          resources: [
-            { name: "MongoDB Basics", url: "https://www.mongodb.com/basics" },
-            { name: "Cassandra Guide", url: "https://cassandra.apache.org/" },
-          ],
-        },
-        {
-          title: "Advanced Design",
-          difficulty: "Hard",
-          problems: 15,
-          subtopics: [
-            "Normalization",
-            "Denormalization",
-            "Indexing Strategies",
-            "Partitioning",
-            "Data Warehousing",
-            "Query Optimization",
-          ],
-          resources: [
-            {
-              name: "Database Normalization",
-              url: "https://www.guru99.com/database-normalization.html",
-            },
-            {
-              name: "AWS Data Warehousing",
-              url: "https://aws.amazon.com/redshift/",
-            },
-          ],
-        },
-        {
-          title: "Other Important Topics",
-          difficulty: "Medium",
-          problems: 15,
-          subtopics: [
-            "ACID Properties",
-            "Database Security",
-            "Backup & Recovery",
-            "OLAP vs OLTP",
-            "Temporal Databases",
-          ],
-          resources: [
-            {
-              name: "Transactions in SQL",
-              url: "https://www.postgresql.org/docs/current/tutorial-transactions.html",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      category: "🔌 API Design & Development",
-      description: "REST, GraphQL, and microservices for backend engineering",
-      totalProblems: 60,
-      subcategories: [
-        {
-          title: "REST API Design",
-          difficulty: "Easy",
-          problems: 15,
-          subtopics: [
-            "HTTP Methods",
-            "CRUD Operations",
-            "Error Handling",
-            "Versioning",
-            "Rate Limiting",
-            "Pagination",
-            "CORS",
-          ],
-          resources: [
-            { name: "RESTful API Tutorial", url: "https://restfulapi.net/" },
-            {
-              name: "Postman Learning Center",
-              url: "https://learning.postman.com/",
-            },
-          ],
-        },
-        {
-          title: "GraphQL",
-          difficulty: "Medium",
-          problems: 15,
-          subtopics: [
-            "Queries",
-            "Mutations",
-            "Subscriptions",
-            "Schemas",
-            "Resolvers",
-            "Apollo Server",
-            "GraphQL Security",
-          ],
-          resources: [
-            {
-              name: "GraphQL Official Docs",
-              url: "https://graphql.org/learn/",
-            },
-            {
-              name: "Apollo GraphQL",
-              url: "https://www.apollographql.com/docs/",
-            },
-          ],
-        },
-        {
-          title: "Microservices & Security",
-          difficulty: "Hard",
-          problems: 15,
-          subtopics: [
-            "Service Discovery",
-            "API Gateway",
-            "Authentication",
-            "Authorization",
-            "JWT",
-            "OAuth2",
-            "gRPC",
-          ],
-          resources: [
-            { name: "Microservices Guide", url: "https://microservices.io/" },
-            { name: "JWT Introduction", url: "https://jwt.io/introduction/" },
-          ],
-        },
-        {
-          title: "Other Important Topics",
-          difficulty: "Medium",
-          problems: 15,
-          subtopics: [
-            "API Testing",
-            "OpenAPI/Swagger",
-            "Async APIs",
-            "WebSockets",
-            "gRPC Streaming",
-            "API Performance Tuning",
-          ],
-          resources: [
-            {
-              name: "OpenAPI Specification",
-              url: "https://swagger.io/specification/",
-            },
-            { name: "gRPC Basics", url: "https://grpc.io/docs/what-is-grpc/" },
-          ],
-        },
-      ],
-    },
-  ];
-
-  return (
-    <Layout
-      title="Interview Preparation - recode hive"
-      description="Comprehensive interview preparation resources for technical and behavioral interviews at top tech companies"
-    >
-      <InterviewPrepContent
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        expandedCategories={expandedCategories}
-        toggleCategory={toggleCategory}
-        showTips={showTips}
-        toggleTips={toggleTips}
-        showQuestions={showQuestions}
-        toggleQuestions={toggleQuestions}
-        behavioralQuestions={behavioralQuestions}
-        technicalResources={technicalResources}
-        practicePlatforms={practicePlatforms}
-        companyTips={companyTips}
-        mockInterviewQuestions={mockInterviewQuestions}
-      />
-    </Layout>
-  );
-};
-
-function InterviewPrepContent({
-  activeTab,
-  setActiveTab,
-  expandedCategories,
-  toggleCategory,
-  showTips,
-  toggleTips,
-  showQuestions,
-  toggleQuestions,
-  behavioralQuestions,
-  technicalResources,
-  practicePlatforms,
-  companyTips,
-  mockInterviewQuestions,
-}: {
-  activeTab: string;
-  setActiveTab: React.Dispatch<React.SetStateAction<TabType>>;
-  expandedCategories: { [key: string]: boolean };
-  toggleCategory: (categoryIndex: number) => void;
-  showTips: { [key: number]: boolean };
-  toggleTips: (index: number) => void;
-  showQuestions: { [key: number]: boolean };
-  toggleQuestions: (index: number) => void;
-  behavioralQuestions: any[];
-  technicalResources: any[];
-  practicePlatforms: any[];
-  companyTips: any[];
-  mockInterviewQuestions: any[];
-}) {
-  const { isDark } = useSafeColorMode();
-
-  return (
-    <>
-      <Head>
-        <title>Interview Preparation - recode hive</title>
-        <meta
-          name="description"
-          content="Master technical and behavioral interviews with our comprehensive preparation resources, practice questions, and company-specific guides."
-        />
-      </Head>
-
-      <div
-        className={clsx(
-          "min-h-screen",
-          isDark
-            ? "bg-gradient-to-b from-gray-900 to-gray-800 text-white"
-            : "bg-gradient-to-b from-white to-gray-50 text-black",
-        )}
-      >
-        {/* Hero Section */}
-        <motion.section
-          className="hero-section relative overflow-hidden px-4 py-20 text-center"
-          initial="hidden"
-          animate="visible"
-          variants={staggerContainer}
-          style={{
-            background: isDark
-              ? "linear-gradient(135deg, #1e3a5f 0%, #2d1b4e 50%, #1a1a2e 100%)"
-              : "linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #1e40af 100%)",
-          }}
-        >
-          <div
-            className="absolute inset-0"
-            style={{ background: "rgba(0, 0, 0, 0.2)" }}
-          ></div>
-          <div className="relative z-10 mx-auto max-w-4xl">
-            <motion.h1
-              className="mb-6 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-5xl font-bold text-transparent md:text-6xl"
-              variants={fadeIn}
-            >
-              Ace Your Next Interview
-            </motion.h1>
-            <motion.p
-              className="mb-8 text-xl text-blue-100 md:text-2xl"
-              variants={fadeIn}
-            >
-              Master technical challenges and behavioral questions with our
-              comprehensive interview preparation platform
-            </motion.p>
-            <motion.div
-              className="flex flex-col justify-center gap-4 sm:flex-row"
-              variants={fadeIn}
-            >
-              <button
-                onClick={() => setActiveTab("practice")}
-                className="transform rounded-lg px-8 py-4 font-semibold shadow-lg transition-all duration-300 hover:scale-105"
-                style={{
-                  backgroundColor: "#ffffff",
-                  color: isDark ? "#1e3a8f" : "#2563eb",
-                }}
-              >
-                Start Practice
-              </button>
-              <button
-                onClick={() => setActiveTab("technical")}
-                className="rounded-lg border-2 px-8 py-4 font-semibold transition-all duration-300 hover:opacity-90"
-                style={{
-                  borderColor: "#ffffff",
-                  color: "#ffffff",
-                  backgroundColor: "transparent",
-                }}
-              >
-                Browse Resources
-              </button>
-            </motion.div>
-          </div>
-        </motion.section>
-
-        {/* Navigation Tabs */}
-        <div
-          className="sticky top-0 z-40 border-b shadow-sm"
-          style={{
-            borderColor: isDark ? "#374151" : "#e5e7eb",
-            backgroundColor: isDark ? "#111827" : "#ffffff",
-          }}
-        >
-          <div
-            className="mx-auto max-w-6xl px-4"
-            style={{
-              backgroundColor: isDark ? "#111827" : "#ffffff",
-            }}
-          >
-            <nav className="flex space-x-8 overflow-x-auto">
-              {[
-                { id: "overview", label: "Overview", icon: "📋" },
-                { id: "technical", label: "Technical", icon: "💻" },
-                { id: "behavioral", label: "Behavioral", icon: "🤝" },
-                { id: "companies", label: "Companies", icon: "🏢" },
-                { id: "practice", label: "Practice", icon: "🎯" },
-              ].map((tab) => (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id as any)}
-                  className={`flex items-center space-x-2 border-b-2 px-2 py-4 text-sm font-medium transition-colors ${
-                    activeTab === tab.id
-                      ? "border-blue-500"
-                      : "border-transparent"
-                  }`}
-                  style={{
-                    color: activeTab === tab.id
-                      ? (isDark ? "#60a5fa" : "#2563eb")
-                      : (isDark ? "#9ca3af" : "#6b7280"),
-                  }}
-                >
-                  <span className="text-inherit">{tab.icon}</span>
-                  <span className="text-inherit">{tab.label}</span>
-                </button>
-              ))}
-            </nav>
-          </div>
-        </div>
-
-        {/* Tab Content */}
-        <div
-          className="mx-auto max-w-6xl px-4 py-12"
-          style={{
-            backgroundColor: isDark ? "#0f172a" : "#ffffff",
-            minHeight: "100vh",
-          }}
-        >
-          {/* Overview Tab */}
-          {activeTab === "overview" && (
-            <OverviewTab
-              toggleTips={toggleTips}
-              toggleQuestions={toggleQuestions}
-              showTips={showTips}
-              showQuestions={showQuestions}
-              setActiveTab={setActiveTab}
-            />
-          )}
-
-          {/* Technical Tab */}
-          {activeTab === "technical" && (
-            <TechnicalTab
-              technicalResources={technicalResources}
-              practicePlatforms={practicePlatforms}
-              expandedCategories={expandedCategories}
-              toggleCategory={toggleCategory}
-            />
-          )}
-
-          {/* Behavioral Tab */}
-          {activeTab === "behavioral" && (
-            <BehavioralTab
-              behavioralQuestions={behavioralQuestions}
-              expandedCategories={expandedCategories}
-              toggleCategory={toggleCategory}
-            />
-          )}
-
-          {/* Companies Tab */}
-          {activeTab === "companies" && (
-            <CompaniesTab
-              companyTips={companyTips}
-              toggleTips={toggleTips}
-              toggleQuestions={toggleQuestions}
-              showTips={showTips}
-              showQuestions={showQuestions}
-            />
-          )}
-
-          {/* Practice Tab */}
-          {activeTab === "practice" && (
-            <PracticeTab
-              mockInterviewQuestions={mockInterviewQuestions}
-              onTabChange={setActiveTab}
-            />
-          )}
-        </div>
-
-        {/* Call to Action */}
-        <motion.section
-          className="cta-section px-4 py-20 text-center"
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true }}
-          variants={staggerContainer}
-          style={{
-            background: isDark
-              ? "linear-gradient(135deg, #1e3a5f 0%, #2d1b4e 50%, #1a1a2e 100%)"
-              : "linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #1e40af 100%)",
-          }}
-        >
-          <div className="mx-auto max-w-4xl">
-            <motion.h2
-              className="mb-6 text-4xl font-bold md:text-5xl"
-              variants={fadeIn}
-              style={{ color: "#ffffff" }}
-            >
-              Ready to Land Your Dream Job?
-            </motion.h2>
-            <motion.p
-              className="mb-8 text-xl"
-              variants={fadeIn}
-              style={{ color: "#bfdbfe" }}
-            >
-              Join thousands of developers who have successfully prepared for
-              interviews with recode hive
-            </motion.p>
-            <motion.div
-              className="flex flex-col justify-center gap-4 sm:flex-row"
-              variants={fadeIn}
-            >
-              <Link
-                to="/get-started"
-                className="transform rounded-lg px-8 py-4 font-semibold shadow-lg transition-all duration-300 hover:scale-105"
-                style={{
-                  backgroundColor: "#ffffff",
-                  color: isDark ? "#1e3a8f" : "#2563eb",
-                }}
-              >
-                Start Preparing Now
-              </Link>
-              <Link
-                to="/community"
-                className="rounded-lg border-2 px-8 py-4 font-semibold transition-all duration-300 hover:opacity-90"
-                style={{
-                  borderColor: "#ffffff",
-                  color: "#ffffff",
-                  backgroundColor: "transparent",
-                }}
-              >
-                Join Community
-              </Link>
-            </motion.div>
-          </div>
-        </motion.section>
-      </div>
-    </>
-  );
-}
-
-export default InterviewPrepPage;
-export type { TabType };
+export default function InterviewPrepRedirect(): JSX.Element {
+  return <Redirect to="/docs" />;
+}
\ No newline at end of file
diff --git a/src/theme/BlogPostItem/Header/index.tsx b/src/theme/BlogPostItem/Header/index.tsx
index 6456384e..77dd5478 100644
--- a/src/theme/BlogPostItem/Header/index.tsx
+++ b/src/theme/BlogPostItem/Header/index.tsx
@@ -78,10 +78,10 @@ export default function BlogPostItemHeaderWrapper(props: Props): JSX.Element {
 
   const blogDate = metadata.date
     ? new Intl.DateTimeFormat(siteConfig.i18n?.defaultLocale || "en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      }).format(new Date(metadata.date))
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }).format(new Date(metadata.date))
     : undefined;
 
   const tags = (metadata.tags ?? [])
@@ -121,10 +121,11 @@ export default function BlogPostItemHeaderWrapper(props: Props): JSX.Element {
                 ))}
               </div>
               {/* Handles after the stack (only authors with a handle) */}
+              {/* Full name after the stack */}
               {authors
-                .filter((author) => author.handle)
+                .filter((author) => author.name || author.handle)
                 .map((author, idx) => (
-                  <React.Fragment key={author.handle}>
+                  <React.Fragment key={author.handle ?? author.name}>
                     {idx > 0 && (
                       <span className={styles.authorSep} aria-hidden="true">
                         ,
@@ -137,10 +138,10 @@ export default function BlogPostItemHeaderWrapper(props: Props): JSX.Element {
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        {author.handle}
+                        {author.name || author.handle}
                       </Link>
                     ) : (
-                      <span className={styles.handle}>{author.handle}</span>
+                      <span className={styles.handle}>{author.name || author.handle}</span>
                     )}
                   </React.Fragment>
                 ))}
diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx
index ee658594..5a4ffdb6 100644
--- a/src/theme/Footer/Layout/index.tsx
+++ b/src/theme/Footer/Layout/index.tsx
@@ -20,7 +20,6 @@ import {
   Mic2,
   MonitorPlay,
   Newspaper,
-  Puzzle,
   Rocket,
   Sparkles,
   Users,
@@ -293,13 +292,6 @@ export default function FooterLayout(): ReactNode {
                     Get Started
                   </Link>
                 </li>
-                <li>
-                  <Link to="/interview-prep" className="footer-link">
-                    <FooterIcon icon={Puzzle} className="link-icon" />
-                    Interview Prep
-                    <span className="link-badge hot">Hot</span>
-                  </Link>
-                </li>
                 <li>
                   <Link to="/badges/github-badges" className="footer-link">
                     <FooterIcon icon={Award} className="link-icon" />
@@ -414,9 +406,8 @@ export default function FooterLayout(): ReactNode {
                 />
                 <button
                   type="submit"
-                  className={`newsletter-button ${
-                    isSubscribed ? "subscribed" : ""
-                  }`}
+                  className={`newsletter-button ${isSubscribed ? "subscribed" : ""
+                    }`}
                   disabled={isSubscribed}
                 >
                   {isSubscribed ? "Subscribed!" : "Subscribe Now"}
@@ -465,8 +456,8 @@ export default function FooterLayout(): ReactNode {
                   to="https://github.com/recodehive"
                   className="social-link github"
                   aria-label="GitHub"
-                   target="_blank"
-                 rel="noopener noreferrer"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M12 0C5.37 0 0 5.37 0 12C0 17.31 3.435 21.795 8.205 23.385C8.805 23.49 9.03 23.13 9.03 22.815C9.03 22.53 9.015 21.585 9.015 20.58C6 21.135 5.22 19.845 4.98 19.17C4.845 18.825 4.26 17.76 3.75 17.475C3.33 17.25 2.73 16.695 3.735 16.68C4.68 16.665 5.355 17.55 5.58 17.91C6.66 19.725 8.385 19.215 9.075 18.9C9.18 18.12 9.495 17.595 9.84 17.295C7.17 16.995 4.38 15.96 4.38 11.37C4.38 10.065 4.845 8.985 5.61 8.145C5.49 7.845 5.07 6.615 5.73 4.965C5.73 4.965 6.735 4.65 9.03 6.195C9.99 5.925 11.01 5.79 12.03 5.79C13.05 5.79 14.07 5.925 15.03 6.195C17.325 4.635 18.33 4.965 18.33 4.965C18.99 6.615 18.57 7.845 18.45 8.145C19.215 8.985 19.68 10.05 19.68 11.37C19.68 15.975 16.875 16.995 14.205 17.295C14.64 17.67 15.015 18.39 15.015 19.515C15.015 21.12 15 22.41 15 22.815C15 23.13 15.225 23.505 15.825 23.385C18.2072 22.5807 20.2772 21.0497 21.7437 19.0074C23.2101 16.965 23.9993 14.5143 24 12C24 5.37 18.63 0 12 0Z" />
@@ -477,8 +468,8 @@ export default function FooterLayout(): ReactNode {
                   to="https://x.com/sanjay_kv_"
                   className="social-link twitter"
                   aria-label="Twitter"
-                   target="_blank"
-                    rel="noopener noreferrer"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
@@ -490,7 +481,7 @@ export default function FooterLayout(): ReactNode {
                   className="social-link instagram"
                   aria-label="Instagram"
                   target="_blank"
-                    rel="noopener noreferrer"
+                  rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
@@ -502,7 +493,7 @@ export default function FooterLayout(): ReactNode {
                   className="social-link linkedin"
                   aria-label="LinkedIn"
                   target="_blank"
-                    rel="noopener noreferrer"
+                  rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />