Spaces:
Runtime error
Runtime error
File size: 4,415 Bytes
2070fe3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import React from 'react';
const Snippets = () => {
// Images for the infinite scroll
const images = [
"https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=2152&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=2126&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1482881497185-d4a9ddbe4151?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://plus.unsplash.com/premium_photo-1673264933212-d78737f38e48?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://plus.unsplash.com/premium_photo-1711434824963-ca894373272e?q=80&w=2030&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://plus.unsplash.com/premium_photo-1675705721263-0bbeec261c49?q=80&w=1940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1524799526615-766a9833dec0?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
];
// Duplicate images for seamless loop
const duplicatedImages = [...images, ...images];
return (
<>
<style jsx>{`
/* --- Scroll Animations Only --- */
@keyframes scroll-right {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.infinite-scroll {
animation: scroll-right 30s linear infinite;
}
.scroll-container {
mask: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.image-item {
transition: transform 0.3s ease, filter 0.3s ease;
}
.image-item:hover {
transform: scale(1.05);
filter: brightness(1.1);
}
`}</style>
<div id="snippets" className="min-h-screen bg-black relative overflow-hidden flex flex-col items-center justify-center py-20">
{/* --- 1. Background Image Effect (No Glow) --- */}
<div className="absolute inset-0 z-0">
<img
src="/snippets-bg.jpg"
alt="Background"
className="w-full h-full object-cover opacity-60"
onError={(e) => { e.target.style.display = 'none'; }}
/>
{/* Gradient Overlay matching Hero */}
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60"></div>
</div>
{/* --- 2. Main Content (Snippets) --- */}
{/* Section Header */}
<div className="relative z-10 text-center mb-16 px-4">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-wider drop-shadow-lg">
SNIPPETS
</h2>
<p className="text-gray-300 text-lg font-light tracking-wide drop-shadow-md">
Captured moments from our community
</p>
</div>
{/* Scrolling images container */}
<div className="relative z-10 w-full flex items-center justify-center">
<div className="scroll-container w-full">
<div className="infinite-scroll flex gap-6 w-max px-6">
{duplicatedImages.map((image, index) => (
<div
key={index}
className="image-item flex-shrink-0 w-64 h-64 md:w-72 md:h-72 lg:w-80 lg:h-80 rounded-2xl overflow-hidden shadow-2xl border border-gray-800/50"
>
<img
src={image}
alt={`Gallery image ${(index % images.length) + 1}`}
className="w-full h-full object-cover"
loading="lazy"
/>
</div>
))}
</div>
</div>
</div>
</div>
</>
);
};
export default Snippets; |