script.js

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

function createMovieCard(imageUrl, altText) {
  return `
    <div class="swiper-slide hover:shadow-lg transition-shadow duration-300 animate__animated animate__fadeInUp">
      <img src="${imageUrl}" alt="${altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200">
    </div>
  `;
}

window.addEventListener('load', () => {
    gsap.fromTo('.fade-in', { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, stagger: 0.3 });
});

const movies = [
    { imageUrl: 'https://picsum.photos/200/300', altText: 'Movie 1' },
    { imageUrl: 'https://picsum.photos/201/300', altText: 'Movie 2' },
    { imageUrl: 'https://picsum.photos/202/300', altText: 'Movie 3' },
    { imageUrl: 'https://picsum.photos/203/300', altText: 'Movie 4' },
    { imageUrl: 'https://picsum.photos/204/300', altText: 'Movie 5' },
    { imageUrl: 'https://picsum.photos/205/300', altText: 'Movie 6' },
];

const swiperMoviesContainer = document.getElementById('swiper-movies');
const gridMoviesContainer = document.getElementById('grid-movies');

movies.forEach((movie, index) => {
    swiperMoviesContainer.innerHTML += createMovieCard(movie.imageUrl, movie.altText);
    const gridItem = document.createElement('div');
    gridItem.innerHTML = `<img src="${movie.imageUrl}" alt="${movie.altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200">`;
    gridMoviesContainer.appendChild(gridItem);
    gsap.fromTo(gridItem, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.5, delay: index * 0.1 });
});