privatecoffee-website/templates/index.html
Kumi 8af699e7ba
All checks were successful
Build and Deploy Static Site / build (push) Successful in 1m0s
fix: correct image path in homepage template
Adjusted the src attribute of the logo image to remove the leading slash. This change ensures compatibility with relative URL loading, improving resource accessibility in deployed environments.
2024-07-10 09:38:30 +02:00

186 lines
6.8 KiB
HTML

{% 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">
<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 %}