121 lines
6.4 KiB
TypeScript
121 lines
6.4 KiB
TypeScript
|
|
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { TypewriterLoop } from '../components/animations/TextReveal';
|
|
import { ArrowRight, Sparkles, MousePointer2 } from 'lucide-react';
|
|
import { Logo } from '../components/ui/Logo';
|
|
|
|
const Welcome: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const handleStart = () => {
|
|
navigate('/auth');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen w-full flex flex-col items-center justify-center bg-black relative overflow-hidden font-sans text-white selection:bg-red-500/30 p-6">
|
|
|
|
{/* High-Resolution Dynamic Background Decor - Mountain Night (Same as Greeting) */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center opacity-70"
|
|
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?q=80&w=2400&auto=format&fit=crop')" }}
|
|
></div>
|
|
|
|
{/* Overlays - Darker for text legibility without boxes */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/90"></div>
|
|
<div className="absolute inset-0 bg-black/20"></div>
|
|
|
|
{/* Massive Background Logo Watermark */}
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none select-none overflow-hidden opacity-[0.05]">
|
|
<Logo className="w-[120vh] h-[120vh] animate-bg-pulse" />
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="z-10 flex flex-col items-center justify-center w-full max-w-5xl relative pb-20">
|
|
|
|
<div className="mb-12 animate-in zoom-in duration-1000 flex flex-col items-center gap-6">
|
|
{/* Interactive Logo Container */}
|
|
<div
|
|
onClick={handleStart}
|
|
className="w-40 h-40 md:w-56 md:h-56 flex items-center justify-center relative group cursor-pointer active:scale-95 transition-all duration-500"
|
|
>
|
|
<div className="absolute inset-0 bg-red-600 rounded-full blur-[80px] opacity-20 group-hover:opacity-40 group-hover:scale-110 transition-all animate-pulse"></div>
|
|
<Logo className="w-full h-full relative z-10 drop-shadow-[0_0_50px_rgba(220,38,38,0.6)] group-hover:drop-shadow-[0_0_80px_rgba(220,38,38,0.9)] transition-all" />
|
|
|
|
{/* Visual Cue for interaction */}
|
|
<div className="absolute -bottom-6 bg-white/10 backdrop-blur-md px-5 py-2 rounded-full border border-white/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-2 shadow-xl">
|
|
<MousePointer2 size={14} className="text-red-500" />
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-white">Tap to Start</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-red-500 font-black text-xs md:text-sm tracking-[0.6em] uppercase animate-in fade-in slide-in-from-top-4 duration-1000 flex items-center justify-center gap-3">
|
|
<Sparkles size={16} /> Heritage in High Definition
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center w-full max-w-4xl animate-in fade-in slide-in-from-bottom-4 duration-1000 mb-12">
|
|
{/* Clean Typography without glassy box */}
|
|
<h1 className="text-6xl md:text-[7rem] font-black tracking-tighter text-white text-center flex items-center justify-center drop-shadow-[0_10px_30px_rgba(0,0,0,0.8)] uppercase leading-none min-h-[1.2em]">
|
|
<TypewriterLoop
|
|
words={[
|
|
"नमस्ते",
|
|
"Welcome",
|
|
"ज्वजलपा",
|
|
"सेवारो",
|
|
"टाशी देलेक",
|
|
"लसकुस"
|
|
]}
|
|
typingSpeed={80}
|
|
deletingSpeed={40}
|
|
className="text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-400"
|
|
/>
|
|
</h1>
|
|
<p className="text-gray-300 text-lg md:text-2xl font-bold text-center mt-6 leading-relaxed drop-shadow-md tracking-wide">
|
|
The Ultimate Nepali Companion for <span className="text-red-500 font-black uppercase">Culture</span>, <span className="text-blue-400 font-black uppercase">Health</span>, and <span className="text-white font-black uppercase">Excellence</span>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full max-w-md z-10 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300 flex flex-col items-center gap-8">
|
|
<button
|
|
onClick={handleStart}
|
|
className="group relative w-full h-20 md:h-24 bg-white text-black rounded-[4rem] flex items-center justify-center gap-8 overflow-hidden transition-all hover:scale-105 active:scale-95 shadow-[0_0_60px_rgba(255,255,255,0.2)] border-4 border-transparent hover:border-red-600"
|
|
>
|
|
{/* Visual Effects */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-red-500/20 to-transparent -translate-x-full group-hover:animate-shine transition-all duration-1000"></div>
|
|
|
|
<span className="relative z-10 text-3xl md:text-4xl font-black uppercase tracking-[0.2em] italic">Enter</span>
|
|
|
|
<div className="relative z-10 w-12 h-12 md:w-16 md:h-16 bg-red-600 rounded-full flex items-center justify-center group-hover:rotate-12 transition-all shadow-xl">
|
|
<ArrowRight size={32} className="text-white group-hover:scale-125 transition-transform" />
|
|
</div>
|
|
</button>
|
|
|
|
<div className="flex flex-col items-center gap-3 opacity-60 hover:opacity-100 transition-opacity">
|
|
<p className="text-center text-[10px] font-black text-gray-400 uppercase tracking-[0.5em]">
|
|
PROJECT RUDRAKSHA • v3.0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes shine {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
@keyframes bg-pulse {
|
|
0%, 100% { opacity: 0.05; transform: scale(1); }
|
|
50% { opacity: 0.1; transform: scale(1.05); }
|
|
}
|
|
.animate-bg-pulse {
|
|
animation: bg-pulse 12s ease-in-out infinite;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Welcome;
|