eric/gitlab-instance-0a899031_cnomadcna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
root
2026-06-07 15:57:47 +08:00
parent cd885f5fcd
commit 9de2465793
50 changed files with 4942 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/digital/components/Roadmap.tsx
View File

@@ -1,27 +1,28 @@
"use client";
import { Link, useTranslation } from "@/app/digital/i18n/navigation";
import DigitalThemeIcon from "./DigitalThemeIcon";
const days = [
{ day: 1, icon: "👋", color: "bg-sky-500" },
{ day: 2, icon: "💡", color: "bg-cyan-500" },
{ day: 3, icon: "💰", color: "bg-teal-500" },
{ day: 4, icon: "🛠️", color: "bg-emerald-500" },
{ day: 5, icon: "📋", color: "bg-amber-500" },
{ day: 6, icon: "🗺️", color: "bg-orange-500" },
{ day: 7, icon: "🚀", color: "bg-rose-500" },
];
{ day: 1, icon: "👋", iconName: "user", color: "bg-sky-500" },
{ day: 2, icon: "💡", iconName: "spark", color: "bg-cyan-500" },
{ day: 3, icon: "💰", iconName: "wallet", color: "bg-teal-500" },
{ day: 4, icon: "🛠️", iconName: "tool", color: "bg-emerald-500" },
{ day: 5, icon: "📋", iconName: "check", color: "bg-amber-500" },
{ day: 6, icon: "🗺️", iconName: "map", color: "bg-orange-500" },
{ day: 7, icon: "🚀", iconName: "compass", color: "bg-rose-500" },
] as const;
export default function Roadmap() {
const { t } = useTranslation("roadmap");
return (
<section id="roadmap" className="bg-slate-50 py-20 sm:py-28 dark:bg-slate-900">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<section id="roadmap" className="dn-section dn-roadmap bg-slate-50 py-20 sm:py-28 dark:bg-slate-900">
<div className="dn-container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
<h2 className="dn-section-title text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
{t("title")} <span className="gradient-text">{t("titleHighlight")}</span>
</h2>
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
<p className="dn-section-copy mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
{t("subtitle")}
</p>
</div>
@@ -36,7 +37,7 @@ export default function Roadmap() {
<Link
key={d.day}
href={`/day/${d.day}`}
className="card-hover group flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-sky-600"
className="dn-card dn-day-card card-hover group flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-sky-600"
>
<div className="flex items-center gap-3">
<div
@@ -44,7 +45,7 @@ export default function Roadmap() {
>
DAY {d.day}
</div>
<span className="text-xl">{d.icon}</span>
<DigitalThemeIcon name={d.iconName} emoji={d.icon} className="h-5 w-5 text-xl text-slate-500 dark:text-slate-300" />
<h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600 dark:text-slate-100 dark:group-hover:text-sky-400">
{t(`days.${d.day}.title`)}
</h3>
@@ -68,10 +69,10 @@ export default function Roadmap() {
<div className="grid gap-6 sm:grid-cols-2">
<Link
href="/ebook"
className="group flex flex-col overflow-hidden rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-sky-50 to-cyan-50/50 p-8 shadow-md transition-all hover:border-sky-300 hover:shadow-lg dark:border-slate-700 dark:from-sky-900/20 dark:to-cyan-900/10 dark:hover:border-sky-600"
className="dn-card dn-product-card group flex flex-col overflow-hidden rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-sky-50 to-cyan-50/50 p-8 shadow-md transition-all hover:border-sky-300 hover:shadow-lg dark:border-slate-700 dark:from-sky-900/20 dark:to-cyan-900/10 dark:hover:border-sky-600"
>
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50 dark:shadow-sky-900/30">
📖
<div className="dn-icon-box mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50 dark:shadow-sky-900/30">
<DigitalThemeIcon name="book" emoji="📖" className="h-7 w-7" />
</div>
<h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
{t("ebook.title")}
@@ -86,10 +87,10 @@ export default function Roadmap() {
<Link
href="/course"
className="group flex w-full flex-col overflow-hidden rounded-2xl border-2 border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50/50 p-8 text-left shadow-md transition-all hover:border-amber-300 hover:shadow-lg dark:border-amber-800 dark:from-amber-900/20 dark:to-orange-900/10 dark:hover:border-amber-700"
className="dn-card dn-product-card group flex w-full flex-col overflow-hidden rounded-2xl border-2 border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50/50 p-8 text-left shadow-md transition-all hover:border-amber-300 hover:shadow-lg dark:border-amber-800 dark:from-amber-900/20 dark:to-orange-900/10 dark:hover:border-amber-700"
>
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 text-3xl shadow-lg shadow-amber-200/50 dark:shadow-amber-900/30">
🎓
<div className="dn-icon-box mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 text-3xl shadow-lg shadow-amber-200/50 dark:shadow-amber-900/30">
<DigitalThemeIcon name="course" emoji="🎓" className="h-7 w-7" />
</div>
<span className="mb-2 inline-block text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
{t("course.tag")}
@@ -100,7 +101,7 @@ export default function Roadmap() {
<p className="mt-2 flex-1 text-slate-600 dark:text-slate-400">
{t("course.desc")}
</p>
<span className="mt-6 inline-flex items-center gap-2 self-start rounded-full bg-amber-500 px-6 py-3 font-semibold text-white transition group-hover:bg-amber-600 dark:bg-amber-600 dark:group-hover:bg-amber-500">
<span className="dn-button-accent mt-6 inline-flex items-center gap-2 self-start rounded-full bg-amber-500 px-6 py-3 font-semibold text-white transition group-hover:bg-amber-600 dark:bg-amber-600 dark:group-hover:bg-amber-500">
{t("course.cta")}
</span>
</Link>