Update ui/ui_generators.py

ui/ui_generators.py

@@ -21,7 +21,7 @@ from config import (
 )
 
 # Configure logging for this module if not already configured at app level
-# logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(module)s - %(message)s')
+# logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(module)s - %(module)s - %(message)s')
 
 # --- Constants for Button Icons/Text ---
 # These are also defined/imported in app.py, ensure consistency
@@ -41,404 +41,521 @@ def build_home_tab_ui():
                Graphs, Reports, and OKR Table, allowing app.py to
                attach click handlers for tab navigation.
     """
+    # Custom CSS for enhanced styling
+    css_styles = """
+    <style>
+        .hero-section {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 60px 40px;
+            border-radius: 24px;
+            margin-bottom: 40px;
+            box-shadow: 0 20px 60px rgba(102, 126, 234, 0.25);
+            color: white;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .hero-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+            opacity: 0.1;
+        }
+        
+        .hero-content {
+            position: relative;
+            z-index: 1;
+        }
+        
+        .hero-title {
+            font-size: 3.2em;
+            font-weight: 800;
+            margin-bottom: 24px;
+            background: linear-gradient(45deg, #ffffff, #e0e7ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+            line-height: 1.2;
+        }
+        
+        .hero-subtitle {
+            font-size: 1.4em;
+            line-height: 1.6;
+            margin-bottom: 16px;
+            opacity: 0.95;
+            font-weight: 300;
+        }
+        
+        .hero-description {
+            font-size: 1.1em;
+            opacity: 0.85;
+            font-weight: 300;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        
+        .overview-section {
+            background: #ffffff;
+            padding: 40px;
+            border-radius: 20px;
+            margin-bottom: 40px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+            border: 1px solid rgba(0,0,0,0.05);
+        }
+        
+        .overview-header {
+            color: #1a202c;
+            margin-bottom: 24px;
+            font-size: 2.2em;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .overview-text {
+            font-size: 1.15em;
+            color: #4a5568;
+            line-height: 1.7;
+            margin-bottom: 32px;
+            font-weight: 400;
+        }
+        
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 24px;
+            margin-top: 32px;
+        }
+        
+        .feature-item {
+            display: flex;
+            align-items: center;
+            padding: 20px;
+            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+            border-radius: 16px;
+            border: 1px solid rgba(0,0,0,0.06);
+            transition: all 0.3s ease;
+        }
+        
+        .feature-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+        }
+        
+        .feature-icon {
+            font-size: 2em;
+            margin-right: 16px;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+        }
+        
+        .feature-text {
+            color: #2d3748;
+            font-weight: 500;
+            font-size: 1.05em;
+        }
+        
+        .nav-cards-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        
+        .nav-card {
+            padding: 36px;
+            border-radius: 20px;
+            min-height: 280px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            box-shadow: 0 15px 45px rgba(0,0,0,0.12);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .nav-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .nav-card:hover::before {
+            opacity: 1;
+        }
+        
+        .nav-card:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
+        }
+        
+        .nav-card-graphs {
+            background: linear-gradient(135deg, #4CAF50, #2E7D32);
+        }
+        
+        .nav-card-reports {
+            background: linear-gradient(135deg, #2196F3, #1565C0);
+        }
+        
+        .nav-card-okr {
+            background: linear-gradient(135deg, #FF9800, #E65100);
+        }
+        
+        .nav-card-help {
+            background: linear-gradient(135deg, #9C27B0, #4A148C);
+        }
+        
+        .nav-card-header {
+            color: white;
+            margin-bottom: 20px;
+            font-size: 1.5em;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .nav-card-icon {
+            font-size: 2.2em;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+        }
+        
+        .nav-card-description {
+            color: rgba(255,255,255,0.95);
+            line-height: 1.7;
+            font-size: 1.08em;
+            margin-bottom: 24px;
+            font-weight: 300;
+        }
+        
+        .nav-card-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 20px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .nav-card-features {
+            color: rgba(255,255,255,0.85);
+            font-size: 0.95em;
+            line-height: 1.6;
+        }
+        
+        .nav-card-badge {
+            background: rgba(255,255,255,0.2);
+            padding: 12px;
+            border-radius: 12px;
+            backdrop-filter: blur(10px);
+        }
+        
+        .nav-card-badge-icon {
+            font-size: 2.2em;
+        }
+        
+        .how-it-works-section {
+            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+            padding: 40px;
+            border-radius: 20px;
+            margin-top: 40px;
+            border: 1px solid rgba(0,0,0,0.06);
+        }
+        
+        .how-it-works-header {
+            color: #1a202c;
+            margin-bottom: 32px;
+            font-size: 2em;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .steps-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 32px;
+        }
+        
+        .step-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 20px;
+        }
+        
+        .step-number {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            font-weight: 700;
+            font-size: 1.2em;
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+        }
+        
+        .step-content {
+            flex: 1;
+        }
+        
+        .step-title {
+            color: #1a202c;
+            font-weight: 700;
+            font-size: 1.2em;
+            margin-bottom: 8px;
+        }
+        
+        .step-description {
+            color: #4a5568;
+            font-size: 1em;
+            line-height: 1.6;
+        }
+        
+        .button-container {
+            margin-top: 24px;
+        }
+        
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2.4em;
+            }
+            
+            .nav-cards-container {
+                grid-template-columns: 1fr;
+            }
+            
+            .nav-card {
+                min-height: 240px;
+                padding: 28px;
+            }
+            
+            .hero-section {
+                padding: 40px 24px;
+            }
+            
+            .overview-section, .how-it-works-section {
+                padding: 28px;
+            }
+        }
+    </style>
+    """
+    
     with gr.Column(scale=1, elem_classes="home-page-container"):
-        # Main header with welcome message
-        gr.Markdown("""
-            <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; margin-bottom: 30px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); color: white;">
-                <h1 style="color: white; margin-bottom: 20px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
-                    🚀 LinkedIn Employer Brand Analytics Dashboard
-                </h1>
-                <p style="font-size: 1.3em; line-height: 1.8; margin-bottom: 15px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
-                    Transform your LinkedIn presence with data-driven insights and actionable strategies
-                </p>
-                <p style="font-size: 1.1em; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
-                    Measure, analyze, and enhance your employer brand to attract top talent
-                </p>
+        # Inject custom CSS
+        gr.HTML(css_styles)
+        
+        # Main hero section
+        gr.HTML("""
+            <div class="hero-section">
+                <div class="hero-content">
+                    <h1 class="hero-title">
+                        🚀 LinkedIn Employer Brand Analytics
+                    </h1>
+                    <p class="hero-subtitle">
+                        Transform your LinkedIn presence with data-driven insights and actionable strategies
+                    </p>
+                    <p class="hero-description">
+                        Measure, analyze, and enhance your employer brand to attract top talent and build a stronger digital presence
+                    </p>
+                </div>
             </div>
         """)
 
-        # Overview section
-        gr.Markdown("""
-            <div style="background-color: #f8f9fa; padding: 25px; border-radius: 12px; margin-bottom: 25px; border-left: 5px solid #007bff;">
-                <h2 style="color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center;">
-                    <span style="margin-right: 10px;">📊</span> What This Dashboard Offers
+        # Overview section with improved spacing
+        gr.HTML("""
+            <div class="overview-section">
+                <h2 class="overview-header">
+                    <span>📊</span> What This Dashboard Offers
                 </h2>
-                <p style="font-size: 1.1em; color: #495057; line-height: 1.7; margin-bottom: 15px;">
-                    Our comprehensive analytics platform helps you understand and optimize your LinkedIn employer brand performance through:
+                <p class="overview-text">
+                    Our comprehensive analytics platform helps you understand and optimize your LinkedIn employer brand performance with real-time insights, automated reporting, and AI-powered recommendations.
                 </p>
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px;">
-                    <div style="display: flex; align-items: center; padding: 10px;">
-                        <span style="font-size: 1.5em; margin-right: 12px;">📈</span>
-                        <span style="color: #495057;">Real-time data visualization and trend analysis</span>
+                <div class="features-grid">
+                    <div class="feature-item">
+                        <span class="feature-icon">📈</span>
+                        <span class="feature-text">Real-time data visualization and trend analysis</span>
                     </div>
-                    <div style="display: flex; align-items: center; padding: 10px;">
-                        <span style="font-size: 1.5em; margin-right: 12px;">📋</span>
-                        <span style="color: #495057;">Automated quarterly and weekly performance reports</span>
+                    <div class="feature-item">
+                        <span class="feature-icon">📋</span>
+                        <span class="feature-text">Automated quarterly and weekly performance reports</span>
                     </div>
-                    <div style="display: flex; align-items: center; padding: 10px;">
-                        <span style="font-size: 1.5em; margin-right: 12px;">🎯</span>
-                        <span style="color: #495057;">AI-powered OKRs and actionable recommendations</span>
+                    <div class="feature-item">
+                        <span class="feature-icon">🎯</span>
+                        <span class="feature-text">AI-powered OKRs and actionable recommendations</span>
                     </div>
-                    <div style="display: flex; align-items: center; padding: 10px;">
-                        <span style="font-size: 1.5em; margin-right: 12px;">🚀</span>
-                        <span style="color: #495057;">Strategic insights to improve employer branding</span>
+                    <div class="feature-item">
+                        <span class="feature-icon">🚀</span>
+                        <span class="feature-text">Strategic insights to improve employer branding</span>
                     </div>
                 </div>
             </div>
         """)
 
-        # Main navigation cards
-        with gr.Row(equal_height=True):
-            with gr.Column():
-                gr.Markdown("""
-                    <div style="background: linear-gradient(135deg, #4CAF50, #45a049); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3); transition: transform 0.3s ease;">
-                        <div>
-                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
-                                <span style="font-size: 1.8em; margin-right: 12px;">📈</span> Interactive Graphs
-                            </h3>
-                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em; margin-bottom: 20px;">
-                                Explore dynamic visualizations of your LinkedIn performance metrics. Track post engagement, 
-                                follower growth, mentions sentiment, and identify trends over time with interactive charts 
-                                and filtering options.
-                            </p>
+        # Navigation cards with improved layout
+        gr.HTML("""
+            <div class="nav-cards-container">
+                <div class="nav-card nav-card-graphs">
+                    <div>
+                        <h3 class="nav-card-header">
+                            <span class="nav-card-icon">📈</span> Interactive Graphs
+                        </h3>
+                        <p class="nav-card-description">
+                            Explore dynamic visualizations of your LinkedIn performance metrics. Track post engagement, 
+                            follower growth, mentions sentiment, and identify trends over time with interactive charts 
+                            and advanced filtering options.
+                        </p>
+                    </div>
+                    <div class="nav-card-footer">
+                        <div class="nav-card-features">
+                            ✨ Real-time analytics<br/>
+                            📊 Multiple chart types<br/>
+                            🔍 Advanced filtering
                         </div>
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
-                            <div style="color: rgba(255,255,255,0.8); font-size: 0.9em;">
-                                ✨ Real-time analytics<br/>
-                                📊 Multiple chart types<br/>
-                                🔍 Advanced filtering
-                            </div>
-                            <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px;">
-                                <span style="font-size: 2em;">📊</span>
-                            </div>
+                        <div class="nav-card-badge">
+                            <span class="nav-card-badge-icon">📊</span>
                         </div>
                     </div>
-                """)
-                btn_graphs = gr.Button("🚀 Explore Graphs", variant="primary", size="lg", 
-                                        elem_classes="nav-button", scale=1)
+                </div>
                 
-            with gr.Column():
-                gr.Markdown("""
-                    <div style="background: linear-gradient(135deg, #2196F3, #1976D2); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3); transition: transform 0.3s ease;">
-                        <div>
-                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
-                                <span style="font-size: 1.8em; margin-right: 12px;">📊</span> Analysis Reports
-                            </h3>
-                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em; margin-bottom: 20px;">
-                                Access comprehensive quarterly and weekly reports powered by AI analysis. Get detailed 
-                                insights into your employer brand performance, competitor analysis, and market positioning 
-                                with automated report generation.
-                            </p>
+                <div class="nav-card nav-card-reports">
+                    <div>
+                        <h3 class="nav-card-header">
+                            <span class="nav-card-icon">📊</span> Analysis Reports
+                        </h3>
+                        <p class="nav-card-description">
+                            Access comprehensive quarterly and weekly reports powered by AI analysis. Get detailed 
+                            insights into your employer brand performance, competitor analysis, and market positioning 
+                            with automated report generation.
+                        </p>
+                    </div>
+                    <div class="nav-card-footer">
+                        <div class="nav-card-features">
+                            📋 Automated reports<br/>
+                            🤖 AI-powered insights<br/>
+                            📅 Weekly & quarterly
                         </div>
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
-                            <div style="color: rgba(255,255,255,0.8); font-size: 0.9em;">
-                                📋 Automated reports<br/>
-                                🤖 AI-powered insights<br/>
-                                📅 Weekly & quarterly
-                            </div>
-                            <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px;">
-                                <span style="font-size: 2em;">📄</span>
+                        <div class="nav-card-badge">
+                            <span class="nav-card-badge-icon">📄</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="nav-card nav-card-okr">
+                    <div>
+                        <h3 class="nav-card-header">
+                            <span class="nav-card-icon">🎯</span> OKR Action Plan
+                        </h3>
+                        <p class="nav-card-description">
+                            Discover AI-generated Objectives and Key Results (OKRs) with concrete action items. 
+                            Transform data insights into measurable goals and strategic initiatives to enhance 
+                            your employer brand effectively.
+                        </p>
+                    </div>
+                    <div class="nav-card-footer">
+                        <div class="nav-card-features">
+                            🎯 Strategic objectives<br/>
+                            ✅ Actionable tasks<br/>
+                            📈 Measurable outcomes
+                        </div>
+                        <div class="nav-card-badge">
+                            <span class="nav-card-badge-icon">🎯</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="nav-card nav-card-help">
+                    <div>
+                        <h3 class="nav-card-header">
+                            <span class="nav-card-icon">💡</span> Getting Started
+                        </h3>
+                        <p class="nav-card-description">
+                            New to employer brand analytics? Start with the Graphs section to 
+                            understand your current performance, then check Reports for detailed 
+                            analysis, and finally explore OKRs for actionable next steps.
+                        </p>
+                    </div>
+                    <div class="nav-card-footer">
+                        <div style="background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; width: 100%; text-align: center;">
+                            <div style="color: rgba(255,255,255,0.95); font-size: 1em;">
+                                <strong>💪 Pro Tip:</strong><br/>
+                                <span style="font-size: 0.9em;">Regular monitoring leads to 40% better employer brand performance</span>
                             </div>
                         </div>
                     </div>
-                """)
+                </div>
+            </div>
+        """)
+        
+        # Create buttons with better spacing
+        with gr.Row(equal_height=True):
+            with gr.Column():
+                btn_graphs = gr.Button("🚀 Explore Graphs", variant="primary", size="lg", 
+                                        elem_classes="nav-button", scale=1)
+                
+            with gr.Column():
                 btn_reports = gr.Button("📊 View Reports", variant="primary", size="lg", 
                                          elem_classes="nav-button", scale=1)
 
         with gr.Row(equal_height=True):
             with gr.Column():
-                gr.Markdown("""
-                    <div style="background: linear-gradient(135deg, #FF9800, #F57C00); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(255, 152, 0, 0.3); transition: transform 0.3s ease;">
-                        <div>
-                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
-                                <span style="font-size: 1.8em; margin-right: 12px;">🎯</span> OKR Action Plan
-                            </h3>
-                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em; margin-bottom: 20px;">
-                                Discover AI-generated Objectives and Key Results (OKRs) with concrete action items. 
-                                Transform data insights into measurable goals and strategic initiatives to enhance 
-                                your employer brand effectively.
-                            </p>
-                        </div>
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
-                            <div style="color: rgba(255,255,255,0.8); font-size: 0.9em;">
-                                🎯 Strategic objectives<br/>
-                                ✅ Actionable tasks<br/>
-                                📈 Measurable outcomes
-                            </div>
-                            <div style="background: rgba(255,255,255,0.2); padding: 8px; border-radius: 8px;">
-                                <span style="font-size: 2em;">🎯</span>
-                            </div>
-                        </div>
-                    </div>
-                """)
                 btn_okr = gr.Button("🎯 Access OKRs", variant="primary", size="lg", 
                                      elem_classes="nav-button", scale=1)
                 
-            # Quick stats or tips column
             with gr.Column():
-                gr.Markdown("""
-                    <div style="background: linear-gradient(135deg, #9C27B0, #7B1FA2); padding: 25px; border-radius: 15px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 20px rgba(156, 39, 176, 0.3);">
-                        <div>
-                            <h3 style="color: white; margin-bottom: 15px; font-size: 1.4em; display: flex; align-items: center;">
-                                <span style="font-size: 1.8em; margin-right: 12px;">💡</span> Getting Started
-                            </h3>
-                            <p style="color: rgba(255,255,255,0.95); line-height: 1.6; font-size: 1.05em;">
-                                New to employer brand analytics? Start with the <strong>Graphs</strong> section to 
-                                understand your current performance, then check <strong>Reports</strong> for detailed 
-                                analysis, and finally explore <strong>OKRs</strong> for actionable next steps.
-                            </p>
-                        </div>
-                        <div style="margin-top: 20px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 8px;">
-                            <div style="color: rgba(255,255,255,0.9); font-size: 0.95em; text-align: center;">
-                                <strong>💪 Pro Tip:</strong><br/>
-                                <span style="font-size: 0.9em;">Regular monitoring leads to 40% better employer brand performance</span>
-                            </div>
-                        </div>
-                    </div>
-                """)
-                # Optional: Add a help or documentation button
                 btn_help = gr.Button("📚 Documentation", variant="secondary", size="lg", 
                                      elem_classes="nav-button", scale=1)
 
-        # Additional information section
-        gr.Markdown("""
-            <div style="background-color: #e8f4fd; padding: 20px; border-radius: 12px; margin-top: 25px; border: 1px solid #b8daff;">
-                <h3 style="color: #004085; margin-bottom: 15px; display: flex; align-items: center;">
-                    <span style="margin-right: 10px;">ℹ️</span> How It Works
+        # How it works section with enhanced styling
+        gr.HTML("""
+            <div class="how-it-works-section">
+                <h3 class="how-it-works-header">
+                    <span>ℹ️</span> How It Works
                 </h3>
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
-                    <div style="display: flex; align-items: start;">
-                        <div style="background: #007bff; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; font-weight: bold;">1</div>
-                        <div>
-                            <strong style="color: #004085;">Data Collection</strong><br/>
-                            <span style="color: #495057; font-size: 0.95em;">Automatically syncs with your LinkedIn organization data</span>
+                <div class="steps-grid">
+                    <div class="step-item">
+                        <div class="step-number">1</div>
+                        <div class="step-content">
+                            <div class="step-title">Data Collection</div>
+                            <div class="step-description">Automatically syncs with your LinkedIn organization data and processes engagement metrics in real-time</div>
                         </div>
                     </div>
-                    <div style="display: flex; align-items: start;">
-                        <div style="background: #007bff; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; font-weight: bold;">2</div>
-                        <div>
-                            <strong style="color: #004085;">AI Analysis</strong><br/>
-                            <span style="color: #495057; font-size: 0.95em;">Advanced algorithms analyze trends and generate insights</span>
+                    <div class="step-item">
+                        <div class="step-number">2</div>
+                        <div class="step-content">
+                            <div class="step-title">AI Analysis</div>
+                            <div class="step-description">Advanced algorithms analyze trends, sentiment, and performance patterns to generate actionable insights</div>
                         </div>
                     </div>
-                    <div style="display: flex; align-items: start;">
-                        <div style="background: #007bff; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; font-weight: bold;">3</div>
-                        <div>
-                            <strong style="color: #004085;">Actionable Results</strong><br/>
-                            <span style="color: #495057; font-size: 0.95em;">Receive specific recommendations and measurable goals</span>
+                    <div class="step-item">
+                        <div class="step-number">3</div>
+                        <div class="step-content">
+                            <div class="step-title">Actionable Results</div>
+                            <div class="step-description">Receive specific recommendations, measurable goals, and strategic action plans to improve your employer brand</div>
                         </div>
                     </div>
                 </div>
             </div>
         """)
-    return btn_graphs, btn_reports, btn_okr, btn_help # Return all buttons for click handlers
-
-
-def run_mentions_tab_display(token_state):
-    """Generates HTML and a plot for the Mentions tab."""
-    logging.info("Updating Mentions Tab display.")
-    if not token_state or not token_state.get("token"):
-        logging.warning("Mentions tab: Access denied. No token.")
-        return "❌ Access denied. No token available for mentions.", None
-
-    mentions_df = token_state.get("bubble_mentions_df", pd.DataFrame())
-    if mentions_df.empty:
-        logging.info("Mentions tab: No mentions data in Bubble.")
-        return "<p style='text-align:center;'>No mentions data in Bubble. Try syncing.</p>", None
-
-    html_parts = ["<h3 style='text-align:center;'>Recent Mentions</h3>"]
-    display_columns = [col for col in [BUBBLE_MENTIONS_DATE_COLUMN_NAME, "mention_text", "sentiment_label", BUBBLE_MENTIONS_ID_COLUMN_NAME] if col in mentions_df.columns]
-
-    mentions_df_display = mentions_df.copy()
-    if BUBBLE_MENTIONS_DATE_COLUMN_NAME in mentions_df_display.columns:
-        try:
-            mentions_df_display[BUBBLE_MENTIONS_DATE_COLUMN_NAME] = pd.to_datetime(mentions_df_display[BUBBLE_MENTIONS_DATE_COLUMN_NAME], errors='coerce')
-            mentions_df_display = mentions_df_display.sort_values(by=BUBBLE_MENTIONS_DATE_COLUMN_NAME, ascending=False)
-            mentions_df_display[BUBBLE_MENTIONS_DATE_COLUMN_NAME] = mentions_df_display[BUBBLE_MENTIONS_DATE_COLUMN_NAME].dt.strftime(UI_DATE_FORMAT)
-        except Exception as e:
-            logging.error(f"Error formatting mention dates for tab display: {e}")
-            html_parts.append("<p>Error formatting mention dates.</p>")
-
-    if not display_columns or mentions_df_display[display_columns].empty:
-        html_parts.append("<p>Required columns for mentions display are missing or no data after processing.</p>")
-    else:
-        html_parts.append(mentions_df_display[display_columns].head(20).to_html(escape=False, index=False, classes="table table-sm"))
-
-    mentions_html_output = "\n".join(html_parts)
-    fig = None 
-    fig_plot_local = None 
-    if not mentions_df.empty and "sentiment_label" in mentions_df.columns:
-        try:
-            fig_plot_local, ax = plt.subplots(figsize=(6,4)) # Keep figsize for aspect ratio
-            sentiment_counts = mentions_df["sentiment_label"].value_counts()
-            sentiment_counts.plot(kind='bar', ax=ax, color=['#4CAF50', '#FFC107', '#F44336', '#9E9E9E', '#2196F3'])
-            ax.set_title("Mention Sentiment Distribution", y=1.03) 
-            ax.set_ylabel("Count")
-            plt.xticks(rotation=45, ha='right')
-            
-            plt.tight_layout() 
-            fig_plot_local.subplots_adjust(top=0.90) 
-            fig = fig_plot_local 
-            logging.info("Mentions tab: Sentiment distribution plot generated.")
-        except Exception as e:
-            logging.error(f"Error generating mentions plot: {e}", exc_info=True)
-            fig = None 
-        finally:
-            # Ensure plt.close is called on the figure object, not plt itself if it's not the same
-            if fig_plot_local and fig_plot_local is not plt: # Check if fig_plot_local is a Figure object
-                    plt.close(fig_plot_local)
-    return mentions_html_output, fig
-
-
-def run_follower_stats_tab_display(token_state):
-    """Generates HTML and plots for the Follower Stats tab."""
-    logging.info("Updating Follower Stats Tab display.")
-    if not token_state or not token_state.get("token"):
-        logging.warning("Follower stats tab: Access denied. No token.")
-        return "❌ Access denied. No token available for follower stats.", None, None, None
-
-    follower_stats_df_orig = token_state.get("bubble_follower_stats_df", pd.DataFrame())
-    if follower_stats_df_orig.empty:
-        logging.info("Follower stats tab: No follower stats data in Bubble.")
-        return "<p style='text-align:center;'>No follower stats data in Bubble. Try syncing.</p>", None, None, None
-
-    follower_stats_df = follower_stats_df_orig.copy()
-    html_parts = ["<div style='padding:10px;'><h3 style='text-align:center;'>Follower Statistics Overview</h3>"]
-
-    plot_monthly_gains = None
-    plot_seniority_dist = None
-    plot_industry_dist = None
-
-    # Monthly Gains Plot
-    fig_gains_local = None
-    try:
-        monthly_gains_df = follower_stats_df[
-            (follower_stats_df[FOLLOWER_STATS_TYPE_COLUMN] == 'follower_gains_monthly') &
-            (follower_stats_df[FOLLOWER_STATS_CATEGORY_COLUMN].notna()) &
-            (follower_stats_df[FOLLOWER_STATS_ORGANIC_COLUMN].notna()) &
-            (follower_stats_df[FOLLOWER_STATS_PAID_COLUMN].notna())
-        ].copy()
-
-        if not monthly_gains_df.empty:
-            monthly_gains_df.loc[:, FOLLOWER_STATS_CATEGORY_COLUMN_DT] = pd.to_datetime(monthly_gains_df[FOLLOWER_STATS_CATEGORY_COLUMN], errors='coerce')
-            monthly_gains_df_sorted_table = monthly_gains_df.sort_values(by=FOLLOWER_STATS_CATEGORY_COLUMN_DT, ascending=False)
-
-            html_parts.append("<h4>Monthly Follower Gains (Last 13 Months):</h4>")
-            table_display_df = monthly_gains_df_sorted_table.copy()
-            table_display_df.loc[:,FOLLOWER_STATS_CATEGORY_COLUMN] = table_display_df[FOLLOWER_STATS_CATEGORY_COLUMN_DT].dt.strftime(UI_MONTH_FORMAT)
-            html_parts.append(table_display_df[[FOLLOWER_STATS_CATEGORY_COLUMN, FOLLOWER_STATS_ORGANIC_COLUMN, FOLLOWER_STATS_PAID_COLUMN]].head(13).to_html(escape=True, index=False, classes="table table-sm"))
-
-            monthly_gains_df_sorted_plot = monthly_gains_df.sort_values(by=FOLLOWER_STATS_CATEGORY_COLUMN_DT, ascending=True).copy()
-            monthly_gains_df_sorted_plot.loc[:, '_plot_month'] = monthly_gains_df_sorted_plot[FOLLOWER_STATS_CATEGORY_COLUMN_DT].dt.strftime(UI_MONTH_FORMAT)
-            plot_data = monthly_gains_df_sorted_plot.groupby('_plot_month').agg(
-                organic=(FOLLOWER_STATS_ORGANIC_COLUMN, 'sum'),
-                paid=(FOLLOWER_STATS_PAID_COLUMN, 'sum')
-            ).reset_index()
-            plot_data['_plot_month_dt'] = pd.to_datetime(plot_data['_plot_month'], format=UI_MONTH_FORMAT) # Ensure correct month format
-            plot_data = plot_data.sort_values(by='_plot_month_dt')
-
-
-            fig_gains_local, ax_gains = plt.subplots(figsize=(10,5)) # Keep figsize for aspect ratio
-            ax_gains.plot(plot_data['_plot_month'], plot_data['organic'], marker='o', linestyle='-', label='Organic Gain')
-            ax_gains.plot(plot_data['_plot_month'], plot_data['paid'], marker='x', linestyle='--', label='Paid Gain')
-            ax_gains.set_title("Monthly Follower Gains Over Time", y=1.03) 
-            ax_gains.set_ylabel("Follower Count")
-            ax_gains.set_xlabel("Month (YYYY-MM)")
-            plt.xticks(rotation=45, ha='right')
-            ax_gains.legend()
-            plt.grid(True, linestyle='--', alpha=0.7)
-            
-            plt.tight_layout()
-            fig_gains_local.subplots_adjust(top=0.90) 
-            plot_monthly_gains = fig_gains_local
-            logging.info("Follower stats tab: Monthly gains plot generated.")
-        else:
-            html_parts.append("<p>No monthly follower gain data available or required columns missing.</p>")
-    except Exception as e:
-        logging.error(f"Error processing or plotting monthly gains: {e}", exc_info=True)
-        html_parts.append("<p>Error displaying monthly follower gain data.</p>")
-        plot_monthly_gains = None
-    finally:
-        if fig_gains_local and fig_gains_local is not plt:
-            plt.close(fig_gains_local)
-    html_parts.append("<hr/>")
-
-
-    # Seniority Plot
-    fig_seniority_local = None
-    try:
-        seniority_df = follower_stats_df[
-            (follower_stats_df[FOLLOWER_STATS_TYPE_COLUMN] == 'follower_seniority') &
-            (follower_stats_df[FOLLOWER_STATS_CATEGORY_COLUMN].notna()) &
-            (follower_stats_df[FOLLOWER_STATS_ORGANIC_COLUMN].notna())
-        ].copy()
-        if not seniority_df.empty:
-            seniority_df_sorted = seniority_df.sort_values(by=FOLLOWER_STATS_ORGANIC_COLUMN, ascending=False)
-            html_parts.append("<h4>Followers by Seniority (Top 10 Organic):</h4>")
-            html_parts.append(seniority_df_sorted[[FOLLOWER_STATS_CATEGORY_COLUMN, FOLLOWER_STATS_ORGANIC_COLUMN, FOLLOWER_STATS_PAID_COLUMN]].head(10).to_html(escape=True, index=False, classes="table table-sm"))
-
-            fig_seniority_local, ax_seniority = plt.subplots(figsize=(8,5)) # Keep figsize for aspect ratio
-            top_n_seniority = seniority_df_sorted.nlargest(10, FOLLOWER_STATS_ORGANIC_COLUMN)
-            ax_seniority.bar(top_n_seniority[FOLLOWER_STATS_CATEGORY_COLUMN], top_n_seniority[FOLLOWER_STATS_ORGANIC_COLUMN], color='skyblue')
-            ax_seniority.set_title("Follower Distribution by Seniority (Top 10 Organic)", y=1.03) 
-            ax_seniority.set_ylabel("Organic Follower Count")
-            plt.xticks(rotation=45, ha='right')
-            plt.grid(axis='y', linestyle='--', alpha=0.7)
-
-            plt.tight_layout()
-            fig_seniority_local.subplots_adjust(top=0.88) 
-            plot_seniority_dist = fig_seniority_local
-            logging.info("Follower stats tab: Seniority distribution plot generated.")
-        else:
-            html_parts.append("<p>No follower seniority data available or required columns missing.</p>")
-    except Exception as e:
-        logging.error(f"Error processing or plotting seniority data: {e}", exc_info=True)
-        html_parts.append("<p>Error displaying follower seniority data.</p>")
-        plot_seniority_dist = None
-    finally:
-        if fig_seniority_local and fig_seniority_local is not plt:
-            plt.close(fig_seniority_local)
-    html_parts.append("<hr/>")
-
-    # Industry Plot
-    fig_industry_local = None
-    try:
-        industry_df = follower_stats_df[
-            (follower_stats_df[FOLLOWER_STATS_TYPE_COLUMN] == 'follower_industry') &
-            (follower_stats_df[FOLLOWER_STATS_CATEGORY_COLUMN].notna()) &
-            (follower_stats_df[FOLLOWER_STATS_ORGANIC_COLUMN].notna())
-        ].copy()
-        if not industry_df.empty:
-            industry_df_sorted = industry_df.sort_values(by=FOLLOWER_STATS_ORGANIC_COLUMN, ascending=False)
-            html_parts.append("<h4>Followers by Industry (Top 10 Organic):</h4>")
-            html_parts.append(industry_df_sorted[[FOLLOWER_STATS_CATEGORY_COLUMN, FOLLOWER_STATS_ORGANIC_COLUMN, FOLLOWER_STATS_PAID_COLUMN]].head(10).to_html(escape=True, index=False, classes="table table-sm"))
-
-            fig_industry_local, ax_industry = plt.subplots(figsize=(8,5)) # Keep figsize for aspect ratio
-            top_n_industry = industry_df_sorted.nlargest(10, FOLLOWER_STATS_ORGANIC_COLUMN)
-            ax_industry.bar(top_n_industry[FOLLOWER_STATS_CATEGORY_COLUMN], top_n_industry[FOLLOWER_STATS_ORGANIC_COLUMN], color='lightcoral')
-            ax_industry.set_title("Follower Distribution by Industry (Top 10 Organic)", y=1.03) 
-            ax_industry.set_ylabel("Organic Follower Count")
-            plt.xticks(rotation=45, ha='right')
-            plt.grid(axis='y', linestyle='--', alpha=0.7)
-            
-            plt.tight_layout()
-            fig_industry_local.subplots_adjust(top=0.88) 
-            plot_industry_dist = fig_industry_local
-            logging.info("Follower stats tab: Industry distribution plot generated.")
-        else:
-            html_parts.append("<p>No follower industry data available or required columns missing.</p>")
-    except Exception as e:
-        logging.error(f"Error processing or plotting industry data: {e}", exc_info=True)
-        html_parts.append("<p>Error displaying follower industry data.</p>")
-        plot_industry_dist = None
-    finally:
-        if fig_industry_local and fig_industry_local is not plt:
-            plt.close(fig_industry_local)
-
-
-    html_parts.append("</div>")
-    follower_html_output = "\n".join(html_parts)
-    return follower_html_output, plot_monthly_gains, plot_seniority_dist, plot_industry_dist
+    
+    return btn_graphs, btn_reports, btn_okr, btn_help
 
 
 def create_analytics_plot_panel(plot_label_str, plot_id_str):