64 lines
2.1 KiB
TypeScript
64 lines
2.1 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="relative overflow-hidden bg-gradient-to-br from-violet-900 via-fuchsia-900 to-cyan-900 py-20 text-white md:py-28">
|
||
<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-bold 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-white/40 bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 hover:border-white/60 sm:w-auto"
|
||
>
|
||
<Icon className="mr-2 h-4 w-4" />
|
||
{cta.label}
|
||
</Button>
|
||
</Link>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|