@zvndev/darkmown 0.20.0 → 1.0.0

package/site/pages/forge/index.wd

@@ -0,0 +1,330 @@
+---
+title: Forge your plan — a live pricing configurator in Markdown
+description: Build your plan, toggle features, adjust the seat count, and watch the price, savings, and upsell hints update instantly. A classic "this needs React" interaction — written as one Markdown file with a reactive :computed pricing engine.
+image: https://darkmown.com/__wd/media/og-forge.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-forge">
+
+::: section #forge .forge-shell
+:state base = 20
+:state seats = 3
+:state analytics = false
+:state sso = false
+:state priority = false
+
+:computed seatCost = seats*8
+:computed total = base + seats*8 + analytics*25 + sso*50 + priority*40
+:computed annual = total*12
+:computed annualBill = total*10
+:computed annualSaved = total*2
+:computed addons = analytics*25 + sso*50 + priority*40
+
+<section class="forge-hero">
+  <span class="eyebrow">Build your plan</span>
+
+# Forge your plan.
+
+A pricing page is usually a React app in disguise — toggles, steppers, a total that recomputes, upsell logic, the works. This one is a single Markdown file. Pick a tier, set your seats, switch features on, and watch the price move.
+
+<div class="forge-trust">
+<span class="forge-trust-item">No credit card</span>
+<span class="forge-trust-item">14-day trial</span>
+<span class="forge-trust-item">Cancel anytime</span>
+</div>
+</section>
+
+::: div .forge-layout
+
+::: div .forge-build
+
+## 1 · Choose a tier
+
+::: div .tier-grid
+
+::: card .tier .on when base == 12
+### Starter
+**$12**/mo base
+
+For solo builders and side projects finding their footing.
+
+:button "Select Starter" -> base = 12
+:if base == 12
+::: div .tier-active
+Current tier
+:::
+:endif
+:::
+
+::: card .tier .on when base == 20
+### Team
+**$20**/mo base
+
+The popular pick — for small teams shipping every week.
+
+:button "Select Team" -> base = 20
+:if base == 20
+::: div .tier-active
+Current tier
+:::
+:endif
+:::
+
+::: card .tier .on when base == 40
+### Business
+**$40**/mo base
+
+Scale, controls, and the headroom growing orgs need.
+
+:button "Select Business" -> base = 40
+:if base == 40
+::: div .tier-active
+Current tier
+:::
+:endif
+:::
+
+:::
+
+## 2 · Set your seats
+
+Every plan includes a generous base; each additional seat is a flat **$8/mo**. The stepper is just `:button` actions on a `:state` number.
+
+::: card .seats-card
+
+::: div .seat-stepper
+:button "–" -> seats -= 1
+::: div .seat-count
+**{ seats }** seats
+:::
+:button "+" -> seats++
+:::
+
+::: div .seat-meta
+That's **${ seatCost }/mo** in seats right now.
+:::
+
+:if seats > 25
+::: div .seat-hint
+At 25+ seats, talk to us — volume pricing kicks in.
+:::
+:endif
+:::
+
+## 3 · Add features
+
+Toggle the capabilities you need. Each card lights up when it's on and folds straight into the total.
+
+::: div .feature-grid
+
+::: card .feature .on when analytics
+::: div .feature-head
+### Advanced analytics
+**+$25**/mo
+:::
+
+Funnels, retention cohorts, and a real-time dashboard your whole team can read.
+
+:if analytics
+::: div .feature-state .is-on
+On — counted in your total
+:::
+:button "Remove" -> analytics toggle
+:else
+:button "Add analytics" -> analytics toggle
+:endif
+:::
+
+::: card .feature .on when sso
+::: div .feature-head
+### SSO & SAML
+**+$50**/mo
+:::
+
+One-click sign-in with Okta, Google Workspace, or Entra — plus SCIM provisioning.
+
+:if sso
+::: div .feature-state .is-on
+On — counted in your total
+:::
+:button "Remove" -> sso toggle
+:else
+:button "Add SSO" -> sso toggle
+:endif
+:::
+
+::: card .feature .on when priority
+::: div .feature-head
+### Priority support
+**+$40**/mo
+:::
+
+A private channel, a named engineer, and a one-hour first-response SLA.
+
+:if priority
+::: div .feature-state .is-on
+On — counted in your total
+:::
+:button "Remove" -> priority toggle
+:else
+:button "Add priority" -> priority toggle
+:endif
+:::
+
+:::
+
+::: div .forge-hints
+:if sso and not priority
+::: div .hint .hint-suggest
+Teams that turn on **SSO** almost always add **Priority support** — fewer locked-out admins at 2am.
+:::
+:endif
+:if analytics and total > 120
+::: div .hint .hint-good
+Nice stack. With analytics on a plan this size, most teams see ROI inside the first month.
+:::
+:endif
+:if total > 150
+::: div .hint .hint-unlock
+You've unlocked the **annual discount** — pay yearly and two months are on us.
+:::
+:endif
+:if total <= 80
+::: div .hint
+Just the essentials so far. Add a feature above to see how the total moves.
+:::
+:endif
+:::
+
+:::
+
+::: aside .forge-summary
+::: div .summary-card
+
+### Your plan
+
+::: div .price-block
+::: div .price-now
+**${ total }**
+:::
+::: div .price-unit
+per month
+:::
+:::
+
+::: div .summary-lines
+::: div .summary-line
+Base plan · ${ base }/mo
+:::
+::: div .summary-line
+{ seats } seats · ${ seatCost }/mo
+:::
+::: div .summary-line
+Add-ons · ${ addons }/mo
+:::
+:::
+
+::: div .annual-block
+Billed annually: **${ annualBill }/yr** — you save **${ annualSaved }** vs. monthly.
+:::
+
+::: div .summary-cta
+:button "Reset everything" -> base reset; seats reset; analytics reset; sso reset; priority reset
+:::
+
+A month-to-month list price would run **${ annual }/yr**. Choose yearly at checkout to lock the discount.
+:::
+:::
+
+:::
+
+## 4 · Start your trial
+
+Drop in your details and we'll spin up your **${ total }/mo** workspace — no charge for 14 days.
+
+::: div .checkout-card
+:form action="/__wd/echo" into receipt
+:input name placeholder="Your name"
+:input email placeholder="Work email"
+:submit "Start 14-day trial"
+:endform
+
+:if receipt
+::: div .receipt
+### You're in 🎉
+
+We've reserved your plan at **${ total }/mo** ({ seats } seats). Confirmation sent at **{ receipt.at }** — check your inbox to finish setup.
+:::
+:else
+::: div .checkout-note
+Your plan today: **${ total }/mo** · billed annually at **${ annualBill }/yr**. You can change tiers or seats any time.
+:::
+:endif
+
+:if receipt_error
+::: div .checkout-error
+Something went wrong: { receipt_error }
+:::
+:endif
+:::
+
+---
+
+## It's just Markdown
+
+No JSX, no `useState`, no pricing library. The tier buttons, the seat stepper, the feature toggles, the live total, the upsell hints, and the checkout are all directives in one `.wd` file. The pricing engine is a single `:computed` line:
+
+<details class="source-reveal"><summary>View source — it's Markdown</summary>
+
+```wd
+:state base = 20
+:state seats = 3
+:state analytics = false
+:state sso = false
+:state priority = false
+
+:computed total = base + seats*8 + analytics*25 + sso*50 + priority*40
+:computed annualBill = total*10
+:computed annualSaved = total*2
+
+The price is ${ total }/mo.
+
+::: card .tier .on when base == 20
+:button "Select Team" -> base = 20
+:::
+
+:button "–" -> seats -= 1
+:button "+" -> seats++
+
+::: card .feature .on when analytics
+:if analytics
+:button "Remove" -> analytics toggle
+:else
+:button "Add analytics" -> analytics toggle
+:endif
+:::
+
+:if sso and not priority
+Teams that turn on SSO almost always add Priority support.
+:endif
+
+:if total > 150
+You've unlocked the annual discount.
+:endif
+
+:button "Reset everything" -> base reset; seats reset; analytics reset; sso reset; priority reset
+```
+
+</details>
+
+Booleans coerce in arithmetic, so `analytics*25` is `25` when the toggle is on and `0` when it's off — that one rule is the whole pricing engine. [Read the docs](/docs/) or [see the reactive page](/reactive/).
+
+:::
+
+</main>
+
+@include /footer.wd

