AOSSIE-Org / AOSSIE-Org/Perspective

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

未关闭
#146 5 条评论 0 个 reaction 已指派 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 摘要。