2 files changed, 55 insertions, 0 deletions
diff --git a/components/manga/info/mobile/mobileButton.js b/components/manga/info/mobile/mobileButton.js
new file mode 100644
index 0000000..0016b59
--- /dev/null
+++ b/components/manga/info/mobile/mobileButton.js
@@ -0,0 +1,39 @@
+import Link from "next/link";
+import AniList from "../../../media/aniList";
+import { BookOpenIcon } from "@heroicons/react/24/outline";
+
+export default function MobileButton({ info, firstEp, saveManga }) {
+  return (
+    <div className="md:hidden flex items-center gap-4 w-full pb-3">
+      <button
+        disabled={!firstEp}
+        onClick={saveManga}
+        className={`${
+          !firstEp
+            ? "pointer-events-none text-white/50 bg-secondary/50"
+            : "bg-secondary text-white"
+        } lg:w-full font-bold shadow-md shadow-secondary hover:bg-secondary/90 hover:text-white/50 rounded`}
+      >
+        <Link
+          href={`/en/manga/read/${firstEp?.providerId}?id=${
+            info.id
+          }&chapterId=${encodeURIComponent(
+            firstEp?.chapters[firstEp.chapters.length - 1].id
+          )}`}
+          className="flex items-center text-xs font-karla gap-2 h-[30px] px-2"
+        >
+          <h1>Read Now</h1>
+          <BookOpenIcon className="w-4 h-4" />
+        </Link>
+      </button>
+      <Link
+        href={`https://anilist.co/manga/${info.id}`}
+        className="flex-center rounded bg-secondary shadow-md shadow-secondary h-[30px] lg:px-4 px-2"
+      >
+        <div className="flex-center w-5 h-5">
+          <AniList />
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/components/manga/info/mobile/topMobile.js b/components/manga/info/mobile/topMobile.js
new file mode 100644
index 0000000..2e6b23a
--- /dev/null
+++ b/components/manga/info/mobile/topMobile.js
@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+export default function TopMobile({ info }) {
+  return (
+    <div className="md:hidden">
+      <Image
+        src={info.coverImage}
+        width={500}
+        height={500}
+        alt="cover image"
+        className="md:hidden absolute top-0 left-0 -translate-y-24 w-full h-[30rem] object-cover rounded-sm shadow-lg brightness-75"
+      />
+      <div className="absolute top-0 left-0 w-full -translate-y-24 h-[32rem] bg-gradient-to-t from-primary to-transparent from-50%"></div>
+    </div>
+  );
+}