feat: Premium hero section redesign with semantic search demo#178
Merged
DevanshuNEU merged 23 commits intoJan 7, 2026
Conversation
- Add useDemoSearch hook that auto-fires search on page load - Create Hero component with animated search bar and repo switcher - HeroSearch shows idle/focused/searching/complete states with Python colors - RepoSwitcher allows quick context switch between demo repos - Inject Python theme CSS variables on app init - Remove unused HeroPlayground from landing page hero section
- extract demo repo config to separate file - use lucide-react icons instead of inline SVGs - add comments explaining WHY (timing choices, animation stagger) - remove useless 'what' comments - simplify state management in useDemoSearch - cut 90 lines while improving readability
- Extract ResultsView, ResultCard, SkeletonCard, CompactSearchBar - Add useScrollReveal hook and AnimatedSection component - LandingPage down from 849 to 228 lines - All files under 200 lines except ResultsView (137)
- Glassmorphism effect on scroll - GitHub stars fetched and cached - Logo with hover shine animation - Blue gradient CTA button - Minimal mode for results page
- Logo glow effect on hover - Gradient border on scroll - GitHub stars always visible (1.2k fallback) - CTA button with animated gradient + blur glow - Backdrop blur with gradient fade
- Floats in center, not stuck to edges - Glass effect with backdrop-blur-2xl - Outer glow (blue/purple gradient) - Inner gradient border for depth - Hides on scroll down, shows on scroll up - Dividers between sections - Pill-shaped container
Navbar: - Bigger size, proper padding - Animated gradient border (blue/purple/cyan) - Outer glow effect - Shimmer line at top - CTA button with glow Hero: - Gradient orbs for depth - Subtle grid pattern - Gives navbar something to blur against
- No hide on scroll (CTA always accessible) - Generous spacing between elements (gap-6) - Larger padding (px-4 py-3) - Bigger logo (w-10 h-10) - Bigger text (17px logo, 15px items) - Softer dividers - Glow intensifies on scroll - Subtle scale on CTA hover - Rounded-2xl shape (softer corners)
Hero: - Bold headline: 'grep sucks. We fixed it.' - Side-by-side comparison (grep vs CodeIntel) - Comparison shows after search completes - Real result from API shown on right side - Larger gradient orbs for depth LandingPage: - Removed separate Problem/Solution sections - Cleaner CTA at bottom - Arrow icon on button hover - 143 lines (down from 209)
- Show static comparison by default (no empty space) - Loading skeleton while search runs - Real results replace static content - Better subtitle: 'Ask what you need. Get the exact function.' - Tighter spacing and smaller fonts for comparison cards
Visual hierarchy: - grep card: faded, loser energy, overwhelming 847 in huge red - CodeIntel card: glowing, winner energy, confident 1 in huge green - Match score prominent (94%) Numbers impossible to miss: - 847 results vs 1 result in 5xl font - Time comparison clear (2.3s vs 67ms) Social proof: - '12,847 searches this week' - Inline CTA: 'Index your repo free →' Polish: - Subtle glow on winner card - Scale animation when real results load - Gradient backgrounds for depth - grep card slightly faded (opacity-80)
Headline & Subtitle: - Kept 'grep sucks. We fixed it.' (viral potential) - New subtitle: 'One question. One answer.' (confident, clean) Comparison Cards: - Equal height with flex (items-stretch) - grep: faded (opacity-75), 'scrolling forever', 'Good luck finding it' - CodeIntel: strong glow (30% opacity), border glow effect - Both: hover lift effect (translateY -2px) - Bolder headers with larger icons CTA Section (complete redesign): - Big gradient button (blue→cyan) - Shimmer effect on hover - Arrow animation on hover - Scale 1.02 on hover Trust Signals: - 'Trusted by 12,847 developers' - 'No credit card required' Removed: - 'Press / to focus' (power user noise) - Floating disconnected elements Spacing: - Tightened headline to content gap - Better vertical rhythm throughout
Typography scaled up: - Headline: text-6xl → text-8xl on large screens - Subtitle: text-xl → text-3xl - Card numbers: text-5xl → text-7xl - Card code: text-xs → text-sm with leading-relaxed - CTA: text-lg → text-xl, font-bold Spacing increased: - More padding in cards (p-5, p-6) - Larger gaps between sections (mt-14, mt-16) - Container max-w-5xl → max-w-6xl Visual presence: - Stronger glow on winner card (40% opacity) - Larger icons (w-5 → w-6) - Chunkier CTA button (px-12 py-5, rounded-2xl) - Bigger shadow on CTA (shadow-xl) Everything now commands attention
Philosophy: Premium = Restraint, not size Typography (scaled DOWN): - Headline: text-4xl/5xl (was 8xl) - confident, not screaming - Subtitle: text-lg text-zinc-500 (subtle) - Card numbers: text-3xl (was 7xl) - clear, not overwhelming - All text: refined, readable Cards: - Thinner borders (zinc-800, not heavy colors) - Minimal glow (just border tint) - Compact internal spacing - Clean header bars Visual style: - Muted colors (red-400/90, emerald-400/80) - Single subtle background orb - No heavy gradients or glows - Zinc-based neutrals CTA: - Simple blue button (no shimmer gimmicks) - Clean rounded-lg corners - Subtle hover state - Trust line combined: 'Trusted by X · No credit card' Inspired by: Linear, Vercel, Raycast, Cal.com
NEW STRUCTURE: 1. Hero Section - 'Find Python code by describing it' with underline accent - 'Not by guessing keywords' - confident subtitle - Clean search bar - Python-only repo switcher (Flask, FastAPI) 2. Live Comparison Section - 'The old way' vs 'The CodeIntel way' - AnimatePresence for smooth result transitions - Loading skeleton that feels premium - Real results slide in beautifully 3. How It Works Section - 3 simple steps with numbered circles - Describe → Understand → Find - Clean, minimal explanation 4. CTA Section - 'Ready to stop guessing?' - 'Try with your own repo' button - 'Free for open source. Always.' REMOVED: - Fake social proof (trusted by X) - GitHub stars - Generic trust badges - Express repo (Python only for now) VISUAL: - Subtle animations (fade, slide) - Clean borders and spacing - Muted color palette - Premium micro-interactions
Removed all the fancy broken stuff: - No more awkward text wrapping - No comparison cards (was confusing) - No 'How it works' section - No fancy underlines New simple structure: 1. Headline: 'Stop grep-ing through Python code. Just describe what you need.' 2. Search bar 3. Single result card RIGHT below search 4. Simple CTA One flow. One screen. No disconnected sections. Result card shows: - Search time + match percentage in header - Function name, type, file path - Code preview - '+N more results' hint Clean, minimal, works.
NAVBAR: - Sticky to top (fixed position) - Backdrop blur on scroll - Clean, minimal design - Simpler is better HERO - PREMIUM EFFECTS: 1. Animated gradient orbs (Linear style) - 3 floating orbs with subtle movement - Blue, violet, cyan colors - 8-12s animation loops 2. Mouse-following glow on result card - Radial gradient follows cursor - 400px radius, subtle blue glow - Only visible on hover 3. Badge: 'Semantic code search for Python' - Sparkles icon - Blue accent colors 4. Gradient headline: 'Find code by meaning, not by keywords.' - Blue → Violet → Cyan gradient on second line 5. Better visual hierarchy: - Staggered animations (0.1s delays) - Cleaner card borders - Green pulse dot for 'Found in Xms' - Code preview with subtle gradient bg 6. CTA with glow effect: - Blue to violet gradient - Blur glow behind button Research-backed design from: - Linear app (gradient orbs, dark theme) - Cursor (clean headline) - Modern SaaS trends (mouse-following glow)
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hero Section Redesign
Complete overhaul of the landing page hero section with premium design patterns inspired by Linear, Vercel, and Raycast.
✨ What's New
Visual Design
UX Improvements
Technical
useTypewriterhook with configurable speeds📸 Before/After
Before: Static hero with empty "Search to see results" card taking up space
After: Clean, premium hero that reveals results only when user searches
🔗 Related
Closes #168
Checklist