105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Reveal } from "@/components/landing-page/Reveal";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import Image from "next/image";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export default function AboutPage() {
|
|
const t = useTranslations("AboutPage");
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#f9f9f9] dark:bg-black text-gray-800 dark:text-white px-6 lg:px-20 py-12">
|
|
<Reveal>
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
{/* Header Section */}
|
|
<div className="text-center space-y-4">
|
|
<h1 className="text-3xl md:text-4xl font-bold text-[#bb3523]">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="text-base md:text-lg text-gray-600 dark:text-gray-300">
|
|
{t("subtitle")}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator className="my-8" />
|
|
|
|
{/* Deskripsi Umum */}
|
|
<Card className="shadow-md border-none bg-white dark:bg-gray-900">
|
|
<CardContent className="p-6 space-y-4">
|
|
<h2 className="text-xl font-semibold text-[#bb3523]">
|
|
{t("whatIs.title")}
|
|
</h2>
|
|
<p className="leading-relaxed text-justify">
|
|
{t.rich("whatIs.p1", {
|
|
b: (chunks) => <b>{chunks}</b>,
|
|
})}
|
|
</p>
|
|
<p className="leading-relaxed text-justify">{t("whatIs.p2")}</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Fungsi Utama */}
|
|
<Card className="shadow-md border-none bg-white dark:bg-gray-900">
|
|
<CardContent className="p-6 space-y-4">
|
|
<h2 className="text-xl font-semibold text-[#bb3523]">
|
|
{t("functions.title")}
|
|
</h2>
|
|
<ul className="list-disc list-inside space-y-2 leading-relaxed">
|
|
<li>{t("functions.f1")}</li>
|
|
<li>{t("functions.f2")}</li>
|
|
<li>{t("functions.f3")}</li>
|
|
<li>{t("functions.f4")}</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Cara Kerja */}
|
|
<Card className="shadow-md border-none bg-white dark:bg-gray-900">
|
|
<CardContent className="p-6 space-y-4">
|
|
<h2 className="text-xl font-semibold text-[#bb3523]">
|
|
{t("howItWorks.title")}
|
|
</h2>
|
|
<ol className="list-decimal list-inside space-y-2 leading-relaxed">
|
|
<li>{t("howItWorks.s1")}</li>
|
|
<li>{t("howItWorks.s2")}</li>
|
|
<li>{t("howItWorks.s3")}</li>
|
|
<li>{t("howItWorks.s4")}</li>
|
|
</ol>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Ilustrasi */}
|
|
<div className="flex justify-center py-6">
|
|
<Image
|
|
src="/assets/about-illustration.png"
|
|
alt={t("title")}
|
|
width={600}
|
|
height={400}
|
|
className="rounded-lg shadow-lg object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Visi & Misi */}
|
|
<Card className="shadow-md border-none bg-white dark:bg-gray-900">
|
|
<CardContent className="p-6 space-y-4">
|
|
<h2 className="text-xl font-semibold text-[#bb3523]">
|
|
{t("vision.title")}
|
|
</h2>
|
|
<p>{t("vision.text")}</p>
|
|
|
|
<p className="font-semibold">{t("mission.title")}</p>
|
|
<ul className="list-disc list-inside space-y-2">
|
|
<li>{t("mission.m1")}</li>
|
|
<li>{t("mission.m2")}</li>
|
|
<li>{t("mission.m3")}</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
);
|
|
}
|