97 lines
4.7 KiB
TypeScript
97 lines
4.7 KiB
TypeScript
import { Marquee } from "@/components/magicui/marquee";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const images = [
|
|
"/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
|
|
"/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
|
|
"/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
|
|
"/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
|
|
"/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
|
|
"/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
|
|
"/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
|
|
];
|
|
|
|
interface Gallery29Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Gallery29 = ({ className }: Gallery29Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"dark relative overflow-hidden bg-background py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div>
|
|
<div className="container mb-12 flex flex-col gap-4 text-center">
|
|
<h2 className="font-instrumentSerif text-2xll font-medium text-primary/80">
|
|
گالری
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground/80">
|
|
مجموعهای از تصاویر سفرهای ما.
|
|
</p>
|
|
</div>
|
|
<div className="relative">
|
|
<Marquee repeat={2} className="p-0 opacity-40 [--duration:60s]">
|
|
{images.map((image, idx) => (
|
|
<img
|
|
key={idx}
|
|
src={image}
|
|
alt="تصویر گالری"
|
|
className="aspect-[2/3] max-w-96 rounded-lg object-cover"
|
|
/>
|
|
))}
|
|
</Marquee>
|
|
<a
|
|
href="#"
|
|
className="group absolute inset-0 z-10 container mx-auto flex w-fit scale-105 items-center justify-center overflow-hidden rounded-lg transition-transform duration-500 hover:scale-104"
|
|
>
|
|
<div className="relative overflow-hidden rounded-lg">
|
|
<img
|
|
src="/block-media/external/unsplash/photo-1637217644936-6b505db635f3.jpg"
|
|
alt="تصویر برجسته گالری"
|
|
className="aspect-[2/3] w-full max-w-96 object-cover"
|
|
/>
|
|
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 backdrop-blur-[1px] transition-opacity duration-500 group-hover:opacity-100">
|
|
<p className="font-instrumentSerif -translate-y-6 border-b border-white/50 bg-gradient-to-b from-white to-white/80 bg-clip-text text-xl font-medium text-transparent transition-transform duration-500 group-hover:translate-y-0">
|
|
دنیای ما را کاوش کنید
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background" />
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background" />
|
|
<div
|
|
className="pointer-events-none absolute -top-1/2 right-0 bottom-0 hidden w-1/2 min-w-[500px] skew-[-45deg] opacity-5 dark:block"
|
|
style={{
|
|
background:
|
|
"linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 83.9344%, rgba(255, 255, 255, 0) 100%)",
|
|
mask: "linear-gradient(90deg, rgba(0, 0, 0, 0) 11.3985%, rgb(0, 0, 0) 25.5578%, rgba(0, 0, 0, 0.55) 41.6966%, rgba(0, 0, 0, 0.13) 67.1171%, rgb(0, 0, 0) 78.2306%, rgba(0, 0, 0, 0) 97.2973%)",
|
|
}}
|
|
/>
|
|
<div
|
|
className="pointer-events-none absolute -top-1/2 right-0 bottom-0 hidden w-1/2 min-w-[500px] skew-[-45deg] opacity-5 dark:block"
|
|
style={{
|
|
background:
|
|
"linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 67%, rgba(255, 255, 255, 0) 100%)",
|
|
mask: "linear-gradient(90deg, rgba(0, 0, 0, 0) 9.81489%, rgb(0, 0, 0) 20.0362%, rgba(0, 0, 0, 0.55) 28.5878%, rgba(0, 0, 0, 0.424) 40.0901%, rgb(0, 0, 0) 48.6486%, rgba(0, 0, 0, 0.267) 54.5045%, rgba(0, 0, 0, 0.13) 78.579%, rgb(0, 0, 0) 88.554%, rgba(0, 0, 0, 0) 97.2973%)",
|
|
}}
|
|
/>
|
|
<div
|
|
className="pointer-events-none absolute -top-1/2 right-0 bottom-0 hidden w-1/2 min-w-[500px] skew-[-45deg] opacity-5 dark:block"
|
|
style={{
|
|
background:
|
|
"linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 83.9344%, rgba(255, 255, 255, 0) 100%)",
|
|
mask: "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 17.6591%, rgba(0, 0, 0, 0.55) 26.6417%, rgb(0, 0, 0) 35.2302%, rgba(0, 0, 0, 0) 47.6985%, rgba(0, 0, 0, 0.13) 69.1776%, rgb(0, 0, 0) 79.1456%, rgba(0, 0, 0, 0) 97.2973%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Gallery29 };
|