created landing page

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",

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 />
+     </>
+  );
+}

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>
+    </>
   );
 }
 

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}