Spaces:
Runtime error
Runtime error
| 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; |