70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useLanguage } from "@/components/language-provider";
|
|
import { Section, SectionHeading } from "@/components/ui/section";
|
|
import { PRODUCTS } from "@/lib/content";
|
|
|
|
export function Ecosystem() {
|
|
const { t, lang } = useLanguage();
|
|
return (
|
|
<Section id="ecosystem" className="bg-slate-50 dark:bg-ink-soft/40">
|
|
<div className="container-x">
|
|
<SectionHeading
|
|
eyebrow={t.ecosystem.eyebrow}
|
|
title={t.ecosystem.title}
|
|
subtitle={t.ecosystem.subtitle}
|
|
/>
|
|
|
|
<div className="relative mx-auto max-w-4xl rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-white/[0.02] sm:p-12">
|
|
<div className="grid gap-6 sm:grid-cols-3">
|
|
{PRODUCTS.map((p) => (
|
|
<div
|
|
key={p.key}
|
|
className="relative flex flex-col items-center rounded-2xl border border-slate-200 bg-slate-50 p-6 text-center dark:border-white/10 dark:bg-ink/40"
|
|
>
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-gradient text-lg font-bold text-white">
|
|
{p.name.charAt(0)}
|
|
</div>
|
|
<div className="mt-4 text-base font-semibold text-slate-900 dark:text-white">{p.name}</div>
|
|
<div className="mt-1 text-xs text-slate-600 dark:text-slate-400">{p.category[lang]}</div>
|
|
<p className="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
|
{p.tagline[lang]}
|
|
</p>
|
|
<span
|
|
className={
|
|
"mt-4 rounded-full px-3 py-1 text-[11px] font-medium " +
|
|
(p.status === "connected"
|
|
? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
|
|
: "bg-slate-100 text-slate-600 dark:bg-white/10 dark:text-slate-400")
|
|
}
|
|
>
|
|
{p.status === "connected"
|
|
? lang === "fa"
|
|
? "متصل شده"
|
|
: "Connected"
|
|
: lang === "fa"
|
|
? "آینده"
|
|
: "Future"}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 flex items-center justify-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-brand-500/10 text-brand-600 dark:bg-brand-500/20 dark:text-brand-200">
|
|
+
|
|
</span>
|
|
{t.ecosystem.futureNote}
|
|
</div>
|
|
|
|
<div className="pointer-events-none absolute -top-3 right-1/2 translate-x-1/2">
|
|
<span className="rounded-full bg-brand-gradient px-4 py-1 text-xs font-semibold text-white shadow-lg shadow-brand-900/40">
|
|
{t.ecosystem.hubLabel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|