Usage Based Pricing — Neo-Brutalism

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<!--
Snippet Name: Usage Based Pricing — Neo-Brutalism
Description: Brutalist usage-based pricing with a live usage slider, tier-rate table, volume savings bar, and offset-shadow CTAs.
Author: DevSnips Contributors
Usage Example: Drop into a pricing section. Drag the slider to recompute the monthly estimate live.
-->
<section class="relative w-full px-5 py-16 sm:px-8 sm:py-24" data-usage="nb">

  <div class="mx-auto max-w-6xl">
    <!-- Header -->
    <div class="mb-12 border-b-4 border-black pb-8">
      <span class="border-2 border-black bg-[#FF4FA3] px-2.5 py-1 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#000]">/ metered</span>
      <h2 class="font-archivo mt-5 text-[40px] font-extrabold uppercase leading-[0.95] tracking-tight sm:text-[56px]">Pay for what you use.<br>nothing more.</h2>
      <p class="font-mono mt-4 max-w-xl text-[13px] font-medium leading-relaxed text-black/70">No seats. No tiers. One rate card, billed to the event. Move the slider to see your number.</p>
    </div>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-[1fr_1fr] lg:items-start">
      <!-- Calculator -->
      <div class="border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] sm:p-8">
        <p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">Monthly events</p>
        <div class="mt-2 flex items-end gap-2">
          <span class="font-archivo text-5xl font-extrabold tabular-nums" data-usage-value>500,000</span>
          <span class="font-mono mb-2 text-[12px] font-bold uppercase text-black/50">events</span>
        </div>

        <!-- Slider -->
        <div class="mt-6">
          <input type="range" min="10000" max="10000000" step="10000" value="500000" data-slider
            class="h-3 w-full cursor-pointer appearance-none border-2 border-black bg-[#FFE600] accent-black focus:outline-none focus-visible:ring-4 focus-visible:ring-[#FF4FA3]" aria-label="Monthly events">
          <div class="mt-2 flex justify-between font-mono text-[10px] font-bold uppercase text-black/50">
            <span>10k</span><span>10M</span>
          </div>
        </div>

        <!-- Estimate box -->
        <div class="mt-8 border-2 border-black bg-black p-5">
          <div class="flex items-center justify-between">
            <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-white/60">Estimated bill</span>
            <span class="font-mono text-[11px] font-bold uppercase text-[#00E676]" data-tier-label>tier 2 · band</span>
          </div>
          <div class="mt-2 flex items-end gap-2">
            <span class="font-archivo text-5xl font-extrabold tabular-nums text-white" data-estimate>$2,750</span>
            <span class="font-mono mb-2 text-[12px] font-bold uppercase text-white/40">/mo</span>
          </div>
          <!-- volume savings bar -->
          <div class="mt-5">
            <div class="flex items-center justify-between font-mono text-[10px] font-bold uppercase text-white/50">
              <span>volume savings</span><span data-savings>You save $305/mo</span>
            </div>
            <div class="mt-2 h-3 w-full border-2 border-white bg-white/10">
              <div class="h-full bg-[#00E676]" data-savings-bar style="width:30%"></div>
            </div>
          </div>
        </div>

        <div class="mt-6 flex flex-col gap-3 sm:flex-row">
          <a href="#" class="inline-flex items-center justify-center gap-2 border-2 border-black bg-[#FFE600] px-5 py-3 font-mono text-[12px] font-bold uppercase shadow-[5px_5px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[1px_1px_0_0_#000]">Start metered plan</a>
          <a href="#" class="inline-flex items-center justify-center gap-2 border-2 border-black bg-white px-5 py-3 font-mono text-[12px] font-bold uppercase shadow-[5px_5px_0_0_#00C2FF] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[1px_1px_0_0_#00C2FF]">Open cost calculator</a>
        </div>
      </div>

      <!-- Rate card -->
      <div class="border-2 border-black bg-[#FFFDF5] shadow-[8px_8px_0_0_#000]">
        <div class="border-b-2 border-black bg-white px-5 py-3">
          <p class="font-mono text-[11px] font-bold uppercase tracking-wider">/ rate card</p>
        </div>
        <ul class="divide-y-2 divide-black" role="list">
          <li class="flex items-center justify-between px-5 py-4">
            <div>
              <p class="font-archivo text-base font-extrabold uppercase">Tier 1 · 0–100k</p>
              <p class="font-mono text-[11px] text-black/60">First 100k events / month</p>
            </div>
            <span class="font-archivo text-2xl font-extrabold tabular-nums">$0.0085<span class="font-mono text-[11px] font-bold text-black/40">/ea</span></span>
          </li>
          <li class="flex items-center justify-between bg-[#FFE600] px-5 py-4">
            <div>
              <p class="font-archivo text-base font-extrabold uppercase">Tier 2 · 100k–1M</p>
              <p class="font-mono text-[11px] text-black/70">Next 900k events / month</p>
            </div>
            <span class="font-archivo text-2xl font-extrabold tabular-nums">$0.0040<span class="font-mono text-[11px] font-bold text-black/40">/ea</span></span>
          </li>
          <li class="flex items-center justify-between px-5 py-4">
            <div>
              <p class="font-archivo text-base font-extrabold uppercase">Tier 3 · 1M–10M</p>
              <p class="font-mono text-[11px] text-black/60">Next 9M events / month</p>
            </div>
            <span class="font-archivo text-2xl font-extrabold tabular-nums">$0.0019<span class="font-mono text-[11px] font-bold text-black/40">/ea</span></span>
          </li>
          <li class="flex items-center justify-between bg-[#FF4FA3] px-5 py-4 text-white">
            <div>
              <p class="font-archivo text-base font-extrabold uppercase">Tier 4 · 10M+</p>
              <p class="font-mono text-[11px] text-white/80">Custom volume pricing</p>
            </div>
            <span class="font-archivo text-2xl font-extrabold uppercase">Let's talk</span>
          </li>
        </ul>
        <div class="border-t-2 border-black bg-white px-5 py-3">
          <p class="font-mono text-[11px] font-bold uppercase text-black/50">no seat fees · no minimums · cancel anytime</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-usage]');
      const slider = root.querySelector('[data-slider]');
      const val = root.querySelector('[data-usage-value]');
      const est = root.querySelector('[data-estimate]');
      const tier = root.querySelector('[data-tier-label]');
      const sav = root.querySelector('[data-savings]');
      const bar = root.querySelector('[data-savings-bar]');
      const bands = [
        { upto: 100000,  rate: 0.0085, label: "tier 1" },
        { upto: 1000000, rate: 0.0040, label: "tier 2" },
        { upto: 10000000, rate: 0.0019, label: "tier 3" }
      ];
      function fmt(n) { return n.toLocaleString('en-US'); }
      function compute(v) {
        let cost = 0, prev = 0, label = "tier 1";
        for (const b of bands) {
          if (v > prev) {
            const slice = Math.min(v, b.upto) - prev;
            cost += slice * b.rate;
            if (v <= b.upto) { label = b.label; }
            prev = b.upto;
          }
        }
        if (v >= 10000000) label = "tier 4 · custom";
        const flat = v * 0.0085; // compare to all-at-tier-1
        const save = Math.max(0, flat - cost);
        return { cost, label, save };
      }
      function update() {
        const v = +slider.value;
        val.textContent = fmt(v);
        const { cost, label, save } = compute(v);
        est.textContent = "$" + Math.round(cost).toLocaleString('en-US');
        tier.textContent = label + " · band";
        sav.textContent = save > 0 ? ("You save $" + Math.round(save).toLocaleString('en-US') + "/mo") : "No savings yet";
        bar.style.width = Math.min(100, (save / (v * 0.0085)) * 100) + "%";
      }
      slider.addEventListener('input', update);
      update();
    })();
  </script>
</section>