[ENHANCEMENT] Modernize and Optimize Landing Page for Perspective-AI #146
Description
Description
The current landing page provides a solid foundation but requires a more modern, interactive, and conversion-focused design to better communicate the value of Perspective-AI. To improve user engagement and better showcase our AI-powered bias detection capabilities, we propose a comprehensive rebuild of the Home component.
Current Implementation Analysis
Structure: Uses a standard vertical layout with Hero, Features, "How it Works," and Tech Stack sections.
Visuals: Relies on static lucide-react icons and basic CSS gradients.
Interactivity: Limited to a theme toggle and basic button navigation to /analyze.
Proposed Improvements
- Interactive "Live Demo" Hero Section
Instead of a static description, replace the hero image or text block with a "mock" analysis tool.
Feature: A simulated input field where users can see a sample biased headline transform into a "balanced perspective" in real-time.
Goal: Immediately demonstrate the core value of "Counter-Perspective Generation".
- Enhanced Data Visualization
Feature: Replace the static statistics grid with animated counters or a small radar chart showing how the tool analyzes "Sentiment," "Factuality," and "Bias."
Technology: Utilize a lightweight library like Framer Motion for smoother entry animations.
- Visual "Flow" of the AI Pipeline
The current "How Perspective Works" section uses cards.
Feature: Design a visual "pipeline" or "graph" representation that mirrors the LangGraph architecture mentioned in the documentation.
Goal: Highlight the technical sophistication of the "Reasoned Thinking" and "Fact Checking" nodes.
- "Featured Perspectives" Carousel
Feature: Add a section showcasing real-world examples of analyzed articles (e.g., a political news piece vs. its generated counter-perspective).
Goal: Provide social proof and concrete examples of the "Expected Outcomes" like "Better Discourse" and "Sharper Analysis".
- Technical Stack Badge Optimization
Improvement: Update the technologies list to include specific icons for FastAPI, LangChain, and VectorDB rather than generic colored badges.
files gonna be modified-
frontend/app/page.tsx
frontend/components/ (New components for sections)
frontend/app/globals.css (For custom animation keyframes)
Additional Context
No response
Code of Conduct
- I have joined the Discord server and will post updates there