106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { Heart, Check } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DonateCardProps {
|
|
className?: string;
|
|
variant?: "default" | "mobile";
|
|
}
|
|
|
|
export function DonateCard({ className = "", variant = "default" }: DonateCardProps) {
|
|
/* ── Mobile horizontal ───────────────────────────────────────────────── */
|
|
if (variant === "mobile") {
|
|
return (
|
|
<article
|
|
className={cn(
|
|
"card-warm rounded-xl overflow-hidden flex",
|
|
"border-t-2 border-t-[var(--accent)]",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex-1 p-4 flex flex-col justify-between gap-3">
|
|
<div>
|
|
<h3 className="font-sans font-semibold text-[var(--fg-primary)] text-sm mb-1">
|
|
Apoie o Projeto
|
|
</h3>
|
|
<p className="label text-[var(--fg-muted)]">
|
|
Mantenha o NutriScan gratuito e independente.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="https://buymeacoffee.com/evandrotruuta"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-accent self-start py-2 px-4 text-xs"
|
|
>
|
|
<Heart className="w-3 h-3" strokeWidth={1.5} />
|
|
Contribuir
|
|
</a>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
/* ── Desktop card ────────────────────────────────────────────────────── */
|
|
return (
|
|
<article
|
|
className={cn(
|
|
"card-warm hover-lift rounded-xl overflow-hidden flex flex-col h-full",
|
|
"border-t-2 border-t-[var(--accent)]",
|
|
className
|
|
)}
|
|
>
|
|
<div className="p-8 flex flex-col flex-1 gap-6">
|
|
{/* Eyebrow */}
|
|
<span className="label text-[var(--accent)]">Apoie o Projeto</span>
|
|
|
|
{/* Headline */}
|
|
<div>
|
|
<h3 className="font-display text-display-sm text-[var(--fg-primary)] leading-tight mb-2">
|
|
Transparência alimentar,{" "}
|
|
<em className="font-display-i">para todos.</em>
|
|
</h3>
|
|
<p className="text-sm text-[var(--fg-secondary)] leading-relaxed">
|
|
O NutriScan opera sem anúncios e sem venda de dados. Sua
|
|
contribuição mantém o projeto vivo.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Benefits */}
|
|
<ul className="space-y-2.5">
|
|
{[
|
|
"Servidores sempre disponíveis",
|
|
"Novas funcionalidades",
|
|
"Acesso gratuito para todos",
|
|
].map((item) => (
|
|
<li key={item} className="flex items-center gap-2.5">
|
|
<Check
|
|
className="w-3.5 h-3.5 text-[var(--accent)] shrink-0"
|
|
strokeWidth={2}
|
|
/>
|
|
<span className="text-sm text-[var(--fg-secondary)]">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* CTA */}
|
|
<div className="mt-auto pt-2">
|
|
<a
|
|
href="https://buymeacoffee.com/evandrotruuta"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-accent w-full justify-center py-3.5 text-sm"
|
|
>
|
|
<Heart className="w-4 h-4" strokeWidth={1.5} />
|
|
Contribuir agora
|
|
</a>
|
|
<p className="label text-center text-[var(--fg-faint)] mt-3">
|
|
Qualquer valor ajuda
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|