1 files changed, 78 insertions, 14 deletions

diff --git a/src/app/page.jsx b/src/app/page.jsx
index 3827c56..7c8b209 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,18 +1,36 @@
-import { Card, CardBody } from "@nextui-org/react";
+import {
+	Card,
+	CardBody,
+	CardFooter,
+	Button,
+	CardHeader,
+	Divider,
+} from "@nextui-org/react";
+import Image from "next/image";
 import Link from "next/link";
 
 export default async function Home() {
-	const homePageCards = (title) => {
+	const homePageCards = (title, image) => {
 		return (
-			<Link href={`/${title}`} className="focus:scale(90) mb-2 lg:mx-1">
+			<Link href={`/${title}`} className="lg:mx-1 mt-2">
 				<Card
+					className="w-40 bg-stone-900"
 					isPressable
-					shadow="sm"
 					isHoverable
-					className="bg-[#1f1f1f] border border-zinc-500"
+					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-xl lg:text-2xl">{title}</p>
+						<p className="text-center">{title}</p>
 					</CardBody>
 				</Card>
 			</Link>
@@ -20,14 +38,60 @@ export default async function Home() {
 	};
 
 	return (
-		<main>
-			<section className="flex h-[90dvh] w-screen flex-col items-center justify-center lg:flex-row">
-				{homePageCards("anime")}
-				{homePageCards("movies")}
-				{homePageCards("kdrama")}
-				{homePageCards("manga")}
-				{homePageCards("web-series")}
-			</section>
+		<main className="lg:w-7/12 m-auto">
+			<div className="text-center mt-2">
+				<p className="text-md text-gray-500">Welcome to</p>
+				<br />
+				<p className="mt-[-1.8rem] text-4xl">Dramalama</p>
+				<p className="mt-1 text-sm text-neutral-500">
+					Dramalama is a platform which lets you stream your favourite
+					content for free.
+				</p>
+			</div>
+
+			{/* <div>
+				<section className="mt-2 bg-neutral-800 w-40 rounded-md p-1">
+					<Image
+						src="/todoroki.jpg"
+						alt="anime image"
+						width={200}
+						height={200}
+						className="rounded-t-md"
+					/>
+					<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")}
+			</div>
+
+			<div className="flex items-center justify-center mt-2">
+				<Button
+					as={Link}
+					color="default"
+					href="/kdrama"
+					className="mx-1"
+				>
+					Kdramas
+				</Button>{" "}
+				<Button
+					as={Link}
+					color="default"
+					href="/movies"
+					className="mx-1"
+				>
+					Movies
+				</Button>
+				<Button
+					as={Link}
+					color="default"
+					href="/web-series"
+					className="mx-1"
+				>
+					Web-Series
+				</Button>
+			</div>
 		</main>
 	);
 }