added images to cards and background home page

ui/main.css

@@ -1,10 +1,4 @@
-body {
-    background-color: white;
-    color: #333;
-    font-family: 'Arial', sans-serif;
-    margin: 0;
-    padding: 0;
-}
+
 .main-title {
     font-size: 3em;
     font-weight: bold;
@@ -18,24 +12,5 @@ body {
     text-align: center;
     color: #333;
 }
-/* .card {
-    background-color: #f8f9fa;
-    border-radius: 10px;
-    padding: 20px;  
-    margin: 20px;
-    height:300px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-.card h2 {
-    font-size: 1.5em;
-    color: #007bff;
-}
-.card p {
-    color: #666;
-} */
+
 

ui/til_feedback.py

@@ -6,7 +6,7 @@ from langsmith import Client
 from workflows.utils.feedback import Feedback
 
 load_dotenv()
-def main():
+def feedback_main():
     st.markdown("<div class='container'>", unsafe_allow_html=True)
 
     st.markdown(
@@ -18,14 +18,6 @@ def main():
         """,
         unsafe_allow_html=True
     )
-    # til_content = st.text_area('Enter what you learnt today:',
-    #                            "* Quantization is the process of reducing the size of LLM models by reducing the underlying weights.\n"
-    #                            "* The weights are reduced by scaling down the datatypes from a datatype that takes larger space to a data type that takes a smaller space, this is also known as downcasting.\n"
-    #                            "* Quantization offers benefits such as reduced storage space usage and faster computation.\n"
-    #                            "* Disadvantages: Answers are less precise\n"
-    #                            "* I learnt how to use Go Routines to handle concurrency in React.\n",
-    #                            key='til_content', help='Enter what you learnt today')
-
 
     default_content = (
         "* Quantization is the process of reducing the size of LLM models by reducing the underlying weights.\n"
@@ -115,5 +107,4 @@ def clear_feedback_state(results):
             st.session_state[key] = False
 
 if __name__ == "__main__":
-    main()
-
+    feedback_main()

ui_main.py

@@ -3,19 +3,15 @@ from streamlit_extras.stylable_container import stylable_container
 from ui.article_recommendation import main as article_recommendor_main
 from ui.course_lessons_extractor import main as lessons_extractor_main
 from ui.research_paper import main as research_article_suggester_main
-from ui.til_feedback import main as feedback_main
+from ui.til_feedback import  feedback_main
 import math
 import streamlit as st
 import subprocess
 
 load_dotenv()
 
-# Running required system commands
 subprocess.run(["playwright", "install", "chromium"])
 
-
-st.set_page_config(page_title='Growthy AI Workflows', page_icon='📰', layout='wide')
-
 def load_css(file_name):
     with open(file_name) as f:
         return f.read()
@@ -37,8 +33,26 @@ def main():
         lessons_extractor_main()
 
 def show_main_page():
-
+    st.set_page_config(page_title='Growthy AI Workflows', page_icon='📰',layout="wide")
+    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)
+    
     css = load_css("ui/main.css")
+
     st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
 
     st.markdown('<div class="main-title">Welcome to Growthy AI Workflows!</div>', unsafe_allow_html=True)
@@ -46,48 +60,71 @@ def show_main_page():
     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"},
-        {"title": "Course Lesson Extractor", "description": "Extract lessons for a given course", "key": "lessons_extractor"},
-        {"title": "Article Recommender", "description": "Discover articles tailored to your interests.", "key": "article_recommendor"},
-        {"title": "Recent Article Suggester", "description": "Get suggestions for recent research articles.", "key": "research_article_suggester"},
+        {"title": "TIL Feedback", "description": "Provide your valuable feedback.", "key": "feedback","image":"https://agent.ai/icons/search.svg"},
+        {"title": "Course Lesson Extractor", "description": "Extract lessons for a given course", "key": "lessons_extractor","image":"https://agent.ai/icons/business-analyst.svg"},
+        {"title": "Article Recommender", "description": "Discover articles tailored to your interests.", "key": "article_recommendor","image":"https://agent.ai/icons/robot.svg"},
+        {"title": "Recent Article Suggester", "description": "Get suggestions for recent research articles.", "key": "research_article_suggester","image":"https://agent.ai/icons/data.svg"},
     ]
 
     num_cols = 3
     num_rows = math.ceil(len(card_info) / num_cols)
 
-
-    for row in range(num_rows):
-        cols = st.columns(num_cols)
-        for col in range(num_cols):
-            index = row * num_cols + col
-            if index < len(card_info):
-                card = card_info[index]
-                with cols[col]:
-                    with stylable_container(
-                        key="inside_container_with_border",
-                        css_styles="""
-                                {
-                                    background-color: #f8f9fa;
-                                    border-radius: 10px;
-                                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-                                    display: flex;
-                                    flex-wrap: wrap;
-                                    flex-direction: column;
-                                    justify-content: center;
-                                    align-items: center;
+    col1, col2, col3 = st.columns([2,6,2])
+
+    with col2:
+        for row in range(num_rows):
+            cols = st.columns(num_cols)
+            for col in range(num_cols):
+                index = row * num_cols + col
+                if index < len(card_info):
+                    card = card_info[index]
+                    with cols[col]:
+                        with stylable_container(
+                            key="inside_container_with_border",
+                            css_styles="""
+                                    {
+                                        background-color: #e9eaec;
+                                        border-radius: 10px;
+                                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+                                        padding:10px;
+                                        display: flex;
+                                        flex-direction: row;
+                                        flex-wrap: wrap;
+                                        align-items: center;
+                                        justify-content: center;
+                                        
+                                    }  """,
+                            ):
+                                with st.container():
+                                        st.image(card["image"])
+                                st.markdown(
+                                    f"""
+                                    <div style=" display: flex; 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"]):
+                                        st.session_state.page = card["key"]
+                        st.markdown(
+                                """
+                                <style>
+                                [data-testid="stImage"] img {
                                     padding:10px;
-                                    margin:10px;
-                                """,
-                        ):
-                            st.markdown(
-                                f'''
-                                <div class="card">
-                                    <h2>{card["title"]}</h2>
-                                    <p>{card["description"]}</p>
-                                </div>
-                                ''', unsafe_allow_html=True)
-                            if st.button(f"Go to {card['title']}", key=card["key"]):
-                                st.session_state.page = card["key"]
-
+                                    height: 100px;
+                                    width: 100px;
+                                    border-radius: 50%;
+                                    border: 2px solid white;
+
+                                }
+                                [data-testid="column"] {
+                                    text-align: center;
+                                }                         
+
+                                </style>
+                                """, unsafe_allow_html=True
+                                        )      
+                   
 if __name__ == '__main__':
     main()