From a687f5cb6b5bd6feb318a8f911253ab7b444129e Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 20 Oct 2025 11:05:24 +0700
Subject: [PATCH] Improve branding

---
 web/src/lib/components/Logo.svelte |  42 +++++++++++
 web/src/routes/+layout.svelte      | 111 +++++++++++++++++++++++------
 web/src/routes/+page.svelte        |  10 +--
 3 files changed, 136 insertions(+), 27 deletions(-)
 create mode 100644 web/src/lib/components/Logo.svelte

diff --git a/web/src/lib/components/Logo.svelte b/web/src/lib/components/Logo.svelte
new file mode 100644
index 0000000..6bba400
--- /dev/null
+++ b/web/src/lib/components/Logo.svelte
@@ -0,0 +1,42 @@
+<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>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 9ed83d4..a1983f6 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -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">&bull;</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>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index b86735c..ecfbbdd 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -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">