Spaces:
Sleeping
Sleeping
File size: 4,672 Bytes
ab5a73b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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>
);
} |