Spaces:
Runtime error
Runtime error
File size: 5,097 Bytes
aaef24a a3ca07d aaef24a | 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 | {% extends "base.html" %}
{% block title %}Marimo Learn - Interactive Python Notebooks{% endblock %}
{% block content %}
<header class="bg-white">
<div class="container mx-auto px-4 py-12 max-w-6xl">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Interactive Python Learning with <span class="text-primary">marimo</span></h1>
<p class="text-lg text-gray-600 mb-6">Explore our collection of interactive notebooks for Python, data science, and machine learning.</p>
<div class="flex flex-wrap gap-4">
<a href="#courses" class="btn-primary py-2 px-6">Explore Courses</a>
<a href="https://github.com/marimo-team/learn" target="_blank" class="bg-white border border-gray-300 hover:border-primary text-gray-700 font-medium py-2 px-6 rounded-md transition duration-300">View on GitHub</a>
</div>
</div>
<div class="md:w-1/2">
<div class="logo-container">
<img src="https://github.com/marimo-team/learn/blob/main/assets/marimo-learn.png?raw=true" alt="Marimo Logo" class="w-64 h-64 mx-auto object-contain">
</div>
</div>
</div>
</div>
</header>
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4 max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-12">Why Learn with <span class="text-primary">Marimo</span>?</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="feature-card">
<div class="icon-container">
{% include "icons/lightning.svg" %}
</div>
<h3 class="text-xl font-semibold mb-2">Interactive Learning</h3>
<p class="text-gray-600">Learn by doing with interactive notebooks that run directly in your browser.</p>
</div>
<div class="feature-card">
<div class="icon-container">
{% include "icons/flask.svg" %}
</div>
<h3 class="text-xl font-semibold mb-2">Practical Examples</h3>
<p class="text-gray-600">Real-world examples and applications to reinforce your understanding.</p>
</div>
<div class="feature-card">
<div class="icon-container">
{% include "icons/book.svg" %}
</div>
<h3 class="text-xl font-semibold mb-2">Comprehensive Curriculum</h3>
<p class="text-gray-600">From Python basics to advanced machine learning concepts.</p>
</div>
</div>
</div>
</section>
<section id="courses" class="py-16 bg-white">
<div class="container mx-auto px-4 max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-12">Explore Our <span class="text-primary">Courses</span></h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{% for course_id, course in courses.items() %}
{% set notebooks = course.get('notebooks', []) %}
{% if notebooks %}
<div class="content-card hover-grow">
<div class="card-accent"></div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">
<a href="{{ course_id }}/" class="hover:text-primary">
{{ course.get('title', course_id) }}
</a>
</h3>
<p class="text-gray-600 mb-4">
{% if course.get('description_html') %}
{{ course.get('description_html')|safe }}
{% endif %}
</p>
<div class="mt-4">
<ol class="space-y-1 list-decimal pl-5">
{% for notebook in notebooks %}
<li>
<a href="{{ notebook.molab_url }}" class="link-primary">
{{ notebook.title }}
</a>
</li>
{% endfor %}
</ol>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% endblock %}
|