Skip to content

Commit e763cd8

Browse files
dinesh-git17dinesh-git17
committed
feat(marketing): implement comprehensive About page
Phase 2.3 - About Page: UI Components: - Add Prose component for long-form content with optimal line length - Add Divider component for section separation - Add TechBadge component for technology showcase - Add TableOfContents component with sticky sidebar and active highlighting Content Sections: - Mission section explaining project purpose and goals - Tech stack grid showcasing Next.js, TypeScript, Tailwind, Vercel, APIs - AI models section with cards for ChatGPT, Grok, and Claude (moderator) - Privacy section detailing data practices and policies - Safety section covering moderation rules and content policy - Disclaimers section with AI-generated content warnings - Open source section with GitHub repository links - Contact section for feedback and discussions Features: - Responsive layout with TOC sidebar on desktop - Scroll-spy navigation highlighting current section - Semantic HTML with proper heading hierarchy - Full accessibility support
1 parent 9013ebe commit e763cd8

14 files changed

Lines changed: 625 additions & 9 deletions

‎src/app/(marketing)/about/page.tsx‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,71 @@
11
// src/app/(marketing)/about/page.tsx
2+
import { AboutHero } from '@/components/features/about-hero'
3+
import { AiModelsSection } from '@/components/features/ai-models-section'
4+
import { ContactSection } from '@/components/features/contact-section'
5+
import { DisclaimersSection } from '@/components/features/disclaimers-section'
6+
import { MissionSection } from '@/components/features/mission-section'
7+
import { OpenSourceSection } from '@/components/features/open-source-section'
8+
import { PrivacySection } from '@/components/features/privacy-section'
9+
import { SafetySection } from '@/components/features/safety-section'
10+
import { TechStackSection } from '@/components/features/tech-stack-section'
211
import { Container } from '@/components/ui/container'
12+
import { Divider } from '@/components/ui/divider'
313
import { Section } from '@/components/ui/section'
14+
import { TableOfContents } from '@/components/ui/table-of-contents'
415

516
import type { Metadata } from 'next'
617

718
export const metadata: Metadata = {
819
title: 'About',
9-
description: 'Learn about LLM Debate Arena and the team behind it.',
20+
description:
21+
'Learn about LLM Debate Arena — our mission, technology, privacy practices, and the AI models that power debates.',
22+
openGraph: {
23+
title: 'About | LLM Debate Arena',
24+
description: 'Our mission, technology, and commitment to privacy and safety.',
25+
},
1026
}
1127

28+
const tocItems = [
29+
{ id: 'mission', label: 'Why We Built This' },
30+
{ id: 'tech-stack', label: 'Built With' },
31+
{ id: 'ai-models', label: 'The AI Models' },
32+
{ id: 'privacy', label: 'Your Privacy' },
33+
{ id: 'safety', label: 'Safe & Fair Debates' },
34+
{ id: 'disclaimers', label: 'Disclaimers' },
35+
{ id: 'open-source', label: 'Open Source' },
36+
{ id: 'contact', label: 'Get in Touch' },
37+
]
38+
1239
export default function AboutPage() {
1340
return (
14-
<Section>
15-
<Container>
16-
<div className="mx-auto max-w-2xl text-center">
17-
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">About</h1>
18-
<p className="mt-6 text-lg text-muted-foreground">About page coming in Phase 2.3</p>
19-
</div>
20-
</Container>
21-
</Section>
41+
<>
42+
<AboutHero />
43+
<Section>
44+
<Container>
45+
<div className="lg:grid lg:grid-cols-[1fr_220px] lg:gap-12">
46+
<article className="min-w-0">
47+
<MissionSection />
48+
<Divider className="my-12" />
49+
<TechStackSection />
50+
<Divider className="my-12" />
51+
<AiModelsSection />
52+
<Divider className="my-12" />
53+
<PrivacySection />
54+
<Divider className="my-12" />
55+
<SafetySection />
56+
<Divider className="my-12" />
57+
<DisclaimersSection />
58+
<Divider className="my-12" />
59+
<OpenSourceSection />
60+
<Divider className="my-12" />
61+
<ContactSection />
62+
</article>
63+
<aside className="hidden lg:block">
64+
<TableOfContents items={tocItems} />
65+
</aside>
66+
</div>
67+
</Container>
68+
</Section>
69+
</>
2270
)
2371
}

‎src/components/features/about-hero.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// src/components/features/about-hero.tsx
2+
import { Container } from '@/components/ui/container'
3+
import { Section } from '@/components/ui/section'
4+
5+
export function AboutHero() {
6+
return (
7+
<Section variant="muted" className="py-12 md:py-16 lg:py-20">
8+
<Container>
9+
<div className="mx-auto max-w-3xl text-center">
10+
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
11+
About LLM Debate Arena
12+
</h1>
13+
<p className="mt-6 text-lg leading-8 text-muted-foreground md:text-xl">
14+
An experimental platform exploring AI discourse and reasoning
15+
</p>
16+
</div>
17+
</Container>
18+
</Section>
19+
)
20+
}

