diff --git a/package.json b/package.json
index 3cc3ec3..d11cd1a 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.5.0",
+    "keen-slider": "^6.8.6",
     "lodash": "^4.17.21",
     "lucide-react": "^0.474.0",
     "next": "^14.2.25",
diff --git a/public/Cover.png b/public/Cover.png
new file mode 100644
index 0000000..ab67447
Binary files /dev/null and b/public/Cover.png differ
diff --git a/public/Eliazerbert.png b/public/Eliazerbert.png
new file mode 100644
index 0000000..2566f39
Binary files /dev/null and b/public/Eliazerbert.png differ
diff --git a/public/Ellipse 3.png b/public/Ellipse 3.png
new file mode 100644
index 0000000..c57051a
Binary files /dev/null and b/public/Ellipse 3.png differ
diff --git a/public/Ellipse 4.png b/public/Ellipse 4.png
new file mode 100644
index 0000000..d29d4ac
Binary files /dev/null and b/public/Ellipse 4.png differ
diff --git a/public/Ellipse 5.png b/public/Ellipse 5.png
new file mode 100644
index 0000000..96a1a50
Binary files /dev/null and b/public/Ellipse 5.png differ
diff --git a/public/Ellipse 6.png b/public/Ellipse 6.png
new file mode 100644
index 0000000..8ed11a5
Binary files /dev/null and b/public/Ellipse 6.png differ
diff --git a/public/Global.png b/public/Global.png
new file mode 100644
index 0000000..f64f4ee
Binary files /dev/null and b/public/Global.png differ
diff --git a/public/Layer_1.png b/public/Layer_1.png
new file mode 100644
index 0000000..dbac38a
Binary files /dev/null and b/public/Layer_1.png differ
diff --git a/public/alex.png b/public/alex.png
new file mode 100644
index 0000000..bd70bf8
Binary files /dev/null and b/public/alex.png differ
diff --git a/public/book.png b/public/book.png
new file mode 100644
index 0000000..a5def42
Binary files /dev/null and b/public/book.png differ
diff --git a/public/community.png b/public/community.png
new file mode 100644
index 0000000..ba32f69
Binary files /dev/null and b/public/community.png differ
diff --git a/public/faith.png b/public/faith.png
new file mode 100644
index 0000000..cf55cc7
Binary files /dev/null and b/public/faith.png differ
diff --git a/public/hero1.png b/public/hero1.png
new file mode 100644
index 0000000..ca7a62d
Binary files /dev/null and b/public/hero1.png differ
diff --git a/public/hero2.png b/public/hero2.png
new file mode 100644
index 0000000..f94fa3e
Binary files /dev/null and b/public/hero2.png differ
diff --git a/public/hero3.png b/public/hero3.png
new file mode 100644
index 0000000..37dde61
Binary files /dev/null and b/public/hero3.png differ
diff --git a/public/hero4.png b/public/hero4.png
new file mode 100644
index 0000000..2f5d668
Binary files /dev/null and b/public/hero4.png differ
diff --git a/public/hero5.png b/public/hero5.png
new file mode 100644
index 0000000..bd20f47
Binary files /dev/null and b/public/hero5.png differ
diff --git a/public/maya.png b/public/maya.png
new file mode 100644
index 0000000..b9d44bd
Binary files /dev/null and b/public/maya.png differ
diff --git a/public/samson.png b/public/samson.png
new file mode 100644
index 0000000..1826560
Binary files /dev/null and b/public/samson.png differ
diff --git a/public/stark.png b/public/stark.png
new file mode 100644
index 0000000..3307d38
Binary files /dev/null and b/public/stark.png differ
diff --git a/src/app/landing-page/page.tsx b/src/app/landing-page/page.tsx
new file mode 100644
index 0000000..14a744a
--- /dev/null
+++ b/src/app/landing-page/page.tsx
@@ -0,0 +1,23 @@
+import Hero from "@/components/landingpage/Hero";
+import Tagline from "@/components/landingpage/Tagline";
+import Nft from "@/components/landingpage/Nft";
+import Authors from "@/components/landingpage/Authors";
+import Banner from "@/components/landingpage/Banner";
+import Community from "@/components/landingpage/Community";
+import Partener from "@/components/landingpage/Partener";
+import Footer from "@/components/landingpage/Footer";
+
+export default function landing() {
+  return (
+     <>
+       <Hero />
+       <Tagline />
+       <Nft />
+       <Banner />
+       <Authors />
+       <Community />
+       <Partener />
+       <Footer />
+     </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0caad44..c5ed238 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,19 +1,24 @@
 import React from "react";
+import LandingPage from "@/app/landing-page/page";
 // import { redirect } from "next/navigation";
 import About from "./about-us/page";
 
 export default function Home() {
-  // Redirect to dashboard by default
-  // redirect("/");
   return (
-    <div>
-      {/* <AnalyticsChart /> */}
-      <About />
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint et, sit
-      exercitationem repudiandae assumenda veniam reiciendis, doloribus itaque
-      aperiam aut consectetur, mollitia quo aliquam labore non minus recusandae!
-      Laboriosam, necessitatibus!
-    </div>
+    <>
+      <div className="bg-white">
+       <LandingPage />
+      </div>
+      
+      <div>
+        {/* <AnalyticsChart /> */}
+        <About />
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint et, sit
+        exercitationem repudiandae assumenda veniam reiciendis, doloribus itaque
+        aperiam aut consectetur, mollitia quo aliquam labore non minus recusandae!
+        Laboriosam, necessitatibus!
+      </div>
+    </>
   );
 }
 
diff --git a/src/components/landingpage/Authors.tsx b/src/components/landingpage/Authors.tsx
new file mode 100644
index 0000000..4f25728
--- /dev/null
+++ b/src/components/landingpage/Authors.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import React from 'react';
+import Image from 'next/image';
+import { motion } from 'framer-motion';
+
+type AuthorCardProps = {
+  name: string;
+  image: string;
+  verified?: boolean;
+};
+
+const AuthorCard = ({ name, image, verified = false }: AuthorCardProps) => (
+  <motion.div
+    className="relative rounded-lg overflow-hidden"
+    whileHover={{
+      scale: 1.05,
+      transition: { duration: 0.3 }
+    }}
+  >
+    <div className="aspect-w-1 aspect-h-1">
+      <motion.div
+        whileHover={{ scale: 1.1 }}
+        transition={{ duration: 0.4 }}
+      >
+        <Image
+          src={image}
+          alt={`Author ${name}`}
+          width={120}
+          height={120}
+          className="w-full h-full object-cover" />
+      </motion.div>
+      <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+    </div>
+    <div className="absolute bottom-6 left-4 flex items-center">
+      <h3 className="text-white text-md font-medium">{name}</h3>
+      {verified && (
+        <motion.span
+          className="ml-2 text-blue-400"
+          whileHover={{ scale: 1.2 }}
+          transition={{ duration: 0.2 }}
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+            <circle cx="12" cy="12" r="10" fill="currentColor" />
+            <path d="M9 12l2 2 4-4" stroke="white" strokeWidth="2" fill="none" />
+          </svg>
+        </motion.span>
+      )}
+    </div>
+  </motion.div>
+);
+
+export default function TopAuthorsSection() {
+  const authors = [
+    { 
+      name: "Elizabeth Joe", 
+      image: "/Eliazerbert.png", 
+      verified: true 
+    },
+    { 
+      name: "Alex Paul", 
+      image: "/alex.png", 
+      verified: true 
+    },
+    { 
+      name: "Samson Tersoor", 
+      image: "/samson.png", 
+      verified: true 
+    },
+    { 
+      name: "Vamika Maya", 
+      image: "/maya.png", 
+      verified: true 
+    },
+    { 
+      name: "Faith Musa", 
+      image: "/faith.png", 
+      verified: true 
+    }
+  ];
+
+  return (
+    <div className="max-w-6xl mx-auto p-4">
+      <div className="mb-6">
+        <h2 className="text-3xl font-bold text-[#0F265C]">Top Authors For This Week</h2>
+        <p className="text-gray-700 text-sm">This week's most-read and most-loved authors don't miss their latest work</p>
+      </div>
+      
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+        {authors.map((author, index) => (
+          <AuthorCard 
+            key={index}
+            name={author.name}
+            image={author.image}
+            verified={author.verified}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/landingpage/Banner.tsx b/src/components/landingpage/Banner.tsx
new file mode 100644
index 0000000..abca0c5
--- /dev/null
+++ b/src/components/landingpage/Banner.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+const categories = [
+  [
+    { label: "Fiction", color: "bg-yellow-100" },
+    { label: "Fact Books", color: "bg-blue-200" },
+    { label: "Fantasy", color: "bg-green-200" },
+  ],
+  [
+    { label: "Humor & Science", color: "bg-blue-300" },
+    { label: "Picture", color: "bg-blue-100" },
+    { label: "Reference", color: "bg-yellow-200" },
+    { label: "Science", color: "bg-red-200" },
+  ],
+  [
+    { label: "Science Book", color: "bg-green-100" },
+    { label: "Non-Fiction", color: "bg-blue-400" },
+    { label: "Adventure", color: "bg-red-300" },
+  ],
+];
+
+export default function BookCategories() {
+  return (
+    <div className="bg-blue-50 rounded-xl p-8 mx-4 md:mx-28 flex justify-between items-center mb-10">
+      <div>
+        <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center mb-8"
+        >
+            <h2 className="text-3xl font-bold text-blue-900">
+            Publish and Read
+            <br />
+            Multiple Type of Books
+            </h2>
+        </motion.div>
+      </div>
+      
+
+      <div className="flex flex-col space-y-4">
+        {categories.map((row, rowIndex) => (
+          <motion.div
+            key={rowIndex}
+            initial="hidden"
+            animate="visible"
+            variants={{
+              hidden: {},
+              visible: {
+                transition: {
+                  staggerChildren: 0.1,
+                },
+              },
+            }}
+            className="flex flex-wrap justify-center gap-3"
+          >
+            {row.map((cat, catIndex) => (
+              <motion.span
+                key={catIndex}
+                variants={{
+                  hidden: { opacity: 0, scale: 0.8 },
+                  visible: { opacity: 1, scale: 1 },
+                }}
+                className={`px-6 py-2 rounded-full ${cat.color} text-blue-900 font-medium hover:scale-105 transition-all cursor-pointer`}
+              >
+                {cat.label}
+              </motion.span>
+            ))}
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/landingpage/BookCard.tsx b/src/components/landingpage/BookCard.tsx
new file mode 100644
index 0000000..ca9e65c
--- /dev/null
+++ b/src/components/landingpage/BookCard.tsx
@@ -0,0 +1,50 @@
+import Image from "next/image";
+
+type BookCardProps = {
+  title: string;
+  author: string;
+  price: string;
+  rating: string;
+  verified?: boolean;
+  nft?: boolean;
+};
+
+export default function BookCard({ title, author, price, rating, verified, nft }: BookCardProps) {
+  return (
+    <div className="bg-gray-50 p-4 rounded-lg hover:shadow-lg hover:scale-105 transition-all">
+      <div className="relative">
+        <Image 
+          src="/Cover.png" 
+          width={100}
+          height={100}
+          alt={title}
+          className="w-[80%] ml-9 mt-5 h-50 object-cover mb-3"
+        />
+        {nft && (
+          <div className="absolute bottom-2 left-2 bg-purple-200 rounded-3xl mt-5 w-6 h-6 flex items-center justify-center">
+            <span className="text-xs text-purple-800">NFT</span>
+          </div>
+        )}
+      </div>
+      <h3 className="font-bold text-gray-900 mt-5">{title}</h3>
+      <div className="flex items-center text-sm text-gray-600 mb-1">
+        <span>By {author}</span>
+        {verified && (
+          <span className="ml-1 text-blue-500">
+            <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4 inline">
+              <circle cx="12" cy="12" r="10" fill="currentColor" />
+              <path d="M9 12l2 2 4-4" stroke="white" strokeWidth="2" fill="none" />
+            </svg>
+          </span>
+        )}
+      </div>
+      <div className="flex justify-between items-center mt-2">
+        <span className="font-bold text-[#5D5D5D]">${price}</span>
+        <div className="flex items-center">
+          <span className="text-yellow-500 mr-1">★</span>
+          <span className="text-sm text-gray-600">{rating}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/landingpage/BookSection.tsx b/src/components/landingpage/BookSection.tsx
new file mode 100644
index 0000000..f2bb3cc
--- /dev/null
+++ b/src/components/landingpage/BookSection.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useKeenSlider } from "keen-slider/react";
+import "keen-slider/keen-slider.min.css";
+import BookCard from "@/components/landingpage/BookCard";
+import PaginationIndicator from "@/components/landingpage/PageIndicator";
+import { useState } from "react";
+
+type Book = {
+  title: string;
+  author: string;
+  price: string;
+  rating: string;
+  verified?: boolean;
+  nft?: boolean;
+};
+
+
+type BookSectionProps = {
+  title: string;
+  description: string;
+  books: Book[];
+};
+
+export default function BookSection({ title, description, books }: BookSectionProps) {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const [sliderRef] = useKeenSlider({
+    loop: true,
+    slides: {
+      perView: 4,
+      spacing: 16,
+    },
+    breakpoints: {
+      "(max-width: 768px)": {
+        slides: {
+          perView: 3,
+          spacing: 12,
+        },
+      },
+    },
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel);
+    },
+    created(slider) {
+      setInterval(() => {
+        slider.next();
+      }, 4000); 
+    },
+  });
+
+  return (
+    <div className="mb-16">
+      <div className="flex justify-between items-center mb-4">
+        <div>
+          <h2 className="text-2xl font-bold text-[#0F265C]">{title}</h2>
+          <p className="text-sm text-gray-600">{description}</p>
+        </div>
+        <button className="flex items-center text-gray-600 hover:text-blue-600 px-4 py-2 border border-gray-300 rounded-xl text-sm md:text-md">
+          View All
+          <svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
+        </button>
+      </div>
+
+      <div ref={sliderRef} className="keen-slider">
+        {books.map((book, index) => (
+          <div className="keen-slider__slide" key={index}>
+            <BookCard {...book} />
+          </div>
+        ))}
+      </div>
+
+      <PaginationIndicator current={currentSlide} total={books.length} />
+    </div>
+  );
+}
diff --git a/src/components/landingpage/Community.tsx b/src/components/landingpage/Community.tsx
new file mode 100644
index 0000000..218629f
--- /dev/null
+++ b/src/components/landingpage/Community.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+export default function CommunitySection() {
+    const [isHovered, setIsHovered] = useState(false);
+    
+    return (
+      <div className="rounded-xl p-8 flex flex-col md:flex-row justify-between items-center md:ml-40 mt-10">
+        <div className="w-full md:w-1/2 space-y-6 text-center md:text-left mb-6 md:mb-0">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="text-3xl font-bold text-[#0F265C]"
+          >
+            Join Our Community <br /> of Book Lovers
+          </motion.h2>
+  
+          <motion.button 
+            className="mt-4 px-6 py-3 bg-blue-600 text-white rounded-full font-semibold transition"
+            whileHover={{ 
+              scale: 1.05, 
+              backgroundColor: "#2563EB" 
+            }}
+            whileTap={{ scale: 0.95 }}
+            onHoverStart={() => setIsHovered(true)}
+            onHoverEnd={() => setIsHovered(false)}
+          >
+            <motion.span
+              animate={isHovered ? { x: 5 } : { x: 0 }}
+              transition={{ duration: 0.2 }}
+            >
+              Join Community →
+            </motion.span>
+          </motion.button>
+
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mt-6 py-3 px-9 bg-blue-100 rounded-xl flex items-center"
+          >
+            <div>
+              <h4 className="text-blue-900 font-semibold mb-2">Our Community</h4>
+
+              <div className="flex -space-x-3">
+                {["/Ellipse 3.png", "/Ellipse 4.png", "/Ellipse 5.png", "/Ellipse 6.png"].map((src, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: 0.3 + index * 0.1 }}
+                    whileHover={{ y: -5, zIndex: 10 }}
+                  >
+                    <Image 
+                      src={src} 
+                      width={20} 
+                      height={20} 
+                      alt="User" 
+                      className="w-10 h-10 rounded-full border-2"
+                    />
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+  
+            <div className="pl-40">
+              <motion.h3 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 1, delay: 0.6 }}
+                className="text-2xl font-bold text-blue-900"
+              >
+                40k+
+              </motion.h3>
+              <motion.p 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 1, delay: 0.7 }}
+                className="text-sm text-blue-800"
+              >
+                Book lovers Joined
+              </motion.p>
+            </div>
+          </motion.div>
+        </div>
+  
+        <motion.div 
+          className="md:w-1/2"
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.7 }}
+        >
+          <motion.div
+            whileHover={{ scale: 1.03 }}
+            transition={{ duration: 0.3 }}
+          >
+            <Image
+              src="/community.png" 
+              alt="Book Lovers" 
+              width={300}
+              height={300}
+              className="rounded-xl object-cover ml-14 md:ml-10 w-[70%] h-[70%]"
+            />
+          </motion.div>
+        </motion.div>
+      </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/landingpage/Footer.tsx b/src/components/landingpage/Footer.tsx
new file mode 100644
index 0000000..e898095
--- /dev/null
+++ b/src/components/landingpage/Footer.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { FaTwitter, FaTelegram } from 'react-icons/fa';
+
+export default function Footer() {
+  return (
+    <footer className="py-6 px-4 bg-white ">
+      <hr className='mx-10  my-5 rounded-full bg-black' />
+      <div className="container mx-auto max-w-6xl">
+        <div className="flex flex-col md:flex-row justify-between items-start">
+          <div className="mb-6 md:mb-0">
+            <div className="flex items-center mb-6">
+              <div className="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-2">
+                <span className="text-white text-xs">📚</span>
+              </div>
+              <h2 className="text-blue-900 text-2xl font-bold">ChainLib</h2>
+            </div>
+            
+            <div className="flex space-x-4">
+              <button className="w-10 h-10 rounded-full border border-blue-900 flex items-center justify-center text-blue-900">
+                <FaTwitter size={18} />
+              </button>
+              <button className="w-10 h-10 rounded-full border border-blue-900 flex items-center justify-center text-blue-900">
+                <FaTelegram size={18} />
+              </button>
+              <button className="w-10 h-10 rounded-full border border-blue-900 flex items-center justify-center text-blue-900">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                  <rect x="2" y="9" width="4" height="12"></rect>
+                  <circle cx="4" cy="4" r="2"></circle>
+                </svg>
+              </button>
+            </div>
+          </div>
+          
+          <div className="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-16">
+            <div>
+              <h3 className="text-gray-500 font-medium mb-4">Explore</h3>
+              <ul className="space-y-3">
+                <li><a href="#" className="text-gray-700 hover:text-blue-900">Home</a></li>
+                <li><a href="#" className="text-gray-700 hover:text-blue-900">Books</a></li>
+                <li><a href="#" className="text-gray-700 hover:text-blue-900">How It Works</a></li>
+                <li><a href="#" className="text-gray-700 hover:text-blue-900">About</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="text-gray-500 font-medium mb-4">Legal</h3>
+              <ul className="space-y-3">
+                <li><a href="#" className="text-gray-700 hover:text-blue-900">Privacy Policy</a></li>
+                <li><a href="#" className="text-gray-700 hover:text-blue-900">Terms of Service</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        
+        <div className="mt-10">
+          <p className="text-gray-500 text-sm">© 2025 ChainLib. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/src/components/landingpage/Hero.tsx b/src/components/landingpage/Hero.tsx
new file mode 100644
index 0000000..358df83
--- /dev/null
+++ b/src/components/landingpage/Hero.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+const peopleImages = [
+  { id: 1, src: "/hero1.png", alt: "Person 1" },
+  { id: 2, src: "/hero2.png", alt: "Person 2" },
+  { id: 3, src: "/hero3.png", alt: "Person 3" },
+  { id: 4, src: "/hero4.png", alt: "Person 4" },
+  { id: 5, src: "/hero5.png", alt: "Person 5" },
+];
+
+export default function Hero() {
+  return (
+    <section className="w-full min-h-screen flex flex-col items-center justify-center text-center px-4 py-16">
+
+      <motion.h1
+        initial={{ opacity: 0, y: 50 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="text-2xl md:text-5xl font-bold mb-4 text-[#0F265C]"
+      >
+        <span className="text-[#096CFF]">A Decentralized Library</span> for the <br /> Future of Digital Publishing
+      </motion.h1>
+
+      <div className="flex mt-8 bg-transparent">
+        {peopleImages.map((person, index) => (
+          <motion.div
+            key={person.id}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.9, delay: index * 0.4 }}
+            viewport={{ once: true }}
+            className={`transform ${
+              index === 0 || index === 4 ? "translate-y-8 translate-x-0" : index === 1 || index === 3 ? "translate-y-2" : ""
+            }`}
+          >
+            <Image
+              src={person.src}
+              alt={person.alt}
+              width={140}
+              height={100}
+              className="rounded shadow-lg"
+            />
+          </motion.div>
+        ))}
+      </div>
+
+      <motion.p
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 1, delay: 1 }}
+        viewport={{ once: true }}
+        className="text-gray-600 max-w-2xl mb-8 mt-10"
+      >
+        Own your stories, engage your readers, and earn from <br /> your content with blockchain transparency.
+      </motion.p>
+
+      <motion.button
+        initial={{ opacity: 0, scale: 0.8 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 1, delay: 1.2 }}
+        viewport={{ once: true }}
+        className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-16 rounded-xl transition-all"
+      >
+        Get Started
+      </motion.button>
+
+    </section>
+  );
+}
diff --git a/src/components/landingpage/Nft.tsx b/src/components/landingpage/Nft.tsx
new file mode 100644
index 0000000..82a4cef
--- /dev/null
+++ b/src/components/landingpage/Nft.tsx
@@ -0,0 +1,50 @@
+import BookSection from "@/components/landingpage/BookSection";
+
+export default function ELibraryDisplay() {
+  const newReleases = [
+    { title: "Native Invisibility", author: "Darrin Collins", price: "10", rating: "4.5", verified: true },
+    { title: "Creative Minds", author: "Jane Doe", price: "12", rating: "4.8", verified: true },
+    { title: "Dreamscape", author: "John Smith", price: "15", rating: "4.9", verified: true },
+    { title: "Hidden Voices", author: "Mary Lane", price: "9", rating: "4.7", verified: true },
+    { title: "Beyond Borders", author: "Leo Thomas", price: "13", rating: "4.6", verified: true },
+  ];
+  
+  const trendingBooks = [ 
+    { title: "Native Invisibility", author: "Darrin Collins", price: "10", rating: "4.5", verified: true },
+    { title: "Creative Minds", author: "Jane Doe", price: "12", rating: "4.8", verified: true },
+    { title: "Dreamscape", author: "John Smith", price: "15", rating: "4.9", verified: true },
+    { title: "Hidden Voices", author: "Mary Lane", price: "9", rating: "4.7", verified: true },
+    { title: "Beyond Borders", author: "Leo Thomas", price: "13", rating: "4.6", verified: true },
+   ];
+  const nftEditions = [ 
+    { title: "Native Invisibility", author: "Darrin Collins", price: "10", rating: "4.5", verified: true },
+    { title: "Creative Minds", author: "Jane Doe", price: "12", rating: "4.8", verified: true },
+    { title: "Dreamscape", author: "John Smith", price: "15", rating: "4.9", verified: true },
+    { title: "Hidden Voices", author: "Mary Lane", price: "9", rating: "4.7", verified: true },
+    { title: "Beyond Borders", author: "Leo Thomas", price: "13", rating: "4.6", verified: true },
+   ];
+
+  return (
+    <div className="max-w-6xl mx-auto p-4">
+      <BookSection 
+        title="New Release" 
+        description="Fresh from the minds of our authors explore the latest books" 
+        books={newReleases} 
+      />
+      
+      <BookSection 
+        title="Trending Books" 
+        description="Discover what everyone's reading right now" 
+        books={trendingBooks} 
+      />
+      
+      <div className="bg-gray-200 p-6 rounded-lg mb-16">
+        <BookSection 
+          title="Exclusive NFT Edition" 
+          description="Own limited-edition digital books with special perks bonus content, unique artwork, and collectible value." 
+          books={nftEditions} 
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/landingpage/PageIndicator.tsx b/src/components/landingpage/PageIndicator.tsx
new file mode 100644
index 0000000..c822629
--- /dev/null
+++ b/src/components/landingpage/PageIndicator.tsx
@@ -0,0 +1,20 @@
+type PaginationIndicatorProps = {
+  current: number;
+  total:number;
+}
+
+export default function PaginationIndicator({ current, total } : PaginationIndicatorProps ) {
+    return (
+      <div className="flex justify-center mt-8">
+        {[...Array(total)].map((_, index) => (
+          <div
+            key={index}
+            className={`mx-1 w-10 h-1 rounded ${
+              index === current ? "bg-blue-500" : "bg-gray-300"
+            }`}
+          />
+        ))}
+      </div>
+    );
+  }
+  
\ No newline at end of file
diff --git a/src/components/landingpage/Partener.tsx b/src/components/landingpage/Partener.tsx
new file mode 100644
index 0000000..8eaf869
--- /dev/null
+++ b/src/components/landingpage/Partener.tsx
@@ -0,0 +1,20 @@
+export default function PartnersSection() {
+    return (
+      <div className="py-16  text-center space-y-6">
+        <h2 className="text-4xl font-bold text-blue-900">
+          Our Partners
+        </h2>
+  
+        <p className="max-w-2xl mx-auto text-gray-600">
+          Powering the future of decentralized reading with the support of trusted <br /> innovators and collaborators.
+        </p>
+  
+        <div className="flex flex-wrap justify-center items-center gap-14 mt-8">
+          <span className="text-3xl font-bold text-gray-400">Ethereum</span>
+          <span className="text-3xl font-bold text-gray-400">Starknet</span>
+          <span className="text-3xl font-bold text-gray-400">Only Dust</span>
+          <span className="text-3xl font-bold text-gray-400">Ethereum</span>
+        </div>
+      </div>
+    );
+  }
\ No newline at end of file
diff --git a/src/components/landingpage/Tagline.tsx b/src/components/landingpage/Tagline.tsx
new file mode 100644
index 0000000..25d3a07
--- /dev/null
+++ b/src/components/landingpage/Tagline.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import React from 'react';
+import Image from 'next/image';
+import { FaLock } from "react-icons/fa";
+import { motion } from "framer-motion";
+
+export default function DecentralizedELibrary() {
+  return (
+    <div className="bg-white p-8 max-w-6xl mx-auto pt-10">
+      <div className="flex flex-col md:flex-row items-start md:justify-between mb-16 gap-8">
+        <motion.div
+          initial={{ opacity: 0, x: -50 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="md:w-1/3"
+        >
+          <h1 className="text-3xl md:text-4xl font-bold text-[#0F265C] leading-tight">
+            Building more <br /> than an e-library
+          </h1>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, delay: 0.3 }}
+          viewport={{ once: true }}
+          className="md:w-2/3 md:ml-20"
+        >
+          <p className="text-gray-700 text-lg">
+            A decentralized world where stories live on-chain and creators <br />
+            stay in control. Powered by StarkNet, our platform gives writers <br />
+            the freedom to publish without intermediaries and gives readers <br />
+            direct access to original, verifiable content they can truly own.
+          </p>
+        </motion.div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="bg-[#F5FAFD] p-8 rounded-lg flex flex-col items-center text-center pt-24"
+        >
+          <div>
+            <Image src="/Layer_1.png" alt="Decentralized Publishing" width={120} height={120} className="object-contain" />
+          </div>
+          <div className="pt-[60%] text-left">
+            <h2 className="text-xl font-bold text-blue-900 mb-2">Decentralized Publishing</h2>
+            <p className="text-gray-600">
+              Publish your work directly on the blockchain uncensorable, permanent, and fully yours.
+            </p>
+          </div>
+        </motion.div>
+
+        <div className="flex flex-col gap-6">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="bg-[#F5FAFD] p-6 rounded-lg"
+          >
+            <div className="flex items-center justify-center mb-4">
+              <Image src="/stark.png" alt="Earn Without Intermediaries" width={100} height={100} className="object-contain" />
+            </div>
+            <div className="pt-[20%] text-left">
+              <h2 className="text-xl font-bold text-blue-900 mb-2">Earn Without Intermediaries</h2>
+              <p className="text-gray-600">
+                Get paid instantly and transparently. No third parties, no hidden cuts
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            viewport={{ once: true }}
+            className="bg-[#F5FAFD] p-6 rounded-lg"
+          >
+            <div className="flex items-center justify-center mb-4">
+              <div className="text-blue-500">
+                <FaLock size={40} />
+              </div>
+            </div>
+            <div className="pt-[20%] text-left">
+              <h2 className="text-xl font-bold text-blue-900 mb-2">Secure Ownership</h2>
+              <p className="text-gray-600">
+                Your content and earnings are protected with blockchain-backed security
+              </p>
+            </div>
+          </motion.div>
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            viewport={{ once: true }}
+            className="bg-[#F5FAFD] p-6 rounded-lg"
+          >
+            <div className="flex items-center justify-center mb-4">
+              <Image src="/Global.png" alt="Global Audience Reach" width={85} height={85} className="object-contain" />
+            </div>
+            <div className="pt-[20%] text-left">
+              <h2 className="text-xl font-bold text-blue-900 mb-2">Global Audience Reach</h2>
+              <p className="text-gray-600">
+                Connect with readers worldwide, anytime, without platform limits
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.8 }}
+            viewport={{ once: true }}
+            className="bg-[#F5FAFD] p-6 rounded-lg"
+          >
+            <div className="flex items-center justify-center mb-4">
+              <Image src="/book.png" alt="Own What You Read" width={90} height={90} className="object-contain" />
+            </div>
+            <div className="pt-[5%] text-left">
+              <h2 className="text-xl font-bold text-blue-900 mb-2">Own What You Read</h2>
+              <p className="text-gray-600">
+                Books become digital collectibles read, collect, and showcase your favorites.
+              </p>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+    </div>
+  );
+}