[V0_FILE]typescriptreact:file="components/cookie-consent.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, Cookie } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { usePathname } from "next/navigation" import Link from "next/link" export default function CookieConsent() { const [isVisible, setIsVisible] = useState(false) const pathname = usePathname() // Only show on login and register pages const shouldShowOnPath = pathname === "/auth/login" || pathname === "/auth/register" || pathname === "/auth/forgot-password" useEffect(() => { // Check if user has already consented const hasConsented = localStorage.getItem("cookieConsent") // Only show if on auth pages and hasn't consented yet if (!hasConsented && shouldShowOnPath) { // Show after a short delay for better UX const timer = setTimeout(() => { setIsVisible(true) }, 1000) return () => clearTimeout(timer) } }, [shouldShowOnPath]) const handleAccept = () => { localStorage.setItem("cookieConsent", "true") setIsVisible(false) } const handleDecline = () => { localStorage.setItem("cookieConsent", "false") setIsVisible(false) } const handleClose = () => { setIsVisible(false) } if (!isVisible) return null return (

Cookie Consent

This website uses cookies, including third-party cookies, to enhance your browsing experience

We use cookies to ensure you get the best experience on our website. This includes:

Essential cookies for site functionality such as remembering your login status
Third-party cookies that allow us to authenticate you with our backend services hosted on different domains
Analytics cookies to understand how you use our site and improve your experience

Important Note About Third-Party Cookies

Our authentication system requires third-party cookies to function properly. Without these cookies enabled, you may experience issues logging in or staying logged in.

) } [V0_FILE]typescriptreact:file="components/error-toast.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" interface ErrorToastProps { message: string title?: string duration?: number onClose?: () => void } export default function ErrorToast({ message, title = "Error", duration = 5000, onClose }: ErrorToastProps) { const [isVisible, setIsVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { handleClose() }, duration) return () => clearTimeout(timer) }, [duration]) const handleClose = () => { setIsVisible(false) if (onClose) onClose() } if (!isVisible) return null return (

{title} {message}

) } [V0_FILE]typescriptreact:file="components/success-toast.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, CheckCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" interface SuccessToastProps { message: string title?: string duration?: number onClose?: () => void } export default function SuccessToast({ message, title = "Success", duration = 5000, onClose }: SuccessToastProps) { const [isVisible, setIsVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { handleClose() }, duration) return () => clearTimeout(timer) }, [duration]) const handleClose = () => { setIsVisible(false) if (onClose) onClose() } if (!isVisible) return null return (

{title} {message}

) } [V0_FILE]typescriptreact:file="components/password-strength.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" interface PasswordStrengthProps { password: string } export default function PasswordStrength({ password }: PasswordStrengthProps) { const [strength, setStrength] = useState(0) const [message, setMessage] = useState("") useEffect(() => { calculateStrength(password) }, [password]) const calculateStrength = (password: string) => { if (!password) { setStrength(0) setMessage("") return } let score = 0 // Length check if (password.length >= 8) score += 1 if (password.length >= 12) score += 1 // Character variety checks if (/[A-Z]/.test(password)) score += 1 if (/[a-z]/.test(password)) score += 1 if (/[0-9]/.test(password)) score += 1 if (/[^A-Za-z0-9]/.test(password)) score += 1 // Normalize to 0-4 scale const normalizedScore = Math.min(4, Math.floor(score / 1.5)) setStrength(normalizedScore) // Set message based on score const messages = ["Very weak", "Weak", "Fair", "Good", "Strong"] setMessage(messages[normalizedScore]) } const getColor = () => { const colors = ["bg-red-500", "bg-orange-500", "bg-yellow-500", "bg-green-400", "bg-green-600"] return colors[strength] } return (

{message} {strength * 25}%

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMoved="true" isMovedFrom="layout.tsx" isMerged="true" import CookieConsent from "@/components/cookie-consent" import ServerStartupModal from "@/components/server-startup-modal" import type { ReactNode } from "react" export default function AuthLayout({ children }: { children: ReactNode }) { return ( <>

{children}

) } [V0_FILE]typescriptreact:file="components/server-startup-modal.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" export default function ServerStartupModal() { const [isVisible, setIsVisible] = useState(false) useEffect(() => { // Simulate checking for server startup status const timer = setTimeout(() => { setIsVisible(false) }, 3000) // For demonstration purposes, we'll just hide the modal after 3 seconds. // In a real application, you would check the server status. return () => clearTimeout(timer) }, []) if (!isVisible) return null return (

Server Starting...

Please wait while the server is starting up. This may take a few moments.

) } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" isLocked="true" "use client" import { useState, useEffect } from "react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Alert, AlertDescription } from "@/components/ui/alert" import { handleLogin } from "@/api" import ErrorToast from "@/components/error-toast" import { Eye, EyeOff, Mail, Lock, AlertTriangle, ArrowRight } from "lucide-react" const formSchema = z.object({ email: z.string().min(1, { message: "Email is required" }).email({ message: "Invalid email address" }), password: z .string() .min(1, { message: "Password is required" }) .min(8, { message: "Password must be at least 8 characters" }), }) export default function LoginPage() { const [error, setError] = useState(null) const [showPassword, setShowPassword] = useState(false) const [showToast, setShowToast] = useState(false) const [cookieWarning, setCookieWarning] = useState(false) const router = useRouter() const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { email: "", password: "", }, }) // Check if cookies are enabled in the browser useEffect(() => { const checkCookiesEnabled = () => { try { // Try to set a test cookie document.cookie = "testcookie=1; SameSite=None; Secure" const cookieEnabled = document.cookie.indexOf("testcookie") !== -1 // If cookies are disabled, show warning setCookieWarning(!cookieEnabled) } catch (e) { // If there's an error, assume cookies might be disabled setCookieWarning(true) } } checkCookiesEnabled() }, []) async function onSubmit(values: z.infer) { setError(null) setShowToast(false) try { const response = await handleLogin(values) if (response?.message) { router.push("/dashboard") // Redirect to dashboard } } catch (error: any) { if (error.response?.status === 401) { setError(error.response.data.message || "Invalid email or password") } else if (error.response?.status === 500) { setError("Server error. Please try again later.") } else { setError("Login failed. Please check your credentials and try again.") } setShowToast(true) } } return ( <> {showToast && error && setShowToast(false)} />}

{/* Left side - Decorative */}

{/* Decorative circles */}

Welcome Back

Secure Access

Your data is protected with industry-standard encryption

Easy Management

Manage your tasks and projects with our intuitive interface

{/* Right side - Form */}

Sign in

Enter your credentials to access your account

{cookieWarning && ( Cookies appear to be disabled. You may experience issues logging in. Please enable cookies in your browser settings. )}

( Email

)} /> (

Password Forgot password?

)} /> {error && !showToast && ( {error} )}

