Update landing page with new dashboard screenshots

Replace placeholder graphics with actual screenshots for both security dashboard and admin panel. Simplify image display with consistent styling.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/page.tsx

@@ -187,38 +187,22 @@ export default function LandingPage() {
         </div>
 
         <div className="grid md:grid-cols-2 gap-8 mt-8">
-          {/* Demo Feature 1 */}
+          {/* Demo Feature 1 - Security Dashboard */}
-          <div className="bg-white rounded-xl shadow-lg overflow-hidden">
+          <div className="overflow-hidden rounded-xl shadow-lg bg-gray-50">
-            <div className="aspect-video bg-gradient-to-br from-green-100 to-green-200 flex items-center justify-center">
+            <img
-              <div className="text-center">
+              src="/security-dashboard-screenshot.png"
-                <svg className="w-16 h-16 text-green-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              alt="Security Alert Dashboard"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              className="w-full h-auto"
-                </svg>
+            />
-                <p className="font-semibold text-gray-700">Device Analytics</p>
-              </div>
-            </div>
           </div>
 
           {/* Demo Feature 2 - Admin Panel Screenshot */}
-          <div className="bg-white rounded-xl shadow-lg overflow-hidden">
+          <div className="overflow-hidden rounded-xl shadow-lg bg-gray-50">
-            <div className="aspect-video bg-gradient-to-br from-purple-100 to-purple-200 relative overflow-hidden">
+            <img
-              {/* Desktop: Show full screenshot */}
+              src="/admin-panel-screenshot.png"
-              <div className="hidden md:block absolute inset-0">
+              alt="Admin Panel Dashboard"
-                <img
+              className="w-full h-auto"
-                  src="/admin-panel-screenshot.png"
+            />
-                  alt="Admin Panel Dashboard"
-                  className="w-full h-full object-contain p-2"
-                />
-              </div>
-              {/* Mobile: Show cropped/centered portion */}
-              <div className="md:hidden absolute inset-0">
-                <img
-                  src="/admin-panel-screenshot.png"
-                  alt="Admin Panel Dashboard"
-                  className="w-full h-full object-cover object-center"
-                />
-              </div>
-            </div>
           </div>
         </div>
       </section>