Merge branch 'main' into Manmohan

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "react": "^18.3.1",
+    "react-card-slider-component": "^1.0.9",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-responsive-carousel": "^3.2.23",

src/App.jsx

@@ -36,6 +36,7 @@ import TopCategories from "./pages/TopCategories";
 import ReferralPage from "./pages/Referral";
 import Network from "./components/Network/Network";
 import Afterorder from "./pages/OrderConfirmation";
+import CareersPage from "./pages/CareersPage";
 
 function App() {
   const { pathname } = useLocation();
@@ -97,6 +98,8 @@ function App() {
         <Route path="/divueens-network" element={<Network />} />
         <Route path="/confirm-order" element={<Afterorder />} />
 
+        <Route path="/careers" element={<CareersPage />} />
+
       </Routes>
       <Footer />
     </>

src/assets/assets.js

@@ -120,6 +120,10 @@ export {default as product_3} from "./product-3.jpeg";
 export {default as product_4} from "./product-4.jpg";
 export {default as product_5} from "./product-5.jpeg";
 export {default as product_6} from "./product-6.jpeg";
+export {default as Amazon } from "./CareersPage/amazon.svg";
+export {default as Flipkart } from "./CareersPage/flipkart.svg";
+export {default as PhonePe } from "./CareersPage/phonepe.svg";
+export {default as SnapInc } from "./CareersPage/snapinc.svg";
 
 export const imageUrls = [
   {

src/components/CareersPage/Carousel.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import img1 from '../../assets/CareersPage/1.png'
+import img2 from '../../assets/CareersPage/2.png'
+import img3 from '../../assets/CareersPage/3.png'
+import img4 from '../../assets/CareersPage/4.png'
+import img5 from '../../assets/CareersPage/5.png'
+import { FaArrowCircleLeft, FaArrowCircleRight } from 'react-icons/fa';
+const Carousel = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const images = [
+    { src: img1,label:'Health & Wellness' },
+    { src:img2 , label: 'Work Life Balance' },
+    { src:img3 , label: 'Financial Benefits' },
+    { src:img4, label: 'Office Environment' },
+    { src:img5 , label: 'Remote Opportunities' },
+    { src: img1, label: 'Health & Wellness' },
+    { src:img2, label: 'Work Life Balance' },
+    { src:img3, label: 'Financial Benefits' },
+    { src:img4 , label: 'Office Environment' },
+    { src:img5, label: 'Remote Opportunities' },
+  ];
+
+  const prevSlide = () => {
+    const index = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+    setCurrentIndex(old=>{
+        return old === 0 ? images.length - 1 : old - 1;
+    });
+
+  };
+
+  const nextSlide = () => {
+    // const index = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(old=>{
+        return old === images.length - 1 ? 0 : old + 1;
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-2 w-10/12 my-4 mx-auto">
+      <div className="flex gap-8 overflow-hidden relative">
+        {
+            images.slice(currentIndex,currentIndex + 3).map((image, index) => (
+                <div className="flex-none md:w-1/3 p-4 bg-white transition-all rounded-lg shadow-md border" key={index}>
+                  <img className="w-full h-32 object-cover mb-4 rounded-lg" src={image.src} alt="image" />
+                  <h3 className="text-lg w-full text-center font-bold">{image.label}</h3>
+                </div>
+              ))
+        }
+      </div>
+     <div className="flex place-self-end mt-8">
+     {[{
+        onClick:prevSlide,
+        text:'Prev',
+        icon:<FaArrowCircleLeft />
+      },
+      {
+        onClick:nextSlide,
+        text:'Next',
+        icon:<FaArrowCircleRight />
+      }].map(btn=>{
+        return (
+<button
+        onClick={btn.onClick}
+        className="top-1/2 shadow-xl rounded-full p-2" 
+      >
+        {btn.icon}
+      </button>
+        )
+      })}
+     </div>
+    </div>
+  );
+};
+
+export default Carousel;