Add beautiful screenshot gallery to landing page and update README

Author: Archith

README.md

@@ -70,7 +70,7 @@
 
 <details>
 <summary><b>Interviewer Login</b></summary>
-<img src="docs/screenshots/interviewer-login.png" alt="Interviewer Login" width="100%">
+<img src="docs/screenshots/interviewer-login2.png" alt="Interviewer Login" width="100%">
 
 - Secure JWT authentication
 - Clean, professional interface
@@ -98,8 +98,7 @@
 </details>
 
 <details>
-<summary><b>Interview Notes & Feedback</b></summary>
-<img src="docs/screenshots/interview-notes.png" alt="Interview Notes" width="100%">
+<summary><b>Interview Notes & Feedback (Feature)</b></summary>
 
 **Advanced note-taking features:**
 - Structured feedback forms
@@ -113,13 +112,14 @@
 </details>
 
 <details>
-<summary><b>Session Analytics</b></summary>
-<img src="docs/screenshots/session-analytics.png" alt="Session Analytics" width="100%">
+<summary><b>Session Analytics (Feature)</b></summary>
 
 - Activity timeline
 - Code changes history
 - Time spent analysis
 - Candidate behavior tracking
+- Tab switch detection
+- Copy/paste monitoring
 </details>
 
 ## ⚡ Quick Start

index.html

@@ -488,7 +488,40 @@ <h2>See It In Action</h2>
                 <p style="color: #666;">Experience the smooth, real-time collaboration</p>
             </div>
 
-            <div class="code-preview">
+            <!-- Screenshot Gallery -->
+            <div style="margin: 30px 0;">
+                <div style="display: grid; grid-template-columns: 1fr; gap: 30px;">
+                    <!-- Landing Page Screenshot -->
+                    <div style="text-align: center;">
+                        <h3 style="color: #667eea; margin-bottom: 15px;">🏠 Beautiful Landing Page</h3>
+                        <img src="docs/screenshots/landing-page.png" alt="OpenCollab Landing Page" style="width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
+                        <p style="color: #666; margin-top: 10px; font-size: 14px;">Clean, modern interface with animated code particles</p>
+                    </div>
+                    
+                    <!-- Login Screenshot -->
+                    <div style="text-align: center; margin-top: 20px;">
+                        <h3 style="color: #667eea; margin-bottom: 15px;">🔐 Secure Interviewer Login</h3>
+                        <img src="docs/screenshots/interviewer-login2.png" alt="Interviewer Login" style="width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
+                        <p style="color: #666; margin-top: 10px; font-size: 14px;">JWT-based authentication for secure access</p>
+                    </div>
+                    
+                    <!-- Admin Dashboard Screenshot -->
+                    <div style="text-align: center; margin-top: 20px;">
+                        <h3 style="color: #667eea; margin-bottom: 15px;">📊 Admin Dashboard</h3>
+                        <img src="docs/screenshots/admin-dashboard.png" alt="Admin Dashboard" style="width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
+                        <p style="color: #666; margin-top: 10px; font-size: 14px;">Manage all interview sessions from one place</p>
+                    </div>
+                    
+                    <!-- Coding Session Screenshot -->
+                    <div style="text-align: center; margin-top: 20px;">
+                        <h3 style="color: #667eea; margin-bottom: 15px;">💻 Live Coding Session</h3>
+                        <img src="docs/screenshots/coding-session.png" alt="Coding Session" style="width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
+                        <p style="color: #666; margin-top: 10px; font-size: 14px;">Real-time collaborative coding with syntax highlighting</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="code-preview" style="margin-top: 40px;">
                 <div class="code-header">
                     <span class="code-dot dot-red"></span>
                     <span class="code-dot dot-yellow"></span>