Add standalone /subscribe page which only has buttons to subscribe. Remove buy-credits slash command.

jahooma · jahooma · commit 86b012e3ebe2 · 2026-02-06T20:36:16.000-08:00
diff --git a/cli/src/commands/command-registry.ts b/cli/src/commands/command-registry.ts
@@ -384,17 +384,9 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
   }),
   defineCommand({
     name: 'subscribe',
-    aliases: ['strong'],
+    aliases: ['strong', 'sub', 'buy-credits'],
     handler: (params) => {
-      open(WEBSITE_URL + '/pricing')
-      clearInput(params)
-    },
-  }),
-  defineCommand({
-    name: 'buy-credits',
-    handler: (params) => {
-      open(WEBSITE_URL + '/profile?tab=usage')
-      // Don't save to history.
+      open(WEBSITE_URL + '/subscribe')
       clearInput(params)
     },
   }),
diff --git a/cli/src/components/help-banner.tsx b/cli/src/components/help-banner.tsx
@@ -77,14 +77,14 @@ export const HelpBanner = () => {
             <box style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1 }}>
               <text style={{ fg: theme.foreground }}>1 credit = 1 cent</text>
               <text style={{ fg: theme.muted }}>·</text>
-              <text style={{ fg: theme.foreground }}>/buy-credits</text>
+              <text style={{ fg: theme.foreground }}>/subscribe</text>
               <text style={{ fg: theme.muted }}>·</text>
               <text style={{ fg: theme.foreground }}>/usage</text>
               <text style={{ fg: theme.muted }}>·</text>
               <text style={{ fg: theme.foreground }}>/ads:enable</text>
             </box>
             <text style={{ fg: theme.muted }}>
-              Connect your Claude subscription for Default & Max modes
+              Subscribe for the best credit rates — /subscribe
             </text>
           </box>
         </box>
diff --git a/cli/src/components/subscription-limit-banner.tsx b/cli/src/components/subscription-limit-banner.tsx
@@ -62,7 +62,7 @@ export const SubscriptionLimitBanner = () => {
   }
 
   const handleUpgrade = () => {
-    open(WEBSITE_URL + '/pricing')
+    open(WEBSITE_URL + '/subscribe')
   }
 
   const borderColor = isWeeklyLimit ? theme.error : theme.warning
