62 lines
2.9 KiB
TypeScript
62 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import { InfiniteSlider } from '@/components/motion-primitives/infinite-slider'
|
|
import { ProgressiveBlur } from '@/components/motion-primitives/progressive-blur'
|
|
import { useContent } from '@/components/layout/content-provider'
|
|
|
|
export default function LogoCloud() {
|
|
const content = useContent()
|
|
const { logoCloud } = content.pages.home
|
|
const baseLogo = content.images.logo
|
|
const logoItems = Array.from({ length: 18 }, (_, index) => ({
|
|
src: baseLogo,
|
|
alt: `مستر دکور ${index + 1}`,
|
|
}))
|
|
|
|
return (
|
|
<section className="relative overflow-hidden border-t border-b border-border/80 dark:border-primary/20 py-12 md:py-16">
|
|
<div className="group relative m-auto max-w-7xl px-6">
|
|
<div className="flex flex-col items-center justify-center text-center">
|
|
<div className="mb-4">
|
|
<p className="text-sm font-semibold text-foreground dark:text-foreground">{logoCloud.title}</p>
|
|
</div>
|
|
<div className="relative w-full max-w-6xl py-6" dir="ltr">
|
|
<InfiniteSlider
|
|
speedOnHover={20}
|
|
speed={40}
|
|
gap={101}
|
|
direction="horizontal"
|
|
reverse={false}>
|
|
{logoItems.map((logo, index) => (
|
|
<div
|
|
key={`${logo.src}-${index}`}
|
|
className="flex h-16 w-32 shrink-0 items-center justify-center px-2 md:h-20 md:w-40"
|
|
>
|
|
<img
|
|
className="max-h-[64px] w-auto object-contain opacity-70 grayscale dark:invert dark:brightness-75 transition-all duration-300 hover:opacity-100 hover:grayscale-0 dark:hover:invert-0 dark:hover:brightness-100 md:max-h-[76px]"
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
height={64}
|
|
width="auto"
|
|
/>
|
|
</div>
|
|
))}
|
|
</InfiniteSlider>
|
|
<ProgressiveBlur
|
|
className="pointer-events-none absolute right-0 top-0 h-full w-20 dark:opacity-50"
|
|
direction="right"
|
|
blurIntensity={0.8}
|
|
/>
|
|
<ProgressiveBlur
|
|
className="pointer-events-none absolute right-0 top-0 h-full w-20 dark:opacity-0"
|
|
direction="left"
|
|
blurIntensity={0.5}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|