Hero.tsx (7259B)
1 import { ArrowUpRight, ChevronRight, Globe2 } from "lucide-react"; 2 import { MeshGradient1 } from "../effects/MeshGradient.1"; 3 import { TopMenu } from "./TopMenu"; 4 import { Button } from "../ui/Button"; 5 import Image from "next/image" 6 import { FormattedMessage, useIntl } from "react-intl"; 7 import Link from "next/link"; 8 import { DAMUS_APP_STORE_URL, DAMUS_TESTFLIGHT_URL } from "@/lib/constants"; 9 import { motion } from "framer-motion"; 10 import { NostrIcon } from "../icons/NostrIcon"; 11 12 export function Hero() { 13 const intl = useIntl() 14 15 return (<> 16 <div className="bg-black overflow-hidden relative min-h-screen"> 17 <div className="absolute z-10 pointer-events-none"> 18 <MeshGradient1 className="-translate-x-1/3"/> 19 </div> 20 <div className="container mx-auto px-6 pb-32 pt-12"> 21 <TopMenu className="w-full"/> 22 <div className="flex flex-col lg:flex-row items-center justify-center mt-32 lg:mt-16"> 23 <div className="w-full z-20 mb-12"> 24 <Link href="/purple"> 25 <motion.div 26 className="inline-flex items-center text-normal rounded-full bg-gradient-to-r from-damuspink-500/10 to-damuspink-600/10 backdrop-blur-sm shadow-lg shadow-damuspink-500/10 p-2 px-6 text-white border border-damuspink-500/30 active:scale-95 transition cursor-pointer" 27 style={{ opacity: 0 }} 28 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 29 > 30 <NostrIcon className="h-6 mr-2 text-damuspink-600" aria-hidden="true"/> 31 {/* TODO: Add proper internationalized string */} 32 Get more from Damus with Purple 33 <ChevronRight className="ml-2"/> 34 </motion.div> 35 </Link> 36 <motion.h1 37 className="my-6 text-5xl sm:text-5xl md:text-7xl text-transparent bg-clip-text pb-6 font-semibold whitespace-pre-line max-w-2xl" 38 style={{ 39 backgroundImage: "linear-gradient(to right, #ffffff -100%, #ffffff -40%, #2D175B 100%)", 40 opacity: 0 41 }} 42 animate={{ 43 backgroundImage: "linear-gradient(to right, #ffffff 0%, #ffffff 40%, #2D175B 100%)", 44 transition: { duration: 3 }, 45 opacity: 1 46 }} 47 > 48 <FormattedMessage defaultMessage="The social network you control" id="home.hero.headline"/> 49 </motion.h1> 50 <motion.h2 51 className="text-white/80 text-normal md:text-xl whitespace-pre-line" 52 style={{ opacity: 0 }} 53 animate={{ opacity: 1, transition: { delay: 1, duration: 1 } }} 54 > 55 { intl.formatMessage({ id: "home.hero.subheadline", defaultMessage: "Your very own social network for your friends or business.\n Available Now on iOS, iPad and macOS (M1/M2)" }) } 56 </motion.h2> 57 <motion.div 58 className="mt-10 md:mt-6 flex flex-col md:flex-row items-center md:items-center gap-y-4 gap-x-6" 59 style={{ opacity: 0 }} 60 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 61 > 62 <Link href={DAMUS_APP_STORE_URL} target="_blank"> 63 <Button variant="default" className="w-full md:w-auto"> 64 { intl.formatMessage({ id: "home.hero.download_now", defaultMessage: "Download now" }) } 65 <ArrowUpRight className="ml-2" /> 66 </Button> 67 </Link> 68 <Link href={DAMUS_TESTFLIGHT_URL} target="_blank"> 69 <Button variant="link" className="w-full md:w-auto"> 70 { intl.formatMessage({ id: "home.hero.join_testflight", defaultMessage: "Join TestFlight Beta" }) } 71 <ArrowUpRight className="text-damuspink-600 ml-2"/> 72 </Button> 73 </Link> 74 </motion.div> 75 <motion.div 76 className="text-white/80 text-sm flex flex-col md:flex-row justify-center md:justify-start items-center mt-12 md:mt-8 gap-x-2 gap-y-4" 77 style={{ opacity: 0 }} 78 animate={{ opacity: 1, transition: { delay: 2, duration: 1 } }} 79 > 80 <div className="flex items-center flex-wrap"> 81 <Globe2 className="text-green-500 h-4"/> 82 <div>{ intl.formatMessage({ id: "home.hero.available_in", defaultMessage: "Available in" }) }</div> 83 </div> 84 <div className="flex items-center flex-wrap justify-center gap-x-2 gap-y-4"> 85 <div className="text-white">English</div> 86 <div className="text-white">Español</div> 87 <div className="text-white">Italiano</div> 88 <div className="text-white">Português</div> 89 <div className="text-white">Deutsch</div> 90 <div className="text-white">日本語</div> 91 <div className="text-white">中文</div> 92 </div> 93 </motion.div> 94 </div> 95 <motion.div 96 className="relative w-full lg:w-3/4 h-[400px] md:h-[800px]" 97 style={{ opacity: 0 }} 98 animate={{ opacity: 1, transition: { delay: 1, duration: 1 } }} 99 > 100 <Image 101 src="/Hero.webp" 102 className="object-contain" 103 sizes="(max-width: 800px) 100vw, 800px" 104 fill 105 alt={"Damus social network running on an iPhone"} 106 /> 107 <div className="absolute z-0"> 108 {/* Put a big circle with gradient in the very middle of the section */} 109 <div className="hidden lg:block w-[600px] h-[600px] xl:w-[800px] xl:h-[800px] rounded-full bg-black lg:-translate-x-3/4 shadow-[0px_15px_30px_-15px_#5B1442] lg:shadow-[15px_0px_30px_-15px_#5B1442]" /> 110 </div> 111 </motion.div> 112 </div> 113 </div> 114 </div> 115 </>) 116 }