Elaborate RAG Fundamentals page with real-world applications and concrete examples

RAG_FULL_APPLICATION_FRONTEND/src/pages/FundamentalsPage.jsx

@@ -122,6 +122,88 @@ export default function FundamentalsPage() {
           </ul>
         </div>
       </div>
+
+      {/* Real World Applications & Examples */}
+      <div className="card space-y-6 mt-8">
+        <h2 className="text-lg font-bold text-white flex items-center gap-2 border-b border-surface-800 pb-3">
+          <Sparkles className="w-5 h-5 text-accent-400" />
+          Real-World Applications & Concrete Examples
+        </h2>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Application 1 */}
+          <div className="bg-surface-900 border border-surface-800 p-5 rounded-xl hover:border-accent-500/30 transition-colors">
+            <h3 className="text-sm font-bold text-white mb-2 flex items-center gap-2">
+              <span className="bg-accent-500/20 text-accent-400 p-1.5 rounded-lg"><BookOpen className="w-4 h-4" /></span>
+              Enterprise Internal Knowledge Base
+            </h3>
+            <p className="text-xs text-gray-400 mb-4 leading-relaxed">
+              Companies have thousands of HR policies, IT manuals, and SOPs scattered across PDFs and Word documents. Employees waste hours searching for specific clauses.
+            </p>
+            <div className="bg-black/30 p-3 rounded-lg border border-surface-800">
+              <p className="text-[11px] font-mono text-gray-300"><span className="text-accent-400 font-bold">User:</span> "What is the maternity leave policy for employees in the Bangalore office?"</p>
+              <div className="my-2 border-l-2 border-surface-600 pl-2">
+                <p className="text-[10px] text-gray-500 font-mono italic">🔍 System retrieves Chunk #402 (HR_Policy_India.pdf, page 12) & Chunk #89 (Global_Benefits.docx)</p>
+              </div>
+              <p className="text-[11px] font-mono text-emerald-400"><span className="font-bold">RAG LLM:</span> "According to the HR Policy India document (Page 12), employees in the Bangalore office are entitled to 26 weeks of paid maternity leave..."</p>
+            </div>
+          </div>
+
+          {/* Application 2 */}
+          <div className="bg-surface-900 border border-surface-800 p-5 rounded-xl hover:border-accent-500/30 transition-colors">
+            <h3 className="text-sm font-bold text-white mb-2 flex items-center gap-2">
+              <span className="bg-blue-500/20 text-blue-400 p-1.5 rounded-lg"><Cpu className="w-4 h-4" /></span>
+              Customer Support Automation
+            </h3>
+            <p className="text-xs text-gray-400 mb-4 leading-relaxed">
+              Customer service bots often give generic answers. By linking the bot to a live database of product manuals and past resolved tickets via RAG, it can give highly technical, accurate answers.
+            </p>
+            <div className="bg-black/30 p-3 rounded-lg border border-surface-800">
+              <p className="text-[11px] font-mono text-gray-300"><span className="text-blue-400 font-bold">User:</span> "My Router X200 is blinking red continuously, what do I do?"</p>
+              <div className="my-2 border-l-2 border-surface-600 pl-2">
+                <p className="text-[10px] text-gray-500 font-mono italic">🔍 System retrieves Chunk #12 (Troubleshooting_X200.pdf, Section 4.1)</p>
+              </div>
+              <p className="text-[11px] font-mono text-emerald-400"><span className="font-bold">RAG LLM:</span> "A continuous red blinking light on the X200 indicates a firmware update failure. Please hold the reset button for 15 seconds to enter recovery mode (Source: Troubleshooting Guide, Sec 4.1)."</p>
+            </div>
+          </div>
+          
+          {/* Application 3 */}
+          <div className="bg-surface-900 border border-surface-800 p-5 rounded-xl hover:border-accent-500/30 transition-colors">
+            <h3 className="text-sm font-bold text-white mb-2 flex items-center gap-2">
+              <span className="bg-purple-500/20 text-purple-400 p-1.5 rounded-lg"><CheckCircle2 className="w-4 h-4" /></span>
+              Legal & Medical Contract Analysis
+            </h3>
+            <p className="text-xs text-gray-400 mb-4 leading-relaxed">
+              Lawyers and doctors need to quickly find specific clauses in 500-page contracts or patient histories. RAG instantly surfaces the exact paragraph they need.
+            </p>
+            <div className="bg-black/30 p-3 rounded-lg border border-surface-800">
+              <p className="text-[11px] font-mono text-gray-300"><span className="text-purple-400 font-bold">User:</span> "Are there any non-compete clauses for the software engineering role?"</p>
+              <div className="my-2 border-l-2 border-surface-600 pl-2">
+                <p className="text-[10px] text-gray-500 font-mono italic">🔍 System retrieves Chunk #56 (Employment_Contract_Template.pdf)</p>
+              </div>
+              <p className="text-[11px] font-mono text-emerald-400"><span className="font-bold">RAG LLM:</span> "Yes, Section 8.2 of the employment contract states a 12-month non-compete period within a 50-mile radius for software engineering roles."</p>
+            </div>
+          </div>
+
+          {/* Application 4 */}
+          <div className="bg-surface-900 border border-surface-800 p-5 rounded-xl hover:border-accent-500/30 transition-colors">
+            <h3 className="text-sm font-bold text-white mb-2 flex items-center gap-2">
+              <span className="bg-emerald-500/20 text-emerald-400 p-1.5 rounded-lg"><RefreshCw className="w-4 h-4" /></span>
+              Educational Tutoring (CBSE / NCERT)
+            </h3>
+            <p className="text-xs text-gray-400 mb-4 leading-relaxed">
+              Students can ask a bot questions about their textbooks. The bot uses RAG to pull the exact chapter and page from the NCERT syllabus to provide the answer, preventing hallucinations.
+            </p>
+            <div className="bg-black/30 p-3 rounded-lg border border-surface-800">
+              <p className="text-[11px] font-mono text-gray-300"><span className="text-emerald-400 font-bold">User:</span> "Explain the AAA criterion for similarity of triangles."</p>
+              <div className="my-2 border-l-2 border-surface-600 pl-2">
+                <p className="text-[10px] text-gray-500 font-mono italic">🔍 System retrieves Chunk #304 (Class10_Mathematics.pdf, Page 129)</p>
+              </div>
+              <p className="text-[11px] font-mono text-emerald-400"><span className="font-bold">RAG LLM:</span> "The AAA (Angle-Angle-Angle) criterion states that in two triangles, if corresponding angles are equal, then their corresponding sides are in the same ratio (or proportion) and hence the two triangles are similar."</p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }