Resolve "create a carousel component"

Closes #90 (closed)

src/components/Carousel.js

-import React from "react";
-import useBaseUrl from "@docusaurus/useBaseUrl";
+// import React from "react";
+// import useBaseUrl from "@docusaurus/useBaseUrl";
+// 
+// export default function Carousel({img}) {
+//   return (
+//     <>
+//       <div className="row">
+//         <div className="col-box">
+//           <img src={useBaseUrl(img)} />
+//         </div>
+//       </div>
+//     </>
+//   );
+// }
+import Slider from 'react-slick'
+
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+
+export default function Carousel() {
+
+  const sliderSettings = {
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    infinite: false,
+  }
+
+  const hotelCards = [
+    {
+      imageSrc:
+        'https://images.unsplash.com/photo-1559508551-44bff1de756b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80',
+      title: 'Studio Room',
+      description: 'Lorem ipsum dolor sit amet, consectur dolori',
+      pricingText: 'USD 50/Day',
+      features: ['Free Wifi', 'Free breakfast'],
+    },
+    {
+      imageSrc:
+        'https://images.unsplash.com/photo-1616940844649-535215ae4eb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80',
+      title: 'Deluxe Room',
+      description: 'Lorem ipsum dolor sit amet, consectur dolori',
+      pricingText: 'USD 80/Day',
+      features: ['Free Wifi', 'Free breakfast'],
+    },
+    {
+      imageSrc:
+        'https://images.unsplash.com/photo-1599619351208-3e6c839d6828?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80',
+      title: 'King Deluxe Room',
+      description: 'Lorem ipsum dolor sit amet, consectur dolori',
+      pricingText: 'USD 150/Day',
+      features: ['Free Wifi', 'Free breakfast', 'Discounted Meals'],
+    },
+    {
+      imageSrc:
+        'https://images.unsplash.com/photo-1461092746677-7b4afb1178f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
+      title: 'Royal Suite',
+      description: 'Lorem ipsum dolor sit amet, consectur dolori',
+      pricingText: 'USD 299/Day',
+      features: [
+        'Free Wifi',
+        'Free breakfast',
+        'Discounted Meals',
+        "MacBook for work use (hotel's property)",
+      ],
+    },
+  ]
 
-export default function Carousel({img}) {
   return (
-    <>
-      <div className="row">
-        <div className="col-box">
-          <img src={useBaseUrl(img)} />
-        </div>
-      </div>
-    </>
-  );
+    <div className='content'>
+      <Slider {...sliderSettings}>
+        {hotelCards.map((card, index) => (
+          <div key={index}>
+            <h2>{card.title}</h2>
+            <img alt={card.title} src={card.imageSrc} width="100" height="100" />
+            <p>{card.description}</p>
+            <ul>
+              {card.features.map((feature, index) => (
+                <li key={index}>{feature}</li>
+              ))}
+            </ul>
+            <button className='btn'>Buy Now</button>
+          </div>
+        ))}
+      </Slider>
+    </div>
+  )
 }