touch up blazor page

Author: mythz

MyApp/Pages/Blazor.cshtml

@@ -32,12 +32,37 @@
                     </div>
                 </div>
             </div>
-            <div class="mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative">
-                <div class="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
-                    <img class="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
-                        src="/img/pages/blazor/blazor-tailwind-splash.png" alt="">
+            
+            <div class="relative lg:ml-auto w-full max-w-lg lg:max-w-none">
+                <div class="relative group perspective-1000">
+                    <!-- Glow Effect -->
+                    <div class="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl opacity-20 blur-xl group-hover:opacity-40 transition duration-500"></div>
+                    
+                    <!-- The Browser Window -->
+                    <div class="relative rounded-xl bg-slate-900 border border-slate-700 shadow-2xl overflow-hidden transform transition-transform duration-500 hover:scale-[1.01] hover:-rotate-1">
+                        <!-- Browser Toolbar -->
+                        <div class="bg-slate-800 border-b border-slate-700 px-4 py-3 flex items-center gap-2">
+                            <div class="flex gap-1.5">
+                                <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
+                                <div class="w-3 h-3 rounded-full bg-amber-500/80"></div>
+                                <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
+                            </div>
+                            <div class="mx-auto text-xs font-mono text-slate-500 bg-slate-900 px-3 py-1 rounded-md w-full max-w-[240px] text-center border border-slate-800/50">
+                                localhost:5001
+                            </div>
+                        </div>
+                        <!-- Content Image -->
+                        <div class="aspect-[16/11] bg-slate-950 relative">
+                            <a href="https://blazor.web-templates.io">
+                                <img src="/img/pages/blazor/blazor.webp"
+                                     alt="Blazor Template"
+                                     class="object-cover w-full h-full"/>
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
+            
         </div>
     </div>
 </div>