file name and location updayed for better be
This commit is contained in:
68
pages/home/banner/loading.tsx
Normal file
68
pages/home/banner/loading.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
export function BannerSliderSkeleton() {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center">
|
||||
{/* Fake nav buttons */}
|
||||
<div className="w-10 h-10 absolute z-10 left-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
|
||||
<div className="w-10 h-10 absolute z-10 right-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
|
||||
|
||||
{/* Slide content */}
|
||||
<div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh] w-full">
|
||||
<div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
|
||||
|
||||
{/* Mobile text skeleton (hidden on lg) */}
|
||||
<div className="lg:hidden space-y-6">
|
||||
{/* Badge */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
|
||||
<div className="h-4 w-32 rounded-full bg-gray-600 animate-pulse" />
|
||||
</div>
|
||||
{/* Heading */}
|
||||
<div className="space-y-3">
|
||||
<div className="h-8 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
|
||||
<div className="h-8 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
|
||||
</div>
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
|
||||
<div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
|
||||
<div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
|
||||
</div>
|
||||
{/* CTA */}
|
||||
<div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* Image skeleton */}
|
||||
<div className="flex items-end justify-center">
|
||||
<div className="lg:w-[375px] w-[250px] lg:h-[375px] h-[250px] max-[300px]:w-[80vw] rounded-xl bg-gray-700/50 animate-pulse shimmer" />
|
||||
</div>
|
||||
|
||||
{/* Desktop text skeleton (hidden on mobile) */}
|
||||
<div className="lg:inline-block hidden space-y-6 mb-20">
|
||||
{/* Badge */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
|
||||
<div className="h-4 w-36 rounded-full bg-gray-600 animate-pulse" />
|
||||
</div>
|
||||
{/* Heading */}
|
||||
<div className="space-y-3">
|
||||
<div className="h-10 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
|
||||
<div className="h-10 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
|
||||
<div className="h-10 w-2/5 rounded-lg bg-gray-600 animate-pulse" />
|
||||
</div>
|
||||
{/* Description */}
|
||||
<div className="space-y-2 max-w-md">
|
||||
<div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
|
||||
<div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
|
||||
<div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
|
||||
</div>
|
||||
{/* CTA */}
|
||||
<div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user