app/page.tsx

@@ -1,103 +1,12 @@
-import Image from "next/image";
-
+import MarketplaceNavbar from "@/components/custom/marketplace_Navbar";
+import HomeBanner from "@/components/custom/Home_Banner";
+import BooksFrame from "@/components/custom/books_Frame";
 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>
+    <>
+      <MarketplaceNavbar />
+      <HomeBanner />
+      <BooksFrame />
+    </>
   );
 }

components/custom/Best_Seller.tsx

@@ -0,0 +1,87 @@
+import Image from 'next/image';
+import { Heart, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const books = [
+  {
+    title: 'Brutal',
+    author: 'Hoosh Ink',
+    price: '$4.99',
+    cover: '/book1.png',
+  },
+  {
+    title: 'Authority',
+    author: 'Jeff Vandermeer',
+    price: '$11.99',
+    cover: '/book2.png',
+  },
+  {
+    title: 'Babe Hager',
+    author: 'Babe Hager',
+    price: '$2.99',
+    cover: '/book3.png',
+  },
+  {
+    title: 'Never Flinch',
+    author: 'Stephen King',
+    price: '$16.99',
+    cover: '/book4.png',
+  },
+  {
+    title: 'The Obsession',
+    author: 'Jesse Q. Sutanto',
+    price: '$8.99',
+    cover: '/book5.png',
+  },
+  {
+    title: 'Unlikely Story',
+    author: 'Ali Rosen',
+    price: '$2.99',
+    cover: '/book6.png',
+  },
+  {
+    title: 'Thrill Ride',
+    author: 'Amy Ratcliffe',
+    price: '$9.99',
+    cover: '/book7.png',
+  },
+];
+
+export default function BestSeller() {
+  return (
+    <div className="w-full py-8 px-20">
+      <div className="flex items-center justify-between mb-2 px-2">
+        <h2 className="text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
+        <a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
+      </div>
+      <div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
+      <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
+        {books.map((book, idx) => (
+          <div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
+            <div className="relative w-[158px] h-[235px] flex items-center justify-center">
+              <Image
+                src={book.cover}
+                alt={book.title}
+                fill
+                style={{ objectFit: 'cover', borderRadius: 4 }}
+                className="transition group-hover:scale-105 duration-200"
+              />
+            </div>
+            <div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
+              <div className="flex items-center justify-between">
+                <span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
+                <Button variant="ghost" size="icon" className="ml-2">
+                  <Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
+                </Button>
+              </div>
+              <div className="flex items-center justify-between mt-0.5">
+                <span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
+                <span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/custom/Home_Banner.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+export default function HomeBanner() {
+  return (
+    <div className="w-full">
+      <div className="max-w-[1440px] mx-auto px-20 mt-10">
+        <div className="relative h-[240px] md:h-[260px] bg-[rgba(255,248,238,0.9)] rounded-2xl overflow-hidden flex items-center justify-between">
+          {/* Left: Text Content */}
+          <div className="z-10 py-8 flex-1 flex flex-col justify-center pl-16 pr-20">
+            <h1 className="text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
+              1000 BLACK UMBRELLAS
+            </h1>
+            <p className="text-[#151C4F] text-[21px] font-[400] mb-2 max-w-5xl">
+              Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br/> one of the most admired poets in the underground American poetry scene.
+            </p>
+            <Button 
+              className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[21px] w-fit px-6 py-3 font-[400] rounded-md mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer"
+              size="lg"
+            >
+              PURCHASE EBOOK
+            </Button>
+          </div>
+
+          {/* Right: Book Cover */}
+          <div className="hidden md:block absolute" style={{ top: '85.44px', left: '986px' }}>
+            <Image
+              src="/book.png"
+              alt="1000 Black Umbrellas Book Cover"
+              width={185}
+              height={275}
+              className="object-contain rounded-xl"
+              priority
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/custom/New_Release.tsx

@@ -0,0 +1,87 @@
+import Image from 'next/image';
+import { Heart, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const books = [
+  {
+    title: 'Brutal',
+    author: 'Hoosh Ink',
+    price: '$4.99',
+    cover: '/book8.png',
+  },
+  {
+    title: 'Authority',
+    author: 'Jeff Vandermeer',
+    price: '$11.99',
+    cover: '/book9.png',
+  },
+  {
+    title: 'Babe Hager',
+    author: 'Babe Hager',
+    price: '$2.99',
+    cover: '/book10.png',
+  },
+  {
+    title: 'Never Flinch',
+    author: 'Stephen King',
+    price: '$16.99',
+    cover: '/book11.png',
+  },
+  {
+    title: 'The Obsession',
+    author: 'Jesse Q. Sutanto',
+    price: '$8.99',
+    cover: '/book12.png',
+  },
+  {
+    title: 'Unlikely Story',
+    author: 'Ali Rosen',
+    price: '$2.99',
+    cover: '/book13.png',
+  },
+  {
+    title: 'Thrill Ride',
+    author: 'Amy Ratcliffe',
+    price: '$9.99',
+    cover: '/book14.png',
+  },
+];
+
+export default function NewRelease() {
+  return (
+    <div className="w-full py-8 px-20">
+      <div className="flex items-center justify-between mb-2 px-2">
+        <h2 className="text-[15px] font-[600] text-[#151C4F]">New Release</h2>
+        <a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
+      </div>
+      <div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
+      <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
+        {books.map((book, idx) => (
+          <div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
+            <div className="relative w-[158px] h-[235px] flex items-center justify-center">
+              <Image
+                src={book.cover}
+                alt={book.title}
+                fill
+                style={{ objectFit: 'cover', borderRadius: 4 }}
+                className="transition group-hover:scale-105 duration-200"
+              />
+            </div>
+            <div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
+              <div className="flex items-center justify-between">
+                <span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
+                <Button variant="ghost" size="icon" className="ml-2">
+                  <Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
+                </Button>
+              </div>
+              <div className="flex items-center justify-between mt-0.5">
+                <span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span>
+                <span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/custom/books_Frame.tsx

@@ -0,0 +1,14 @@
+
+import BestSeller from './Best_Seller';
+import NewRelease from './New_Release';
+
+
+
+export default function BooksFrame() {
+  return (
+    <div>
+      <BestSeller />
+      <NewRelease />
+    </div>
+  );
+}

components/custom/marketplace_Navbar.tsx

@@ -10,7 +10,7 @@ function MarketplaceNavbar() {
       {/* Logo and Brand */}
       <div className="flex items-center gap-2 min-w-[180px]">
         <Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
-        <span className="text-white text-2xl ml-1 font-normal">Woodle</span>
+        <span className="text-white text-2xl ml-1 font-normal">Woedii</span>
       </div>
       {/* Search Bar */}
       <div className="flex-1 flex justify-center">
@@ -55,10 +55,12 @@ function MarketplaceNavbar() {
           <span className="text-xs text-white mt-1">My Profile</span>
         </div>
         {/* Create Button */}
+        <a href="/creator">
         <Button className="flex items-center gap-2 bg-[#0093A5] text-white px-5 py-2 rounded-lg font-medium text-base transition-colors ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
           <SquarePen size={18} />
           Create
         </Button>
+        </a>
       </div>
     </nav>
   );