Skip to content

Commit aedb14c

Browse files
jahoomajahooma
committed
Update the pricing to advertize codebuff strong
1 parent f68ac73 commit aedb14c

File tree

3 files changed

+100
-71
lines changed

3 files changed

+100
-71
lines changed

‎web/src/app/pricing/pricing-client.tsx‎

Lines changed: 94 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
'use client'
22

33
import { DEFAULT_FREE_CREDITS_GRANT } from '@codebuff/common/old-constants'
4-
import { Gift, Shield, Link2, Zap, Terminal } from 'lucide-react'
4+
import {
5+
SUBSCRIPTION_TIERS,
6+
SUBSCRIPTION_DISPLAY_NAME,
7+
type SubscriptionTierPrice,
8+
} from '@codebuff/common/constants/subscription-plans'
9+
import { Gift, Shield, Sparkles, Zap, Brain } from 'lucide-react'
10+
import Link from 'next/link'
511
import { useSession } from 'next-auth/react'
612

713
import { BlockColor } from '@/components/ui/decorative-blocks'
@@ -62,72 +68,91 @@ function PricingCard() {
6268
)
6369
}
6470

65-
function ClaudeSubscriptionIllustration() {
66-
return (
67-
<div className="flex flex-col items-center text-center">
68-
<div className="flex flex-col items-center space-y-6 w-full max-w-md">
69-
{/* Connection visual */}
70-
<div className="flex items-center justify-center gap-4 w-full">
71-
{/* Claude card */}
72-
<div className="bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg p-4 shadow-lg border border-orange-400/30">
73-
<div className="text-white font-bold text-sm">Claude</div>
74-
<div className="text-white/80 text-xs mt-1">Pro / Max</div>
75-
</div>
76-
77-
{/* Connection arrow */}
78-
<div className="flex items-center">
79-
<div className="w-8 h-0.5 bg-gradient-to-r from-orange-400 to-green-400"></div>
80-
<Link2 className="h-5 w-5 text-green-400 mx-1" />
81-
<div className="w-8 h-0.5 bg-gradient-to-r from-green-400 to-green-500"></div>
82-
</div>
83-
84-
{/* Codebuff card */}
85-
<div className="bg-gradient-to-br from-green-600 to-green-700 rounded-lg p-4 shadow-lg border border-green-400/30">
86-
<div className="text-white font-bold text-sm">Codebuff</div>
87-
<div className="text-white/80 text-xs mt-1">CLI</div>
88-
</div>
89-
</div>
71+
const USAGE_MULTIPLIER: Record<number, string> = {
72+
100: '1×',
73+
200: '3×',
74+
500: '8×',
75+
}
9076

91-
{/* Benefits grid */}
92-
<div className="grid grid-cols-1 gap-3 w-full mt-4">
93-
<div className="flex items-center gap-3 bg-black/30 rounded-lg p-3 border border-white/10">
94-
<div className="p-2 rounded-full bg-green-500/20">
95-
<Zap className="h-4 w-4 text-green-400" />
96-
</div>
97-
<div className="text-left">
98-
<div className="text-sm font-medium text-white">
99-
Save on credits
77+
function StrongSubscriptionIllustration() {
78+
return (
79+
<div className="flex flex-col items-center text-center pt-6">
80+
<div className="bg-black rounded-2xl border border-white/10 shadow-[0_0_60px_rgba(0,255,149,0.08)] p-6 w-full max-w-md">
81+
<div className="flex flex-col items-center space-y-5">
82+
{/* Header with Strong branding */}
83+
<div className="flex flex-col items-center gap-1">
84+
<div className="flex items-center gap-3">
85+
<div className="p-2 rounded-full bg-acid-green/10 border border-acid-green/20">
86+
<Sparkles className="h-5 w-5 text-acid-green" />
10087
</div>
101-
<div className="text-xs text-white/60">
102-
Use your subscription for Claude model requests
88+
<div className="text-xl font-bold text-white">
89+
{SUBSCRIPTION_DISPLAY_NAME} Subscription
10390
</div>
10491
</div>
92+
<div className="text-xs text-white/40">Monthly plans</div>
10593
</div>
10694

107-
<div className="flex items-center gap-3 bg-black/30 rounded-lg p-3 border border-white/10">
108-
<div className="p-2 rounded-full bg-blue-500/20">
109-
<Terminal className="h-4 w-4 text-blue-400" />
95+
{/* Benefits */}
96+
<div className="grid grid-cols-1 gap-2 w-full">
97+
<div className="flex items-center gap-3 bg-white/5 rounded-lg p-3 border border-white/5">
98+
<div className="p-1.5 rounded-full bg-acid-green/10">
99+
<Brain className="h-4 w-4 text-acid-green" />
100+
</div>
101+
<div className="text-left">
102+
<div className="text-sm font-medium text-white">Deep thinking</div>
103+
<div className="text-xs text-white/40">
104+
Multi-agent orchestration for complex tasks
105+
</div>
106+
</div>
110107
</div>
111-
<div className="text-left">
112-
<div className="text-sm font-medium text-white">
113-
Simple CLI setup
108+
109+
<div className="flex items-center gap-3 bg-white/5 rounded-lg p-3 border border-white/5">
110+
<div className="p-1.5 rounded-full bg-acid-green/10">
111+
<Zap className="h-4 w-4 text-acid-green" />
114112
</div>
115-
<div className="text-xs text-white/60">
116-
Connect with one command
113+
<div className="text-left">
114+
<div className="text-sm font-medium text-white">Save on credits</div>
115+
<div className="text-xs text-white/40">
116+
Get more usage compared to pay-as-you-go
117+
</div>
117118
</div>
118119
</div>
119120
</div>
120-
</div>
121121

122-
{/* Code snippet */}
123-
<div className="w-full mt-2 bg-black/50 rounded-lg p-3 border border-white/10 font-mono text-left">
124-
<div className="text-green-400 text-xs">$ codebuff</div>
125-
<div className="text-white/70 text-xs mt-1">
126-
{'>'} /connect:claude
127-
</div>
128-
<div className="text-green-400/80 text-xs mt-1">
129-
✓ Connected to Claude subscription
122+
{/* Pricing tiers */}
123+
<div className="grid grid-cols-3 gap-2 w-full">
124+
{Object.entries(SUBSCRIPTION_TIERS).map(([key, tier]) => {
125+
const price = Number(key) as SubscriptionTierPrice
126+
const isHighlighted = price === 200
127+
128+
return (
129+
<div
130+
key={price}
131+
className={`rounded-lg p-3 border flex flex-col items-center ${
132+
isHighlighted
133+
? 'border-acid-green/30 bg-acid-green/[0.08]'
134+
: 'border-white/10 bg-white/5'
135+
}`}
136+
>
137+
<div className="text-lg font-bold text-white">
138+
${tier.monthlyPrice}
139+
</div>
140+
<div className="text-xs text-white/40">/mo</div>
141+
<div className="text-xs text-white/50 mt-1">
142+
{USAGE_MULTIPLIER[price]} usage
143+
</div>
144+
</div>
145+
)
146+
})}
130147
</div>
148+
149+
{/* CTA */}
150+
<Link
151+
href="/strong"
152+
className="w-full bg-white hover:bg-white/90 text-black font-semibold py-3 px-6 rounded-lg transition-colors text-center"
153+
>
154+
Learn More
155+
</Link>
131156
</div>
132157
</div>
133158
</div>
@@ -222,6 +247,21 @@ export default function PricingClient() {
222247

223248
return (
224249
<>
250+
<FeatureSection
251+
title={<span>Codebuff {SUBSCRIPTION_DISPLAY_NAME}</span>}
252+
description="Deep thinking, multi-agent orchestration, and unlimited potential. Subscribe to save credits with plans starting at $100/mo."
253+
backdropColor={BlockColor.DarkForestGreen}
254+
decorativeColors={[BlockColor.DarkForestGreen, BlockColor.AcidMatrix]}
255+
textColor="text-white"
256+
tagline="POWER SUBSCRIPTION"
257+
highlightText="The strongest coding agent subscription"
258+
highlightIcon="💪"
259+
illustration={<StrongSubscriptionIllustration />}
260+
learnMoreText="Learn More"
261+
learnMoreLink="/strong"
262+
imagePosition="left"
263+
/>
264+
225265
<FeatureSection
226266
title={<span>Simple, Usage-Based Pricing</span>}
227267
description="Get 500 free credits monthly, then pay just 1¢ per credit. Credits are consumed based on task complexity — simple queries cost less, complex changes more. You'll see how many credits each task consumes."
@@ -235,20 +275,6 @@ export default function PricingClient() {
235275
learnMoreLink={status === 'authenticated' ? '/usage' : '/login'}
236276
/>
237277

238-
<FeatureSection
239-
title={<span>Connect Your Claude Subscription</span>}
240-
description="Already have a Claude Pro or Max subscription? Connect it to Codebuff and use your existing subscription for Claude model requests. Note: Using your Claude Pro/Max subscription in Codebuff is not officially supported by Anthropic."
241-
backdropColor={BlockColor.DarkForestGreen}
242-
decorativeColors={[BlockColor.CRTAmber, BlockColor.BetweenGreen]}
243-
textColor="text-white"
244-
tagline="BRING YOUR OWN SUBSCRIPTION"
245-
highlightText="Use your Claude Pro or Max subscription"
246-
illustration={<ClaudeSubscriptionIllustration />}
247-
learnMoreText="View Documentation"
248-
learnMoreLink="/docs"
249-
imagePosition="left"
250-
/>
251-
252278
<FeatureSection
253279
title={<span>Working with others</span>}
254280
description="Collaborate with your team more closely using Codebuff by pooling credits and seeing usage analytics."

‎web/src/components/ui/landing/feature/highlight-text.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { cn } from '@/lib/utils'
55
interface HighlightTextProps {
66
text: string
77
isLight?: boolean
8+
icon?: string
89
}
910

10-
export function HighlightText({ text, isLight }: HighlightTextProps) {
11+
export function HighlightText({ text, isLight, icon = '⚡' }: HighlightTextProps) {
1112
return (
1213
<motion.div
1314
className={cn(
@@ -21,7 +22,7 @@ export function HighlightText({ text, isLight }: HighlightTextProps) {
2122
viewport={{ once: true }}
2223
transition={{ duration: 0.4, delay: 0.5 }}
2324
>
24-
<div className="mr-3 text-xl text-green-400">⚡</div>
25+
<div className="mr-3 text-xl text-green-400">{icon}</div>
2526
<div className="opacity-80">{text}</div>
2627
</motion.div>
2728
)

‎web/src/components/ui/landing/feature/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ interface FeatureSectionProps {
5858
tagline: string
5959
decorativeColors?: BlockColor[]
6060
highlightText: string
61+
highlightIcon?: string
6162
illustration: ReactNode
6263
learnMoreText?: string
6364
learnMoreLink: string
@@ -86,6 +87,7 @@ export function FeatureSection({
8687
tagline,
8788
decorativeColors = [BlockColor.GenerativeGreen, BlockColor.DarkForestGreen],
8889
highlightText,
90+
highlightIcon,
8991
illustration,
9092
learnMoreText = 'Learn More',
9193
learnMoreLink,
@@ -106,7 +108,7 @@ export function FeatureSection({
106108
</span>
107109
</div>
108110

109-
<HighlightText text={highlightText} isLight={isLight} />
111+
<HighlightText text={highlightText} isLight={isLight} icon={highlightIcon} />
110112

111113
<p className="text-lg leading-relaxed opacity-70 font-paragraph">
112114
{description}

0 commit comments

Comments
 (0)