PurpleHero.tsx (5100B)
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 { motion } from "framer-motion"; 8 import Image from "next/image"; 9 import { PurpleIcon } from "../icons/PurpleIcon"; 10 import { AccountInfo } from "@/utils/PurpleUtils"; 11 import { usePurpleLoginSession } from "@/hooks/usePurpleLoginSession"; 12 13 export function PurpleHero() { 14 const intl = useIntl() 15 const { accountInfo: loggedInAccountInfo, logout } = usePurpleLoginSession((error) => { 16 // Silently ignore errors, knowing whether the user is logged in is not essential in this context. 17 console.error("Error fetching account info", error) 18 }) 19 20 return (<> 21 <div 22 className="bg-black overflow-hidden relative" 23 > 24 <div className="absolute z-0 w-full h-full pointer-events-none"> 25 <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" /> 26 <MeshGradient1 className="-translate-x-1/3" /> 27 </div> 28 <TopMenu 29 className="w-full" 30 customCTA={<> 31 {loggedInAccountInfo ? 32 <Link href="/purple/account"> 33 <Button variant="accent"> 34 {intl.formatMessage({ id: "purple.hero.menu.go-to-my-account", defaultMessage: "My Account" })} 35 </Button> 36 </Link> 37 : 38 <Link href="/purple/login"> 39 <Button variant="accent"> 40 {intl.formatMessage({ id: "purple.hero.menu.login", defaultMessage: "Login" })} 41 </Button> 42 </Link> 43 } 44 </>} 45 /> 46 <div className="container z-10 mx-auto px-6 pt-12 h-full min-h-screen flex flex-col justify-center"> 47 <div className="flex flex-col items-center justify-center h-full grow"> 48 <Link href="/purple/checkout"> 49 <motion.div 50 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" 51 style={{ opacity: 0 }} 52 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 53 > 54 <Sparkles className="h-4 mr-1 text-purple-50" aria-hidden="true" /> 55 {intl.formatMessage({ id: "purple.hero.renew", defaultMessage: "Already a member? Click here to renew!" })} 56 <ChevronRight className="ml-2" /> 57 </motion.div> 58 </Link> 59 <div className="flex gap-x-4 items-center mb-12 md:mb-6"> 60 <PurpleIcon className="w-16 h-16 md:w-24 md:h-24" /> 61 <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"> 62 Purple 63 </motion.h2> 64 </div> 65 <div className="text-purple-200/70 text-md md:text-lg text-center max-w-2xl mb-2 break-keep"> 66 {intl.formatMessage({ id: "purple.hero.description", defaultMessage: "For free-speech maximalists" })} 67 </div> 68 <motion.div 69 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" 70 style={{ opacity: 0 }} 71 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 72 > 73 {loggedInAccountInfo ? 74 <> 75 <Link href="/purple/account" className="w-full md:w-auto"> 76 <Button variant="default" className="w-full"> 77 {intl.formatMessage({ id: "purple.hero.go-to-my-account", defaultMessage: "Go to my account" })} 78 </Button> 79 </Link> 80 <Link href="#benefits" className="w-full md:w-auto"> 81 <Button variant="link" className="w-full"> 82 {intl.formatMessage({ id: "purple.hero.learn-more", defaultMessage: "Learn more" })} 83 </Button> 84 </Link> 85 </> 86 : 87 <> 88 <Link href="/purple/checkout" className="w-full md:w-auto"> 89 <Button variant="default" className="w-full"> 90 {intl.formatMessage({ id: "purple.hero.become-a-member", defaultMessage: "Become a member" })} 91 </Button> 92 </Link> 93 <Link href="/purple/account" className="w-full md:w-auto"> 94 <Button variant="link" className="w-full"> 95 {intl.formatMessage({ id: "purple.hero.login", defaultMessage: "Login to my account" })} 96 </Button> 97 </Link> 98 </> 99 } 100 </motion.div> 101 </div> 102 </div> 103 </div> 104 </>) 105 }