Improve branding

This commit is contained in:
nemunaire 2025-10-20 11:05:24 +07:00
commit c9d787f469
3 changed files with 106 additions and 28 deletions

View file

@ -0,0 +1,30 @@
<script>
let { color = "#000", height = "25" } = $props();
</script>
<svg version="1.1" viewBox="0 0 97 15.5" {height} aria-labelledby="title">
<title>happyDeliver</title>
<g fill={color} stroke={color} stroke-width=".6" aria-label="happy" transform="translate(-6.161251,-4.7019423)">
<path
id="path843"
d="m 7.161251,5.7391839 h 0.2893887 v 4.2106052 q 2.5900283,-0.969452 3.9790943,-0.969452 0.774115,0 1.172024,0.3038581 0.709002,0.535369 0.709002,2.0257208 v 4.890668 h -0.289388 v -4.890668 q 0,-1.3456575 -0.593247,-1.7942099 -0.361736,-0.2749192 -1.056269,-0.2749192 -0.578777,0 -1.374596,0.1881026 -0.8826354,0.2098068 -2.5466203,0.8319925 v 5.939702 H 7.161251 Z" />
<path
id="path845"
d="m 21.174898,12.720686 h -2.778131 q -1.121382,0 -1.692924,0.24598 -0.824758,0.361736 -0.824758,1.309484 0,0.795819 0.5209,1.229902 0.49196,0.412378 1.302249,0.412378 h 0.0217 q 0.839227,0 1.823148,-0.607716 0.340032,-0.209807 0.839228,-0.578777 0.709002,-0.528134 0.788584,-0.578777 z m 2.495977,3.074754 q -0.376205,0.441318 -1.085207,0.441318 -0.672829,0 -1.0418,-0.390675 -0.36897,-0.390674 -0.36897,-1.063503 v -0.282154 q -1.367362,0.991156 -1.620577,1.143085 -0.962217,0.564308 -1.830383,0.564308 h -0.0217 q -0.933279,0 -1.504821,-0.491961 Q 15.5897,15.187724 15.5897,14.27615 q 0,-1.085208 0.90434,-1.526525 0.658359,-0.318328 1.902731,-0.318328 h 2.778131 v -1.063503 q 0,-1.005626 -0.296624,-1.352892 -0.672828,-0.7885846 -2.387456,-0.7885846 -0.78135,0 -1.396301,0.2966234 -0.745175,0.3472664 -0.940513,1.0128602 l -0.274919,-0.07958 q 0.224276,-0.7668797 1.034565,-1.1720238 0.694532,-0.3472664 1.577168,-0.3472664 1.844853,0 2.611733,0.8898701 0.354501,0.4268481 0.354501,1.5409951 v 3.414786 q 0.0072,1.164789 1.128616,1.164789 0.578777,0 0.868166,-0.340031 z" />
<path
id="path847"
d="m 25.269748,14.934509 q 0.983921,1.01286 2.799835,1.01286 h 0.0217 q 1.555464,0 2.387456,-0.897105 0.824758,-0.882635 0.824758,-2.459803 0,-1.389066 -0.614951,-2.286171 -0.709002,-1.0345643 -2.025721,-1.0345643 -1.374596,0 -3.393082,0.9549823 z m 0,-5.9324678 v 0.9043396 q 1.960608,-0.9260437 3.393082,-0.9260437 1.446943,0 2.235528,1.1141459 0.694532,0.983922 0.694532,2.495978 0,1.700158 -0.911574,2.662376 -0.926044,0.983921 -2.611733,0.983921 -1.729097,0 -2.799835,-0.911574 v 4.210605 H 24.980359 V 9.0020412 Z" />
<path
id="path849"
d="m 34.240794,14.934509 q 0.983922,1.01286 2.799836,1.01286 h 0.0217 q 1.555464,0 2.387456,-0.897105 0.824758,-0.882635 0.824758,-2.459803 0,-1.389066 -0.614951,-2.286171 -0.709002,-1.0345643 -2.02572,-1.0345643 -1.374597,0 -3.393083,0.9549823 z m 0,-5.9324678 v 0.9043396 q 1.960609,-0.9260437 3.393083,-0.9260437 1.446943,0 2.235527,1.1141459 0.694533,0.983922 0.694533,2.495978 0,1.700158 -0.911574,2.662376 -0.926044,0.983921 -2.611733,0.983921 -1.729098,0 -2.799836,-0.911574 v 4.210605 H 33.951406 V 9.0020412 Z" />
<path
id="path851"
d="m 48.999618,16.627433 q -0.188103,1.389065 -1.070738,2.155945 -0.911574,0.788584 -2.409161,0.788584 -1.114146,-0.0072 -2.032955,-0.426848 -1.063503,-0.491961 -1.475882,-1.3963 l 0.260449,-0.12299 q 0.376206,0.831992 1.374597,1.27331 0.853696,0.38344 1.873791,0.38344 1.381831,0 2.206589,-0.709002 0.803054,-0.687299 0.976687,-1.953374 0.05064,-0.325562 0.05064,-0.882635 v -0.491961 q -1.707393,0.62942 -2.655141,0.839227 -0.709003,0.151929 -1.258841,0.151929 -0.803054,0 -1.244371,-0.332797 -0.701768,-0.528134 -0.701768,-2.025721 V 9.0020412 h 0.282154 V 13.87824 q 0,1.352892 0.593247,1.79421 0.361736,0.274919 1.056269,0.274919 0.578777,0 1.38183,-0.188102 0.882636,-0.202572 2.546621,-0.824758 V 9.0020412 h 0.282154 v 6.6921128 q 0,0.600482 -0.03617,0.933279 z" />
</g>
<path
fill={color}
d="m 73.459106,60.029635 h 3.039432 q 3.073454,0 4.649876,-1.474351 1.542398,-1.428986 1.542398,-4.207571 0,-2.801267 -1.553739,-4.309642 -1.599104,-1.553739 -4.6839,-1.553739 h -2.994067 z m 2.994067,-14.029017 q 4.116842,0 6.44178,2.256891 2.313597,2.234209 2.313597,6.090204 0,3.844654 -2.336279,6.022157 -2.313597,2.143479 -6.419098,2.143479 H 70.941368 V 46.000618 Z m 20.01715,9.265729 q 0,-0.714493 -0.533035,-1.474351 -0.58974,-0.850587 -2.24555,-0.861928 -1.848609,0 -2.721879,0.88461 -0.816563,0.827905 -0.827904,1.451669 z m -6.328368,2.483714 q 0.01134,0.567059 0.929975,1.428987 0.97534,0.895952 2.857973,0.895952 2.064091,0 4.128183,-1.406304 l 1.338257,1.893974 q -2.256891,1.996044 -5.46644,1.996044 -2.948702,0 -4.649877,-1.633127 -1.689833,-1.633128 -1.689833,-4.411712 0,-2.778585 1.519716,-4.377689 1.610445,-1.689833 4.59317,-1.689833 2.994067,0.01134 4.309642,1.95068 0.998022,1.417645 0.998022,4.048795 v 1.304233 z m 18.009765,1.565081 1.11143,2.064091 q -1.62178,1.179481 -3.75392,1.179481 -1.42899,0 -2.30226,-0.827905 -0.86192,-0.850587 -0.86192,-2.211526 V 45.909888 h 2.50639 v 13.337207 q 0,0.827905 0.75986,0.827905 1.2135,0 2.54042,-0.759858 z m 3.65186,-13.087701 q 0.5784,0 0.99802,0.385599 0.45364,0.419623 0.45364,1.032046 0,0.612423 -0.45364,1.032046 -0.41962,0.385599 -0.99802,0.385599 -0.54438,0 -0.98669,-0.374258 -0.47632,-0.430964 -0.47632,-1.043387 0,-0.612423 0.47632,-1.054728 0.44231,-0.362917 0.98669,-0.362917 z m -1.25887,16.285908 V 50.491718 h 2.50639 v 12.021631 z m 10.139,-4.071477 3.59514,-7.950154 h 2.75591 L 121.591,62.513349 h -1.82593 l -5.44376,-12.021631 h 2.75591 z m 16.20652,-3.175525 q 0,-0.714493 -0.53304,-1.474351 -0.58974,-0.850587 -2.24555,-0.861928 -1.84861,0 -2.72188,0.88461 -0.81656,0.827905 -0.8279,1.451669 z m -6.32837,2.483714 q 0.0113,0.567059 0.92997,1.428987 0.97534,0.895952 2.85798,0.895952 2.06409,0 4.12818,-1.406304 l 1.33826,1.893974 q -2.2569,1.996044 -5.46644,1.996044 -2.94871,0 -4.64988,-1.633127 -1.68983,-1.633128 -1.68983,-4.411712 0,-2.778585 1.51971,-4.377689 1.61045,-1.689833 4.59317,-1.689833 2.99407,0.01134 4.30964,1.95068 0.99803,1.417645 0.99803,4.048795 v 1.304233 z m 12.15772,-7.258343 h 2.51774 v 0.986681 q 1.41764,-1.020705 3.17552,-1.020705 1.28155,0 2.5064,1.077411 l -1.53106,2.098115 q -0.72583,-0.691811 -1.33825,-0.691811 -1.16814,0 -2.81261,1.032045 v 8.539895 h -2.51774 z"
id="text1"
transform="matrix(0.635,0,0,0.635,0.56491625,-28.094869)"
aria-label="Deliver" />
</svg>

View file

@ -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,71 @@
{@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">&bull;</span>
<a
href="https://github.com/happyDomain/happyDeliver"
class="text-decoration-none"
>
<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>
<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">
<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>

View file

@ -100,11 +100,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">
@ -114,7 +114,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}
>
@ -139,7 +139,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">
@ -162,7 +162,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">