87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useLanguage } from "@/components/language-provider";
|
|
import { Section, SectionHeading } from "@/components/ui/section";
|
|
|
|
export function Architecture() {
|
|
const { t } = useLanguage();
|
|
return (
|
|
<Section id="architecture" className="bg-slate-50 dark:bg-ink-soft/40">
|
|
<div className="container-x">
|
|
<SectionHeading
|
|
eyebrow={t.architecture.eyebrow}
|
|
title={t.architecture.title}
|
|
subtitle={t.architecture.subtitle}
|
|
/>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<div className="card border-brand-500/20 bg-brand-50 dark:border-brand-500/20 dark:bg-brand-500/[0.04]">
|
|
<div className="flex items-center gap-2">
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-gradient text-sm font-bold text-white">
|
|
IP
|
|
</span>
|
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
|
|
{t.architecture.identityTitle}
|
|
</h3>
|
|
</div>
|
|
<p className="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
|
MyAccount Hamsoo
|
|
</p>
|
|
</div>
|
|
|
|
<div className="card border-slate-200 dark:border-white/10">
|
|
<div className="flex items-center gap-2">
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-slate-100 text-sm font-bold text-slate-700 dark:bg-white/10 dark:text-white">
|
|
◆
|
|
</span>
|
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
|
|
{t.architecture.productTitle}
|
|
</h3>
|
|
</div>
|
|
<p className="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
|
Bermooda · Hamsoo · Future Apps
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 overflow-x-auto rounded-2xl border border-slate-200 bg-white dark:border-white/10">
|
|
<table className="w-full min-w-[32rem] border-collapse text-sm">
|
|
<thead>
|
|
<tr className="border-b border-slate-200 bg-slate-50 text-start dark:border-white/10 dark:bg-white/[0.02]">
|
|
<th className="px-5 py-3 text-start font-medium text-slate-600 dark:text-slate-400">
|
|
{t.architecture.tableHead.data}
|
|
</th>
|
|
<th className="px-5 py-3 text-start font-medium text-slate-600 dark:text-slate-400">
|
|
{t.architecture.tableHead.owner}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{t.architecture.rows.map((r, i) => (
|
|
<tr
|
|
key={i}
|
|
className="border-b border-slate-200 last:border-0 dark:border-white/5"
|
|
>
|
|
<td className="px-5 py-3 text-slate-800 dark:text-slate-200">{r.data}</td>
|
|
<td className="px-5 py-3">
|
|
<span
|
|
className={
|
|
"rounded-full px-2.5 py-0.5 text-xs font-medium " +
|
|
(r.owner === "Identity"
|
|
? "bg-brand-500/15 text-brand-700 dark:text-brand-200"
|
|
: "bg-slate-100 text-slate-600 dark:bg-white/10 dark:text-slate-300")
|
|
}
|
|
>
|
|
{r.owner}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|