privatecoffee-website/templates/index.html
Kumi 0000c4e892
feat: update primary theme color and adjust style variables
Revised the primary theme color to a more vibrant shade and adjusted related style variables for consistency across the UI. This change enhances the visual appeal and user experience by introducing a fresher, more engaging color palette. Updated variables include primary, secondary, success, info, warning, and danger colors along with their associated text, background, and border utilities to ensure coherence throughout the application's design.
2024-05-08 19:20:37 +02:00

123 lines
7.7 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?h=6ec231b999bdfb1aeb31c2e7a0099b92" 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 mx-auto" style="max-width: 900px;">
{% 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">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-chat-text text-primary">
<path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894m-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"></path>
<path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8m0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"></path>
</svg></div>
<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 %}
<a class="btn btn-primary shadow w-100 text-center" href="{{ link.url }}">{{ link.name }}</a>
{% 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 and rebel</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"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
</svg></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"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
</svg></div>
<div class="px-2">
<h6 class="fw-bold mb-0">Matrix</h6>
<p class="text-muted mb-0">#private.coffee:private.coffee</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}