Skip to content

Commit a2d185f

Browse files
DevanshuNEUDevanshuNEU
committed
feat(landing): add features section with 6 key capabilities
- semantic search, context understanding, instant results - dependency graph, MCP integration, self-host option - animated grid with staggered reveal on scroll - hover effects with subtle glow - fix landing page to use theme bg/text colors
1 parent b02c34e commit a2d185f

3 files changed

Lines changed: 126 additions & 3 deletions

File tree

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import { motion } from 'framer-motion'
2+
import { Search, Zap, GitBranch, Brain, Lock, Terminal } from 'lucide-react'
3+
4+
const FEATURES = [
5+
{
6+
icon: Search,
7+
title: 'Semantic Search',
8+
description: 'Find code by what it does, not what it\'s named. Ask "retry logic with exponential backoff" and get exactly that.',
9+
color: 'text-blue-400',
10+
bg: 'bg-blue-500/10',
11+
},
12+
{
13+
icon: Brain,
14+
title: 'Understands Context',
15+
description: 'Knows the difference between a Flask route handler and a FastAPI dependency. Context-aware results every time.',
16+
color: 'text-violet-400',
17+
bg: 'bg-violet-500/10',
18+
},
19+
{
20+
icon: Zap,
21+
title: 'Instant Results',
22+
description: 'Sub-100ms search across your entire codebase. No waiting, no spinning, just answers.',
23+
color: 'text-amber-400',
24+
bg: 'bg-amber-500/10',
25+
},
26+
{
27+
icon: GitBranch,
28+
title: 'Dependency Graph',
29+
description: 'See how code connects. Trace imports, find usages, understand impact before you change anything.',
30+
color: 'text-emerald-400',
31+
bg: 'bg-emerald-500/10',
32+
},
33+
{
34+
icon: Terminal,
35+
title: 'MCP Integration',
36+
description: 'Works with Claude, Cursor, and any MCP-compatible AI. Your AI assistant finally understands your code.',
37+
color: 'text-cyan-400',
38+
bg: 'bg-cyan-500/10',
39+
},
40+
{
41+
icon: Lock,
42+
title: 'Self-Host Option',
43+
description: 'Keep your code private. Run CodeIntel on your own infrastructure with full control.',
44+
color: 'text-rose-400',
45+
bg: 'bg-rose-500/10',
46+
},
47+
]
48+
49+
const containerVariants = {
50+
hidden: { opacity: 0 },
51+
visible: {
52+
opacity: 1,
53+
transition: { staggerChildren: 0.1 }
54+
}
55+
}
56+
57+
const itemVariants = {
58+
hidden: { opacity: 0, y: 20 },
59+
visible: { opacity: 1, y: 0 }
60+
}
61+
62+
export function Features() {
63+
return (
64+
<section id="features" className="py-24 px-6 relative">
65+
{/* Subtle gradient background */}
66+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-accent/[0.02] to-transparent pointer-events-none" />
67+
68+
<div className="max-w-6xl mx-auto relative">
69+
{/* Section header */}
70+
<motion.div
71+
className="text-center mb-16"
72+
initial={{ opacity: 0, y: 20 }}
73+
whileInView={{ opacity: 1, y: 0 }}
74+
viewport={{ once: true, margin: "-100px" }}
75+
transition={{ duration: 0.5 }}
76+
>
77+
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
78+
Built for how developers actually work
79+
</h2>
80+
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
81+
Not another code search tool. CodeIntel understands your codebase the way you do.
82+
</p>
83+
</motion.div>
84+
85+
{/* Features grid */}
86+
<motion.div
87+
className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
88+
variants={containerVariants}
89+
initial="hidden"
90+
whileInView="visible"
91+
viewport={{ once: true, margin: "-50px" }}
92+
>
93+
{FEATURES.map((feature) => (
94+
<motion.div
95+
key={feature.title}
96+
variants={itemVariants}
97+
className="group relative p-6 rounded-xl border border-white/[0.06] dark:border-white/[0.06] light:border-black/[0.06] bg-card/30 hover:bg-card/50 transition-all duration-300"
98+
>
99+
{/* Hover glow */}
100+
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
101+
102+
<div className="relative">
103+
<div className={`w-10 h-10 rounded-lg ${feature.bg} flex items-center justify-center mb-4`}>
104+
<feature.icon className={`w-5 h-5 ${feature.color}`} />
105+
</div>
106+
<h3 className="text-lg font-semibold text-foreground mb-2">
107+
{feature.title}
108+
</h3>
109+
<p className="text-sm text-muted-foreground leading-relaxed">
110+
{feature.description}
111+
</p>
112+
</div>
113+
</motion.div>
114+
))}
115+
</motion.div>
116+
</div>
117+
</section>
118+
)
119+
}

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

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

‎frontend/src/pages/LandingPage.tsx‎

Lines changed: 6 additions & 3 deletions
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 } from '@/components/landing'
3+
import { Navbar, Hero, ResultsView, Features } from '@/components/landing'
44
import { API_URL } from '@/config/api'
55
import { playgroundAPI } from '@/services/playground-api'
66
import type { SearchResult } from '@/types'
@@ -93,7 +93,7 @@ export function LandingPage() {
9393
}
9494

9595
return (
96-
<div className="min-h-screen bg-[#09090b] text-white">
96+
<div className="min-h-screen bg-background text-foreground">
9797
<Navbar minimal={hasSearched} />
9898

9999
{hasSearched ? (
@@ -113,7 +113,10 @@ export function LandingPage() {
113113
onSignUp={() => navigate('/signup')}
114114
/>
115115
) : (
116-
<Hero onResultsReady={handleHeroResults} />
116+
<>
117+
<Hero onResultsReady={handleHeroResults} />
118+
<Features />
119+
</>
117120
)}
118121
</div>
119122
)

0 commit comments

Comments
 (0)