feat: updated website

app.py

@@ -189,40 +189,27 @@ if page == "Summary":
         
         st.markdown('#### Clustering Details')
         
-        # Create a row layout for all metrics to reduce vertical space
-        col1_metric1, col1_metric2, col1_metric3, col1_metric4 = st.columns(4)
-        
-        with col1_metric1:
-            st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+        # Display metrics in a wider row with slight horizontal spacing
+        st.markdown(f"""
+        <div style="display: flex; justify-content: space-evenly;">
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px; width: 23%;">
                 <h5 style="color:{primary_color}; text-align: center; margin: 0;">Observations</h5>
                 <h3 style="color:{text_color}; text-align: center; margin: 0;">696</h3>
             </div>
-            """, unsafe_allow_html=True)
-
-        with col1_metric2:
-            st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px; width: 23%;">
                 <h5 style="color:{primary_color}; text-align: center; margin: 0;">Silhouette Score</h5>
                 <h3 style="color:{text_color}; text-align: center; margin: 0;">0.57744</h3>
             </div>
-            """, unsafe_allow_html=True)
-
-        with col1_metric3:
-            st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px; width: 23%;">
                 <h5 style="color:{primary_color}; text-align: center; margin: 0;">Calinski-Harabasz</h5>
                 <h3 style="color:{text_color}; text-align: center; margin: 0;">422.98</h3>
             </div>
-            """, unsafe_allow_html=True)
-
-        with col1_metric4:
-            st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px; width: 23%;">
                 <h5 style="color:{primary_color}; text-align: center; margin: 0;">Davies-Bouldin</h5>
                 <h3 style="color:{text_color}; text-align: center; margin: 0;">0.63446</h3>
             </div>
-            """, unsafe_allow_html=True)
+        </div>
+        """, unsafe_allow_html=True)
     # Middle Column (White): 3D Cluster Model and Bar Chart
     with col2:
         st.markdown('#### 3D Customer Clusters')