Update restaurant components, FAQs, and asset images

convert_avatars.js

@@ -0,0 +1,25 @@
+const sharp = require('sharp');
+const fs = require('fs');
+
+const basePath = 'src/assets/testimonial/';
+const files = [
+    'David Morales.avif',
+    'Emily Carter.avif',
+    'Michael Tan.avif',
+    'Rajesh Kumar.avif'
+];
+
+async function convert() {
+    for (const file of files) {
+        const input = basePath + file;
+        const output = basePath + file.replace('.avif', '.webp');
+        try {
+            await sharp(input).webp().toFile(output);
+            console.log('Converted', file);
+        } catch (e) {
+            console.error('Error converting', file, e);
+        }
+    }
+}
+
+convert();

do_replacements.mjs

@@ -0,0 +1,43 @@
+import fs from 'fs';
+
+// 1. fast-food page
+let fastFoodPath = 'src/app/restaurant-types/fast-food/page.tsx';
+let fastFood = fs.readFileSync(fastFoodPath, 'utf8');
+
+const multiBranchImport = "import FastFoodMultiBranch from '@/assets/restaurant/types/fast-food-restaurant/MULTI BRANCH RESTAURANTS.webp';\n";
+if (!fastFood.includes('FastFoodMultiBranch')) {
+  fastFood = fastFood.replace(/(import FastFood1 [^\n]+\n)/, `$1${multiBranchImport}`);
+}
+
+fastFood = fastFood.replace(
+  /"https:\/\/images\.unsplash\.com\/photo-1552566626-52f8b828add9\?auto=format&fit=crop&q=80&w=800"/,
+  "{FastFoodMultiBranch}"
+);
+fs.writeFileSync(fastFoodPath, fastFood);
+
+// 2. fine-dining page
+let fineDiningPath = 'src/app/restaurant-types/fine-dining/page.tsx';
+let fineDining = fs.readFileSync(fineDiningPath, 'utf8');
+fineDining = fineDining.replace(
+  /"https:\/\/images\.unsplash\.com\/photo-1551218808-94e220e084d2\?auto=format&fit=crop&q=80&w=600",/,
+  "Journey3,"
+);
+fineDining = fineDining.replace(
+  /"https:\/\/images\.unsplash\.com\/photo-1467003909585-2f8a72700288\?auto=format&fit=crop&q=80&w=600",/,
+  "Journey2,"
+);
+fs.writeFileSync(fineDiningPath, fineDining);
+
+// 3. Remove commented out URLs
+let footerPath = 'src/components/Footer.tsx';
+let footer = fs.readFileSync(footerPath, 'utf8');
+footer = footer.replace(/.*https:\/\/cdn-icons-png\.flaticon\.com.*\n/g, "");
+footer = footer.replace(/.*https:\/\/images\.unsplash\.com\/photo-1543353071-10c8ba85a904.*\n/g, "");
+fs.writeFileSync(footerPath, footer);
+
+let testimonialsPath = 'src/components/Testimonials.tsx';
+let testimonials = fs.readFileSync(testimonialsPath, 'utf8');
+testimonials = testimonials.replace(/.*https:\/\/images\.unsplash\.com\/photo-1592924357228-91a4daadcfea.*\n/g, "");
+fs.writeFileSync(testimonialsPath, testimonials);
+
+console.log("Replacements done");

fix_imports.mjs

@@ -0,0 +1,31 @@
+import fs from 'fs';
+import path from 'path';
+
+const dirPath = './src/app/restaurant-types';
+
+function walkDir(dir, callback) {
+  fs.readdirSync(dir).forEach(f => {
+    let p = path.join(dir, f);
+    let isDirectory = fs.statSync(p).isDirectory();
+    isDirectory ? walkDir(p, callback) : callback(p);
+  });
+}
+
+walkDir(dirPath, function(filePath) {
+  if (filePath.endsWith('.tsx')) {
+    let content = fs.readFileSync(filePath, 'utf8');
+    let original = content;
+
+    if (content.includes('[User1, User2, User3]') && !content.includes('User1 from')) {
+        const importStatement = `\nimport User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';\nimport User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';\nimport User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';\n`;
+        
+        // Find the first import and inject after it
+        content = content.replace(/(import [^\n]+\n)/, `$1${importStatement}`);
+
+        if (content !== original) {
+           fs.writeFileSync(filePath, content);
+           console.log(`Fixed imports in ${filePath}`);
+        }
+    }
+  }
+});

