WIP new home page design
This commit is contained in:
parent
1a138ddb3b
commit
db5f8d7488
4 changed files with 193 additions and 1 deletions
|
|
@ -13,10 +13,14 @@
|
|||
|
||||
{{ partial "jumbo.html" . }}
|
||||
|
||||
{{ partial "carousel.html" . }}
|
||||
{{ partial "work-with.html" . }}
|
||||
|
||||
{{ partial "big-idea.html" . }}
|
||||
|
||||
{{ partial "features.html" . }}
|
||||
|
||||
{{ partial "carousel.html" . }}
|
||||
|
||||
{{ partial "discover.html" . }}
|
||||
|
||||
{{/* partial "testimonials.html" . */}}
|
||||
|
|
|
|||
72
layouts/partials/big-idea.html
Normal file
72
layouts/partials/big-idea.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<!-- ── The big idea: services not records ─────────────── -->
|
||||
<section class="section section--paper" id="idea">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow"><span class="dot"></span>The big idea</span>
|
||||
<h2 class="h2">Stop reading zone files.<br>Start managing services.</h2>
|
||||
<p class="lede">DNS records are an implementation detail. happyDomain groups them by what they actually <em>do</em> — your email, your website, your delegation — so you can edit with intent instead of decoding RFCs.</p>
|
||||
</div>
|
||||
|
||||
<div class="idea-grid">
|
||||
<div class="idea-col">
|
||||
<div class="idea-tag"><span class="num">A</span>Without happyDomain</div>
|
||||
<h3><span class="strike">happydomain.org</span> · zone file</h3>
|
||||
<pre class="zone-pre"><span class="c">; Zone: happydomain.org.</span>
|
||||
<span class="c">; TTL = 3600</span>
|
||||
|
||||
@ IN <span class="k">SOA</span> ns1 admin 2024010101 3600 900 604800 300
|
||||
@ IN <span class="k">NS</span> ns1.happydomain.org.
|
||||
@ IN <span class="k">NS</span> ns2.happydomain.org.
|
||||
@ IN <span class="k">A</span> <span class="v">93.184.216.34</span>
|
||||
@ IN <span class="k">AAAA</span> <span class="v">2606:2800:220:1:248:1893:25c8:1946</span>
|
||||
@ IN <span class="k">MX</span> 10 mail.happydomain.org.
|
||||
@ IN <span class="k">TXT</span> <span class="v">"v=spf1 include:_spf.eu ~all"</span>
|
||||
_dmarc IN <span class="k">TXT</span> <span class="v">"v=DMARC1; p=none; rua=…"</span>
|
||||
mail IN <span class="k">A</span> <span class="v">93.184.216.40</span>
|
||||
www IN <span class="k">CNAME</span> @
|
||||
@ IN <span class="k">CAA</span> <span class="v">0 issue "letsencrypt.org"</span></pre>
|
||||
</div>
|
||||
<div class="idea-col">
|
||||
<div class="idea-tag"><span class="num">B</span>With happyDomain</div>
|
||||
<h3>happydomain.org · services</h3>
|
||||
<div class="svc">
|
||||
<div class="svc-row">
|
||||
<div class="svc-l">
|
||||
<div class="svc-ico"><i class="bi bi-globe2"></i></div>
|
||||
<div><div class="svc-name">Website</div><div class="svc-desc">A, AAAA on @ · CNAME on www</div></div>
|
||||
</div>
|
||||
<div class="svc-r"><span class="svc-cnt">3</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc">
|
||||
<div class="svc-row">
|
||||
<div class="svc-l">
|
||||
<div class="svc-ico"><i class="bi bi-envelope"></i></div>
|
||||
<div><div class="svc-name">Email</div><div class="svc-desc">MX, SPF and DMARC policy</div></div>
|
||||
</div>
|
||||
<div class="svc-r"><span class="svc-cnt">3</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc">
|
||||
<div class="svc-row">
|
||||
<div class="svc-l">
|
||||
<div class="svc-ico"><i class="bi bi-diagram-3"></i></div>
|
||||
<div><div class="svc-name">Delegation</div><div class="svc-desc">2 nameservers</div></div>
|
||||
</div>
|
||||
<div class="svc-r"><span class="svc-cnt">2</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc">
|
||||
<div class="svc-row">
|
||||
<div class="svc-l">
|
||||
<div class="svc-ico"><i class="bi bi-shield-check"></i></div>
|
||||
<div><div class="svc-name">TLS / Security</div><div class="svc-desc">CAA · Let's Encrypt only</div></div>
|
||||
</div>
|
||||
<div class="svc-r"><span class="svc-cnt">1</span><span class="svc-ok"><i class="bi bi-check-circle-fill"></i> OK</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:12.5px; color: var(--fg-3); margin: 16px 0 0;">Same zone. Edit by intent, not by record type.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
18
layouts/partials/work-with.html
Normal file
18
layouts/partials/work-with.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!-- ── Trust strip ──────────────────────────────────────── -->
|
||||
<section class="trust">
|
||||
<div class="container trust-grid">
|
||||
<div class="trust-tag"><span class="dot"></span>Works with</div>
|
||||
<div class="trust-list">
|
||||
<span><i class="bi bi-globe2"></i>OVH</span>
|
||||
<span><i class="bi bi-leaf"></i>Gandi</span>
|
||||
<span><i class="bi bi-droplet"></i>DigitalOcean</span>
|
||||
<span><i class="bi bi-cloud"></i>Cloudflare</span>
|
||||
<span><i class="bi bi-server"></i>Hetzner</span>
|
||||
<span><i class="bi bi-tag"></i>Namecheap</span>
|
||||
<span><i class="bi bi-terminal"></i>BIND</span>
|
||||
<span><i class="bi bi-hdd-network"></i>Knot DNS</span>
|
||||
<span><i class="bi bi-cpu"></i>PowerDNS</span>
|
||||
</div>
|
||||
<a class="trust-more" href="https://app.happydomain.org/providers/features" target="_blank" rel="noopener">+ 46 more →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -316,6 +316,104 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
/* ── Trust strip ── */
|
||||
.trust {
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
background: var(--hd-bg-canvas);
|
||||
}
|
||||
|
||||
.trust-grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.trust-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hd-accent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trust-tag .dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--hd-accent);
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.trust-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trust-list span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--hd-fg-3);
|
||||
background: transparent;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
color 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
|
||||
.trust-list span:hover {
|
||||
border-color: var(--hd-accent);
|
||||
color: var(--hd-accent);
|
||||
background: color-mix(in srgb, var(--hd-accent) 8%, transparent);
|
||||
}
|
||||
|
||||
.trust-list span i {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.trust-more {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--hd-accent);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.trust-more:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#community > div > div {
|
||||
width: 50% !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue