"use client"; import Image from "next/image"; import Link from "next/link"; import { useRef } from "react"; import { motion, useInView, useReducedMotion, useScroll, useTransform } from "motion/react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import { authSignInCopy, authVisualCopy } from "../auth-data"; import { SectionShell, ContentRail } from "@/components/layout-contract"; const spring = { type: "spring" as const, duration: 0.3, bounce: 0 }; export function AuthSplitVisualSection() { const reduceMotion = useReducedMotion(); const ref = useRef(null); const inView = useInView(ref, motionViewport); const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"], }); const imageY = useTransform(scrollYProgress, [0, 1], reduceMotion ? [0, 0] : [10, -10]); const itemVariants = reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 8 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring }, }; return ( Soft beams preview for registry blocks

{authVisualCopy.eyebrow}

{authVisualCopy.title}

{authVisualCopy.description}

{authSignInCopy.title}

{authSignInCopy.description}

Email Password {authSignInCopy.switchPrompt}{" "} {authSignInCopy.switchAction} ); }