PurpleHero.tsx (3457B)
1 import { ArrowUpRight, ChevronRight, Globe2, LucideZapOff, Sparkles, Star, 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 PurpleHero() { 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 <MeshGradient1 className="-translate-x-1/3" /> 22 </div> 23 <div className="container z-10 mx-auto px-6 pt-12 h-full min-h-screen flex flex-col justify-center"> 24 <TopMenu className="w-full" /> 25 <div className="flex flex-col items-center justify-center h-full grow"> 26 <Link href="/purple/checkout"> 27 <motion.div 28 className="inline-flex items-center text-xs rounded-full bg-purple-100/10 backdrop-blur-sm shadow-lg p-1 px-3 text-purple-100/80 border border-purple-100/30 active:scale-95 transition cursor-pointer mb-16" 29 style={{ opacity: 0 }} 30 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 31 > 32 <Sparkles className="h-4 mr-1 text-purple-50" aria-hidden="true" /> 33 {intl.formatMessage({ id: "purple.hero.renew", defaultMessage: "Already a member? Click here to renew!" })} 34 <ChevronRight className="ml-2" /> 35 </motion.div> 36 </Link> 37 <div className="flex gap-x-4 items-center mb-12 md:mb-6"> 38 <PurpleIcon className="w-16 h-16 md:w-24 md:h-24" /> 39 <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"> 40 Purple 41 </motion.h2> 42 </div> 43 <div className="text-purple-200/70 text-md md:text-lg text-center max-w-2xl mb-2 break-keep"> 44 {intl.formatMessage({ id: "purple.hero.description", defaultMessage: "For free-speech maximalists" })} 45 </div> 46 <motion.div 47 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" 48 style={{ opacity: 0 }} 49 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 50 > 51 <Link href="/purple/checkout" className="w-full md:w-auto"> 52 <Button variant="default" className="w-full"> 53 {intl.formatMessage({ id: "purple.hero.become-a-member", defaultMessage: "Become a member" })} 54 </Button> 55 </Link> 56 <Link href="#benefits" className="w-full md:w-auto"> 57 <Button variant="link" className="w-full"> 58 {intl.formatMessage({ id: "purple.hero.learn-more", defaultMessage: "Learn more" })} 59 </Button> 60 </Link> 61 </motion.div> 62 </div> 63 </div> 64 </div> 65 </>) 66 }