added background to all pages and few changes to ui-home

ui/article_recommendation.py

@@ -18,6 +18,23 @@ def icon(emoji: str):
 
 
 def main():
+    page_bg_img = '''
+        <style>
+        [data-testid="stAppViewContainer"]{
+            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
+            background-size:cover;
+        }
+        [data-testid="stHeader"]{
+            background: rgba(0,0,0,0);
+        }
+        [data-testid="stToolbar"]{
+            right: 2rem;
+        }
+       
+
+        </style>
+        '''
+    st.markdown(page_bg_img, unsafe_allow_html=True)
     icon("📖 Articles RecommendAIgent")
     st.subheader("Let AI agents recommend articles based on your interest!")
 

ui/course_lessons_extractor.py

@@ -18,6 +18,23 @@ def setup_event_loop():
         asyncio.set_event_loop(None)
 
 def main():
+    page_bg_img = '''
+        <style>
+        [data-testid="stAppViewContainer"]{
+            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
+            background-size:cover;
+        }
+        [data-testid="stHeader"]{
+            background: rgba(0,0,0,0);
+        }
+        [data-testid="stToolbar"]{
+            right: 2rem;
+        }
+       
+
+        </style>
+        '''
+    st.markdown(page_bg_img, unsafe_allow_html=True)
     st.markdown("<div class='container'>", unsafe_allow_html=True)
 
     st.markdown(

ui/research_paper.py

@@ -9,11 +9,11 @@ def main():
     st.markdown(
         """
         <style>
-        .main {
-            background-color: #f5f5f5;
-            padding: 20px;
-            border-radius: 10px;
-        }
+        # .main {
+        #     background-color: #f5f5f5;
+        #     padding: 20px;
+        #     border-radius: 10px;
+        # }
         .centered {
             display: flex;
             flex-direction: column;
@@ -68,6 +68,16 @@ def main():
         .element li b {
             font-size: 22px;
         }
+        [data-testid="stAppViewContainer"]{
+            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
+            background-size:cover;
+        }
+        [data-testid="stHeader"]{
+            background: rgba(0,0,0,0);
+        }
+        [data-testid="stToolbar"]{
+            right: 2rem;
+        }
 
         </style>
         """,

ui/til_feedback.py

@@ -7,6 +7,25 @@ from workflows.utils.feedback import Feedback
 
 load_dotenv()
 def feedback_main():
+
+    page_bg_img = '''
+        <style>
+        [data-testid="stAppViewContainer"]{
+            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
+            background-size:cover;
+        }
+        [data-testid="stHeader"]{
+            background: rgba(0,0,0,0);
+        }
+        [data-testid="stToolbar"]{
+            right: 2rem;
+        }
+       
+
+        </style>
+        '''
+
+    st.markdown(page_bg_img, unsafe_allow_html=True)
     st.markdown("<div class='container'>", unsafe_allow_html=True)
 
     st.markdown(

ui_main.py

@@ -12,6 +12,8 @@ load_dotenv()
 
 subprocess.run(["playwright", "install", "chromium"])
 
+
+
 def load_css(file_name):
     with open(file_name) as f:
         return f.read()
@@ -46,9 +48,10 @@ def show_main_page():
         [data-testid="stToolbar"]{
             right: 2rem;
         }
+       
+
         </style>
         '''
-
     st.markdown(page_bg_img, unsafe_allow_html=True)
     
     css = load_css("ui/main.css")
@@ -57,7 +60,6 @@ def show_main_page():
 
     st.markdown('<div class="main-title">Welcome to Growthy AI Workflows!</div>', unsafe_allow_html=True)
     st.markdown("---")
-    st.markdown('<div class="sub-header">Navigate to Specific Workflow:</div>', unsafe_allow_html=True)
 
     card_info = [
         {"title": "TIL Feedback", "description": "Provide your valuable feedback.", "key": "feedback","image":"https://agent.ai/icons/search.svg"},
@@ -92,6 +94,8 @@ def show_main_page():
                                         flex-wrap: wrap;
                                         align-items: center;
                                         justify-content: center;
+                                        height:1000px;
+                                        border: 1px solid #C0C0C0;
                                         
                                     }  """,
                             ):
@@ -99,15 +103,15 @@ def show_main_page():
                                         st.image(card["image"])
                                 st.markdown(
                                     f"""
-                                    <div style=" display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center">
+                                    <div style=" display: flex; flex-wrap:wrap; flex-direction: column; text-align: center; justify-content: center; align-items: center">
                                         <span style="font-weight:900; font-size: 24px;"> {card["title"]}</span>
                                         <p class="styled-description">{card["description"]}</p>
                                     </div>
                                     """, unsafe_allow_html=True
                                 )
-                                if st.button(f"Go to {card['title']}", key=card["key"]):
+                                if st.button("Explore", key=card["key"]):
                                         st.session_state.page = card["key"]
-                        st.markdown(
+                                st.markdown(
                                 """
                                 <style>
                                 [data-testid="stImage"] img {
@@ -120,7 +124,7 @@ def show_main_page():
                                 }
                                 [data-testid="column"] {
                                     text-align: center;
-                                }                         
+                                }                      
 
                                 </style>
                                 """, unsafe_allow_html=True