Update src/frontend/app.py

src/frontend/app.py

@@ -210,6 +210,39 @@ st.markdown("""
         justify-content: center;
         text-align: center;
     }
+    .healthcare-card {
+        padding: 20px;
+        border-radius: 10px;
+        background-color: #1e2130;
+        border: 1px solid #2c3153;
+        margin: 10px 0;
+        transition: transform 0.3s;
+        height: 300px;  /* Fixed height for both cards */
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    
+    .healthcare-card:hover {
+        transform: translateY(-5px);
+        border-color: #4c78a8;
+        cursor: pointer;
+    }
+    
+    .healthcare-description {
+        font-size: 16px;
+        color: #ccc;
+        margin: 15px 0;
+        text-align: center;
+        flex-grow: 1;  /* Allow description to take available space */
+    }
+    
+    .healthcare-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 20px 0;
+    }
     .main {
         padding: 2rem;
     }
@@ -884,12 +917,12 @@ def show_healthcare_prediction():
 
     with col1:
         st.markdown("""
-        <div class="model-card">
-            <div class="centered-content">
+        <div class="healthcare-card">
+            <div class="healthcare-icon">
                 <img src="https://img.icons8.com/color/96/000000/dna-helix.png" style="margin: 20px 0;">
             </div>
             <div class="model-title">Diabetes Prediction</div>
-            <div class="model-description">
+            <div class="healthcare-description">
                 Assess the risk of diabetes based on health metrics and patient history.
             </div>
         </div>
@@ -900,12 +933,12 @@ def show_healthcare_prediction():
 
     with col2:
         st.markdown("""
-        <div class="model-card">
-            <div class="centered-content">
+        <div class="healthcare-card">
+            <div class="healthcare-icon">
                 <img src="https://img.icons8.com/color/96/000000/microscope.png" style="margin: 20px 0;">
             </div>
             <div class="model-title">Liver Disease Prediction</div>
-            <div class="model-description">
+            <div class="healthcare-description">
                 Evaluate liver health and disease risk based on patient data and lab results.
             </div>
         </div>