engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Modernize landing page: generous whitespace, subtle shadows, visual rhythm

Browse source 
Remove all <br> spacers, <center> tags, inline styles, HR dividers.
Alternating white/gray sections, pill CTAs with hover lift, 16px radius
cards with box-shadow, green "Best value" badge on annual pricing,
tinted protection lists, numbered step circles, gradient final CTA.
New landing.css isolates landing styles from shared common.css.
This commit is contained in:
russell@unturf.com 2026-03-06 07:44:44 -05:00
parent e603ad0f48
commit 5ff8cb6587
2 changed files with 699 additions and 326 deletions
Download patch file Download diff file Expand all files Collapse all files

328
index.html
View file

@ -11,12 +11,13 @@
<link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="mps.css"> <link rel="stylesheet" href="mps.css">
<link rel="stylesheet" href="landing.css">
<!-- <script defer data-domain="makepostsell.com" src="https://analytics.unturf.com/js/plausible.js"></script> --> <!-- <script defer data-domain="makepostsell.com" src="https://analytics.unturf.com/js/plausible.js"></script> -->
</head> </head>
<body style="color: #515151; background-color: #F9F9FA;"> <body>
<div class="message-ribbon"> <div class="message-ribbon">
Open source &amp; public domain &#8212; no moat, no castle, just infrastructure that outlasts its builders Open source &amp; public domain &#8212; no moat, no castle, just infrastructure that outlasts its builders
@ -28,94 +29,66 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
</style> </style>
</noscript> </noscript>
<style>
body { color: #515151; }
.bold-dark { color: #0b0b0b; font-weight: 550; }
.big-bold-dark { color: #0b0b0b; font-size: 1.4em; font-weight: 550; }
.huge-bold-dark { color: #0b0b0b; font-size: 2.7em; font-weight: 550; }
a { color: #a3c765; font-weight: 600; }
section.logo { align-self: auto; }
section.content { background-color: #F9F9FA; }
section.well-white { background-color: #FFFFFF; }
</style>
<section class="main"> <section class="main">
<section class="nav-grid"> <section class="nav-grid">
<section class="nav"> <section class="nav">
<section class="logo"> <section class="logo">
<br>
<a href="/"><img class="logo" src="/static/mps.png" /></a> <a href="/"><img class="logo" src="/static/mps.png" /></a>
</section> </section>
<section class="middle"></section> <section class="middle"></section>
<section class="log-in" style="margin: 30px;"> <section class="log-in">
<a href="https://blog.makepostsell.com/">Blog</a> &nbsp; &nbsp; | &nbsp; &nbsp; <a href="https://blog.makepostsell.com/">Blog</a>
<span class="nav-sep">|</span>
<a href="https://my.makepostsell.com/u/settings">My Account</a> <a href="https://my.makepostsell.com/u/settings">My Account</a>
</section> </section>
</section> </section>
</section> </section>
<section class="content"> <section class="content landing-content">
<!-- ======== HERO ======== --> <!-- ======== HERO ======== -->
<section class="one-column well"> <section class="landing-hero">
<div class="landing-hero-inner">
<span class="huge-bold-dark"> <h1 class="landing-hero-title">Make it. Post it. Sell it.</h1>
Make it. Post it. Sell it. <p class="landing-hero-subtitle">Your shop. Your brand. Your money. Zero commission fees.</p>
</span> <p class="landing-hero-body">
<br/><br/>
<span class="big-bold-dark">
Your shop. Your brand. Your money. Zero commission fees.
</span>
<br/><br/>
Launch a commission-free online shop in minutes. Sell digital downloads, physical products, and media to anyone, anywhere. Accept five payment methods. Keep every dollar minus only payment processing. Launch a commission-free online shop in minutes. Sell digital downloads, physical products, and media to anyone, anywhere. Accept five payment methods. Keep every dollar minus only payment processing.
</p>
<br/><br/> <div class="landing-cta-group">
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button landing-cta">+ Open a Shop</a>
<center> </div>
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button">&#65291; Open a Shop</a> <p class="landing-muted">Close anytime, no questions asked.</p>
</center> </div>
<br/>
<center style="color: #777; font-size: 14px;">Close anytime, no questions asked.</center>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== PRICING ======== --> <!-- ======== PRICING ======== -->
<section class="one-column"> <section class="landing-section landing-section-alt">
<div class="one-column">
<h2 class="landing-section-title">Simple pricing</h2>
<span class="big-bold-dark">Simple pricing</span> <div class="landing-pricing">
<div class="landing-pricing-card">
<div class="mps-comparison"> <span class="landing-pricing-icon">&#128197;</span>
<div class="mps-card" style="text-align: center; border: 2px solid #5871ad; padding: 30px;"> <span class="landing-pricing-amount">$14<span class="landing-pricing-period">/month</span></span>
<span class="mps-card-icon">&#128197;</span> <span class="landing-pricing-desc">Pay as you go. Cancel anytime.</span>
<span style="color: #0b0b0b; font-size: 2.2em; font-weight: 600; display: block;">$14<span style="font-size: 0.4em; font-weight: 400; color: #777;">/month</span></span>
<span class="mps-card-desc" style="margin-top: 10px;">Pay as you go. Cancel anytime.</span>
</div> </div>
<div class="mps-card" style="text-align: center; border: 2px solid #678731; padding: 30px;"> <div class="landing-pricing-card landing-pricing-featured">
<span class="mps-card-icon">&#127775;</span> <span class="landing-pricing-badge">Best value</span>
<span style="color: #0b0b0b; font-size: 2.2em; font-weight: 600; display: block;">$97<span style="font-size: 0.4em; font-weight: 400; color: #777;">/year</span></span> <span class="landing-pricing-icon">&#127775;</span>
<span class="mps-card-desc" style="margin-top: 10px;">Save 42%. Best value.</span> <span class="landing-pricing-amount">$97<span class="landing-pricing-period">/year</span></span>
<span class="landing-pricing-desc">Save 42%. Two months free.</span>
</div> </div>
</div> </div>
<center style="color: #777; font-size: 14px;">Zero commission fees. You keep every dollar minus only payment processing.</center> <p class="landing-muted">Zero commission fees. You keep every dollar minus only payment processing.</p>
</div>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== WHAT YOU GET ======== --> <!-- ======== WHAT YOU GET ======== -->
<section class="one-column"> <section class="landing-section">
<div class="one-column">
<span class="big-bold-dark">Everything a creator needs</span> <h2 class="landing-section-title">Everything a creator needs</h2>
<div class="mps-card-grid"> <div class="mps-card-grid">
@ -156,74 +129,65 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
</div> </div>
</div> </div>
</div>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== WHY COMMISSION-FREE ======== --> <!-- ======== WHY COMMISSION-FREE ======== -->
<section class="one-column"> <section class="landing-section landing-section-alt">
<div class="one-column">
<span class="big-bold-dark">Keep what you earn</span> <h2 class="landing-section-title">Keep what you earn</h2>
<br/><br/>
<p class="landing-body">
Marketplaces charge 15&#8211;40% commission on every sale. That adds up fast. On a $20 sale at a 30% marketplace, you walk away with $14. On Make Post Sell, you keep <b>$19.12</b> after <a href="https://stripe.com/pricing" target="_blank">payment processing</a>. Marketplaces charge 15&#8211;40% commission on every sale. That adds up fast. On a $20 sale at a 30% marketplace, you walk away with $14. On Make Post Sell, you keep <b>$19.12</b> after <a href="https://stripe.com/pricing" target="_blank">payment processing</a>.
</p>
<div class="mps-comparison"> <div class="mps-comparison">
<!-- Marketplace donut: 70% you, 3.5% processing, 26.5% marketplace --> <!-- Marketplace donut -->
<div class="mps-comparison-card marketplace" style="padding-bottom: 30px;"> <div class="mps-comparison-card marketplace">
<svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200" style="display: block; margin: 0 auto 16px;"> <svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200">
<!-- You: 70% = 252° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none" <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#678731" stroke-width="30" stroke="#678731" stroke-width="30"
stroke-dasharray="307.8 131.9" stroke-dashoffset="110" stroke-dasharray="307.8 131.9" stroke-dashoffset="110"
transform="rotate(-90 100 100)" /> transform="rotate(-90 100 100)" />
<!-- Payment Processing: 3.5% = 12.6° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none" <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#d4a843" stroke-width="30" stroke="#d4a843" stroke-width="30"
stroke-dasharray="15.4 424.3" stroke-dashoffset="-197.8" stroke-dasharray="15.4 424.3" stroke-dashoffset="-197.8"
transform="rotate(-90 100 100)" /> transform="rotate(-90 100 100)" />
<!-- Marketplace: 26.5% = 95.4° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none" <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#c77765" stroke-width="30" stroke="#c77765" stroke-width="30"
stroke-dasharray="116.5 323.2" stroke-dashoffset="-213.2" stroke-dasharray="116.5 323.2" stroke-dashoffset="-213.2"
transform="rotate(-90 100 100)" /> transform="rotate(-90 100 100)" />
<!-- Center hole -->
<circle cx="100" cy="100" r="55" fill="#f8d7da" /> <circle cx="100" cy="100" r="55" fill="#f8d7da" />
</svg> </svg>
<div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;"> <div class="donut-legend">
<span style="font-size: 12px;"><span style="color: #678731;">&#9632;</span> You 70%</span> <span><span style="color: #678731;">&#9632;</span> You 70%</span>
<span style="font-size: 12px;"><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span> <span><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span>
<span style="font-size: 12px;"><span style="color: #c77765;">&#9632;</span> Marketplace 26.5%</span> <span><span style="color: #c77765;">&#9632;</span> Marketplace 26.5%</span>
</div> </div>
<span class="mps-comparison-amount" style="color: #c77765;">$14.00</span> <span class="mps-comparison-amount" style="color: #c77765;">$14.00</span>
<span class="mps-comparison-label">Marketplace (30% commission)</span> <span class="mps-comparison-label">Marketplace (30% commission)</span>
</div> </div>
<!-- MPS donut: 96.5% you, 3.5% processing --> <!-- MPS donut -->
<div class="mps-comparison-card mps" style="padding-bottom: 30px;"> <div class="mps-comparison-card mps">
<svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200" style="display: block; margin: 0 auto 16px;"> <svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200">
<!-- You: 96.5% = 347.4° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none" <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#678731" stroke-width="30" stroke="#678731" stroke-width="30"
stroke-dasharray="424.3 15.4" stroke-dashoffset="110" stroke-dasharray="424.3 15.4" stroke-dashoffset="110"
transform="rotate(-90 100 100)" /> transform="rotate(-90 100 100)" />
<!-- Payment Processing: 3.5% = 12.6° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none" <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#d4a843" stroke-width="30" stroke="#d4a843" stroke-width="30"
stroke-dasharray="15.4 424.3" stroke-dashoffset="-314.3" stroke-dasharray="15.4 424.3" stroke-dashoffset="-314.3"
transform="rotate(-90 100 100)" /> transform="rotate(-90 100 100)" />
<!-- Center hole -->
<circle cx="100" cy="100" r="55" fill="#e8f5d4" /> <circle cx="100" cy="100" r="55" fill="#e8f5d4" />
</svg> </svg>
<div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;"> <div class="donut-legend">
<span style="font-size: 12px;"><span style="color: #678731;">&#9632;</span> You 96.5%</span> <span><span style="color: #678731;">&#9632;</span> You 96.5%</span>
<span style="font-size: 12px;"><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span> <span><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span>
</div> </div>
<span class="mps-comparison-amount" style="color: #678731;">$19.12</span> <span class="mps-comparison-amount" style="color: #678731;">$19.12</span>
@ -232,8 +196,10 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
</div> </div>
<p class="landing-body">
That gap compounds. Run <a target="_blank" href="https://docs.google.com/spreadsheets/d/138fW3wlNowTv09nKeIe_TZrWsLIHVoD7PdlI2HXGmLs/copy?usp=sharing">your own numbers</a> to see how much commission-free saves over a year. That gap compounds. Run <a target="_blank" href="https://docs.google.com/spreadsheets/d/138fW3wlNowTv09nKeIe_TZrWsLIHVoD7PdlI2HXGmLs/copy?usp=sharing">your own numbers</a> to see how much commission-free saves over a year.
</p>
</div>
</section> </section>
<script> <script>
@ -242,7 +208,6 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
var animated = false; var animated = false;
var segments = document.querySelectorAll('.donut-animate'); var segments = document.querySelectorAll('.donut-animate');
// Set initial state: all segments start with no visible stroke
segments.forEach(function(seg) { segments.forEach(function(seg) {
seg.style.opacity = '0'; seg.style.opacity = '0';
seg.style.transition = 'stroke-dasharray 1.2s ease-out, opacity 0.4s ease'; seg.style.transition = 'stroke-dasharray 1.2s ease-out, opacity 0.4s ease';
@ -267,113 +232,90 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
} }
window.addEventListener('scroll', animateDonuts); window.addEventListener('scroll', animateDonuts);
// Also check on load in case already visible
animateDonuts(); animateDonuts();
})(); })();
</script> </script>
<hr class="mps-section-divider"/>
<!-- ======== PROTECTION ======== --> <!-- ======== PROTECTION ======== -->
<section class="one-column"> <section class="landing-section">
<div class="one-column">
<h2 class="landing-section-title">Own your platform, skip their rules</h2>
<span class="big-bold-dark">Own your platform, skip their rules</span> <div class="landing-two-lists">
<div class="landing-list-card landing-list-bad">
<br/><br/> <ul>
<li><span class="landing-x">&#x274C;</span> Sales commissions and platform fees</li>
<section class="one-column well"> <li><span class="landing-x">&#x274C;</span> Censorship and de-platforming</li>
<ul style="list-style-type: none;"> <li><span class="landing-x">&#x274C;</span> Bad algorithms burying your work</li>
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Sales commissions and platform fees</li> <li><span class="landing-x">&#x274C;</span> Competitor products next to yours</li>
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Censorship and de-platforming</li> <li><span class="landing-x">&#x274C;</span> Frivolous DMCA takedowns</li>
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Bad algorithms burying your work</li>
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Competitor products next to yours</li>
<li style="margin-bottom: 10px;"><b style="color: #c77765">&#x274C;</b> &nbsp; Frivolous DMCA takedowns</li>
</ul> </ul>
</section> </div>
<br/> <div class="landing-list-card landing-list-good">
<ul>
<section class="one-column well"> <li><span class="landing-check">&#x2714;</span> <b>Always open</b> <span class="landing-list-detail">&#8212; Sell online 24/7</span></li>
<ul style="list-style-type: none;"> <li><span class="landing-check">&#x2714;</span> <b>Risk free</b> <span class="landing-list-detail">&#8212; Make nothing, pay nothing</span></li>
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Always open</b> <li><span class="landing-check">&#x2714;</span> <b>Commission free</b> <span class="landing-list-detail">&#8212; Your products, your sales, your money</span></li>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">Sell online <b>24/7</b></span></span> <li><span class="landing-check">&#x2714;</span> <b>Walk away anytime</b> <span class="landing-list-detail">&#8212; Close shop, no questions asked</span></li>
</li>
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Risk free</b>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">Make nothing, pay nothing</span></span>
</li>
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Commission free</b>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">Your products, your sales, your money</span></span>
</li>
<li style="margin-bottom: 10px;"><b style="color: #678731;"> &#x2714; &nbsp; Walk away anytime</b>
<span style="color: #515151;"> &#8212; <span class="avoid-wrap">Close shop, no questions asked</span></span>
</li>
</ul> </ul>
</div>
</div>
</div>
</section> </section>
</section>
<hr class="mps-section-divider"/>
<!-- ======== WHO IT SERVES ======== --> <!-- ======== WHO IT SERVES ======== -->
<section class="one-column"> <section class="landing-section landing-section-alt">
<div class="one-column">
<span class="big-bold-dark">For makers of all kinds</span> <h2 class="landing-section-title">For makers of all kinds</h2>
<br/><br/>
<p class="landing-body">
Art, crafts, books, clip-art, code, comics, curriculum, drafting, games, graphics, movies, music, photography, videos, video games, farm stand products, merch, zines, or whatever else you dream up. Art, crafts, books, clip-art, code, comics, curriculum, drafting, games, graphics, movies, music, photography, videos, video games, farm stand products, merch, zines, or whatever else you dream up.
</p>
<br/><br/> <p class="landing-body">
Whether you run a homestead farm stand, a music channel, a digital art shop, or a small brand &#8212; this platform adapts to what you make and how you sell it. Whether you run a homestead farm stand, a music channel, a digital art shop, or a small brand &#8212; this platform adapts to what you make and how you sell it.
</p>
<br/><br/> <div class="landing-cta-group">
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button landing-cta">+ Open a Shop</a>
<center> </div>
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button">&#65291; Open a Shop</a> </div>
</center>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== GETTING STARTED ======== --> <!-- ======== GETTING STARTED ======== -->
<section class="one-column"> <section class="landing-section">
<div class="one-column">
<span class="big-bold-dark">Get started in three steps</span> <h2 class="landing-section-title">Get started in three steps</h2>
<div class="mps-card-grid three-col"> <div class="mps-card-grid three-col">
<div class="mps-card" style="text-align: center;"> <div class="mps-card landing-step-card">
<span class="mps-card-icon">&#9312;</span> <span class="landing-step-number">1</span>
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/0b408430-3a2a-11ef-8208-c3d535a3beac/how-to-create-a-new-shop-on-makepostsell">Create a Shop</a></span> <span class="mps-card-title"><a href="https://blog.makepostsell.com/c/0b408430-3a2a-11ef-8208-c3d535a3beac/how-to-create-a-new-shop-on-makepostsell">Create a Shop</a></span>
<span class="mps-card-desc">Pick a name, add a description, customize your brand. Done in under a minute.</span> <span class="mps-card-desc">Pick a name, add a description, customize your brand. Done in under a minute.</span>
</div> </div>
<div class="mps-card" style="text-align: center;"> <div class="mps-card landing-step-card">
<span class="mps-card-icon">&#9313;</span> <span class="landing-step-number">2</span>
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/83c41f98-3a2f-11ef-8208-c3d535a3beac/how-to-create-a-new-product-on-makepostsell">Post a Product</a></span> <span class="mps-card-title"><a href="https://blog.makepostsell.com/c/83c41f98-3a2f-11ef-8208-c3d535a3beac/how-to-create-a-new-product-on-makepostsell">Post a Product</a></span>
<span class="mps-card-desc">Upload files, set a price, write a description. Digital downloads deliver instantly.</span> <span class="mps-card-desc">Upload files, set a price, write a description. Digital downloads deliver instantly.</span>
</div> </div>
<div class="mps-card" style="text-align: center;"> <div class="mps-card landing-step-card">
<span class="mps-card-icon">&#9314;</span> <span class="landing-step-number">3</span>
<span class="mps-card-title">Start Selling</span> <span class="mps-card-title">Start Selling</span>
<span class="mps-card-desc">Share your shop link. Accept payments. Watch your dashboard grow.</span> <span class="mps-card-desc">Share your shop link. Accept payments. Watch your dashboard grow.</span>
</div> </div>
</div> </div>
</div>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== MORE GUIDES ======== --> <!-- ======== MORE GUIDES ======== -->
<section class="one-column well well-white"> <section class="landing-section landing-section-alt">
<div class="one-column">
<span class="big-bold-dark">Guides &amp; Documentation</span> <h2 class="landing-section-title">Guides &amp; Documentation</h2>
<br/><br/>
<div class="mps-card-grid"> <div class="mps-card-grid">
@ -418,60 +360,43 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
</div> </div>
</div> </div>
</div>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== OPEN SOURCE ======== --> <!-- ======== OPEN SOURCE ======== -->
<section class="one-column"> <section class="landing-section">
<div class="one-column">
<span class="big-bold-dark">Open Source &amp; Public Domain</span> <h2 class="landing-section-title">Open Source &amp; Public Domain</h2>
<br/><br/>
<p class="landing-body">
Make Post Sell runs on Python (<a href="https://docs.pylonsproject.org/projects/pyramid/en/2.0-branch/" target="_blank">Pyramid</a>). Every line of code belongs to everyone. No moat, no castle &#8212; just infrastructure that outlasts its builders. Fork it, run it, improve it. Make Post Sell runs on Python (<a href="https://docs.pylonsproject.org/projects/pyramid/en/2.0-branch/" target="_blank">Pyramid</a>). Every line of code belongs to everyone. No moat, no castle &#8212; just infrastructure that outlasts its builders. Fork it, run it, improve it.
</p>
<br/><br/> <div class="landing-cta-group">
<a href="https://pypi.org/project/make-post-sell/" target="_blank" class="source-button mps-button landing-cta">&#128366; PyPi</a>
<center> <a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button landing-cta">&#x2710; Source Code</a>
<a href="https://pypi.org/project/make-post-sell/" target="_blank" class="source-button mps-button">&#128366; PyPi</a> </div>
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">&#x2710; Source Code</a> </div>
</center>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== FINAL CTA ======== --> <!-- ======== FINAL CTA ======== -->
<section class="one-column well"> <section class="landing-section landing-final-cta">
<div class="one-column">
<center> <h2 class="landing-section-title">Ready to make, post, and sell?</h2>
<div class="landing-cta-group">
<span class="big-bold-dark"> <a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button landing-cta landing-cta-large">+ Open a Shop</a>
Ready to make, post, and sell? </div>
</span> </div>
<br/><br/>
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button">&#65291; Open a Shop</a>
</center>
</section> </section>
<hr class="mps-section-divider"/>
<!-- ======== QUESTIONS ======== --> <!-- ======== QUESTIONS ======== -->
<section class="one-column well well-white"> <section class="landing-section landing-section-alt">
<div class="one-column">
<span class="big-bold-dark">Questions?</span> <h2 class="landing-section-title">Questions?</h2>
<br/><br/>
<p class="landing-body">
Drop a message below. Verify your email to get notified when we reply. Drop a message below. Verify your email to get notified when we reply.
</p>
<br/><br/>
<div id="remarkbox-div"> <div id="remarkbox-div">
<noscript> <noscript>
@ -514,6 +439,7 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
); );
</script> </script>
</div>
</section> </section>
<!-- content --> <!-- content -->
@ -563,7 +489,7 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
</div> </div>
<div class="mps-footer-ctas"> <div class="mps-footer-ctas">
<a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">&#65291; Open a Shop</a> <a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">+ Open a Shop</a>
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">&#x2710; Contribute Code</a> <a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">&#x2710; Contribute Code</a>
</div> </div>

447
landing.css Normal file
View file

@ -0,0 +1,447 @@
/* ============================================
LANDING PAGE — Modern flat redesign
Keeps the palette, Grid, Helvetica.
Adds depth, breathing room, visual rhythm.
============================================ */
/* ---- Layout reset for landing ---- */
.landing-content {
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
/* ---- Nav tweaks ---- */
.nav-grid .nav {
padding: 16px 24px;
align-items: center;
}
.nav-grid .nav .logo {
padding: 0;
}
.nav-grid .nav .logo img.logo {
width: auto;
max-height: 40px;
padding: 0;
}
.nav-grid .log-in {
margin: 0;
display: flex;
align-items: center;
gap: 16px;
}
.nav-sep {
color: #e0e0e0;
}
.nav-grid .log-in a {
color: #515151;
font-weight: 500;
font-size: 15px;
transition: color 0.2s ease;
}
.nav-grid .log-in a:hover {
color: #a3c765;
}
/* ---- Hero ---- */
.landing-hero {
background-color: #FFFFFF;
padding: 60px 24px 70px;
text-align: center;
max-width: none;
}
.landing-hero-inner {
max-width: 680px;
margin: 0 auto;
}
.landing-hero-title {
font-family: helvetica, arial, sans-serif;
font-size: 3.2em;
font-weight: 700;
color: #0b0b0b;
line-height: 1.1;
margin: 0 0 20px;
letter-spacing: -0.02em;
}
.landing-hero-subtitle {
font-size: 1.25em;
font-weight: 500;
color: #0b0b0b;
margin: 0 0 24px;
line-height: 1.4;
}
.landing-hero-body {
font-size: 1.05em;
color: #666;
line-height: 1.7;
margin: 0 0 36px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* ---- Sections ---- */
.landing-section {
padding: 64px 24px;
}
.landing-section-alt {
background-color: #F9F9FA;
}
.landing-section-title {
font-family: helvetica, arial, sans-serif;
font-size: 2em;
font-weight: 700;
color: #0b0b0b;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.landing-body {
font-size: 1.05em;
color: #515151;
line-height: 1.7;
margin: 0 0 24px;
}
.landing-body a {
color: #a3c765;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.landing-body a:hover {
border-bottom-color: #a3c765;
}
.landing-muted {
color: #999;
font-size: 14px;
text-align: center;
margin: 0;
}
/* ---- CTA Buttons ---- */
.landing-cta-group {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 16px;
}
a.mps-button.landing-cta {
border-radius: 50px;
min-width: 200px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
transition: transform 0.15s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
a.mps-button.landing-cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
a.mps-button.landing-cta-large {
padding: 18px 48px;
font-size: 18px;
min-width: 260px;
}
/* ---- Pricing ---- */
.landing-pricing {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 32px 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.landing-pricing-card {
background: #FFFFFF;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 36px 24px;
text-align: center;
position: relative;
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.landing-pricing-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.landing-pricing-featured {
border: 2px solid #a3c765;
box-shadow: 0 4px 20px rgba(163, 199, 101, 0.15);
}
.landing-pricing-badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: #a3c765;
color: #fff;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 16px;
border-radius: 50px;
}
.landing-pricing-icon {
font-size: 28px;
display: block;
margin-bottom: 12px;
}
.landing-pricing-amount {
font-size: 3em;
font-weight: 700;
color: #0b0b0b;
display: block;
line-height: 1;
margin-bottom: 8px;
}
.landing-pricing-period {
font-size: 0.35em;
font-weight: 400;
color: #999;
}
.landing-pricing-desc {
font-size: 15px;
color: #666;
display: block;
}
/* ---- Cards (override common.css for landing) ---- */
.landing-content .mps-card {
border: 1px solid #eee;
border-radius: 12px;
padding: 28px 24px;
background: #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.landing-section-alt .mps-card {
background: #FFFFFF;
}
.landing-content .mps-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
transform: translateY(-2px);
}
.landing-content .mps-card-icon {
font-size: 32px;
margin-bottom: 12px;
}
.landing-content .mps-card-title {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 8px;
}
.landing-content .mps-card-title a {
color: #0b0b0b;
text-decoration: none;
transition: color 0.2s ease;
}
.landing-content .mps-card-title a:hover {
color: #a3c765;
}
.landing-content .mps-card-desc {
font-size: 14px;
color: #666;
line-height: 1.6;
}
/* ---- Step cards ---- */
.landing-step-card {
text-align: center;
}
.landing-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #a3c765;
color: #fff;
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
}
/* ---- Comparison donut section ---- */
.landing-content .mps-comparison {
margin: 32px 0;
}
.landing-content .mps-comparison-card {
border-radius: 16px;
padding: 32px 24px;
}
.donut-chart {
display: block;
margin: 0 auto 16px;
}
.donut-legend {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
font-size: 12px;
color: #666;
}
/* ---- Protection lists ---- */
.landing-two-lists {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 28px;
}
.landing-list-card {
border-radius: 12px;
padding: 28px 24px;
}
.landing-list-bad {
background: #fef2f2;
border: 1px solid #f5d5d5;
}
.landing-list-good {
background: #f0f9e8;
border: 1px solid #d5e8c0;
}
.landing-list-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.landing-list-card li {
padding: 10px 0;
font-size: 15px;
line-height: 1.5;
color: #333;
}
.landing-list-card li + li {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.landing-x {
color: #c77765;
margin-right: 8px;
}
.landing-check {
color: #678731;
margin-right: 8px;
}
.landing-list-detail {
color: #666;
}
/* ---- Final CTA ---- */
.landing-final-cta {
background: linear-gradient(135deg, #f8faf5 0%, #f0f6ff 100%);
text-align: center;
padding: 80px 24px;
}
.landing-final-cta .landing-section-title {
font-size: 2.2em;
margin-bottom: 28px;
}
/* ---- Responsive ---- */
@media (min-width: 800px) {
.landing-hero {
padding: 80px 40px 100px;
}
.landing-hero-title {
font-size: 4em;
}
.landing-section {
padding: 80px 40px;
}
.landing-pricing {
grid-template-columns: 1fr 1fr;
}
.landing-two-lists {
grid-template-columns: 1fr 1fr;
}
.nav-grid .nav {
padding: 16px 40px;
}
}
@media (min-width: 1200px) {
.landing-hero-title {
font-size: 4.5em;
}
.landing-hero {
padding: 100px 40px 120px;
}
.landing-section {
padding: 100px 40px;
}
}