‎src/components/features/ai-models-section.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// src/components/features/ai-models-section.tsx
2+
import { Bot, MessageSquare, Scale } from 'lucide-react'
3+
4+
import { Card } from '@/components/ui/card'
5+
import { cn } from '@/lib/utils'
6+
7+
const models = [
8+
{
9+
name: 'ChatGPT',
10+
provider: 'OpenAI',
11+
role: 'Debater',
12+
description:
13+
'One of the most widely-used large language models, known for its broad knowledge and conversational abilities. Randomly assigned to argue FOR or AGAINST.',
14+
version: 'GPT-4 Turbo',
15+
icon: MessageSquare,
16+
isModerator: false,
17+
},
18+
{
19+
name: 'Grok',
20+
provider: 'xAI',
21+
role: 'Debater',
22+
description:
23+
'Built to be maximally helpful and truthful, with real-time knowledge access. Randomly assigned to argue the opposite side of ChatGPT.',
24+
version: 'Grok-2',
25+
icon: Bot,
26+
isModerator: false,
27+
},
28+
{
29+
name: 'Claude',
30+
provider: 'Anthropic',
31+
role: 'Moderator',
32+
description:
33+
'Known for nuanced reasoning and safety focus. Serves as the neutral moderator, ensuring fair play and providing final analysis.',
34+
version: 'Claude 3.5 Sonnet',
35+
icon: Scale,
36+
isModerator: true,
37+
},
38+
] as const
39+
40+
export function AiModelsSection() {
41+
return (
42+
<section id="ai-models" className="scroll-mt-20">
43+
<h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
44+
The AI Models
45+
</h2>
46+
<p className="mt-4 text-muted-foreground">
47+
Three leading AI models, each with a distinct role in every debate
48+
</p>
49+
<div className="mt-8 grid gap-6 md:grid-cols-3">
50+
{models.map((model) => (
51+
<Card
52+
key={model.name}
53+
className={cn(model.isModerator && 'border-primary/50 bg-primary/5')}
54+
>
55+
<Card.Header>
56+
<div
57+
className={cn(
58+
'mb-2 flex h-10 w-10 items-center justify-center rounded-lg',
59+
model.isModerator ? 'bg-primary text-primary-foreground' : 'bg-muted'
60+
)}
61+
>
62+
<model.icon className="h-5 w-5" aria-hidden="true" />
63+
</div>
64+
<div className="flex items-center gap-2">
65+
<Card.Title className="text-lg">{model.name}</Card.Title>
66+
{model.isModerator && (
67+
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
68+
Moderator
69+
</span>
70+
)}
71+
</div>
72+
<p className="text-sm text-muted-foreground">{model.provider}</p>
73+
</Card.Header>
74+
<Card.Content>
75+
<p className="text-sm text-muted-foreground">{model.description}</p>
76+
<p className="mt-3 text-xs text-muted-foreground">
77+
<span className="font-medium">Model:</span> {model.version}
78+
</p>
79+
</Card.Content>
80+
</Card>
81+
))}
82+
</div>
83+
</section>
84+
)
85+
}

‎src/components/features/contact-section.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// src/components/features/contact-section.tsx
2+
import { ExternalLink, MessageCircle } from 'lucide-react'
3+
4+
import { Button } from '@/components/ui/button'
5+
import { Prose } from '@/components/ui/prose'
6+
7+
export function ContactSection() {
8+
return (
9+
<section id="contact" className="scroll-mt-20">
10+
<h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
11+
Get in Touch
12+
</h2>
13+
<Prose className="mt-6">
14+
<p>
15+
We would love to hear from you. Whether you have found a bug, have a feature suggestion,
16+
or just want to share your experience, there are several ways to reach us.
17+
</p>
18+
</Prose>
19+
<div className="mt-6 flex flex-wrap gap-4">
20+
<Button asChild variant="outline">
21+
<a
22+
href="https://github.com/dinesh-git17/llm-debate-arena/issues/new"
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
>
26+
<MessageCircle className="mr-2 h-4 w-4" aria-hidden="true" />
27+
Submit Feedback
28+
</a>
29+
</Button>
30+
<Button asChild variant="ghost">
31+
<a
32+
href="https://github.com/dinesh-git17/llm-debate-arena/discussions"
33+
target="_blank"
34+
rel="noopener noreferrer"
35+
>
36+
<ExternalLink className="mr-2 h-4 w-4" aria-hidden="true" />
37+
Join Discussions
38+
</a>
39+
</Button>
40+
</div>
41+
</section>
42+
)
43+
}

