Skip to content

feat: interactive ROI calculator at /tools/roi + resources hub #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sidneyswift wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: interactive ROI calculator at /tools/roi + resources hub #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d53ed1
feat: interactive ROI calculator at /tools/roi + resources hub
Jul 10, 2026
0a24caa
Merge commit 'd006b9115d16138de4471df95bb5916467efb30b' into feat/roi…
Jul 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,51 @@
background: radial-gradient(ellipse 80% 50% at 50% 0%, #1c1c1c 0%, #111 100%);
}

/* ROI Calculator slider */
.roi-slider {
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 9999px;
background: linear-gradient(
to right,
var(--foreground) 0%,
var(--foreground) var(--slider-pct, 50%),
var(--border) var(--slider-pct, 50%),
var(--border) 100%
);
outline: none;
cursor: pointer;
}

.roi-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--foreground);
border: 2px solid var(--background);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
cursor: grab;
transition: transform 0.15s;
}

.roi-slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.15);
}

.roi-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--foreground);
border: 2px solid var(--background);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
cursor: grab;
}

.dark-section-cta {
background: radial-gradient(ellipse 80% 60% at 50% 100%, #0f0f0f 0%, #060606 100%);
}
Expand Down
83 changes: 74 additions & 9 deletions app/resources/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,88 @@
import type { Metadata } from "next";
import Link from "next/link";
import { siteConfig } from "@/lib/config";
import { buildPageMetadata } from "@/lib/seo";

export const metadata: Metadata = buildPageMetadata({
title: `Resources — Blog & Demos | ${siteConfig.name}`,
title: `Resources — Tools, Blog & More | ${siteConfig.name}`,

@cubic-dev-ai cubic-dev-ai Bot Jul 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Title will render with a duplicated | Recoup suffix. The root layout already applies title: { template: "%s | Recoup" }, so the page-level string Resources — Tools, Blog & More | Recoup gets wrapped again producing Resources — Tools, Blog & More | Recoup | Recoup in the browser tab and OG tags.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At app/resources/page.tsx, line 7:

<comment>Title will render with a duplicated `| Recoup` suffix. The root layout already applies `title: { template: "%s | Recoup" }`, so the page-level string `Resources — Tools, Blog & More | Recoup` gets wrapped again producing `Resources — Tools, Blog & More | Recoup | Recoup` in the browser tab and OG tags.</comment>

<file context>
@@ -1,23 +1,88 @@
 
 export const metadata: Metadata = buildPageMetadata({
-  title: `Resources — Blog & Demos | ${siteConfig.name}`,
+  title: `Resources — Tools, Blog & More | ${siteConfig.name}`,
   description:
-    "Blog posts and demos. Everything you need to run your music business with AI agents — strategy, content, fans, and operations.",
</file context>

description:
"Blog posts and demos. Everything you need to run your music business with AI agents — strategy, content, fans, and operations.",
"Tools, blog posts, playbooks, and demos. Everything you need to run your music business with AI agents.",
path: "/resources",
});

const resources = [
{
title: "ROI Calculator",
description:
"See how much time and money AI agents could save your team. Input your numbers, get your answer.",
href: "/tools/roi",
badge: "New",
},
{
title: "Blog",
description:
"Insights on AI in music, agent architecture, and running a modern label.",
href: "/blog",
},
{
title: "The Playbook",
description:
"A tactical guide to running your music business with AI agents.",
href: "/playbook",
},
{
title: "Demos",
description:
"See Recoup in action. Walkthroughs of agents running real music operations.",
href: "/learn/demos",
},
];

export default function ResourcesPage() {
return (
<div className="max-w-3xl mx-auto px-6 py-32 text-center">
<h1 className="font-pixel text-[clamp(2rem,5vw,3.5rem)] tracking-tight mb-4">
Resources
</h1>
<p className="text-[15px] text-(--foreground)/40 max-w-md mx-auto">
Coming soon.
</p>
<div className="max-w-3xl mx-auto px-6 py-20">
<header className="text-center mb-16">
<h1
className="text-[clamp(2rem,5vw,3.5rem)] font-bold tracking-tight leading-[1.1] mb-4"
style={{ fontFamily: "var(--font-bitmap), monospace" }}
>
Resources
</h1>
<p className="text-[15px] text-[var(--muted-foreground)] max-w-md mx-auto">
Tools, guides, and insights to help you run your music business with
AI.
</p>
</header>

<div className="grid gap-4">
{resources.map((r) => (
<Link
key={r.href}
href={r.href}
className="group flex items-start justify-between gap-4 rounded-xl border border-[var(--border)] p-6 transition-colors hover:bg-[var(--secondary)]"
>
<div>
<div className="flex items-center gap-2 mb-1">
<h2 className="text-base font-semibold">{r.title}</h2>
{r.badge && (
<span
className="text-[9px] uppercase tracking-wider bg-[var(--foreground)] text-[var(--background)] px-2 py-0.5 rounded-full"
style={{ fontFamily: "var(--font-bitmap), monospace" }}
>
{r.badge}
</span>
)}
</div>
<p className="text-[13px] text-[var(--muted-foreground)] leading-relaxed">
{r.description}
</p>
</div>
<span className="text-[var(--muted-foreground)] group-hover:text-[var(--foreground)] transition-colors mt-1 shrink-0">
→
</span>
</Link>
))}
</div>
</div>
);
}
57 changes: 57 additions & 0 deletions app/tools/roi/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import type { Metadata } from "next";
import { buildPageMetadata } from "@/lib/seo";
import { roiCopy } from "@/lib/copy/roi";
import { ROICalculator } from "@/components/roi/ROICalculator";

export const metadata: Metadata = buildPageMetadata({
title: "ROI Calculator — How Much Could You Save? | Recoup",
description:
"Calculate how much time and money AI agents could save your music business. Input your roster size, team costs, and content volume — get your ROI in seconds.",
path: "/tools/roi",
});

export default function ROIPage() {
return (
<div className="max-w-2xl mx-auto px-6 py-20">
{/* Hero */}
<header className="text-center mb-12">
<div className="inline-block rounded-full border border-[var(--border)] px-4 py-1.5 text-xs font-medium tracking-wide uppercase mb-6">
{roiCopy.badge}
</div>
<h1
className="text-[clamp(2rem,5vw,3.5rem)] font-bold tracking-tight leading-[1.1] mb-4"
style={{ fontFamily: "var(--font-bitmap), monospace" }}
>
{roiCopy.headline}
</h1>
<p className="text-[15px] text-[var(--muted-foreground)] max-w-xl mx-auto">
{roiCopy.subheadline}
</p>
</header>

{/* Calculator */}
<ROICalculator />

{/* Methodology */}
<div className="mt-16 pt-12 border-t border-[var(--border)]">
<h2
className="text-[10px] uppercase tracking-widest text-[var(--muted-foreground)] mb-4"
style={{ fontFamily: "var(--font-bitmap), monospace" }}
>
How we calculate
</h2>
<ul className="space-y-2">
{roiCopy.methodology.map((item) => (
<li
key={item}
className="text-[13px] text-[var(--muted-foreground)] flex items-start gap-2"
>
<span className="text-[var(--foreground)] mt-0.5">·</span>
{item}
</li>
))}
</ul>
</div>
</div>
);
}
Loading