feat: updated website

app.py

@@ -182,31 +182,31 @@ if page == "Summary":
 
     # Left Column (Red): Metrics and Donut Charts
     with col1:
-        st.markdown('#### Main Data Information')
+        st.markdown('#### General Data Information')
         st.metric(label="Customers Analysed", value="3.000")
         st.metric(label="Unique Products Sold", value="10.702")
         st.metric(label="Total Sales Instances", value="764.396")
         
         st.markdown('#### Clustering Details')
         
-        # Display metrics in a wider row with slight horizontal spacing
+        # Display metrics in a horizontal layout
         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 style="display: flex; justify-content: space-between; gap: 10px;">
+            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
+                <h5 style="color:{primary_color}; text-align: center;">Observations</h5>
+                <h3 style="color:{text_color}; text-align: center;">696</h3>
             </div>
-            <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 style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
+                <h5 style="color:{primary_color}; text-align: center;">Silhouette Score</h5>
+                <h3 style="color:{text_color}; text-align: center;">0.57744</h3>
             </div>
-            <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 style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
+                <h5 style="color:{primary_color}; text-align: center;">Calinski-Harabasz</h5>
+                <h3 style="color:{text_color}; text-align: center;">422.98</h3>
             </div>
-            <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 style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
+                <h5 style="color:{primary_color}; text-align: center;">Davies-Bouldin</h5>
+                <h3 style="color:{text_color}; text-align: center;">0.63446</h3>
             </div>
         </div>
         """, unsafe_allow_html=True)