Unverified Commit da962a1f authored by Georg Krause's avatar Georg Krause
Browse files

Bring more content to the main page

parent f8f38a26
Pipeline #19910 canceled with stages
in 24 seconds
......@@ -45,6 +45,10 @@
font-weight: bold;
}
.columns.features {
margin-bottom: 0;
}
.funkwhale.card {
border-radius: 8px;
text-align: center;
......@@ -65,3 +69,24 @@
width: 160px;
margin-bottom: 1.5rem;
}
#content.section {
background-color: var(--grey-100);
}
.level-item.content {
max-width: 60%;
}
.level-item.image {
max-width: 35%;
}
.level-item.image img {
border-radius: 12px;
}
#content .container .level:not(:first-child) {
padding-top: 24px;
border-top: 1px solid #cfcaca;
}
{% extends "base.html" %}
{% block content %}
{% include "inc/hero.html" %}
{% include "inc/features.html" %}
<section class="section">
<div class="container is-max-desktop">
<div class="columns">
<div class="column is-three-fifths">
<div class="section">
<p class="subtitle is-3 is-spaced">
Listen to your music, everywhere
</p>
<p class="title is-5">
Upload your personal library to your pod, share it with friends and family, and discover talented
creators.
</p>
<p>
Funkwhale gives you access to your playlists, favorite tracks, and artists everywhere, from our
web interface or the wide range of compatible apps for every platform.
</p>
<a class="button is-text mt-4 is-fullwidth">Get started!</a>
</div>
</div>
<div class="column">
<div class="block has-text-centered">
<figure class="image is-inline-block">
<img style="max-height: 440px"
src="{{ main_siteurl }}/theme/images/mobile.jpg">
</figure>
</div>
</div>
</div>
</div>
<div class="container is-max-desktop">
<div class="columns">
<div class="column">
<div class="block has-text-centered">
<figure class="image is-inline-block">
<img style="max-height: 440px"
src="{{ main_siteurl }}/theme/images/network.jpg">
</figure>
</div>
</div>
<div class="column is-three-fifths">
<div class="section">
<p class="subtitle is-3 is-spaced">
A decentralized and open platform
</p>
<p class="title is-5">
Funkwhale consists of many independent pods which can communicate together.
</p>
<p>
This is based on open standards and free and open source technology. The network is not tied to any corporation or entity, which gives you independence and choice.
</p>
<a class="button is-text mt-4 is-fullwidth">Find or start your pod</a>
</div>
</div>
</div>
</div>
</section>
{% include "inc/instances.html" %}
{% include "inc/blogposts.html" %}
{% include "inc/hero.html" %}
{% include "inc/features.html" %}
<section id="content" class="section">
<div class="container">
<div class="level">
<div class="level-item content">
<div>
<h2 class="title">Your music and podcasts, anywhere</h2>
<p>
Listen to your music and podcasts from your web browser, or a wide
range of compatible apps for every platform. Yes, this includes the
subsonic client of your choice and your favourite podcast app.
</p>
</div>
</div>
<div class="level-item image">
<img src="{{ site_url }}/theme/images/placeholder.png">
</div>
</div>
<div class="level">
<div class="level-item image">
<img src="{{ site_url }}/theme/images/placeholder.png">
</div>
<div class="level-item content">
<div>
<h2 class="title">Share your music library</h2>
<p>Share privately your playlists and albums, or whole parts of your library, with your friends and family. Promote free art by sharing it with the pod community, or with the entire federation.</p>
</div>
</div>
</div>
<div class="level">
<div class="level-item content">
<div>
<h2 class="title">Extend your horizon</h2>
<p>Explore the content shared by the community to discover new artists and podcasts. Keep tracks of your favourites in your library.</p>
</div>
</div>
<div class="level-item image">
<img src="{{ site_url }}/theme/images/placeholder.png">
</div>
</div>
<div class="level">
<div class="level-item image">
<img src="{{ site_url }}/theme/images/placeholder.png">
</div>
<div class="level-item content">
<div>
<h2 class="title">Publish your work</h2>
<p>Create as many channel as music band or podcast show you participate in, and let people get notified of your latest releases. Use our export widget to embed your content on other platforms and websites.</p>
</div>
</div>
</div>
</div>
</section>
{% include "inc/instances.html" %}
{% include "inc/blogposts.html" %}
{% endblock %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment