Fix Career page layout and improve UI

package.json

@@ -36,6 +36,7 @@
     "react-ctrl-f": "^0.0.4",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.3.0",
     "react-redux": "^9.2.0",

src/App.jsx

@@ -26,6 +26,8 @@ import ProductDetails from "./User/components/Products/ProductDetails";
 import Help from "./User/pages/Help/Help";
 import Privacy from "./User/pages/Privacy-Policy/Privacy";
 import Payment from "./User/pages/Payment/Payment";
+import MeetTheMakers from "./User/pages/MeetTheMakers/MeetTheMakers.jsx";
+
 import ReturnAndCancellation from "./User/pages/ReturnAndCancellation/returnAndCancellation";
 import EPR_Page from "./User/pages/EPRPage/EPR_Page";
 import FAQ from "./User/pages/FAQ/Faq";
@@ -72,7 +74,7 @@ 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";
+import { Helmet } from "react-helmet-async";
 
 // Additional pages
 import Blog from "./User/pages/Blog/Blog.jsx";
@@ -157,6 +159,8 @@ export default function App() {
           {/* Other user routes */}
           <Route path="contributors" element={<Contributors />} />
           <Route path="about-us" element={<AboutUs />} />
+          <Route path="meet-the-makers" element={<MeetTheMakers />} />
+
           <Route path="help" element={<Help />} /> {/* Help page route */}
           <Route path="privacy-policy" element={<Privacy />} />
           {/* Privacy policy page route */}

src/User/components/DownArrow/downArrow.jsx

@@ -1,18 +1,13 @@
 import React from "react";
-import "../../pages/Home/Home.css";
 import Arrow from "../../../assets/arrow.png";
-// Make sure to update the path to your actual image location
 
 const DownArrow = () => {
   return (
-    <div className="down-arrow flex justify-center items-center">
-      <img
-        className="w-12 mt-32 hover:cursor-pointer"
-        src={Arrow}
-        alt="Down Arrow"
-        id="arrow"
-      />
-    </div>
+    <img
+      src={Arrow}
+      alt="Down Arrow"
+      className="w-10 animate-smooth-bounce cursor-pointer"
+    />
   );
 };
 

src/User/components/HomPageCard/CategoryCard.jsx

@@ -3,24 +3,51 @@ import { Link } from "react-router-dom";
 
 const CategoryCard = ({ image, name, path }) => {
   return (
-    <Link to={path} className="block">
+    <Link to={path} className="block group">
       <div
-        className="relative w-full aspect-square max-w-[240px] mx-auto flex items-center justify-center overflow-hidden rounded-lg shadow-md transition-transform hover:scale-105 cursor-pointer"
+        className="relative w-full aspect-square max-w-[240px] mx-auto flex items-center justify-center overflow-hidden rounded-2xl shadow-lg transition-all duration-500 cursor-pointer group-hover:shadow-2xl group-hover:scale-[1.02] border border-white/20"
         style={{
           backgroundImage: `url(${image})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
         }}>
-        <div className="absolute inset-0 bg-black bg-opacity-40 transition-opacity hover:bg-opacity-30"></div>
-        <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-75 px-2 py-2">
-          <h3 className="text-sm sm:text-base md:text-lg font-semibold text-center truncate text-white">
+
+        {/* ENHANCED: Multi-layered overlay with gradient */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent group-hover:from-black/60 group-hover:via-black/20 transition-all duration-500"></div>
+
+        {/* ENHANCED: Subtle shine effect on hover */}
+        <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/0 to-white/0 group-hover:via-white/10 transition-all duration-700"></div>
+
+        {/* ENHANCED: Modern glassmorphic title container */}
+        <div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-white/10 border-t border-white/20 px-3 py-3 group-hover:bg-white/20 transition-all duration-300">
+          <h3 className="text-sm sm:text-base md:text-lg font-bold text-center text-white drop-shadow-lg group-hover:text-emerald-100 transition-colors duration-300">
             {name}
           </h3>
+
+          {/* ENHANCED: Subtle indicator for interactivity */}
+          <div className="flex justify-center mt-1">
+            <div className="w-0 h-0.5 bg-emerald-400 group-hover:w-8 transition-all duration-500 rounded-full"></div>
+          </div>
         </div>
+
+        {/* ENHANCED: Corner accent for premium feel */}
+        <div className="absolute top-3 right-3 w-6 h-6 border-t-2 border-r-2 border-white/40 group-hover:border-emerald-400/60 transition-colors duration-300"></div>
+
+        {/* ENHANCED: Hover state floating icon */}
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-500 scale-75 group-hover:scale-100">
+          <div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/30">
+            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
+          </div>
+        </div>
+
+        {/* ENHANCED: Pulse effect on hover */}
+        <div className="absolute inset-0 rounded-2xl ring-0 group-hover:ring-4 ring-emerald-400/20 transition-all duration-500"></div>
       </div>
     </Link>
   );
 };
 
-export default CategoryCard;
+export default CategoryCard;

src/User/components/HomPageCard/LatestInMarketCard.jsx

@@ -5,18 +5,105 @@ function LatestInMarketCard({ product }) {
   const { name, description, discount, img, path } = product;
 
   return (
-    <Link to={path} className="block">
-      <div className="bg-gray-700 rounded-lg overflow-hidden shadow-lg flex flex-col h-full transition-transform hover:scale-105 cursor-pointer">
-        <div className="relative pb-[60%]">
-          <img src={img} alt={name} className="absolute inset-0 w-full h-full object-cover" />
+    <Link to={path} className="block group">
+      <div className="bg-gradient-to-br from-gray-800 via-gray-700 to-gray-800 rounded-2xl overflow-hidden shadow-xl flex flex-col h-full transition-all duration-500 cursor-pointer group-hover:shadow-2xl group-hover:scale-[1.02] border border-gray-600/50 group-hover:border-emerald-400/30">
+
+        {/* ENHANCED: Image container with overlay effects */}
+        <div className="relative pb-[60%] overflow-hidden">
+          <img 
+            src={img} 
+            alt={name} 
+            className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" 
+          />
+
+          {/* ENHANCED: Gradient overlay for better text contrast */}
+          <div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+
+          {/* ENHANCED: Discount badge - floating design */}
+          <div className="absolute top-3 right-3 transform translate-x-2 group-hover:translate-x-0 transition-transform duration-300">
+            <div className="bg-gradient-to-r from-red-500 to-pink-500 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg backdrop-blur-sm border border-white/20">
+              {discount}
+            </div>
+          </div>
+
+          {/* ENHANCED: Wishlist/favorite icon */}
+          <div className="absolute top-3 left-3 opacity-0 group-hover:opacity-100 transition-all duration-500 transform -translate-x-2 group-hover:translate-x-0">
+            <div className="w-8 h-8 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/30 hover:bg-white/30 transition-colors duration-300">
+              <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+              </svg>
+            </div>
+          </div>
+
+          {/* ENHANCED: Quick view overlay */}
+          <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center">
+            <div className="bg-white/20 backdrop-blur-sm rounded-full p-3 transform scale-75 group-hover:scale-100 transition-transform duration-300 border border-white/30">
+              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              </svg>
+            </div>
+          </div>
         </div>
-        <div className="p-2 sm:p-3 flex flex-col flex-grow">
-          <h2 className="text-sm sm:text-base text-white font-bold mb-1 line-clamp-1">{name}</h2>
-          <p className="text-xs sm:text-sm text-gray-300 mb-2 flex-grow line-clamp-2">{description}</p>
-          <button type="button" className="bg-green-900 text-white text-xs sm:text-sm font-bold py-1 px-2 rounded self-start">
-            {discount}
-          </button>
+
+        {/* ENHANCED: Content section with glassmorphic design */}
+        <div className="p-4 flex flex-col flex-grow backdrop-blur-sm bg-gradient-to-b from-gray-700/80 to-gray-800/80 group-hover:from-gray-600/80 group-hover:to-gray-700/80 transition-all duration-500">
+
+          {/* ENHANCED: Title with better typography */}
+          <h2 className="text-sm sm:text-base text-white font-bold mb-2 line-clamp-1 group-hover:text-emerald-100 transition-colors duration-300 tracking-wide">
+            {name}
+          </h2>
+
+          {/* ENHANCED: Description with improved readability */}
+          <p className="text-xs sm:text-sm text-gray-300 mb-3 flex-grow line-clamp-2 leading-relaxed group-hover:text-gray-200 transition-colors duration-300">
+            {description}
+          </p>
+
+          {/* ENHANCED: Action section with better layout */}
+          <div className="flex items-center justify-between pt-2 border-t border-gray-600/30">
+
+            {/* ENHANCED: Shop now button with modern design */}
+            <button 
+              type="button" 
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white text-xs sm:text-sm font-bold py-2 px-4 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl ring-2 ring-emerald-500/20 hover:ring-emerald-400/40"
+            >
+              Shop Now
+            </button>
+
+            {/* ENHANCED: Add to cart icon button */}
+            <button 
+              type="button" 
+              className="w-8 h-8 bg-gray-600/50 hover:bg-emerald-600 rounded-full flex items-center justify-center transition-all duration-300 transform hover:scale-110 group/btn border border-gray-500/30 hover:border-emerald-400/50"
+              onClick={(e) => {
+                e.preventDefault();
+                // Add to cart logic here
+              }}
+            >
+              <svg className="w-4 h-4 text-gray-300 group-hover/btn:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13l2.5 5m7.5-5a2 2 0 11-4 0 2 2 0 014 0zm-7 0a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+            </button>
+          </div>
+
+          {/* ENHANCED: Product rating/quality indicator */}
+          <div className="flex items-center justify-between mt-2 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-y-2 group-hover:translate-y-0">
+            <div className="flex items-center space-x-1">
+              <div className="flex space-x-0.5">
+                {[...Array(5)].map((_, i) => (
+                  <svg key={i} className="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
+                ))}
+              </div>
+              <span className="text-xs text-gray-400">(4.8)</span>
+            </div>
+
+            <span className="text-xs text-emerald-400 font-medium">Eco-Friendly</span>
+          </div>
         </div>
+
+        {/* ENHANCED: Subtle border glow effect */}
+        <div className="absolute inset-0 rounded-2xl ring-0 group-hover:ring-2 ring-emerald-400/20 transition-all duration-500 pointer-events-none"></div>
       </div>
     </Link>
   );

src/User/components/Navbar/UserNavbar.jsx

@@ -114,6 +114,7 @@ const UserNavbar = ({ isAdmin }) => {
     { to: "/popularCategories/furnitureDecor", text: "Furniture" },
     { to: "/popularCategories/printingStationery", text: "Stationary" },
     { to: "/popularCategories/bodyCare", text: "Body-Care" },
+    //  { to: "/meet-the-makers", text: "Meet the Makers" },
   ];
 
   const handleResultClick = (link) => {
@@ -191,6 +192,13 @@ const UserNavbar = ({ isAdmin }) => {
                             className="block px-4 py-2 text-gray-800 hover:bg-gray-200">
                             Dashboard
                           </Link>
+
+                           <Link
+      to="/meet-the-makers"
+      className="block px-4 py-2 text-gray-800 hover:bg-gray-200"
+    >
+      Meet the Makers
+    </Link>
                           <button
                             onClick={handleLogout}
                             className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left">