Html – Custom cursor in Quarto

App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header/Header";
import Home from "./pages/Home/Home";
import MoviesList from "./components/MoviesList/MoviesList";
import MovieDetail from "./pages/MovieDetail/MovieDetail";

const App = () => {
  return (
    <div className="App">
      <Router>
        <Header />
        <Routes>
          <Route index element={<Home />}></Route>
          <Route path="movie/:id" element={<MovieDetail />}></Route>
          <Route path="movies/:type" element={<MoviesList />} />
          <Route path="/*" element={<h1>Not Found</h1>} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;


components/Card/Card.js
import React, { useEffect, useState } from "react";
import "./Card.css";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import { Link } from "react-router-dom";

const Card = ({ movie }) => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1500);
  }, []);

  return (
    <>
      {isLoading ? (
        <div className="cards">
          <SkeletonTheme color="#202020" highlightColor="#444">
            <Skeleton height={300} duration={2} />
          </SkeletonTheme>
        </div>
      ) : (
        <Link
          to={`/movie/${movie.id}`}
          style={{ textDecoration: "none", color: "white" }}
        >
          <div className="cards">
            <img
              className="cards_img"
              src={`https://image.tmdb.org/t/p/original${
                movie ? movie.poster_path : ""
              }`}
            />
            <div className="cards_overlay">
              <div className="card_title">
                {movie ? movie.original_title : ""}
              </div>
              <div className="card_runtime">
                {movie ? movie.release_date : ""}
                <span className="card_rating">
                  {movie ? movie.vote_average : ""}
                  <i className="fas fa-star" />
                </span>
              </div>
              <div className="card_description">
                {movie ? movie.overview.slice(0, 118) + "..." : ""}
              </div>
            </div>
          </div>
        </Link>
      )}
    </>
  );
};

export default Card;


Components/Card/Card.css

.cards {
    display: inline-block;
    transition: transform .2s;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 0.19rem;
    cursor:pointer;
    min-width:200px;
    height:300px;
    z-index:0;
    border: 1px solid rgb(99, 99, 99);
}

.cards:hover {
    transform: scale(1.2);
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.cards_img {
    height: 300px;
}

.cards_overlay {
    position: absolute;
    padding: 0 1rem 1rem 1rem;
    bottom: 0px;
    height: 290px;
    display: flex;
    flex-direction: column;
    width: 85%;
    justify-content: flex-end;
    background-image: linear-gradient(rgb(0,0,0,0), rgb(0,0,0,1));
    opacity: 0;
    transition: opacity .2s;
}   

.cards_overlay:hover {
    opacity: 1;
}

.card_title {
    font-weight: 900;
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.card_runtime {
    font-size: .75rem;
    margin-bottom: 0.25rem;
}

.card_rating {
    float: right;
}

.card_description {
    font-style: italic;
    font-size: .75rem;
    margin-bottom: 0.25rem;
}

components/Header/Header.js
import React from "react";
import "./Header.css";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div className="header">
      <div className="header-left">
        <Link to="/">
          <img
            className="header_icon"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/2560px-IMDB_Logo_2016.svg.png"
          />
        </Link>
        <Link to="/movies/popular" style={{ textDecoration: "none" }}>
          <span>Popular</span>
        </Link>
        <Link to="/movies/top_rated" style={{ textDecoration: "none" }}>
          <span>Top Rated</span>
        </Link>
        <Link to="/movies/upcoming" style={{ textDecoration: "none" }}>
          <span>Upcoming</span>
        </Link>
      </div>
    </div>
  );
};

export default Header;

components/Header/Header.css

.user_avatar{
    font-size: 2rem;
}

.header_icon{
    width: 80px;
    cursor: pointer;
}

a > span:hover{
    color:red;
}

a > span{
    margin: 0 30px;
    font-size: 1.3rem;
    cursor: pointer;
    color:white;
}

.header-left, .header-right{
    display: flex;
    align-items: center;

}

