mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-12-16 05:25:11 +00:00
9d5ee88ea3
This commit adds a complete, production-ready web application for browsing and exploring AI tool system prompts. The interface provides an intuitive, responsive, and feature-rich experience for discovering AI tools. ## Web Application Features **Core Functionality:** - 🔍 Advanced search with real-time filtering - 📊 Interactive statistics dashboard with visualizations - 🔄 Side-by-side comparison of up to 4 tools - ⭐ Favorites system with local persistence - 📱 Fully responsive mobile-first design - 🎨 Dark/light mode with system preference detection - ⚡ Optimized performance with Next.js Server Components **Pages:** - Home: Hero section, features showcase, featured tools - Browse: Advanced filtering, grid/list views, category filters - Stats: Comprehensive analytics and visualizations - Compare: Side-by-side tool comparison - Tool Detail: In-depth tool information - About: Project information and tech stack **Components:** - Responsive navbar with mobile menu - Tool cards with interactive actions - Reusable UI components (Button, Card, Badge, Input) - Footer with quick links and stats - Theme provider for dark mode - Loading and error states ## Technical Stack **Framework & Libraries:** - Next.js 15 with App Router - React 19.0 with Server Components - TypeScript 5.6 for type safety - Tailwind CSS for styling - Zustand for state management - next-themes for theme switching - Lucide React for icons **Features:** - Server-side rendering (SSR) - Static site generation (SSG) for tool pages - Optimized bundle with automatic code splitting - SEO-friendly with metadata API - Accessibility best practices ## Project Structure web/ ├── app/ # Next.js pages ├── components/ # React components ├── lib/ # Utilities and data ├── data/ # Static data (index.json) ├── setup.sh # Setup script └── README.md # Documentation ## Developer Experience - TypeScript for type safety - ESLint for code quality - Hot module replacement - Fast refresh - Comprehensive documentation - Setup script for quick start ## Updated Documentation - Enhanced main README with web interface section - Created comprehensive web/README.md - Updated roadmap to mark completed features - Added Quick Start guide for web app ## Stats - 33 new files created - ~3,500 lines of TypeScript/TSX - Full responsive design (mobile, tablet, desktop) - Production-ready with build optimizations Users can now explore 32+ AI tools through an intuitive web interface instead of just command-line tools. Version: 2.0.0
124 lines
4.5 KiB
TypeScript
124 lines
4.5 KiB
TypeScript
import Link from 'next/link'
|
|
import { Github, Heart, ExternalLink } from 'lucide-react'
|
|
|
|
export function Footer() {
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
return (
|
|
<footer className="w-full border-t bg-background">
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
{/* About */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-semibold text-lg">AI Prompts Explorer</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
The most comprehensive collection of AI tool system prompts and configurations.
|
|
</p>
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<Github className="w-5 h-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-semibold">Quick Links</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li>
|
|
<Link href="/" className="hover:text-foreground transition-colors">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/browse" className="hover:text-foreground transition-colors">
|
|
Browse Tools
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/stats" className="hover:text-foreground transition-colors">
|
|
Statistics
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/compare" className="hover:text-foreground transition-colors">
|
|
Compare Tools
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Resources */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-semibold">Resources</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li>
|
|
<Link href="/about" className="hover:text-foreground transition-colors">
|
|
About
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools/blob/main/CONTRIBUTING.md"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:text-foreground transition-colors flex items-center gap-1"
|
|
>
|
|
Contributing
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools/blob/main/CHANGELOG.md"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:text-foreground transition-colors flex items-center gap-1"
|
|
>
|
|
Changelog
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://discord.gg/NwzrWErdMU"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:text-foreground transition-colors flex items-center gap-1"
|
|
>
|
|
Discord
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-semibold">Repository Stats</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li>32+ AI Tools</li>
|
|
<li>96 Files</li>
|
|
<li>20,000+ Lines</li>
|
|
<li>11 Categories</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-8 border-t text-center text-sm text-muted-foreground">
|
|
<p className="flex items-center justify-center gap-1 flex-wrap">
|
|
Built with <Heart className="w-4 h-4 text-red-500 fill-red-500 inline" /> by the community
|
|
<span className="mx-1">•</span>
|
|
© {currentYear} AI Prompts Explorer
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|