‎src/components/features/disclaimers-section.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// src/components/features/disclaimers-section.tsx
2+
import { Prose } from '@/components/ui/prose'
3+
4+
export function DisclaimersSection() {
5+
return (
6+
<section id="disclaimers" className="scroll-mt-20">
7+
<h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
8+
Important Disclaimers
9+
</h2>
10+
<Prose className="mt-6">
11+
<p>
12+
<strong>All debate content is generated by AI models</strong> and should not be treated as
13+
factual or authoritative. Large language models can produce incorrect, biased, or
14+
misleading statements — even when they sound confident.
15+
</p>
16+
<p>
17+
The &quot;winner&quot; of a debate is not an objective truth. It is one AI&apos;s
18+
assessment of argumentation quality based on predefined criteria. Reasonable people (and
19+
AIs) may disagree.
20+
</p>
21+
<p>
22+
<strong>LLM Debate Arena is for entertainment and educational purposes.</strong> Do not
23+
rely on AI-generated content for:
24+
</p>
25+
<ul>
26+
<li>Medical diagnoses or health decisions</li>
27+
<li>Legal advice or interpretation</li>
28+
<li>Financial or investment decisions</li>
29+
<li>Any professional advice requiring licensed expertise</li>
30+
</ul>
31+
<p>
32+
When in doubt, consult qualified professionals. AI debates can introduce you to different
33+
perspectives, but they should not replace expert guidance.
34+
</p>
35+
</Prose>
36+
</section>
37+
)
38+
}

‎src/components/features/mission-section.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// src/components/features/mission-section.tsx
2+
import { Prose } from '@/components/ui/prose'
3+
4+
export function MissionSection() {
5+
return (
6+
<section id="mission" className="scroll-mt-20">
7+
<h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
8+
Why We Built This
9+
</h2>
10+
<Prose className="mt-6">
11+
<p>
12+
LLM Debate Arena was born from a simple curiosity: what happens when you pit two of the
13+
world&apos;s most capable AI models against each other in structured debate?
14+
</p>
15+
<p>
16+
This platform is an experiment in AI discourse. By watching models argue opposing
17+
positions on topics you care about, you gain insight into how large language models
18+
reason, persuade, and sometimes stumble. It&apos;s a window into the capabilities and
19+
limitations of modern AI.
20+
</p>
21+
<p>
22+
Our goal is not to crown a &quot;winner&quot; — it&apos;s to make AI more transparent,
23+
accessible, and perhaps a little entertaining. Whether you&apos;re a researcher studying
24+
AI behavior, a student learning about argumentation, or just someone curious about how
25+
these models think, we hope you find value here.
26+
</p>
27+
</Prose>
28+
</section>
29+
)
30+
}

‎src/components/features/open-source-section.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// src/components/features/open-source-section.tsx
2+
import { ExternalLink, Github } from 'lucide-react'
3+
4+
import { Button } from '@/components/ui/button'
5+
import { Prose } from '@/components/ui/prose'
6+
7+
export function OpenSourceSection() {
8+
return (
9+
<section id="open-source" className="scroll-mt-20">
10+
<h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Open Source</h2>
11+
<Prose className="mt-6">
12+
<p>
13+
LLM Debate Arena is open source. We believe in transparency not just in our AI debates,
14+
but in our code as well. You can view the source code, report issues, or contribute
15+
improvements on GitHub.
16+
</p>
17+
<p>
18+
The project is built with modern web technologies and follows best practices for
19+
accessibility, performance, and security. We welcome contributions from the community.
20+
</p>
21+
</Prose>
22+
<div className="mt-6 flex flex-wrap gap-4">
23+
<Button asChild variant="outline">
24+
<a
25+
href="https://github.com/dinesh-git17/llm-debate-arena"
26+
target="_blank"
27+
rel="noopener noreferrer"
28+
>
29+
<Github className="mr-2 h-4 w-4" aria-hidden="true" />
30+
View on GitHub
31+
</a>
32+
</Button>
33+
<Button asChild variant="ghost">
34+
<a
35+
href="https://github.com/dinesh-git17/llm-debate-arena/issues"
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
<ExternalLink className="mr-2 h-4 w-4" aria-hidden="true" />
40+
Report an Issue
41+
</a>
42+
</Button>
43+
</div>
44+
</section>
45+
)
46+
}

‎src/components/features/privacy-section.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// src/components/features/privacy-section.tsx
2+
import { Prose } from '@/components/ui/prose'
3+
4+
export function PrivacySection() {
5+
return (
6+
<section id="privacy" className="scroll-mt-20">
7+
<h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
8+
Your Privacy
9+
</h2>
10+
<Prose className="mt-6">
11+
<p>
12+
We believe in minimal data collection. You do not need an account to use LLM Debate Arena
13+
— just pick a topic and start debating.
14+
</p>
15+
<p>
16+
When you create a debate, your topic and any custom rules are sent to AI providers
17+
(OpenAI, xAI, Anthropic) to generate responses. These providers have their own privacy
18+
policies governing how they handle API requests.
19+
</p>
20+
<p>
21+
Debate transcripts are stored temporarily and automatically deleted after 72 hours. Shared
22+
links expire on the same schedule. We do not maintain long-term records of your debates.
23+
</p>
24+
<p>
25+
<strong>What we do not do:</strong>
26+
</p>
27+
<ul>
28+
<li>We do not sell your data</li>
29+
<li>We do not use your debates to train AI models</li>
30+
<li>We do not track you across websites</li>
31+
<li>We do not require personal information</li>
32+
</ul>
33+
</Prose>
34+
</section>
35+
)
36+
}

0 commit comments

Comments
 (0)