.header{
    margin: 0 2.5rem;
    padding : .5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

components/MoviesList/MoviesList.js
import React, { useEffect, useState } from "react";
import "./MoviesList.css";
import Card from "../Card/Card";
import { useParams } from "react-router-dom";

const API_KEY = "2c2230d49faab60eaa90ea7262ab135e";

const MoviesList = () => {
  const [movieList, setMovieList] = useState([]);
  const { type } = useParams();

  const getData = async () => {
    const endpoint = `https://api.themoviedb.org/3/movie/${
      type ? type : "popular"
    }?api_key=${API_KEY}&language=en-US`;

    try {
      const response = await fetch(endpoint);
      if (!response.ok) {
        throw new Error("Something went wrong");
      }
      const data = await response.json();
      setMovieList(data.results);
    } catch (error) {
      console.error("Error fetching data: ", error);
    }
  };

  useEffect(() => {
    getData();
  }, [type]);

  return (
    <div className="movie_list">
      <h2 className="list_title">{(type ? type : "POPULAR").toUpperCase()}</h2>
      <div className="list_cards">
        {movieList.map((movie) => (
          <Card movie={movie} />
        ))}
      </div>
    </div>
  );
};
export default MoviesList;


components/MoviesList/MoviesList.css
.movie_list {
    padding: 0 3rem 3rem 3rem;
}

.list_title {
font-size: 1.75rem;
margin:  2.5rem;
}

.list_cards {
    display: flex;
    flex-wrap: wrap ;
    justify-content: center;
}

pages/Home/Home.js
import React, { useEffect, useState } from "react";
import "./Home.css";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
import { Link } from "react-router-dom";
import MoviesList from "../../components/MoviesList/MoviesList";

const API_KEY = "2c2230d49faab60eaa90ea7262ab135e";
const API_POPULAR = "https://api.themoviedb.org/3/movie/popular";

const Home = () => {
  const [popularMovies, setPopularMovies] = useState([]);

  useEffect(() => {
    const fetchPopularMovies = async () => {
      try {
        const response = await fetch(`${API_POPULAR}?api_key=${API_KEY}`);
        const data = await response.json();
        setPopularMovies(data.results);
      } catch (error) {
        console.error("Error fetching popular movies:", error);
      }
    };

    fetchPopularMovies();
  }, []);

  return (
    <>
      <div className="poster">
        {/* <Carousel
          showThumbs={false}
          autoPlay={true}
          transitionTime={3}
          infiniteLoop={true}
          showStatus={false}
        >
          {popularMovies.map((movie) => (
            <Link
              style={{ textDecoration: "none", color: "white" }}
              to={`/movie/${movie.id}`}
            >
              <div className="poster_image">
                <img
                  src={`https://image.tmdb.org/t/p/original${
                    movie && movie.backdrop_path
                  }`}
                ></img>
              </div>
              <div className="poster_image_overlay">
                <div className="poster_image_overlay_title">
                  {movie && movie.title}
                </div>
                <div className="poster_image_overlay_runtime">
                  {movie && movie.release_date}
                  <span className="poster_image_overlay_rating">
                    {movie && movie.vote_average}
                    <i class="fas fa-star" />{" "}
                  </span>
                </div>
                <div className="poster_image_overlay_description">
                  {movie && movie.overview}
                </div>
              </div>
            </Link>
          ))}
        </Carousel> */}
        <MoviesList />
      </div>
    </>
  );
};

export default Home;


pages/Home/Home.css
.poster_image{
    height: 600px;
}

.poster_image > img {
    margin: auto;
    display: block;
    width: 100%;
}

.poster_image_overlay {
    position: absolute;
    padding: 5rem;
    bottom: 0px;
    height: 70%;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-start;
    background-image: linear-gradient(rgb(0,0,0,0), rgb(0,0,0,1));
    opacity: 1;
    transition: opacity .3s;
}   

.poster_image_overlay:hover {
    opacity: 1;
}

.poster_image_overlay_title {
    font-weight: 900;
    font-size: 4rem;
    margin-bottom: 0.4rem;
    text-align: left;
}

.poster_image_overlay_runtime {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.poster_image_overlay_rating {
    margin-left: 3rem;
}

.poster_image_overlay_description {
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    display: flex;
    text-align: left;
    width: 50%;
}

pages/MovieDetail/MovieDetail.js
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import "./MovieDetail.css";

const API_KEY = "2c2230d49faab60eaa90ea7262ab135e";
const START_ENDPOINT = "https://api.themoviedb.org/3/movie/";

const MovieDetail = () => {
  const [movie, setMovie] = useState(null);
  const { id } = useParams();
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMovieDetails = async () => {
      try {
        const response = await fetch(
          `${START_ENDPOINT}${id}?api_key=${API_KEY}&language=en-US`
        );
        if (!response.ok) throw new Error("Failed to fetch movie details");
        const data = await response.json();
        setMovie(data);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchMovieDetails();
  }, [id]);

  if (error) return <div className="movie">{error}</div>;
  if (!movie) return <div className="movie">Loading...</div>;

  return (
    <div className="movie">
      <div className="movie__intro">
        <img
          src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`}
          alt="Backdrop"
        />
      </div>
      <img
        className="movie__poster"
        src={`https://image.tmdb.org/t/p/original${movie.poster_path}`}
        alt="Poster"
      />
      <div className="movie__info">
        <h1 className="movie__title">{movie.original_title}</h1>
        <p className="movie__tagline">{movie.tagline}</p>
        <p className="movie__details">
          {movie.runtime} mins | Release Date: {movie.release_date}
        </p>
        <div className="movie__genres">
          {movie.genres.map((genre) => (
            <span key={genre.id} className="movie__genre">
              {genre.name}
            </span>
          ))}
        </div>
        <p className="movie__overview">{movie.overview}</p>
        <div className="movie__links">
          {movie.homepage && (
            <a href={movie.homepage} target="_blank" rel="noreferrer">
              Official Site
            </a>
          )}
          {movie.imdb_id && (
            <a
              href={`https://www.imdb.com/title/${movie.imdb_id}`}
              target="_blank"
              rel="noreferrer"
            >
              IMDb Page
            </a>
          )}
        </div>
      </div>
      <div className="movie__production">
        {movie.production_companies.map(
          (company) =>
            company.logo_path && (
              <img
                key={company.id}
                src={`https://image.tmdb.org/t/p/original${company.logo_path}`}
                alt={company.name}
                title={company.name}
              />
            )
        )}
      </div>
    </div>
  );
};

export default MovieDetail;


pages/MovieDetail/MovieDetail.css

.movie {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #1c1c1c;
    color: white;
    font-family: Arial, sans-serif;
}

.movie__intro img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 1px 2px #4b4b4b;
}

.movie__poster {
    width: 200px;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 0 1px 2px #4b4b4b;
}

.movie__info {
    text-align: center;
    max-width: 600px;
}

.movie__title {
    font-size: 2rem;
    font-weight: bold;
    margin: 10px 0;
}

.movie__tagline {
    font-size: 1.2rem;
    font-style: italic;
    color: #ccc;
}

.movie__details {
    margin: 10px 0;
    font-size: 0.9rem;
    color: #aaa;
}

.movie__genres {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.movie__genre {
    padding: 5px 10px;
    background-color: #333;
    border-radius: 20px;
    font-size: 0.8rem;
    color: white;
}

.movie__overview {
    font-size: 1rem;
    line-height: 1.5;
    margin: 20px 0;
}

.movie__links a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f3ce13;
    border-radius: 5px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    margin: 10px;
}

.movie__links a:hover {
    background-color: #e0ba0f;
}

.movie__production img {
    width: 100px;
    margin: 10px;
    border-radius: 5px;
}