app/creator/(home)/page.tsx

@@ -1,7 +1,17 @@
-export default function CreatorPage() {
-    return (
-        <div className="text-black">
-            <h1>Creator</h1>
-        </div>
-    )
-}
+import { Home_Banner } from "@/components/Home_Banner";
+import Recent_Creation from "@/components/Recent_Creation";
+
+
+const CreatorPage: React.FC = () => {
+  return (
+    <div className="w-full h-[80vh] flex flex-col items-center justify-start bg-[#F3F3F3]">
+      <Home_Banner />
+      <Recent_Creation />
+    </div>
+  );
+};
+
+
+
+
+export default CreatorPage;

app/globals.css

@@ -123,6 +123,172 @@
 }
 
 
+.hero_img {
+  background-color: #010313D9;
+  background-image: url("/images/89f1cacd4041e59eb162ffcb0f8080dc179fe415.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  background-blend-mode: multiply;
+  height: 170px;
+  width: 1045px;
+  border-radius: 10px;
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.hero_text {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: #ffffff;
+  width: 476px;
+  text-align: left;
+}
+
+.hero_text h3 {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 30px;
+  font-family: sans-serif;
+  margin: 0;
+}
+
+.hero_text p {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 21px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.hero_img {
+  background-color: #010313D9;
+  background-image: url("/images/89f1cacd4041e59eb162ffcb0f8080dc179fe415.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  background-blend-mode: multiply;
+  height: 170px;
+  width: 100%;
+  border-radius: 10px;
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.hero_text {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: #ffffff;
+  width: 476px;
+  text-align: left;
+}
+
+.hero_text h3 {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 30px;
+  font-family: sans-serif;
+  margin: 0;
+}
+
+.hero_text p {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 21px;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+}
+
+.hero_text button {
+  background-color: #ffffff;
+  color: #010313;
+  border: none;
+  border-radius: 5px;
+  width: 146.04px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.hero_cards {
+  display: flex;
+  gap: 20px;
+}
+
+.card_1 {
+  background-image: url("/images/37934e37222a44601017b84963a414627d8e095f.png");
+  background-size: cover;
+  background-position: center center;
+  width: 91px;
+  height: 130px;
+  border-radius: 2px;
+}
+
+.card_2 {
+  background-image: url("/images/230f1945d640ae4c0325f23dcb3365b59ae08277.png");
+  background-size: cover;
+  background-position: center center;
+  width: 91px;
+  height: 130px;
+  border-radius: 2px;
+}
+
+.card_3 {
+  background-image: url("/images/baca21cebac9b0ae0463e371575f760ea5e79016.png");
+  background-size: cover;
+  background-position: center center;
+  width: 91px;
+  height: 130px;
+  border-radius: 2px;
+}
+
+.recent_container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 237px;
+  margin-top: 30px;
+}
+
+.recent_title {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.recent_icon {
+  cursor: pointer;
+  border: 1px solid #868585;
+  padding: 5px;
+  border-radius: 5px;
+  font-size: 30px;
+}
+
+.recent_card {
+  width: 100%;
+  height: 150px;
+  background-color: #ffffff;
+  border-radius: 10px;
+}
+.card_img {
+  width: 145px;
+  height: 110px;
+  border-radius: 5px;
+}
+
+
 /* custom css */
 
 .no-scrollbar::-webkit-scrollbar {

components/Home_Banner.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export const Home_Banner: React.FC = () => {
+  return (
+    <div className="hero_img">
+      <div className="hero_text">
+        <h3>Bring Your Story to Life</h3>
+        <p>
+          Start creating your own ebook today — share your voice, inspire
+          readers, and publish to the world in just a few clicks.
+        </p>
+        <button>Create an ebook</button>
+      </div>
+      <div className="hero_cards">
+        <div className="card_1"></div>
+        <div className="card_2"></div>
+        <div className="card_3"></div>
+      </div>
+    </div>
+  );
+};

components/Recent_Card.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import React from "react";
+
+interface RecentCardProps {
+  image: string;
+  title: string;
+  tag: string;
+  description: string;
+}
+
+const Recent_Card: React.FC<RecentCardProps> = ({ image, title, tag, description }) => {
+  return (
+    <div className="flex flex-col justify-start items-start">
+      <div className="recent_card flex justify-center items-center">
+        <Image
+          src={image}
+          alt="image"
+          className="card_img"
+          width={100}
+          height={100}
+        />
+      </div>
+      <h3 className="text-[14px] font-[400] text-slate-900">{title}</h3>
+      <p className="text-[10px] font-[400] text-slate-400">
+        {tag} <span> {description}</span>
+      </p>
+    </div>
+  );
+};
+
+export default Recent_Card;

components/Recent_Creation.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import React from "react";
+import { FaSlidersH } from "react-icons/fa";
+import Recent_Card from "./Recent_Card";
+
+const Recent_Creation: React.FC = () => {
+  return (
+    <div className="recent_container">
+      <div className="recent_title">
+        <h3 className="text-[16px] font-[700]">Recent creations</h3>
+        <FaSlidersH className="text-[20px] recent_icon" />
+      </div>
+      <div className="grid sm:grid-cols-2 md:grid-cols-5 gap-4 mt-2">
+        <Recent_Card
+          image="/images/aa31529b95af9b43380b88b11692b0a6f7999878.png"
+          title="Good morning Gabe Hager!"
+          tag="Ebook"
+          description="Edited 13 mins ago"
+        />
+        <Recent_Card
+          image="/images/d5d8f9fe19a7aed7bf6545a64634eeb37a6b895a.png"
+          title="Story of my life (Story by Lak..."
+          tag="Ebook"
+          description="Edited 5 hours ago"
+        />
+        <Recent_Card
+          image="/images/d3cf3b09c1fd3dc0d6a997a7a479337fdf8caa69.png"
+          title="Good morning Gabe Hager!"
+          tag="Ebook"
+          description="Edited 10 mins ago"
+        />
+        <Recent_Card
+          image="/images/96c1b745b59fe1512c73f653d7b5e7be3ee54e58.png"
+          title="A fantastic saga, the super..."
+          tag="Ebook"
+          description="Edited 1 month ago"
+        />
+        <Recent_Card
+          image="/images/292c2c8f2ea3276c44dc6ade84e687b9cae3d267.png"
+          title="Good morning Gabe Hager!"
+          tag="Ebook"
+          description="Edited 20 hours ago"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Recent_Creation;