Upload components/CompetitiveAdvantage.jsx with huggingface_hub

components/CompetitiveAdvantage.jsx

@@ -0,0 +1,100 @@
+import { CheckCircle, TrendingUp, Award, Lock } from 'lucide-react';
+
+const advantages = [
+  {
+    icon: TrendingUp,
+    title: 'Market Leader',
+    description: 'Chroma is the fastest-growing open-source vector database with 8k+ GitHub stars and active community support'
+  },
+  {
+    icon: Award,
+    title: 'Proven Expertise',
+    description: 'Our team has implemented 50+ production Chroma deployments across various industries'
+  },
+  {
+    icon: Lock,
+    title: 'Enterprise Security',
+    description: 'SOC 2 Type II compliant with end-to-end encryption and role-based access control'
+  },
+  {
+    icon: CheckCircle,
+    title: 'Cost Efficient',
+    description: 'Reduce vector search costs by up to 70% compared to proprietary alternatives'
+  }
+];
+
+export default function CompetitiveAdvantage() {
+  return (
+    <section id="advantages" className="py-20 bg-white">
+      <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 sm:text-4xl font-bold text-gray-900 mb-4">
+            Why Choose Chroma & Us
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Leverage the power of the leading open-source vector database with our specialized expertise
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+          {advantages.map((advantage, index) => (
+            <div key={index} className="flex items-start space-x-4">
+              <div className="flex-shrink-0">
+                <div className="bg-primary-100 rounded-lg p-3">
+                  <advantage.icon className="w-6 h-6 text-primary-600" />
+                </div>
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">{advantage.title}</h3>
+                <p className="text-gray-600">{advantage.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="bg-primary-50 rounded-lg p-8">
+          <div className="text-center mb-8">
+            <h3 className="text-2xl font-bold text-gray-900 mb-4">Chroma vs. Competition</h3>
+            <p className="text-gray-600">Key differentiators that make Chroma the ideal choice</p>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full bg-white rounded-lg shadow-sm">
+              <thead className="bg-primary-600 text-white">
+                <tr>
+                  <th className="px-6 py-3 text-left font-semibold">Feature</th>
+                  <th className="px-6 py-3 text-center font-semibold">Chroma</th>
+                  <th className="px-6 py-3 text-center font-semibold">Pinecone</th>
+                  <th className="px-6 py-3 text-center font-semibold">Weaviate</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                <tr>
+                  <td className="px-6 py-4 font-medium">Open Source</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
+                  <td className="px-6 py-4 text-center text-red-600 font-semibold">✗ No</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
+                </tr>
+                <tr>
+                  <td className="px-6 py-4 font-medium">Self-Hosted</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
+                  <td className="px-6 py-4 text-center text-red-600 font-semibold">✗ No</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
+                </tr>
+                <tr>
+                  <td className="px-6 py-4 font-medium">Cloud Managed</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
+                </tr>
+                <tr>
+                  <td className="px-6 py-4 font-medium">Cost Efficiency</td>
+                  <td className="px-6 py-4 text-center text-green-600 font-semibold">High</td>
+                  <td className="px-6 py-4 text-center text-yellow-600 font-semibold">Medium</td>
+                  <td className="px-6 py-4 text-center text-yellow-600 font-semibold">Medium</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}