Polkadot AI Showcase

A modern, responsive showcase page featuring AI applications built on the Polkadot ecosystem. Built with Next.js, Tailwind CSS, and shadcn/ui.

✨ Features

• 🚀 Project Submission - Submit your AI project via GitHub PR directly from the site
• 🎯 Category Filtering - Filter projects by Agents, Infrastructure, or Privacy
• 📊 Live Statistics - Real-time stats on projects by category
• 📱 Responsive Design - Optimized for desktop, tablet, and mobile
• 🎨 Polkadot Branding - Official Polkadot pink (#E6007A) color scheme
• ✨ Smooth Animations - Card hover effects and fade-in transitions
• 🔍 SEO Optimized - Meta tags and OpenGraph support
• 🎨 shadcn/ui - Beautiful, accessible components

🎯 Featured Projects

Agents (3 projects)

• Polkadot Agent Kit - TypeScript toolkit for AI agents
• PolkaBot.ai - Educational AI platform
• Klara - AI governance assistant

Infrastructure (2 projects)

• Esscrypt Polkadot Plugin - AI dev tools
• dAppForge - Code assistant

Privacy (1 project)

• Phala Network Confidential VM - Privacy-preserving compute

🚀 Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 in your browser.

📁 Project Structure

polkadot-ai-showcase/
├── app/
│   ├── components/
│   │   ├── ProjectCard.tsx    # Project card component
│   │   └── FilterBar.tsx      # Filter component
│   ├── data/
│   │   └── projects.ts        # Project data
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Main page
├── public/                    # Static assets
└── package.json

🚀 Submit Your AI Project

Option 1: Use the Submit Button (Easiest!)

1. Visit the live site
2. Click "Submit Your AI Project"
3. Fill out the form
4. Submit - automatically creates a GitHub PR!

Option 2: Manual Submission

Edit app/data/projects.ts:

{
  id: 'unique-id',
  title: 'Project Name',
  description: 'Project description...',
  link: 'https://project-url.com',
  category: 'Agents' | 'Infrastructure' | 'Privacy',
}

See CONTRIBUTING.md for detailed guidelines.

🎨 Design

• Primary Color: #E6007A (Polkadot Pink)
• Typography: Modern sans-serif with Geist font
• Layout: Responsive 3-column grid
• Animations: Smooth transitions and hover effects

🚀 Deployment

Deploy easily on Vercel:

vercel

Or use any platform that supports Next.js.

📝 Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS 3
• UI Components: shadcn/ui
• Forms: React Hook Form + Zod
• Icons: Lucide React
• React: 19

🌐 Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

🔗 Links

• Polkadot Official Website
• Polkadot AI Use Cases

---

Built with ❤️ for the Polkadot ecosystem