AOSSIE-Org / AOSSIE-Org/Perspective

[ENHANCEMENT] Modernize and Optimize Landing Page for Perspective-AI

オープン
#146 コメント 5 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement
主要言語
TypeScript
スター
50
フォーク
78
PR マージ指標
30日以内にマージされた PR はありません

説明

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
1. 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".

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

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

4. "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".

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

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。