'use client' import React, { useState, useEffect } from 'react'; import Link from 'next/link'; import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion'; import { Mail, Lock,Eye,EyeClosed, ArrowRight } from 'lucide-react'; import { cn } from "@/lib/utils" function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( ) } export function SignIn() { const [showPassword, setShowPassword] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [isLoading, setIsLoading] = useState(false); const [focusedInput, setFocusedInput] = useState(null); const [rememberMe, setRememberMe] = useState(false); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); // For 3D card effect - increased rotation range for more pronounced 3D effect const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const rotateX = useTransform(mouseY, [-300, 300], [10, -10]); // Increased from 5/-5 to 10/-10 const rotateY = useTransform(mouseX, [-300, 300], [-10, 10]); // Increased from -5/5 to -10/10 const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); mouseX.set(e.clientX - rect.left - rect.width / 2); mouseY.set(e.clientY - rect.top - rect.height / 2); setMousePosition({ x: e.clientX, y: e.clientY }); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; const handleSubmit = (event: React.MouseEvent) => { event.preventDefault(); setIsLoading(true); setTimeout(() => setIsLoading(false), 2000); }; return (

{/* Background gradient effect - matches the purple OnlyPipe style */}

{/* Subtle noise texture overlay */}

{/* Top radial glow */}

{/* Animated glow spots */}

{/* Card glow effect - reduced intensity */} {/* Traveling light beam effect - reduced opacity */}

{/* Top light beam - enhanced glow */} {/* Right light beam - enhanced glow */} {/* Bottom light beam - enhanced glow */} {/* Left light beam - enhanced glow */} {/* Subtle corner glow spots - reduced opacity */}

{/* Card border glow - reduced opacity */}

{/* Glass card background */}

{/* Subtle card inner patterns */}

{/* Logo and header */}

{/* Logo placeholder - would be an SVG in practice */} {/* */} S {/* Inner lighting effect */}

Welcome Back Sign in to continue to StyleMe

{/* Login form */}

{ e.preventDefault(); setIsLoading(true); setTimeout(() => setIsLoading(false), 2000); }} className="space-y-4"> {/* Email input */}

setEmail(e.target.value)} onFocus={() => setFocusedInput("email" as any)} onBlur={() => setFocusedInput(null)} className="w-full bg-white/5 border-transparent focus:border-white/20 text-white placeholder:text-white/30 h-10 transition-all duration-300 pl-10 pr-3 focus:bg-white/10" /> {/* Input highlight effect */} {focusedInput === "email" && ( )}

{/* Password input */}

setPassword(e.target.value)} onFocus={() => setFocusedInput("password" as any)} onBlur={() => setFocusedInput(null)} className="w-full bg-white/5 border-transparent focus:border-white/20 text-white placeholder:text-white/30 h-10 transition-all duration-300 pl-10 pr-10 focus:bg-white/10" /> {/* Toggle password visibility */}

setShowPassword(!showPassword)} className="absolute right-3 cursor-pointer" > {showPassword ? ( ) : ( )}

{/* Input highlight effect */} {focusedInput === "password" && ( )}

{/* Remember me & Forgot password */}

setRememberMe(!rememberMe)} className="appearance-none h-4 w-4 rounded border border-white/20 bg-white/5 checked:bg-white checked:border-white focus:outline-none focus:ring-1 focus:ring-white/30 transition-all duration-200" /> {rememberMe && ( {/* */} )}