Add donation functionality to encourage community support, including a footer card on the home page, a highlighted "Apoiar" link in the header, and comprehensive English messages for the donation section to promote transparency and user engagement.
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Heart, Coffee } from "lucide-react";
|
|
import { BlurFade } from "@/components/ui/blur-fade";
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
|
|
export function DonationFooterCard() {
|
|
const t = useTranslations("donation");
|
|
|
|
return (
|
|
<BlurFade delay={0.1}>
|
|
<div className="p-6 rounded-xl border border-border/50 bg-card backdrop-blur-lg hover:border-primary/30 hover:shadow-lg transition-all duration-300">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 rounded-full bg-primary/10 border border-primary/20">
|
|
<Heart className="w-8 h-8 text-primary" />
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-lg mb-1">{t("title")}</h3>
|
|
<p className="text-sm text-muted-foreground">{t("subtitle")}</p>
|
|
</div>
|
|
|
|
<Link href="/apoiar">
|
|
<Button size="sm" className="bg-primary hover:bg-primary/90">
|
|
<Coffee className="mr-2 h-4 w-4" />
|
|
Apoiar
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</BlurFade>
|
|
);
|
|
}
|