Spaces:
Running
Running
File size: 1,939 Bytes
1d583f6 | 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 | import { FileText, Database, Tag } from "lucide-react";
export function ProblemCards() {
return (
<section className="py-32 bg-white">
<div className="max-w-6xl mx-auto px-6">
<div className="grid md:grid-cols-3 gap-6">
{/* Card 1 */}
<div className="p-8 border border-[#eaeaea] bg-white rounded-xl hover:border-black hover:shadow-sm transition-all duration-300">
<FileText className="w-8 h-8 mb-6 text-black" strokeWidth={1.5} />
<h3 className="text-xl font-semibold text-black mb-3">System prompt overflow</h3>
<p className="text-[#666666] leading-relaxed">
Stuffing history into the system prompt works for a demo. In production, token limits are hit in week 2.
</p>
</div>
{/* Card 2 */}
<div className="p-8 border border-[#eaeaea] bg-white rounded-xl hover:border-black hover:shadow-sm transition-all duration-300">
<Database className="w-8 h-8 mb-6 text-black" strokeWidth={1.5} />
<h3 className="text-xl font-semibold text-black mb-3">Vector search alone</h3>
<p className="text-[#666666] leading-relaxed">
Standard RAG gives you text chunks with no time order and no structural relationships between entities.
</p>
</div>
{/* Card 3 */}
<div className="p-8 border border-[#eaeaea] bg-white rounded-xl hover:border-black hover:shadow-sm transition-all duration-300">
<Tag className="w-8 h-8 mb-6 text-black" strokeWidth={1.5} />
<h3 className="text-xl font-semibold text-black mb-3">Metadata tags</h3>
<p className="text-[#666666] leading-relaxed">
Relying on hardcoded JSON metadata tags breaks down as your application scales and relationships become complex.
</p>
</div>
</div>
</div>
</section>
);
}
|