50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import BlurFade from "@/components/magicui/blur-fade";
|
|
import Section from "@/components/section";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Brain, Shield, Zap } from "lucide-react";
|
|
|
|
const problems = [
|
|
{
|
|
title: "Best Agent",
|
|
description: "Choose the ideal agent bot tailored to your specific needs.",
|
|
icon: Brain,
|
|
},
|
|
{
|
|
title: "Fast Response",
|
|
description:
|
|
"Experience our quick-thinking chatbot, ready to answer all your questions.",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
title: "Engage More",
|
|
description:
|
|
"Transform your experience with a chatbot built for intelligent engagement.",
|
|
icon: Shield,
|
|
},
|
|
];
|
|
|
|
export default function Component() {
|
|
return (
|
|
<Section
|
|
title="Why Us?"
|
|
subtitle="Explore and try to create our various interactive agents."
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
|
|
{problems.map((problem, index) => (
|
|
<BlurFade key={index} delay={0.2 + index * 0.2} inView>
|
|
<Card className="bg-background border-none shadow-none">
|
|
<CardContent className="p-6 space-y-4">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
|
|
<problem.icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold">{problem.title}</h3>
|
|
<p className="text-muted-foreground">{problem.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</BlurFade>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|