Add Get started section for self-hosted and managed setup.
Replace How it works with tier cards, nav link, and managed setup pricing copy.
This commit is contained in:
+18
-29
@@ -418,57 +418,46 @@ a:hover {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.steps {
|
||||
.tiers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
counter-reset: step;
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.steps {
|
||||
.tiers {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
.tier-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.step::before {
|
||||
counter-increment: step;
|
||||
content: counter(step);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 50%;
|
||||
background: var(--brand);
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
.tier-card h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step p {
|
||||
margin: 0;
|
||||
.tier-card p {
|
||||
flex: 1;
|
||||
margin: 0 0 1.25rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tier-card p strong {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.roadmap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
+31
-19
@@ -38,6 +38,7 @@
|
||||
</a>
|
||||
<nav class="site-nav" aria-label="Main">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#get-started">Get started</a>
|
||||
<a href="#gallery">Gallery</a>
|
||||
<a href="#demo">Live demo</a>
|
||||
<a href="#source">Open source</a>
|
||||
@@ -221,32 +222,42 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<section class="section section--border" id="get-started">
|
||||
<div class="container">
|
||||
<h2 class="section__title">How it works</h2>
|
||||
<h2 class="section__title">Get started</h2>
|
||||
<p class="section__lead">
|
||||
Three steps from zero to selling with crypto.
|
||||
Launch on your own server: install from the guide, or get one-time
|
||||
help if you are not comfortable with VPS and DNS yourself.
|
||||
</p>
|
||||
<ol class="steps">
|
||||
<li class="step">
|
||||
<h3>Deploy</h3>
|
||||
<div class="tiers">
|
||||
<article class="tier-card">
|
||||
<h3>Self-hosted</h3>
|
||||
<p>
|
||||
Clone the repo, configure your server, and go live on HTTPS and
|
||||
Tor.
|
||||
Full NullCart is free and open source. Use the deployment guide
|
||||
in the repository to install on your VPS with HTTPS and Tor. You
|
||||
handle provisioning, DNS, and updates.
|
||||
</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3>Set up your shop</h3>
|
||||
<p>Add products in the CMS and upload your branding.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3>Sell</h3>
|
||||
<a
|
||||
class="btn btn--primary"
|
||||
href="https://git.nobswebdev.com/nobswebdev/nullcart"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Repository</a
|
||||
>
|
||||
</article>
|
||||
<article class="tier-card">
|
||||
<h3>Managed setup</h3>
|
||||
<p>
|
||||
Buyers pay in crypto. You fulfill orders, chat when needed, and
|
||||
get notified via SimpleX.
|
||||
We will setup everything for you if you are not comfortable with
|
||||
servers yourself.
|
||||
<strong>$25 USD</strong> paid in Monero covers our help to make
|
||||
your shop up and running. VPS and domain are paid separately.
|
||||
Optional upgrade to the latest version later:
|
||||
<strong>$25 USD</strong> in Monero if you ever need it.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<a class="btn btn--primary" href="#contact">Contact</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -625,6 +636,7 @@
|
||||
<p class="site-footer__copy">© 2026 NullCart by nobswebdev.</p>
|
||||
<nav class="site-footer__nav" aria-label="Footer">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#get-started">Get started</a>
|
||||
<a href="#gallery">Gallery</a>
|
||||
<a href="#demo">Demo</a>
|
||||
<a href="#source">Open source</a>
|
||||
|
||||
Reference in New Issue
Block a user