BannedInChina.tsx (3789B)
1 import { MeshGradient2 } from "../effects/MeshGradient.2"; 2 import { Button } from "../ui/Button"; 3 import { FormattedMessage, useIntl } from "react-intl"; 4 import Link from "next/link"; 5 import { motion } from "framer-motion"; 6 import { RoundedContainerWithGradientBorder } from "../ui/RoundedContainerWithGradientBorder"; 7 import { cn } from "@/lib/utils"; 8 import Image from "next/image"; 9 10 const bannedInChinaNews = [ 11 { 12 mediaLogo: "/brand-logos/tech-crunch.png", 13 name: "Tech Crunch", 14 headline: "‘Damus pulled from Apple’s App Store in China after two days’", 15 linkUrl: "https://techcrunch.com/2023/02/02/damus-pulled-from-apples-app-store-in-china-after-two-days/" 16 }, 17 { 18 mediaLogo: "/brand-logos/epoch-times.png", 19 name: "Epoch Times", 20 headline: "'That Was Fast': China Bans Decentralized Twitter-Like App Over 'Illegal Content'", 21 linkUrl: "https://www.theepochtimes.com/tech/apple-removes-decentralized-twitter-like-app-damus-from-chinese-app-store-5036072" 22 }, 23 { 24 mediaLogo: "/brand-logos/coindesk.webp", 25 name: "CoinDesk", 26 headline: "Jack Dorsey-Based Social Network Nostr's Damus App Banned From China App Store", 27 linkUrl: "https://www.coindesk.com/business/2023/02/03/jack-dorsey-based-social-network-nostr-gets-damus-app-banned-from-china-app-store/" 28 }, 29 ] 30 31 export function BannedInChina({ className }: { className?: string }) { 32 const intl = useIntl() 33 34 return (<> 35 <div className={cn("bg-black overflow-y-visible overflow-x-hidden relative", className)}> 36 <div className="container mx-auto px-6 pb-32 pt-20"> 37 <div className="flex flex-col items-center justify-center mt-32 lg:mt-16"> 38 <div className="relative mb-32"> 39 <motion.h2 className="text-6xl md:text-8xl text-center text-transparent bg-clip-text bg-gradient-to-r from-[#FF7979] from-30% to-[#9378FF] to-100% font-semibold break-keep"> 40 { intl.formatMessage({ id: "banned_in_china.headline", defaultMessage: "Banned in China" }) } 41 </motion.h2> 42 <MeshGradient2 className="absolute top-0 left-0 -translate-x-[350px] md:-translate-x-[250px] -translate-y-[250px] scale-75 md:scale-100 pointer-events-none"/> 43 </div> 44 <div className="flex flex-wrap gap-x-8 gap-y-16 items-center justify-center"> 45 {bannedInChinaNews.map((item, index) => ( 46 <Link key={index} className="max-w-xs flex flex-col items-center justify-center" href={item.linkUrl} target="_blank"> 47 <RoundedContainerWithGradientBorder className="hover:scale-105 active:scale-95 transition"> 48 <Image 49 src={item.mediaLogo} 50 className="p-6 object-contain" 51 fill 52 sizes="300px" 53 alt="" 54 /> 55 </RoundedContainerWithGradientBorder> 56 <h3 className="text-white/70 text-center text-sm font-semibold mt-8 hover:underline"> 57 {item.name} 58 </h3> 59 <p className="text-white/90 text-center text-normal mt-4 hover:underline"> 60 {item.headline} 61 </p> 62 </Link> 63 ))} 64 </div> 65 </div> 66 </div> 67 </div> 68 </>) 69 }