diff --git a/cli/src/data/slash-commands.ts b/cli/src/data/slash-commands.ts
@@ -76,13 +76,8 @@ export const SLASH_COMMANDS: SlashCommand[] = [
   {
     id: 'subscribe',
     label: 'subscribe',
-    description: 'Subscribe to Codebuff Strong',
-    aliases: ['strong'],
-  },
-  {
-    id: 'buy-credits',
-    label: 'buy-credits',
-    description: 'Open the usage page to buy credits',
+    description: 'Subscribe to get more usage',
+    aliases: ['strong', 'sub', 'buy-credits'],
   },
   {
     id: 'new',
diff --git a/web/src/app/pricing/pricing-client.tsx b/web/src/app/pricing/pricing-client.tsx
@@ -10,7 +10,7 @@ import { env } from '@codebuff/common/env'
 import { loadStripe } from '@stripe/stripe-js'
 import { motion } from 'framer-motion'
 import { Gift, Shield, Loader2 } from 'lucide-react'
-import { useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import { useState } from 'react'
 import { useQuery, useMutation } from '@tanstack/react-query'
@@ -67,6 +67,7 @@ function SubscribeButton({
 }) {
   const { status } = useSession()
   const router = useRouter()
+  const pathname = usePathname()
   const [isLoading, setIsLoading] = useState(false)
 
   const action = getButtonAction(tier, currentTier)
@@ -100,7 +101,7 @@ function SubscribeButton({
 
   const handleClick = async () => {
     if (status !== 'authenticated') {
-      router.push('/login?callbackUrl=/pricing')
+      router.push(`/login?callbackUrl=${pathname ?? '/pricing'}`)
       return
     }
 
@@ -251,13 +252,13 @@ function PricingCardsGrid() {
   )
 }
 
-function StrongHeroSection() {
+export function StrongHeroSection({ compact }: { compact?: boolean }) {
   return (
     <Section
       background={SECTION_THEMES.hero.background}
       hero
       fullViewport
-      className="overflow-hidden"
+      className={cn('overflow-hidden', compact && '!pt-0 !pb-0')}
     >
       {/* Subtle radial glow behind content */}
       <div
@@ -324,7 +325,7 @@ function StrongHeroSection() {
       </motion.div>
 
       {/* Foreground content */}
-      <div className="codebuff-container min-h-[calc(95dvh-64px)] flex flex-col items-center justify-center relative z-10 py-12">
+      <div className="codebuff-container min-h-dvh flex flex-col items-center justify-center relative z-10 py-8">
         <div className="flex flex-col items-center text-center max-w-4xl w-full space-y-12">
           <motion.h1
             className="text-4xl sm:text-5xl md:text-5xl font-bold text-white tracking-tight"
@@ -372,30 +373,9 @@ function CreditVisual() {
           </span>
         </div>
         <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-green-400/40 to-transparent"></div>
-
-        {/* Grid with improved spacing for mobile and desktop */}
-        <div className="grid grid-cols-2 gap-x-10 gap-y-6 sm:gap-x-16">
-          <div className="flex flex-col items-center group">
-            <div className="p-2 rounded-full bg-blue-500/10 mb-2">
-              <Gift className="h-5 w-5 text-blue-400" />
-            </div>
-            <div className="text-lg font-bold text-blue-400">
-              {DEFAULT_FREE_CREDITS_GRANT}
-            </div>
-            <div className="text-xs sm:text-sm text-white/70">Free monthly</div>
-          </div>
-
-          <div className="flex flex-col items-center group">
-            <div className="p-2 rounded-full bg-purple-500/10 mb-2">
-              <Shield className="h-5 w-5 text-purple-400" />
-            </div>
-            <div className="text-lg font-bold text-white">∞</div>
-            <div className="text-xs sm:text-sm text-white/70">Never expire</div>
-          </div>
-        </div>
       </div>
 
-      <div className="mt-8 text-sm text-white/90 max-w-sm border border-white/20 rounded-md p-3 bg-white/5">
+      <div className="mt-8 text-sm text-white/90 max-w-sm rounded-md p-3 bg-white/5">
         <span>
           {DEFAULT_FREE_CREDITS_GRANT} credits is typically enough for
         </span>{' '}
@@ -505,12 +485,11 @@ export default function PricingClient() {
     <>
       <StrongHeroSection />
 
-      {/* Visual divider between hero and feature section */}
       <div className="h-px bg-gradient-to-r from-transparent via-green-500/30 to-transparent" />
 
       <FeatureSection
         title={<span>Usage-Based Pricing</span>}
-        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."
+        description="After free credits, 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."
         backdropColor={SECTION_THEMES.competition.background}
         decorativeColors={[BlockColor.GenerativeGreen, BlockColor.AcidMatrix]}
         textColor="text-white"
diff --git a/web/src/app/profile/components/subscription-section.tsx b/web/src/app/profile/components/subscription-section.tsx
@@ -190,7 +190,7 @@ function SubscriptionCta() {
           </div>
         </div>
         <Button asChild className="bg-acid-green text-black hover:bg-acid-green/90 shadow-[0_0_20px_rgba(0,255,149,0.2)] hover:shadow-[0_0_30px_rgba(0,255,149,0.3)] transition-all duration-200">
-          <Link href="/pricing">Learn More</Link>
+          <Link href="/subscribe">Learn More</Link>
         </Button>
       </CardContent>
     </Card>
diff --git a/web/src/app/referrals/[code]/page.tsx b/web/src/app/referrals/[code]/page.tsx
@@ -100,7 +100,7 @@ export default async function ReferralPage({
             </p>
             <div className="flex justify-center mt-4">
               <Button asChild>
-<Link href="/pricing">View Pricing</Link>
+<Link href="/subscribe">View Pricing</Link>
               </Button>
             </div>
           </>
diff --git a/web/src/app/subscribe/page.tsx b/web/src/app/subscribe/page.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from 'next'
+
+import SubscribeClient from './subscribe-client'
+
+export const metadata: Metadata = {
+  title: 'Subscribe | Codebuff',
+  description: 'Subscribe to Codebuff for the best credit rates.',
+}
+
+export const dynamic = 'force-static'
+
+export default function SubscribePage() {
+  return <SubscribeClient />
+}
diff --git a/web/src/app/subscribe/subscribe-client.tsx b/web/src/app/subscribe/subscribe-client.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { StrongHeroSection } from '../pricing/pricing-client'
+
+export default function SubscribeClient() {
+  return (
+    <div className="h-dvh overflow-hidden">
+      <StrongHeroSection compact />
+    </div>
+  )
+}
diff --git a/web/src/components/footer.tsx b/web/src/components/footer.tsx
@@ -44,11 +44,13 @@ const publicPaths = [
   .map((link) => link.href)
   .filter((href) => !href.startsWith('http'))
 
+const FOOTER_HIDDEN_PATHS = ['/subscribe']
+
 export const Footer = () => {
   const pathname = usePathname() ?? '/'
   const isPublicPage = publicPaths.includes(pathname)
 
-  if (!isPublicPage) {
+  if (!isPublicPage || FOOTER_HIDDEN_PATHS.includes(pathname)) {
     return null
   }
 
diff --git a/web/src/components/navbar/navbar.tsx b/web/src/components/navbar/navbar.tsx
@@ -3,6 +3,7 @@
 import { Menu, DollarSign, LogIn, BarChart2, BookHeart } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 
 
@@ -19,9 +20,14 @@ import { Skeleton } from '../ui/skeleton'
 
 import { cn } from '@/lib/utils'
 
+const HIDDEN_PATHS = ['/subscribe']
+
 export const Navbar = () => {
+  const pathname = usePathname()
   const { data: session, status } = useSession()
 
+  if (pathname && HIDDEN_PATHS.includes(pathname)) return null
+
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto px-4 py-3 flex justify-between items-center">
diff --git a/web/src/components/ui/banner.tsx b/web/src/components/ui/banner.tsx
@@ -5,7 +5,7 @@ import { CREDITS_REFERRAL_BONUS } from '@codebuff/common/old-constants'
 import { capitalize } from '@codebuff/common/util/string'
 import { X, Gift } from 'lucide-react'
 import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import posthog from 'posthog-js'
 import { Suspense, useState } from 'react'
@@ -16,12 +16,14 @@ import { useUserProfile } from '@/hooks/use-user-profile'
 
 function BannerContent() {
   const [isVisible, setIsVisible] = useState(true)
+  const pathname = usePathname()
   const searchParams = useSearchParams() ?? new URLSearchParams()
   const referrer = searchParams.get('referrer')
   const { data: session } = useSession()
 
   const { data: userProfile } = useUserProfile()
 
+  if (pathname === '/subscribe') return null
   if (!isVisible || !session?.user || !userProfile) return null
 
   // Check if account is less than a week old

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ export const SubscriptionLimitBanner = () => {`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`const handleUpgrade = () => {`
`65`		`- open(WEBSITE_URL + '/pricing')`
	`65`	`+ open(WEBSITE_URL + '/subscribe')`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`const borderColor = isWeeklyLimit ? theme.error : theme.warning`