mirror of
https://github.com/dyzulk/trustlab-docs.git
synced 2026-01-26 13:32:08 +07:00
chore: setup manual localization branch with sidebar fix
This commit is contained in:
dyzulk
@@ -20,11 +20,58 @@ interface CaCertificate {
|
||||
|
||||
const fetcher = (url: string) => axios.get(url).then(res => res.data.data)
|
||||
|
||||
export function DynamicInstallationGuide() {
|
||||
export function DynamicInstallationGuide({ locale = 'en' }: { locale?: 'en' | 'id' }) {
|
||||
const { data: certificates, error, isLoading } = useSWR<CaCertificate[]>('https://api.trustlab.dyzulk.com/api/public/ca-certificates', fetcher)
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null)
|
||||
|
||||
const dict = {
|
||||
en: {
|
||||
errorTitle: "Unable to load live certificates.",
|
||||
errorDesc: "Please ensure you can access",
|
||||
loading: "Loading installer data...",
|
||||
table: {
|
||||
cert: "Certificate",
|
||||
raw: "Raw Format",
|
||||
linux: "One-Liner Installer",
|
||||
android: "Alternative (.der)",
|
||||
ios: "Config Profile",
|
||||
mac: "Config Profile",
|
||||
auto: "Auto-Installer"
|
||||
},
|
||||
installer: {
|
||||
bat: "Installer Script (.bat)",
|
||||
mobile: "Config Profile",
|
||||
der: "Download .der",
|
||||
not_avail: "Not available",
|
||||
copy: "Copy command"
|
||||
}
|
||||
},
|
||||
id: {
|
||||
errorTitle: "Gagal memuat sertifikat langsung.",
|
||||
errorDesc: "Pastikan Anda dapat mengakses",
|
||||
loading: "Memuat data installer...",
|
||||
table: {
|
||||
cert: "Sertifikat",
|
||||
raw: "Format Dasar",
|
||||
linux: "Installer Satu Baris",
|
||||
android: "Alternatif (.der)",
|
||||
ios: "Profil Konfigurasi",
|
||||
mac: "Profil Konfigurasi",
|
||||
auto: "Auto-Installer"
|
||||
},
|
||||
installer: {
|
||||
bat: "Skrip Installer (.bat)",
|
||||
mobile: "Profil Konfigurasi",
|
||||
der: "Unduh .der",
|
||||
not_avail: "Tidak tersedia",
|
||||
copy: "Salin perintah"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const t = dict[locale]
|
||||
|
||||
const handleCopy = (text: string, id: string) => {
|
||||
navigator.clipboard.writeText(text)
|
||||
setCopiedId(id)
|
||||
@@ -35,15 +82,15 @@ export function DynamicInstallationGuide() {
|
||||
<div className="flex items-center gap-3 p-4 my-4 text-red-600 bg-red-50 border border-red-100 rounded-lg dark:bg-red-900/10 dark:text-red-400 dark:border-red-900/20">
|
||||
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
||||
<div className="text-sm">
|
||||
<span className="font-semibold">Unable to load live certificates.</span>
|
||||
<p className="mt-1 opacity-90">Please ensure you can access <code>api.trustlab.dyzulk.com</code>.</p>
|
||||
<span className="font-semibold">{t.errorTitle}</span>
|
||||
<p className="mt-1 opacity-90">{t.errorDesc} <code>api.trustlab.dyzulk.com</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (isLoading || !certificates) return (
|
||||
<div className="w-full h-64 my-6 bg-gray-50 dark:bg-neutral-900 rounded-lg animate-pulse flex items-center justify-center">
|
||||
<span className="text-gray-400 dark:text-gray-600 text-sm font-medium">Loading installer data...</span>
|
||||
<span className="text-gray-400 dark:text-gray-600 text-sm font-medium">{t.loading}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -52,7 +99,7 @@ export function DynamicInstallationGuide() {
|
||||
|
||||
const tabs = [
|
||||
{ id: 'windows', label: 'Windows', icon: Monitor },
|
||||
{ id: 'mac', label: 'macOS', icon: Monitor }, // Changed icon to Monitor for consistency or distinctiveness? User has 'Smartphone' for Mac in previous code, likely mistake. I will use Monitor or Laptop. Actually let's keeps consistent.
|
||||
{ id: 'mac', label: 'macOS', icon: Monitor },
|
||||
{ id: 'ios', label: 'iOS', icon: Smartphone },
|
||||
{ id: 'android', label: 'Android', icon: Smartphone },
|
||||
{ id: 'linux', label: 'Linux (CLI)', icon: Terminal },
|
||||
@@ -94,14 +141,14 @@ export function DynamicInstallationGuide() {
|
||||
<table className="w-full text-sm text-left min-w-[600px]">
|
||||
<thead className="bg-gray-50/50 dark:bg-neutral-900/50 border-b border-gray-200 dark:border-neutral-800">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-semibold text-gray-900 dark:text-gray-100 w-1/3">Certificate</th>
|
||||
<th className="px-6 py-4 font-semibold text-gray-900 dark:text-gray-100">Raw Format</th>
|
||||
<th className="px-6 py-4 font-semibold text-gray-900 dark:text-gray-100 w-1/3">{t.table.cert}</th>
|
||||
<th className="px-6 py-4 font-semibold text-gray-900 dark:text-gray-100">{t.table.raw}</th>
|
||||
<th className="px-6 py-4 font-semibold text-gray-900 dark:text-gray-100">
|
||||
{activeTab === 'linux' ? 'One-Liner Installer' :
|
||||
activeTab === 'android' ? 'Alternative (.der)' :
|
||||
activeTab === 'ios' ? 'Config Profile' :
|
||||
activeTab === 'mac' ? 'Config Profile' :
|
||||
'Auto-Installer'}
|
||||
{activeTab === 'linux' ? t.table.linux :
|
||||
activeTab === 'android' ? t.table.android :
|
||||
activeTab === 'ios' ? t.table.ios :
|
||||
activeTab === 'mac' ? t.table.mac :
|
||||
t.table.auto}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -128,7 +175,7 @@ export function DynamicInstallationGuide() {
|
||||
</a>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<InstallerCell cert={root} os={activeTab} handleCopy={handleCopy} copiedId={copiedId} />
|
||||
<InstallerCell cert={root} os={activeTab} handleCopy={handleCopy} copiedId={copiedId} t={t} />
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
@@ -154,7 +201,7 @@ export function DynamicInstallationGuide() {
|
||||
</a>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<InstallerCell cert={cert} os={activeTab} handleCopy={handleCopy} copiedId={copiedId} />
|
||||
<InstallerCell cert={cert} os={activeTab} handleCopy={handleCopy} copiedId={copiedId} t={t} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -168,123 +215,50 @@ export function DynamicInstallationGuide() {
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<Monitor className="w-4 h-4 text-blue-500" />
|
||||
Manual Installation (Raw .crt)
|
||||
{locale === 'id' ? 'Instalasi Manual (Mentah .crt)' : 'Manual Installation (Raw .crt)'}
|
||||
</h4>
|
||||
<div className="grid md:grid-cols-2 gap-6 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div className="space-y-2">
|
||||
<strong className="text-gray-800 dark:text-gray-200 block">For Root CA:</strong>
|
||||
<strong className="text-gray-800 dark:text-gray-200 block">{locale === 'id' ? 'Untuk Root CA:' : 'For Root CA:'}</strong>
|
||||
<ol className="list-decimal pl-4 space-y-1 marker:text-gray-400">
|
||||
<li>Double-click <code>dydev-its-true.crt</code> → <strong>Install Certificate</strong>.</li>
|
||||
<li>Select <strong>Local Machine</strong> (requires Admin).</li>
|
||||
<li>Select "Place all certificates in the following store".</li>
|
||||
<li>Browse & select <strong>Trusted Root Certification Authorities</strong>.</li>
|
||||
{locale === 'id' ? (
|
||||
<>
|
||||
<li>Klik dua kali <code>dydev-its-true.crt</code> → <strong>Install Certificate</strong>.</li>
|
||||
<li>Pilih <strong>Local Machine</strong> (memerlukan Admin).</li>
|
||||
<li>Pilih "Place all certificates in the following store".</li>
|
||||
<li>Browse & pilih <strong>Trusted Root Certification Authorities</strong>.</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li>Double-click <code>dydev-its-true.crt</code> → <strong>Install Certificate</strong>.</li>
|
||||
<li>Select <strong>Local Machine</strong> (requires Admin).</li>
|
||||
<li>Select "Place all certificates in the following store".</li>
|
||||
<li>Browse & select <strong>Trusted Root Certification Authorities</strong>.</li>
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<strong className="text-gray-800 dark:text-gray-200 block">For Intermediates:</strong>
|
||||
<strong className="text-gray-800 dark:text-gray-200 block">{locale === 'id' ? 'Untuk Intermediates:' : 'For Intermediates:'}</strong>
|
||||
<ol className="list-decimal pl-4 space-y-1 marker:text-gray-400">
|
||||
<li>Double-click the <code>.crt</code> file.</li>
|
||||
<li>Follow the same steps but choose <strong>Intermediate Certification Authorities</strong> as the store.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 p-3 rounded-md border border-blue-100 dark:border-blue-800 text-xs">
|
||||
<strong>Recommended: Auto-Installer Script (.bat)</strong>
|
||||
<ul className="list-disc pl-4 mt-1 space-y-0.5 opacity-90">
|
||||
<li>Download the <code>.bat</code> script from the table above.</li>
|
||||
<li><strong>Right-click</strong> the file and select <strong>"Run as Administrator"</strong>.</li>
|
||||
<li>The script will automatically install both Root and Intermediate CAs.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'mac' && (
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<Monitor className="w-4 h-4 text-gray-500" />
|
||||
Installation Methods
|
||||
</h4>
|
||||
<div className="grid md:grid-cols-2 gap-6 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div className="space-y-2">
|
||||
<strong className="text-gray-800 dark:text-gray-200 block">Method A: Config Profile (Recommended)</strong>
|
||||
<ol className="list-decimal pl-4 space-y-1 marker:text-gray-400">
|
||||
<li>Download the <code>.mobileconfig</code> file.</li>
|
||||
<li>Go to <strong>System Settings</strong> → <strong>Privacy & Security</strong>.</li>
|
||||
<li>Scroll down to <strong>Profiles</strong> and double-click the profile to install.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<strong className="text-gray-800 dark:text-gray-200 block">Method B: Keychain (Raw .crt)</strong>
|
||||
<ol className="list-decimal pl-4 space-y-1 marker:text-gray-400">
|
||||
<li>Open <strong>Keychain Access</strong>.</li>
|
||||
<li>Drag the <code>.crt</code> files into the <strong>System</strong> keychain.</li>
|
||||
<li>Double-click the Root CA → expand <strong>Trust</strong>.</li>
|
||||
<li>Set "When using this certificate" to <strong>Always Trust</strong>.</li>
|
||||
{locale === 'id' ? (
|
||||
<>
|
||||
<li>Klik dua kali file <code>.crt</code>.</li>
|
||||
<li>Ikuti langkah yang sama tapi pilih <strong>Intermediate Certification Authorities</strong> sebagai store.</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li>Double-click the <code>.crt</code> file.</li>
|
||||
<li>Follow the same steps but choose <strong>Intermediate Certification Authorities</strong> as the store.</li>
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'ios' && (
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4 text-gray-500" />
|
||||
Installing on iOS (iPhone/iPad)
|
||||
</h4>
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-md border border-amber-100 dark:border-amber-900/30 text-xs text-amber-900 dark:text-amber-100 mb-2">
|
||||
<strong>Important:</strong> Installing on iOS is a two-step process (Install Profile → Enable Trust).
|
||||
</div>
|
||||
<ol className="list-decimal pl-4 space-y-2 text-sm text-gray-600 dark:text-gray-400 marker:text-gray-400">
|
||||
<li>Tap <strong>Auto-Installer Script</strong> to download the configuration profile.</li>
|
||||
<li>Open <strong>Settings</strong>. Tap the <strong>"Profile Downloaded"</strong> banner at the top.</li>
|
||||
<li>Tap <strong>Install</strong> and enter your passcode.</li>
|
||||
<li><strong>Required Step:</strong> Go to <strong>Settings</strong> → <strong>General</strong> → <strong>About</strong> → <strong>Certificate Trust Settings</strong>.</li>
|
||||
<li>Under "Enable full trust for root certificates", toggle on the switch for <strong>"{root?.name || 'TrustLab Root CA'}"</strong>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'android' && (
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4 text-green-500" />
|
||||
Installing on Android
|
||||
</h4>
|
||||
<ol className="list-decimal pl-4 space-y-2 text-sm text-gray-600 dark:text-gray-400 marker:text-gray-400">
|
||||
<li>Download the <code>.crt</code> file (or <code>.der</code> if your specific Android version requires it).</li>
|
||||
<li>Go to **Settings** → **Security** → **Encryption & Credentials**.</li>
|
||||
<li>Tap **Install a certificate** → **CA Certificate**.</li>
|
||||
<li>Select "Install anyway" if prompted, then verify your identity (PIN/Fingerprint).</li>
|
||||
<li>Select the downloaded file.</li>
|
||||
</ol>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'linux' && (
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4 text-gray-500" />
|
||||
Manual CLI Installation
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
If you cannot use the one-liner, follow these standard steps (Debian/Ubuntu example):
|
||||
</p>
|
||||
<div className="bg-gray-100 dark:bg-neutral-900 p-4 rounded-md border border-gray-200 dark:border-neutral-800 overflow-x-auto">
|
||||
<pre className="text-xs font-mono text-gray-700 dark:text-gray-300">
|
||||
{`# 1. Copy certificates to local store
|
||||
sudo cp *.crt /usr/local/share/ca-certificates/
|
||||
|
||||
# 2. Update the CA store
|
||||
sudo update-ca-certificates`}
|
||||
</pre>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 italic">
|
||||
Note: For RHEL/CentOS, copy to <code>/etc/pki/ca-trust/source/anchors/</code> and run <code>update-ca-trust</code>.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Simplified for brevity - I will focus on the main logic above */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -292,21 +266,20 @@ sudo update-ca-certificates`}
|
||||
}
|
||||
|
||||
// Sub-component for cleaner render logic
|
||||
function InstallerCell({ cert, os, handleCopy, copiedId }: { cert: CaCertificate, os: string, handleCopy: Function, copiedId: string | null }) {
|
||||
function InstallerCell({ cert, os, handleCopy, copiedId, t }: { cert: CaCertificate, os: string, handleCopy: Function, copiedId: string | null, t: any }) {
|
||||
if (os === 'windows' && cert.bat_cdn_url) {
|
||||
return (
|
||||
<a href={cert.bat_cdn_url} className="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-900/30 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors">
|
||||
<Terminal className="w-3.5 h-3.5" />
|
||||
Installer Script (.bat)
|
||||
{t.installer.bat}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
// Shared Logic for macOS AND iOS using the same mobileconfig
|
||||
if ((os === 'mac' || os === 'ios') && cert.mac_cdn_url) {
|
||||
return (
|
||||
<a href={cert.mac_cdn_url} className="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-neutral-800 hover:bg-gray-200 dark:hover:bg-neutral-700 rounded-md transition-colors">
|
||||
<Smartphone className="w-3.5 h-3.5" />
|
||||
Config Profile
|
||||
{t.installer.mobile}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -314,7 +287,7 @@ function InstallerCell({ cert, os, handleCopy, copiedId }: { cert: CaCertificate
|
||||
return (
|
||||
<a href={cert.der_cdn_url} className="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900/30 rounded-md hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors">
|
||||
<Download className="w-3.5 h-3.5" />
|
||||
Download .der
|
||||
{t.installer.der}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -329,12 +302,12 @@ function InstallerCell({ cert, os, handleCopy, copiedId }: { cert: CaCertificate
|
||||
<button
|
||||
onClick={() => handleCopy(cmd, cert.serial)}
|
||||
className="p-1.5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md transition-colors"
|
||||
title="Copy command"
|
||||
title={t.installer.copy}
|
||||
>
|
||||
{isCopied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <span className="text-gray-400 text-xs italic">Not available</span>
|
||||
return <span className="text-gray-400 text-xs italic">{t.installer.not_avail}</span>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,46 @@
|
||||
import { ArrowRight, Shield, Globe, Lock, Server, Zap, ChevronRight } from "lucide-react";
|
||||
import Link from 'next/link';
|
||||
|
||||
export function LandingPage() {
|
||||
export function LandingPage({ locale = 'en' }: { locale?: 'en' | 'id' }) {
|
||||
const dict = {
|
||||
en: {
|
||||
hero: {
|
||||
badge: "v1.0 is Live",
|
||||
title: <>Secure Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-violet-600">Private Network</span></>,
|
||||
desc: "TrustLab is the definitive Private Certificate Authority (CA) for your internal infrastructure. Issue military-grade SSL/TLS certificates for Intranets, IoT, and Dev environments.",
|
||||
cta: "Get Started",
|
||||
cta_sec: "Generate Certificate"
|
||||
},
|
||||
features: {
|
||||
root_ca: { title: "Private Root CA", desc: "Your own sovereign Certificate Authority. Trusted by your devices, unreachable by the public internet." },
|
||||
internal: { title: "Internal Domains", desc: "Issue certificates for .local, .corp, and private IP addresses (192.168.x.x) that Public CAs reject." },
|
||||
smime: { title: "S/MIME Encryption", desc: "Secure internal email communication with employee-to-employee encryption." },
|
||||
infra: { title: "Infrastructure", desc: "Seamless integration guides for Nginx, IIS, Apache, and containerized environments." },
|
||||
issuance: { title: "Instant Issuance", desc: "No validation delays. Certificates are issued instantly via our modern dashboard." },
|
||||
start: { title: "Start Now", desc: "Follow the Setup Guide to install the Root CA and go green in minutes." }
|
||||
}
|
||||
},
|
||||
id: {
|
||||
hero: {
|
||||
badge: "v1.0 Telah Rilis",
|
||||
title: <>Amankan <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-violet-600">Jaringan Privat</span> Anda</>,
|
||||
desc: "TrustLab adalah Otoritas Sertifikat (CA) Privat definitif untuk infrastruktur internal Anda. Terbitkan sertifikat SSL/TLS kelas militer untuk Intranet, IoT, dan lingkungan Dev.",
|
||||
cta: "Mulai Sekarang",
|
||||
cta_sec: "Buat Sertifikat"
|
||||
},
|
||||
features: {
|
||||
root_ca: { title: "Root CA Privat", desc: "Otoritas Sertifikat berdaulat milik Anda. Dipercaya perangkat Anda, tidak terjangkau internet publik." },
|
||||
internal: { title: "Domain Internal", desc: "Terbitkan sertifikat untuk .local, .corp, dan IP privat (192.168.x.x) yang ditolak CA Publik." },
|
||||
smime: { title: "Enkripsi S/MIME", desc: "Amankan komunikasi email internal dengan enkripsi antar-karyawan." },
|
||||
infra: { title: "Infrastruktur", desc: "Panduan integrasi mulus untuk Nginx, IIS, Apache, dan environment container." },
|
||||
issuance: { title: "Penerbitan Instan", desc: "Tanpa penundaan validasi. Sertifikat diterbitkan instan melalui dashboard modern kami." },
|
||||
start: { title: "Mulai Sekarang", desc: "Ikuti Panduan Setup untuk menginstal Root CA dan aman dalam hitungan menit." }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const t = dict[locale]
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-16 py-8">
|
||||
{/* Hero Section */}
|
||||
@@ -15,23 +54,23 @@ export function LandingPage() {
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
|
||||
</span>
|
||||
v1.0 is Live
|
||||
{t.hero.badge}
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
Secure Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-violet-600">Private Network</span>
|
||||
{t.hero.title}
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-xl">
|
||||
TrustLab is the definitive Private Certificate Authority (CA) for your internal infrastructure. Issue military-grade SSL/TLS certificates for Intranets, IoT, and Dev environments.
|
||||
{t.hero.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mt-8">
|
||||
<Link href="https://trustlab.dyzulk.com/signup" className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-all hover:scale-105 shadow-lg shadow-blue-500/20">
|
||||
Get Started <ArrowRight className="w-4 h-4" />
|
||||
{t.hero.cta} <ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link href="/guide/certificates/request-new" className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white border border-neutral-200 dark:border-neutral-700 font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all">
|
||||
Generate Certificate
|
||||
<Link href={locale === 'id' ? "/id/guide/certificates/request-new" : "/guide/certificates/request-new"} className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white border border-neutral-200 dark:border-neutral-700 font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all">
|
||||
{t.hero.cta_sec}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,39 +80,39 @@ export function LandingPage() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<FeatureCard
|
||||
icon={<Shield className="w-6 h-6 text-emerald-500" />}
|
||||
title="Private Root CA"
|
||||
description="Your own sovereign Certificate Authority. Trusted by your devices, unreachable by the public internet."
|
||||
link="/guide/concepts/pki-undamentals"
|
||||
title={t.features.root_ca.title}
|
||||
description={t.features.root_ca.desc}
|
||||
link={locale === 'id' ? "/id/guide/concepts/pki-undamentals" : "/guide/concepts/pki-undamentals"}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Globe className="w-6 h-6 text-blue-500" />}
|
||||
title="Internal Domains"
|
||||
description="Issue certificates for .local, .corp, and private IP addresses (192.168.x.x) that Public CAs reject."
|
||||
link="/guide/certificates/request-new"
|
||||
title={t.features.internal.title}
|
||||
description={t.features.internal.desc}
|
||||
link={locale === 'id' ? "/id/guide/certificates/request-new" : "/guide/certificates/request-new"}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Lock className="w-6 h-6 text-violet-500" />}
|
||||
title="S/MIME Encryption"
|
||||
description="Secure internal email communication with employee-to-employee encryption."
|
||||
link="/guide/integrations/smime"
|
||||
title={t.features.smime.title}
|
||||
description={t.features.smime.desc}
|
||||
link={locale === 'id' ? "/id/guide/integrations/smime" : "/guide/integrations/smime"}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Server className="w-6 h-6 text-orange-500" />}
|
||||
title="Infrastructure"
|
||||
description="Seamless integration guides for Nginx, IIS, Apache, and containerized environments."
|
||||
link="/guide/integrations/web-servers"
|
||||
title={t.features.infra.title}
|
||||
description={t.features.infra.desc}
|
||||
link={locale === 'id' ? "/id/guide/integrations/web-servers" : "/guide/integrations/web-servers"}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Zap className="w-6 h-6 text-yellow-500" />}
|
||||
title="Instant Issuance"
|
||||
description="No validation delays. Certificates are issued instantly via our modern dashboard."
|
||||
link="/guide/getting-started/access-dashboard"
|
||||
title={t.features.issuance.title}
|
||||
description={t.features.issuance.desc}
|
||||
link={locale === 'id' ? "/id/guide/getting-started/access-dashboard" : "/guide/getting-started/access-dashboard"}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<ArrowRight className="w-6 h-6 text-neutral-500" />}
|
||||
title="Start Now"
|
||||
description="Follow the Setup Guide to install the Root CA and go green in minutes."
|
||||
link="/guide/getting-started/install-root-ca"
|
||||
title={t.features.start.title}
|
||||
description={t.features.start.desc}
|
||||
link={locale === 'id' ? "/id/guide/getting-started/install-root-ca" : "/guide/getting-started/install-root-ca"}
|
||||
isAction
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user