Created My Service Page of vigybag

src/App.jsx

@@ -35,6 +35,11 @@ import FeedbackModal from "./User/components/FeedbackForm/Feedback";
 
 import NotificationPage from "./User/pages/Dashboard/NotificationPage";
 import ProfilePage from "./User/pages/Dashboard/ProfilePage";
+<<<<<<< Updated upstream
+=======
+import CareerPage from "./User/pages/Career-Page/careerPage.jsx";
+import ServicePage from "./User/pages/Service-Page/service.jsx";
+>>>>>>> Stashed changes
 // Admin components
 import AdminVerificationPage from "./User/pages/Admin-Verification/Admin.jsx";
 import AdminLayout from "./Admin/AdminLayout";
@@ -67,7 +72,6 @@ import FurnitureDecor from "./User/pages/Popular_Categories/Furniture-Decor";
 import HealthSupplements from "./User/pages/Popular_Categories/Health-Supplements";
 import PrintingStationery from "./User/pages/Popular_Categories/Printing-Stationery";
 
-
 import { Helmet } from "react-helmet";
 
 // not required imports
@@ -123,7 +127,13 @@ export default function App() {
           <Route path="feedback" element={<FeedbackModal />} /> {/* Feedback page route */}
           <Route path="returnAndCancellation" element={<ReturnAndCancellation />} /> {/* Return and Cancellation page route */}
           <Route path="EPR_Page" element={<EPRPage />} /> {/* EPR page route */}
+<<<<<<< Updated upstream
 
+=======
+          <Route path="Career" element={<CareerPage />} />{" "}
+          <Route path="service" element={<ServicePage />} />{" "}
+          {/* EPR page route */}
+>>>>>>> Stashed changes
           {/* Private routes requiring authentication */}
           <Route element={<PrivateRoute />}>
             <Route path="/admin" element={<AdminLayout />}>
@@ -132,6 +142,7 @@ export default function App() {
               <Route path="vigy_form" element={<VigyForm />} /> {/* Admin Vigy form route */}
               <Route path="product_form" element={<ProductForm />} /> {/* Admin product form route */}
             </Route>
+<<<<<<< Updated upstream
 
             <Route path="dashboard" element={<Dashboard />} /> {/* User dashboard route */}
             <Route path="confirm" element={<Confirmation />} /> {/* Order confirmation route */}
@@ -155,6 +166,41 @@ export default function App() {
             ////
 
             <Route path="profile" element={<ProfilePage />} /> {/* Dashboard Profile route */}
+=======
+            <Route path="dashboard" element={<Dashboard />} />{" "}
+            {/* User dashboard route */}
+            <Route path="confirm" element={<Confirmation />} />{" "}
+            {/* Order confirmation route */}
+            <Route path="cancel" element={<Cancellation />} />{" "}
+            {/* Order cancellation route */}
+            <Route path="orderDetails" element={<OrderDetails />} />{" "}
+            {/* Order details route */}
+            <Route path="myOrders" element={<MyOrders />} />{" "}
+            {/* My orders route */}
+            <Route path="checkout" element={<Checkout />} />{" "}
+            {/* Checkout route */}
+            <Route path="productDetails" element={<ProductDetails />} />{" "}
+            {/* Product details route */}
+            <Route path="payment" element={<Payment />} /> {/* Payment route */}
+            <Route path="dashboard-order" element={<DashboardOrders />} />{" "}
+            {/* Dashboard orders route */}
+            <Route path="dashboard-cart" element={<DashboardCart />} />{" "}
+            {/* Dashboard cart route */}
+            <Route
+              path="dashboard-wishlist"
+              element={<DashboardWishlist />}
+            />{" "}
+            {/* Dashboard wishlist route */}
+            <Route
+              path="dashboard-notifications"
+              element={<NotificationPage />}
+            />{" "}
+            {/* Dashboard notifications route */}
+            //Not in use routes
+            <Route path="blog" element={<Blog />} />
+            <Route path="profile" element={<ProfilePage />} />{" "}
+            {/* Dashboard Profile route */}
+>>>>>>> Stashed changes
           </Route>
                 {/* private route ends */}
 

src/User/components/About/ServiceHeader.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import background from "../../../assets/back.jpg";
+
+function Header() {
+  return (
+    <>
+      <header className="relative h-96 md:h-[100vh] overflow-hidden">
+        <div className="absolute inset-0 z-0">
+          <img
+            // src="https://img.freepik.com/premium-photo/abstract-11-light-background-wallpaper-colorful-gradient-blurry-soft-smooth-motion-bright-shine_792836-34993.jpg"
+            src={background}
+            alt="Background"
+            className="w-full h-full object-cover filter "
+          />
+          <div className="absolute inset-0"></div>
+        </div>
+        <div className="relative z-10 text-center text-green px- mt-32">
+          <h1 className="text-4xl text-white md:text-5xl font-bold mb-2 md:mb-4">
+            Our Service
+          </h1>
+        </div>
+      </header>
+    </>
+  );
+}
+
+export default Header;

src/User/pages/Service-Page/service.jsx

@@ -0,0 +1,149 @@
+import React from "react";
+import accounting from "../../../assets/accounting.jpeg";
+import accountManagement from "../../../assets/accountMangement.jpeg";
+import advertising from "../../../assets/advertising.jpeg";
+import cataloging from "../../../assets/cataloging.jpeg";
+import imaging from "../../../assets/imaging.jpeg";
+import liquadation from "../../../assets/liquadation.jpeg";
+import sellerAcount from "../../../assets/sellerAcount.jpeg";
+import sellerTaining from "../../../assets/sellerTaining.jpeg";
+import sourcing from "../../../assets/sourcing.jpeg";
+import taxation from "../../../assets/taxation.jpeg";
+import warehouse from "../../../assets/warehouse.jpeg";
+
+import Header from "../../components/About/ServiceHeader";
+
+const ServicePage = () => {
+  const leadershipData = [
+    {
+      name: "Account Management",
+      image: accounting,
+      description:
+        "Provide end-to-end services to a host of sellers. Help the sellers build a long term relationship with their customers.",
+    },
+    {
+      name: "Accounting",
+      image: accountManagement,
+      description:
+        "Provide payment reconciliation and integrated accounting services to sellers and help them with enhanced product profitability analysis.",
+    },
+    {
+      name: "Advertising",
+      image: advertising,
+      description:
+        "Lend your advertising services to sellers across the country. Help them promote their products and boost their sales. ",
+    },
+    {
+      name: "Cataloging",
+      image: cataloging,
+      description:
+        "Connect with a host of sellers and help them build an appealing catalogue with compelling content that attracts customers.",
+    },
+    {
+      name: "Imaging",
+      image: imaging,
+      description:
+        "Provide photoshoot and editing services to sellers across the country and help them boost their sales.",
+    },
+    {
+      name: "Liquidation",
+      image: liquadation,
+      description:
+        "Offer your liquidation services to sellers who are willing to sell-off their dead inventory or excess returns.",
+    },
+    {
+      name: "Seller Account Reinstatement",
+      image: sellerAcount,
+      description:
+        "Help sellers in reinstating their suspended accounts and ensure their accounts don't get suspended in future",
+    },
+    {
+      name: "Seller Training",
+      image: sellerTaining,
+      description:
+        "Provide in-person classroom / online training to new sellers & recently onboarded sellers on how to manage and grow their business on VigyBag",
+    },
+    {
+      name: "Software Solutions",
+      image: sellerAcount,
+      description:
+        "Discover software solutions to bring efficiency in your operations.",
+    },
+    {
+      name: "Sourcing",
+      image: sourcing,
+      description:
+        "Have a wide assortment of quality products to offer to the sellers? Connect with sellers across the country who need your services.",
+    },
+    {
+      name: "Taxation",
+      image: taxation,
+      description:
+        "Connect with sellers across India and provide and lend them your assistance in filing taxes and handling money.",
+    },
+    {
+      name: "Warehousing Services",
+      image: warehouse,
+      description:
+        "Provide storage & inventory handling services to recent and existing sellers for non-FBF fulfillment on VigyBag platform at your warehouse locations.",
+    },
+
+    // Add more leadership members as needed
+  ];
+
+  return (
+    <div className="bg-gradient-to-b from-[#fff0e3] to-white min-h-screen">
+      {/*Header Section */}
+      <Header />
+
+      {/* Leadership Section */}
+      <section className="py-12 bg-green-50 md:py-20">
+        <h2 className="text-2xl md:text-2xl font-bold text-center mb-8 md:mb-16 text-green-800 ">
+          SERVICES THAT YOU CAN PROVIDE
+        </h2>
+        <div className="container mx-auto px-16">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
+            {leadershipData.map((leader, index) => (
+              <div
+                key={index}
+                className="bg-white rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 h-[50vh] w-[20vw]">
+                <div className="relative h-48 md:h-50">
+                  <img
+                    src={leader.image}
+                    alt={leader.name}
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                  <div className="absolute bottom-0 left-0 right-0 p-4 md:p-6">
+                    <h3 className="text-xl md:text-xl font-semibold text-white">
+                      {leader.name}
+                    </h3>
+                  </div>
+                </div>
+                <div className="p-4 md:p-6">
+                  <p className="text-sm md:text-base text-gray-600 mb-4">
+                    {leader.description}
+                  </p>
+                  <p className="text-sm text-blue-500">
+                    List Your Service{" "}
+                    <lord-icon
+                      style={{
+                        height: "20px",
+                        width: "20px",
+                        paddingTop: "5px",
+                      }}
+                      src="https://cdn.lordicon.com/vduvxizq.json"
+                      trigger="hover"
+                      colors="primary:#1663c7"></lord-icon>
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default ServicePage;