fix: background on mobile layout

nnivxix · Sep 26, 2024 · cb400fc · cb400fc
1 parent 0aa718a
commit cb400fc
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/public/home-banner-vertical.jpg b/public/home-banner-vertical.jpg
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ export default function Footer() {
     <footer className="bg-gray-900 text-white  border-t-4 border-blue-600  mt-9">
       <div className=" max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-2">
         <div className="col-spans-1">
-          <h1 className="text-2xl font-bold mb-4">Vilm</h1>
+          <h1 className="text-2xl font-bold mb-4 italic">Vilm</h1>
           <p className="text-gray-400 mb-1 ">
             The Vilm website is a movie discovery platform featuring a modern
             design. Users can browse various movie titles and access detailed

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -7,7 +7,7 @@ export default function Navbar() {
     <div className="bg-gray-900">
       <nav className="flex max-w-6xl mx-auto h-16 items-center  justify-between px-3  bg-gray-900 text-white">
         <Link to="/" className="logo">
-          <h1 className="text-2xl md:text-4xl font-bold">Vilm</h1>
+          <h1 className="text-2xl md:text-4xl italic font-bold">Vilm</h1>
         </Link>
         <div className="flex gap-3 items-center">
           <DropdownMenu>

diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx
@@ -1,8 +1,11 @@
 import type { Response, MovieTv } from "../types/response";
 
 export default function Discover() {
-  const { data: movies } = useFetch<Response<MovieTv[]>>("/trending/all/day");
+  const { data: movies, isLoading } = useFetch<Response<MovieTv[]>>("/trending/all/day");
 
+  if (isLoading) {
+    return "Loading..."
+  }
   return (
     <div>
       <div className="grid lg:grid-cols-8 md:grid-cols-4 grid-cols-2 gap-5 mx-auto px-5 mt-5">

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -26,19 +26,19 @@ export default function Home() {
   };
 
   return (
-    <div className="bg-[url('/home-banner.jpg')] bg-center bg-cover" data-bg-src="https://www.pexels.com/photo/three-friends-watching-at-a-movie-theater-while-eating-popcorn-8263318/">
+    <div className="lg:bg-[url('/home-banner.jpg')] bg-[url('/home-banner-vertical.jpg')] bg-center bg-cover" data-bg-src="https://www.pexels.com/photo/three-friends-watching-at-a-movie-theater-while-eating-popcorn-8263318/">
       <div className="mx-auto max-w-4xl  px-5 mt-5">
         <div className="flex w-full lg:h-[63vh] h-[45vh] md:h-[56vh] justify-center flex-col gap-3 items-center">
           <div className="text-center">
-            <h1 className="text-3xl font-bold">VILM</h1>
+            <h1 className="text-3xl font-bold italic">Vilm</h1>
             <h2 className="text-xl font-bold">Explore what you next watch?</h2>
           </div>
-          <form onSubmit={handleSearch} className="w-1/2">
+          <form onSubmit={handleSearch} className="lg:w-1/2 w-full">
             <Input
               type="search"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="rounded-md py-5 w-full focus:outline-none focus:ring-2  focus:ring-gray-700 focus:border-transparent"
+              className="rounded-md py-5 w-full focus:outline-none focus:ring-2 focus:ring-gray-700 focus:border-transparent"
               aria-label="Search"
               placeholder="Search movies and tvs"
               style={{ backgroundColor: "#c4c4c430" }}
@@ -47,7 +47,7 @@ export default function Home() {
           <p>
             Or
           </p>
-          <Link to={'/discover'} className={`w-1/2 ${cn(buttonVariants({ variant: "default" }))}`}> Discover </Link>
+          <Link to={'/discover'} className={`lg:w-1/2 w-full ${cn(buttonVariants({ variant: "default" }))}`}> Discover </Link>
         </div>
       </div>
     </div>