GithubBackup/moemail
1
0
Fork 0
mirror of https://github.com/beilunyang/moemail.git synced 2026-09-09 09:16:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add new content pages

Browse Source
This commit is contained in:
beilunyang
2026-01-18 14:33:11 +08:00
committed by ty
parent cef0ee0f0c
commit 07ad672e7d
54 changed files with 2314 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/home/how-it-works.tsx
+68
View File
@@ -0,0 +1,68 @@
"use client"
import { useTranslations } from "next-intl"
import { MousePointerClick, RefreshCw, ArchiveX, Network, FileCode, Share2 } from "lucide-react"
export function HowItWorks() {
const t = useTranslations("home.howItWorks")
return (
<section className="py-16">
<div className="container mx-auto px-4 max-w-5xl">
<h2 className="text-3xl font-bold text-center mb-12">{t("title")}</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="flex flex-col items-center text-center space-y-4 p-6 rounded-xl border border-border bg-card/50 hover:border-primary/50 transition-colors">
<div className="p-4 bg-primary/10 rounded-full text-primary">
<MousePointerClick className="w-8 h-8" />
</div>
<h3 className="text-xl font-semibold">{t("step1.title")}</h3>
<p className="text-muted-foreground">{t("step1.description")}</p>
</div>
<div className="flex flex-col items-center text-center space-y-4 p-6 rounded-xl border border-border bg-card/50 hover:border-primary/50 transition-colors">
<div className="p-4 bg-primary/10 rounded-full text-primary">
<RefreshCw className="w-8 h-8" />
</div>
<h3 className="text-xl font-semibold">{t("step2.title")}</h3>
<p className="text-muted-foreground">{t("step2.description")}</p>
</div>
<div className="flex flex-col items-center text-center space-y-4 p-6 rounded-xl border border-border bg-card/50 hover:border-primary/50 transition-colors">
<div className="p-4 bg-primary/10 rounded-full text-primary">
<ArchiveX className="w-8 h-8" />
</div>
<h3 className="text-xl font-semibold">{t("step3.title")}</h3>
<p className="text-muted-foreground">{t("step3.description")}</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
<div className="flex flex-col items-center text-center space-y-4 p-6 rounded-xl border border-border bg-card/50 hover:border-primary/50 transition-colors">
<div className="p-4 bg-primary/10 rounded-full text-primary">
<Network className="w-8 h-8" />
</div>
<h3 className="text-xl font-semibold">{t("advStep1.title")}</h3>
<p className="text-muted-foreground">{t("advStep1.description")}</p>
</div>
<div className="flex flex-col items-center text-center space-y-4 p-6 rounded-xl border border-border bg-card/50 hover:border-primary/50 transition-colors">
<div className="p-4 bg-primary/10 rounded-full text-primary">
<FileCode className="w-8 h-8" />
</div>
<h3 className="text-xl font-semibold">{t("advStep2.title")}</h3>
<p className="text-muted-foreground">{t("advStep2.description")}</p>
</div>
<div className="flex flex-col items-center text-center space-y-4 p-6 rounded-xl border border-border bg-card/50 hover:border-primary/50 transition-colors">
<div className="p-4 bg-primary/10 rounded-full text-primary">
<Share2 className="w-8 h-8" />
</div>
<h3 className="text-xl font-semibold">{t("advStep3.title")}</h3>
<p className="text-muted-foreground">{t("advStep3.description")}</p>
</div>
</div>
</div>
</section>
)
}