Upload components/Datasets.jsx with huggingface_hub

components/Datasets.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+const Datasets = () => {
+  const datasets = [
+    {
+      name: "Web Text Corpus",
+      size: "2.5TB",
+      languages: "50+",
+      description: "Diverse web content from reputable sources across multiple domains"
+    },
+    {
+      name: "Academic Papers",
+      size: "800GB",
+      languages: "English",
+      description: "Scientific papers and research documents from top conferences"
+    },
+    {
+      name: "Code Repository",
+      size: "1.2TB",
+      languages: "10+",
+      description: "Open source code across multiple programming languages"
+    },
+    {
+      name: "Multilingual News",
+      size: "1.8TB",
+      languages: "25+",
+      description: "Global news articles with temporal metadata"
+    },
+    {
+      name: "Conversational Data",
+      size: "500GB",
+      languages: "15+",
+      description: "Dialogues and conversational exchanges from various platforms"
+    },
+    {
+      name: "Technical Documentation",
+      size: "300GB",
+      languages: "8+",
+      description: "API docs, manuals, and technical guides"
+    }
+  ];
+
+  return (
+    <section id="datasets" className="py-20 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            Featured Datasets
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Comprehensive collections tailored for different LLM training scenarios
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {datasets.map((dataset, index) => (
+            <div key={index} className="bg-white rounded-xl shadow-sm border p-6 hover:shadow-md transition-shadow">
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">{dataset.name}</h3>
+              <div className="flex gap-4 text-sm text-gray-600 mb-3">
+                <span className="bg-primary-50 text-primary-700 px-2 py-1 rounded">Size: {dataset.size}</span>
+                <span className="bg-green-50 text-green-700 px-2 py-1 rounded">{dataset.languages} languages</span>
+              </div>
+              <p className="text-gray-600">{dataset.description}</p>
+              <button className="mt-4 text-primary-600 hover:text-primary-700 font-semibold transition-colors">
+                Learn More →
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Datasets;