From 5ff8cb6587fb13018f64419725ceddd4d9317e94 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Fri, 6 Mar 2026 07:44:44 -0500 Subject: [PATCH] Modernize landing page: generous whitespace, subtle shadows, visual rhythm Remove all
spacers,
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. --- index.html | 578 +++++++++++++++++++++++----------------------------- landing.css | 447 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 699 insertions(+), 326 deletions(-) create mode 100644 landing.css diff --git a/index.html b/index.html index 11accdf..69462f5 100644 --- a/index.html +++ b/index.html @@ -11,12 +11,13 @@ + - +
Open source & public domain — no moat, no castle, just infrastructure that outlasts its builders @@ -28,212 +29,177 @@ Open source & public domain — no moat, no castle, just infrastructure - -
-
-
+
-
- - - Make it. Post it. Sell it. - - -

- - - Your shop. Your brand. Your money. Zero commission fees. - - -

- - 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. - -

- -
- ＋ Open a Shop -
- -
- -
Close anytime, no questions asked.
- +
+
+

Make it. Post it. Sell it.

+

Your shop. Your brand. Your money. Zero commission fees.

+

+ 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. +

+
+ + Open a Shop +
+

Close anytime, no questions asked.

+
-
- -
+
+
+

Simple pricing

- Simple pricing +
+
+ 📅 + $14/month + Pay as you go. Cancel anytime. +
+
+ Best value + 🌟 + $97/year + Save 42%. Two months free. +
+
-
-
- 📅 - $14/month - Pay as you go. Cancel anytime. -
-
- 🌟 - $97/year - Save 42%. Best value. -
+

Zero commission fees. You keep every dollar minus only payment processing.

- -
Zero commission fees. You keep every dollar minus only payment processing.
-
-
- -
+
+
+

Everything a creator needs

- Everything a creator needs +
-
+
+ 🎭 + Watch Mode & Media Channel + Turn your shop into a streaming channel. Continuous playback with DJ-style crossfade, discovery ring, queue management, pop-out player, and /tv + /random endpoints. Video, audio, images, PDFs. +
+ +
+ 💰 + Five Payment Options + Stripe, PayPal, Adyen, Monero (XMR), and Dogecoin (DOGE). Mix and match. Fully automated crypto cash register with built-in refund system. No humans in a loop. +
+ +
+ 📨 + Subscriptions & Feeds + Grow an audience. Email digests deliver new posts on their schedule — immediately, daily, or weekly. Every shop gets RSS, Atom, and sitemap endpoints automatically. +
+ +
+ 📈 + Analytics Dashboard + Per-product and per-shop analytics with line charts, keyword tracking, and referrer domain insights. Know what works. Grow what converts. +
+ +
+ 🎨 + Sandbox & Creative Tools + Built-in creative filter toolbar, canvas export, and RGB color chains. Karaoke mode with vocal isolation. Experiment, remix, and publish from one place. +
+ +
+ 👥 + Multi-tenant & Team + Run multiple shops from one account. Invite owners and editors. Each shop gets its own brand, products, domain, and audience. No competition — only your products appear. +
-
- 🎭 - Watch Mode & Media Channel - Turn your shop into a streaming channel. Continuous playback with DJ-style crossfade, discovery ring, queue management, pop-out player, and /tv + /random endpoints. Video, audio, images, PDFs.
- -
- 💰 - Five Payment Options - Stripe, PayPal, Adyen, Monero (XMR), and Dogecoin (DOGE). Mix and match. Fully automated crypto cash register with built-in refund system. No humans in a loop. -
- -
- 📨 - Subscriptions & Feeds - Grow an audience. Email digests deliver new posts on their schedule — immediately, daily, or weekly. Every shop gets RSS, Atom, and sitemap endpoints automatically. -
- -
- 📈 - Analytics Dashboard - Per-product and per-shop analytics with line charts, keyword tracking, and referrer domain insights. Know what works. Grow what converts. -
- -
- 🎨 - Sandbox & Creative Tools - Built-in creative filter toolbar, canvas export, and RGB color chains. Karaoke mode with vocal isolation. Experiment, remix, and publish from one place. -
- -
- 👥 - Multi-tenant & Team - Run multiple shops from one account. Invite owners and editors. Each shop gets its own brand, products, domain, and audience. No competition — only your products appear. -
-
-
-
- -
+
+
+

Keep what you earn

- Keep what you earn +

+ Marketplaces charge 15–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 $19.12 after payment processing. +

-

+
- Marketplaces charge 15–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 $19.12 after payment processing. + +
+ + + + + + -
+
+ ■ You 70% + ■ Processing 3.5% + ■ Marketplace 26.5% +
- -
- - - - - - - - - - - -
- ■ You 70% - ■ Processing 3.5% - ■ Marketplace 26.5% + $14.00 + Marketplace (30% commission)
- $14.00 - Marketplace (30% commission) -
+ +
+ + + + + - -
- - - - - - - - +
+ ■ You 96.5% + ■ Processing 3.5% +
-
- ■ You 96.5% - ■ Processing 3.5% + $19.12 + Make Post Sell (0% commission)
- $19.12 - Make Post Sell (0% commission)
+

