Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,140 @@
+import Layout from '../components/Layout';
+import Link from 'next/link';
+import { ArrowRight, Book, Mic, Code2, LayoutGrid } from 'lucide-react';
+
+const stats = [
+  { value: '150+', label: 'Articles' },
+  { value: '50+', label: 'Podcasts' },
+  { value: '200+', label: 'Projects' },
+  { value: '75+', label: 'Slide Decks' },
+];
+
+const featuredArticles = [
+  {
+    title: 'Introduction to Large Language Models',
+    category: 'AI/ML',
+    excerpt: 'A comprehensive guide to understanding LLMs, their architecture, and applications in modern software development.',
+    readTime: '15 min',
+    tags: ['LLM', 'AI', 'NLP'],
+  },
+  {
+    title: 'Building RAG Applications from Scratch',
+    category: 'Engineering',
+    excerpt: 'Learn how to build production-ready Retrieval Augmented Generation systems with modern tools.',
+    readTime: '20 min',
+    tags: ['RAG', 'Vector DB', 'LangChain'],
+  },
+];
+
+export default function Home() {
+  return (
+    <Layout title="Knowledge Base" subtitle="Home">
+      {/* Hero Section */}
+      <section className="mb-12">
+        <div className="border-2 border-brutal-black p-8 md:p-12 bg-brutal-black text-brutal-white">
+          <div className="max-w-3xl">
+            <h1 className="text-4xl md:text-6xl font-bold mb-4 leading-tight">
+              BRUTALIST<br />
+              KNOWLEDGE<br />
+              <span className="text-brutal-accent">BASE</span>
+            </h1>
+            <p className="font-mono text-lg text-brutal-gray mb-8">
+              A curated collection of resources, tutorials, and insights on 
+              artificial intelligence, machine learning, and modern software development.
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Link href="/knowledge" className="brutal-btn bg-brutal-white text-brutal-black hover:bg-brutal-accent hover:text-brutal-white">
+                Explore Articles
+              </Link>
+              <Link href="/projects" className="brutal-btn bg-transparent border-brutal-white text-brutal-white hover:bg-brutal-white hover:text-brutal-black">
+                View Projects
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section className="mb-12 grid grid-cols-2 md:grid-cols-4 gap-4">
+        {stats.map((stat, index) => (
+          <div key={index} className="brutal-card text-center">
+            <p className="font-bold text-3xl md:text-4xl">{stat.value}</p>
+            <p className="font-mono text-xs text-brutal-gray uppercase tracking-wider">{stat.label}</p>
+          </div>
+        ))}
+      </section>
+
+      {/* Quick Links */}
+      <section className="mb-12">
+        <h2 className="section-header">Quick Navigation</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <Link href="/knowledge" className="brutal-card group flex items-center justify-between">
+            <div>
+              <Book size={32} className="mb-2" />
+              <h3 className="font-bold">Knowledge Base</h3>
+              <p className="text-sm text-brutal-gray">Articles & Tutorials</p>
+            </div>
+            <ArrowRight className="group-hover:translate-x-1 transition-transform" />
+          </Link>
+          <Link href="/podcasts" className="brutal-card group flex items-center justify-between">
+            <div>
+              <Mic size={32} className="mb-2" />
+              <h3 className="font-bold">Podcasts</h3>
+              <p className="text-sm text-brutal-gray">Audio & Video Shows</p>
+            </div>
+            <ArrowRight className="group-hover:translate-x-1 transition-transform" />
+          </Link>
+          <Link href="/projects" className="brutal-card group flex items-center justify-between">
+            <div>
+              <Code2 size={32} className="mb-2" />
+              <h3 className="font-bold">GenAI Projects</h3>
+              <p className="text-sm text-brutal-gray">Open Source Projects</p>
+            </div>
+            <ArrowRight className="group-hover:translate-x-1 transition-transform" />
+          </Link>
+          <Link href="/decks" className="brutal-card group flex items-center justify-between">
+            <div>
+              <LayoutGrid size={32} className="mb-2" />
+              <h3 className="font-bold">Slide Decks</h3>
+              <p className="text-sm text-brutal-gray">Presentations</p>
+            </div>
+            <ArrowRight className="group-hover:translate-x-1 transition-transform" />
+          </Link>
+        </div>
+      </section>
+
+      {/* Featured Articles */}
+      <section>
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="section-header mb-0">Featured Articles</h2>
+          <Link href="/knowledge" className="font-mono text-sm flex items-center gap-1 hover:text-brutal-accent transition-colors">
+            View All <ArrowRight size={14} />
+          </Link>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {featuredArticles.map((article, index) => (
+            <div key={index} className="brutal-card cursor-pointer group">
+              <span className="font-mono text-xs bg-brutal-black text-brutal-white px-2 py-1 mb-3 inline-block">
+                {article.category}
+              </span>
+              <h3 className="font-bold text-xl mb-2 group-hover:text-brutal-accent transition-colors">
+                {article.title}
+              </h3>
+              <p className="text-sm text-brutal-gray mb-4">{article.excerpt}</p>
+              <div className="flex items-center justify-between">
+                <div className="flex gap-2">
+                  {article.tags.map((tag) => (
+                    <span key={tag} className="font-mono text-xs border border-brutal-black px-2 py-0.5">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <span className="font-mono text-xs text-brutal-gray">{article.readTime}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </Layout>
+  );
+}