Don't have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/auth/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" isLocked="true" import CookieConsent from "@/components/cookie-consent" import ThirdPartyCookieChecker from "@/components/third-party-cookie-checker" import ServerStartupModal from "@/components/server-startup-modal" import type { ReactNode } from "react" export default function AuthLayout({ children }: { children: ReactNode }) { return ( <>

{children}

) } [V0_FILE]typescriptreact:file="api.tsx" isQuickEdit="true" isMerged="true" export const handleLogin = async (credentials: any) => { // Simulate an API call await new Promise((resolve) => setTimeout(resolve, 1000)) if (credentials.email === "test@example.com" && credentials.password === "password123") { return { message: "Login successful" } } else { throw { response: { status: 401, data: { message: "Invalid credentials" } } } } } export const handleSignup = async (userData: any) => { // Simulate an API call await new Promise((resolve) => setTimeout(resolve, 1000)) if (userData.email === "existing@example.com") { throw { response: { status: 400, data: { message: "Email already exists" } } } } else { return { user: { id: "123", name: userData.name, email: userData.email } } } } [V0_FILE]typescriptreact:file="app/auth/forgot-password/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" isLocked="true" "use client" import { useState, useEffect } from "react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Alert, AlertDescription } from "@/components/ui/alert" import SuccessToast from "@/components/success-toast" import ErrorToast from "@/components/error-toast" import { Mail, KeyRound, AlertTriangle, ArrowRight } from "lucide-react" const formSchema = z.object({ email: z.string().min(1, { message: "Email is required" }).email({ message: "Invalid email address" }), }) export default function ForgotPasswordPage() { const [message, setMessage] = useState(null) const [showSuccessToast, setShowSuccessToast] = useState(false) const [showErrorToast, setShowErrorToast] = useState(false) const [cookieWarning, setCookieWarning] = useState(false) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { email: "", }, }) // Check if cookies are enabled in the browser useEffect(() => { const checkCookiesEnabled = () => { try { // Try to set a test cookie document.cookie = "testcookie=1; SameSite=None; Secure" const cookieEnabled = document.cookie.indexOf("testcookie") !== -1 // If cookies are disabled, show warning setCookieWarning(!cookieEnabled) } catch (e) { // If there's an error, assume cookies might be disabled setCookieWarning(true) } } checkCookiesEnabled() }, []) async function onSubmit(values: z.infer) { setMessage(null) setShowSuccessToast(false) setShowErrorToast(false) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) console.log(values) const successMessage = "If an account exists for this email, you will receive password reset instructions." setMessage(successMessage) setShowSuccessToast(true) } catch (_err) { // ESLint will ignore unused variable (err) const errorMessage = "An error occurred. Please try again." setMessage(errorMessage) setShowErrorToast(true) } } return ( <> {showSuccessToast && message && setShowSuccessToast(false)} />} {showErrorToast && message && message.includes("error") && ( setShowErrorToast(false)} /> )}

{/* Left side - Decorative */}

{/* Decorative circles */}

Password Recovery

Don't worry, it happens to the best of us. Enter your email address and we'll send you instructions to reset your password.

Secure Reset Process

We'll send you a secure link that expires after use

Quick Recovery

Get back to your account in minutes with our streamlined process

{/* Right side - Form */}

Reset Password

Enter your email to receive reset instructions

{cookieWarning && ( Cookies appear to be disabled. You may experience issues with password reset. Please enable cookies in your browser settings. )}

( Email

)} /> {message && !showSuccessToast && !showErrorToast && ( {message} )}

