banner section & category section

package.json

@@ -10,10 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^6.27.0",
+    "swiper": "^11.1.14"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

public/books.json

@@ -0,0 +1,202 @@
+[
+    {
+      "_id": 1,
+      "title": "How to Grow Your Online Store",
+      "description": "Learn the best strategies to grow your online store in today's competitive market.",
+      "category": "business",
+      "trending": true,
+      "coverImage": "book-1.png",
+      "oldPrice": 29.99,
+      "newPrice": 19.99
+    },
+    {
+      "_id": 2,
+      "title": "Top 10 Fiction Books This Year",
+      "description": "A curated list of the best fiction books that are trending this year.",
+      "category": "books",
+      "trending": true,
+      "coverImage": "book-2.png",
+      "oldPrice": 24.99,
+      "newPrice": 14.99
+    },
+    {
+      "_id": 3,
+      "title": "Mastering SEO in 2024",
+      "description": "Tips and tricks to boost your SEO and rank higher on search engines.",
+      "category": "marketing",
+      "trending": true,
+      "coverImage": "book-3.png",
+      "oldPrice": 39.99,
+      "newPrice": 29.99
+    },
+    {
+      "_id": 4,
+      "title": "Best eCommerce Platforms",
+      "description": "A comprehensive guide on choosing the best eCommerce platforms for 2024.",
+      "category": "business",
+      "trending": false,
+      "coverImage": "book-4.png",
+      "oldPrice": 49.99,
+      "newPrice": 39.99
+    },
+    {
+      "_id": 5,
+      "title": "Non-Fiction Reads You Must Try",
+      "description": "Our top picks for non-fiction books to add to your reading list.",
+      "category": "books",
+      "trending": true,
+      "coverImage": "book-5.png",
+      "oldPrice": 19.99,
+      "newPrice": 9.99
+    },
+    {
+      "_id": 6,
+      "title": "Ultimate Guide to Digital Marketing",
+      "description": "A complete guide to digital marketing strategies for 2024.",
+      "category": "marketing",
+      "trending": false,
+      "coverImage": "book-6.png",
+      "oldPrice": 44.99,
+      "newPrice": 34.99
+    },
+    {
+      "_id": 7,
+      "title": "The First Days",
+      "description": "Katie is driving to work one beautiful day when a dead man jumps into her car and tries to eat her.  That same morning, Jenni opens a bedroom door to find her husband devouring their toddler son. ",
+      "category": "horror",
+      "trending": true,
+      "coverImage": "book-7.png",
+      "oldPrice": 59.99,
+      "newPrice": 49.99
+    },
+    {
+      "_id": 8,
+      "title": "The Hunger Games",
+      "description": "Could you survive on your own in the wild, with every one out to make sure you don't live to see the morning?",
+      "category": "fiction",
+      "trending": true,
+      "coverImage": "book-8.png",
+      "oldPrice": 21.99,
+      "newPrice": 16.99
+    },
+    {
+      "_id": 9,
+      "title": "Harry Potter and the Order of the Phoenix",
+      "description": "Harry Potter is about to start his fifth year at Hogwarts School of Witchcraft and Wizardry. Unlike most schoolboys, Harry never enjoys his summer holidays",
+      "category": "adventure",
+      "trending": false,
+      "coverImage": "book-9.png",
+      "oldPrice": 27.99,
+      "newPrice": 18.99
+    },
+    {
+      "_id": 10,
+      "title": "Pride and Prejudice",
+      "description": "The romantic clash between the opinionated Elizabeth and her proud beau, Mr. Darcy, is a splendid performance of civilized sparring.",
+      "category": "fiction",
+      "trending": true,
+      "coverImage": "book-10.png",
+      "oldPrice": 14.99,
+      "newPrice": 10.99
+    },
+    {
+      "_id": 11,
+      "title": "To Kill a Mockingbird",
+      "description": "The unforgettable novel of a childhood in a sleepy Southern town and the crisis of conscience that rocked it. 'To Kill A Mockingbird' became both an instant bestseller",
+      "category": "fiction",
+      "trending": true,
+      "coverImage": "book-11.png",
+      "oldPrice": 32.99,
+      "newPrice": 25.99
+    },
+    {
+      "_id": 12,
+      "title": "The Fault in Our Stars",
+      "description": "Despite the tumor-shrinking medical miracle that has bought her a few years, Hazel has never been anything but terminal, her final chapter inscribed upon diagnosis. ",
+      "category": "business",
+      "trending": true,
+      "coverImage": "book-12.png",
+      "oldPrice": 19.99,
+      "newPrice": 9.99
+    },
+    {
+      "_id": 13,
+      "title": "The Picture of Dorian Gray",
+      "description": "Oscar Wilde’s only novel is the dreamlike story of a young man who sells his soul for eternal youth and beauty.",
+      "category": "horror",
+      "trending": true,
+      "coverImage": "book-13.png",
+      "oldPrice": 26.99,
+      "newPrice": 21.99
+    },
+    {
+      "_id": 14,
+      "title": "The Giving Tree",
+      "description": "'Once there was a tree...and she loved a little boy.'So begins a story of unforgettable perception, beautifully written and illustrated by the gifted and versatile Shel Silverstein.",
+      "category": "fiction",
+      "trending": false,
+      "coverImage": "book-14.png",
+      "oldPrice": 34.99,
+      "newPrice": 24.99
+    },
+    {
+      "_id": 15,
+      "title": "Gone with the Wind",
+      "description": "Scarlett O'Hara, the beautiful, spoiled daughter of a well-to-do Georgia plantation owner, must use every means at her disposal to claw her way out of the poverty she finds herself in after Sherman's March to the Sea.",
+      "category": "fiction",
+      "trending": false,
+      "coverImage": "book-15.png",
+      "oldPrice": 22.99,
+      "newPrice": 12.99
+    },
+    {
+      "_id": 16,
+      "title": "The Lightning Thief",
+      "description": "Percy Jackson is a good kid, but he can't seem to focus on his schoolwork or control his temper. And lately, being away at boarding school is only getting worse - Percy could have sworn his pre-algebra teacher turned into a monster and tried to kill him",
+      "category": "fiction",
+      "trending": false,
+      "coverImage": "book-16.png",
+      "oldPrice": 24.99,
+      "newPrice": 19.99
+    },
+    {
+      "_id": 17,
+      "title": "Alice’s Adventures in Wonderland",
+      "description": "When Alice sees a white rabbit take a watch out of its waistcoat pocket she decides to follow it, and a sequence of most unusual events is set in motion. This mini book contains the entire topsy-turvy stories of Alice's Adventures in Wonderland",
+      "category": "adventure",
+      "trending": true,
+      "coverImage": "book-17.png",
+      "oldPrice": 49.99,
+      "newPrice": 39.99
+    },
+    {
+      "_id": 18,
+      "title": "Divergent",
+      "description": "On an appointed day of every year, all sixteen-year-olds must select the faction to which they will devote the rest of their lives. For Beatrice, the decision is between staying with her family and being who she really is",
+      "category": "business",
+      "trending": true,
+      "coverImage": "book-18.png",
+      "oldPrice": 18.99,
+      "newPrice": 12.99
+    },
+    {
+      "_id": 19,
+      "title": "The Alchemist",
+      "description": "Paulo Coelho's masterpiece tells the mystical story of Santiago, an Andalusian shepherd boy who yearns to travel in search of a worldly treasure.",
+      "category": "adventure",
+      "trending": true,
+      "coverImage": "book-19.png",
+      "oldPrice": 35.99,
+      "newPrice": 27.99
+    },
+    {
+      "_id": 20,
+      "title": "Four Thousand Weeks",
+      "description": "Nobody needs to be told there isn’t enough time. We’re obsessed with our lengthening to-do lists, overfilled inboxes, work-life balance, and ceaseless battle against distraction; we’re deluged with advice on becoming more productive and efficient",
+      "category": "business",
+      "trending": false,
+      "coverImage": "book-20.png",
+      "oldPrice": 24.99,
+      "newPrice": 14.99
+    }
+  ]

