NotedeckInstallLayout.tsx (1738B)
1 import { motion, useScroll, useTransform } from "framer-motion"; 2 import { RoundedContainerWithGradientBorder } from "./ui/RoundedContainerWithGradientBorder"; 3 import { PurpleIcon } from "./icons/PurpleIcon"; 4 import { MeshGradient5 } from "./effects/MeshGradient.5"; 5 import Image from "next/image"; 6 import Link from "next/link"; 7 import { Button } from "./ui/Button"; 8 import { ArrowLeft, LifeBuoy } from "lucide-react"; 9 import { useIntl } from "react-intl"; 10 import { cn } from "@/lib/utils"; 11 import { Onest } from "next/font/google"; 12 import StarField from "./effects/StarField"; 13 import { MeshGradient1 } from "@/components/effects/MeshGradient.1"; 14 import { useRef } from "react"; 15 import { TopMenu } from "./sections/TopMenu"; 16 import { MeshGradient2 } from "./effects/MeshGradient.2"; 17 import { MeshGradient3 } from "./effects/MeshGradient.3"; 18 19 const onest = Onest({ subsets: ['latin'] }) 20 21 22 export function NotedeckInstallLayout({ children }: { children: React.ReactNode }) { 23 const intl = useIntl() 24 const ref = useRef(null) 25 const { scrollYProgress } = useScroll({ 26 target: ref, 27 offset: ["start start", "end start"] 28 }) 29 const mobileScreenshotOffsetX = useTransform(scrollYProgress, [0, 1], [0, -1200]); 30 const bgOpacity = useTransform(scrollYProgress, [0.3, 1], [1.0, 0.0]); 31 32 return ( 33 <div 34 className="bg-black overflow-hidden relative min-h-screen" 35 > 36 <TopMenu/> 37 <motion.div className="absolute z-0 w-full h-full pointer-events-none" style={{ opacity: bgOpacity }}> 38 <MeshGradient3 className="-translate-x-1/3" /> 39 </motion.div> 40 41 <div className="container z-10 mx-auto max-w-2xl px-6 pt-6 h-full flex flex-col justify-start mt-36"> 42 {children} 43 </div> 44 </div> 45 ) 46 }