Remember your password?{" "} Back to login

) } [V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "auth-improvements", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.3.2", "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.48.2", "zod": "^3.22.4" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/success-popup.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { CheckCircle2, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { motion, AnimatePresence } from "framer-motion" interface SuccessPopupProps { title: string message: string buttonText?: string onClose: () => void isOpen: boolean } export default function SuccessPopup({ title, message, buttonText = "Continue", onClose, isOpen }: SuccessPopupProps) { // Close on escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape" && isOpen) { onClose() } } window.addEventListener("keydown", handleEscape) return () => window.removeEventListener("keydown", handleEscape) }, [isOpen, onClose]) return ( {isOpen && ( <>

{title}

{message}

)} ) } [V0_FILE]typescriptreact:file="components/third-party-cookie-checker.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, AlertTriangle, ExternalLink, Cookie } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export default function ThirdPartyCookieChecker() { const [cookiesDisabled, setCookiesDisabled] = useState(null) const [isVisible, setIsVisible] = useState(false) useEffect(() => { checkThirdPartyCookies() }, []) const checkThirdPartyCookies = async () => { try { // Create an iframe to a different domain to test 3rd party cookies const testDomain = "https://third-party-cookies-test.vercel.app" // First try to set a test cookie const iframe = document.createElement("iframe") iframe.style.display = "none" iframe.src = `${testDomain}/set-cookie-test` document.body.appendChild(iframe) // Wait for iframe to load await new Promise((resolve) => { iframe.onload = resolve // Fallback if onload doesn't fire setTimeout(resolve, 2000) }) // Now check if the cookie was set const checkIframe = document.createElement("iframe") checkIframe.style.display = "none" checkIframe.src = `${testDomain}/check-cookie` document.body.appendChild(checkIframe) // Wait for the check iframe to load await new Promise((resolve) => { checkIframe.onload = resolve setTimeout(resolve, 2000) }) // For demo purposes, we'll simulate the check // In a real implementation, the iframe would communicate the result via postMessage // Simulate a check - randomly determine if cookies are disabled for demo // In production, replace this with actual cookie check logic const areCookiesDisabled = Math.random() > 0.5 setCookiesDisabled(areCookiesDisabled) setIsVisible(areCookiesDisabled) // Clean up document.body.removeChild(iframe) document.body.removeChild(checkIframe) } catch (error) { console.error("Error checking third-party cookies:", error) // If there's an error, assume cookies might be disabled setCookiesDisabled(true) setIsVisible(true) } } const handleClose = () => { setIsVisible(false) // Store in localStorage that the user has seen this message localStorage.setItem("cookieWarningDismissed", "true") } if (!isVisible) return null return (

Third-Party Cookies Required

Our application requires third-party cookies to function properly as our backend is hosted on a different domain.

It appears that third-party cookies are currently disabled in your browser. Without these cookies, you won't be able to:

Stay logged in between sessions
Access secure areas of the application
Maintain your preferences and settings

Enable in Chrome

