FinalCTA.tsx (3954B)
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 { Ticker, TickerImage } from "../ui/Ticker"; 8 import { ArrowUpRight, MessageCircleIcon, GitBranch, Github } from "lucide-react"; 9 import { DAMUS_APP_STORE_URL, DAMUS_MERCH_STORE_URL, DAMUS_TESTFLIGHT_URL } from "@/lib/constants"; 10 import { MeshGradient4 } from "../effects/MeshGradient.4"; 11 import { GithubIcon } from "../icons/GithubIcon"; 12 13 export function FinalCTA({ className }: { className?: string }) { 14 const intl = useIntl() 15 16 return (<> 17 <div className={cn("bg-black overflow-hidden relative", className)}> 18 <div className="container mx-auto px-6 pb-24 pt-24"> 19 <div className="flex flex-col items-center justify-center mt-32 lg:mt-16"> 20 <div className="relative mb-24 flex flex-col items-center justify-center"> 21 <div className="absolute pointer-events-none"> 22 <MeshGradient4/> 23 </div> 24 <div className="relative w-24 h-24 mb-8 rounded-xl overflow-hidden shadow-xl"> 25 <Image 26 src="/logo_icon.png" 27 className="object-cover" 28 fill 29 sizes="300px" 30 alt="" 31 aria-hidden 32 /> 33 </div> 34 <motion.h2 className="mb-8 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 pb-4 whitespace-pre-line leading-relaxed"> 35 { intl.formatMessage({ id: "final_cta.headline", defaultMessage: "Download Damus today!" }) } 36 </motion.h2> 37 <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-[#8DEBF8] to-100% whitespace-pre-line leading-loose"> 38 {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && (<> 39 { intl.formatMessage({ id: "final_cta.subheadline", defaultMessage: "Damus is available on iOS, iPadOS and macOS (M1/M2).\nIt's free and open source." }) } 40 </>)} 41 </motion.div> 42 <motion.div 43 className="mt-10 md:mt-6 flex flex-col md:flex-row items-center md:items-center gap-y-4 gap-x-6" 44 style={{ opacity: 0 }} 45 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 46 > 47 <Link href={DAMUS_APP_STORE_URL} target="_blank"> 48 <Button variant="default" className="w-full md:w-auto"> 49 { intl.formatMessage({ id: "home.hero.download_now", defaultMessage: "Download now" }) } 50 <ArrowUpRight className="ml-2" /> 51 </Button> 52 </Link> 53 <Link href={DAMUS_TESTFLIGHT_URL} target="_blank"> 54 <Button variant="link" className="w-full md:w-auto"> 55 { intl.formatMessage({ id: "home.hero.join_testflight", defaultMessage: "Join TestFlight Beta" }) } 56 <ArrowUpRight className="text-damuspink-600 ml-2"/> 57 </Button> 58 </Link> 59 </motion.div> 60 </div> 61 </div> 62 </div> 63 </div> 64 </>) 65 }