src/pages/books/BookCard.jsx

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+import { FiShoppingCart } from 'react-icons/fi';
+import { getImgUrl } from '../../utils/getImgUrl';
+import { Link } from 'react-router-dom';
+
+const BookCard = ({ book }) => {
+  const {
+    _id,
+    coverImage,
+    title,
+    description,
+    newPrice,
+    oldPrice,
+  } = book;
+
+  return (
+    <div className="rounded-lg transition-shadow duration-300">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:h-72 sm:justify-center gap-4">
+
+        {/* Book Image */}
+        <div className="sm:h-72 sm:flex-shrink-0 border rounded-md">
+          <Link to={`/books/${_id}`}>
+            <img
+              src={getImgUrl(coverImage)}
+              alt={title}
+              className="w-full h-full object-cover p-2 rounded-md cursor-pointer hover:scale-105 transition-transform duration-200"
+            />
+          </Link>
+        </div>
+
+        {/* Book Details */}
+        <div>
+          {/* Book Title */}
+          <Link to={`/books/${_id}`}>
+            <h3 className="text-xl font-semibold hover:text-blue-600 mb-3">
+              {title}
+            </h3>
+          </Link>
+
+          {/* Book Description */}
+          <p className="text-gray-600 mb-5">
+            {description.length > 80 ? `${description.slice(0, 80)}...` : description}
+          </p>
+
+          {/* Pricing */}
+          <p className="font-medium mb-5">
+            ${newPrice} <span className="line-through font-normal ml-2">${oldPrice}</span>
+          </p>
+
+          {/* Add to Cart Button */}
+          <button className="btn-primary px-6 flex items-center gap-1">
+            <FiShoppingCart />
+            <span>Add to Cart</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookCard;
+
+BookCard.propTypes = {
+  book: PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    coverImage: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    newPrice: PropTypes.number.isRequired,
+    oldPrice: PropTypes.number,
+  }).isRequired,
+};

src/pages/home/Banner.jsx

@@ -0,0 +1,44 @@
+
+const Banner = () => {
+  const slides = [
+    {
+      id: 1,
+      title: "Best Products Available!",
+      description: "Find the latest and greatest products at unbeatable prices.",
+      image: "/banners/banner1.png", 
+    },
+    {
+      id: 2,
+      title: "Huge Discounts!",
+      description: "Shop with massive discounts on top-quality items.",
+      image: "/banners/banner2.png",
+    },
+    {
+      id: 3,
+      title: "Exclusive Offers!",
+      description: "Get exclusive deals only available on our platform.",
+      image: "/banners/banner3.png",
+    },
+  ];
+
+  return (
+    <div className="relative overflow-hidden w-full h-64 md:h-96">
+      <div className="flex animate-slide">
+        {slides.map((slide) => (
+          <div
+            key={slide.id}
+            className="w-full flex-shrink-0 h-64 md:h-96 bg-cover bg-center"
+            style={{ backgroundImage: `url(${slide.image})` }}
+          >
+            <div className="h-full bg-black bg-opacity-50 flex flex-col justify-center items-center text-center text-white">
+              {/* <h2 className="text-2xl md:text-4xl font-bold mb-4">{slide.title}</h2>
+              <p className="text-sm md:text-lg">{slide.description}</p> */}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Banner;