home page conflict fixed

.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

package.json

@@ -20,25 +20,22 @@
     "@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",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "react-router-dom": "^6.25.1",
-    "react-slick": "^0.30.2",
     "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",

src/App.css

@@ -13,7 +13,7 @@
 
 html,
 body {
-  @apply h-full w-full 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/ActionMovies.tsx

@@ -0,0 +1,22 @@
+import { movieData } from "./SampleData";
+
+function ActionMovies() {
+  return (
+    <div className="">
+      <h2 className="m-0 ml-4">Actions</h2>
+      <div className="flex overflow-y-hidden overflow-x-scroll">
+        {movieData.map((item, i) => (
+          <div key={i} className="h-48 min-w-28 rounded-xl p-4">
+            <img
+              src={item.img}
+              alt={`Movie ${i}`}
+              className="m-0 h-full w-full rounded-md object-cover object-center"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ActionMovies;

src/components/Home/AdventureMovie.tsx

@@ -0,0 +1,21 @@
+import { movieData } from "./SampleData";
+function AdventureMovie() {
+  return (
+    <div>
+      <h2 className="m-0 ml-4">Adventure</h2>
+      <div className="flex overflow-y-hidden overflow-x-scroll">
+        {movieData.map((item, i) => (
+          <div key={i} className="h-48 min-w-28 rounded-xl p-4">
+            <img
+              src={item.img}
+              alt={`Movie ${i}`}
+              className="m-0 h-full w-full rounded-md object-cover object-center"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default AdventureMovie;

src/components/Home/ComedyMovie.tsx

@@ -0,0 +1,21 @@
+import { movieData } from "./SampleData";
+function ComedyMovie() {
+  return (
+    <div>
+      <h2 className="m-0 ml-4">Comedy</h2>
+      <div className="flex overflow-y-hidden overflow-x-scroll">
+        {movieData.map((item, i) => (
+          <div key={i} className="h-48 min-w-28 rounded-xl p-4">
+            <img
+              src={item.img}
+              alt={`Movie ${i}`}
+              className="m-0 h-full w-full rounded-md object-cover object-center"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ComedyMovie;