privatecoffee-website/templates/index.html

187 lines
6.8 KiB
HTML
Raw Normal View History

{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content
%}
<header class="bg-primary-gradient">
<div class="container pt-4 pt-xl-5 pb-4 pb-xl-5">
<div class="row gy-5 pt-5">
<div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
<div class="text-center">
<h2>Empowering Privacy with Open Source</h2>
</div>
<p class="text-center special-header fancy-text-primary mb-0" style="font-weight: 500;">Private.coffee</p>
</div>
<div class="col-12 col-lg-10 mx-auto justify-content-center d-flex"><img class="mx-auto" src="assets/img/logo-inv_grad.svg" style="max-width: 400px;width: 80vw;"></div>
</div>
</div>
</header>
<section class="bg-white">
<div class="container bg-white py-5">
<div class="row">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<p class="fw-bold mb-2 text-primary">Our self-hosted Services</p>
<h3 class="fw-bold">
Private.coffee provides a collection of services that respect your
privacy.
</h3>
</div>
</div>
<div class="py-5 p-lg-5">
<div
class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mx-auto"
style="max-width: 1200px"
>
{% for service in services.services %} {% if not
service.exclude_from_index %}
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
{% if service.icon %}
<div
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
style="top: 1rem; right: 1rem; position: absolute"
>
{{ service.icon | icon | safe }}
</div>
{% endif %}
<h5 class="fw-bold card-title">{{ service.name }}</h5>
<p class="text-muted card-text mb-4">
{{ service.long_description }}
</p>
{% for link in service.links %} {% if link.alternatives %}
<div class="dropdown">
<div class="btn btn-primary shadow">
<a class="main-link" href="{{ link.url }}">
{{ link.name }}
</a>
<div class="dropdown-toggle-area">&#9660;</div>
</div>
<div class="dropdown-content">
{% for alternative in link.alternatives %}
<a href="{{ alternative.url }}">{{ alternative.name }}</a>
{% endfor %}
</div>
</div>
{% else %}
<a
class="btn btn-primary shadow w-100 text-center"
href="{{ link.url }}"
>{{ link.name }}</a
>
{% endif %} {% endfor %}
</div>
</div>
</div>
{% endif %} {% endfor %}
</div>
</div>
</div>
</section>
<section class="bg-primary-gradient">
<div class="container py-5">
<div class="row align-items-center">
<div class="col">
<p class="text-end special-header fancy-text-primary mb-0">Privacy</p>
</div>
<div class="col">
<p class="text-start mb-1" style="font-size: 1.6rem">
from the <strong>community</strong>
</p>
<p class="text-start mb-0" style="font-size: 1.6rem">
for the <strong>community</strong>
</p>
</div>
</div>
<div class="mx-auto" style="max-width: 900px">
<div class="row row-cols-1 row-cols-md-2 d-flex justify-content-center">
<div class="col mb-4">
<div class="card bg-primary-subtle">
<div class="card-body text-center px-4 py-5 px-md-5">
2024-06-08 11:25:05 +00:00
<p class="fw-bold text-primary card-text mb-2">Join or donate</p>
<h5 class="fw-bold card-title mb-3">
Be a part of the open source community!
</h5>
<a class="btn btn-primary btn-sm" href="/membership.html"
>Learn more</a
>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card bg-secondary-subtle">
<div class="card-body text-center px-4 py-5 px-md-5">
<p class="fw-bold text-secondary card-text mb-2">
Private Hosting
</p>
<h5 class="fw-bold card-title mb-3">
Interested in Hosting Services?
</h5>
<a
class="btn btn-secondary btn-sm"
href="mailto:support@private.coffee"
>Get in touch</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row mb-5">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<p class="fw-bold mb-2 text-primary">Contacts</p>
<h2 class="fw-bold">How you can reach us</h2>
</div>
</div>
<div class="row d-flex justify-content-center">
<div
class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start"
>
<div
class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100"
>
<div class="d-flex align-items-center p-3">
<div
class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"
>
{{ "envelope" | icon | safe }}
</div>
<div class="px-2">
<h6 class="fw-bold mb-0">Email</h6>
<p class="text-muted mb-0">support@private.coffee</p>
</div>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div
class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start"
>
<div
class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100"
>
<div class="d-flex align-items-center p-3">
<div
class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"
>
{{ "matrix-logo" | icon | safe }}
</div>
<div class="px-2">
<h6 class="fw-bold mb-0">Matrix</h6>
<p class="text-muted mb-0">
<a
href="https://matrix.pcof.fi/#/#private.coffee:private.coffee"
>#private.coffee:private.coffee</a
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}