app look

app.py

@@ -33,6 +33,7 @@ st.markdown("""
 }
         font-family: 'Amazon Ember', sans-serif;
     }
+    
     .block-container {
         padding-top: 2rem;
     }
@@ -50,12 +51,14 @@ st.markdown("""
         font-family: 'Amazon Ember Display 500', sans-serif;
         margin-bottom: 10px;
     }
+
+    
     .card {
     background: rgba(255, 255, 255, 0.05);  /* subtle white tint */
     backdrop-filter: blur(8px);             /* frosted glass effect */
     border-radius: 12px;
     padding: 24px 16px;
-    height: 240px;
+    height: 220px;
     color: white;
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
     transition: transform 0.2s ease, background 0.2s ease;
@@ -66,8 +69,12 @@ st.markdown("""
 }
 
 .card:hover {
-    transform: scale(1.02);
+    
     color: #e46e08;
+    transform: scale(1.06);  /* Optional: adds smooth grow effect */
+    transition: all 0.3s ease-in-out;
+    border: 2px solid #ff3c3c;
+    
 }
 
 /* Header strip with icon */
@@ -85,7 +92,7 @@ st.markdown("""
 }
 
 .card-text {
-    font-size: 28px;
+    font-size: 25px;
     font-weight: 500;
     flex-grow: 1;
     display: flex;
@@ -95,6 +102,14 @@ st.markdown("""
     padding: 0 8px;
 }
 
+.card:hover .card-text{
+    opacity: 1;
+    color: #e46e08;
+    font-size: 28px;
+    transform: scale(1.2);  /* Optional: adds smooth grow effect */
+    transition: all 0.3s ease-in-out;
+}
+
 /* Bottom arrow */
 .card-arrow {
     position: absolute;
@@ -108,27 +123,58 @@ st.markdown("""
     color: #ffffff;
 }
 
-.card:hover .card-arrow {
-    opacity: 1;
-    color: #e46e08;
-}
+# .card:hover .card-arrow {
+#     opacity: 1;
+#     color: #e46e08;
+#     font-size: 30px;
+    
+# }
 
-.card:active .card-arrow {
-    transform: translateX(-50%) scale(1.3);
-}
+# .card:active .card-arrow {
+#     transform: translateX(-50%) scale(1.3);
+# }
 
 
 
     </style>
 """, unsafe_allow_html=True)
+
+
+
+
+
 # Header with logo and title
-col_logo, col_title = st.columns([31, 66])
+col_logo, col_title = st.columns([40, 58])
 with col_logo:
     st.image("/home/user/app/images/OS_AI_1_cropped.png", use_column_width=True)
+
 spacer_col = st.columns(1)[0]
 with spacer_col:
     st.markdown("<div style='height: 120px;'></div>", unsafe_allow_html=True)
 
+    #st.image("/home/ubuntu/images/OS_AI_1.png", use_column_width=True)
+# with col_title:
+#     st.write("")
+#     st.markdown('<div class="title">OpenSearch AI demos</div>', unsafe_allow_html=True)
+
+# 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">
+#                     <span>{icon} {title}</span>
+#                     <span class="demo-arrow">→</span>
+#                 </div>
+#             </div>
+#         </a>
+#     """, unsafe_allow_html=True)
+
+
+# st.write("")
+# demo_link_block("🔍", "AI Search", "Semantic_Search")
+# demo_link_block("💬","Multimodal Conversational Search", "Multimodal_Conversational_Search")
+# demo_link_block("🛍️","Agentic Shopping Assistant", "AI_Shopping_Assistant")
+
 
 col1, col2, col3 = st.columns(3)
 
@@ -138,18 +184,19 @@ with col1:
             <div class="card">
                 <div class="card-header">🔍</div>
                 <div class="card-text">AI Search</div>
-                <div class="card-arrow">→</div>
             </div>
         </a>
     """, unsafe_allow_html=True)
 
+
+
+
 with col2:
     st.markdown("""
         <a href="/Multimodal_Conversational_Search" target="_self" style="text-decoration: none;">
             <div class="card">
                 <div class="card-header">💬</div>
                 <div class="card-text">Multimodal RAG</div>
-                <div class="card-arrow">→</div>
             </div>
         </a>
     """, unsafe_allow_html=True)
@@ -160,11 +207,9 @@ with col3:
             <div class="card">
                 <div class="card-header">🛍️</div>
                 <div class="card-text">Agentic Shopping Assistant</div>
-                <div class="card-arrow">→</div>
             </div>
         </a>
     """, unsafe_allow_html=True)
-
 st.markdown("""
     </div>
 """, unsafe_allow_html=True)
@@ -178,4 +223,7 @@ st.markdown("""
         color: white;
     }
     </style>
-""", unsafe_allow_html=True)
+""", unsafe_allow_html=True)
+
+#    <div class="card-arrow"></div>
+            

pages/Multimodal_Conversational_Search.py

@@ -437,8 +437,8 @@ with st.sidebar:
     </style>
     """,unsafe_allow_html=True)   
     with st.expander("Sample questions:"):
-        st.markdown("<span style = 'color:#FF9900;'>UK Housing</span> - which city has the highest average housing price in UK ?",unsafe_allow_html=True)
         st.markdown("<span style = 'color:#FF9900;'>Global Warming stats</span> - What is the projected energy percentage from renewable sources in future?",unsafe_allow_html=True)
+        st.markdown("<span style = 'color:#FF9900;'>UK Housing</span> - which city has the highest average housing price in UK ?",unsafe_allow_html=True)
         st.markdown("<span style = 'color:#FF9900;'>Covid19 impacts</span> - How many aged above 85 years died due to covid ?",unsafe_allow_html=True)