NotedeckWaitlistHero.tsx (4356B)
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 StarField from "@/components/effects/StarField"; 10 import { useScroll, useTransform } from "framer-motion"; 11 import { NOTEDECK_WAITLIST_URL } from "@/lib/constants"; 12 13 export function NotedeckWaitlistHero({ className }: { className?: string }) { 14 const intl = useIntl() 15 const { scrollYProgress } = useScroll() 16 const heroOpacity = useTransform(scrollYProgress, [0.55, 0.8], [1.0, 0.0]); 17 const bgOpacity = useTransform(scrollYProgress, [0.3, 0.55], [1.0, 0.0]); 18 const mobileScreenshotOffsetX = useTransform(scrollYProgress, [0.2, 1], [0, -800]); 19 20 return (<> 21 <motion.div 22 className={`bg-black overflow-hidden relative ${className}`} 23 > 24 <motion.div className="absolute z-0 w-full h-full pointer-events-none" style={{ opacity: bgOpacity }}> 25 <StarField className="z-0 fixed top-0 left-0 object-cover object-center w-full h-full"/> 26 <MeshGradient1 className="-translate-x-1/3" /> 27 </motion.div> 28 <motion.div className="container z-10 mx-auto px-6 pt-6 h-full min-h-screen flex flex-col justify-center" style={{ opacity: heroOpacity }}> 29 <motion.div 30 className="w-full z-10 backdrop-blur-sm bg-black/20 rounded-xl p-4 shadow-xl border border-black/30" 31 style={{ opacity: 0 }} 32 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 33 > 34 <TopMenu 35 className="w-full z-10" 36 customCTA={ 37 <Link href={NOTEDECK_WAITLIST_URL}> 38 <Button variant="accent" className="w-full"> 39 {intl.formatMessage({ id: "notedeck.hero.menu.signup-for-the-waitlist", defaultMessage: "Sign up" })} 40 </Button> 41 </Link> 42 } 43 /> 44 </motion.div> 45 <motion.div 46 className="flex flex-col items-center justify-center h-full grow mt-32 z-10" 47 style={{ opacity: 0 }} 48 animate={{ opacity: 1, transition: { delay: 0.5, duration: 1 } }} 49 > 50 <div className="flex gap-x-4 items-center mb-2 md:mb-2"> 51 <Image 52 src="/notedeck/notedeck-logo.png" 53 alt="notedeck logo" 54 width={500} 55 height={105} 56 /> 57 </div> 58 <div className="text-purple-200/70 text-lg md:text-2xl text-center max-w-2xl mb-8 break-keep"> 59 {intl.formatMessage({ id: "notedeck.hero.description", defaultMessage: "Damus. Everywhere. The fastest native, customizable nostr experience, for all platforms." })} 60 </div> 61 <motion.div 62 className="mt-6 md:mt-4 mb-8 flex flex-col md:flex-row items-center md:items-center gap-y-4 gap-x-6 w-full md:w-auto" 63 style={{ opacity: 0 }} 64 animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }} 65 > 66 <Link href={NOTEDECK_WAITLIST_URL} className="w-full md:w-auto"> 67 <Button variant="default" className="w-full"> 68 {intl.formatMessage({ id: "notedeck.hero.signup-for-the-waitlist", defaultMessage: "Sign up for the waitlist" })} 69 </Button> 70 </Link> 71 </motion.div> 72 <div className="hidden md:flex gap-x-4 items-center mb-12 md:mb-6 z-20 relative"> 73 <Image 74 src="/notedeck/notedeck-hero.png" 75 alt="notedeck screenshot" 76 className="" 77 width={1200} 78 height={105} 79 /> 80 </div> 81 <div className="flex md:hidden mb-12 md:mb-6 z-20 relative overflow-hidden w-screen"> 82 <motion.img 83 src="/notedeck/notedeck-hero.png" 84 alt="notedeck screenshot" 85 className="max-w-fit" 86 style={{ 87 marginLeft: mobileScreenshotOffsetX 88 }} 89 width={1200} 90 height={105} 91 /> 92 </div> 93 </motion.div> 94 </motion.div> 95 </motion.div> 96 </>) 97 }