engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.3k

feat(web): add featured tools section and navigation to homepage

Browse source 
- Add "Discover AI Tools" section with CTA buttons to tool search
- Add three feature cards highlighting search, metrics, and AI integration
- Add "Tools" link to header navigation for easy access
- Simplify header nav by removing unused Pro/Teams/Pricing buttons

Features:
- Browse/Search tools CTAs prominently displayed
- Feature cards explain key benefits (Smart Search, Quality Metrics, AI Ready)
- Direct navigation to tool search from homepage
- Responsive grid layout for feature cards

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-11-28 04:49:16 +10:00
parent e1e9a14cef
commit af1d2044d7
1 changed files with 58 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

67
apps/web/src/app/page.tsx
View file

@ -22,20 +22,16 @@ export default function HomePage(): React.ReactElement {
sticky={true}
actions={
<div className="flex items-center gap-4">
<Link href="/tool/tool-search">
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Tools
</Button>
</Link>
<Link href="/playground">
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Playground
</Button>
</Link>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Pro
</Button>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Teams
</Button>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Pricing
</Button>
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
Documentation
</Button>
@ -51,6 +47,59 @@ export default function HomePage(): React.ReactElement {
<main className="flex-1">
{/* Hero Section - Dithered Design */}
<HeroSection />
{/* Featured Tools Section */}
<section className="py-16 bg-background">
<Container size="xl" padding="lg">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
Discover AI Tools
</h2>
<p className="text-lg text-foreground-secondary max-w-2xl mx-auto mb-8">
Browse our collection of AI-ready tools. Search, filter, and integrate the perfect tools for your AI agents.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<Link href="/tool/tool-search">
<Button size="lg" variant="default">
Browse All Tools
</Button>
</Link>
<Link href="/tool/tool-search">
<Button size="lg" variant="outline">
Search Tools
</Button>
</Link>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
{/* Feature cards */}
<div className="p-6 border border-border rounded-lg bg-surface">
<div className="text-4xl mb-4">🔍</div>
<h3 className="text-xl font-semibold mb-2 text-foreground">Smart Search</h3>
<p className="text-foreground-secondary">
Find tools by name, category, tags, or functionality. Advanced filters help you discover exactly what you need.
</p>
</div>
<div className="p-6 border border-border rounded-lg bg-surface">
<div className="text-4xl mb-4">⚡</div>
<h3 className="text-xl font-semibold mb-2 text-foreground">Quality Metrics</h3>
<p className="text-foreground-secondary">
Every tool includes quality scores, download stats, and community feedback to help you choose wisely.
</p>
</div>
<div className="p-6 border border-border rounded-lg bg-surface">
<div className="text-4xl mb-4">🤖</div>
<h3 className="text-xl font-semibold mb-2 text-foreground">AI Agent Ready</h3>
<p className="text-foreground-secondary">
All tools include AI agent integration guides, parameter specs, and usage examples.
</p>
</div>
</div>
</Container>
</section>
</main>
{/* Footer */}