Click the three dots in the top-right corner
Select "Settings"
Scroll down and click on "Privacy and security"
Click on "Cookies and other site data"
Select "Allow all cookies" or disable "Block third-party cookies"

Enable in Firefox

Click the menu button (three lines) in the top-right
Select "Settings"
Select "Privacy & Security" from the left sidebar
Under "Enhanced Tracking Protection", select "Standard" or "Custom"
If "Custom", make sure "Cookies" is not set to "All third-party cookies"

Enable in Safari

Click "Safari" in the menu bar
Select "Preferences"
Go to the "Privacy" tab
Uncheck "Prevent cross-site tracking"
Ensure "Block all cookies" is not selected

Enable in Edge

Click the three dots in the top-right corner
Select "Settings"
Click on "Cookies and site permissions"
Click on "Manage and delete cookies and site data"
Turn off "Block third-party cookies"

Learn more about cookies

) } [V0_FILE]typescriptreact:file="app/auth/register/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" isLocked="true" "use client" import { useState, useEffect } from "react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import { useRouter } from "next/navigation" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Alert, AlertDescription } from "@/components/ui/alert" import { handleSignup } from "@/api" import ErrorToast from "@/components/error-toast" import SuccessPopup from "@/components/success-popup" import { Eye, EyeOff, Mail, Lock, User, Check, X, AlertTriangle, ArrowRight, CheckCircle2, Sparkles, Shield, } from "lucide-react" import PasswordStrength from "@/components/password-strength" const formSchema = z .object({ name: z.string().min(1, { message: "Name is required" }).min(2, { message: "Name must be at least 2 characters" }), email: z.string().min(1, { message: "Email is required" }).email({ message: "Invalid email address" }), password: z .string() .min(1, { message: "Password is required" }) .min(8, { message: "Password must be at least 8 characters" }) .regex(/[A-Z]/, { message: "Password must contain at least one uppercase letter" }) .regex(/[a-z]/, { message: "Password must contain at least one lowercase letter" }) .regex(/[0-9]/, { message: "Password must contain at least one number" }), confirmPassword: z.string().min(1, { message: "Please confirm your password" }), termsAccepted: z.boolean().refine((val) => val === true, { message: "You must accept the terms and conditions", }), }) .refine((data) => data.password === data.confirmPassword, { message: "Passwords don't match", path: ["confirmPassword"], }) export default function RegisterPage() { const [error, setError] = useState(null) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [showToast, setShowToast] = useState(false) const [cookieWarning, setCookieWarning] = useState(false) const [showSuccessPopup, setShowSuccessPopup] = useState(false) const router = useRouter() const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", email: "", password: "", confirmPassword: "", termsAccepted: false, }, mode: "onChange", }) // Check if cookies are enabled in the browser useEffect(() => { const checkCookiesEnabled = () => { try { // Try to set a test cookie document.cookie = "testcookie=1; SameSite=None; Secure" const cookieEnabled = document.cookie.indexOf("testcookie") !== -1 // If cookies are disabled, show warning setCookieWarning(!cookieEnabled) } catch (e) { // If there's an error, assume cookies might be disabled setCookieWarning(true) } } checkCookiesEnabled() }, []) const watchPassword = form.watch("password") const hasUppercase = /[A-Z]/.test(watchPassword) const hasLowercase = /[a-z]/.test(watchPassword) const hasNumber = /[0-9]/.test(watchPassword) const hasMinLength = watchPassword.length >= 8 const passwordHasContent = watchPassword.length > 0 async function onSubmitSignup(values: z.infer) { setError(null) setShowToast(false) try { const response = await handleSignup(values) if (response?.user) { // Show success popup instead of redirecting immediately setShowSuccessPopup(true) } } catch (error: any) { console.error("Signup error:", error) if (error?.response?.status === 400) { setError(error?.response.data.message || "Email already in use") } else if (error?.response?.status === 500) { setError("Server error. Please try again later.") } else { setError("Signup failed. Please try again.") } setShowToast(true) } } const handleSuccessClose = () => { setShowSuccessPopup(false) // Redirect to dashboard after closing the success popup router.push("/dashboard") } return ( <> {showToast && error && setShowToast(false)} />}

{/* Left side - Decorative */}

{/* Decorative elements */}

Welcome to Our Platform

Join thousands of users who have already discovered the power of our platform. Create your account today and unlock a world of possibilities.

{passwordHasContent && (

Quick Setup

Create your account in less than 2 minutes and start exploring right away. Our streamlined process gets you up and running in no time.

)} {passwordHasContent && !(

Strong Password

Your security is our priority. A strong password helps protect your account from unauthorized access.

)}

Secure & Reliable

Your data is protected with enterprise-grade security. We use the latest encryption technologies to keep your information safe.

Everything You Need

Personalized dashboard

Customize your experience to suit your needs

Advanced analytics

Gain insights with comprehensive reporting tools

24/7 dedicated support

Our team is always ready to help you succeed

Secure data encryption

Enterprise-grade security for your peace of mind

{/* Right side - Form */}

Create Account

Already have an account?{" "} Sign in

{cookieWarning && ( Cookies appear to be disabled. You may experience issues creating an account. Please enable cookies in your browser settings. )}

( Full Name

)} /> ( Email

)} /> ( Password

{passwordHasContent && (

{hasMinLength ? ( ) : ( )} 8+ characters

{hasUppercase ? ( ) : ( )} Uppercase letter

{hasLowercase ? ( ) : ( )} Lowercase letter

{hasNumber ? ( ) : ( )} Number

)} )} /> {passwordHasContent && ( ( Confirm Password

)} /> )} (

I agree to the{" "} Terms of Service {" "} and{" "} Privacy Policy

)} /> {error && !showToast && ( {error} )}

