diff --git a/apps/marketing/src/components/GitHubStarsButton.tsx b/apps/marketing/src/components/GitHubStarsButton.tsx
index 4f1dba0..5d9b35b 100644
--- a/apps/marketing/src/components/GitHubStarsButton.tsx
+++ b/apps/marketing/src/components/GitHubStarsButton.tsx
@@ -1,6 +1,6 @@
import { Button } from "@usesend/ui/src/button";
-const REPO = "unsend-dev/unsend";
+const REPO = "usesend/usesend";
const REPO_URL = `https://github.com/${REPO}`;
const API_URL = `https://api.github.com/repos/${REPO}`;
const REVALIDATE_SECONDS = 60 * 60 * 24 * 7; // 7 days
diff --git a/apps/marketing/src/components/PricingCalculator.tsx b/apps/marketing/src/components/PricingCalculator.tsx
new file mode 100644
index 0000000..9f2b338
--- /dev/null
+++ b/apps/marketing/src/components/PricingCalculator.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import React from "react";
+
+type SliderProps = {
+ label: string;
+ value: number;
+ onChange: (v: number) => void;
+ min?: number;
+ max?: number;
+ step?: number;
+ suffix?: string;
+};
+
+function Slider({
+ label,
+ value,
+ onChange,
+ min = 0,
+ max = 100000,
+ step = 500,
+ suffix = "",
+}: SliderProps) {
+ const id = React.useId();
+ const [dragging, setDragging] = React.useState(false);
+ const percent = Math.max(
+ 0,
+ Math.min(100, ((value - min) / (max - min)) * 100)
+ );
+
+ React.useEffect(() => {
+ if (!dragging) return;
+ const stop = () => setDragging(false);
+ window.addEventListener("mouseup", stop);
+ window.addEventListener("touchend", stop);
+ window.addEventListener("pointerup", stop);
+ return () => {
+ window.removeEventListener("mouseup", stop);
+ window.removeEventListener("touchend", stop);
+ window.removeEventListener("pointerup", stop);
+ };
+ }, [dragging]);
+
+ return (
+
+
+
+
+ {value.toLocaleString()} {suffix}
+
+
+
+
onChange(Number(e.target.value))}
+ onMouseDown={() => setDragging(true)}
+ onTouchStart={() => setDragging(true)}
+ onPointerDown={() => setDragging(true)}
+ className="w-full accent-primary"
+ aria-label={label}
+ aria-valuetext={`${value.toLocaleString()} ${suffix}`}
+ />
+ {dragging && (
+
+
+ {value.toLocaleString()} {suffix}
+
+
+ )}
+
+
+ );
+}
+
+export function PricingCalculator() {
+ // Rates from pricing copy
+ const MARKETING_RATE = 0.001; // $ per marketing email
+ const TRANSACTIONAL_RATE = 0.0004; // $ per transactional email
+ const MINIMUM_SPEND = 10; // $ minimum monthly spend
+
+ // Defaults chosen to total $10: 8000*$0.001 + 5000*$0.0004 = 10
+ const [marketing, setMarketing] = React.useState
(5000);
+ const [transactional, setTransactional] = React.useState(12500);
+
+ const marketingCost = marketing * MARKETING_RATE;
+ const transactionalCost = transactional * TRANSACTIONAL_RATE;
+ const subtotal = marketingCost + transactionalCost;
+ const totalDue = Math.max(subtotal, MINIMUM_SPEND);
+
+ return (
+
+
+
+
+
+
+ Pricing Calculator
+
+
+ Drag the sliders to estimate your monthly cost.
+
+
+
+
+
+
+
+
+
+
+
Marketing
+
+ ${marketingCost.toFixed(2)}
+
+
+ @ ${MARKETING_RATE.toFixed(4)} each
+
+
+
+
+ Transactional
+
+
+ ${transactionalCost.toFixed(2)}
+
+
+ @ ${TRANSACTIONAL_RATE.toFixed(4)} each
+
+
+
+
+ Estimated Total
+
+
+ ${totalDue.toFixed(2)}
+
+
+ {subtotal < MINIMUM_SPEND
+ ? "Minimum $10 applies"
+ : "before taxes"}
+
+
+
+
+
+
+