|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { motion } from "framer-motion"; |
| 4 | +import { GlowOrb } from "@/components/GlowOrb"; |
| 5 | +import { SectionReveal } from "@/components/SectionReveal"; |
| 6 | + |
| 7 | +/** |
| 8 | + * 支持我们 — 赞赏页 |
| 9 | + * 赞赏是无偿的心意支持,不与任何功能挂钩 |
| 10 | + */ |
| 11 | +export default function SupportPage() { |
| 12 | + return ( |
| 13 | + <main className="relative min-h-screen overflow-hidden"> |
| 14 | + <GlowOrb count={14} seed={7} /> |
| 15 | + |
| 16 | + <div className="relative max-w-3xl mx-auto px-6 pt-36 pb-24"> |
| 17 | + {/* 标题 */} |
| 18 | + <motion.div |
| 19 | + className="text-center mb-14" |
| 20 | + initial={{ opacity: 0, y: 24 }} |
| 21 | + animate={{ opacity: 1, y: 0 }} |
| 22 | + transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }} |
| 23 | + > |
| 24 | + <span |
| 25 | + className="inline-block text-xs tracking-widest uppercase px-3 py-1 rounded-full mb-6" |
| 26 | + style={{ |
| 27 | + color: "var(--kb-amber)", |
| 28 | + border: "1px solid var(--kb-border-default)", |
| 29 | + background: "var(--kb-bg-secondary)", |
| 30 | + }} |
| 31 | + > |
| 32 | + Support · 注入负熵 |
| 33 | + </span> |
| 34 | + <h1 className="font-serif text-3xl sm:text-4xl font-semibold text-kb-text mb-4"> |
| 35 | + 请作者喝杯蜜雪 |
| 36 | + </h1> |
| 37 | + <p className="text-kb-text2 leading-relaxed max-w-md mx-auto"> |
| 38 | + 课伴由一位独立开发者维护。 |
| 39 | + <br /> |
| 40 | + 你的每一份赞赏,都会变成服务器的电费与深夜的咖啡, |
| 41 | + <br /> |
| 42 | + 支撑这个小小的生命体继续对抗宇宙的无序。 |
| 43 | + </p> |
| 44 | + </motion.div> |
| 45 | + |
| 46 | + {/* 赞赏码卡片 */} |
| 47 | + <SectionReveal> |
| 48 | + <div |
| 49 | + className="relative rounded-2xl border p-8 sm:p-10 max-w-sm mx-auto text-center" |
| 50 | + style={{ |
| 51 | + borderColor: "var(--kb-border-default)", |
| 52 | + background: "var(--kb-bg-secondary)", |
| 53 | + }} |
| 54 | + > |
| 55 | + <div className="rounded-xl overflow-hidden bg-white p-3 mb-6"> |
| 56 | + {/* eslint-disable-next-line @next/next/no-img-element */} |
| 57 | + <img |
| 58 | + src="/sponsor-qr.png" |
| 59 | + alt="微信赞赏码" |
| 60 | + className="w-full h-auto" |
| 61 | + /> |
| 62 | + </div> |
| 63 | + <p className="text-sm text-kb-text2 mb-1.5">微信扫一扫 · 赞赏支持</p> |
| 64 | + <p className="text-xs text-kb-text3 leading-relaxed"> |
| 65 | + 赞赏是纯粹的心意支持,不与任何功能挂钩。 |
| 66 | + <br /> |
| 67 | + 无论是否赞赏,课伴的本地功能永远免费。 |
| 68 | + </p> |
| 69 | + </div> |
| 70 | + </SectionReveal> |
| 71 | + |
| 72 | + {/* 其他支持方式 */} |
| 73 | + <SectionReveal> |
| 74 | + <div className="mt-14 text-center"> |
| 75 | + <p className="text-sm text-kb-text3 mb-4">不方便赞赏?这些方式同样珍贵:</p> |
| 76 | + <div className="flex flex-wrap items-center justify-center gap-3 text-sm"> |
| 77 | + <a |
| 78 | + href="https://github.com/Aparencia/KeBan" |
| 79 | + target="_blank" |
| 80 | + rel="noopener noreferrer" |
| 81 | + className="px-4 py-2 rounded-full text-kb-text2 hover:text-kb-text transition-colors duration-300" |
| 82 | + style={{ border: "1px solid var(--kb-border-default)" }} |
| 83 | + > |
| 84 | + ⭐ 在 GitHub 点个 Star |
| 85 | + </a> |
| 86 | + <span |
| 87 | + className="px-4 py-2 rounded-full text-kb-text2" |
| 88 | + style={{ border: "1px solid var(--kb-border-default)" }} |
| 89 | + > |
| 90 | + 📣 推荐给身边的同学 |
| 91 | + </span> |
| 92 | + <a |
| 93 | + href="https://github.com/Aparencia/KeBan/issues" |
| 94 | + target="_blank" |
| 95 | + rel="noopener noreferrer" |
| 96 | + className="px-4 py-2 rounded-full text-kb-text2 hover:text-kb-text transition-colors duration-300" |
| 97 | + style={{ border: "1px solid var(--kb-border-default)" }} |
| 98 | + > |
| 99 | + 💬 提出你的建议 |
| 100 | + </a> |
| 101 | + </div> |
| 102 | + </div> |
| 103 | + </SectionReveal> |
| 104 | + </div> |
| 105 | + </main> |
| 106 | + ); |
| 107 | +} |
0 commit comments