Improve branding
This commit is contained in:
parent
243ca4ba11
commit
a687f5cb6b
3 changed files with 136 additions and 27 deletions
|
|
@ -2,6 +2,9 @@
|
|||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import "../app.css";
|
||||
|
||||
import Logo from "$lib/components/Logo.svelte";
|
||||
|
||||
interface Props {
|
||||
children?: import("svelte").Snippet;
|
||||
}
|
||||
|
|
@ -10,13 +13,13 @@
|
|||
</script>
|
||||
|
||||
<div class="min-vh-100 d-flex flex-column">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-light shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="/">
|
||||
<i class="bi bi-envelope-check me-2"></i>
|
||||
happyDeliver
|
||||
<Logo />
|
||||
</a>
|
||||
<span class="navbar-text text-white-50 small">
|
||||
<span class="navbar-text text-primary small">
|
||||
Open-Source Email Deliverability Tester
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -26,26 +29,90 @@
|
|||
{@render children?.()}
|
||||
</main>
|
||||
|
||||
<footer class="bg-dark text-light py-4">
|
||||
<div class="container text-center">
|
||||
<p class="mb-1">
|
||||
<small class="d-flex justify-content-center gap-2">
|
||||
Open-Source Email Deliverability Testing Platform
|
||||
<span class="mx-1">•</span>
|
||||
<a
|
||||
href="https://github.com/happyDomain/happyDeliver"
|
||||
class="text-decoration-none"
|
||||
<footer class="pt-3 pb-2 bg-dark text-light">
|
||||
<div class="container mb-4">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
|
||||
<div class="col">
|
||||
<h3>
|
||||
<Logo color="white" />
|
||||
</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="/#features">Features</a></li>
|
||||
<li><a href="#">Download</a></li>
|
||||
<li>
|
||||
<a href="https://github.com/happyDomain/happydeliver/" target="_blank">
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>Our association</h3>
|
||||
<ul class="footer-links">
|
||||
<li>
|
||||
<a href="https://www.happydomain.org/en/who-we-are/" target="_blank">
|
||||
About us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.happydomain.org/en/community/" target="_blank">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.happydomain.org/en/legal-notice/" target="_blank">
|
||||
Legal notice
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<div class="col">
|
||||
<h3>Follow-us</h3>
|
||||
<div
|
||||
class="d-flex flex-wrap justify-content-between footer-links"
|
||||
style="gap: .5em; font-size: 2em"
|
||||
>
|
||||
<i class="bi bi-github"></i> GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://framagit.com/happyDomain/happyDeliver"
|
||||
class="text-decoration-none"
|
||||
>
|
||||
<i class="bi bi-gitlab"></i> GitLab
|
||||
</a>
|
||||
</small>
|
||||
</p>
|
||||
<a href="https://framagit.org/happyDomain/happydeliver" target="_blank">
|
||||
<i class="bi bi-gitlab"></i>
|
||||
</a>
|
||||
<a href="https://github.com/happyDomain/happydeliver" target="_blank">
|
||||
<i class="bi bi-github"></i>
|
||||
</a>
|
||||
<a href="https://feedback.happydomain.org/" target="_blank">
|
||||
<i class="bi bi-lightbulb-fill"></i>
|
||||
</a>
|
||||
<a href="https://floss.social/@happyDomain" target="_blank">
|
||||
<i class="bi bi-mastodon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
border-top: 3px solid #9332bb;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -101,11 +101,11 @@
|
|||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>happyDeliver - Email Deliverability Testing</title>
|
||||
<title>happyDeliver. Test Your Email Deliverability.</title>
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero py-5">
|
||||
<section class="hero py-5" id="hero">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center fade-in">
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
and more. Open-source, self-hosted, and privacy-focused.
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-light btn-lg px-5 py-3 shadow"
|
||||
class="btn btn-success btn-lg px-5 py-3 shadow"
|
||||
onclick={createTest}
|
||||
disabled={loading}
|
||||
>
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-5">
|
||||
<section class="py-5" id="features">
|
||||
<div class="container py-4">
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
</section>
|
||||
|
||||
<!-- How It Works -->
|
||||
<section class="bg-light py-5">
|
||||
<section class="bg-light py-5" id="steps">
|
||||
<div class="container py-4">
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue