65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { Shield, Key, RefreshCw, Zap } from "lucide-react";
|
|
|
|
const trustItems = [
|
|
{
|
|
icon: <Shield className="w-8 h-8 text-primary" />,
|
|
title: "Compra Segura",
|
|
description: "Pagamento criptografado e protegido por padrões internacionais.",
|
|
},
|
|
{
|
|
icon: <Key className="w-8 h-8 text-primary" />,
|
|
title: "Licença Vinculada",
|
|
description: "Sua licença fica salva na sua conta, acesse de qualquer dispositivo.",
|
|
},
|
|
{
|
|
icon: <RefreshCw className="w-8 h-8 text-primary" />,
|
|
title: "Renovação Fácil",
|
|
description: "Renove sua licença com poucos cliques quando quiser.",
|
|
},
|
|
{
|
|
icon: <Zap className="w-8 h-8 text-primary" />,
|
|
title: "Acesso Imediato",
|
|
description: "Após o pagamento, o acesso é liberado instantaneamente.",
|
|
},
|
|
];
|
|
|
|
const TrustSection = () => {
|
|
return (
|
|
<section className="zoe-section bg-background">
|
|
<div className="container mx-auto px-4">
|
|
{/* Section header */}
|
|
<div className="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-foreground mb-4">
|
|
Compre com tranquilidade
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Informações importantes para pais e responsáveis
|
|
</p>
|
|
</div>
|
|
|
|
{/* Trust items grid */}
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
|
{trustItems.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="text-center p-6 rounded-3xl bg-secondary/50 hover:bg-secondary transition-colors duration-300"
|
|
>
|
|
<div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
|
{item.icon}
|
|
</div>
|
|
<h3 className="text-lg font-bold text-foreground mb-2">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default TrustSection;
|