modified navbar

src/frontend/app.py

@@ -1,4 +1,5 @@
 from utils import common_functions
 
 common_functions.set_up_page()
-common_functions.navbar_with_title()
+common_functions.navbar_with_title()
+common_functions.set_bg_image('src/frontend/images/background.jpeg',opacity=0.1)

src/frontend/utils/common_functions.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import base64
 
 PAGE_ICON = 'src/frontend/images/jb_events_logo.jpg'
 PAGE_LAYOUT = 'wide'
@@ -12,14 +13,18 @@ def navbar_with_title():
     st.markdown(f"""
         <style>
             .navbar {{
+                position: fixed;  /* Fix the navbar at the top */
+                top: 1;
+                left: 0;
+                width: 100%;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                width: 100%;
-                padding: 1px 30px;
+                padding: 1px 50px;
                 background-color: #1F1F1F; /* Dark background */
-                border-radius: 50px;
+                border-radius: 0; /* Remove border-radius for full-width navbar */
                 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+                z-index: 1000; /* Ensure it stays above other content */
             }}
                 
             .left-section {{
@@ -61,7 +66,7 @@ def navbar_with_title():
 
         <div class="navbar">
             <div class="left-section">
-                <h1 class="title">JB Events & Management</h1>
+                <h1 class="title">JB Consultancy</h1>
             </div>
             <div class="menu">
                 <a href="#">HOME</a>
@@ -74,4 +79,46 @@ def navbar_with_title():
                 📞 +91-744-888-6668
             </div>
         </div>
-    """, unsafe_allow_html=True)
+    """, unsafe_allow_html=True)
+
+def img_to_base64(image_path):
+    """Convert image to base64."""
+    try:
+        with open(image_path, "rb") as img_file:
+            return base64.b64encode(img_file.read()).decode()
+    except Exception as e:
+        # logger.error(f"Error converting image to base64: {str(e)}")
+        return None
+    
+def set_bg_image(file_path, opacity=0.5):
+    """
+    Sets a background image for the Streamlit application with optional opacity control.
+    This function applies a background image to the entire Streamlit app (`.stApp` container) 
+    using CSS with a linear gradient overlay. The overlay enhances text readability by adding 
+    a semi-transparent dark layer over the image.
+    Args:
+        file_path (str): The file path of the background image (supports PNG, JPG, etc.).
+        opacity (float, optional): The opacity level of the dark overlay. 
+                                   Values range from 0 (fully transparent) to 1 (fully opaque). 
+                                   Default is 0.5, providing balanced readability and background visibility.
+    Example Usage:
+        ```python
+        set_bg_image("src/frontend/images/health_care_banner.png", opacity=0.6)
+        ```
+    Notes:
+    - Ensure the provided `file_path` is accessible and the image is properly encoded in base64 format.
+    - For optimal results, use high-resolution images with suitable contrast to enhance readability.
+    """
+    encoded_img = img_to_base64(file_path)
+    st.markdown(
+        f"""
+        <style>
+        .stApp {{
+            background: linear-gradient(rgba(0, 0, 0, {opacity}), rgba(0, 0, 0, {opacity})),
+                        url("data:image/png;base64,{encoded_img}") center/cover fixed no-repeat;
+            min-height: 100vh;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )