111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
"use client";
|
|
import { CertCardSkeleton } from "@/pages/about/aboutDetail/loading/loading";
|
|
import { CertCard } from "@/pages/about/aboutDetail/sertificateCard";
|
|
import PaginationLite from "@/components/paginationUI";
|
|
import { certs } from "@/lib/demoData";
|
|
import httpClient from "@/request/api";
|
|
import { endPoints } from "@/request/links";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { motion } from "framer-motion";
|
|
import { Award } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
|
|
export default function SertificatePage() {
|
|
const t = useTranslations();
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ["sertificate"],
|
|
queryFn: () => httpClient(endPoints.sertificate),
|
|
select: (res) => ({
|
|
results: res.data?.data?.results,
|
|
current_page: res.data?.data?.current_page,
|
|
total_pages: res.data?.data?.total_pages,
|
|
}),
|
|
});
|
|
|
|
const generallydata = data?.results || certs;
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
|
|
{/* ── Hero ── */}
|
|
<section className="max-w-6xl mx-auto px-6 pt-14 pb-10">
|
|
<motion.span
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600"
|
|
>
|
|
{t("about.certificatePage.hero.label")}
|
|
</motion.span>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.05 } as any}
|
|
className="mt-3 text-5xl md:text-7xl font-black uppercase tracking-tight leading-[0.92]"
|
|
>
|
|
{t("about.certificatePage.hero.title1")}{" "}
|
|
<span className="text-red-600">
|
|
{t("about.certificatePage.hero.title2")}
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.15 } as any}
|
|
className="mt-5 max-w-lg text-sm md:text-base text-gray-300 leading-relaxed"
|
|
>
|
|
{t("about.certificatePage.hero.description")}
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ scaleX: 0 }}
|
|
animate={{ scaleX: 1 }}
|
|
transition={{ delay: 0.3, duration: 0.7 } as any}
|
|
style={{ originX: 0 }}
|
|
className="mt-8 w-20 h-px bg-red-600"
|
|
/>
|
|
</section>
|
|
|
|
{/* ── Count strip ── */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-6xl mx-auto px-6 mb-10 flex items-center gap-5 border-y border-white/5 py-5"
|
|
>
|
|
<Award size={15} className="text-red-600" />
|
|
<span className="text-6xl font-black text-white/10">
|
|
{certs.length}
|
|
</span>
|
|
<p className="text-sm text-gray-400 leading-relaxed max-w-xs">
|
|
{t("about.certificatePage.count.description")}
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* ── Cards ── */}
|
|
<section className="max-w-4xl mx-auto px-6 flex flex-col gap-4">
|
|
{isLoading ? (
|
|
<CertCardSkeleton />
|
|
) : (
|
|
generallydata.map((c: any, i: number) => (
|
|
<CertCard key={c.id} c={c} i={i} />
|
|
))
|
|
)}
|
|
</section>
|
|
|
|
{/*pagination*/}
|
|
{data?.total_pages > 1 && (
|
|
<PaginationLite
|
|
currentPage={currentPage}
|
|
totalPages={data?.total_pages}
|
|
onChange={setCurrentPage}
|
|
/>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|