Merge pull request #479 from sujeet9682/fix/addingMoviePage

Added a movie Page that was missing in application

src/App.js

@@ -18,6 +18,7 @@ import SportsActivitiesPage from "./components/SportsActivitiesPage";
 import SportDetails from "./components/SportsDetails";
 import GiftCard from "./components/GiftCard";
 import PlaysPage from "./components/PlaysPage";
+import MoviePage from "./components/MoviePage";
 
 
 function App() {
@@ -41,6 +42,7 @@ function App() {
 					/>
 					 <Route path="/password-recovery" element={<PasswordRecovery />} />
 
+					<Route path="/movies" element={<MoviePage />} />
 					<Route path="/movies/:id" element={<MovieDetails />} />
 					<Route path="/about-us" element={<AboutUs />} />
 					<Route path="/offers" element={<Offers/>}/>

src/components/MovieImageSlider.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import image3 from '../assets/images/download3.png';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import '../assets/styles/ImageSlider.css'; 
+
+const ImageWithNoEffect = ({ imageSrc, altText }) => {
+  return (
+    <div style={{ display: 'inline-block' }}>
+      <img
+        src={imageSrc}
+        alt={altText}
+        style={{
+          width: '100%',
+          height: 'auto',
+          borderRadius: '10px',
+        }}
+      />
+    </div>
+  );
+};
+
+const MovieImageSlider = () => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    centerMode: true,
+    centerPadding: '10%', 
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    arrows: true, 
+    prevArrow: <CustomPrevArrow />, 
+    nextArrow: <CustomNextArrow />,
+  };
+
+  return (
+    <div className="slider-container xl:pt-0 pt-6">
+      <Slider {...settings}>
+        <div>
+          <ImageWithNoEffect imageSrc={image3} altText="Image 1" />
+        </div>
+        <div>
+          <ImageWithNoEffect imageSrc={image3} altText="Image 2" />
+        </div>
+        <div>
+          <ImageWithNoEffect imageSrc={image3} altText="Image 3" />
+        </div>
+      </Slider>
+    </div>
+  );
+};
+
+const CustomPrevArrow = ({ onClick }) => {
+  return (
+    <div className="custom-arrow custom-prev" onClick={onClick}>
+      &#9664;
+    </div>
+  );
+};
+
+const CustomNextArrow = ({ onClick }) => {
+  return (
+    <div className="custom-arrow custom-next" onClick={onClick}>
+      &#9654;
+    </div>
+  );
+};
+
+export default MovieImageSlider;

src/components/MoviePage.js

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react'
+import Header from './Header'
+import Chatbot from '../chatbot'
+import Heading from './heading'
+import Loader from './Loader'
+import Footer from './Footer'
+import MovieImageSlider from './MovieImageSlider'
+import Movie from './Movie';
+import '../assets/styles/MovieList.css';
+
+import poster1 from '../assets/images/poster1.jpg';
+import poster2 from '../assets/images/poster2.jpg';
+import poster3 from '../assets/images/poster3.jpg';
+import poster4 from '../assets/images/poster4.jpg';
+import poster5 from '../assets/images/poster5.jpg';
+
+function MovieList({ searchTerm }) {
+    const movies = [
+        {
+            id: 1,
+            poster: poster1,
+            title: 'Hindustani 2',
+            description: 'A gripping action-drama with thrilling moments.',
+            rating: 5.7,
+            votes: '3.9K',
+            genre: 'Action/Drama/Thriller'
+        },
+        {
+            id: 2,
+            poster: poster2,
+            title: 'Kalki 2898 AD',
+            description: 'A sci-fi thriller set in the future.',
+            rating: 8.7,
+            votes: '630.2K',
+            genre: 'Action/Sci-Fi/Thriller'
+        },
+        {
+            id: 3,
+            poster: poster3,
+            title: 'Deadpool & Wolverine',
+            description: 'Action-packed adventure with comedic twists.',
+            rating: 8.9,
+            votes: '268.9K',
+            genre: 'Action/Adventure/Comedy'
+        },
+        {
+            id: 4,
+            poster: poster4,
+            title: 'Sarfira',
+            description: 'A biographical drama of a brave soul.',
+            rating: 8.9,
+            votes: '7.5K',
+            genre: 'Biography/Drama'
+        },
+        {
+            id: 5,
+            poster: poster5,
+            title: 'Kill',
+            description: 'An intense action-thriller that keeps you on edge.',
+            rating: 9.0,
+            votes: '24.7K',
+            genre: 'Action/Thriller'
+        },
+    ];
+
+    const filteredMovies = movies.filter(movie =>
+        movie.title.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return (
+
+        <div className="movie-list lg:mt-0 mt-[-100px]">
+            {filteredMovies.map((movie, index) => (
+                <Movie
+                    key={index}
+                    id={movie.id}
+                    poster={movie.poster}
+                    title={movie.title}
+                    rating={movie.rating}
+                    votes={movie.votes}
+                    genre={movie.genre}
+                />
+            ))}
+        </div>
+    );
+}
+
+const MoviePage = () => {
+    const [loading, setLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState("");
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+        return () => clearTimeout(timer);
+    }, []);
+
+    if (loading) {
+        return <Loader loading={loading} />;
+    }
+    return (
+        <div>
+            <Header onSearch={setSearchTerm} />
+            <Chatbot />
+            <Heading />
+            <MovieImageSlider />
+            <MovieList searchTerm={searchTerm} />
+            <Footer />
+        </div>
+    )
+}
+
+export default MoviePage