64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"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>
|
||
);
|
||
}
|