app look

app.py

@@ -55,12 +55,41 @@ st.markdown("""
         justify-content: space-between;
         align-items: center;
         border: 1px solid #333333;
+        transition: background-color 0.3s ease;
+        position: relative;
+        cursor: pointer;
+    }
+
+    .demo-card:hover {
+        background-color: #e46e08 !important;
+        color: #000 !important;
     }
 
     .demo-text {
-        font-size: 24px;
+        font-size: 28px;
         color: #c5c3c0;
         font-family: 'Amazon Ember Cd RC 250', sans-serif;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .demo-arrow {
+        font-size: 26px;
+        font-weight: bold;
+        color: #fff;
+        opacity: 0;
+        transform: scale(1);
+        transition: all 0.3s ease-in-out;
+    }
+
+    .demo-card:hover .demo-arrow {
+        opacity: 1;
+        color: #000;
+    }
+
+    .demo-card:active .demo-arrow {
+        transform: scale(1.3) rotate(45deg);
     }
 
     .demo-button {
@@ -71,12 +100,6 @@ st.markdown("""
         border-radius: 6px;
         font-size: 16px;
     }
-
-    a .demo-card:hover {
-        background-color: #e46e08 !important;
-        color: black !important;
-        transition: 0.3s;
-    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -98,7 +121,10 @@ def demo_link_block(icon, title, target_page):
     st.markdown(f"""
         <a href="/{target_page}" target="_self" style="text-decoration: none;">
             <div class="demo-card">
-                <div class="demo-text">{icon} {title}</div>
+                <div class="demo-text">
+                    <span>{icon} {title}</span>
+                    <span class="demo-arrow">→</span>
+                </div>
             </div>
         </a>
     """, unsafe_allow_html=True)