replace_faq_img.mjs

@@ -0,0 +1,18 @@
+import fs from 'fs';
+
+let faqPath = 'src/app/faq/page.tsx';
+let faq = fs.readFileSync(faqPath, 'utf8');
+
+const importStatement = "import FaqHeroBg from '@/assets/faq/hero-bg.jpg';\n";
+if (!faq.includes('FaqHeroBg')) {
+  // Inject after first import
+  faq = faq.replace(/(import [^\n]+\n)/, `$1${importStatement}`);
+}
+
+faq = faq.replace(
+  /"https:\/\/images\.unsplash\.com\/photo-1555396273-367ea4eb4db5[^"]+"/,
+  "{FaqHeroBg}"
+);
+
+fs.writeFileSync(faqPath, faq);
+console.log("FAQ page updated successfully!");

src/app/faq/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
+import FaqHeroBg from '@/assets/faq/hero-bg.jpg';
 import Image from 'next/image';
 import { motion, AnimatePresence } from 'framer-motion';
 import Navbar from '@/components/Navbar';
@@ -117,7 +118,7 @@ const FAQPage = () => {
       <section className="relative h-[60vh] min-h-75 flex items-center justify-center overflow-hidden bg-zinc-900 pt-20">
         <div className="absolute inset-0 z-0">
           <Image
-            src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=1974&auto=format&fit=crop"
+            src={FaqHeroBg}
             alt="FAQ Background"
             fill
             className="object-cover opacity-70"

src/app/restaurant-types/bakery/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -38,14 +42,9 @@ const BakeryPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/women/${10 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/bistro/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -36,14 +40,9 @@ const BistroPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${30 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/buffet/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -40,14 +44,9 @@ const BuffetPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/cafe-bistro/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -50,14 +54,9 @@ const CafeBistroPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/women/${30 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/cafeteria/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -36,14 +40,9 @@ const CafeteriaPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/casual-dining/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -49,14 +53,9 @@ const CasualDiningPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/coffee-house/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -53,14 +57,9 @@ const CoffeeHousePage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${40 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/concession/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -35,9 +39,9 @@ const ConcessionPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 20}.jpg`} alt="User" fill className="object-cover" />
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full tracking-tight">Join 2,460+ Restaurants</span>

src/app/restaurant-types/contemporary-casual/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -39,14 +43,9 @@ const ContemporaryCasualPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/delivery-only/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -38,14 +42,9 @@ const DeliveryOnlyPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${60 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/destination/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -50,14 +54,9 @@ const DestinationPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${40 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/digital-only/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -37,9 +41,9 @@ const DigitalOnlyPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image src={`https://randomuser.me/api/portraits/thumb/women/${i + 40}.jpg`} alt="User" fill className="object-cover" />
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full tracking-tight">Join 2,460+ Restaurants</span>

src/app/restaurant-types/diner/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -49,14 +53,9 @@ const DinerPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${50 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/family-style/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -51,14 +55,9 @@ const FamilyStylePage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${30 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/fast-casual/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -41,14 +45,9 @@ const FastCasualPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/fast-food/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -12,6 +16,7 @@ import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Calendar, Menu, A
 
 // Import local assets
 // import FastFood1 from '@/assets/restaurant/types/fast-food-restaurant/1.webp'
+import FastFoodMultiBranch from '@/assets/restaurant/types/fast-food-restaurant/MULTI BRANCH RESTAURANTS.webp';
 // import FastFood2 from '@/assets/restaurant/types/fast-food-restaurant/2.webp'
 import FastFood1 from '@/assets/restaurant/types/fast-food-restaurant/1.webp'
 import FastFood2 from '@/assets/restaurant/types/fast-food-restaurant/2.webp'
@@ -48,14 +53,9 @@ const FastFoodPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${80 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
@@ -518,7 +518,7 @@ const FastFoodPage = () => {
           <div className="relative h-105">
              <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
+               <Image src={FastFoodMultiBranch} alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>

src/app/restaurant-types/fine-dine/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -33,9 +37,9 @@ const FineDiningPage = () => {
         <div className="grid lg:grid-cols-2 gap-10 items-center text-nowrap">
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative border border-zinc-100">
-                  <Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 20}.jpg`} alt="User" fill className="object-cover" />
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-[10px] font-bold bg-zinc-100 px-3 py-1.5 rounded-full tracking-tighter border border-zinc-200 uppercase">PREMIUM CHOICE OF 850+ ESTABLISHMENTS</span>

src/app/restaurant-types/fine-dining/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -33,8 +37,8 @@ const CARD_IMAGES = [
   Hero1,
   Hero2,
   Hero3,
-  "https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&q=80&w=600",
+  Journey3,
-  "https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=600",
+  Journey2,
 ]
 
 const FineDinePage = () => {
@@ -49,14 +53,9 @@ const FineDinePage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${10 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/food-truck/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -49,14 +53,9 @@ const FoodTruckPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${40 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/full-service/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -27,9 +31,9 @@ const FullServicePage = () => {
         <div className="grid lg:grid-cols-2 gap-10 items-center">
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image src={`https://randomuser.me/api/portraits/thumb/women/${i + 30}.jpg`} alt="User" fill className="object-cover" />
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full tracking-tight">Choice of 2,460+ Full-Service Dining</span>

src/app/restaurant-types/ghost-kitchen/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -42,14 +46,9 @@ const GhostKitchenPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${60 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/ghost-restaurant/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -36,14 +40,9 @@ const GhostKitchenPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/mongolian-bbq/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -47,9 +51,9 @@ const MongolianBBQPage = () => {
         <div className="grid lg:grid-cols-2 gap-10 items-center">
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 48}.jpg`} alt="User" fill className="object-cover" />
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">Join 2,460+ Restaurants</span>

src/app/restaurant-types/pop-up/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -49,14 +53,9 @@ const PopUpPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/pub/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -49,14 +53,9 @@ const PubPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/app/restaurant-types/teppanyaki/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -47,9 +51,9 @@ const TeppanyakiPage = () => {
         <div className="grid lg:grid-cols-2 gap-10 items-center">
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 50}.jpg`} alt="User" fill className="object-cover" />
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">Join 2,460+ Restaurants</span>

src/app/restaurant-types/theme/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
 import React from 'react'
+
+import User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';
+import User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';
+import User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
@@ -38,14 +42,9 @@ const ThemeRestaurantPage = () => {
           {/* Left Content */}
           <div className="flex flex-col gap-6 z-10">
             <div className="flex -space-x-2 overflow-hidden items-center mb-2">
-              {[1, 2, 3].map((i) => (
+              {[User1, User2, User3].map((imgSrc, i) => (
                 <div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
-                  <Image
+                  <Image src={imgSrc} alt="User" fill className="object-cover" />
-                    src={`https://randomuser.me/api/portraits/thumb/men/${70 + i}.jpg`}
-                    alt="User"
-                    fill
-                    className="object-cover"
-                  />
                 </div>
               ))}
               <span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">

src/components/Testimonials.tsx

@@ -5,6 +5,12 @@ import Image from 'next/image';
 import { ArrowLeft, ArrowRight, Star, Quote } from 'lucide-react';
 import testimonialImage from '@/assets/testimonial/testimonial.webp';
 
+import RajeshAvatar from '@/assets/testimonial/Rajesh Kumar.webp';
+import EmilyAvatar from '@/assets/testimonial/Emily Carter.webp';
+import MichaelAvatar from '@/assets/testimonial/Michael Tan.webp';
+import AnitaAvatar from '@/assets/testimonial/Anita Sharma.webp';
+import DavidAvatar from '@/assets/testimonial/David Morales.webp';
+
 const testimonials = [
   {
     id: 1,
@@ -12,7 +18,7 @@ const testimonials = [
     role: "Owner, Urban Bites – Chennai",
     quote: "“Peak hours used to feel chaotic. With Dine360, billing is faster, kitchen sync is smooth, and we’ve reduced order mistakes drastically. It’s like having full control over the entire floor.”",
     rating: 5,
-    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&auto=format&fit=crop"
+    avatar: RajeshAvatar
   },
   {
     id: 2,
@@ -20,7 +26,7 @@ const testimonials = [
     role: "Founder, Brew & Bean Café",
     quote: "“We switched from spreadsheets and manual tracking to Dine360. Now inventory, sales, and reservations are all connected. It saves us hours every week and gives us clear performance insights.”",
     rating: 5,
-    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop"
+    avatar: EmilyAvatar
   },
   {
     id: 3,
@@ -28,7 +34,7 @@ const testimonials = [
     role: "Operations Head, Spice Route Group (3 Branches)",
     quote: "“Managing multiple outlets was stressful before. With centralized reporting and branch-wise dashboards, we finally have clarity. Dine360 made scaling much easier.”",
     rating: 5,
-    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=200&auto=format&fit=crop"
+    avatar: MichaelAvatar
   },
   {
     id: 4,
@@ -36,7 +42,7 @@ const testimonials = [
     role: "Owner, Sweet Cravings Bakery",
     quote: "“The inventory tracking feature alone paid for itself. We’ve cut down wastage and improved stock planning significantly. It’s simple, reliable, and built for real restaurant challenges.”",
     rating: 5,
-    avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=200&auto=format&fit=crop"
+    avatar: AnitaAvatar
   },
   {
     id: 5,
@@ -44,7 +50,7 @@ const testimonials = [
     role: "Founder, QuickBite Food Truck",
     quote: "“Running a mobile operation needs speed and flexibility. Dine360 works perfectly on tablets and keeps everything synced — even when we’re on the move.”",
     rating: 5,
-    avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop"
+    avatar: DavidAvatar
   }
 ];
 

update_avatars.mjs

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+
+const dirPath = './src/app/restaurant-types';
+
+function walkDir(dir, callback) {
+  fs.readdirSync(dir).forEach(f => {
+    let p = path.join(dir, f);
+    let isDirectory = fs.statSync(p).isDirectory();
+    isDirectory ? walkDir(p, callback) : callback(p);
+  });
+}
+
+walkDir(dirPath, function(filePath) {
+  if (filePath.endsWith('.tsx')) {
+    let content = fs.readFileSync(filePath, 'utf8');
+    let original = content;
+
+    if (content.includes('randomuser.me')) {
+        const importStatement = `\nimport User1 from '@/assets/restaurant/Join 2,460+ Restaurants/1.jpg';\nimport User2 from '@/assets/restaurant/Join 2,460+ Restaurants/2.jpg';\nimport User3 from '@/assets/restaurant/Join 2,460+ Restaurants/3.jpg';\n`;
+        
+        if (!content.includes('User1 from')) {
+            // Find a good place to insert imports
+            if (content.includes("import React")) {
+                content = content.replace(/(import React.*?from 'react'.*?\n)/, `$1${importStatement}`);
+            } else {
+                content = content.replace(/(import .*?\n)/, `$1${importStatement}`);
+            }
+        }
+
+        // Replace the mapping logic.
+        content = content.replace(/\{\[1,\s*2,\s*3\]\.map\(\([a-zA-Z]+\) => \(/g, '{[User1, User2, User3].map((imgSrc, i) => (');
+        
+        // Regex to match the Image tag spanning multiple lines or single line
+        content = content.replace(/<Image\s+src=\{`https:\/\/randomuser\.me[^`]+`\}\s+alt="User"\s+fill\s+className="object-cover"\s*\/>/g, '<Image src={imgSrc} alt="User" fill className="object-cover" />');
+
+        if (content !== original) {
+           fs.writeFileSync(filePath, content);
+           console.log(`Updated ${filePath}`);
+        } else {
+           console.log(`Failed to update ${filePath} - regex mismatch`);
+        }
+    }
+  }
+});