102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import Image from 'next/image'
|
|
|
|
interface PageLoaderProps {
|
|
onLoadingComplete: () => void
|
|
duration?: number
|
|
}
|
|
|
|
export default function PageLoader({ onLoadingComplete, duration = 800 }: PageLoaderProps) {
|
|
const [progress, setProgress] = useState(0)
|
|
|
|
useEffect(() => {
|
|
// Progress bar animation - faster completion
|
|
const progressInterval = setInterval(() => {
|
|
setProgress(prev => {
|
|
if (prev >= 100) {
|
|
clearInterval(progressInterval)
|
|
return 100
|
|
}
|
|
return prev + 12.5 // Will complete in 0.8 seconds (100/12.5 * 100ms)
|
|
})
|
|
}, 100)
|
|
|
|
// Complete loading after duration
|
|
const loadingTimeout = setTimeout(() => {
|
|
onLoadingComplete()
|
|
}, duration)
|
|
|
|
return () => {
|
|
clearInterval(progressInterval)
|
|
clearTimeout(loadingTimeout)
|
|
}
|
|
}, [duration, onLoadingComplete])
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50"
|
|
>
|
|
<div className="text-center space-y-8 max-w-4xl mx-auto px-6">
|
|
{/* Kashmina Logo */}
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
|
className="flex justify-center mb-8"
|
|
>
|
|
<div className="relative w-32 h-32 md:w-40 md:h-40">
|
|
<Image
|
|
src="/kashmina-logo.png"
|
|
alt="Kashmina Logo"
|
|
fill
|
|
className="object-contain"
|
|
priority
|
|
sizes="(max-width: 768px) 128px, 160px"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Welcome Heading */}
|
|
<motion.div
|
|
initial={{ y: 30, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="space-y-4"
|
|
>
|
|
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-amber-700 via-orange-600 to-red-600 bg-clip-text text-transparent leading-tight">
|
|
Welcome to Padmaaja Rasooi
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-slate-600 font-medium">
|
|
Premium Rice • Authentic Quality • From Farm to Kitchen
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Progress Bar */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.4, duration: 0.4 }}
|
|
className="w-full max-w-md mx-auto space-y-3"
|
|
>
|
|
<div className="w-full bg-slate-200 rounded-full h-2 overflow-hidden border border-slate-300/50">
|
|
<motion.div
|
|
className="h-full bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 rounded-full shadow-sm"
|
|
style={{ width: `${Math.round(progress)}%` }}
|
|
transition={{ duration: 0.1 }}
|
|
/>
|
|
</div>
|
|
<p className="text-sm text-slate-500 font-medium">
|
|
Loading your premium rice experience...
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|