import { useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { ChevronLeft, ChevronRight, Image } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Container } from '@/components/ui/container'; const CAROUSEL_DATA = [ { id: 1, image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80', alt: 'Mountain landscape at sunset' }, { id: 2, image: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80', alt: 'Aurora borealis over snowy mountains' }, { id: 3, image: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80', alt: 'Dramatic sky with clouds' }, { id: 4, image: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80', alt: 'Foggy forest pathway' }, { id: 5, image: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80', alt: 'Serene lake reflection' } ]; export default function App() { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState<'prev' | 'next'>('next'); const goToSlide = (index: number, dir: 'prev' | 'next') => { if (index < 0) index = CAROUSEL_DATA.length - 1; if (index >= CAROUSEL_DATA.length) index = 0; setDirection(dir); setCurrentIndex(index); }; const variants = { enter: (direction: 'prev' | 'next') => ({ x: direction === 'next' ? 100 : -100, opacity: 0 }), center: { x: 0, opacity: 1 }, exit: (direction: 'prev' | 'next') => ({ x: direction === 'next' ? -100 : 100, opacity: 0 }) }; return (

Visual Gallery

Explore a curated collection of stunning landscapes from around the world. Swipe through our premium visual stories.

{/* Carousel Container */}

${CAROUSEL_DATA[currentIndex].alt}$ {/* Gradient Overlay for text contrast */}

{/* Image placeholder during load */}

{/* Navigation Controls */}

{/* Slide Indicators */}

{CAROUSEL_DATA.map((_, index) => (

{/* Thumbnail Preview (Desktop) */}

{CAROUSEL_DATA.map((slide, index) => ( goToSlide(index, index > currentIndex ? 'next' : 'prev')} className={`relative flex-shrink-0 rounded-lg overflow-hidden border-2 transition-all ${ index === currentIndex ? 'border-primary ring-2 ring-primary/20' : 'border-border opacity-70 hover:opacity-100' }`} > {slide.alt}

))}

{/* Slide Counter */}

{currentIndex + 1} / {CAROUSEL_DATA.length}

{/* Decorative Background Elements */}

); }

Sleek Image Carousel