package/site/pages/index.skin

@@ -1,140 +1,65 @@
-tokens
-  ink #171717
-  paper #fbfaf7
-  panel #ffffff
-  line #dedbd3
-  accent #16645a
-  warm #a83f2a
-  muted #666158
-  gap 1rem
-  radius 8px
+/* Landing page — layers on /base.wd (tokens, type, components, dark mode).
+   Only landing-specific layout lives here. */
 
-page
-  margin 0
-  font ui-serif, Georgia, Cambria, serif
-  color $ink
-  bg $paper
-  line-height 1.6
-  padding 0 0 4rem
+/* ── Hero ───────────────────────────────────────────────────────── */
 
 .hero
-  display flex
-  flex-direction column
-  align-items flex-start
-  justify-content center
-  padding 2.5rem 0 2.25rem
+  padding 3.5rem 0 2.75rem
   border-bottom 1px solid $line
   margin-bottom 2.5rem
 
-.hero > p:not(.eyebrow)
-  max-width 70ch
-  margin .75rem 0 1.5rem
-
-.eyebrow
-  color $accent
-  text-transform uppercase
-  letter-spacing .08em
-  font-size .78rem
-  margin 0
-
-main
-  max-width 920px
-  margin 0 auto
-  padding 0 2rem 2rem
-
-h1
-  font-size clamp(2.4rem, 6vw, 5rem)
-  line-height .95
-  margin .75rem 0 1rem
-  max-width 14ch
-
-h2
-  margin-top 2.75rem
-  border-bottom 1px solid $line
-  padding-bottom .35rem
+.hero h1
+  max-width 16ch
 
