---
import MovieCard from './MovieCard.astro';
import movies from '../popular-movies.json';
const popularMovies = movies.results;
---

<div class="container mx-auto px-4 pt-16 mb-16">
	<div class="popular-movies">
		<h2 class="uppercase tracking-wider text-orange-500 text-lg font-semibold">Popular Movies</h2>
		<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
			{popularMovies.map((movie) => <MovieCard movie={movie} />)}
		</div>
	</div>
	<!-- end pouplar-movies -->
</div>