Make responsive for smartphone

src/App.js

@@ -1,5 +1,5 @@
 import Body from './componenets/Body';
-import appStore from './utils/appStore';
+import appStore from './redux/store/appStore';
 import { Provider } from 'react-redux';
 
 function App() {

src/componenets/Browse.js

@@ -7,7 +7,7 @@ import usePopularMovies from '../hooks/usePopularMovies';
 import useTopRatedMovies from '../hooks/useTopRatedMovies';
 import useUpcomingMovies from '../hooks/useUpcomingMovies';
 import useTrendingMovies from '../hooks/useTrendingMovies';
-import GPTSearch from './GPTPageSearch';
+import GPTSearch from './gpt/GPTPageSearch';
 import { useSelector } from 'react-redux';
 
 const Browse = () => {

src/componenets/Header.js

@@ -4,12 +4,12 @@ import { signOut } from 'firebase/auth';
 import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { onAuthStateChanged } from "firebase/auth";
-import {addUser, removeUser} from '../utils/userSlice';
+import {addUser, removeUser} from '../redux/slices/userSlice';
 import {useDispatch} from 'react-redux';
 import { LOGO, SUPPORTED_LANGUAGES } from '../utils/constants';
-import { toggleGptSearchView } from '../utils/gptSlice';
+import { toggleGptSearchView } from '../redux/slices/gptSlice';
 import { FaSignOutAlt } from 'react-icons/fa';
-import {changeLanguages} from "../utils/configSlice";
+import {changeLanguages} from "../redux/slices/configSlice";
 
 const Header = () => {
   const dispatch = useDispatch();
@@ -60,12 +60,14 @@ const Header = () => {
   }
 
   return (
-    <div className='absolute px-8 w-screen py-2 bg-gradient-to-b from-black z-10 flex flex-col md:flex-row justify-between'>
-      <img 
-        src={LOGO}
-        alt="Netflixlogo" 
-        className='w-44 mx-auto md:mx-0'
-      />
+    <div className='absolute px-8 w-screen py-2 bg-gradient-to-b from-black z-10 flex flex-col md:flex-row items-center justify-between'>
+      <div className='text-start'>
+        <img 
+          src={LOGO}
+          alt="Netflixlogo" 
+          className='w-32 h-full md:w-44 mx-auto md:mx-0'
+        />
+      </div>
       {user && 
         <div className='flex p-4 items-center gap-3'>
           {/* see languagechange option when showGptSearch is true */}
@@ -82,7 +84,7 @@ const Header = () => {
             </select>
           )}
           <button 
-            className='py-2 px-4 mx-4 my-2 bg-purple-800 text-white rounded-lg'
+            className='py-2 px-2 text-sm md:px-4 mx-4 my-2 bg-purple-800 text-white rounded-md md:rounded-lg'
             onClick={handleGptSearchClick}
           >
             {/* if showGptSearch is true than than show homepage otherwise show GptSearch  */}
@@ -105,4 +107,5 @@ const Header = () => {
   )
 }
 
-export default Header;
+export default Header;
+

src/componenets/Login.js

@@ -4,7 +4,7 @@ import { checkValidData } from '../utils/validate';
 import { createUserWithEmailAndPassword , signInWithEmailAndPassword, updateProfile} from "firebase/auth";
 import { auth } from '../utils/firebase';
 import { useDispatch } from 'react-redux';
-import { addUser } from '../utils/userSlice';
+import { addUser } from '../redux/slices/userSlice';
 import {BG_URL, USER_AVTAR} from '../utils/constants';
 
 const Login = () => {
@@ -89,39 +89,39 @@ const Login = () => {
       </div>
       <form 
         onSubmit={(e) => e.preventDefault()} 
-        className='absolute text-white px-12 py-8 bg-black my-20 mx-auto right-0 left-0 w-full md:w-3/12 text-center rounded-lg bg-opacity-80'
+        className='absolute text-white px-12 py-4 md:py-8 bg-black my-20 mx-auto right-0 left-0 w-[85%] md:w-1/3 text-center rounded-lg bg-opacity-80'
       >
-        <h1 className='font-bold text-3xl py-4 text-start'>
+        <h1 className='font-bold text-[26px] md:text-3xl py-3 md:py-4 text-start'>
           {isSignInForm ? "Sign In" : "Sign Up"}
         </h1>
 
         {!isSignInForm && (
           <input 
             type='text'
             placeholder='Full Name'
-            className='p-4 px-4 my-2 w-full bg-gray-700'
+            className='p-3 md:p-4 px-4 my-2 w-full bg-gray-700'
           />
         )}
 
         <input 
           ref = {email}
           type='email'
           placeholder='Email Address'
-          className='p-4 px-4 my-2 w-full bg-gray-700'
+          className='p-3 md:p-4 px-4 my-2 w-full bg-gray-700'
         />
 
         <input 
           ref = {password}
           type='password'
           placeholder='Enter Password'
-          className='p-4 px-4 my-2 w-full bg-gray-700'
+          className='p-3 md:p-4 px-4 my-2 w-full bg-gray-700'
         />
         <p className='text-red-500 font-bold text-lg py-2'>{errorMessage}</p>
         <button 
-         className='p-4 my-6 bg-red-700 w-full rounded-lg' onClick={handleButtonClick}>
+         className='p-3 md:p-4 my-3 md:my-6 bg-red-700 w-full rounded-lg' onClick={handleButtonClick}>
            {isSignInForm ? "Sign In" : "Sign Up"}
         </button>
-        <p className='py-4 text-start cursor-pointer' onClick={toggleSignIn}>
+        <p className='py-2 md:py-4 text-start cursor-pointer' onClick={toggleSignIn}>
           {isSignInForm ? "New to Netflix? Sign Up Now" : "Already registered? Sign In Now"}
         </p>
       </form>

src/componenets/SecondaryContainer.js

@@ -6,7 +6,7 @@ const SecondaryContainer = () => {
   const movies = useSelector((store) => store.movies);
   return (
     <div className='bg-black' >
-      <div className='mt-0 md:-mt-52 pl-4 md:pl-12 relative z-20 m-auto'>
+      <div className='mt-0 md:-mt-52 pl-3 md:pl-12 relative z-20 m-auto'>
          <MovieList title={"Now Playing"} movies={movies.nowPlayingMovies} />
          <MovieList title={"Popular Movies"} movies={movies.popularMovies} />
          <MovieList title={"Trending"} movies={movies.trendingMovies} />

src/componenets/GPTPageSearch.js → src/componenets/gpt/GPTPageSearch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import GPTSearchBar from './GPTSearchBar';
 import GptMovieSuggestion from './GptMovieSuggestions';
-import { BG_URL } from '../utils/constants';
+import { BG_URL } from '../../utils/constants';
 
 const GPTPageSearch = () => {
   return (

src/componenets/GPTSearchBar.js → src/componenets/gpt/GPTSearchBar.js

@@ -1,9 +1,9 @@
 import React, { useRef } from 'react';
-import lang from '../utils/languageConstants';
+import lang from '../../utils/languageConstants';
 import { useDispatch, useSelector } from 'react-redux';
-import openai from '../utils/openai';
-import { API_OPTIONS } from '../utils/constants';
-import { addGptMovieResult } from '../utils/gptSlice';
+import openai from '../../utils/openai';
+import { API_OPTIONS } from '../../utils/constants';
+import { addGptMovieResult } from '../../redux/slices/gptSlice';
 
 const GPTSearchBar = () => {
 

src/componenets/GptMovieSuggestions.js → src/componenets/gpt/GptMovieSuggestions.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import MovieList from "../componenets/MovieList";
+import MovieList from "../MovieList";
 
 const GptMovieSuggestions = () => {
 

src/hooks/useMovieTrailer.js

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { API_OPTIONS } from '../utils/constants';
-import { addTrailerVideo } from '../utils/moviesSlice';
+import { addTrailerVideo } from '../redux/slices/moviesSlice';
 import { useEffect } from 'react';
 
 const useMovieTrailer = (movieId) => {

src/hooks/useNowPlayingMovies.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { API_OPTIONS } from '../utils/constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { addNowPlayingMovies } from '../utils/moviesSlice';
+import { addNowPlayingMovies } from '../redux/slices/moviesSlice';
 
 const useNowPlayingMovies = () => {
     // Ftech data from TMDB API and update store

src/hooks/usePopularMovies.js

@@ -2,7 +2,7 @@
 import { useEffect } from 'react';
 import { API_OPTIONS } from '../utils/constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { addPopularMovies } from '../utils/moviesSlice';
+import { addPopularMovies } from '../redux/slices/moviesSlice';
 
 const usePopularMovies = () => {
     // Ftech data from TMDB API and update store

src/hooks/useTopRatedMovies.js

@@ -2,7 +2,7 @@
 import { useEffect } from 'react';
 import { API_OPTIONS } from '../utils/constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { addTopRatedMovies } from '../utils/moviesSlice';
+import { addTopRatedMovies } from '../redux/slices/moviesSlice';
 
 const useTopRatedMovies = () => {
     // Ftech data from TMDB API and update store

src/hooks/useTrendingMovies.js

@@ -2,7 +2,7 @@
 import { useEffect } from 'react';
 import { API_OPTIONS } from '../utils/constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { addTrendingMovies } from '../utils/moviesSlice';
+import { addTrendingMovies } from '../redux/slices/moviesSlice';
 
 const useTrendingMovies = () => {
     // Ftech data from TMDB API and update store

src/hooks/useUpcomingMovies.js

@@ -2,7 +2,7 @@
 import { useEffect } from 'react';
 import { API_OPTIONS } from '../utils/constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { addUpcomingMovies } from '../utils/moviesSlice';
+import { addUpcomingMovies } from '../redux/slices/moviesSlice';
 
 const useUpcomingMovies = () => {
     // Ftech data from TMDB API and update store

src/utils/appStore.js → src/redux/store/appStore.js

@@ -1,8 +1,8 @@
 import { configureStore } from "@reduxjs/toolkit";
-import userReducer from './userSlice';
-import moviesReducer from './moviesSlice';
-import gptReducer from './gptSlice';
-import configReducer from './configSlice';
+import userReducer from '../../redux/slices/userSlice';
+import moviesReducer from '../../redux/slices/moviesSlice';
+import gptReducer from '../../redux/slices/gptSlice';
+import configReducer from '../../redux/slices/configSlice';
 
 
 const appStore = configureStore({