-a
+.hero h1 em
+  font-style italic
   color $accent
 
-.btn
-  display inline-block
-  margin .5rem .5rem .5rem 0
-  padding .75rem 1rem
-  border 1px solid $line
-  radius $radius
-  bg $panel
-  text-decoration none
-
-.btn.primary
-  bg $ink
-  color white
-  border 1px solid $ink
-
-.note
-  border 1px solid $line
-  bg $panel
-  padding 1rem
-  radius $radius
+.hero > p
+  max-width 64ch
+  font-size 1.18rem
+  color $ink-soft
+  margin 1rem 0 1.75rem
 
-.try-card
-  display inline-flex
-  align-items center
-  gap .65rem
-  margin .35rem .5rem .35rem 0
-  padding .75rem 1rem
-  border 1px solid $line
-  radius $radius
-  bg $panel
-  text-decoration none
-
-.try-card span
-  color white
-  bg $accent
-  padding .1rem .45rem
+.hero .eyebrow
+  background $accent-soft
+  padding .3rem .7rem
   radius 999px
 
-.feature-card
-  display grid
-  gap .35rem
-  margin 1rem 0
-  padding 1rem
-  bg $panel
-  border 1px solid $line
-  radius $radius
-
-.feature-card strong
-  color $warm
-
-.pulse-button
-  border 0
-  bg $ink
-  color white
-  padding .85rem 1rem
-  radius $radius
-  font inherit
-  cursor pointer
-
-.pulse-button.is-on
-  bg $warm
+.hero-cta
+  display flex
+  flex-wrap wrap
+  margin-bottom 2rem
 
-.sprint-board
+.hero-stats
   display grid
-  grid-template-columns repeat(auto-fit, minmax(130px, 1fr))
-  gap $gap
-  margin 1rem 0
+  grid-template-columns repeat(4, auto)
+  gap 1.25rem 2.5rem
+  list-style none
+  padding 0
+  margin 0
+  border-top 1px solid $line-soft
+  padding-top 1.5rem
 
-.sprint-board article
-  bg $panel
-  border 1px solid $line
-  padding 1rem
-  radius $radius
+.hero-stats li
+  display flex
+  flex-direction column
 
-.sprint-board span
-  display block
+.hero-stats strong
+  font-size 1.6rem
   color $accent
-  font-size .9rem
+  letter-spacing -.02em
+
+.hero-stats span
+  font-size .82rem
+  color $muted
+  max-width 18ch
+
+@media (max-width: 720px)
+  .hero-stats
+    grid-template-columns 1fr 1fr
 
-/* ── vs-Markdoc comparison ───────────────────────────────────────── */
+/* ── vs-Markdoc comparison ──────────────────────────────────────── */
 
 .versus
   display grid
@@ -147,15 +72,15 @@ a
   border 1px solid $line
   radius $radius
   bg $panel
-  padding 1.25rem 1.25rem 1.1rem
+  padding 1.35rem
   display flex
   flex-direction column
   min-width 0
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
 
 .vs-card.vs-dark
