Home page banner and Recent creation cards done

app/components/Home_Banner.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const Home_Banner = () => {
+  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>
+  )
+}

app/components/Recent_Card.tsx

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

app/components/Recent_Creation.tsx

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import React from "react";
+import { FaSlidersH } from "react-icons/fa";
+import Recent_Card from "./Recent_Card";
+import { title } from "process";
+
+const Recent_Creation = () => {
+  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-6 md:grid-cols-5 gap-5 mt-2">
+        <Recent_Card
+          image={"/assets/aa31529b95af9b43380b88b11692b0a6f7999878.png"}
+          title={"Good morning Gabe Hager!"}
+          tag={"Ebook"}
+          description={"Edited 13 mins ago"}
+        />
+        <Recent_Card
+          image={"/assets/d5d8f9fe19a7aed7bf6545a64634eeb37a6b895a.png"}
+          title={"Story of my life (Story by Lak..."}
+          tag={"Ebook"}
+          description={"Edited 5 hours ago"}
+        />
+        <Recent_Card
+          image={"/assets/d3cf3b09c1fd3dc0d6a997a7a479337fdf8caa69.png"}
+          title={"Good morning Gabe Hager!"}
+          tag={"Ebook"}
+          description={"Edited 10 mins ago"}
+        />
+        <Recent_Card
+          image={"/assets/96c1b745b59fe1512c73f653d7b5e7be3ee54e58.png"}
+          title={"A fantastic saga, the super..."}
+          tag={"Ebook"}	
+          description={"Edited 1 month ago"}
+        />
+        <Recent_Card
+          image={"/assets/292c2c8f2ea3276c44dc6ade84e687b9cae3d267.png"}
+          title={"Good morning Gabe Hager!"}
+          tag={"Ebook"}
+          description={"Edited 20 hours ago"}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Recent_Creation;

app/globals.css

@@ -24,3 +24,126 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.hero_img {
+  background-color: #010313D9;
+  background-image: url("/assets/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;
+  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("/assets/37934e37222a44601017b84963a414627d8e095f.png");
+  background-size: cover;
+  background-position: center center;
+  width: 91px;
+  height: 130px;
+  border-radius: 2px;
+}
+
+.card_2 {
+  background-image: url("/assets/230f1945d640ae4c0325f23dcb3365b59ae08277.png");
+  background-size: cover;
+  background-position: center center;
+  width: 91px;
+  height: 130px;
+  border-radius: 2px;
+}
+
+.card_3 {
+  background-image: url("/assets/baca21cebac9b0ae0463e371575f760ea5e79016.png");
+  background-size: cover;
+  background-position: center center;
+  width: 91px;
+  height: 130px;
+  border-radius: 2px;
+}
+
+.recent_container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 1047px;
+  height: 237px;
+  margin-top: 30px;
+}
+
+.recent_title {
+  display: flex;
+  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: 191px;
+  height: 150px;
+  background-color: #ffffff;
+  border-radius: 10px;
+}
+.card_img {
+  width: 145px;
+  height: 110px;
+  border-radius: 5px;
+}

app/page.tsx

@@ -1,103 +1,11 @@
-import Image from "next/image";
+import { Home_Banner } from "./components/Home_Banner";
+import Recent_Creation from "./components/Recent_Creation";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+    <div className="w-[100%] h-[96vh] px-4 flex flex-col items-center justify-center" style={{ backgroundColor: "#F2F4F8" }}>
+      <Home_Banner />
+      <Recent_Creation />
     </div>
   );
 }

package.json

@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.1"
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.3.1",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }