's'

components/sections/final-cta.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import Link from "next/link";
+import { MapPin, BookOpen, Crown } from "lucide-react";
+import { motion } from "framer-motion";
+import { FINAL_CTAS } from "~/lib/data";
+import { Button } from "~/components/ui/button";
+
+const ICONS = [MapPin, BookOpen, Crown] as const;
+
+export function FinalCta() {
+  return (
+    <section className="bg-neutral-900 py-16 text-white md:py-24">
+      <div className="container mx-auto px-4 md:px-6">
+        <motion.h2
+          initial={{ opacity: 0, y: 12 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-80px" }}
+          className="text-center text-2xl font-semibold md:text-3xl"
+        >
+          从这里开始你的数字游民路径
+        </motion.h2>
+        <motion.p
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          className="mx-auto mt-3 max-w-xl text-center text-neutral-300"
+        >
+          先选择最适合你的入口，然后开始行动。
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="mt-12 flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:justify-center"
+        >
+          {FINAL_CTAS.map((cta, i) => {
+            const Icon = ICONS[i];
+            return (
+              <Link
+                key={cta.label}
+                href={cta.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group"
+              >
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="w-full min-w-[200px] border-neutral-600 bg-transparent text-white hover:bg-neutral-800 hover:text-white sm:w-auto"
+                >
+                  <Icon className="mr-2 h-4 w-4" />
+                  {cta.label}
+                </Button>
+              </Link>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+}