Skip to content

Commit 95b2a66

Browse files
DevanshuNEUDevanshuNEU
committed
feat(landing): add FAQ section and footer
- FAQ: 5 common questions with accordion - Footer: product/company/legal links, social icons - wired into landing page flow - minor Pricing cleanup
1 parent dca6674 commit 95b2a66

5 files changed

Lines changed: 250 additions & 56 deletions

File tree

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { motion } from 'framer-motion'
2+
import {
3+
Accordion,
4+
AccordionContent,
5+
AccordionItem,
6+
AccordionTrigger,
7+
} from '@/components/ui/accordion'
8+
9+
const FAQS = [
10+
{
11+
q: 'How is this different from GitHub search or grep?',
12+
a: 'Traditional search matches keywords. CodeIntel understands what code does. Search "retry logic with backoff" and find it even if it\'s named `make_request`. We use embeddings trained on code semantics.',
13+
},
14+
{
15+
q: 'What languages do you support?',
16+
a: 'Python with full Flask, FastAPI, and Django support. TypeScript/JavaScript coming soon, then Go and Rust. Our architecture is language-agnostic — just need parsers.',
17+
},
18+
{
19+
q: 'How does MCP integration work?',
20+
a: 'CodeIntel runs an MCP server that AI tools like Claude and Cursor can connect to. Your AI assistant gets semantic search over your codebase — finds relevant code automatically.',
21+
},
22+
{
23+
q: 'Is my code stored on your servers?',
24+
a: 'We store vector embeddings (not raw code) which you can delete anytime. For maximum privacy, self-host — your code never leaves your infrastructure.',
25+
},
26+
{
27+
q: 'How fast is indexing?',
28+
a: 'Most repos under 100k lines index in under 2 minutes. Incremental updates only process changed files. Search returns in under 100ms regardless of codebase size.',
29+
},
30+
]
31+
32+
export function FAQ() {
33+
return (
34+
<section id="faq" className="py-24 px-6 relative">
35+
<div className="max-w-3xl mx-auto">
36+
<motion.div
37+
className="text-center mb-12"
38+
initial={{ opacity: 0, y: 20 }}
39+
whileInView={{ opacity: 1, y: 0 }}
40+
viewport={{ once: true, margin: "-100px" }}
41+
transition={{ duration: 0.5 }}
42+
>
43+
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
44+
Questions? Answers.
45+
</h2>
46+
</motion.div>
47+
48+
<motion.div
49+
initial={{ opacity: 0, y: 20 }}
50+
whileInView={{ opacity: 1, y: 0 }}
51+
viewport={{ once: true, margin: "-50px" }}
52+
transition={{ duration: 0.5, delay: 0.1 }}
53+
>
54+
<Accordion type="single" collapsible className="space-y-3">
55+
{FAQS.map((faq, i) => (
56+
<AccordionItem
57+
key={i}
58+
value={`faq-${i}`}
59+
className="border border-white/[0.06] dark:border-white/[0.06] light:border-black/[0.06] rounded-xl px-6 bg-card/20"
60+
>
61+
<AccordionTrigger className="text-left text-foreground hover:no-underline py-5 text-[15px]">
62+
{faq.q}
63+
</AccordionTrigger>
64+
<AccordionContent className="text-muted-foreground pb-5 leading-relaxed text-sm">
65+
{faq.a}
66+
</AccordionContent>
67+
</AccordionItem>
68+
))}
69+
</Accordion>
70+
</motion.div>
71+
72+
<motion.p
73+
className="text-center text-sm text-muted-foreground mt-10"
74+
initial={{ opacity: 0 }}
75+
whileInView={{ opacity: 1 }}
76+
viewport={{ once: true }}
77+
transition={{ delay: 0.3 }}
78+
>
79+
More questions?{' '}
80+
<a href="mailto:devanshurajesh@gmail.com" className="text-accent hover:underline">
81+
Get in touch
82+
</a>
83+
</motion.p>
84+
</div>
85+
</section>
86+
)
87+
}

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { Github, Twitter } from 'lucide-react'
2+
3+
const LINKS = {
4+
product: [
5+
{ label: 'Features', href: '#features' },
6+
{ label: 'Pricing', href: '#pricing' },
7+
{ label: 'Docs', href: '/docs' },
8+
{ label: 'Changelog', href: '/changelog' },
9+
],
10+
company: [
11+
{ label: 'About', href: '/about' },
12+
{ label: 'Blog', href: '/blog' },
13+
{ label: 'Careers', href: '/careers' },
14+
],
15+
legal: [
16+
{ label: 'Privacy', href: '/privacy' },
17+
{ label: 'Terms', href: '/terms' },
18+
],
19+
}
20+
21+
export function Footer() {
22+
return (
23+
<footer className="border-t border-white/[0.06] dark:border-white/[0.06] light:border-black/[0.06] py-12 px-6">
24+
<div className="max-w-6xl mx-auto">
25+
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
26+
{/* Brand */}
27+
<div className="col-span-2 md:col-span-1">
28+
<div className="flex items-center gap-2 mb-4">
29+
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-indigo-500 flex items-center justify-center text-white text-sm font-bold">
30+
CI
31+
</div>
32+
<span className="font-semibold text-foreground">CodeIntel</span>
33+
</div>
34+
<p className="text-sm text-muted-foreground mb-4">
35+
Semantic code search that actually understands your codebase.
36+
</p>
37+
<div className="flex gap-4">
38+
<a
39+
href="https://github.com/OpenCodeIntel/opencodeintel"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="text-muted-foreground hover:text-foreground transition-colors"
43+
>
44+
<Github className="w-5 h-5" />
45+
</a>
46+
<a
47+
href="https://twitter.com/codeintel"
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
className="text-muted-foreground hover:text-foreground transition-colors"
51+
>
52+
<Twitter className="w-5 h-5" />
53+
</a>
54+
</div>
55+
</div>
56+
57+
{/* Product */}
58+
<div>
59+
<h4 className="text-sm font-semibold text-foreground mb-4">Product</h4>
60+
<ul className="space-y-3">
61+
{LINKS.product.map((link) => (
62+
<li key={link.href}>
63+
<a href={link.href} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
64+
{link.label}
65+
</a>
66+
</li>
67+
))}
68+
</ul>
69+
</div>
70+
71+
{/* Company */}
72+
<div>
73+
<h4 className="text-sm font-semibold text-foreground mb-4">Company</h4>
74+
<ul className="space-y-3">
75+
{LINKS.company.map((link) => (
76+
<li key={link.href}>
77+
<a href={link.href} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
78+
{link.label}
79+
</a>
80+
</li>
81+
))}
82+
</ul>
83+
</div>
84+
85+
{/* Legal */}
86+
<div>
87+
<h4 className="text-sm font-semibold text-foreground mb-4">Legal</h4>
88+
<ul className="space-y-3">
89+
{LINKS.legal.map((link) => (
90+
<li key={link.href}>
91+
<a href={link.href} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
92+
{link.label}
93+
</a>
94+
</li>
95+
))}
96+
</ul>
97+
</div>
98+
</div>
99+
100+
{/* Bottom bar */}
101+
<div className="pt-8 border-t border-white/[0.06] dark:border-white/[0.06] light:border-black/[0.06] flex flex-col md:flex-row justify-between items-center gap-4">
102+
<p className="text-sm text-muted-foreground/60">
103+
© {new Date().getFullYear()} CodeIntel. Open source under MIT.
104+
</p>
105+
<p className="text-sm text-muted-foreground/60">
106+
Built with ❤️ by <a href="https://github.com/DevanshuNEU" className="hover:text-foreground transition-colors">Devanshu</a>
107+
</p>
108+
</div>
109+
</div>
110+
</footer>
111+
)
112+
}

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