-  bg #fbf7ef
-  border 1px solid #e3d8c4
-  box-shadow 0 1px 0 #efe7d6
+  background linear-gradient(180deg, $accent-soft, $panel)
+  border 1px solid $accent
 
 .vs-head
   display flex
@@ -179,7 +104,7 @@ a
 
 .vs-tag-md
   color $muted
-  bg #efece3
+  bg $sunk
   border 1px solid $line
 
 .vs-sub
@@ -189,7 +114,7 @@ a
 
 .vs-card pre
   margin .25rem 0 0
-  font-size .82rem
+  font-size .8rem
   line-height 1.55
 
 .vs-live-label
@@ -199,21 +124,22 @@ a
   font-style italic
 
 .vs-live
-  border 1px dashed #cdbfa6
-  radius $radius
-  bg #fffdf8
+  border 1px dashed $accent
+  radius $radius-sm
+  background color-mix(in srgb, $accent-soft 50%, $panel)
   padding 1rem 1.1rem .85rem
   margin .15rem 0 0
 
 .vs-live input[data-wd-bind-input]
   width 100%
   box-sizing border-box
-  font inherit
+  font-family inherit
   font-size .95rem
   padding .55rem .7rem
   border 1px solid $line
-  radius 6px
-  bg white
+  radius 8px
+  bg $panel
+  color $ink
   margin 0 0 .75rem
 
 .vs-live .product
@@ -225,7 +151,7 @@ a
   margin .35rem 0
   bg $panel
   border 1px solid $line
-  radius 6px
+  radius 8px
   font-size .95rem
 
 .vs-live .product p
@@ -235,15 +161,15 @@ a
   border 0
   bg $accent
   color white
-  font inherit
+  font-family inherit
   font-size .82rem
-  padding .35rem .7rem
-  radius 6px
+  padding .4rem .8rem
+  radius 999px
   cursor pointer
   flex-shrink 0
 
 .vs-live .product button:hover
-  bg #11514a
+  bg $accent-deep
 
 .vs-live > p:last-of-type
   margin .85rem 0 0
@@ -253,8 +179,8 @@ a
   margin 1rem 0 0
   padding 1rem 1.1rem
   border-left 3px solid $warm
-  bg #fcf4ef
-  radius 6px
+  bg $warm-soft
+  radius 8px
 
 .vs-needs strong
   color $warm
@@ -277,9 +203,14 @@ a
   font-size .95rem
 
 .vs-card.vs-dark .vs-caption
-  color $accent
+  color $accent-deep
+
+@media (max-width: 720px)
+  .versus
+    grid-template-columns 1fr
+    gap 1rem
 
-/* Secondary value-prop row, demoted below the comparison */
+/* ── Secondary value props ──────────────────────────────────────── */
 
 .props
   margin 1.5rem 0 0
@@ -287,7 +218,67 @@ a
 .props h2
   margin-top 1.5rem
 
-@media (max-width: 720px)
-  .versus
-    grid-template-columns 1fr
-    gap 1rem
+/* ── Demo-directive widgets (`:try`, feature-card include, index.js) ─ */
+
+.try-card
+  display inline-flex
+  align-items center
+  gap .65rem
+  margin .35rem .5rem .35rem 0
+  padding .75rem 1rem
+  border 1px solid $line
+  radius 999px
+  bg $panel
+  text-decoration none
+  color $ink
+
+.try-card:hover
+  border-color $accent
+
+.try-card span
+  color white
+  bg $accent
+  padding .1rem .5rem
+  radius 999px
+  font-size .8rem
+
+.feature-card
+  display grid
+  gap .35rem
+  margin 1rem 0
+  padding 1.1rem 1.25rem
+  bg $panel
+  border 1px solid $line
+  radius $radius
+
+.feature-card strong
+  color $warm
+
+.pulse-button
+  border 0
+  bg $ink
+  color $paper
+  padding .85rem 1.15rem
+  radius 999px
+  font-family inherit
+  cursor pointer
+
+.pulse-button.is-on
+  bg $warm
+
+.sprint-board
+  display grid
+  grid-template-columns repeat(auto-fit, minmax(130px, 1fr))
+  gap 1rem
+  margin 1rem 0
+
+.sprint-board article
+  bg $panel
+  border 1px solid $line
+  padding 1rem
+  radius $radius
+
+.sprint-board span
+  display block
+  color $accent
+  font-size .9rem