Add top earning section

Author: ASLAM-stack

public/TopEarnin.json

@@ -0,0 +1,48 @@
+ [
+    {
+      "freelancer_id": 101,
+      "name": "Alice Johnson",
+      "skills": ["Web Development", "JavaScript", "React","MongoDB"],
+      "earnings": 120000,
+      "projects_completed": 35,
+      "rating": 4.9,
+      "image": "/top/person.png"
+    },
+    {
+      "freelancer_id": 102,
+      "name": "Bob Smith",
+      "skills": ["Graphic Design", "Illustrator", "Photoshop"],
+      "earnings": 95000,
+      "projects_completed": 50,
+      "rating": 4.8,
+      "image": "/top/person1.jpg"
+    },
+    {
+      "freelancer_id": 103,
+      "name": "Carol Martinez",
+      "skills": ["Content Writing", "SEO", "Blogging","local SEO"],
+      "earnings": 85000,
+      "projects_completed": 45,
+      "rating": 4.7,
+      "image": "/top/person2.jpg"
+    },
+    {
+      "freelancer_id": 104,
+      "name": "David Brown",
+      "skills": ["Data Analysis", "Python", "Machine Learning"],
+      "earnings": 105000,
+      "projects_completed": 30,
+      "rating": 4.9,
+      "image": "/top/person3.jpg"
+    },
+    {
+      "freelancer_id": 105,
+      "name": "Eva Green",
+      "skills": ["Digital Marketing", "Social Media", "Ad Campaigns"],
+      "earnings": 90000,
+      "projects_completed": 40,
+      "rating": 4.8,
+      "image": "/top/person4.jpg"
+    }
+  ]
+

public/top/person.png

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

public/top/person1.jpg

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import SectionTitle from "../../../Component/SectionTitle";
+import TopEarnCard from "./TopEarnCard";
+
+ 
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/pagination";
+const TopEarn = () => {
+    const [top,setTop] = useState([])
+    useEffect(()=> {
+        fetch('/TopEarnin.json')
+        .then(res => res.json())
+        .then(data =>{
+            console.log(data);
+            setTop(data)
+        })
+    },[])
+    return (
+        <div className="container">
+            <div className="mt-24">
+                <SectionTitle heading={'top Freelancer'} subHeading={'Make Money'}></SectionTitle>
+                <div>
+                <Swiper
+        slidesPerView={1}
+        spaceBetween={10}
+        breakpoints={{
+            640: {
+              slidesPerView: 2,
+              spaceBetween: 20,
+            },
+            768: {
+              slidesPerView: 2,
+              spaceBetween: 40,
+            },
+            1024: {
+              slidesPerView: 3,
+              spaceBetween: 50,
+            },
+          }}
+        freeMode={true}
+        pagination={{
+          clickable: true,
+        }}
+        className="mySwiper mb-12"
+      > 
+                    {
+                        top.map((item,index) => <SwiperSlide key={index}>
+                            <TopEarnCard key={index} item={item}></TopEarnCard>
+                        </SwiperSlide>)
+                    }
+                    </Swiper>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TopEarn;

public/top/person2.jpg

@@ -0,0 +1,41 @@
+ 
+
+ 
+
+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">
+  <figure className="px-10 pt-10 h-[200px]">
+  <div className="avatar">
+  <div className="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
+    <img src={image} />
+  </div>
+</div>
+  </figure>
+  <div className="card-body ">
+    <h2 className="text-2xl font-semibold text-center">{name}</h2>
+    <div className="flex gap-3 flex-wrap">
+    {
+        skills.map((skill,index) => <span key={index} className="p-2 bg-red-200 text-black font-medium rounded-lg">{skill}</span>)
+     }
+    </div>
+    <div className="card-actions flex">
+       <div className=" flex gap-5 justify-between">
+        <p className="text-lg font- meduim">Earnigs: ${earnings} </p>
+        <p className="text-lg font- meduim">Completed Project:{projects_completed} </p>
+         
+       </div>
+       <div className="flex-1">
+        <p>Rataing:{rating}</p>
+       </div>
+    </div>
+  </div>
+</div>
+        </div>
+    );
+};
+
+export default TopEarnCard;