337 lines
11 KiB
JavaScript
337 lines
11 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
|
|
// Import all images statically
|
|
// import home1 from "../assets/home1.jpg";
|
|
// import home1Mobile from "../assets/home1-2.jpg";
|
|
// import home2 from "../assets/home2.jpg";
|
|
// import home2Mobile from "../assets/home2-2.jpg";
|
|
// import home3 from "../assets/home3.png";
|
|
// import home4 from "../assets/home4.png";
|
|
// // import home4Mobile from "../assets/home4-2.jpg";
|
|
// import home5 from "../assets/home5.png";
|
|
// import home6 from "../assets/home6.jpg";
|
|
// import home6Mobile from "../assets/home6-2.jpg";
|
|
// import home7 from "../assets/home7.jpg";
|
|
// import home7Mobile from "../assets/home7-2.jpg";
|
|
// import home8 from "../assets/home8.jpg";
|
|
// import home8Mobile from "../assets/home8-2.jpg";
|
|
// import home9 from "../assets/home9.jpg";
|
|
// import home10 from "../assets/home10.jpg";
|
|
|
|
// Services images
|
|
// import gasStation from "../assets/Images/gasstation.jpg";
|
|
|
|
|
|
// List all critical images that need to be preloaded
|
|
const imagesToPreload = [
|
|
// Home images
|
|
// home1,
|
|
// home1Mobile,
|
|
// home2,
|
|
// home2Mobile,
|
|
// home3,
|
|
// home4,
|
|
// home4Mobile,
|
|
// home5,
|
|
// home6,
|
|
// home6Mobile,
|
|
// home7,
|
|
// home7Mobile,
|
|
// home8,
|
|
// home8Mobile,
|
|
// home9,
|
|
// home10,
|
|
// Services images
|
|
// gasStation,
|
|
|
|
];
|
|
|
|
const ImagePreloader = ({ children }) => {
|
|
const [imagesLoaded, setImagesLoaded] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
let loadedCount = 0;
|
|
const totalImages = imagesToPreload.length;
|
|
|
|
const preloadImages = async () => {
|
|
try {
|
|
const loadImage = (src) => {
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
img.src = src;
|
|
img.onload = () => {
|
|
loadedCount++;
|
|
setProgress(Math.floor((loadedCount / totalImages) * 100));
|
|
resolve();
|
|
};
|
|
img.onerror = reject;
|
|
});
|
|
};
|
|
|
|
await Promise.all(imagesToPreload.map(loadImage));
|
|
setImagesLoaded(true);
|
|
} catch (error) {
|
|
console.error("Failed to preload images:", error);
|
|
// Continue anyway after a timeout
|
|
setTimeout(() => setImagesLoaded(true), 3000);
|
|
}
|
|
};
|
|
|
|
preloadImages();
|
|
}, []);
|
|
|
|
if (!imagesLoaded) {
|
|
return (
|
|
<div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
|
|
{/* Animated background effect */}
|
|
<div className="absolute inset-0 overflow-hidden opacity-10">
|
|
<div className="absolute top-0 left-0 w-full h-full">
|
|
{[...Array(20)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute rounded-full bg-white/30"
|
|
style={{
|
|
width: `${Math.random() * 10 + 5}px`,
|
|
height: `${Math.random() * 10 + 5}px`,
|
|
top: `${Math.random() * 100}%`,
|
|
left: `${Math.random() * 100}%`,
|
|
animationDuration: `${Math.random() * 10 + 10}s`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Company logo or branding could go here */}
|
|
<div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
|
|
TPS
|
|
</div>
|
|
|
|
{/* 3D-style Fuel Tank */}
|
|
<div className="relative w-72 h-56 mb-8 perspective-800">
|
|
{/* Tank body with 3D effect */}
|
|
<div
|
|
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
|
|
style={{
|
|
background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
|
|
boxShadow:
|
|
"inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
|
|
border: "1px solid rgba(255,255,255,0.1)",
|
|
}}
|
|
>
|
|
{/* Glass effect overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
|
|
|
|
{/* Tank Cap with metallic effect */}
|
|
<div
|
|
className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
|
|
boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
|
|
}}
|
|
>
|
|
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
|
|
</div>
|
|
|
|
{/* Fuel Level with dynamic wave effect */}
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
|
|
style={{
|
|
height: `${progress}%`,
|
|
background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
|
|
boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
|
|
}}
|
|
>
|
|
{/* Animated wave effect at the top of fuel */}
|
|
<div className="absolute -top-2 left-0 w-full h-4 animate-wave">
|
|
<div
|
|
className="relative w-[200%] h-full"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
|
|
backgroundSize: "50% 100%",
|
|
animation: "moveWave 3s linear infinite",
|
|
}}
|
|
></div>
|
|
</div>
|
|
|
|
{/* Bubbles with varied animations */}
|
|
{[...Array(8)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute rounded-full bg-white/20"
|
|
style={{
|
|
width: `${Math.random() * 6 + 2}px`,
|
|
height: `${Math.random() * 6 + 2}px`,
|
|
bottom: `${Math.random() * 80}%`,
|
|
left: `${Math.random() * 90 + 5}%`,
|
|
animation: `bubble ${
|
|
Math.random() * 3 + 2
|
|
}s ease-in infinite ${Math.random() * 2}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tank level markings with glow effect */}
|
|
<div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="w-full border-b border-[#F3C623]/20 h-1/4"
|
|
style={{
|
|
boxShadow:
|
|
progress > 75 - i * 25
|
|
? "0 1px 3px rgba(243,198,35,0.3)"
|
|
: "none",
|
|
}}
|
|
>
|
|
<div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Fuel Gauge with realistic dial */}
|
|
<div
|
|
className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
|
|
style={{
|
|
background:
|
|
"radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
|
|
boxShadow:
|
|
"inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
|
|
border: "2px solid rgba(235,131,23,0.7)",
|
|
}}
|
|
>
|
|
{/* Gauge markings */}
|
|
{[...Array(9)].map((_, i) => {
|
|
const rotation = -135 + i * 30;
|
|
const isLarge = i % 2 === 0;
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`absolute w-${isLarge ? "1.5" : "1"} h-${
|
|
isLarge ? "3" : "2"
|
|
} bg-[#F3C623]/${isLarge ? "70" : "40"}`}
|
|
style={{
|
|
transform: `rotate(${rotation}deg) translateY(-7px)`,
|
|
transformOrigin: "bottom center",
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{/* Gauge needle with smooth animation */}
|
|
<div
|
|
className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
|
|
style={{
|
|
transform: `rotate(${-135 + progress * 2.7}deg)`,
|
|
transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
boxShadow: "0 0 5px rgba(243,198,35,0.5)",
|
|
}}
|
|
>
|
|
<div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
|
|
</div>
|
|
|
|
{/* Center pin */}
|
|
<div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
|
|
|
|
{/* E and F indicators */}
|
|
<div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
|
|
E
|
|
</div>
|
|
<div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
|
|
F
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress indicator with animated glow */}
|
|
<div className="relative">
|
|
<p
|
|
className="text-white text-2xl font-bold"
|
|
style={{
|
|
textShadow: "0 0 10px rgba(255,255,255,0.3)",
|
|
}}
|
|
>
|
|
{progress}%
|
|
</p>
|
|
<div
|
|
className="absolute -inset-4 rounded-full opacity-0"
|
|
style={{
|
|
background:
|
|
"radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
|
|
animation: "pulse 2s ease-in-out infinite",
|
|
}}
|
|
></div>
|
|
</div>
|
|
|
|
<p className="mt-2 text-gray-300 font-medium tracking-wide">
|
|
Filling your tank...
|
|
</p>
|
|
|
|
{/* Advanced animations */}
|
|
{/* <style jsx>{`
|
|
@keyframes bubble {
|
|
0% {
|
|
transform: translateY(0) scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
20% {
|
|
opacity: 0.8;
|
|
transform: translateY(-10px) scale(1);
|
|
}
|
|
80% {
|
|
opacity: 0.8;
|
|
transform: translateY(-30px) scale(0.9);
|
|
}
|
|
100% {
|
|
transform: translateY(-40px) scale(0.3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes moveWave {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.perspective-800 {
|
|
perspective: 800px;
|
|
}
|
|
|
|
.animate-wave {
|
|
overflow: hidden;
|
|
}
|
|
`}</style> */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <>{children}</>;
|
|
};
|
|
|
|
export default ImagePreloader;
|