Upload pages/podcasts.js with huggingface_hub

pages/podcasts.js

@@ -0,0 +1,143 @@
+import Layout from '../components/Layout';
+import PodcastCard from '../components/PodcastCard';
+
+const podcasts = [
+  {
+    id: 1,
+    title: 'The Future of AI Development Tools',
+    description: 'Discussing how AI coding assistants are transforming software development workflows and what the next generation of developer tools looks like.',
+    category: 'Technology',
+    duration: '45 min',
+    date: 'Dec 8, 2024',
+    host: 'Sarah Chen',
+    hostAvatar: 'https://picsum.photos/seed/host1/100/100',
+    image: 'https://picsum.photos/seed/podcast1/800/450',
+  },
+  {
+    id: 2,
+    title: 'Building Open Source AI Infrastructure',
+    description: 'A deep conversation about the challenges and rewards of building open source tools for the AI/ML community.',
+    category: 'Open Source',
+    duration: '52 min',
+    date: 'Dec 1, 2024',
+    host: 'Marcus Johnson',
+    hostAvatar: 'https://picsum.photos/seed/host2/100/100',
+    image: 'https://picsum.photos/seed/podcast2/800/450',
+  },
+  {
+    id: 3,
+    title: 'LLMs in Production: Lessons Learned',
+    description: 'Real-world experiences deploying large language models at scale, including optimization strategies and failure modes.',
+    category: 'Engineering',
+    duration: '38 min',
+    date: 'Nov 24, 2024',
+    host: 'Elena Rodriguez',
+    hostAvatar: 'https://picsum.photos/seed/host3/100/100',
+    image: 'https://picsum.photos/seed/podcast3/800/450',
+  },
+  {
+    id: 4,
+    title: 'The Rise of AI Agents',
+    description: 'Exploring the emergence of autonomous AI agents and their potential to revolutionize automation across industries.',
+    category: 'AI Trends',
+    duration: '48 min',
+    date: 'Nov 17, 2024',
+    host: 'David Kim',
+    hostAvatar: 'https://picsum.photos/seed/host4/100/100',
+    image: 'https://picsum.photos/seed/podcast4/800/450',
+  },
+  {
+    id: 5,
+    title: 'Prompt Engineering Masterclass',
+    description: 'Advanced techniques for crafting effective prompts, from chain-of-thought to few-shot learning strategies.',
+    category: 'Tutorial',
+    duration: '55 min',
+    date: 'Nov 10, 2024',
+    host: 'Sarah Chen',
+    hostAvatar: 'https://picsum.photos/seed/host1/100/100',
+    image: 'https://picsum.photos/seed/podcast5/800/450',
+  },
+  {
+    id: 6,
+    title: 'Vector Databases Explained',
+    description: 'Understanding vector databases, embeddings, and their critical role in modern AI applications.',
+    category: 'Technology',
+    duration: '42 min',
+    date: 'Nov 3, 2024',
+    host: 'Marcus Johnson',
+    hostAvatar: 'https://picsum.photos/seed/host2/100/100',
+    image: 'https://picsum.photos/seed/podcast6/800/450',
+  },
+];
+
+const categories = ['All', 'Technology', 'Open Source', 'Engineering', 'AI Trends', 'Tutorial'];
+
+export default function Podcasts() {
+  return (
+    <Layout title="Podcasts" subtitle="Audio & Video Shows">
+      {/* Featured Episode */}
+      <div className="mb-12 brutal-card bg-brutal-black text-brutal-white">
+        <div className="grid md:grid-cols-2 gap-8 items-center">
+          <div className="order-2 md:order-1">
+            <span className="font-mono text-xs bg-brutal-accent text-brutal-white px-2 py-1 mb-4 inline-block">
+              Featured Episode
+            </span>
+            <h2 className="text-2xl md:text-3xl font-bold mb-4">
+              The Future of AI Development Tools
+            </h2>
+            <p className="text-brutal-gray mb-6">
+              Discussing how AI coding assistants are transforming software development 
+              workflows and what the next generation of developer tools looks like.
+            </p>
+            <div className="flex items-center gap-4 mb-6">
+              <img 
+                src="https://picsum.photos/seed/host1/100/100" 
+                alt="Sarah Chen"
+                className="w-12 h-12 border-2 border-brutal-white"
+              />
+              <div>
+                <p className="font-semibold">Sarah Chen</p>
+                <p className="font-mono text-xs text-brutal-gray">Host</p>
+              </div>
+            </div>
+            <button className="brutal-btn bg-brutal-white text-brutal-black">
+              Play Episode
+            </button>
+          </div>
+          <div className="order-1 md:order-2">
+            <img 
+              src="https://picsum.photos/seed/podcast1/800/450" 
+              alt="Featured"
+              className="w-full border-2 border-brutal-white"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Categories */}
+      <div className="mb-8 flex flex-wrap gap-2">
+        {categories.map((category) => (
+          <button
+            key={category}
+            className={`
+              font-mono text-sm px-4 py-2 border-2 transition-all
+              ${category === 'All' 
+                ? 'bg-brutal-black text-brutal-white border-brutal-black' 
+                : 'border-brutal-black hover:bg-brutal-black hover:text-brutal-white'
+              }
+            `}
+          >
+            {category}
+          </button>
+        ))}
+      </div>
+
+      {/* Podcast Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {podcasts.map((podcast) => (
+          <PodcastCard key={podcast.id} podcast={podcast} />
+        ))}
+      </div>
+    </Layout>
+  );
+}