({
children,
className,
}: {
children: React.ReactNode
className?: string
})
| 3 | import { cn } from "~/utils/css" |
| 4 | |
| 5 | export const LampContainer = ({ |
| 6 | children, |
| 7 | className, |
| 8 | }: { |
| 9 | children: React.ReactNode |
| 10 | className?: string |
| 11 | }) => { |
| 12 | return ( |
| 13 | <div |
| 14 | className={cn( |
| 15 | "relative z-0 flex min-h-screen w-full flex-col items-center justify-center overflow-hidden border-none bg-slate-950 pt-40 lg:min-h-[70vh]", |
| 16 | className |
| 17 | )} |
| 18 | > |
| 19 | <div className="relative isolate z-0 flex w-full flex-1 scale-y-125 items-center justify-center "> |
| 20 | <motion.div |
| 21 | initial={{ opacity: 0.5, width: "15rem" }} |
| 22 | whileInView={{ opacity: 1, width: "30rem" }} |
| 23 | transition={{ |
| 24 | delay: 0.3, |
| 25 | duration: 0.8, |
| 26 | ease: "easeInOut", |
| 27 | }} |
| 28 | style={{ |
| 29 | backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`, |
| 30 | }} |
| 31 | className="bg-gradient-conic absolute inset-auto right-1/2 h-56 w-[30rem] overflow-visible from-green-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]" |
| 32 | > |
| 33 | <div className="absolute bottom-0 left-0 z-20 h-40 w-[100%] bg-slate-950 [mask-image:linear-gradient(to_top,white,transparent)]" /> |
| 34 | <div className="absolute bottom-0 left-0 z-20 h-[100%] w-40 bg-slate-950 [mask-image:linear-gradient(to_right,white,transparent)]" /> |
| 35 | </motion.div> |
| 36 | <motion.div |
| 37 | initial={{ opacity: 0.5, width: "15rem" }} |
| 38 | whileInView={{ opacity: 1, width: "30rem" }} |
| 39 | transition={{ |
| 40 | delay: 0.3, |
| 41 | duration: 0.8, |
| 42 | ease: "easeInOut", |
| 43 | }} |
| 44 | style={{ |
| 45 | backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`, |
| 46 | }} |
| 47 | className="bg-gradient-conic absolute inset-auto left-1/2 h-56 w-[30rem] from-transparent via-transparent to-green-500 text-white [--conic-position:from_290deg_at_center_top]" |
| 48 | > |
| 49 | <div className="absolute bottom-0 right-0 z-20 h-[100%] w-40 bg-slate-950 [mask-image:linear-gradient(to_left,white,transparent)]" /> |
| 50 | <div className="absolute bottom-0 right-0 z-20 h-40 w-[100%] bg-slate-950 [mask-image:linear-gradient(to_top,white,transparent)]" /> |
| 51 | </motion.div> |
| 52 | <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl" /> |
| 53 | <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md" /> |
| 54 | <div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-green-500 opacity-50 blur-3xl"></div> |
| 55 | <motion.div |
| 56 | initial={{ width: "8rem" }} |
| 57 | whileInView={{ width: "16rem" }} |
| 58 | transition={{ |
| 59 | delay: 0.3, |
| 60 | duration: 0.8, |
| 61 | ease: "easeInOut", |
| 62 | }} |
nothing calls this directly
no test coverage detected
searching dependent graphs…