PurpleBanner.tsx (3318B)
1 import { ArrowUpRight, ChevronRight, Globe2, LucideZapOff, Zap, ZapIcon, ZapOff } from "lucide-react"; 2 import { MeshGradient1 } from "../effects/MeshGradient.1"; 3 import { TopMenu } from "./TopMenu"; 4 import { Button } from "../ui/Button"; 5 import { FormattedMessage, useIntl } from "react-intl"; 6 import Link from "next/link"; 7 import { DAMUS_APP_STORE_URL, DAMUS_TESTFLIGHT_URL } from "@/lib/constants"; 8 import { motion } from "framer-motion"; 9 import Image from "next/image"; 10 import { PurpleIcon } from "../icons/PurpleIcon"; 11 12 export function PurpleBanner() { 13 const intl = useIntl() 14 15 return (<> 16 <div 17 className="bg-black overflow-hidden relative" 18 > 19 <div className="absolute z-0 w-full h-full pointer-events-none"> 20 <Image src="/stars-bg.webp" fill className="absolute top-0 left-0 object-cover lg:object-contain object-center w-full h-full" alt="" aria-hidden="true" /> 21 </div> 22 <div className="container z-10 mx-auto px-6 pt-12 h-full min-h-screen flex flex-col justify-center"> 23 <div className="flex flex-col items-center justify-center h-full grow"> 24 <div className="inline-flex items-center mb-24 text-sm md:text-sm rounded-full bg-gradient-to-r from-damuspink-500/10 to-damuspink-600/10 backdrop-blur-sm shadow-lg shadow-damuspink-500/10 p-1 px-4 md:p-1 md:px-4 text-pink-100 border border-damuspink-500/30 active:scale-95 transition cursor-pointer"> 25 {/* TODO: Localize */} 26 Want more? 27 </div> 28 <div className="text-damuspink-500/90 text-lg md:text-xl text-center max-w-2xl mb-4 md:mb-8 break-keep capitalize tracking-widest font-semibold"> 29 {/* TODO: Localize */} 30 INTRODUCING 31 </div> 32 <div className="flex gap-x-4 items-center mb-12 md:mb-6"> 33 <PurpleIcon className="w-16 h-16 md:w-24 md:h-24" /> 34 <motion.h2 className="text-6xl md:text-8xl text-center text-transparent bg-clip-text bg-gradient-to-r from-damuspink-500 from-30% to-damuspink-600 to-100% font-semibold break-keep tracking-tight"> 35 Purple 36 </motion.h2> 37 </div> 38 <div className="text-purple-200/70 text-md md:text-lg text-center max-w-2xl mb-2 break-keep"> 39 {/* TODO: Localize */} 40 Help us stay independent in our mission for Freedom tech with our Purple membership, get exclusive benefits, and look cool doing it! 41 </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 w-full md:w-auto" 44 style={{ opacity: 0 }} 45 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 46 > 47 <Link href="/purple/checkout" className="w-full md:w-auto"> 48 <Button variant="default" className="w-full"> 49 {intl.formatMessage({ id: "purple.hero.become-a-member", defaultMessage: "Become a member" })} 50 </Button> 51 </Link> 52 <Link href="/purple" className="w-full md:w-auto"> 53 <Button variant="link" className="w-full"> 54 {intl.formatMessage({ id: "purple.hero.learn-more", defaultMessage: "Learn more" })} 55 </Button> 56 </Link> 57 </motion.div> 58 </div> 59 </div> 60 </div> 61 </>) 62 }