PurpleFinalCTA.tsx (3382B)
1 import { Button } from "../ui/Button"; 2 import { useIntl } from "react-intl"; 3 import Link from "next/link"; 4 import { motion } from "framer-motion"; 5 import { cn } from "@/lib/utils"; 6 import Image from "next/image"; 7 import { ArrowUpRight, MessageCircleIcon, GitBranch, Github } from "lucide-react"; 8 import { PurpleIcon } from "../icons/PurpleIcon"; 9 import { MeshGradient5 } from "../effects/MeshGradient.5"; 10 11 export function PurpleFinalCTA({ className }: { className?: string }) { 12 const intl = useIntl() 13 14 return (<> 15 <div className={cn("bg-black overflow-hidden relative", className)}> 16 <div className="container mx-auto px-6 pb-24 pt-24"> 17 <div className="flex flex-col items-center justify-center mt-32 lg:mt-16"> 18 <div className="relative mb-24 flex flex-col items-center justify-center"> 19 <div className="absolute pointer-events-none"> 20 <MeshGradient5 /> 21 </div> 22 <div className="relative w-24 h-24 mb-8 rounded-xl overflow-hidden shadow-xl"> 23 <PurpleIcon /> 24 </div> 25 <motion.h2 className="mb-1 text-4xl md:text-5xl lg:text-6xl text-center text-transparent bg-clip-text bg-gradient-to-r from-white from-5% to-[#E0A4D3] to-100% font-semibold whitespace-pre-line leading-relaxed"> 26 {intl.formatMessage({ id: "purple.final_cta.headline", defaultMessage: "Get Purple today!" })} 27 </motion.h2> 28 <motion.h3 className="mb-8 text-2xl md:text-3xl lg:text-4xl text-center text-transparent bg-clip-text bg-gradient-to-r from-white from-5% to-[#E0A4D3] to-100% font-semibold pb-4 whitespace-pre-line leading-relaxed"> 29 {intl.formatMessage({ id: "purple.final_cta.subheadline", defaultMessage: "for as little as 15k sats/month" })} 30 </motion.h3> 31 <motion.div className="text-xl text-center max-w-2xl mb-12 text-transparent bg-clip-text bg-gradient-to-br from-white from-5% to-damuspink-500 to-100% whitespace-pre-line leading-loose"> 32 {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && (<> 33 {intl.formatMessage({ id: "purple.final_cta.text", defaultMessage: "Contribute to the future of the free internet, access exclusive features, and look cool doing it." })} 34 </>)} 35 </motion.div> 36 <motion.div 37 className="mt-10 md:mt-6 flex flex-col md:flex-row items-center md:items-center justify-center gap-y-4 gap-x-6 w-full" 38 style={{ opacity: 0 }} 39 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 40 > 41 <Link href="/purple/checkout" className="w-full md:w-auto"> 42 <Button variant="default" className="w-full"> 43 {intl.formatMessage({ id: "purple.final_cta.become-a-member", defaultMessage: "Become a member" })} 44 </Button> 45 </Link> 46 <Link href="damus:purple:landing" target="_blank" className="w-full md:w-auto"> 47 <Button variant="link" className="w-full"> 48 {intl.formatMessage({ id: "purple.final_cta.open_app", defaultMessage: "Open in Damus" })} 49 <ArrowUpRight className="text-damuspink-600 ml-2" /> 50 </Button> 51 </Link> 52 </motion.div> 53 </div> 54 </div> 55 </div> 56 </div> 57 </>) 58 }