Skip to content

Commit dca6674

Browse files
DevanshuNEUDevanshuNEU
committed
feat(landing): add pricing section with 3 tiers
- Free: 3 repos, public only, community support - Pro $19/mo: unlimited repos, private, API, MCP (waitlist) - Enterprise: self-host, SSO, dedicated support - highlighted Pro tier with badge - animated cards with stagger reveal
1 parent a2d185f commit dca6674

3 files changed

Lines changed: 176 additions & 1 deletion

File tree

‎frontend/src/components/landing/Pricing.tsx‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import { motion } from 'framer-motion'
2+
import { Check, Sparkles } from 'lucide-react'
3+
4+
const TIERS = [
5+
{
6+
name: 'Free',
7+
price: '$0',
8+
period: 'forever',
9+
description: 'For open source and small projects',
10+
features: [
11+
'Up to 3 repositories',
12+
'Semantic code search',
13+
'Dependency graph',
14+
'Community support',
15+
'Public repos only',
16+
],
17+
cta: 'Get Started',
18+
ctaLink: '/signup',
19+
highlighted: false,
20+
},
21+
{
22+
name: 'Pro',
23+
price: '$19',
24+
period: '/month',
25+
description: 'For professional developers',
26+
features: [
27+
'Unlimited repositories',
28+
'Private repo support',
29+
'API access',
30+
'MCP integration',
31+
'Priority support',
32+
'Advanced analytics',
33+
],
34+
cta: 'Join Waitlist',
35+
ctaLink: '/waitlist',
36+
highlighted: true,
37+
badge: 'Most Popular',
38+
},
39+
{
40+
name: 'Enterprise',
41+
price: 'Custom',
42+
period: '',
43+
description: 'For teams with advanced needs',
44+
features: [
45+
'Self-hosted deployment',
46+
'SSO / SAML',
47+
'Dedicated support',
48+
'Custom integrations',
49+
'SLA guarantee',
50+
'Onboarding assistance',
51+
],
52+
cta: 'Contact Sales',
53+
ctaLink: 'mailto:devanshurajesh@gmail.com?subject=CodeIntel Enterprise',
54+
highlighted: false,
55+
},
56+
]
57+
58+
const containerVariants = {
59+
hidden: { opacity: 0 },
60+
visible: {
61+
opacity: 1,
62+
transition: { staggerChildren: 0.1 }
63+
}
64+
}
65+
66+
const itemVariants = {
67+
hidden: { opacity: 0, y: 20 },
68+
visible: { opacity: 1, y: 0 }
69+
}
70+
71+
export function Pricing() {
72+
return (
73+
<section id="pricing" className="py-24 px-6 relative">
74+
<div className="max-w-5xl mx-auto">
75+
{/* Section header */}
76+
<motion.div
77+
className="text-center mb-16"
78+
initial={{ opacity: 0, y: 20 }}
79+
whileInView={{ opacity: 1, y: 0 }}
80+
viewport={{ once: true, margin: "-100px" }}
81+
transition={{ duration: 0.5 }}
82+
>
83+
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
84+
Simple, transparent pricing
85+
</h2>
86+
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
87+
Start free, upgrade when you need more. No hidden fees, no surprises.
88+
</p>
89+
</motion.div>
90+
91+
{/* Pricing cards */}
92+
<motion.div
93+
className="grid md:grid-cols-3 gap-6 lg:gap-8"
94+
variants={containerVariants}
95+
initial="hidden"
96+
whileInView="visible"
97+
viewport={{ once: true, margin: "-50px" }}
98+
>
99+
{TIERS.map((tier) => (
100+
<motion.div
101+
key={tier.name}
102+
variants={itemVariants}
103+
className={`
104+
relative p-6 rounded-2xl border transition-all duration-300
105+
${tier.highlighted
106+
? 'border-accent/50 bg-accent/[0.03] scale-[1.02] shadow-xl shadow-accent/10'
107+
: 'border-white/[0.08] dark:border-white/[0.08] light:border-black/[0.08] bg-card/30 hover:border-white/[0.12] dark:hover:border-white/[0.12]'
108+
}
109+
`}
110+
>
111+
{/* Badge */}
112+
{tier.badge && (
113+
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
114+
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-accent text-white text-xs font-medium">
115+
<Sparkles className="w-3 h-3" />
116+
{tier.badge}
117+
</div>
118+
</div>
119+
)}
120+
121+
{/* Header */}
122+
<div className="mb-6">
123+
<h3 className="text-lg font-semibold text-foreground mb-1">{tier.name}</h3>
124+
<p className="text-sm text-muted-foreground">{tier.description}</p>
125+
</div>
126+
127+
{/* Price */}
128+
<div className="mb-6">
129+
<span className="text-4xl font-bold text-foreground">{tier.price}</span>
130+
<span className="text-muted-foreground">{tier.period}</span>
131+
</div>
132+
133+
{/* Features */}
134+
<ul className="space-y-3 mb-8">
135+
{tier.features.map((feature) => (
136+
<li key={feature} className="flex items-start gap-3 text-sm">
137+
<Check className={`w-4 h-4 mt-0.5 flex-shrink-0 ${tier.highlighted ? 'text-accent' : 'text-emerald-400'}`} />
138+
<span className="text-muted-foreground">{feature}</span>
139+
</li>
140+
))}
141+
</ul>
142+
143+
{/* CTA */}
144+
<a
145+
href={tier.ctaLink}
146+
className={`
147+
block w-full py-3 px-4 rounded-lg text-center text-sm font-medium transition-all
148+
${tier.highlighted
149+
? 'bg-accent hover:bg-accent/90 text-white shadow-lg shadow-accent/20'
150+
: 'border border-white/[0.1] dark:border-white/[0.1] light:border-black/[0.1] text-foreground hover:bg-white/5 dark:hover:bg-white/5 light:hover:bg-black/5'
151+
}
152+
`}
153+
>
154+
{tier.cta}
155+
</a>
156+
</motion.div>
157+
))}
158+
</motion.div>
159+
160+
{/* Footer note */}
161+
<motion.p
162+
className="text-center text-sm text-muted-foreground/60 mt-10"
163+
initial={{ opacity: 0 }}
164+
whileInView={{ opacity: 1 }}
165+
viewport={{ once: true }}
166+
transition={{ delay: 0.3 }}
167+
>
168+
All plans include 14-day money-back guarantee. Prices in USD.
169+
</motion.p>
170+
</div>
171+
</section>
172+
)
173+
}

‎frontend/src/components/landing/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ export { ThemeToggle } from './ThemeToggle'
1111
export { GitHubStars } from './GitHubStars'
1212
export { MobileMenu } from './MobileMenu'
1313
export { Features } from './Features'
14+
export { Pricing } from './Pricing'

‎frontend/src/pages/LandingPage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect } from 'react'
22
import { useNavigate } from 'react-router-dom'
3-
import { Navbar, Hero, ResultsView, Features } from '@/components/landing'
3+
import { Navbar, Hero, ResultsView, Features, Pricing } from '@/components/landing'
44
import { API_URL } from '@/config/api'
55
import { playgroundAPI } from '@/services/playground-api'
66
import type { SearchResult } from '@/types'
@@ -116,6 +116,7 @@ export function LandingPage() {
116116
<>
117117
<Hero onResultsReady={handleHeroResults} />
118118
<Features />
119+
<Pricing />
119120
</>
120121
)}
121122
</div>

0 commit comments

Comments
 (0)