Merge
This commit is contained in:
Rahaf
@ -1,22 +1,22 @@
|
||||
// import { useState, useEffect } from "react";
|
||||
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";
|
||||
// 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";
|
||||
@ -44,293 +44,293 @@ const imagesToPreload = [
|
||||
// Services images
|
||||
// gasStation,
|
||||
|
||||
// ];
|
||||
];
|
||||
|
||||
// const ImagePreloader = ({ children }) => {
|
||||
// const [imagesLoaded, setImagesLoaded] = useState(false);
|
||||
// const [progress, setProgress] = useState(0);
|
||||
const ImagePreloader = ({ children }) => {
|
||||
const [imagesLoaded, setImagesLoaded] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
// useEffect(() => {
|
||||
// let loadedCount = 0;
|
||||
// const totalImages = imagesToPreload.length;
|
||||
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;
|
||||
// });
|
||||
// };
|
||||
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);
|
||||
// }
|
||||
// };
|
||||
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();
|
||||
// }, []);
|
||||
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>
|
||||
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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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",
|
||||
// }}
|
||||
// />
|
||||
// );
|
||||
// })}
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
<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;
|
||||
// }
|
||||
// }
|
||||
{/* 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 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%);
|
||||
// }
|
||||
// }
|
||||
@keyframes moveWave {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// .perspective-800 {
|
||||
// perspective: 800px;
|
||||
// }
|
||||
.perspective-800 {
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
// .animate-wave {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// `}</style> */}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
.animate-wave {
|
||||
overflow: hidden;
|
||||
}
|
||||
`}</style> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// return <>{children}</>;
|
||||
// };
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
// export default ImagePreloader;
|
||||
export default ImagePreloader;
|
||||
|
||||
Reference in New Issue
Block a user