48 lines
2.2 KiB
TypeScript
48 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import { useTranslation } from "@/i18n/navigation";
|
||
import { getThemeConfig } from "@/config";
|
||
|
||
export default function ShopCard() {
|
||
const { t } = useTranslation("shop");
|
||
const config = getThemeConfig();
|
||
const shopUrl = config.services?.shopUrl;
|
||
|
||
if (!shopUrl) return null;
|
||
|
||
return (
|
||
<div className="mb-12">
|
||
<a
|
||
href={shopUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="group block overflow-hidden rounded-2xl border border-emerald-200/80 bg-gradient-to-br from-emerald-50 via-white to-teal-50/60 p-8 shadow-sm transition-all duration-300 hover:border-emerald-300 hover:shadow-xl hover:shadow-emerald-100/50 dark:border-emerald-800/80 dark:from-emerald-900/30 dark:via-slate-900 dark:to-teal-900/20 dark:hover:border-emerald-700 dark:hover:shadow-emerald-900/30 sm:p-10"
|
||
>
|
||
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||
<div className="flex-1">
|
||
<div className="mb-3 inline-flex items-center gap-2 rounded-full bg-emerald-100 px-4 py-1.5 text-sm font-semibold text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
|
||
<span className="text-lg">🛒</span>
|
||
{t("badge")}
|
||
</div>
|
||
<h3 className="mb-3 text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-3xl">
|
||
{t("title")}
|
||
</h3>
|
||
<p className="mb-4 max-w-xl text-base leading-relaxed text-slate-600 dark:text-slate-400">
|
||
{t("desc")}
|
||
</p>
|
||
</div>
|
||
<div className="flex shrink-0 items-center gap-4 rounded-2xl bg-white/90 p-6 shadow-md backdrop-blur-sm transition-transform dark:bg-slate-800/90 group-hover:scale-[1.02] sm:p-8">
|
||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-3xl shadow-lg shadow-emerald-200/50">
|
||
🛍️
|
||
</div>
|
||
<div className="text-left">
|
||
<div className="font-bold text-slate-800 dark:text-slate-200">{t("cta")}</div>
|
||
<div className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t("ctaHint")}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
);
|
||
}
|