Skip to content

feat(design-system): Python-native theme and core landing page components#177

Merged
DevanshuNEU merged 2 commits into
OpenCodeIntel:mainfrom
DevanshuNEU:feature/167-design-system-landing-page
Jan 6, 2026
Merged

feat(design-system): Python-native theme and core landing page components#177
DevanshuNEU merged 2 commits into
OpenCodeIntel:mainfrom
DevanshuNEU:feature/167-design-system-landing-page

Conversation

@DevanshuNEU

Copy link
Copy Markdown
Collaborator

🎨 Design System Foundation for Landing Page

Part of Epic #166 - Landing Page Redesign

What's New

Python-Native Theme (lib/python-theme.ts)

  • Official Python brand colors: Blue #4B8BBE, Yellow #FFD43B
  • Dracula-inspired syntax highlighting that matches PyCharm/VS Code
  • Background layers optimized for dark mode code reading
  • Featured repos config (Flask, Django, FastAPI, Requests, SQLAlchemy)

Animation System (lib/animations.ts)

  • Search bar states: idle → focused → searching → complete
  • Results streaming with stagger and blur-in effects
  • Card hover with lift and glow
  • Button interactions with spring physics
  • Progress/score fill animations
  • Reduced motion support built-in

GlassCard Component (components/ui/GlassCard.tsx)

  • Premium glassmorphism with backdrop blur
  • Optional Python blue/yellow glow on hover
  • Compound components: Header, Content, Footer
  • Framer Motion integration

CodeBlock Component (components/ui/CodeBlock.tsx)

  • Python syntax highlighting (keywords, functions, strings, decorators, etc.)
  • Line numbers with highlight support
  • Copy to clipboard with animated feedback
  • GitHub link integration
  • Line hover effects

Accessibility Hooks

  • usePrefersReducedMotion: Respects OS motion preferences
  • useIsMobile: Responsive breakpoint detection

Tailwind Config Updates

  • Python color palette
  • Syntax highlighting tokens
  • Code background layers

Testing

  • ✅ TypeScript compilation: 0 errors
  • Ready for visual review

Screenshots

Components ready for integration - will add screenshots after Hero section integration

Next Steps


Closes part of #167

…mponents

Part of OpenCodeIntel#167

Added:
- lib/python-theme.ts: Python brand colors, syntax highlighting tokens, featured repos config
- lib/animations.ts: Comprehensive Framer Motion variants for search, cards, results, buttons
- components/ui/GlassCard.tsx: Premium glassmorphism card with hover effects and glow options
- components/ui/CodeBlock.tsx: Python syntax highlighting with line numbers and copy functionality
- hooks/usePrefersReducedMotion.ts: Accessibility hook for reduced motion preference
- hooks/useIsMobile.ts: Responsive design hook for mobile detection
- Updated tailwind.config.js with Python colors and syntax tokens

The Python theme uses the official Python blue (#4B8BBE) and yellow (#FFD43B) colors
that developers recognize from the Python logo. Syntax colors match PyCharm/VS Code
for zero cognitive load when reading code.
@vercel

vercel Bot commented Jan 6, 2026

Copy link
Copy Markdown

@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.

@vercel

vercel Bot commented Jan 6, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
opencodeintel Ready Ready Preview, Comment Jan 6, 2026 9:22pm

@DevanshuNEU DevanshuNEU merged commit e6f06e4 into OpenCodeIntel:main Jan 6, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant