aerogramme.deuxfleurs.fr/templates/index.html

210 lines
11 KiB
HTML
Executable file
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "base.html" %}
{% block content %}
<section class="section" id="home-section">
<div>
<div class="flex flex-col items-center justify-center py-12 px-12 xl:px-0">
<h1 class="hidden">{{config.extra.organization.name}}</h1>
<img src="{{ config.extra.organization.logo }}" width="220px" alt="{{config.extra.organization.name}}"/>
<p class="text-gray-500 leading-10 pt-4 text-xl text-center">{{ config.extra.organization.description }}</p>
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-x-32 py-12">
<div class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/host.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Host a Website</span>
</div>
<div class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/store.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Store Media</span>
</div>
<div class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/backup.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500 whitespace-nowrap">Backup Target</span>
</div>
</div>
</div>
<div class="w-full flex flex-col items-center justify-center border-b">
<div id="map-container" class="relative w-full shadow-inner border-t border-b">
<span class="hidden md:inline-block absolute top-1/2 left-1/2 transform -translate-y-1/2 text-2xl text-white font-light select-none px-2 py-1.5 rounded shadow" style="background:#999999;">
Made for redundancy
</span>
</div>
<div id="map-legend-container" class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-around lg:space-x-12 py-2 text-sm text-gray-700">
<div>
<p class="text-base text-gray-600">Each chunk of data is replicated in 3 zones</p>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/servers.svg') }}" width="48px">
<span>Zone (multiple servers)</span>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/datachunks.svg') }}" width="48px">
<span>Chunks of data</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-x-0 xl:gap-x-12 gap-y-24 text-garage-gray font-light bg-gray-100 py-12 px-4 md:px-0 w-full shadow-inner">
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Our Goals</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">We made it lightweight and kept the efficiency in mind.</p>
<ul class="list-style-none font-semibold flex flex-col items-center justify-center py-4">
<li class="py-1.5">
As self-contained as possible
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5">
Easy to set up
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5 text-center">
Highly resilient to<br>
<div class="font-normal">
<span>network failures</span>,
<span>network latency</span><br>
<span>disk failures</span>,
<span>sysadmin failures</span>
</div>
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5">
Relatively simple
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5">
Made for multi-datacenter deployments
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Keeping requirements low</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">
We worked hard to keep requirements as low as possible<br>as we target the largest possible public.
</p>
<ul class="text-center list-style-none flex flex-col space-y-2 justify-start py-4">
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/cpu.svg') }}" width="24px">
<span class="font-semibold">CPU</span>
</div>
<span class="px-2">Any x86_64 CPU from the last 10 years, ARMv7 or ARMv8</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/ram.svg') }}" width="24px">
<span class="font-semibold">RAM</span>
</div>
<span class="px-2">1 GB</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/disk.svg') }}" width="24px">
<span class="font-semibold">Disk space</span>
</div>
<span class="px-2">At least 16 GB</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/network.svg') }}" width="24px">
<span class="font-semibold">Network</span>
</div>
<span class="px-2">200 ms or less, 50 Mbps or more</span>
</li>
<li class="flex flex-col items-center md:items-start justify-center">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/hardware.svg') }}" width="24px">
<span class="font-semibold">Heterogeneous hardware</span>
</div>
<span class="px-2">Build a cluster with whatever second-hand machines are available</span>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Data resiliency for everyone</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic pb-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-normal">
Garage implements the Amazon S3 API<br>and thus is already compatible with many applications.
</p>
<ul class="grid grid-cols-3 gap-6 py-4 px-8">
<li class="flex items-center justify-start">
<a href="https://nextcloud.com/" target="_blank" title="Nextcloud">
<img class="h-20 w-20" src="{{ get_url(path='images/nextcloud-logo.svg') }}" alt="Nextcloud">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://element.io/" target="_blank" title="Matrix">
<img class="h-20 w-20" src="{{ get_url(path='images/matrix-logo.svg') }}" alt="Matrix">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://cyberduck.io/" target="_blank" title="Cyberduck">
<img class="h-20 w-20" src="{{ get_url(path='images/cyberduck-logo.png') }}" alt="Cyberduck">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://mastodon.social/" target="_blank" title="Mastodon">
<img class="h-20 w-20" src="{{ get_url(path='images/mastodon-logo.svg') }}" alt="Mastodon">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://rclone.org/" target="_blank" title="Rclone">
<img class="h-20 w-20" src="{{ get_url(path='images/rclone-logo.svg') }}" alt="Rclone">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://joinpeertube.org/" target="_blank" title="PeerTube">
<img class="h-20 w-20" src="{{ get_url(path='images/peertube-logo.svg') }}" alt="PeerTube">
</a>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-xl text-center md:text-2xl font-bold text-garage-orange leading-5">Standing on the shoulders of giants</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<ul class="text-center list-style-none flex flex-col items-center py-4">
<li>
<a href="#" class="font-semibold hover:text-garage-orange">Dynamo: Amazons Highly Available Key-value Store</a>
by DeCandia et al.
</li>
<li>
<a href="#" class="font-semibold hover:text-garage-orange">Conflict-Free Replicated Data Types</a>
by Shapiro et al.
</li>
<li>
<a href="#" class="font-semibold hover:text-garage-orange">Maglev: A Fast and Reliable Software Network Load Balancer</a>
by Eisenbud et al.
</li>
</ul>
</div>
</div>
<div class="w-full flex flex-col items-center justify-center shadow-inner"></div>
<div class="px-8 py-24 space-y-8 text-garage-gray max-w-4xl mx-auto">
<h2 class="text-2xl text-garage-orange font-semibold">Sponsors and funding</h2>
<p>
The Deuxfleurs association has received a grant from <a class="text-garage-orange underline" href="https://pointer.ngi.eu/" target="_blank">NGI POINTER</a>,
to fund 3 people working on Garage full-time for a year : from October 2021 to September 2022.
</p>
<img src="{{ get_url(path='images/ngi-pointer-eu.png') }}" class="w-2/3" alt="NGI Pointers">
<p class="italic">
This project has received funding from the European Union's Horizon 2021 research and innovation programme
within the framework of the NGI-POINTER Project funded under grant agreement N° 871528.
</p>
</div>
</div>
</div>
</section>
{% endblock %}