Fix favicon, logo, and product display issues for both localhost and GitHub Pages

Author: stackified

frontend/public/favicon.ico

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "MoreByPrinal",
+  "name": "MoreByPrinal - Where Elegance Meets Tradition",
   "icons": [
     {
       "src": "favicon.ico",
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#008B8B",
   "background_color": "#ffffff"
 }

frontend/public/logo192.png

@@ -21,8 +21,11 @@ import Terms from './pages/Terms';
 const AppContent = () => {
   const { toasts, removeToast } = useToast();
 
+  // Determine basename based on environment
+  const basename = process.env.NODE_ENV === 'production' ? '/morebyprinal' : '/morebyprinal';
+
   return (
-    <Router basename="/morebyprinal">
+    <Router basename={basename}>
       <div className="min-h-screen bg-light-cream">
         <Header />
         <main className="pt-20">

frontend/public/logo512.png

@@ -17,7 +17,7 @@ const ProductCard = ({ product }) => {
           <div className="relative w-full h-80 overflow-hidden">
             {/* Main Image */}
             <img
-              src={product.images[0] || '/images/placeholder-product.jpg'}
+              src={product.images[0] || './images/placeholder-product.jpg'}
               alt={product.name}
               className={`w-full h-80 object-cover transition-all duration-700 transform group-hover:scale-110 ${
                 isHovered && product.images[1] ? 'opacity-0' : 'opacity-100'