Contribute.tsx (4411B)
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_MERCH_STORE_URL } from "@/lib/constants"; 10 import { MeshGradient4 } from "../effects/MeshGradient.4"; 11 import { GithubIcon } from "../icons/GithubIcon"; 12 13 export function Contribute({ 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 <GithubIcon className="w-24 h-24 mb-8" /> 25 <motion.h2 className="mb-8 text-3xl 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"> 26 { intl.formatMessage({ id: "contribute.headline", defaultMessage: "Contribute to Damus development" }) } 27 </motion.h2> 28 {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && ( 29 <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%"> 30 { intl.formatMessage({ id: "contribute.subheadline", defaultMessage: "Be part of the most popular Nostr client, start collaborating with an amazing team of developers, designers, product owners and more. Join us in our mission to make social media more healthy and free!" }) } 31 </motion.div> 32 )} 33 <div className="flex flex-col md:flex-row gap-x-8 gap-y-4"> 34 {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && ( 35 <Link href="https://github.com/damus-io/damus/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue+😌%22" target="_blank"> 36 <Button variant="default" className="w-full md:w-auto"> 37 <div className="mr-2">😌</div> 38 { intl.formatMessage({ id: "contribute.good_first_issues", defaultMessage: "Good first issues" }) } 39 <ArrowUpRight className="ml-2" /> 40 </Button> 41 </Link> 42 )} 43 <Link href="https://damus.io/code" target="_blank"> 44 <Button variant="default" className="w-full md:w-auto"> 45 <GitBranch className="mr-2" /> 46 { intl.formatMessage({ id: "contribute.go_to_github", defaultMessage: "Go to Github" }) } 47 <ArrowUpRight className="ml-2" /> 48 </Button> 49 </Link> 50 {(intl.locale != "ja" || process.env.FORCE_LOAD_ALL_JA_SECTIONS) && ( 51 <Link href="https://damus.io/npub1zafcms4xya5ap9zr7xxr0jlrtrattwlesytn2s42030lzu0dwlzqpd26k5" target="_blank"> 52 <Button variant="default" className="w-full md:w-auto"> 53 <MessageCircleIcon className="mr-2" /> 54 { intl.formatMessage({ id: "contribute.talk_to_a_team_member", defaultMessage: "Talk to a team member" }) } 55 <ArrowUpRight className="ml-2" /> 56 </Button> 57 </Link> 58 )} 59 </div> 60 </div> 61 </div> 62 </div> 63 </div> 64 </>) 65 }