| """ |
| 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. |
| """) |
| |
| |
| 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> |
| """) |
|
|
