202 lines
8.6 KiB
Text
202 lines
8.6 KiB
Text
---
|
||
import Hero from "@/components/blocks/hero-1.astro";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Icon } from "@/components/ui/icon";
|
||
import { Section, SectionContent, SectionGrid, SectionProse } from "@/components/ui/section";
|
||
import { Tile, TileActions, TileContent, TileDescription, TileTitle } from "@/components/ui/tile";
|
||
import BaseLayout from "@/layouts/BaseLayout.astro";
|
||
---
|
||
|
||
<BaseLayout title="IF.Trace — Pricing" description="Simple pricing for IF.Trace: free, monthly, or pay‑as‑you‑go.">
|
||
<Hero
|
||
link={{ text: "Questions", href: "mailto:ds@infrafabric.io?subject=IF.Trace%20pricing%20question", icon: "mail" }}
|
||
links={[
|
||
{ text: "Email us", href: "mailto:ds@infrafabric.io?subject=IF.Trace%20pricing", icon: "mail" },
|
||
{ text: "Browse sectors", href: "/verticals/", icon: "layers" },
|
||
]}
|
||
image={{ src: "/assets/iftrace-diagram.svg", alt: "Verification flow diagram (example)" }}
|
||
>
|
||
<p>Simple pricing, on purpose</p>
|
||
<h1>Pricing</h1>
|
||
<p>Pick the plan that matches your monthly volume. No jargon.</p>
|
||
</Hero>
|
||
|
||
<Section aria-label="Pricing">
|
||
<SectionContent>
|
||
<SectionProse class="text-center">
|
||
<p>Choose a plan</p>
|
||
<h2>Free, monthly, or pay‑as‑you‑go.</h2>
|
||
<p>
|
||
A “transaction” is one published receipt (a trace link) with a yes/no integrity result.
|
||
</p>
|
||
</SectionProse>
|
||
|
||
<SectionGrid class="@3xl:grid-cols-3">
|
||
<Tile variant="floating" class="justify-between">
|
||
<TileContent>
|
||
<TileTitle class="text-xl">Free</TileTitle>
|
||
<TileDescription>Try it. Share a receipt. See if it fits your workflow.</TileDescription>
|
||
<div class="mt-4 flex items-end gap-2">
|
||
<div class="text-4xl font-semibold tracking-tight text-white">10</div>
|
||
<div class="pb-1 text-sm text-white/60">transactions / month</div>
|
||
</div>
|
||
<ul class="mt-4 space-y-2 text-sm text-white/75">
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />Public receipt pages (no login)</li>
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />HTML fallback for reviewers</li>
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />Best for testing and low volume</li>
|
||
</ul>
|
||
</TileContent>
|
||
<TileActions class="mt-auto w-full">
|
||
<Button class="w-full" size="sm" href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n" target="_blank" rel="noreferrer">
|
||
<Icon name="sparkles" />
|
||
See a live receipt
|
||
</Button>
|
||
</TileActions>
|
||
</Tile>
|
||
|
||
<Tile variant="floating" class="justify-between">
|
||
<TileContent>
|
||
<TileTitle class="text-xl">Monthly</TileTitle>
|
||
<TileDescription>Pick a monthly volume. The slider shows the price.</TileDescription>
|
||
|
||
<div class="mt-5 rounded-xl border border-white/10 bg-white/5 p-4">
|
||
<div class="flex items-center justify-between gap-3">
|
||
<div class="text-sm font-semibold text-white/85">Monthly volume</div>
|
||
<div class="text-xs text-white/60"><span id="plan-volume">100</span> / month</div>
|
||
</div>
|
||
|
||
<input
|
||
id="plan-slider"
|
||
type="range"
|
||
min="0"
|
||
max="3"
|
||
step="1"
|
||
value="0"
|
||
class="mt-4 w-full accent-orange-500"
|
||
aria-label="Monthly plan volume selector"
|
||
/>
|
||
|
||
<div class="mt-2 flex items-center justify-between text-[11px] text-white/55">
|
||
<span>100</span>
|
||
<span>1,000</span>
|
||
<span>10,000</span>
|
||
<span>25,000+</span>
|
||
</div>
|
||
|
||
<div class="mt-5 grid grid-cols-2 gap-3">
|
||
<div class="rounded-lg border border-white/10 bg-slate-950/40 p-3">
|
||
<div class="text-[11px] text-white/60">Price / month</div>
|
||
<div class="mt-1 text-2xl font-semibold tracking-tight text-white" id="plan-monthly">$9.99</div>
|
||
</div>
|
||
<div class="rounded-lg border border-white/10 bg-slate-950/40 p-3">
|
||
<div class="text-[11px] text-white/60">Effective price</div>
|
||
<div class="mt-1 text-2xl font-semibold tracking-tight text-white" id="plan-effective">$0.10</div>
|
||
<div class="text-[11px] text-white/50">per transaction</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="mt-4 space-y-2 text-sm text-white/75">
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />Includes everything in Free</li>
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />Designed for repeated external review</li>
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />Upgrade or switch to pay‑as‑you‑go anytime</li>
|
||
</ul>
|
||
</TileContent>
|
||
<TileActions class="mt-auto w-full">
|
||
<Button class="w-full" size="sm" href="mailto:ds@infrafabric.io?subject=IF.Trace%20monthly%20plan">
|
||
<Icon name="mail" />
|
||
Start monthly plan
|
||
</Button>
|
||
</TileActions>
|
||
</Tile>
|
||
|
||
<Tile variant="floating" class="justify-between">
|
||
<TileContent>
|
||
<TileTitle class="text-xl">Pay‑as‑you‑go</TileTitle>
|
||
<TileDescription>For irregular volume. No monthly commitment.</TileDescription>
|
||
<div class="mt-4 flex items-end gap-2">
|
||
<div class="text-4xl font-semibold tracking-tight text-white">$0.12</div>
|
||
<div class="pb-1 text-sm text-white/60">per transaction</div>
|
||
</div>
|
||
<ul class="mt-4 space-y-2 text-sm text-white/75">
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />Same receipt surface</li>
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />Good for spikes and seasonal workflows</li>
|
||
<li class="flex gap-2"><Icon name="check" class="mt-0.5" />No commitment</li>
|
||
</ul>
|
||
</TileContent>
|
||
<TileActions class="mt-auto w-full">
|
||
<Button class="w-full" size="sm" href="mailto:ds@infrafabric.io?subject=IF.Trace%20paygo">
|
||
<Icon name="mail" />
|
||
Enable pay‑as‑you‑go
|
||
</Button>
|
||
</TileActions>
|
||
</Tile>
|
||
</SectionGrid>
|
||
|
||
<div class="mx-auto mt-10 max-w-3xl text-sm text-white/70">
|
||
<p class="text-white/80 font-semibold">Notes</p>
|
||
<ul class="mt-2 list-disc space-y-1 pl-5">
|
||
<li>We may introduce fair‑use limits (for example: unusually large files or unusually high download volume) to protect reliability.</li>
|
||
<li>We will warn you before applying any new overage pricing.</li>
|
||
</ul>
|
||
<p class="mt-4">
|
||
Terms: <a class="text-primary hover:underline" href="/terms/">/terms/</a>
|
||
</p>
|
||
</div>
|
||
</SectionContent>
|
||
</Section>
|
||
|
||
<script is:inline>
|
||
const tiers = [
|
||
{ volume: 100, monthly: 9.99, effective: 0.0999 },
|
||
{ volume: 1000, rate: 0.07 },
|
||
{ volume: 10000, rate: 0.06 },
|
||
{ volume: 25000, rate: 0.05, plus: true }
|
||
];
|
||
|
||
function money(n) {
|
||
return `$${n.toFixed(2)}`;
|
||
}
|
||
|
||
function money4(n) {
|
||
return `$${n.toFixed(2)}`;
|
||
}
|
||
|
||
function fmtVolume(n, plus) {
|
||
const s = n.toLocaleString("en-US");
|
||
return plus ? `${s}+` : s;
|
||
}
|
||
|
||
function initPricingSlider() {
|
||
const slider = document.getElementById("plan-slider");
|
||
if (!slider) return;
|
||
|
||
const volumeEl = document.getElementById("plan-volume");
|
||
const monthlyEl = document.getElementById("plan-monthly");
|
||
const effectiveEl = document.getElementById("plan-effective");
|
||
|
||
function render() {
|
||
const idx = Number(slider.value || 0);
|
||
const tier = tiers[idx] || tiers[0];
|
||
|
||
const volume = tier.volume;
|
||
const monthly = tier.monthly ?? (volume * (tier.rate ?? 0));
|
||
const effective = monthly / volume;
|
||
|
||
if (volumeEl) volumeEl.textContent = fmtVolume(volume, Boolean(tier.plus));
|
||
if (monthlyEl) monthlyEl.textContent = money(monthly);
|
||
if (effectiveEl) effectiveEl.textContent = money4(effective);
|
||
}
|
||
|
||
slider.addEventListener("input", render);
|
||
render();
|
||
}
|
||
|
||
if (document.readyState === "loading") {
|
||
document.addEventListener("DOMContentLoaded", initPricingSlider);
|
||
} else {
|
||
initPricingSlider();
|
||
}
|
||
document.addEventListener("astro:page-load", initPricingSlider);
|
||
</script>
|
||
</BaseLayout>
|