By signing up, you acknowledge that you have read and understood our{" "} Privacy Policy {" "} and agree to our{" "} Terms of Service .

) } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import Link from "next/link" import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowRight, Lock, Mail, User, Shield, Sparkles, Star, Zap, Layers, Fingerprint, RefreshCw, Menu, X, ArrowUpRight, Check, } from "lucide-react" export default function HomePage() { const [activeTab, setActiveTab] = useState("login") const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [currentSection, setCurrentSection] = useState("hero") const heroRef = useRef(null) const featuresRef = useRef(null) const previewRef = useRef(null) const securityRef = useRef(null) const { scrollYProgress } = useScroll() const opacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]) const scale = useTransform(scrollYProgress, [0, 0.2], [1, 0.95]) const [typingEmail, setTypingEmail] = useState("") const [typingPassword, setTypingPassword] = useState("") const [isTypingEmail, setIsTypingEmail] = useState(false) const [isTypingPassword, setIsTypingPassword] = useState(false) useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY + 100 const sections = [ { id: "hero", ref: heroRef }, { id: "features", ref: featuresRef }, { id: "preview", ref: previewRef }, { id: "security", ref: securityRef }, ] for (const section of sections) { if (section.ref.current) { const element = section.ref.current if (element.offsetTop <= scrollPosition && element.offsetTop + element.offsetHeight > scrollPosition) { setCurrentSection(section.id) break } } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) useEffect(() => { if (activeTab === "login") { // Start typing email animation when login tab is active setTypingEmail("") setTypingPassword("") setIsTypingEmail(true) setIsTypingPassword(false) } }, [activeTab]) useEffect(() => { if (isTypingEmail) { const email = "user@example.com" if (typingEmail.length < email.length) { const timeout = setTimeout(() => { setTypingEmail(email.substring(0, typingEmail.length + 1)) }, 100) return () => clearTimeout(timeout) } else { setIsTypingEmail(false) setIsTypingPassword(true) } } }, [isTypingEmail, typingEmail]) useEffect(() => { if (isTypingPassword) { const password = "••••••••" if (typingPassword.length < password.length) { const timeout = setTimeout(() => { setTypingPassword(password.substring(0, typingPassword.length + 1)) }, 150) return () => clearTimeout(timeout) } else { setIsTypingPassword(false) // After 3 seconds, restart the animation const timeout = setTimeout(() => { setTypingEmail("") setTypingPassword("") setIsTypingEmail(true) }, 3000) return () => clearTimeout(timeout) } } }, [isTypingPassword, typingPassword]) return (

{/* Navbar */}

AuthSystem

{/* Mobile menu */} {mobileMenuOpen && (

)}

{/* Hero Section */}

{/* Gradient background */}

{/* Grid pattern */}

{/* Animated gradient circles */}

Modern Authentication System

Secure Your
Digital Identity

A sleek, responsive, and user-friendly authentication system with powerful features for your modern web applications.

{[...Array(4)].map((_, i) => (

{i === 3 ? "+" : ""}

))}

{[...Array(5)].map((_, i) => ( ))}

Trusted by 1000+ developers

{/* Decorative elements */}

{/* Main card */}

AuthSystem

Sign In

Welcome back! Please enter your credentials

user@example.com

••••••••

New user? Create account

Secure connection

End-to-end encrypted

{/* Scroll indicator */} Scroll to explore

{/* Features Section */}

{/* Gradient background */}

{/* Grid pattern */}

{/* Animated gradient circles */}

Powerful Features

Everything You Need

Our authentication system comes with all the features you need to build secure and user-friendly applications

{/* Main feature cards - redesigned with better contrast and visual appeal */}

{[ { icon: , title: "Secure Authentication", description: "Industry-standard security with email and password authentication, plus optional two-factor authentication.", link: "/auth/login", color: "from-purple-600 to-indigo-600", hoverColor: "from-purple-500 to-indigo-500", }, { icon: , title: "Modern Registration", description: "Streamlined signup process with real-time password strength validation and intuitive user interface.", link: "/auth/register", color: "from-blue-600 to-cyan-600", hoverColor: "from-blue-500 to-cyan-500", }, { icon: , title: "Password Recovery", description: "Simple and secure password reset flow that helps users regain access to their accounts quickly.", link: "/auth/forgot-password", color: "from-cyan-600 to-teal-600", hoverColor: "from-cyan-500 to-teal-500", }, ].map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

Explore

))}

{/* Secondary features grid - redesigned with better visual hierarchy */}

Additional Capabilities

Our authentication system is packed with features that make it stand out from the competition

{[ { icon: , title: "Responsive Design", description: "Works perfectly on all devices and screen sizes", color: "purple", bgColor: "bg-purple-500/20", borderColor: "border-purple-500/30", }, { icon: , title: "Fast Performance", description: "Optimized for speed and smooth user experience", color: "blue", bgColor: "bg-blue-500/20", borderColor: "border-blue-500/30", }, { icon: , title: "Advanced Security", description: "Built with security best practices from the ground up", color: "cyan", bgColor: "bg-cyan-500/20", borderColor: "border-cyan-500/30", }, { icon: , title: "Modern UI", description: "Beautiful, intuitive interface with smooth animations", color: "pink", bgColor: "bg-pink-500/20", borderColor: "border-pink-500/30", }, ].map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* Preview Section */}

{/* Gradient background */}

{/* Grid pattern */}

Live Preview

See It In Action

Explore our beautifully designed authentication pages and see how they work

Login Page

Our login page features a clean design with email and password fields, remember me option, and forgot password link.

{feature}

Sign In

{typingEmail} {isTypingEmail && ( )}

Password

{typingPassword} {isTypingPassword && ( )}

Remember me

Forgot password?

Registration Page

Our registration page includes name, email, and password fields with real-time password strength validation.

{feature}

Create Account

Full Name

John Doe

john@example.com

Password

••••••••

Forgot Password Page

Our password recovery page allows users to reset their password through a simple email-based process.

{feature}

Reset Password

Enter your email address and we'll send you instructions to reset your password.

user@example.com

Back to login

{/* Security Section */}

{/* Gradient background */}

{/* Grid pattern */}

Security First

Built With Security in Mind

Our authentication system is built with security as the top priority. We implement industry best practices to keep your data safe.

{feature}

Security Features

Our authentication system includes these key security features to protect your users and data:

{[ "Password Encryption", "Secure Sessions", "HTTPS Enforcement", "Brute Force Protection", "XSS Prevention", "CSRF Protection", "Input Validation", "Security Headers", ].map((feature, index) => (

{feature}

))}

Advanced Authentication Options

Support for multi-factor authentication and social logins

{/* CTA Section */}

{/* Animated gradient circles */} {/* Grid pattern */}

Ready to Get Started?

Experience our modern authentication system today. Create an account or sign in to explore all features.

{/* Footer - Redesigned */}

) }

Welcome Back

Secure Access

Easy Management

Sign in

Password Recovery

Secure Reset Process

Quick Recovery

Reset Password

Welcome to Our Platform

Quick Setup

Strong Password

Secure & Reliable

Everything You Need

Create Account

Secure Your Digital Identity

Sign In

Everything You Need

{feature.title}

Additional Capabilities

{feature.title}

See It In Action

Login Page

Sign In

Registration Page

Create Account

Forgot Password Page

Reset Password

Built With Security in Mind

Security Features

Advanced Authentication Options

Ready to Get Started?

Secure Your
Digital Identity

About

Tags

Share

About

Tags

Share

More from 0xyashanand

More Templates Like This

About

Tags

Share

About

Tags

Share

More from 0xyashanand

More Templates Like This