80 lines
3.6 KiB
TypeScript
80 lines
3.6 KiB
TypeScript
"use client"
|
||
import { useEffect, useState } from "react"
|
||
import { useHistory } from "react-router-dom"
|
||
import manImage from "../assets/man.svg" // Reverted to original import
|
||
|
||
export default function Welcome() {
|
||
const history = useHistory()
|
||
const [animationPhase, setAnimationPhase] = useState(0)
|
||
|
||
useEffect(() => {
|
||
const timer1 = setTimeout(() => setAnimationPhase(1), 500)
|
||
const timer2 = setTimeout(() => setAnimationPhase(2), 1500)
|
||
const timer3 = setTimeout(() => setAnimationPhase(3), 2500)
|
||
// const timer4 = setTimeout(() => history.push("/login"), 4000) // Uncomment if you want auto-redirect
|
||
|
||
return () => {
|
||
clearTimeout(timer1)
|
||
clearTimeout(timer2)
|
||
clearTimeout(timer3)
|
||
// clearTimeout(timer4)
|
||
}
|
||
}, [history])
|
||
|
||
return (
|
||
<div className="min-h-screen relative overflow-hidden">
|
||
<img
|
||
className="h-[30rem] lg:h-[50rem] w-auto z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-15"
|
||
src={manImage || "/placeholder.svg"} // Reverted to original img tag and src
|
||
alt="Man illustration"
|
||
/>
|
||
{/* Uncomment and update path for emblemImage if needed */}
|
||
{/* <img
|
||
className="h-[30rem] lg:h-[0rem] w-auto z-50 absolute right-0 bottom-0 transform opacity-10"
|
||
src={emblemImage || "/placeholder.svg"} // Reverted to original img tag and src
|
||
alt="Emblem"
|
||
/> */}
|
||
<div className="absolute inset-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C]">
|
||
{/* Floating particles */}
|
||
<div className="absolute inset-0">
|
||
<div className="absolute top-20 left-10 w-32 h-32 bg-white/5 rounded-full animate-pulse blur-xl"></div>
|
||
<div className="absolute bottom-32 right-16 w-24 h-24 bg-white/10 rounded-full animate-bounce blur-lg"></div>
|
||
<div className="absolute top-1/2 left-1/4 w-16 h-16 bg-white/5 rounded-full animate-ping blur-md"></div>
|
||
<div className="absolute top-1/3 right-1/3 w-20 h-20 bg-white/5 rounded-full animate-pulse blur-lg"></div>
|
||
</div>
|
||
{/* Main Content */}
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<div className="text-center z-10 px-8">
|
||
{/* App Name */}
|
||
<div
|
||
className={`transition-all duration-1000 delay-300 ${
|
||
animationPhase >= 1 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
||
}`}
|
||
>
|
||
<h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">Реабилитация</h1>
|
||
<p className="text-white/90 text-xl font-medium tracking-wide">Восстановление через движение</p>
|
||
</div>
|
||
{/* Loading indicator */}
|
||
<div
|
||
className={`mt-16 transition-all duration-500 delay-700 ${
|
||
animationPhase >= 1 ? "opacity-100" : "opacity-0"
|
||
}`}
|
||
>
|
||
<div className="w-64 h-3 bg-white/10 rounded-full mx-auto overflow-hidden backdrop-blur-sm border border-white/20">
|
||
<div
|
||
className="h-full bg-gradient-to-r from-white via-white/80 to-white rounded-full shadow-lg"
|
||
style={{
|
||
width: `${Math.min((animationPhase + 1) * 25, 100)}%`,
|
||
transition: "width 0.8s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
}}
|
||
></div>
|
||
</div>
|
||
<p className="text-white/70 text-lg mt-6 font-medium">Загрузка...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|