Update app.py

app.py

@@ -17,7 +17,7 @@ st.markdown("""
     .main .block-container {
         padding-top: 2rem;
         padding-bottom: 2rem;
-        max-width: 1000px;
+        max-width: 1200px;
         margin: 0 auto;
     }
     .stApp {
@@ -25,95 +25,188 @@ st.markdown("""
     }
     .title-area {
         text-align: center;
-        margin-bottom: 2rem;
+        margin-bottom: 3rem;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 2rem;
+        border-radius: 15px;
+        color: white;
+    }
+    .title-area h1 {
+        color: white !important;
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+    }
+    .title-area p {
+        font-size: 1.2rem;
+        opacity: 0.9;
     }
     .custom-subheader {
-        background-color: #f0f2f6;
-        padding: 10px;
-        border-radius: 5px;
-        margin-bottom: 10px;
+        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+        color: white;
+        padding: 15px 20px;
+        border-radius: 10px;
+        margin-bottom: 20px;
         font-weight: 600;
+        font-size: 1.1rem;
+        text-align: center;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     .results-container {
-        border: 1px solid #ddd;
-        border-radius: 5px;
-        padding: 20px;
-        background-color: white;
+        border: 2px solid #e0e0e0;
+        border-radius: 15px;
+        padding: 25px;
+        background: white;
         margin-bottom: 20px;
+        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
     }
     .format-card {
-        border: 1px solid #e0e0e0;
-        border-radius: 8px;
-        padding: 15px;
-        margin-bottom: 15px;
-        background-color: #fafafa;
+        border: 2px solid #e8f4fd;
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 20px;
+        background: linear-gradient(135deg, #f8fbff 0%, #e8f4fd 100%);
+        transition: all 0.3s ease;
+        position: relative;
+    }
+    .format-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+        border-color: #4CAF50;
     }
     .format-title {
-        font-size: 1.2rem;
-        font-weight: 600;
+        font-size: 1.4rem;
+        font-weight: 700;
         color: #2c3e50;
-        margin-bottom: 8px;
+        margin-bottom: 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
     }
     .format-description {
         color: #5a6c7d;
-        margin-bottom: 10px;
+        margin-bottom: 15px;
+        font-size: 1.05rem;
+        line-height: 1.5;
     }
     .format-details {
-        font-size: 0.9rem;
+        font-size: 0.95rem;
         color: #7f8c8d;
+        background-color: rgba(255,255,255,0.7);
+        padding: 12px;
+        border-radius: 8px;
+        border-left: 4px solid #4CAF50;
     }
     .match-score {
-        background-color: #e8f5e8;
-        color: #2d6a2d;
-        padding: 4px 8px;
-        border-radius: 12px;
-        font-size: 0.8rem;
-        font-weight: 600;
-        float: right;
+        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+        color: white;
+        padding: 6px 12px;
+        border-radius: 20px;
+        font-size: 0.85rem;
+        font-weight: 700;
+        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
+    }
+    .roi-metrics {
+        background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
+        border: 1px solid #c3e6cb;
+        padding: 12px;
+        border-radius: 8px;
+        margin: 12px 0;
+        font-size: 0.95rem;
+        border-left: 4px solid #28a745;
     }
-    .stButton button {
-        width: 100%;
+    .consultation-cta {
+        background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
+        border: none;
+        border-radius: 15px;
+        padding: 25px;
+        margin: 25px 0;
+        text-align: center;
+        color: white;
+        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
+        border: 3px solid #fff;
     }
-    .footnote {
-        font-size: 0.8rem;
-        color: #6c757d;
-        margin-top: 2rem;
+    .consultation-cta h3 {
+        color: white !important;
+        margin-bottom: 15px;
+        font-size: 1.5rem;
+        font-weight: 700;
     }
-    .settings-section {
-        background-color: #f8f9fa;
-        padding: 15px;
-        border-radius: 5px;
+    .consultation-cta p {
+        font-size: 1.1rem;
         margin-bottom: 20px;
+        opacity: 0.95;
     }
-    .examples-section {
-        background-color: #e9f7fe;
-        padding: 15px;
-        border-radius: 5px;
-        margin-bottom: 20px;
+    .get-recommendations-btn {
+        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
+        border: none !important;
+        border-radius: 12px !important;
+        padding: 15px 30px !important;
+        font-size: 1.2rem !important;
+        font-weight: 700 !important;
+        color: white !important;
+        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
+        transform: translateY(0) !important;
+        transition: all 0.3s ease !important;
+    }
+    .get-recommendations-btn:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5) !important;
     }
     .placeholder-area {
-        border: 2px dashed #ddd;
-        border-radius: 10px;
-        padding: 40px;
+        border: 3px dashed #ddd;
+        border-radius: 15px;
+        padding: 50px;
         text-align: center;
-        background-color: #f8f9fa;
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
         color: #666;
     }
-    .consultation-cta {
-        background-color: #4CAF50;
-        border: none;
-        border-radius: 8px;
+    .placeholder-area h3 {
+        color: #495057 !important;
+        margin-bottom: 15px;
+    }
+    .section-spacer {
+        margin: 25px 0;
+    }
+    .additional-rec-card {
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
         padding: 15px;
-        margin: 20px 0;
-        text-align: center;
-        color: white;
+        margin-bottom: 15px;
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+        transition: all 0.2s ease;
     }
-    .consultation-cta h4 {
-        color: white;
-        margin-bottom: 10px;
+    .additional-rec-card:hover {
+        border-color: #4CAF50;
+        transform: translateX(5px);
     }
-    .section-spacer {
-        margin: 30px 0;
+    .additional-rec-title {
+        font-weight: 600;
+        font-size: 1.1rem;
+        color: #2c3e50;
+        margin-bottom: 8px;
+    }
+    .sample-link {
+        display: inline-block;
+        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+        color: white !important;
+        padding: 6px 12px;
+        border-radius: 6px;
+        text-decoration: none !important;
+        font-size: 0.9rem;
+        font-weight: 500;
+        margin-top: 8px;
+        transition: all 0.2s ease;
+    }
+    .sample-link:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+    }
+    .form-section {
+        background: white;
+        padding: 25px;
+        border-radius: 15px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        margin-bottom: 20px;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -121,7 +214,7 @@ st.markdown("""
 # Title and description
 st.markdown("""
 <div class="title-area">
-    <h1>Training Content Format Discovery</h1>
+    <h1>🎯 Training Content Format Discovery</h1>
     <p>Find the perfect training content format for your audience, budget, and goals. Get personalized recommendations in minutes!</p>
 </div>
 """, unsafe_allow_html=True)
@@ -286,9 +379,9 @@ def calculate_format_scores(audience_type, budget, objectives, goals, timeline,
         scalability_map = {"Low": 1, "Medium": 2, "High": 3, "Very High": 4}
         format_scalability = scalability_map.get(format_data["scalability"], 2)
         
-        if user_size >= 3 and format_scalability >= 3:  # Large teams need scalable solutions
+        if user_size >= 3 and format_scalability >= 3:
             score += 15
-        elif user_size <= 2 and format_scalability <= 2:  # Small teams can use less scalable solutions
+        elif user_size <= 2 and format_scalability <= 2:
             score += 10
         
         # Audience type matching
@@ -332,14 +425,14 @@ def calculate_format_scores(audience_type, budget, objectives, goals, timeline,
         if abs(format_interaction - user_interaction) <= 1:
             score += 10
         
-        # Goals matching
+        # Goals matching - Updated with L&D expertise priorities
         goal_matches = {
+            "Learning Impact & Retention": ["gamified_learning", "simulation_training", "microlearning_modules", "video_tutorials", "blended_learning"],
             "Cost Effectiveness": ["microlearning_modules", "pdf_guides", "webinar_series", "elearning_courses", "powerpoint_presentations"],
-            "High Engagement": ["gamified_learning", "simulation_training", "video_tutorials", "mobile_learning"],
-            "Scalability": ["elearning_courses", "mobile_learning", "webinar_series", "microlearning_modules"],
-            "Quick Deployment": ["microlearning_modules", "pdf_guides", "webinar_series", "mobile_learning", "powerpoint_presentations"],
-            "Knowledge Retention": ["gamified_learning", "simulation_training", "microlearning_modules", "video_tutorials"],
-            "Measurable Results": ["elearning_courses", "gamified_learning", "simulation_training", "blended_learning"]
+            "Scalability & Reach": ["elearning_courses", "mobile_learning", "webinar_series", "microlearning_modules", "pdf_guides"],
+            "Speed to Market": ["microlearning_modules", "pdf_guides", "webinar_series", "mobile_learning", "powerpoint_presentations"],
+            "Engagement & Motivation": ["gamified_learning", "simulation_training", "video_tutorials", "mobile_learning", "blended_learning"],
+            "Measurable Performance": ["elearning_courses", "gamified_learning", "simulation_training", "blended_learning", "microlearning_modules"]
         }
         
         for goal in goals:
@@ -354,11 +447,12 @@ def calculate_format_scores(audience_type, budget, objectives, goals, timeline,
 col1, col2 = st.columns([1, 1])
 
 with col1:
-    st.markdown('<div class="custom-subheader">Tell Us About Your Training Needs</div>', unsafe_allow_html=True)
+    st.markdown('<div class="form-section">', unsafe_allow_html=True)
+    st.markdown('<div class="custom-subheader">🎯 Tell Us About Your Training Needs</div>', unsafe_allow_html=True)
     
     # Audience Type
     audience_type = st.selectbox(
-        "Who is your target audience?",
+        "👥 Who is your target audience?",
         [
             "Corporate employees",
             "Technical professionals", 
@@ -374,7 +468,7 @@ with col1:
     
     # Budget
     budget = st.select_slider(
-        "What's your budget range?",
+        "💰 What's your budget range?",
         options=["Very Low", "Low", "Medium", "High", "Very High"],
         value="Medium",
         help="Consider development, production, and deployment costs"
@@ -382,7 +476,7 @@ with col1:
     
     # Team Size
     team_size = st.selectbox(
-        "How many learners will this reach?",
+        "📊 How many learners will this reach?",
         [
             "Small team (10-50)",
             "Medium team (51-200)", 
@@ -395,7 +489,7 @@ with col1:
     
     # Timeline
     timeline = st.selectbox(
-        "When do you need this deployed?",
+        "⏰ When do you need this deployed?",
         [
             "ASAP (1-2 weeks)",
             "1 month",
@@ -410,7 +504,7 @@ with col1:
     
     # Simplified Objectives
     objectives = st.multiselect(
-        "What type of training do you need? (Select all that apply)",
+        "📚 What type of training do you need? (Select all that apply)",
         [
             "Technical Skills",
             "Leadership & Management",
@@ -426,23 +520,23 @@ with col1:
         help="What specific areas do you need to train on?"
     )
     
-    # Simplified Goals
+    # Updated Goals - More L&D focused
     goals = st.multiselect(
-        "What's most important to you? (Select your top priorities)",
+        "🎯 What's most important to you? (Select your top priorities)",
         [
-            "Cost Effectiveness",
-            "High Engagement",
-            "Scalability",
-            "Quick Deployment",
-            "Knowledge Retention",
-            "Measurable Results"
+            "Learning Impact & Retention",
+            "Cost Effectiveness", 
+            "Scalability & Reach",
+            "Speed to Market",
+            "Engagement & Motivation",
+            "Measurable Performance"
         ],
         help="What matters most for your training success?"
     )
     
     # Interaction Level
     interaction_level = st.select_slider(
-        "How much interaction do you want?",
+        "🤝 How much interaction do you want?",
         options=["Low", "Medium", "High", "Very High"],
         value="Medium",
         help="Level of learner interaction and engagement"
@@ -450,46 +544,59 @@ with col1:
     
     # Additional Context
     additional_context = st.text_area(
-        "Any additional requirements?",
+        "📝 Any additional requirements?",
         placeholder="e.g., Must work on mobile devices, need multilingual support, integration with LMS required...",
         height=60,
         help="Tell us about any special requirements"
     )
+    st.markdown('</div>', unsafe_allow_html=True)
     
     st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
     
-    # Consultation CTA - Updated with link
+    # Enhanced Consultation CTA
     st.markdown("""
     <div class="consultation-cta">
-        <h4>Want Expert Guidance?</h4>
-        <p style="margin-bottom: 15px;">Get personalized recommendations from our learning design experts</p>
+        <h3>🚀 Want Expert Guidance?</h3>
+        <p>Get personalized recommendations from our learning design experts who have helped 500+ organizations create impactful training programs.</p>
+        <p><strong>✅ Free 30-minute consultation<br>
+        ✅ Custom training strategy<br>
+        ✅ ROI projections & timeline</strong></p>
     </div>
     """, unsafe_allow_html=True)
     
-    if st.button("Schedule Free Consultation", use_container_width=True, type="primary"):
+    if st.button("📞 Schedule Free Consultation", use_container_width=True, type="primary"):
         st.markdown('<script>window.open("https://www.motechhq.com/connect/", "_blank");</script>', unsafe_allow_html=True)
-        st.success("Opening consultation page in a new tab...")
+        st.success("🎉 Opening consultation page in a new tab...")
     
     st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
     
-    # Generate recommendations button
+    # Generate recommendations button - More prominent
     generate_button = st.button(
-        "Get My Recommendations",
+        "🎯 Get My Recommendations",
         disabled=not objectives or not goals,
-        use_container_width=True
+        use_container_width=True,
+        key="get_recommendations",
+        help="Click to get your personalized training format recommendations"
     )
     
+    # Add CSS class to the button
+    st.markdown("""
+    <script>
+    document.querySelector('[data-testid="stButton"] button').classList.add('get-recommendations-btn');
+    </script>
+    """, unsafe_allow_html=True)
+    
     if not objectives:
-        st.info("Please select at least one training type")
+        st.info("👆 Please select at least one training type")
     elif not goals:
-        st.info("Please select at least one priority")
+        st.info("👆 Please select at least one priority")
 
 # Display recommendations
 with col2:
-    st.markdown('<div class="custom-subheader">Your Personalized Recommendations</div>', unsafe_allow_html=True)
+    st.markdown('<div class="custom-subheader">🏆 Your Personalized Recommendations</div>', unsafe_allow_html=True)
     
     if generate_button and objectives and goals:
-        with st.spinner("Analyzing your requirements..."):
+        with st.spinner("🔍 Analyzing your requirements..."):
             # Simulate processing time
             time.sleep(1.5)
             
@@ -516,7 +623,7 @@ with col2:
                 }
             }
             
-            st.success("Analysis complete! Here are your recommendations:")
+            st.success("✅ Analysis complete! Here are your recommendations:")
     
     if st.session_state["recommendations"] is not None:
         recommendations = st.session_state["recommendations"]
@@ -524,102 +631,136 @@ with col2:
         st.markdown('<div class="results-container">', unsafe_allow_html=True)
         
         # Personalized headline
-        st.markdown(f'<h3 style="color: #2c3e50; margin-bottom: 20px;">Recommended for {recommendations["params"]["audience"].lower()}:</h3>', unsafe_allow_html=True)
+        st.markdown(f'<h3 style="color: #2c3e50; margin-bottom: 25px; text-align: center;">✨ Perfect Matches for {recommendations["params"]["audience"].title()}</h3>', unsafe_allow_html=True)
         
         # Show top 3 recommendations
         for i, (format_id, score) in enumerate(recommendations["formats"][:3]):
             format_data = TRAINING_FORMATS[format_id]
             
-            st.markdown(f'<div class="format-card">', unsafe_allow_html=True)
-            st.markdown(f'<div class="format-title">{format_data["name"]} <span class="match-score">{score}% Match</span></div>', unsafe_allow_html=True)
+            st.markdown('<div class="format-card">', unsafe_allow_html=True)
+            st.markdown(f'''
+            <div class="format-title">
+                {format_data["name"]} 
+                <span class="match-score">{score}% Match</span>
+            </div>
+            ''', unsafe_allow_html=True)
+            
             st.markdown(f'<div class="format-description">{format_data["description"]}</div>', unsafe_allow_html=True)
             
             # Add sample link if available
             if "sample_link" in format_data:
-                st.markdown(f'<a href="{format_data["sample_link"]}" target="_blank" style="color: #1f77b4; text-decoration: none;">View Sample</a>', unsafe_allow_html=True)
-                st.markdown("<br>", unsafe_allow_html=True)
+                st.markdown(f'<a href="{format_data["sample_link"]}" target="_blank" class="sample-link">👀 View Sample</a>', unsafe_allow_html=True)
             
             # Show ROI metrics
             if "roi_metrics" in format_data:
-                st.markdown(f'<div style="background-color: #e8f5e8; padding: 8px; border-radius: 4px; margin: 8px 0; font-size: 0.9rem;"><strong>Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="roi-metrics"><strong>📈 Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
             
             # Show key details
-            st.markdown(f"""
+            st.markdown(f'''
             <div class="format-details">
-                <strong>Best for:</strong> {', '.join(format_data['best_for'])}<br>
-                <strong>Budget:</strong> {format_data['budget']} | 
-                <strong>Production Time:</strong> {format_data['production_time']} | 
-                <strong>Engagement:</strong> {format_data['engagement']}
+                <strong>🎯 Best for:</strong> {', '.join(format_data['best_for'])}<br>
+                <strong>💰 Budget:</strong> {format_data['budget']} | 
+                <strong>⏱️ Production Time:</strong> {format_data['production_time']} | 
+                <strong>🔥 Engagement:</strong> {format_data['engagement']}
             </div>
-            """, unsafe_allow_html=True)
+            ''', unsafe_allow_html=True)
             
             # Add "Get Custom Proposal" button for top recommendation
             if i == 0:
-                st.markdown('<div style="margin-top: 15px;">', unsafe_allow_html=True)
-                if st.button(f"Get Custom Proposal", key=f"proposal_{format_id}", use_container_width=True, type="primary"):
+                st.markdown('<div style="margin-top: 20px;">', unsafe_allow_html=True)
+                if st.button(f"🚀 Get Custom Proposal for {format_data['name']}", key=f"proposal_{format_id}", use_container_width=True, type="primary"):
                     st.balloons()
-                    st.success("Excellent choice! Our learning design experts will be in touch within 24 hours.")
+                    st.success("🎉 Excellent choice! Our learning design experts will be in touch within 24 hours with a custom proposal.")
                 st.markdown('</div>', unsafe_allow_html=True)
             
             st.markdown('</div>', unsafe_allow_html=True)
         
-        # Expandable "View More Options" section
-        with st.expander("View More Options", expanded=False):
+        # Improved "View More Options" section
+        with st.expander("👀 View Additional Options", expanded=False):
             if len(recommendations["formats"]) > 3:
-                st.markdown("**Additional Recommendations:**")
+                st.markdown("**🔍 Additional Recommendations:**")
                 for i, (format_id, score) in enumerate(recommendations["formats"][3:5], 4):
                     format_data = TRAINING_FORMATS[format_id]
                     
-                    st.markdown(f'<div style="border: 1px solid #e0e0e0; border-radius: 5px; padding: 10px; margin-bottom: 10px; background-color: #f9f9f9;">', unsafe_allow_html=True)
-                    st.markdown(f'<strong>{format_data["name"]}</strong> <span style="color: #666;">({score}% Match)</span>')
-                    st.markdown(f'{format_data["description"]}')
+                    st.markdown('<div class="additional-rec-card">', unsafe_allow_html=True)
+                    st.markdown(f'<div class="additional-rec-title">{format_data["name"]} <span style="color: #28a745; font-weight: 600
+                    
+st.markdown(f'''
+                    <div class="additional-rec-title">
+                        {format_data["name"]} 
+                        <span style="color: #28a745; font-weight: 600;">({score}% Match)</span>
+                    </div>
+                    <div style="color: #666; margin-bottom: 10px; font-size: 0.95rem;">
+                        {format_data["description"]}
+                    </div>
+                    ''', unsafe_allow_html=True)
                     
-                    if "sample_link" in format_data:
-                        st.markdown(f'<a href="{format_data["sample_link"]}" target="_blank" style="color: #1f77b4; text-decoration: none; font-size: 0.9rem;">View Sample</a>', unsafe_allow_html=True)
+                    # Add sample indicator (remove external links)
+                    st.markdown(f'<div style="margin: 8px 0; padding: 6px 10px; background: rgba(0,123,255,0.1); border-radius: 5px; font-size: 0.85rem; border-left: 2px solid #007bff;"><strong>💡 Sample Available:</strong> {format_data["name"]} examples</div>', unsafe_allow_html=True)
                     
+                    # Show ROI metrics
                     if "roi_metrics" in format_data:
-                        st.markdown(f'<div style="font-size: 0.85rem; color: #666; margin-top: 5px;"><strong>Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
+                        st.markdown(f'<div style="background: #f8f9fa; padding: 8px; border-radius: 5px; margin: 8px 0; font-size: 0.9rem; border-left: 3px solid #28a745;"><strong>📈 Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
                     
                     st.markdown('</div>', unsafe_allow_html=True)
-            else:
-                st.markdown("*All relevant options are shown above.*")
         
         st.markdown('</div>', unsafe_allow_html=True)
         
-        # Action buttons
-        col_b1, col_b2 = st.columns(2)
-        
-        with col_b1:
-            # Generate report
-            report_data = {
-                "timestamp": time.strftime("%Y-%m-%d %H:%M:%S"),
-                "recommendations": recommendations
-            }
-            
-            report_json = json.dumps(report_data, indent=2)
-            
-            st.download_button(
-                label="Download Report",
-                data=report_json,
-                file_name=f"training_recommendations_{int(time.time())}.json",
-                mime="application/json",
-                use_container_width=True
-            )
-        
-        with col_b2:
-            # New analysis button
-            if st.button("New Analysis", use_container_width=True):
-                st.session_state["recommendations"] = None
-                st.rerun()
+        # Summary and next steps
+        st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
+        st.markdown("""
+        <div style="background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%); padding: 20px; border-radius: 12px; border-left: 4px solid #28a745; margin-top: 20px;">
+            <h4 style="color: #2c3e50; margin-bottom: 15px;">🎯 Next Steps</h4>
+            <p style="margin-bottom: 10px;">✅ <strong>Review your top matches above</strong></p>
+            <p style="margin-bottom: 10px;">✅ <strong>Click "View Sample" to see examples</strong></p>
+            <p style="margin-bottom: 10px;">✅ <strong>Get a custom proposal for your favorite format</strong></p>
+            <p style="margin-bottom: 0;">✅ <strong>Schedule a free consultation for expert guidance</strong></p>
+        </div>
+        """, unsafe_allow_html=True)
     
     else:
-        # Placeholder content when no recommendations yet
-        st.markdown('<div class="placeholder-area">', unsafe_allow_html=True)
-        st.markdown('<h3>Your Recommendations Will Appear Here</h3>')
-        st.markdown('<p>Complete the form and click "Get My Recommendations" to see your personalized training format suggestions.</p>')
-        st.markdown('</div>', unsafe_allow_html=True)
+        # Placeholder when no recommendations yet
+        st.markdown("""
+        <div class="placeholder-area">
+            <h3>🎯 Ready to Find Your Perfect Training Format?</h3>
+            <p style="font-size: 1.1rem; margin-bottom: 20px;">Complete the form on the left to get personalized recommendations based on your specific needs, budget, and timeline.</p>
+            <div style="display: flex; justify-content: center; gap: 20px; margin-top: 25px;">
+                <div style="text-align: center;">
+                    <div style="font-size: 2rem; margin-bottom: 8px;">🎓</div>
+                    <div style="font-weight: 600;">Expert Analysis</div>
+                </div>
+                <div style="text-align: center;">
+                    <div style="font-size: 2rem; margin-bottom: 8px;">📊</div>
+                    <div style="font-weight: 600;">ROI Insights</div>
+                </div>
+                <div style="text-align: center;">
+                    <div style="font-size: 2rem; margin-bottom: 8px;">⚡</div>
+                    <div style="font-weight: 600;">Quick Results</div>
+                </div>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
 
 # Footer
-st.markdown('<div class="footnote">', unsafe_allow_html=True)
-st.markdown('*This tool uses advanced algorithms to match your requirements with optimal training formats based on industry best practices.*')
-st.markdown('</div>', unsafe_allow_html=True) 
+st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
+st.markdown("""
+<div style="text-align: center; padding: 30px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 15px; margin-top: 30px;">
+    <h4 style="color: #2c3e50; margin-bottom: 20px;">🚀 Ready to Transform Your Training?</h4>
+    <p style="font-size: 1.1rem; color: #5a6c7d; margin-bottom: 25px;">Join 500+ organizations who've created impactful learning experiences with our expert guidance.</p>
+    <div style="display: flex; justify-content: center; gap: 40px; margin-bottom: 20px;">
+        <div style="text-align: center;">
+            <div style="font-size: 1.5rem; font-weight: 700; color: #4CAF50;">95%</div>
+            <div style="font-size: 0.9rem; color: #666;">Client Satisfaction</div>
+        </div>
+        <div style="text-align: center;">
+            <div style="font-size: 1.5rem; font-weight: 700; color: #4CAF50;">500+</div>
+            <div style="font-size: 0.9rem; color: #666;">Projects Delivered</div>
+        </div>
+        <div style="text-align: center;">
+            <div style="font-size: 1.5rem; font-weight: 700; color: #4CAF50;">50%</div>
+            <div style="font-size: 0.9rem; color: #666;">Avg. Time Savings</div>
+        </div>
+    </div>
+    <p style="font-size: 0.9rem; color: #7f8c8d; margin: 0;">© 2024 MoTech Training Solutions. Empowering organizations through innovative learning design.</p>
+</div>
+""", unsafe_allow_html=True)