349 lines
14 KiB
TypeScript
349 lines
14 KiB
TypeScript
import { useState, useCallback } from 'react';
|
|
import Scene from '../components/3d/Scene';
|
|
import confetti from 'canvas-confetti';
|
|
|
|
export default function Inauguration() {
|
|
const [isCelebrating, setIsCelebrating] = useState(false);
|
|
const [showWelcome, setShowWelcome] = useState(false);
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
const triggerConfetti = useCallback(() => {
|
|
const duration = 5 * 1000;
|
|
const animationEnd = Date.now() + duration;
|
|
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
|
|
|
|
const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
|
|
|
|
const interval: any = setInterval(function() {
|
|
const timeLeft = animationEnd - Date.now();
|
|
|
|
if (timeLeft <= 0) {
|
|
return clearInterval(interval);
|
|
}
|
|
|
|
const particleCount = 50 * (timeLeft / duration);
|
|
|
|
const colors = ['#2E90FA', '#53B1FD', '#84CAFF', '#1570EF', '#175CD3'];
|
|
|
|
confetti({
|
|
...defaults,
|
|
particleCount,
|
|
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
|
|
colors: colors,
|
|
shapes: ['circle', 'square'],
|
|
scalar: randomInRange(0.8, 1.5)
|
|
});
|
|
confetti({
|
|
...defaults,
|
|
particleCount,
|
|
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
|
|
colors: colors,
|
|
shapes: ['circle', 'square'],
|
|
scalar: randomInRange(0.8, 1.5)
|
|
});
|
|
}, 250);
|
|
}, []);
|
|
|
|
const handleKickstart = () => {
|
|
setIsCelebrating(true);
|
|
triggerConfetti();
|
|
|
|
setTimeout(() => {
|
|
setShowWelcome(true);
|
|
}, 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="relative w-full h-screen overflow-hidden">
|
|
{/* Animated Gradient Background */}
|
|
<div
|
|
className="absolute inset-0 animate-gradient-xy"
|
|
style={{
|
|
background: 'linear-gradient(135deg, #2E90FA 0%, #1570EF 25%, #53B1FD 50%, #84CAFF 75%, #2E90FA 100%)',
|
|
backgroundSize: '400% 400%',
|
|
animation: 'gradientShift 15s ease infinite'
|
|
}}
|
|
/>
|
|
|
|
{/* Animated Mesh Gradient Overlay */}
|
|
<div className="absolute inset-0 opacity-60">
|
|
<div
|
|
className="absolute inset-0 animate-pulse"
|
|
style={{
|
|
background: 'radial-gradient(circle at 20% 80%, #84CAFF 0%, transparent 50%), radial-gradient(circle at 80% 20%, #53B1FD 0%, transparent 50%), radial-gradient(circle at 40% 40%, #2E90FA 0%, transparent 40%)',
|
|
filter: 'blur(60px)'
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Floating Bubbles */}
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
|
{[...Array(20)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute rounded-full"
|
|
style={{
|
|
width: `${Math.random() * 100 + 50}px`,
|
|
height: `${Math.random() * 100 + 50}px`,
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
background: `radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)`,
|
|
animation: `floatBubble ${Math.random() * 10 + 10}s ease-in-out infinite`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* 3D Scene */}
|
|
<div className="absolute inset-0">
|
|
<Scene isCelebrating={isCelebrating} />
|
|
</div>
|
|
|
|
{/* Main Content Container */}
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
|
|
|
{/* Logo Section */}
|
|
<div
|
|
className={`text-center mb-8 transition-all duration-1000 ease-out ${showWelcome ? 'opacity-0 -translate-y-12' : 'opacity-100 translate-y-0'}`}
|
|
>
|
|
{/* Logo Container with Glassmorphism */}
|
|
<div className="relative inline-block">
|
|
{/* Glow Effect Behind Logo */}
|
|
<div className="absolute -inset-4 bg-gradient-to-r from-[#2E90FA] to-[#84CAFF] rounded-3xl blur-2xl opacity-40 animate-pulse" />
|
|
|
|
{/* Logo Text */}
|
|
<div className="relative">
|
|
<h1 className="text-8xl font-black tracking-tight">
|
|
<span
|
|
className="bg-clip-text text-transparent animate-shimmer"
|
|
style={{
|
|
backgroundImage: 'linear-gradient(90deg, #FFFFFF 0%, #E0F2FE 25%, #FFFFFF 50%, #E0F2FE 75%, #FFFFFF 100%)',
|
|
backgroundSize: '200% auto',
|
|
textShadow: '0 0 40px rgba(46,144,250,0.5)',
|
|
animation: 'shimmer 3s linear infinite'
|
|
}}
|
|
>
|
|
FRESHYO
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Tagline */}
|
|
<p className="text-2xl font-light text-white/90 mt-3 tracking-widest uppercase">
|
|
Freshness Delivered
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Content - CTA or Welcome Message */}
|
|
<div className="relative z-10">
|
|
{!showWelcome ? (
|
|
/* CTA Button */
|
|
<div
|
|
className={`transition-all duration-700 ease-out ${isCelebrating ? 'opacity-0 scale-90' : 'opacity-100 scale-100'}`}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
<button
|
|
onClick={handleKickstart}
|
|
className="pointer-events-auto group relative"
|
|
>
|
|
{/* Outer Glow Rings */}
|
|
<div className="absolute -inset-8 rounded-full bg-gradient-to-r from-[#1570EF] via-[#53B1FD] to-[#1570EF] opacity-30 blur-2xl group-hover:opacity-50 group-hover:blur-3xl transition-all duration-500 animate-pulse" />
|
|
|
|
{/* Inner Glow Ring */}
|
|
<div className="absolute -inset-4 rounded-full border-2 border-white/20 group-hover:border-white/40 transition-all duration-500" />
|
|
|
|
{/* Button Container */}
|
|
<div className="relative overflow-hidden rounded-full bg-gradient-to-r from-[#1570EF] to-[#53B1FD] p-[2px]">
|
|
<div className="relative rounded-full bg-gradient-to-r from-[#1570EF] to-[#53B1FD] px-12 py-6">
|
|
{/* Animated Background on Hover */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-r from-[#2E90FA] via-[#53B1FD] to-[#2E90FA] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
|
style={{ backgroundSize: '200% auto' }}
|
|
/>
|
|
|
|
{/* Button Content */}
|
|
<div className="relative flex items-center gap-4">
|
|
{/* Sparkle Icon */}
|
|
<svg
|
|
className={`w-8 h-8 text-white transition-transform duration-300 ${isHovered ? 'rotate-12 scale-110' : ''}`}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
</svg>
|
|
|
|
<span className="text-3xl font-bold text-white tracking-wide">
|
|
Launch Freshyo
|
|
</span>
|
|
|
|
{/* Rocket Icon */}
|
|
<svg
|
|
className={`w-8 h-8 text-white transition-all duration-300 ${isHovered ? 'translate-x-1 -translate-y-1' : ''}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16 8l-6 6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Particles Around Button */}
|
|
<div className="absolute -top-2 -right-2 w-4 h-4 bg-white/60 rounded-full animate-float-fast" />
|
|
<div className="absolute -bottom-2 -left-2 w-3 h-3 bg-[#84CAFF] rounded-full animate-float-delayed-fast" />
|
|
</button>
|
|
|
|
{/* Subtext under button */}
|
|
<p className="text-white/60 text-sm mt-6 text-center font-medium tracking-wide">
|
|
Click to celebrate our launch in Mahabubnagar
|
|
</p>
|
|
</div>
|
|
) : (
|
|
/* Welcome Message */
|
|
<div className="text-center animate-fade-in-up">
|
|
<div className="relative inline-block">
|
|
{/* Background glow */}
|
|
<div className="absolute -inset-8 bg-gradient-to-r from-[#2E90FA] to-[#84CAFF] rounded-full blur-3xl opacity-40" />
|
|
|
|
<div className="relative bg-white/10 backdrop-blur-lg rounded-3xl px-16 py-12 border border-white/20 shadow-2xl">
|
|
{/* Success Icon */}
|
|
<div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-r from-[#2E90FA] to-[#53B1FD] flex items-center justify-center shadow-lg">
|
|
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 className="text-5xl font-black text-white mb-4">
|
|
Welcome to Freshyo!
|
|
</h2>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-2xl font-semibold text-white/90">
|
|
<span>We're now live in</span>
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#FFD700] to-[#FFA500] font-black">
|
|
Mahabubnagar
|
|
</span>
|
|
</div>
|
|
|
|
{/* Decorative line */}
|
|
<div className="mt-8 flex items-center justify-center gap-4">
|
|
<div className="h-0.5 w-16 bg-gradient-to-r from-transparent to-white/40" />
|
|
<div className="w-2 h-2 rounded-full bg-white/60" />
|
|
<div className="h-0.5 w-16 bg-gradient-to-l from-transparent to-white/40" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer Info */}
|
|
<div
|
|
className={`absolute bottom-12 left-0 right-0 text-center transition-all duration-1000 ${showWelcome ? 'opacity-0 translate-y-8' : 'opacity-100 translate-y-0'}`}
|
|
>
|
|
<div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-full px-6 py-3 border border-white/10">
|
|
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
|
<p className="text-white/80 text-sm font-medium">
|
|
Bringing fresh groceries to your doorstep
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Side Decorative Elements */}
|
|
<div className="absolute left-8 top-1/2 -translate-y-1/2 pointer-events-none">
|
|
<div className="flex flex-col gap-4">
|
|
{[...Array(3)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="w-1 h-12 rounded-full bg-gradient-to-b from-white/40 to-transparent"
|
|
style={{ animationDelay: `${i * 0.2}s` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute right-8 top-1/2 -translate-y-1/2 pointer-events-none">
|
|
<div className="flex flex-col gap-4">
|
|
{[...Array(3)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="w-1 h-12 rounded-full bg-gradient-to-b from-white/40 to-transparent"
|
|
style={{ animationDelay: `${i * 0.2}s` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Custom Styles */}
|
|
<style>{`
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
|
|
@keyframes floatBubble {
|
|
0%, 100% {
|
|
transform: translateY(0) translateX(0) scale(1);
|
|
opacity: 0.3;
|
|
}
|
|
25% {
|
|
transform: translateY(-30px) translateX(10px) scale(1.1);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) translateX(-10px) scale(0.9);
|
|
opacity: 0.3;
|
|
}
|
|
75% {
|
|
transform: translateY(-40px) translateX(5px) scale(1.05);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@keyframes float-fast {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
50% { transform: translateY(-10px) translateX(5px); }
|
|
}
|
|
|
|
@keyframes float-delayed-fast {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
50% { transform: translateY(8px) translateX(-5px); }
|
|
}
|
|
|
|
.animate-float-fast {
|
|
animation: float-fast 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-delayed-fast {
|
|
animation: float-delayed-fast 2.5s ease-in-out infinite;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(30px) scale(0.95);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|