diff options
Diffstat (limited to 'templates/index.html')
| -rwxr-xr-x | templates/index.html | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/templates/index.html b/templates/index.html new file mode 100755 index 0000000..2126007 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,178 @@ +{% extends "base.html" %} + +{% block content %} +<section class="section" id="home-section"> + <div> + + <div class="flex flex-col items-center justify-center py-12"> + <img src="{{ config.extra.organization.logo }}" width="220px" class="" /> + <p class="text-gray-500 leading-10 pt-4 text-xl">{{ config.extra.organization.description }}</p> + <div class="max-w-7xl mx-auto grid grid-cols-3 gap-x-24 py-12"> + <div class="flex flex-col items-start justify-center p-2"> + <img src="{{ get_url(path='images/host2.png') }}"> + <span class="text-xl text-gray-700 font-semibold mt-4">Host a Website</span> + </div> + <div class="flex flex-col items-center justify-center p-2"> + <img src="{{ get_url(path='images/store.png') }}"> + <span class="text-xl text-gray-700 font-semibold mt-4">Store Media</span> + </div> + <div class="flex flex-col items-end justify-center p-2"> + <img src="{{ get_url(path='images/backup.png') }}"> + <span class="text-xl text-gray-700 font-semibold mt-4">Backup Target</span> + </div> + </div> + </div> + + <div class="grid grid-cols-2 gap-x-12 gap-y-32 text-garage-gray font-light bg-gray-100 py-12 w-full shadow-inner"> + + <div class="flex flex-col items-center justify-center space-y-2"> + <h2 class="mb-2 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-center space-y-2"> + <h2 class="mb-2 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 items- space-y-2 justify-start py-4"> + <li class="flex 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 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 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 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-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-center space-y-2"> + <h2 class="mb-2 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"> + Blabla bla bla bla. + </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-center space-y-2"> + <h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Built on the shoulder of giants</h2> + <div class="w-8 h-1 bg-garage-orange"></div> + <p class="text-center leading-5 italic">Which means thats you have to be very tall to get it.</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: Amazon’s 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> + + {% if section.content %} + <div class="content max-w-7xl mx-auto py-12"> + {{ section.content | safe }} + </div> + {% endif %} + </div> +</section> +{% endblock %} |