added frontend for k8s changes in k8s and comp and pages and dockerfile

Dockerfile

@@ -3,6 +3,10 @@ FROM node:20-alpine AS builder
 
 WORKDIR /app
 
+# Accept build arguments
+ARG VITE_API_BASE_URL
+ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+
 # Install dependencies first (layer-cache friendly)
 COPY package.json package-lock.json ./
 RUN npm ci --frozen-lockfile

k8s/service.yaml

@@ -13,4 +13,5 @@ spec:
       protocol: TCP
       port: 80
       targetPort: 80
-  type: ClusterIP
+      nodePort: 30081
+  type: NodePort

nginx.conf

@@ -14,6 +14,7 @@ server {
     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|avif|webp|woff|woff2|ttf|eot)$ {
         expires 1y;
         add_header Cache-Control "public, immutable";
+        access_log off;
         try_files $uri =404;
     }
 

src/components/home/Category/CategoryCard.jsx

@@ -15,7 +15,7 @@ const CategoryCard = ({ category }) => {
         
         {/* Image */}
         <img
-          src={category.image}
+          src={category.image || "/default-product.png"}
           alt={category.name}
           className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
         />

src/components/home/MostLoved/MostLovedCard.jsx

@@ -91,7 +91,7 @@ const MostLovedCard = ({ product }) => {
   const image =
     product?.images?.gallery?.[0] ||
     product?.images?.primary ||
-    "/placeholder-product.png";
+    "/default-product.png";
 
   const hasOffer =
     product?.compareAtPrice &&

src/components/home/NewGems/NewArrivalCard.jsx

@@ -102,7 +102,7 @@ const NewArrivalCard = ({ product }) => {
     product?.variants?.[0]?.images?.[0] ||
     product?.images?.gallery?.[0] ||
     product?.images?.primary ||
-    "/placeholder-product.png";
+    "/default-product.png";
 
   const price = product?.variants?.[0]?.price || product?.basePrice;
 

src/components/home/RecommendedForYou/RecommendedForYou.jsx

@@ -129,7 +129,7 @@ const RecommendedForYou = ({ limit = 10 }) => {
                   src={
                     product.images?.primary ||
                     product.images?.gallery?.[0] ||
-                    "/placeholder.jpg"
+                    "/default-product.png"
                   }
                   alt={product.name}
                   className="w-full h-full object-cover

src/components/recentlyViewed/RecentlyViewed.jsx

@@ -109,7 +109,7 @@ const RecentlyViewedCard = ({ product, wishlistIds, handleWishlist }) => {
       {/* Image */}
       <div className="relative bg-gray-50 overflow-hidden aspect-[3/4]">
         <img
-          src={product.image || "/placeholder-product.png"}
+          src={product.image || "/default-product.png"}
           alt={product.name}
           className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500"
           loading="lazy"

src/pages/Trending/Trending.jsx

@@ -11,7 +11,7 @@ const Trending = () => {
       <TrendingChips />
 
       {/* Mini Banner */}
-      <MiniBanner title="New Arrivals" img="/hero1.jpg" href="/new-arrivals" />
+      <MiniBanner title="New Arrivals" img="/hero1.png" href="/new-arrivals" />
 
       {/* Trending Circle Row */}
       <TrendingCircleRow />

src/pages/Trending/TrendingCard.jsx

@@ -40,7 +40,7 @@ const TrendingCard = ({ title, img, href }) => {
       <Link to={href}>
         {/* Image */}
         <img
-          src={img}
+          src={img || "/default-product.png"}
           alt={title}
           className="w-full h-44 md:h-52 object-cover transition-transform duration-500 hover:scale-105"
         />

src/pages/Trending/TrendingCircleRow.jsx

@@ -1,10 +1,10 @@
 import TrendingCircle from "./TrendingCircle";
 
 const data = [
-  { title: "Sarees", img: "/hero1.jpg", href: "/sarees" },
+  { title: "Sarees", img: "/hero1.png", href: "/sarees" },
-  { title: "Lehengas", img: "/hero2.jpg", href: "/lehenga" },
+  { title: "Lehengas", img: "/hero2.png", href: "/lehenga" },
-  { title: "Kurtas", img: "/hero3.jpg", href: "/kurtas" },
+  { title: "Kurtas", img: "/hero3.png", href: "/kurtas" },
-  { title: "Patola", img: "/hero1.jpg", href: "/patola" },
+  { title: "Patola", img: "/hero1.png", href: "/patola" },
 ];
 
 const TrendingCircleRow = () => {

src/pages/Trending/TrendingSmallGrid.jsx

@@ -31,10 +31,10 @@
 import TrendingCard from "./TrendingCard";
 
 const smallTrendingData = [
-  { title: "Sarees", img: "/hero1.jpg", href: "/sarees" },
+  { title: "Sarees", img: "/hero1.png", href: "/sarees" },
-  { title: "Lehengas", img: "/hero2.jpg", href: "/lehenga" },
+  { title: "Lehengas", img: "/hero2.png", href: "/lehenga" },
-  { title: "Kurtas", img: "/hero3.jpg", href: "/kurtas" },
+  { title: "Kurtas", img: "/hero3.png", href: "/kurtas" },
-  { title: "Patola", img: "/hero1.jpg", href: "/patola" },
+  { title: "Patola", img: "/hero1.png", href: "/patola" },
 ];
 
 const TrendingSmallGrid = () => {