Update app.py

app.py

@@ -114,46 +114,7 @@ def copy_to_clipboard(text):
     """
     components.html(copy_icon_html, height=60)
 
-def create_section(title, content, example=None, dark_mode=False):
-    text_color = "#afafaf" if dark_mode else "#333333"
-    border_color = "#afafaf" if dark_mode else "#afafaf"
-   
-    example_html = f"""<p style="color: {text_color}; font-size: 12px; margin: 5px 0;">{example}</p>""" if example else ''
-    
-    section_html = f"""
-    <div style="
-        flex: 1; 
-        min-width: 180px; 
-        max-width: 220px; 
-        min-height: 150px; 
-        border: 1px solid {border_color}; 
-        border-radius: 10px; 
-        padding: 10px; 
-        background-color: transparent; 
-        margin: 5px; 
-        text-align: center; 
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
-        box-sizing: border-box;
-        font-size: 12px;
-    ">
-        <h2 style="
-            color: {text_color}; 
-            font-size: 14px; 
-            margin-bottom: 8px; 
-            border-bottom: 1px solid {border_color}; 
-            padding-bottom: 4px;
-        ">{title}</h2>
-        <p style="
-            color: {text_color}; 
-            font-size: 11px; 
-            margin: 5px 0; 
-            line-height: 1.4;
-        ">{content}</p>
-        {example_html}
-    </div>
-    """
 
-    return section_html
 def feedback_email(name, email, feedback):
     """Sends feedback via email."""
     msg = MIMEMultipart()
@@ -407,19 +368,27 @@ if not st.session_state.chat_active:
             color: inherit !important;
         }
 
-        /* Additional styles */
+        /* Center content */
+        .content {
+            text-align: center;
+            margin: 0 auto;
+        }
+
+        /* Ensure container is centered */
         .section-container {
             display: flex;
             justify-content: center;
             align-items: stretch;
             flex-wrap: wrap;
             gap: 4px;
+            margin: 0 auto; /* Center container */
+            max-width: 1200px; /* Optional: Adjust based on content width */
         }
         
         .section {
             flex: 1;
             min-width: 150px;
-            max-width: 90px;
+            max-width: 300px; /* Adjusted width */
             min-height: 150px;
             border: 1px solid #afafaf;
             border-radius: 10px;
@@ -448,7 +417,7 @@ if not st.session_state.chat_active:
             line-height: 1.4;
         }
 
-        @media (max-width: 100px) {
+        @media (max-width: 600px) {
             .section {
                 min-width: 90%;
                 max-width: 90%;
@@ -456,30 +425,30 @@ if not st.session_state.chat_active:
         }
         </style>
         
-        <h1 style="text-align: center; background: linear-gradient(45deg, #4b25ea, #bd18e6, #fb590e); -webkit-background-clip: text; color: transparent;">How can I help you today?</h1>
-
-        <div class="section-container">
-            <div class="section">
-                <h2>Find</h2>
-                <p>Discover all your great TrustBuilders®. <br> Example: Find Development Trust Builders® for World Vision 
-            </div>
-            <div class="section">
-                <h2>Create</h2>
-                <p>Generate trust-optimised solutions : <br>Example: Find World Vision development TrustBuilders®. Then use them to write a 200-word annual report article. Enthusiastic tone.</p>
-            </div>
-            <div class="section">
-                <h2>Trust-optimise</h2>
-                <p>Paste your LinkedIn profile, EDM or blog and ask TrustAI® to improve it using specific Trust Buckets® and add your specific TrustBuilders® as examples.</p>
+        <div class="content">
+            <h1 style="background: linear-gradient(45deg, #4b25ea, #bd18e6, #fb590e); -webkit-background-clip: text; color: transparent; font-size: 24px;">How can I help you today?</h1>
+
+            <div class="section-container">
+                <div class="section">
+                    <h2>Find</h2>
+                    <p>Discover all your great TrustBuilders®. <br> Example: Find Development Trust Builders® for World Vision</p>
+                </div>
+                <div class="section">
+                    <h2>Create</h2>
+                    <p>Generate trust-optimised solutions : <br>Example: Find World Vision development TrustBuilders®. Then use them to write a 200-word annual report article. Enthusiastic tone.</p>
+                </div>
+                <div class="section">
+                    <h2>Trust-optimise</h2>
+                    <p>Paste your LinkedIn profile, EDM or blog and ask TrustAI® to improve it using specific Trust Buckets® and add your specific TrustBuilders® as examples.</p>
+                </div>
             </div>
         </div>
         """, unsafe_allow_html=True)
-      
 else:
     st.empty()
 
 
 
-
 prompt = st.chat_input("")
 if prompt and not st.session_state.chat_active:
     st.session_state.chat_active = True