Update app.py

app.py

@@ -579,7 +579,7 @@ def side():
         st.sidebar.markdown('<hr style="border: 2px solid rgb(255, 153, 0); width: 80%; margin: 20px auto;">', unsafe_allow_html=True)
                 
         with st.sidebar.expander("**Trust Buckets® and Trust Builders®**", expanded=False):
-                        st.image("s (1).png")
+                        st.image("s (1).png", use_column_width=True)
                         st.markdown(
                             "Our minds assess trust through Six Buckets of Trust® and determine their importance and order in a given situation. We then evaluate why we can or can’t trust someone in these Buckets. Trustifier.ai®, trained on 20 years of TrustLogic® application, helps you identify reasons why your audience can trust you in each Bucket and create trust-optimised solutions. It’s copy AI with substance."
                         )
@@ -686,64 +686,8 @@ def side():
                         )
                         st.markdown("For detailed descriptions, visit [Academy](https://www.trustifier.ai/account/academy)")
 
-        image_files = [
-            ("Bucket_STABILITY.png"),
-            ("Bucket_DEVELOPMENT.png"),
-            ("Bucket_RELATIONSHIP.png"),
-            ("Bucket_BENEFIT.png"),
-            ("Bucket_VISION.png"),
-            ("Bucket_COMPETENCE.png"),
-        ]
-        
-        # CSS for layout and hover effect in Streamlit
-        st.markdown(
-            """
-            <style>
-                .image-container {
-                    display: flex;
-                    justify-content: center;
-                    gap: 20px;
-                }
-                .image-wrapper {
-                    text-align: center;
-                    position: relative;
-                }
-                .image-wrapper img {
-                    width: 100px;
-                    transition: transform 0.3s;
-                }
-                .image-wrapper img:hover {
-                    transform: scale(1.1);
-                }
-                .hover-text {
-                    position: absolute;
-                    top: 110%;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    opacity: 0;
-                    transition: opacity 0.3s;
-                    font-size: 14px;
-                    font-weight: bold;
-                }
-                .image-wrapper:hover .hover-text {
-                    opacity: 1;
-                }
-            </style>
-            """,
-            unsafe_allow_html=True,
-        )
-        
-        # Create a horizontal layout using Streamlit's columns
-        cols = st.columns(len(image_files))
-        
-        # Display each image in its respective column
-        for idx, (img_path) in enumerate(image_files):
-            with cols[idx]:
-                # Open the image (assuming it's pre-resized)
-                img = Image.open(img_path)
-        
-                # Display the image with caption and hover effect using use_container_width=True
-                st.image(img,use_container_width=True)
+        st.image("s (1).png", use_column_width=True)
+
                 
         st.sidebar.markdown('<hr style="border: 2px solid rgb(255, 153, 0); width: 80%; margin: 20px auto;">', unsafe_allow_html=True)