2 files changed, 46 insertions, 60 deletions
diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx
index 6bb362a..2a4bc8d 100644
--- a/src/app/components/header/header.jsx
+++ b/src/app/components/header/header.jsx
@@ -14,11 +14,19 @@ import {
 	DropdownSection,
 	DropdownItem,
 } from "@nextui-org/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 
 export default function Header() {
-	const sections = ["anime", "kdrama", "movies", "web-series", "manga"];
-	const [currentPage, setCurrentPage] = useState("Homepage");
+	const path = usePathname();
+	const sections = ["anime", "kdrama", "movies", "web-series"];
+	const [currentPage, setCurrentPage] = useState("");
+
+	useEffect(() => {
+		setCurrentPage(
+			path.split("/")[1] !== "" ? path.split("/")[1] : "Homepage"
+		);
+	}, [path]);
 
 	return (
 		<Navbar isBordered>
@@ -36,7 +44,7 @@ export default function Header() {
 					</DropdownTrigger>
 					<DropdownMenu aria-label="Static Actions">
 						{sections &&
-							sections.slice(0, 4).map((item, index) => (
+							sections.map((item, index) => (
 								<DropdownItem
 									as={Link}
 									href={`/${item}`}
@@ -48,21 +56,18 @@ export default function Header() {
 							))}
 					</DropdownMenu>
 				</Dropdown>
-				{sections &&
-					sections.slice(-1).map((item, index) => (
-						<NavbarItem key={index}>
-							<Button
-								as={Link}
-								href={`/${item}`}
-								size="sm"
-								color="success"
-								variant="faded"
-								onClick={() => setCurrentPage(item)}
-							>
-								{item}
-							</Button>
-						</NavbarItem>
-					))}
+				<NavbarItem>
+					<Button
+						as={Link}
+						href={"https://mangathingy.netlify.app"}
+						size="sm"
+						color="success"
+						variant="faded"
+						target="_blank"
+					>
+						Manga
+					</Button>
+				</NavbarItem>
 			</NavbarContent>
 			<NavbarContent justify="end">
 				<NavbarItem>
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 7c8b209..16d447d 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -10,36 +10,9 @@ import Image from "next/image";
 import Link from "next/link";
 
 export default async function Home() {
-	const homePageCards = (title, image) => {
-		return (
-			<Link href={`/${title}`} className="lg:mx-1 mt-2">
-				<Card
-					className="w-40 bg-stone-900"
-					isPressable
-					isHoverable
-					shadow="sm"
-				>
-					<CardHeader>
-						<Image
-							src={`/${image}`}
-							alt="anime image"
-							width={200}
-							height={200}
-							className="rounded-t-md w-full h-36"
-						/>
-					</CardHeader>
-					<Divider />
-					<CardBody>
-						<p className="text-center">{title}</p>
-					</CardBody>
-				</Card>
-			</Link>
-		);
-	};
-
 	return (
-		<main className="lg:w-7/12 m-auto">
-			<div className="text-center mt-2">
+		<main className="lg:w-7/12 m-auto max-h-[75dvh] h-screen flex flex-col items-center justify-center">
+			<div className="text-center my-2">
 				<p className="text-md text-gray-500">Welcome to</p>
 				<br />
 				<p className="mt-[-1.8rem] text-4xl">Dramalama</p>
@@ -49,21 +22,29 @@ export default async function Home() {
 				</p>
 			</div>
 
-			{/* <div>
-				<section className="mt-2 bg-neutral-800 w-40 rounded-md p-1">
+			<div className="flex items-center flex-col justify-center lg:flex-row my-2">
+				<Card isFooterBlurred radius="lg" className="border-none">
 					<Image
-						src="/todoroki.jpg"
-						alt="anime image"
-						width={200}
+						alt="Woman listing to music"
+						className="object-cover"
 						height={200}
-						className="rounded-t-md"
+						src="/todoroki.jpg"
+						width={180}
 					/>
-					<p className="text-center">Anime</p>
-				</section>
-			</div> */}
-			<div className="flex items-center flex-col justify-center lg:flex-row">
-				{homePageCards("anime", "todoroki.jpg")}
-				{homePageCards("manga", "manga.jpg")}
+					<CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+						<Button
+							className="text-tiny text-white bg-black/50 w-full"
+							variant="flat"
+							color="default"
+							radius="lg"
+							size="sm"
+							as={Link}
+							href="/anime"
+						>
+							Anime
+						</Button>
+					</CardFooter>
+				</Card>
 			</div>
 
 			<div className="flex items-center justify-center mt-2">