feat(detail): implement responsive design

src/components/castCard/castCard.tsx

@@ -18,8 +18,8 @@ const CastCard: React.FC<ICastCard> = ({ name, character, profile_path }) => {
         className="rounded-xl"
       />
       <div className="flex flex-col">
-        <p className="font-semibold">{name}</p>
-        <p className="text-slate-300">{character}</p>
+        <p className="text-sm font-semibold md:text-base">{name}</p>
+        <p className="text-sm text-slate-300 md:text-base">{character}</p>
       </div>
     </div>
   );

src/components/crewList/crewList.tsx

@@ -8,14 +8,14 @@ interface ICrewList {
 
 const CrewList: React.FC<ICrewList> = ({ job, crew }) => (
   <div
-    className={`mx-28 flex flex-row gap-2 ${job === 'Director' ? 'border-t border-slate-800' : 'border-y border-slate-800'} px-2 py-5 text-white`}
+    className={`mx-10 flex flex-row gap-2 lg:mx-28 ${job === 'Director' ? 'border-t border-slate-800' : 'border-y border-slate-800'} px-2 py-3 text-white md:py-5`}
   >
-    <p className="font-bold">{job}</p>
+    <p className="text-sm font-bold md:text-base">{job}</p>
     {crew
       .filter((member) => member.job === job)
       .map((member, index, array) => (
         <React.Fragment key={index}>
-          <p>{member.name}</p>
+          <p className="text-sm md:text-base">{member.name}</p>
           {index !== array.length - 1 && (
             <p className="text-xl text-gray-400">·</p>
           )}

src/components/genres/genres.tsx

@@ -7,13 +7,13 @@ interface IGenres {
 
 const Genres: React.FC<IGenres> = ({ genres }) => {
   return (
-    <div className="flex flex-row gap-2">
+    <div className="flex flex-row flex-wrap gap-2">
       {genres.map((genre) => (
         <div
           key={genre.id}
-          className="rounded-full bg-slate-700 bg-opacity-80 px-4 py-2"
+          className="rounded-full bg-slate-700 bg-opacity-80 px-3 py-1 md:px-4 md:py-2"
         >
-          <p>{genre.name}</p>
+          <p className="text-sm md:text-base">{genre.name}</p>
         </div>
       ))}
     </div>

src/components/header/header.tsx

@@ -21,7 +21,7 @@ const Header: React.FC = () => {
 
   return (
     <header
-      className={`fixed top-0 z-50 w-full p-4 transition-all duration-500 ${
+      className={`fixed top-0 z-50 w-full transition-all duration-500 ${
         isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
       } bg-slate-800`}
     >

src/components/rating/rating.tsx

@@ -5,8 +5,8 @@ const Rating: React.FC<{ rating: number }> = ({ rating }) => {
   return (
     <div className="flex flex-row items-center gap-2">
       <Star className="text-yellow-300" fill="yellow" />
-      <p className="text-sm text-slate-400">
-        <span className="text-lg font-bold text-white">
+      <p className="text-xs text-slate-400 md:text-sm">
+        <span className="text-base font-bold text-white md:text-lg">
           {rating.toFixed(1)}
         </span>
         /10

src/components/topCast/topCast.tsx

@@ -9,9 +9,9 @@ interface ITopCast {
 
 const TopCast: React.FC<ITopCast> = ({ cast }) => {
   return (
-    <div className="mx-28 flex flex-col items-center justify-center px-10 py-5 text-white">
-      <h1 className="text-3xl font-bold">Top Casts</h1>
-      <div className="mt-8 grid grid-cols-4 grid-rows-3 gap-4">
+    <div className="mx-10 flex flex-col items-center justify-center px-10 py-5 text-white md:mx-28">
+      <h1 className="text-lg font-bold md:text-xl lg:text-3xl">Top Casts</h1>
+      <div className="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:grid-rows-6 lg:grid-cols-3 lg:grid-rows-4 xl:grid-cols-4 xl:grid-rows-3">
         {cast.slice(0, 12).map((cast, index) => (
           <CastCard
             key={cast.id}

src/components/yearRuntime/yearRuntime.tsx

@@ -10,9 +10,11 @@ interface IYearRuntime {
 const YearRuntime: React.FC<IYearRuntime> = ({ release_date, runtime }) => {
   return (
     <div className="flex flex-row items-center gap-1">
-      <p className="text-xl font-bold">{release_date.split('-')[0]}</p>
+      <p className="text-base font-bold lg:text-xl">
+        {release_date.split('-')[0]}
+      </p>
       <Dot />
-      <p>{convertRuntime(runtime)}</p>
+      <p className="text-sm lg:text-base">{convertRuntime(runtime)}</p>
     </div>
   );
 };

src/modules/detailMovie/detailMovie.tsx

@@ -55,23 +55,27 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
           onLoad={() => setIsLoading(false)}
         />
 
-        <div className="absolute bottom-0 left-32 right-52 z-30 flex flex-row rounded-lg pb-8">
+        <div className="absolute bottom-0 z-30 flex flex-col rounded-lg px-8 pb-8 lg:left-32 lg:right-52 lg:flex-row lg:px-0">
           {/* poster */}
           <Image
             src={`https://image.tmdb.org/t/p/original${movie?.poster_path}`}
             alt={movie?.title}
             width={200}
             height={500}
-            className="rounded-lg border border-slate-800 shadow-2xl drop-shadow-2xl"
+            className="hidden rounded-lg border border-slate-800 shadow-2xl drop-shadow-2xl lg:block"
           />
 
           <div className="ml-5 mt-3 flex max-h-[24rem] flex-col gap-3 overflow-hidden text-white">
             <YearRuntime
               release_date={movie.release_date}
               runtime={movie.runtime}
             />
-            <h1 className="text-3xl font-bold">{movie.title}</h1>
-            <p className="overflow-y-auto">{movie.overview}</p>
+            <h1 className="text-base font-bold md:text-xl lg:text-3xl">
+              {movie.title}
+            </h1>
+            <p className="overflow-y-auto text-sm md:text-base">
+              {movie.overview}
+            </p>
             <Genres genres={movie.genres} />
             <Rating rating={movie.vote_average} />
           </div>