sertifiacte page updated
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,182 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
"use client"
|
||||
import { CertCard } from "@/components/pages/about/aboutDetail/sertificateCard";
|
||||
import { certs } from "@/lib/demoData";
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { Download, ExternalLink, Award } from "lucide-react";
|
||||
import { Award } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Statistics } from "@/components/pages/home";
|
||||
|
||||
export default function SertificatePage() {
|
||||
const t = useTranslations();
|
||||
|
||||
const certs = [
|
||||
{
|
||||
id: 1,
|
||||
src: "/images/about/sertificate.webp",
|
||||
title: "Sertifikat 1",
|
||||
desc: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
year: "2024",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Statistics />
|
||||
<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>
|
||||
<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.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.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>
|
||||
|
||||
{/* Divider */}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* ── Horizontal scroll track ── */}
|
||||
<section className="mt-4 max-w-6xl mx-auto">
|
||||
{/* Section header */}
|
||||
<div className=" px-6 flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Award size={15} className="text-red-600" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-gray-300">
|
||||
{certs.length} {t("about.certificatePage.count.suffix")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* ── 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>
|
||||
|
||||
{/* ── Count strip ── */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="max-w-6xl mx-auto px-6 my-5 flex items-center gap-6 border-y border-white/5 py-5"
|
||||
>
|
||||
<span className="text-6xl font-black text-white/10">
|
||||
{certs.length}
|
||||
</span>
|
||||
<p className="text-sm text-gray-300 leading-relaxed max-w-xs">
|
||||
{t("about.certificatePage.count.description")}
|
||||
</p>
|
||||
</motion.section>
|
||||
|
||||
{/* Scrollable row */}
|
||||
<div className="w-[80%] mx-auto flex gap-5 overflow-x-auto px-6 pb-6 scrollbar-none [-ms-overflow-style:none] [scrollbar-width:none] snap-x snap-mandatory">
|
||||
{certs.map((c, i) => (
|
||||
<motion.article
|
||||
initial={{ opacity: 0, y: 28 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55, delay: i * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="group p-5 flex flex-row rounded-xl overflow-hidden bg-[#161514] border border-white/5 hover:border-red-600/25 transition-colors duration-300 w-full"
|
||||
>
|
||||
{/* ── Left: certificate image ── */}
|
||||
<div className="relative flex-none w-[50%] h-50 overflow-hidden">
|
||||
<Image
|
||||
src={c.src}
|
||||
alt={c.title}
|
||||
fill
|
||||
className="object-contain transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Right: info + actions ── */}
|
||||
<div className="flex flex-col justify-between flex-1 px-5 py-5 gap-4 min-w-0">
|
||||
{/* Label + title + desc */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Award size={12} className="text-red-600 shrink-0" />
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-red-600">
|
||||
{t("about.certificatePage.card.badge")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="font-bold text-base md:text-lg text-white leading-tight">
|
||||
{c.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-xs text-gray-300 leading-relaxed line-clamp-2">
|
||||
{c.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Link
|
||||
href={c.src}
|
||||
target="_blank"
|
||||
className="flex items-center gap-1.5 h-8 px-4 rounded-xl bg-red-600 hover:bg-red-500 transition-colors duration-200 text-white text-xs font-bold"
|
||||
>
|
||||
<ExternalLink size={12} />
|
||||
{t("about.certificatePage.card.view")}
|
||||
</Link>
|
||||
|
||||
<a
|
||||
href={c.src}
|
||||
download
|
||||
className="flex items-center gap-1.5 h-8 px-4 rounded-xl border border-white/10 hover:border-red-600/40 hover:bg-red-600/5 transition-all duration-200 text-white/80 hover:text-red-600 text-xs font-bold"
|
||||
>
|
||||
<Download size={12} />
|
||||
{t("about.certificatePage.card.download")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.article>
|
||||
))}
|
||||
|
||||
{/* End spacer */}
|
||||
<div className="flex-none w-2" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
{/* ── Cards ── */}
|
||||
<section className="max-w-4xl mx-auto px-6 flex flex-col gap-4">
|
||||
{certs.map((c, i) => (
|
||||
<CertCard key={c.id} c={c} i={i} />
|
||||
))}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user