+ That gap compounds. Run your own numbers to see how much commission-free saves over a year. +

- - That gap compounds. Run your own numbers to see how much commission-free saves over a year. -
-
- -
+
+
+

Own your platform, skip their rules

- Own your platform, skip their rules - -

- -
-
    -
  • ❌   Sales commissions and platform fees
    • -
  • ❌   Censorship and de-platforming
    • -
  • ❌   Bad algorithms burying your work
    • -
  • ❌   Competitor products next to yours
    • -
  • ❌   Frivolous DMCA takedowns
    • -
-
- -
- -
-
    -
  • ✔   Always open - — Sell online 24/7 -
    • -
  • ✔   Risk free - — Make nothing, pay nothing -
    • -
  • ✔   Commission free - — Your products, your sales, your money -
    • -
  • ✔   Walk away anytime - — Close shop, no questions asked -
    • -
-
+
+
+
    +
  • ❌ Sales commissions and platform fees
    • +
  • ❌ Censorship and de-platforming
    • +
  • ❌ Bad algorithms burying your work
    • +
  • ❌ Competitor products next to yours
    • +
  • ❌ Frivolous DMCA takedowns
    • +
+
+
+
    +
  • ✔ Always open — Sell online 24/7
    • +
  • ✔ Risk free — Make nothing, pay nothing
    • +
  • ✔ Commission free — Your products, your sales, your money
    • +
  • ✔ Walk away anytime — Close shop, no questions asked
    • +
+
+
+
-
- -
+
+
+

For makers of all kinds

- For makers of all kinds +

+ 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. - -

- - Whether you run a homestead farm stand, a music channel, a digital art shop, or a small brand — this platform adapts to what you make and how you sell it. - -

- -
- ＋ Open a Shop -
+

+ Whether you run a homestead farm stand, a music channel, a digital art shop, or a small brand — this platform adapts to what you make and how you sell it. +

+
+ + Open a Shop +
+
-
- -
+
+
+

Get started in three steps

- Get started in three steps +
-
+
+ 1 + Create a Shop + Pick a name, add a description, customize your brand. Done in under a minute. +
+ +
+ 2 + Post a Product + Upload files, set a price, write a description. Digital downloads deliver instantly. +
+ +
+ 3 + Start Selling + Share your shop link. Accept payments. Watch your dashboard grow. +
-
- ① - Create a Shop - Pick a name, add a description, customize your brand. Done in under a minute.
- -
- ② - Post a Product - Upload files, set a price, write a description. Digital downloads deliver instantly. -
- -
- ③ - Start Selling - Share your shop link. Accept payments. Watch your dashboard grow. -
-
-
-
- -
+
+
+

Guides & Documentation

- Guides & Documentation +
-

+
+ Create Content + Post articles, media, and updates to your shop feed. +
-
+
+ Create a Digital Bundle + Package multiple products together at a bundled price. +
+ +
+ Create Coupons + Offer discounts and run promotions for your audience. +
+ +
+ Add Shop Locations + Manage physical pickup points or retail locations. +
+ +
+ Invite Collaborators + Add owners and editors to help manage your shop. +
+ +
+ Accept Monero (XMR) + Add cryptocurrency payments alongside cards. +
+ +
+ Accept Dogecoin (DOGE) + Enable DOGE payments for your customers. +
+ +
+ Read More on Our Blog + Catch up on new features and platform updates. +
-
- Create Content - Post articles, media, and updates to your shop feed.
- -
- Create a Digital Bundle - Package multiple products together at a bundled price. -
- -
- Create Coupons - Offer discounts and run promotions for your audience. -
- -
- Add Shop Locations - Manage physical pickup points or retail locations. -
- -
- Invite Collaborators - Add owners and editors to help manage your shop. -
- -
- Accept Monero (XMR) - Add cryptocurrency payments alongside cards. -
- -
- Accept Dogecoin (DOGE) - Enable DOGE payments for your customers. -
- -
- Read More on Our Blog - Catch up on new features and platform updates. -
-
-
-
- -
+
+
+

Open Source & Public Domain

- Open Source & Public Domain - -

- - Make Post Sell runs on Python (Pyramid). Every line of code belongs to everyone. No moat, no castle — just infrastructure that outlasts its builders. Fork it, run it, improve it. - -

- -
- 🕮 PyPi - ✐ Source Code -
+

+ Make Post Sell runs on Python (Pyramid). Every line of code belongs to everyone. No moat, no castle — just infrastructure that outlasts its builders. Fork it, run it, improve it. +

+
+ 🕮 PyPi + ✐ Source Code +
+
-
- -
- -
- - - Ready to make, post, and sell? - - -

- - ＋ Open a Shop - -
- +
+
+

Ready to make, post, and sell?

+
+ + Open a Shop +
+
-
- -
+
+
+

Questions?

- Questions? - -

- - 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. +

@@ -563,7 +489,7 @@ Open source & public domain — no moat, no castle, just infrastructure
- ＋ Open a Shop + + Open a Shop ✐ Contribute Code
diff --git a/landing.css b/landing.css new file mode 100644 index 0000000..639a9c7 --- /dev/null +++ b/landing.css @@ -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; + } +}