From 5fc3a5a242edfb94902f17dee9a7b22bc6c0f8bc Mon Sep 17 00:00:00 2001 From: sohumvenkatadri7 Date: Sun, 19 Oct 2025 18:49:11 +0530 Subject: [PATCH 1/5] Fixed the color issue of the badges in the Overview tab --- src/css/custom.css | 57 ++++++++++++------------ src/pages/interview-prep/OverviewTab.tsx | 10 ++--- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 4a8688e9..a1f6d517 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -523,35 +523,6 @@ body { } .navbar-sidebar .navbar__link:hover { - background-color: var(--ifm-color-emphasis-200) !important; - } - - /* Improve sidebar dropdown behavior */ - .navbar-sidebar .dropdown { - display: block !important; - } - - .navbar-sidebar .dropdown__menu { - position: static !important; - display: block !important; - box-shadow: none !important; - border: none !important; - margin: 0 !important; - padding: 0.5rem 0 !important; - background: transparent !important; - overflow: visible !important; - } - - .navbar-sidebar .dropdown__link { - padding: 0.5rem 1rem 0.5rem 2rem !important; - border-radius: 4px !important; - margin: 2px 0 !important; - font-size: 0.9rem !important; - display: block !important; - color: var(--ifm-font-color-base) !important; - } - - .navbar-sidebar .dropdown__link:hover { background-color: var(--ifm-color-emphasis-300) !important; color: var(--ifm-color-primary) !important; } @@ -1575,3 +1546,31 @@ a { [data-theme='dark'] .rounded.dark\:bg-gray-700 { background-color: #374151 !important; /* gray-700 */ } + +/* difficulty badge overrides — ensure readable in light mode and lift above overlays */ +.interview-prep-page .difficulty-badge { + z-index: 50; + background-clip: padding-box; + box-shadow: 0 1px 2px rgba(0,0,0,0.04); +} + +/* Light mode: explicit background + text for each variant */ +[data-theme="light"] .interview-prep-page .difficulty-badge.bg-green-200 { + background-color: #DCFCE7 !important; /* green-200 -> higher contrast */ + color: #14532D !important; +} +[data-theme="light"] .interview-prep-page .difficulty-badge.bg-yellow-200 { + background-color: #FEF3C7 !important; /* yellow-200 */ + color: #78350F !important; +} +[data-theme="light"] .interview-prep-page .difficulty-badge.bg-red-200 { + background-color: #FEE2E2 !important; /* red-200 */ + color: #7F1D1D !important; +} + +/* Keep all duration badges grey in light mode */ +[data-theme="light"] .interview-prep-page .duration-badge { + background-color: #f3f4f6 !important; /* gray-100 */ + color: #1f2937 !important; /* gray-800 */ + z-index: 50; +} diff --git a/src/pages/interview-prep/OverviewTab.tsx b/src/pages/interview-prep/OverviewTab.tsx index 09ce8e4c..46dec072 100644 --- a/src/pages/interview-prep/OverviewTab.tsx +++ b/src/pages/interview-prep/OverviewTab.tsx @@ -358,17 +358,17 @@ const OverviewTab: React.FC = ({
{stage.difficulty} - + {stage.duration}
From b523236075bf70bd156712ffbb626794da02e79e Mon Sep 17 00:00:00 2001 From: sohumvenkatadri7 Date: Tue, 21 Oct 2025 01:10:07 +0530 Subject: [PATCH 2/5] Fixed the forced darkmode gradient on the Pro Tip for Interview Success div. --- src/css/custom.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index a1f6d517..fc1d7cfb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -835,6 +835,17 @@ html.theme-light .text-gray-900 { background-color: #ffffff !important; } +/* Ensure the specific block is forced light in light mode */ +html[data-theme="light"] .interview-prep-page .technical-outer { + background-image: linear-gradient(135deg,#eff6ff 0%, #f8fafc 100%) !important; + background-color: #ffffff !important; + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; + mix-blend-mode: normal !important; + isolation: isolate !important; + z-index: 10 !important; +} + /*==== SECTION 13 Modern Blog Enhancements ======*/ .modern-gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); @@ -1574,3 +1585,9 @@ a { color: #1f2937 !important; /* gray-800 */ z-index: 50; } + +/* Force removal of that Tailwind gradient in light mode */ +html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 { + background-image: none !important; + background-color: #ffffff !important; +} From 8433de5592e5834a19867db1da5881ec08629525 Mon Sep 17 00:00:00 2001 From: sohumvenkatadri7 Date: Tue, 21 Oct 2025 01:24:34 +0530 Subject: [PATCH 3/5] Fixed the dark gradient issues on the company containers. --- src/css/custom.css | 42 +++++++++++++++++++++++ src/pages/interview-prep/CompaniesTab.tsx | 4 +-- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index fc1d7cfb..18770f2e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -846,6 +846,32 @@ html[data-theme="light"] .interview-prep-page .technical-outer { z-index: 10 !important; } +/* Companies tab: use white gradients in light mode and remove overlays */ +[data-theme="light"] .company-outer { + background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; + background-color: #ffffff !important; + color: #0f172a !important; + isolation: isolate !important; + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; + mix-blend-mode: normal !important; +} + +/* hide the subtle pattern overlay added inside the component */ +[data-theme="light"] .company-outer > .absolute.inset-0, +[data-theme="light"] .company-outer .absolute.inset-0.opacity-5 { + display: none !important; + background: none !important; + opacity: 1 !important; +} + +/* ensure badges & inner panels render normally */ +[data-theme="light"] .company-outer, +[data-theme="light"] .company-outer * { + mix-blend-mode: normal !important; + background-blend-mode: normal !important; +} + /*==== SECTION 13 Modern Blog Enhancements ======*/ .modern-gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); @@ -1591,3 +1617,19 @@ html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 { background-image: none !important; background-color: #ffffff !important; } + +/* Companies: force white/near-white surface in light mode for .company-outer */ +html[data-theme="light"] .company-outer { + background-image: linear-gradient(135deg,#ffffff 0%, #f8fafc 100%) !important; + background-color: #ffffff !important; + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; + mix-blend-mode: normal !important; + isolation: isolate !important; +} +html[data-theme="light"] .company-outer::before, +html[data-theme="light"] .company-outer::after { + display: none !important; + background: none !important; + content: none !important; +} diff --git a/src/pages/interview-prep/CompaniesTab.tsx b/src/pages/interview-prep/CompaniesTab.tsx index 4993b901..1a3c2de2 100644 --- a/src/pages/interview-prep/CompaniesTab.tsx +++ b/src/pages/interview-prep/CompaniesTab.tsx @@ -131,7 +131,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { {/* Background pattern */} @@ -340,7 +340,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { {/* --------- HEADER --------- */} - + {/* Background pattern */}
Date: Tue, 21 Oct 2025 01:55:49 +0530 Subject: [PATCH 4/5] Fixed the grey badges issue and changed the color of the text on the button of Join Community Discord from green to white. --- src/css/custom.css | 36 ++++++++++++++++++++++- src/pages/interview-prep/CompaniesTab.tsx | 8 ++--- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 18770f2e..90046e64 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1625,7 +1625,6 @@ html[data-theme="light"] .company-outer { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important; - isolation: isolate !important; } html[data-theme="light"] .company-outer::before, html[data-theme="light"] .company-outer::after { @@ -1633,3 +1632,38 @@ html[data-theme="light"] .company-outer::after { background: none !important; content: none !important; } + +/* Strong, final overrides for pill buttons and community button text in light mode */ +html[data-theme="light"] .pill-badge, +html[data-theme="light"] .company-outer .pill-badge, +html[data-theme="light"] [data-slot="card-header"] .pill-badge, +html[data-theme="light"] .company-border .pill-badge, +html[data-theme="light"] .pill-badge[class*="bg-"], +html[data-theme="light"] span.bg-gray-100.pill-badge { + background-color: #f3f4f6 !important; /* gray-100 visible in light mode */ + color: #1f2937 !important; /* dark text */ + mix-blend-mode: normal !important; + background-clip: padding-box !important; + z-index: 9999 !important; + opacity: 1 !important; +} + +/* Force link text inside gradient buttons to be white */ +html[data-theme="light"] .company-tab-link, +html[data-theme="light"] .company-tab-community-link, +html[data-theme="light"] .company-border a, +html[data-theme="light"] button [class*="company-tab-link"], +html[data-theme="light"] a.company-tab-link { + color: #ffffff !important; + text-decoration: none !important; +} + +/* If any Tailwind gradient utility still applies, remove it for these containers in light mode */ +html[data-theme="light"] .company-outer.bg-gradient-to-br, +html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br { + background-image: linear-gradient(135deg,#ffffff 0%, #f8fafc 100%) !important; + background-color: #ffffff !important; + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; + mix-blend-mode: normal !important; +} diff --git a/src/pages/interview-prep/CompaniesTab.tsx b/src/pages/interview-prep/CompaniesTab.tsx index 1a3c2de2..3d2eea4d 100644 --- a/src/pages/interview-prep/CompaniesTab.tsx +++ b/src/pages/interview-prep/CompaniesTab.tsx @@ -227,7 +227,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => {

{item.description}

-
+
{item.stats}
@@ -678,7 +678,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => {

-
+
{[ { title: "Share Experiences", @@ -747,7 +747,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => {

{item.description}

-
+
{item.benefit}
@@ -762,7 +762,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { > From 1f22aa7457b5b454e4df4f19dd11797a2791b9d9 Mon Sep 17 00:00:00 2001 From: sohumvenkatadri7 Date: Tue, 21 Oct 2025 02:17:16 +0530 Subject: [PATCH 5/5] Fixed Lint run issue --- src/pages/interview-prep/CompaniesTab.tsx | 217 ++-- src/pages/interview-prep/OverviewTab.tsx | 1306 +++++++++++---------- 2 files changed, 761 insertions(+), 762 deletions(-) diff --git a/src/pages/interview-prep/CompaniesTab.tsx b/src/pages/interview-prep/CompaniesTab.tsx index 86f89794..26f5e412 100644 --- a/src/pages/interview-prep/CompaniesTab.tsx +++ b/src/pages/interview-prep/CompaniesTab.tsx @@ -131,11 +131,9 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { - {/* Background pattern */}
= ({ companyTips = [] }) => { description: "Google, Amazon, Meta, Apple, Netflix, Microsoft + emerging unicorns", color: "from-blue-500 to-blue-600", - bgColor: "bg-blue-500", stats: "6+ Companies", }, { @@ -175,7 +172,6 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { description: "System Design, Behavioral, Coding, Product Sense, Leadership", color: "from-green-500 to-green-600", - bgColor: "bg-green-500", stats: "5 Categories", }, { @@ -184,7 +180,6 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { description: "Company culture fit, technical excellence, leadership principles", color: "from-purple-500 to-purple-600", - bgColor: "bg-purple-500", stats: "95% Success", }, { @@ -193,48 +188,42 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { description: "Actual questions from recent interviews with detailed answers", color: "from-orange-500 to-orange-600", - bgColor: "bg-orange-500", stats: "100+ Questions", }, - ]?.map((item, i) => - item ? ( - ( + +
-
- - - {item.icon} - -
-

- {item.title} -

-

- {item.description} -

-
-
- {item.stats} -
- - ) : null, - )} + + {item.icon} +
+

+ {item.title} +

+

+ {item.description} +

+
+ {item.stats} +
+ + ))}
@@ -257,25 +246,23 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { icon: "👥", color: "text-purple-600", }, - ]?.map((stat, i) => - stat ? ( - -
- {stat.metric} -
-
- {stat.icon} - {stat.label} -
- - ) : null, - )} + ].map((stat, i) => ( + +
+ {stat.metric} +
+
+ {stat.icon} + {stat.label} +
+ + ))}
@@ -286,12 +273,12 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { >
- + setSearchTerm(e.target.value)} - className="custom-input 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" + 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" />
@@ -341,10 +328,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { return ( - {/* --------- HEADER --------- */} - - {/* Background pattern */}
= ({ companyTips = [] }) => {
- {/* logo */} = ({ companyTips = [] }) => { alt={`${company.company} logo`} className="h-20 w-20 rounded-2xl border border-gray-100 bg-white object-contain p-3 shadow-lg" /> -
+
- {/* title + focus */}
{company.company}
-
- -
-

+ +

Focus: {company.focus}

@@ -408,7 +388,6 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => {
- {/* demand + industry */}
@@ -428,14 +407,13 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { {role} ))} - {/* collapse toggle */}
- {/* --------- COLLAPSIBLE CONTENT --------- */} = ({ companyTips = [] }) => { >
- {/* Key Preparation Tips */} @@ -497,9 +473,8 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { - {/* Common Interview Questions */} @@ -523,24 +498,24 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { className="w-full text-left" >
-

+

"{item.question}"

{item.category} @@ -556,7 +531,7 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { = ({ companyTips = [] }) => {
- {/* Contributors Section */} -
-
+
+
🚀
@@ -603,28 +577,20 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => {
@@ -662,11 +628,10 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { )} - {/* Background elements */} -
🤝
+
🤝
💡
@@ -681,7 +646,6 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => {

-
{[ { @@ -690,7 +654,6 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { description: "Recent interview questions and experiences from your interviews", color: "from-blue-500 to-blue-600", - bgColor: "bg-blue-500", benefit: "Help 1000+ candidates", }, { @@ -699,7 +662,6 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { description: "Company-specific preparation strategies and insider knowledge", color: "from-green-500 to-green-600", - bgColor: "bg-green-500", benefit: "Earn community points", }, { @@ -708,7 +670,6 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { description: "Request coverage for new companies and emerging startups", color: "from-purple-500 to-purple-600", - bgColor: "bg-purple-500", benefit: "Shape our roadmap", }, { @@ -717,20 +678,19 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { description: "Enhance existing company profiles with updated information", color: "from-orange-500 to-orange-600", - bgColor: "bg-orange-500", benefit: "Get featured contributor", }, ].map((item, i) => (
= ({ companyTips = [] }) => { ease: "easeInOut", }} /> - - {item.icon} - + {item.icon}

{item.title} @@ -751,29 +709,24 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => {

{item.description}

-
-
+
{item.benefit}
))}
-
+
- + +

Join 50,000+ developers preparing for their dream jobs @@ -785,4 +738,4 @@ const CompaniesTab: React.FC = ({ companyTips = [] }) => { ); }; -export default CompaniesTab; +export default CompaniesTab; \ No newline at end of file diff --git a/src/pages/interview-prep/OverviewTab.tsx b/src/pages/interview-prep/OverviewTab.tsx index 7aa3f0c1..26f5e412 100644 --- a/src/pages/interview-prep/OverviewTab.tsx +++ b/src/pages/interview-prep/OverviewTab.tsx @@ -1,5 +1,57 @@ import React from "react"; -import { motion, AnimatePresence } from "framer-motion"; +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 }, @@ -7,684 +59,678 @@ const fadeIn = { }; const staggerContainer = { hidden: {}, - visible: { transition: { staggerChildren: 0.2 } }, + visible: { transition: { staggerChildren: 0.1 } }, }; -interface OverviewTabProps { - toggleTips: (index: number) => void; - toggleQuestions: (index: number) => void; - showTips: { [key: number]: boolean }; - showQuestions: { [key: number]: boolean }; - setActiveTab: React.Dispatch>; -} +const CompaniesTab: React.FC = ({ 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], + })); + }; -const OverviewTab: React.FC = ({ - toggleTips = () => {}, - toggleQuestions = () => {}, - showTips = {}, - showQuestions = {}, - setActiveTab = () => {}, -}) => { - const stages = [ - { - step: "01", - title: "Resume Optimization", - subtitle: "Foundation Building Phase", - icon: "📄", - description: - "Craft a compelling resume that showcases your achievements, aligns with job requirements, and passes ATS screening systems", - color: "from-blue-500 to-blue-600", - bgColor: "bg-blue-500", - duration: "Ongoing preparation", - difficulty: "Medium", - keyFocus: "Professional Presentation & ATS Optimization", - tips: [ - "Tailor resume for each specific role and company", - "Use action verbs and quantify achievements with metrics", - "Optimize for ATS with relevant keywords from job description", - "Keep format clean, consistent, and easy to scan", - "Include relevant projects, certifications, and technical skills", - ], - commonQuestions: [ - "Walk me through your resume", - "Tell me about this project on your resume", - "Why did you choose this career path?", - ], - }, - { - step: "02", - title: "Technical Assessment", - subtitle: "Core Competency Evaluation", - icon: "💻", - description: - "Deep dive into coding abilities, algorithmic thinking, system design knowledge, and technical problem-solving approach", - color: "from-green-500 to-green-600", - bgColor: "bg-green-500", - duration: "60-120 minutes", - difficulty: "Hard", - keyFocus: "Problem Solving & Code Quality", - tips: [ - "Practice coding on whiteboard/shared editor daily", - "Think out loud - explain your thought process clearly", - "Ask clarifying questions before jumping into code", - "Test your solution with edge cases and optimize", - "Know time/space complexity of your solutions", - ], - commonQuestions: [ - "Implement [data structure/algorithm]", - "Design a system for [specific use case]", - "Optimize this code for better performance", - ], - }, - { - step: "03", - title: "Behavioral Deep-Dive", - subtitle: "Leadership & Culture Assessment", - icon: "🤝", - description: - "Comprehensive evaluation of soft skills, leadership potential, conflict resolution abilities, and team collaboration style", - color: "from-purple-500 to-purple-600", - bgColor: "bg-purple-500", - duration: "45-75 minutes", - difficulty: "Medium", - keyFocus: "Leadership & Collaboration", - tips: [ - "Master the STAR method (Situation, Task, Action, Result)", - "Prepare 5-7 detailed stories covering different competencies", - "Show growth mindset - discuss lessons learned from failures", - "Demonstrate impact with specific metrics and outcomes", - "Practice active listening and ask follow-up questions", - ], - commonQuestions: [ - "Tell me about a time you led a difficult project", - "Describe a conflict with a teammate and resolution", - "Share an example of when you failed and what you learned", - ], - }, - { - step: "04", - title: "Final Alignment", - subtitle: "Mutual Fit Confirmation", - icon: "🎯", - description: - "Final evaluation covering compensation expectations, role clarity, team dynamics, and long-term career alignment", - color: "from-orange-500 to-red-500", - bgColor: "bg-orange-500", - duration: "30-60 minutes", - difficulty: "Medium", - keyFocus: "Mutual Fit & Expectations", - tips: [ - "Research industry salary benchmarks thoroughly", - "Prepare thoughtful questions about team and growth", - "Show genuine enthusiasm for the role and company", - "Discuss career goals and how role aligns with them", - "Be ready to negotiate professionally and respectfully", - ], - commonQuestions: [ - "What are your career goals for the next 2-3 years?", - "How do you handle work-life balance?", - "What questions do you have for us?", - ], - }, - ]; return ( - - -

-
-
- - Your Complete Interview Success Guide -
-

- What Our Interview Prep Section Covers -

+ + +
+ + Master FAANG+ Company Interviews +
+

+ Company-Specific Interview Prep +

+

+ Get insider knowledge, real interview questions, and proven strategies + for landing your dream job at top tech companies +

+ + + +
+
+
+ +
+
+

+ 🏢 + FAANG+ Companies Overview +

+

+ Navigate the unique interview processes of the world's most + competitive tech companies +

-
-
-

- - 📚 - - Comprehensive Coverage -

-
    -
  • - - - Technical Mastery: 500+ coding problems, - algorithms, data structures, and system design challenges - -
    • -
  • - - - Behavioral Excellence: STAR method - framework, leadership scenarios, and communication skills - -
    • -
  • - - - Company Intelligence: FAANG-specific - strategies, culture insights, and insider tips - -
    • -
  • - - - Mock Practice: Real-time simulations with - feedback and performance tracking - -
    • -
-
- -
-

- - ⚡ - - Why Both Technical & Behavioral Matter -

-
-
-

- Technical Skills (60% Weight) -

-

- Prove you can solve complex problems, write clean code, and - design scalable systems. Technical competence is your entry - ticket. -

-
-
-

- Behavioral Skills (40% Weight) -

-

- Demonstrate leadership, collaboration, and cultural fit. - Many technically strong candidates fail here due to poor - communication or team dynamics. -

+
+ {[ + { + 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) => ( + +
+ + {item.icon}
-
-
-

- 💡 Key Insight: Top companies hire for both - technical excellence AND cultural alignment. Neglecting either - aspect significantly reduces your success rate. +

+ {item.title} +

+

+ {item.description}

-
-
+
+ {item.stats} +
+ + ))} +
+ +
+ {[ + { + 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) => ( + +
+ {stat.metric} +
+
+ {stat.icon} + {stat.label} +
+ + ))}
- -
-

- Interview Process Journey -

-

- Navigate each stage strategically with our comprehensive roadmap -

+ +
+
+ + 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" + /> +
+
+ + +
-
- {/* Background pattern */} -
-
+
+
+ + Showing {filteredCompanies.length} of {companyTips?.length || 0}{" "} + companies +
+
+ + Updated weekly with latest interview insights
+
+ - {/* Diagonal flowchart */} -
- {(stages || []).map((stage, index) => { - return stage ? ( - - {index < 3 && ( -
-
- -
- - - - - -
- )} +
+ {filteredCompanies.map((company, companyIndex) => { + const isOpen = expandedCompanies[companyIndex] || false; + return ( + + + +
+
+
-
- -
- - - {stage.step} - -
+
+
- {stage.icon} + {`${company.company} +
+ +
- - -
-
-
+
+ + {company.company} + +
+ +

+ Focus: {company.focus} +

+
-
-
-
-

- {stage.title} -

-

- {stage.subtitle} -

-
-
- + {company.focusAreas.slice(0, 4).map((area, i) => ( + - {stage.difficulty} - - - - {stage.duration} - -
+ {area} + + ))} + {company.focusAreas.length > 4 && ( + + +{company.focusAreas.length - 4} more + + )}
+
-

- {stage.description} -

- -
-

- - Key Focus: {stage.keyFocus} -

+
+
+ + High Demand
+
+ {company.industry} +
+
+
-
- +
+
+ + + + +
+ +

+
+ +
+ Key Preparation Tips +

+
    + {company.tips.map((tip, i) => ( + - - - - - - - {showTips[index] && ( - -
      - {stage.tips?.map((tip, tipIndex) => ( - + + {i + 1} + +
+ + {tip} + + + ))} + + + + +

+
+ +
+ Common Interview Questions +

+
+ {company.commonQuestions.map((item, i) => { + const questionKey = `${companyIndex}-${i}`; + const isExpanded = expandedQuestions[questionKey]; + + return ( + + + toggleQuestion(companyIndex, i) + } + className="w-full text-left" + > + +
+

+ "{item.question}" +

+ + {item.category} + +
+ - - - {tip} - - - ))} - - - )} - + + + + + + +

+ {item.answer} +

+ + + + ); + })}
+ +
-
- - - {showQuestions[index] && ( - -
- {stage.commonQuestions?.map( - (question, qIndex) => ( - -

- "{question}" -

- - ), - )} -
- - )} - + + + Share Interview Experience + + + +
-
+ - ) : null; - })} -
-
- + + + ); + })} +
- -
-

- Preparation Strategy -

-
-
-
-
-
- 🧠 -
-

- Problem-Solving Mastery -

-

- Build strong algorithmic thinking through consistent practice. - Focus on understanding patterns rather than memorizing - solutions. -

-
-
-
- 💬 -
-

- Communication Excellence -

-

- Practice explaining complex concepts clearly. Develop your - ability to think out loud and collaborate effectively. -

-
-
-
- 🎭 -
-

- Behavioral Readiness -

-

- Prepare compelling stories using the STAR method. Showcase - leadership, growth mindset, and cultural alignment. -

-
-
+ {filteredCompanies.length === 0 && ( + +
🔍
+

+ No companies match your current filters. +

+ + + )} + + +
🤝
+
💡
-
-
- 💡 - Pro Tip: Balance Your Preparation -
-

- Allocate 60% of your time to technical skills, 30% to behavioral - preparation, and 10% to company research. This balance ensures - you're well-rounded and confident in all interview stages. +

+
+

+ 🤝 + Join Our Interview Prep Community +

+

+ Help build the most comprehensive company interview resource and + accelerate your career growth

-
- - -

- Quick Access to Resources -

-
- {[ - { - id: "technical", - title: "Technical Prep", - icon: "💻", - description: "Coding challenges, algorithms, system design", - color: "from-blue-500 to-blue-600", - items: ["500+ Problems", "System Design", "Code Review"], - }, - { - id: "behavioral", - title: "Behavioral Prep", - icon: "🤝", - description: "STAR method, leadership stories, soft skills", - color: "from-green-500 to-green-600", - items: ["STAR Framework", "Leadership", "Communication"], - }, - { - id: "companies", - title: "Company Guides", - icon: "🏢", - description: "Company-specific tips and strategies", - color: "from-purple-500 to-purple-600", - items: ["FAANG Tips", "Culture Fit", "Specific Questions"], - }, - { - id: "practice", - title: "Mock Practice", - icon: "🎯", - description: "Simulate real interview conditions", - color: "from-orange-500 to-orange-600", - items: ["Live Practice", "Feedback", "Time Management"], - }, - ]?.map((section) => - section ? ( +
+ {[ + { + 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) => ( setActiveTab(section.id as any)} - whileHover={{ y: -5 }} + 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 }} >
-
{section.icon}
-

{section.title}

+ + {item.icon}
-
-

- {section.description} -

-
- {section.items?.map((item, i) => - item ? ( -
- - {item} -
- ) : null, - )} -
-
- - Explore Section → - -
+

+ {item.title} +

+

+ {item.description} +

+
+ {item.benefit}
- ) : null, - )} -
- - {/* Quick Stats */} - -
-
-
500+
-
Practice Questions
+ ))}
-
-
50+
-
System Design Topics
-
-
-
20+
-
Company Guides
-
-
-
95%
-
Success Rate
+ +
+ + + + + +

+ Join 50,000+ developers preparing for their dream jobs +

@@ -692,4 +738,4 @@ const OverviewTab: React.FC = ({ ); }; -export default OverviewTab; +export default CompaniesTab; \ No newline at end of file