46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { motion } from "framer-motion";
|
|
|
|
// Loading Skeleton Component
|
|
function ServiceCardSkeleton() {
|
|
return (
|
|
<div className="animate-pulse space-y-4 py-6 px-8 rounded-xl bg-[#171616] bg-linear-to-br from-[#2a2a2a] to-black">
|
|
<div className="h-6 bg-[#171616] rounded w-3/4"></div>
|
|
<div className="h-4 bg-[#171616] rounded w-full"></div>
|
|
<div className="h-4 bg-[#171616] rounded w-5/6"></div>
|
|
<div className="h-8 bg-[#171616] rounded w-32"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Loading Component
|
|
export function ServicesLoading() {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="max-w-250 w-full mx-auto space-y-5"
|
|
>
|
|
{/* Top Cards Skeleton */}
|
|
<div className="flex sm:flex-row flex-col items-center gap-5">
|
|
<div className="sm:w-[55%] w-full">
|
|
<ServiceCardSkeleton />
|
|
</div>
|
|
<div className="sm:w-[45%] w-full">
|
|
<ServiceCardSkeleton />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Cards Skeleton */}
|
|
<div className="flex sm:flex-row flex-col items-start justify-between gap-5">
|
|
<div className="sm:w-[40%] w-full">
|
|
<ServiceCardSkeleton />
|
|
</div>
|
|
<div className="sm:w-[60%] w-full space-y-5">
|
|
<ServiceCardSkeleton />
|
|
<div className="h-24 bg-[#171616] rounded-xl animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|