Lines changed: 46 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,57 @@
11
import { motion } from 'framer-motion'
22
import { Check, Sparkles } from 'lucide-react'
33

4-
const TIERS = [
4+
const PLANS = [
55
{
66
name: 'Free',
77
price: '$0',
88
period: 'forever',
9-
description: 'For open source and small projects',
9+
description: 'For open source and hobby projects',
1010
features: [
1111
'Up to 3 repositories',
1212
'Semantic code search',
13-
'Dependency graph',
13+
'Dependency visualization',
1414
'Community support',
1515
'Public repos only',
1616
],
1717
cta: 'Get Started',
18-
ctaLink: '/signup',
19-
highlighted: false,
18+
ctaHref: '/signup',
19+
popular: false,
2020
},
2121
{
2222
name: 'Pro',
2323
price: '$19',
2424
period: '/month',
25-
description: 'For professional developers',
25+
description: 'For professional developers and small teams',
2626
features: [
2727
'Unlimited repositories',
2828
'Private repo support',
2929
'API access',
30-
'MCP integration',
31-
'Priority support',
32-
'Advanced analytics',
30+
'MCP server integration',
31+
'Priority indexing',
32+
'Email support',
3333
],
3434
cta: 'Join Waitlist',
35-
ctaLink: '/waitlist',
36-
highlighted: true,
37-
badge: 'Most Popular',
35+
ctaHref: '/waitlist',
36+
popular: true,
37+
badge: 'Coming Soon',
3838
},
3939
{
4040
name: 'Enterprise',
4141
price: 'Custom',
4242
period: '',
43-
description: 'For teams with advanced needs',
43+
description: 'For teams that need full control',
4444
features: [
4545
'Self-hosted deployment',
46-
'SSO / SAML',
46+
'SSO / SAML authentication',
4747
'Dedicated support',
4848
'Custom integrations',
4949
'SLA guarantee',
50-
'Onboarding assistance',
50+
'On-premise option',
5151
],
5252
cta: 'Contact Sales',
53-
ctaLink: 'mailto:devanshurajesh@gmail.com?subject=CodeIntel Enterprise',
54-
highlighted: false,
53+
ctaHref: 'mailto:devanshurajesh@gmail.com?subject=CodeIntel%20Enterprise',
54+
popular: false,
5555
},
5656
]
5757

@@ -84,7 +84,7 @@ export function Pricing() {
8484
Simple, transparent pricing
8585
</h2>
8686
<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.
87+
Start free, upgrade when you need more. No hidden fees.
8888
</p>
8989
</motion.div>
9090

@@ -96,76 +96,67 @@ export function Pricing() {
9696
whileInView="visible"
9797
viewport={{ once: true, margin: "-50px" }}
9898
>
99-
{TIERS.map((tier) => (
99+
{PLANS.map((plan) => (
100100
<motion.div
101-
key={tier.name}
101+
key={plan.name}
102102
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-
`}
103+
className={`relative p-6 lg:p-8 rounded-2xl border transition-all duration-300 ${
104+
plan.popular
105+
? 'border-accent bg-accent/5 shadow-lg shadow-accent/10'
106+
: 'border-white/[0.08] dark:border-white/[0.08] light:border-black/[0.08] bg-card/30 hover:bg-card/50'
107+
}`}
110108
>
111-
{/* Badge */}
112-
{tier.badge && (
109+
{/* Popular badge */}
110+
{plan.badge && (
113111
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
114112
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-accent text-white text-xs font-medium">
115113
<Sparkles className="w-3 h-3" />
116-
{tier.badge}
114+
{plan.badge}
117115
</div>
118116
</div>
119117
)}
120118

121-
{/* Header */}
122119
<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>
120+
<h3 className="text-xl font-semibold text-foreground mb-2">{plan.name}</h3>
121+
<div className="flex items-baseline gap-1">
122+
<span className="text-4xl font-bold text-foreground">{plan.price}</span>
123+
{plan.period && <span className="text-muted-foreground">{plan.period}</span>}
124+
</div>
125+
<p className="text-sm text-muted-foreground mt-2">{plan.description}</p>
131126
</div>
132127

133-
{/* Features */}
134128
<ul className="space-y-3 mb-8">
135-
{tier.features.map((feature) => (
129+
{plan.features.map((feature) => (
136130
<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'}`} />
131+
<Check className="w-4 h-4 text-emerald-400 mt-0.5 shrink-0" />
138132
<span className="text-muted-foreground">{feature}</span>
139133
</li>
140134
))}
141135
</ul>
142136

143-
{/* CTA */}
144137
<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-
`}
138+
href={plan.ctaHref}
139+
className={`block w-full py-3 px-4 rounded-lg text-center text-sm font-medium transition-all ${
140+
plan.popular
141+
? 'bg-accent text-white hover:bg-accent/90 shadow-lg shadow-accent/20'
142+
: 'border border-white/10 dark:border-white/10 light:border-black/10 text-foreground hover:bg-white/5 dark:hover:bg-white/5 light:hover:bg-black/5'
143+
}`}
153144
>
154-
{tier.cta}
145+
{plan.cta}
155146
</a>
156147
</motion.div>
157148
))}
158149
</motion.div>
159150

160-
{/* Footer note */}
151+
{/* Bottom note */}
161152
<motion.p
162-
className="text-center text-sm text-muted-foreground/60 mt-10"
153+
className="text-center text-sm text-muted-foreground/60 mt-8"
163154
initial={{ opacity: 0 }}
164155
whileInView={{ opacity: 1 }}
165156
viewport={{ once: true }}
166157
transition={{ delay: 0.3 }}
167158
>
168-
All plans include 14-day money-back guarantee. Prices in USD.
159+
All plans include automatic updates and security patches
169160
</motion.p>
170161
</div>
171162
</section>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ export { GitHubStars } from './GitHubStars'
1212
export { MobileMenu } from './MobileMenu'
1313
export { Features } from './Features'
1414
export { Pricing } from './Pricing'
15+
export { FAQ } from './FAQ'
16+
export { Footer } from './Footer'

0 commit comments

Comments
 (0)