feat: add 30-day money back guarantee trust badge above complete order button
- Add green trust badge with checkmark icon above 'Complete Order' button - Add translations for all locales (EN, SR, DE, FR) - Badge includes: '30-Day Money-Back Guarantee' text - Styled with green background and border to match trust/conversion theme
This commit is contained in:
@@ -1,55 +1,6 @@
|
||||
"use client";
|
||||
// COD Instructions component - currently disabled as the instructions are self-explanatory
|
||||
// Can be re-enabled if payment method instructions are needed in the future
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Banknote, Package, CheckCircle } from "lucide-react";
|
||||
|
||||
interface CODInstructionsProps {
|
||||
locale: string;
|
||||
}
|
||||
|
||||
export function CODInstructions({ locale }: CODInstructionsProps) {
|
||||
const t = useTranslations("Payment.cod");
|
||||
|
||||
const instructions = [
|
||||
{
|
||||
icon: Banknote,
|
||||
title: t("instructions.prepareCash"),
|
||||
description: t("instructions.prepareCashDesc"),
|
||||
},
|
||||
{
|
||||
icon: Package,
|
||||
title: t("instructions.inspectOrder"),
|
||||
description: t("instructions.inspectOrderDesc"),
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: t("instructions.noFee"),
|
||||
description: t("instructions.noFeeDesc"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mt-4 rounded-lg bg-blue-50 p-4">
|
||||
<h4 className="mb-3 font-medium text-blue-900">
|
||||
{t("instructions.title")}
|
||||
</h4>
|
||||
|
||||
<div className="space-y-3">
|
||||
{instructions.map((instruction, index) => {
|
||||
const Icon = instruction.icon;
|
||||
return (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100">
|
||||
<Icon className="h-4 w-4 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-blue-900">{instruction.title}</p>
|
||||
<p className="text-sm text-blue-700">{instruction.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export function CODInstructions() {
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user