Refactor-the-UI-to-align-with-the-project-design

src/app/_components/BookCard.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+type BookCardProps = {
+  id?: string | number
+  title: string;
+  author: string;
+  price: string | number;
+  imageUrl: string;
+  rating: string | number;
+  verified?: boolean;
+  nft?: boolean;
+};
+
+export default function BookCard({ book, className }: { className?: string, book: BookCardProps }) {
+  const { imageUrl, title, author, price, rating, verified, nft } = book
+
+  return <div className={cn(className, "rounded-base overflow-hidden md:shadow-small border border-neutral-100 p-6 pt-8 min-w-54")}>
+    <div className="relative flex mx-auto justify-center items-center size-44 md:size-36 bg-transparent mb-8">
+      <Image
+        src={imageUrl}
+        alt={title}
+        fill
+        className="object-fill object-center size-4/5"
+      />
+      {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-semibold text-gray-800">{title}</h3>
+    <div className="flex items-center">
+      <p className="text-sm text-gray-600">By {author}</p>
+      {verified && (
+        <div className="ml-1">
+          <Image
+            src="/verified.svg"
+            alt="Verified Author"
+            width={16}
+            height={16}
+          />
+        </div>
+      )}
+    </div>
+    <div className="flex justify-between items-center mt-2">
+      <p className="font-bold text-gray-900">${price}</p>
+      <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/app/_components/CustomLink.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { usePathname, useRouter } from 'next/navigation'
+import React, { ReactNode } from 'react'
+
+export default function CustomLink({ children, classname, route }: { route: string, classname: string, children: ReactNode }) {
+
+    const navigate = useRouter()
+    const pathname = usePathname()
+    const presentPath = pathname.split("/").at(-1)
+
+
+    const handleClick = () => {
+        if (!presentPath) return
+
+        if (pathname.split("/").length === 3) {
+            navigate.push(pathname + "/" + route)
+        } else {
+            navigate.push(pathname.replace(presentPath, route))
+        }
+    }
+
+    return (
+        <button onClick={handleClick} className={classname}>
+            {children}
+        </button>
+    )
+}

src/app/how-it-works/_components/Footer.tsx → src/app/_components/Footer.tsx

@@ -1,20 +1,18 @@
+import Logo from "@/app/_components/Logo";
 import Link from "next/link";
 import { BiLogoLinkedin, BiLogoTelegram } from "react-icons/bi";
 import { FaXTwitter } from "react-icons/fa6";
-import Logo from "./Logo";
 
 export interface IFooterLinks {
     link: string;
     href: string;
 }
 
 const FooterLink: IFooterLinks[] = [
-    { link: "Explore", href: "/explore" },
     { link: "Home", href: "/" },
     { link: "Books", href: "/books" },
     { link: "How It Works", href: "/how-it-works" },
     { link: "About", href: "/about-us" },
-    { link: "Legal", href: "/legal" },
     { link: "Privacy Policy", href: "/privacy-policy" },
     { link: "Terms Of Service", href: "/terms-of-service" },
 ];
@@ -43,8 +41,15 @@ export default function Footer() {
                 </div>
             </div>
 
-            <div className="grid grid-rows-5 grid-flow-col gap-y-2 gap-x-18.5 place-content-start">
-                {FooterLink.map(({ link, href }, index) => <Link className="hover:opacity-75 opacity-100 whitespace-nowrap text-neutral-600 text-body-large cursor-pointer" key={index} href={href}>{link}</Link>)}
+            <div className="text-body-large">
+                <div className="grid grid-cols-2 gap-x-12.5 mb-3 items-start justify-start">
+                    <h3 className="font-bold text-secondary-500 ">Explore</h3>
+                    <h3 className="font-bold text-secondary-500 ">Legal</h3>
+                </div>
+                <ul className="grid grid-rows-4 grid-flow-col gap-y-2 gap-x-18.5 place-content-start">
+                    {FooterLink.map(({ link, href }, index) => <li key={index} >
+                        <Link className="hover:opacity-75 opacity-100 whitespace-nowrap text-neutral-600 cursor-pointer" href={href}>{link}</Link></li>)}
+                </ul>
             </div>
 
             <div className="space-y-4 md:hidden">

src/app/_components/LazyLoadText.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect, useRef } from "react";
+
+interface LazyLoadTextProps {
+  text: string;
+}
+
+export default function LazyLoadText({ text }: LazyLoadTextProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const textRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setIsVisible(true);
+        observer.disconnect();
+      }
+    });
+
+    if (textRef.current) {
+      observer.observe(textRef.current);
+    }
+
+    return () => {
+      if (observer) observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={textRef} className="min-h-[100px]">
+      {isVisible ? (
+        <p className="text-gray-700 leading-relaxed">{text}</p>
+      ) : (
+        <p className="text-gray-400" aria-live="polite">
+          Loading review...
+        </p>
+      )}
+    </div>
+  );
+}

src/app/_components/Loader.tsx

@@ -0,0 +1,5 @@
+export default function Loader() {
+    return (
+        <div className="rounded-full border-3 border-background size-6 animate-spin duration-300 ease-linear border-t-transparent" />
+    )
+}