fix(ui): resolve browser crash when wallet connects to completed demo cards

- Remove floating-particle animations from demo cards causing performance issues
- Comment out remaining badge particle animations
- Add ESCROW ARSENAL section header for better visual hierarchy
- Improve UI stability when wallet connects and demo cards update state

Author: josegomez-dev

app/globals.css

@@ -374,28 +374,24 @@ body {
 /* Demo Card Styles */
 .demo-card.earned-badge {
   animation:
-    float 3s ease-in-out infinite,
     glow-pulse 2s ease-in-out infinite !important;
 }
 
 .demo-card.earned-badge:hover {
   animation:
-    float 1.5s ease-in-out infinite,
     glow-pulse 1s ease-in-out infinite !important;
-  transform: scale(1.05) translateY(-5px) !important;
+  transform: scale(1.05) !important;
 }
 
 .demo-card.completed.earned-badge {
   animation:
-    float 3s ease-in-out infinite,
     glow-pulse 2s ease-in-out infinite !important;
 }
 
 .demo-card.completed.earned-badge:hover {
   animation:
-    float 1.5s ease-in-out infinite,
     glow-pulse 1s ease-in-out infinite !important;
-  transform: scale(1.05) translateY(-5px) !important;
+  transform: scale(1.05) !important;
 }
 
 .badge-shine {
@@ -425,7 +421,7 @@ body {
 }
 
 .demo-card.completed:hover {
-  transform: scale(1.05) translateY(-8px);
+  transform: scale(1.05);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 

app/home/page.tsx

@@ -568,16 +568,16 @@ const DemoSelector = ({
                         {/* <div className='absolute top-8 right-8 floating-particle opacity-80' style={{ animationDelay: '0.5s' }}>
                           <BadgeEmblem id={badgeId} size='sm' className='text-orange-400' />
                         </div> */}
-                        <div
-                          className='absolute bottom-8 left-8 floating-particle opacity-60'
+                        {/* <div
+                          className='absolute bottom-8 left-8 opacity-60'
                           style={{ animationDelay: '1s' }}
                         >
                           {getBadgeIcon(badgeId, BADGE_SIZES.sm) || (
                             <BadgeEmblem id={badgeId} size='sm' className='text-yellow-300' />
                           )}
-                        </div>
+                        </div> */}
                         <div
-                          className='absolute bottom-4 right-4 floating-particle opacity-90'
+                          className='absolute bottom-4 right-4 opacity-90'
                           style={{ animationDelay: '1.5s' }}
                         >
                           {getBadgeIcon(badgeId, BADGE_SIZES.sm) || (
@@ -1598,6 +1598,12 @@ export default function HomePageContent() {
               </div>
             </section>
 
+
+            <div className='text-center mb-12'>
+              <h3 className='text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-accent-400 mb-6 drop-shadow-2xl'>
+              🧩 ESCROW ARSENAL
+              </h3>
+            </div>
             {/* Demo Cards Section - with fade-in animation */}
             <div className='text-center'>
               <p className=' text-white/80 max-w-3xl mx-auto mb-6'>