Update app.py

app.py

@@ -502,10 +502,8 @@ def download_link(content, filename):
 
 def side():
     with st.sidebar:
-        st.image("Trust Logic_Wheel_RGB_Standard.png")
-        st.header("Let's create something great.")
 
-        with st.sidebar.expander("Explore", expanded=False):
+        with st.sidebar.expander("TrustLogic®", expanded=False):
                 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."
                 )
@@ -540,7 +538,139 @@ def side():
                     """, unsafe_allow_html=True
                 )
                 st.markdown("For detailed descriptions, visit [Academy](https://www.trustifier.ai/account/academy)")
+                st.image("Trust Logic_Wheel_RGB_Standard.png
+                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.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."
+                        )
+                        st.markdown(
+                            """
+                            <style>
+                                .stability { color: rgb(7, 55, 99); font-size: 24px; font-weight: bold; }
+                                .development { color: rgb(241, 194, 50); font-size: 24px; font-weight: bold; }
+                                .relationship { color: rgb(204, 0, 0); font-size: 24px; font-weight: bold; }
+                                .benefit { color: rgb(56, 118, 29); font-size: 24px; font-weight: bold; }
+                                .vision { color: rgb(255, 153, 0); font-size: 24px; font-weight: bold; }
+                                .competence { color: rgb(111, 168, 220); font-size: 24px; font-weight: bold; }
+                            </style>
+                
+                            <h3 class="stability">Stability Trust:</h3>
+                            <p>Why can I trust you to have built a strong and stable foundation?</p>
+                
+                            <h3 class="development">Development Trust:</h3>
+                            <p>Why can I trust you to develop well in the future?</p>
+                
+                            <h3 class="relationship">Relationship Trust:</h3>
+                            <p>What appealing relationship qualities can I trust you for?</p>
+                
+                            <h3 class="benefit">Benefit Trust:</h3>
+                            <p>What benefits can I trust you for?</p>
+                
+                            <h3 class="vision">Vision Trust:</h3>
+                            <p>What Vision and Values can I trust you for?</p>
+                
+                            <h3 class="competence">Competence Trust:</h3>
+                            <p>What competencies can I trust you for?</p>
+                            """, unsafe_allow_html=True
+                        )
+                        st.markdown("For detailed descriptions, visit [Academy](https://www.trustifier.ai/account/academy)")
+                image_files = [
+                                ("Bucket_STABILITY.png", "Stability"),
+                                ("Bucket_DEVELOPMENT.png", "Development"),
+                                ("Bucket_RELATIONSHIP.png", "Relationship"),
+                                ("Bucket_BENEFIT.png", "Benefit"),
+                                ("Bucket_VISION.png", "Vision"),
+                                ("Bucket_COMPETENCE.png", "Competence"),]
+                st.markdown(
+                        """
+                        <style>
+                            :root {
+                                --bg-color-light: white;
+                                --bg-color-dark: black;
+                            }
+                    
+                            .image-container {
+                                display: flex;
+                                justify-content: center;
+                                align-items: flex-start;
+                                gap: 20px;
+                                margin-top: 20px;
+                            }
+                    
+                            .image-wrapper {
+                                position: relative;
+                                text-align: center;
+                            }
+                    
+                            .image-wrapper img {
+                                width: 100px;
+                                height: auto;
+                                background-color: var(--bg-color-light); /* Default light mode */
+                                padding: 10px;
+                                border-radius: 8px;
+                                transition: transform 0.3s ease, background-color 0.3s ease;
+                            }
+                    
+                            [data-theme="dark"] .image-wrapper img {
+                                background-color: var(--bg-color-dark); /* Adapt to dark mode */
+                            }
+                    
+                            .image-wrapper img:hover {
+                                transform: scale(1.1); /* Zoom effect on hover */
+                                cursor: pointer;
+                            }
+                    
+                            .hover-text {
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                transform: translate(-50%, -50%);
+                                color: rgba(0, 0, 0, 0); /* Invisible by default */
+                                font-weight: bold;
+                                font-size: 14px;
+                                transition: color 0.3s ease;
+                            }
+                    
+                            [data-theme="dark"] .hover-text {
+                                color: rgba(255, 255, 255, 0); /* Invisible in dark mode by default */
+                            }
+                    
+                            .image-wrapper:hover .hover-text {
+                                color: rgba(0, 0, 0, 1); /* Visible on hover */
+                            }
+                    
+                            [data-theme="dark"] .image-wrapper:hover .hover-text {
+                                color: rgba(255, 255, 255, 1); /* Visible in dark mode on hover */
+                            }
+                        </style>
+                        """,
+                        unsafe_allow_html=True,
+                    )
+                    
+                # Dynamically generate the HTML for images and hover text
+                image_html = '<div class="image-container">'
+                for image_path, label in image_files:
+                    image_html += f"""
+                        <div class="image-wrapper">
+                            <img src="data:image/png;base64,{open(image_path, 'rb').read().hex()}" alt="{label}">
+                            <div class="hover-text">{label}</div>
+                        </div>
+                    """
+                image_html += '</div>'
+                
+                # Render the HTML in Streamlit
+                st.markdown(image_html, unsafe_allow_html=True)
+                st.sidebar.markdown('<hr style="border: 2px solid rgb(255, 153, 0); width: 80%; margin: 20px auto;">', unsafe_allow_html=True)
+
+
+             
 
+
+
+
+        
         st.header("Upload Data source")
         
         with st.form(key="upload_form"):