completed Home page

.env.sample

@@ -0,0 +1 @@
+VITE_TMDB_API_KEY=sample

README.md

@@ -17,14 +17,17 @@ If you are developing a production application, we recommend updating the config
 export default {
   // other rules...
   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json", "./tsconfig.app.json"],
     tsconfigRootDir: __dirname,
   },
-}
+};
 ```
 
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+https://github.com/creativetimofficial/material-tailwind/issues/528
+https://github.com/creativetimofficial/material-tailwind/issues/427

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/jpg" href="/images/m-logo-dark.jpg" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
     />
     <title>Movieflix</title>
 

package.json

@@ -20,7 +20,6 @@
     "@capacitor/app": "^6.0.0",
     "@capacitor/core": "^6.1.1",
     "@material-tailwind/react": "^2.1.9",
-    "@splidejs/react-splide": "^0.7.12",
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
     "@uidotdev/usehooks": "^2.4.1",
@@ -29,22 +28,20 @@
     "react-hook-form": "^7.52.1",
     "react-router-dom": "^6.25.1",
     "react-transition-group": "^4.4.5",
-    "slick-carousel": "^1.8.1",
     "xior": "^0.5.5"
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "^6.1.1",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/eslint-plugin-query": "^5.51.12",
-    "@types/react": "^18.3.3",
+    "@types/react": "18.2.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.10",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
-    "daisyui": "^4.12.10",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",

src/App.css

@@ -7,13 +7,17 @@
   /* border: 1px solid red !important; */
 }
 
+* :focus-visible {
+  outline: red solid 3px;
+}
+
 *::-webkit-scrollbar {
   display: none; /* Safari and Chrome  hide scrollbar */
 }
 
 html,
 body {
-  @apply h-full w-full overflow-hidden bg-base-100;
+  @apply bg-base-100;
 }
 
 .page {

src/components/GettingStarted/BottomSheet.tsx

@@ -1,10 +1,6 @@
-import { Button } from "@material-tailwind/react";
-import { Options, Splide, SplideSlide } from "@splidejs/react-splide";
+import { Button, Carousel } from "@material-tailwind/react";
 import { Link } from "react-router-dom";
 
-import "@splidejs/react-splide/css";
-import "@splidejs/react-splide/css/core";
-
 const title = (
   <>
     Bring <span className="text-primary">Free</span> streaming to <br />
@@ -16,39 +12,42 @@ const features = [
   "Movieflix Original content production investment in creating high-quality series and movies trailer.",
   "Multiple Device Access Availabilty on smartphones,tablet,smart TVs etc.",
 ];
-const splideOptions: Options = {
-  perPage: 1,
-  arrows: false,
-  classes: {
-    pagination: "splide__pagination relative my-1",
-  },
-  type: "loop",
-  autoplay: "pause",
-};
 
 export default function BottomSheet() {
   return (
     <div className="absolute bottom-0 left-0 z-10 grid w-full place-content-center p-3 shadow-sm">
       <div className="w-full min-w-0 max-w-md rounded-3xl bg-accent p-6 text-center">
         <h2 className="my-0">{title}</h2>
 
-        <Splide options={splideOptions} aria-label="Features of Movieflix">
+        <Carousel
+          autoplay
+          aria-label="Features of Movieflix"
+          prevArrow={() => <></>}
+          nextArrow={() => <></>}
+          className="h-auto"
+          navigation={({ setActiveIndex, activeIndex, length }) => (
+            <div className="absolute bottom-3 left-2/4 z-50 flex -translate-x-2/4 gap-2">
+              {new Array(length).fill("").map((_, i) => (
+                <span
+                  key={i}
+                  className={`block h-1 cursor-pointer rounded-2xl transition-all content-[''] ${
+                    activeIndex === i ? "w-8 bg-white" : "w-4 bg-white/50"
+                  }`}
+                  onClick={() => setActiveIndex(i)}
+                />
+              ))}
+            </div>
+          )}
+        >
           {features.map((feat, i) => (
-            <SplideSlide data-splide-interval="1000" key={i}>
-              <p className="mt-1">{feat}</p>
-            </SplideSlide>
+            <p key={i} className="mt-1">
+              {feat}
+            </p>
           ))}
-        </Splide>
+        </Carousel>
 
         <Link to="/login">
-          <Button
-            className="w-full"
-            placeholder={undefined}
-            onPointerEnterCapture={undefined}
-            onPointerLeaveCapture={undefined}
-          >
-            Get Started
-          </Button>
+          <Button className="w-full">Get Started</Button>
         </Link>
       </div>
     </div>

src/components/Home/CardsList.tsx

@@ -0,0 +1,57 @@
+import { IconButton } from "@material-tailwind/react";
+import { useCallback, useRef } from "react";
+
+type Props = {
+  title: string;
+};
+
+export default function CardsList({ title }: Props) {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const scrollBy = useCallback(
+    (to: "left" | "right") => {
+      scrollableRef.current?.scrollBy({
+        left: to == "right" ? 250 : -250,
+        behavior: "smooth",
+      });
+    },
+    [scrollableRef],
+  );
+
+  return (
+    <div className="prose prose-invert relative max-w-none overflow-visible">
+      <h3 className="relative mx-4 my-1 font-medium xl:mx-6">{title}</h3>
+
+      <div
+        ref={scrollableRef}
+        className="flex gap-3 overflow-y-hidden overflow-x-scroll px-4 xl:px-6"
+      >
+        {[...Array(12)].map((_, i) => (
+          <div
+            key={i}
+            className="aspect-3/4 min-w-28 cursor-pointer overflow-clip rounded-xl border-2 border-transparent bg-accent bg-cover bg-center bg-no-repeat duration-200 hover:border-primary active:scale-95 active:border-primary sm:min-w-32 md:aspect-video md:min-w-52 lg:min-w-56 xl:min-w-60 2xl:max-w-80"
+            style={{
+              backgroundImage: `url('https://picsum.photos/300/200?id=${i}')`,
+            }}
+          ></div>
+        ))}
+      </div>
+
+      <div className="absolute bottom-0 right-4 hidden translate-y-1/3 gap-2 md:flex">
+        <IconButton
+          size="sm"
+          className="bg-accent"
+          onClick={() => scrollBy("left")}
+        >
+          <i className="eva eva-arrow-ios-back text-3xl" />
+        </IconButton>
+        <IconButton
+          size="sm"
+          className="bg-accent"
+          onClick={() => scrollBy("right")}
+        >
+          <i className="eva eva-arrow-ios-forward text-3xl" />
+        </IconButton>
+      </div>
+    </div>
+  );
+}