SkillSync / components /header.py
yekkala's picture
Create header.py
7a0c765 verified
"""
Header component for SkillSync
"""
import gradio as gr
def create_header():
"""Create the application header"""
gr.Markdown("""
# ๐ŸŽ“ SkillSync: Generative AI Mastery
### A comprehensive journey from foundations to deployment
Master the complete spectrum of Generative AI - from fundamental machine learning concepts
to advanced LLM deployment strategies.
""")
# Stats cards
gr.HTML("""
<div style="display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center;">
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
<div style="font-size: 24px; font-weight: bold;">5</div>
<div style="font-size: 12px;">Modules</div>
</div>
<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
<div style="font-size: 24px; font-weight: bold;">25+</div>
<div style="font-size: 12px;">Hours</div>
</div>
<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
<div style="font-size: 24px; font-weight: bold;">5</div>
<div style="font-size: 12px;">Quizzes</div>
</div>
<div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
color: white; padding: 15px 25px; border-radius: 10px; text-align: center; min-width: 100px;">
<div style="font-size: 24px; font-weight: bold;">6</div>
<div style="font-size: 12px;">Projects</div>
</div>
</div>
""")