add Review section

Author: ASLAM-stack

package-lock.json

@@ -13,6 +13,9 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.19",
+    "@smastrom/react-rating": "^1.5.0",
+    "@tanstack/react-query": "^5.40.1",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-awesome-reveal": "^4.2.11",
     "react-dom": "^18.2.0",

package.json

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+ 
+const axiosPublic = axios.create({
+    baseURL:"http://localhost:5000"
+})
+const useAxiosPublic = () => {
+    return axiosPublic
+};
+
+export default useAxiosPublic;

public/happy.png

@@ -0,0 +1,72 @@
+import SectionTitle from "../../../../Component/SectionTitle";
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
+import { useEffect, useState } from "react";
+import { Rating } from "@smastrom/react-rating";
+import '@smastrom/react-rating/style.css';
+import { Swiper, SwiperSlide } from "swiper/react";
+import 'swiper/swiper-bundle.css';
+
+ 
+
+ 
+
+const Review = () => {
+    const [review, setRiew] = useState([]);
+     useEffect(()=>{
+       fetch('http://localhost:5000/reviews')
+       .then(res => res.json())
+       .then(data => {
+        setRiew(data)
+        console.log(data);
+       })
+     },[])
+    return (
+        <div className="container">
+            <div className="mt-24 mb-10">
+                <SectionTitle subHeading={'Happy Client'} heading={"what's our client say"}></SectionTitle>
+                <div className="flex gap-5 flex-wrap p-4">
+                    <div className="md:w-2/5 w-full">
+                        <img src='/happy.png' alt="" />
+                    </div>
+                    <div className="md:w-1/2 w-full md:flex-1">
+                    <Swiper
+            spaceBetween={30}
+            centeredSlides={true}
+            autoplay={{
+              delay: 2500,
+              disableOnInteraction: false,
+            }}
+            pagination={{
+              clickable: true,
+            }}
+            navigation={true}
+            modules={[Autoplay, Pagination, Navigation]}
+            className="mySwiper"
+        >
+          {review.map((item) => (
+            <SwiperSlide key={item._id}>
+
+                <div className="text-center flex flex-col items-center justify-center mx-24 my-16">
+                <div className="avatar">
+  <div className="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2 mb-2">
+    <img src={item.image} />
+  </div>
+</div>
+                <h3 className="text-2xl">{item.name}</h3>
+                    <Rating style={{ maxWidth: 200 }} value={item.rating} readOnly></Rating>
+                     
+                    <p className="py-8">{item.details}</p>
+                    
+                </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+};
+
+export default Review;

src/Hooks/useAxiosPublic.jsx

@@ -2,6 +2,7 @@
 import Step from "./Component/How it's work/Step";
 
 import OurFeatures from "./Component/Our Feature/OurFeatures";
+import Review from "./Component/Review/Review";
 import Slider from "./Component/Slider";
 import TopEarn from "./Top Earning/TopEarn";
 
@@ -14,6 +15,7 @@ const Home = () => {
              <OurFeatures></OurFeatures>
             <Step></Step>
             <TopEarn></TopEarn>
+            <Review></Review>
         </div>
     );
 };

src/Pages/Home/Component/Review/Review.jsx

@@ -15,7 +15,6 @@ const TopEarn = () => {
         fetch('/TopEarnin.json')
         .then(res => res.json())
         .then(data =>{
-            console.log(data);
             setTop(data)
         })
     },[])

src/Pages/Home/Home.jsx

@@ -4,7 +4,6 @@
 
 const TopEarnCard = ({item}) => {
     const {name,skills,earnings,projects_completed,rating,image} = item;
-    console.log(name,skills,earnings,projects_completed,rating,image);
     return (
         <div className="mb-4">
             <div className="card bg-base-100   shadow-xl">