Spaces:
Running
Running
File size: 6,565 Bytes
7cb4836 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | {% extends "base.html" %}
{% block content %}
<div class="container py-5">
<!-- Hero Section -->
<div class="hero-section text-center mb-5">
<h1 class="display-4 fw-bold mb-3">Master Dify AI</h1>
<p class="lead mb-4">Learn to build powerful AI applications with our comprehensive, step-by-step tutorials designed for beginners</p>
<div class="hero-stats row justify-content-center">
<div class="col-md-2 col-4">
<div class="stat-item">
<h3 class="stat-number">{{ tutorials|length }}</h3>
<p class="stat-label">Tutorials</p>
</div>
</div>
<div class="col-md-2 col-4">
<div class="stat-item">
<h3 class="stat-number">{{ projects|length }}</h3>
<p class="stat-label">Projects</p>
</div>
</div>
<div class="col-md-2 col-4">
<div class="stat-item">
<h3 class="stat-number">0</h3>
<p class="stat-label">Coding Req.</p>
</div>
</div>
</div>
</div>
<!-- Learning Path -->
<section class="mb-5">
<h2 class="section-title">
<i data-feather="map" class="me-2"></i>
Learning Path
</h2>
<p class="section-subtitle">Follow our structured learning path to master Dify AI from basics to advanced topics</p>
<div class="learning-path">
{% for tutorial in tutorials %}
<div class="path-item">
<div class="path-number">{{ loop.index }}</div>
<div class="path-content">
<div class="card tutorial-card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<h5 class="card-title">{{ tutorial.title }}</h5>
<p class="card-text">{{ tutorial.description }}</p>
<div class="tutorial-meta">
<span class="badge bg-{{ tutorial.difficulty_color }}">{{ tutorial.difficulty }}</span>
<span class="text-muted ms-2">
<i data-feather="clock" class="small me-1"></i>
{{ tutorial.estimated_time }} min
</span>
</div>
</div>
<div class="tutorial-progress">
<div class="progress-circle not-started">
<i data-feather="play"></i>
</div>
</div>
</div>
<div class="mt-3">
<a href="{{ url_for('tutorial', slug=tutorial.slug) }}" class="btn btn-primary">
Start Tutorial
</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
<!-- Hands-on Projects -->
<section class="mb-5">
<h2 class="section-title">
<i data-feather="code" class="me-2"></i>
Hands-on Projects
</h2>
<p class="section-subtitle">Apply your knowledge with real-world projects</p>
<div class="row">
{% for project in projects %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card project-card h-100">
<div class="card-body">
<div class="project-icon mb-3">
<i data-feather="{{ project.icon }}"></i>
</div>
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description }}</p>
<div class="project-meta mb-3">
<span class="badge bg-{{ project.difficulty_color }}">{{ project.difficulty }}</span>
<span class="text-muted ms-2">
<i data-feather="clock" class="small me-1"></i>
{{ project.estimated_time }} min
</span>
</div>
<a href="{{ url_for('project', slug=project.slug) }}" class="btn btn-outline-primary">
Start Project
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
<!-- Features -->
<section class="features-section">
<h2 class="section-title text-center">
<i data-feather="star" class="me-2"></i>
Why Choose Our Platform?
</h2>
<div class="row mt-4">
<div class="col-md-4 mb-4">
<div class="feature-item text-center">
<div class="feature-icon">
<i data-feather="users"></i>
</div>
<h4>Beginner Friendly</h4>
<p>No coding experience required. Learn Dify AI with visual, step-by-step tutorials.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="feature-item text-center">
<div class="feature-icon">
<i data-feather="trending-up"></i>
</div>
<h4>Progress Tracking</h4>
<p>Track your learning progress and see how far you've come in your AI journey.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="feature-item text-center">
<div class="feature-icon">
<i data-feather="play-circle"></i>
</div>
<h4>Interactive Learning</h4>
<p>Learn by doing with interactive tutorials and real-world project examples.</p>
</div>
</div>
</div>
</section>
</div>
{% endblock %}
|