diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 6cabdae..df3998d 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -52,7 +52,7 @@ const ContactPage = () => {
                   <input 
                     type="text" 
                     placeholder="Enter your first name"
-                    className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
+                    className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
                   />
                 </div>
                 <div className="space-y-2">
@@ -60,7 +60,7 @@ const ContactPage = () => {
                   <input 
                     type="text" 
                     placeholder="Enter your last name"
-                    className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
+                    className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
                   />
                 </div>
               </div>
@@ -70,7 +70,7 @@ const ContactPage = () => {
                 <input 
                   type="email" 
                   placeholder="Enter your email address"
-                  className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
+                  className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
                 />
               </div>
 
@@ -79,7 +79,7 @@ const ContactPage = () => {
                 <textarea 
                   rows={4}
                   placeholder="Tell us how we can help you..."
-                  className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium resize-none"
+                  className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium resize-none"
                 />
               </div>
 
diff --git a/src/app/restaurant-types/bakery/page.tsx b/src/app/restaurant-types/bakery/page.tsx
index 276f83a..f02f2a3 100644
--- a/src/app/restaurant-types/bakery/page.tsx
+++ b/src/app/restaurant-types/bakery/page.tsx
@@ -10,13 +10,21 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Box, Zap, Clock, Target, Store, ShoppingBag, Utensils, Layout, AreaChart } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1509440159596-0249088772ff?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555507036-ab1f4038808a?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1558961363-fa8fdf82db35?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1517433670267-08bbd4be890f?auto=format&fit=crop&q=80&w=600",
-]
+// Asset Imports
+import BakeryLeft from '@/assets/restaurant/types/bakery/left.webp'
+import BakeryCentre from '@/assets/restaurant/types/bakery/centre.webp'
+import BakeryRight from '@/assets/restaurant/types/bakery/right.webp'
+import Bakery1 from '@/assets/restaurant/types/bakery/1.webp'
+import Bakery2 from '@/assets/restaurant/types/bakery/2.webp'
+import Bakery3 from '@/assets/restaurant/types/bakery/3.webp'
+import Bakery4 from '@/assets/restaurant/types/bakery/4.webp'
+import BakeryPOS from '@/assets/restaurant/types/bakery/pos.webp'
+import BakeryOrder from '@/assets/restaurant/types/bakery/order-management.webp'
+import BakeryTable from '@/assets/restaurant/types/bakery/table-reservation.webp'
+import BakeryQR from '@/assets/restaurant/types/bakery/qr-menu.webp'
+import BakeryMulti from '@/assets/restaurant/types/bakery/multi-location.webp'
+
+const JOURNEY_IMAGES = [Bakery1, Bakery2, Bakery3, Bakery4]
 
 const BakeryPage = () => {
   return (
@@ -95,8 +103,8 @@ const BakeryPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Bakery Counter" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={BakeryLeft} alt="Bakery Counter" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                     <p className="text-white font-bold text-2xl">85% Faster</p>
@@ -110,8 +118,8 @@ const BakeryPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Custom Cakes" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={BakeryCentre} alt="Custom Cakes" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Accuracy</p>
                     <p className="text-white font-bold text-2xl">-30% Errors</p>
@@ -125,8 +133,8 @@ const BakeryPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[4]} alt="Inventory Control" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={BakeryRight} alt="Inventory Control" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Real-time</p>
                     <p className="text-white font-bold text-2xl">100% Control</p>
@@ -215,12 +223,12 @@ const BakeryPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Order Tracking" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Order Tracking" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
               <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Box className="w-5 h-5" /></div>
-              <h3 className="text-xl font-bold text-zinc-900 mb-3">Easy Order Tracking</h3>
+              <h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Easy Order Tracking</h3>
               <p className="text-zinc-800 text-sm leading-relaxed font-medium">Track walk-in, pre-orders, and custom cake requests from one view.</p>
             </div>
           </div>
@@ -229,12 +237,12 @@ const BakeryPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Production Workflow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Production Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
               <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Zap className="w-5 h-5" /></div>
-              <h3 className="text-xl font-bold text-zinc-900 mb-3">Organized Production Workflow</h3>
+              <h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Organized Production Workflow</h3>
               <p className="text-zinc-800 text-sm leading-relaxed font-medium">Manage baking schedules and order priorities effortlessly.</p>
             </div>
           </div>
@@ -243,13 +251,13 @@ const BakeryPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Counter Service" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Counter Service" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
               <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Clock className="w-5 h-5" /></div>
-              <h3 className="text-xl font-bold text-zinc-900 mb-3">Faster Service at Counter</h3>
-              <p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce waiting time with quick billing and instant transaction processing.</p>
+              <h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Faster Service at Counter</h3>
+              <p className="text-zinc-800 text-sm leading-relaxed font-medium text-nowrap">Reduce waiting time with quick billing and instant transaction processing.</p>
             </div>
           </div>
 
@@ -257,12 +265,12 @@ const BakeryPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Delivery" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Delivery" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
               <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Target className="w-5 h-5" /></div>
-              <h3 className="text-xl font-bold text-zinc-900 mb-3">Accurate Billing & Delivery</h3>
+              <h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Accurate Billing & Delivery</h3>
               <p className="text-zinc-800 text-sm leading-relaxed font-medium">Ensure every bakery order is delivered correctly and billed accurately.</p>
             </div>
           </div>
@@ -315,7 +323,7 @@ const BakeryPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[0]} alt="Bakery POS" fill className="object-cover rounded-2xl" />
+              <Image src={BakeryPOS} alt="Bakery POS" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -331,7 +339,7 @@ const BakeryPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={BakeryOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -414,7 +422,7 @@ const BakeryPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[3]} alt="Bakery Flow" fill className="object-cover rounded-2xl" />
+              <Image src={BakeryTable} alt="Bakery Flow" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -430,7 +438,7 @@ const BakeryPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[1]} alt="QR Menu" fill className="object-cover rounded-2xl" />
+              <Image src={BakeryQR} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -509,28 +517,8 @@ const BakeryPage = () => {
           </div>
 
           <div className="relative h-[400px] w-full hidden lg:block">
+            <Image src={BakeryMulti} alt="Multi Branch Management" fill className="object-cover opacity-40 mix-blend-overlay" />
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-red-600/20 rounded-full blur-[100px]" />
-            <div className="grid grid-cols-2 gap-4">
-               <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                className="aspect-square bg-white rounded-3xl p-6 shadow-xl relative overflow-hidden"
-              >
-                <Store className="w-8 h-8 text-red-600 mb-4" />
-                <p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Total Branches</p>
-                <p className="text-zinc-900 text-3xl font-bold">12 Outlets</p>
-              </motion.div>
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.1 }}
-                className="aspect-square bg-zinc-800 rounded-3xl p-6 shadow-xl relative mt-8"
-              >
-                <AreaChart className="w-8 h-8 text-red-500 mb-4" />
-                <p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Growth rate</p>
-                <p className="text-white text-3xl font-bold">+28%</p>
-              </motion.div>
-            </div>
           </div>
         </div>
       </section>
diff --git a/src/app/restaurant-types/bistro/page.tsx b/src/app/restaurant-types/bistro/page.tsx
index cd2c710..9327f28 100644
--- a/src/app/restaurant-types/bistro/page.tsx
+++ b/src/app/restaurant-types/bistro/page.tsx
@@ -10,13 +10,19 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target, Utensils, Users, Layout, Sparkles } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1550966841-3ee5ad0110c3?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-]
+// Local Assets
+import LeftImg from '@/assets/restaurant/types/bistro/left.webp';
+import CenterImg from '@/assets/restaurant/types/bistro/center.avif';
+import RightImg from '@/assets/restaurant/types/bistro/right.avif';
+import Step1Img from '@/assets/restaurant/types/bistro/1.avif';
+import Step2Img from '@/assets/restaurant/types/bistro/2.avif';
+import Step3Img from '@/assets/restaurant/types/bistro/3.webp';
+import Step4Img from '@/assets/restaurant/types/bistro/4.avif';
+import PosImg from '@/assets/restaurant/types/bistro/pos.webp';
+import OrderMgmtImg from '@/assets/restaurant/types/bistro/order-management.webp';
+import TableMgmtImg from '@/assets/restaurant/types/bistro/table-reservation.webp';
+import QrMenuImg from '@/assets/restaurant/types/bistro/qr-menu.webp';
+import MultiLocationImg from '@/assets/restaurant/types/bistro/multi-location.webp';
 
 const BistroPage = () => {
   return (
@@ -95,7 +101,7 @@ const BistroPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Bistro Vibe" fill className="object-cover" />
+                <Image src={LeftImg} alt="Bistro Vibe" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
@@ -110,7 +116,7 @@ const BistroPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Cozy Dining" fill className="object-cover" />
+                <Image src={CenterImg} alt="Cozy Dining" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Table Turnover</p>
@@ -125,7 +131,7 @@ const BistroPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Delicious Food" fill className="object-cover" />
+                <Image src={RightImg} alt="Delicious Food" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliability</p>
@@ -215,7 +221,7 @@ const BistroPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Seamless Order Taking" fill className="object-cover" />
+                <Image src={Step1Img} alt="Seamless Order Taking" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -229,7 +235,7 @@ const BistroPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Smooth Kitchen Coordination" fill className="object-cover" />
+                <Image src={Step2Img} alt="Smooth Kitchen Coordination" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -243,7 +249,7 @@ const BistroPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Enhanced Guest Experience" fill className="object-cover" />
+                <Image src={Step3Img} alt="Enhanced Guest Experience" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -257,7 +263,7 @@ const BistroPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Accurate Billing" fill className="object-cover" />
+                <Image src={Step4Img} alt="Accurate Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -315,7 +321,7 @@ const BistroPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="Bistro POS" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="Bistro POS" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -331,7 +337,7 @@ const BistroPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -408,7 +414,7 @@ const BistroPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Seating" fill className="object-cover rounded-2xl" />
+               <Image src={TableMgmtImg} alt="Table Seating" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
@@ -420,7 +426,7 @@ const BistroPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -498,7 +504,7 @@ const BistroPage = () => {
           <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-3xl 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="Bistro Growth" fill className="object-cover rounded-2xl" />
+               <Image src={MultiLocationImg} alt="Bistro Growth" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/buffet/page.tsx b/src/app/restaurant-types/buffet/page.tsx
index 475c2b1..91ac6e8 100644
--- a/src/app/restaurant-types/buffet/page.tsx
+++ b/src/app/restaurant-types/buffet/page.tsx
@@ -10,13 +10,23 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
-]
+// Hero Assets
+import LeftImg from '@/assets/restaurant/types/buffet/left.webp'
+import CentreImg from '@/assets/restaurant/types/buffet/centre.webp'
+import RightImg from '@/assets/restaurant/types/buffet/right.webp'
+
+// Journey Assets
+import Step1Img from '@/assets/restaurant/types/buffet/1.webp'
+import Step2Img from '@/assets/restaurant/types/buffet/2.webp'
+import Step3Img from '@/assets/restaurant/types/buffet/3.webp'
+import Step4Img from '@/assets/restaurant/types/buffet/4.webp'
+
+// Feature Assets
+import PosImg from '@/assets/restaurant/types/buffet/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/buffet/order-management.webp'
+import TableMgmtImg from '@/assets/restaurant/types/buffet/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/buffet/qr-menu.webp'
+import MultiBranchImg from '@/assets/restaurant/types/buffet/multi-location.webp'
 
 const BuffetPage = () => {
   return (
@@ -46,7 +56,7 @@ const BuffetPage = () => {
             </div>
 
             <div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
-              <div className="h-[1px] w-6 bg-red-500" />
+              <div className="h-px w-6 bg-red-500" />
               BUFFET RESTAURANT
             </div>
 
@@ -85,8 +95,8 @@ const BuffetPage = () => {
           </div>
 
           {/* Right Content - Cards */}
-          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
+          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div
@@ -95,8 +105,8 @@ const BuffetPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Buffet Dining" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={LeftImg} alt="Buffet Dining" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                     <p className="text-white font-bold text-2xl">90%</p>
@@ -110,8 +120,8 @@ const BuffetPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Service" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={CentreImg} alt="Service" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Table Turnover</p>
                     <p className="text-white font-bold text-2xl">35%</p>
@@ -125,8 +135,8 @@ const BuffetPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={RightImg} alt="Dining Floor" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
                     <p className="text-white font-bold text-2xl">100%</p>
@@ -139,7 +149,7 @@ const BuffetPage = () => {
       </main>
 
       {/* Intro Section */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-4xl">
         <div className="text-center max-w-4xl mx-auto mb-16">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -147,9 +157,9 @@ const BuffetPage = () => {
             viewport={{ once: true }}
             className="flex items-center justify-center gap-2 mb-6"
           >
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-px w-8 bg-red-500" />
             <span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR BUFFET SERVICE</span>
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-px w-8 bg-red-500" />
           </motion.div>
 
           <motion.h2
@@ -186,7 +196,7 @@ const BuffetPage = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: i * 0.1 }}
-              className="bg-white p-8 rounded-[2.5rem] shadow-sm border border-zinc-100 text-center"
+              className="bg-white p-8 rounded-4xl shadow-sm border border-zinc-100 text-center"
             >
               <p className="text-red-600 font-bold text-4xl mb-2">{stat.value}</p>
               <h4 className="text-zinc-900 font-bold text-lg mb-2">{stat.label}</h4>
@@ -211,11 +221,11 @@ const BuffetPage = () => {
         </div>
 
         <div className="relative max-w-4xl mx-auto">
-          <div className="flex flex-col md:flex-row items-center relative">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Guest Check-In" fill className="object-cover" />
+                <Image src={Step1Img} alt="Guest Check-In" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -225,11 +235,11 @@ const BuffetPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Dining Flow" fill className="object-cover" />
+                <Image src={Step2Img} alt="Dining Flow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -239,11 +249,11 @@ const BuffetPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Waiting Lines" fill className="object-cover" />
+                <Image src={Step3Img} alt="Waiting Lines" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -253,11 +263,11 @@ const BuffetPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={Step4Img} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -270,11 +280,11 @@ const BuffetPage = () => {
       </section>
 
       {/* POS Section */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[2.5rem]">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
         <div className="grid lg:grid-cols-2 gap-12 items-center">
           <div className="flex flex-col gap-6 order-2 lg:order-1">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
@@ -294,7 +304,7 @@ const BuffetPage = () => {
                 "Track daily sales instantly"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -308,14 +318,14 @@ const BuffetPage = () => {
             </div>
           </div>
 
-          <div className="relative h-[400px] w-full order-1 lg:order-2">
+          <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -324,19 +334,19 @@ const BuffetPage = () => {
       {/* Order Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] w-full">
+          <div className="relative h-105 w-full">
              <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
@@ -354,7 +364,7 @@ const BuffetPage = () => {
                 "Monitor preparation status"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -371,12 +381,12 @@ const BuffetPage = () => {
       </section>
 
       {/* Table Management Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
-        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
         <div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-400 font-bold tracking-wider uppercase text-xs">TABLE MANAGEMENT</span>
@@ -406,9 +416,9 @@ const BuffetPage = () => {
               Get Started
             </Link>
           </div>
-          <div className="relative h-[400px]">
-             <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-[1.5rem]" />
+          <div className="relative h-100">
+             <div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
+               <Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
@@ -417,15 +427,15 @@ const BuffetPage = () => {
       {/* QR Code Menu Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] order-2 lg:order-1">
+          <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
-            <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
+            <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">QR MENU</span>
@@ -443,7 +453,7 @@ const BuffetPage = () => {
                 "Highlight buffet options and add-ons"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -460,11 +470,11 @@ const BuffetPage = () => {
       </section>
 
       {/* Multi-Branch Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI LOCATION RESTAURANTS</span>
@@ -482,7 +492,7 @@ const BuffetPage = () => {
                 "Compare branch performance"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -495,10 +505,10 @@ const BuffetPage = () => {
               </Link>
             </div>
           </div>
-          <div className="relative h-[420px]">
+          <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-[2rem] 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-[1.5rem]" />
+            <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
+               <Image src={MultiBranchImg} alt="Multi-Branch Management" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/cafe-bistro/page.tsx b/src/app/restaurant-types/cafe-bistro/page.tsx
index d8b3fe7..07dcda9 100644
--- a/src/app/restaurant-types/cafe-bistro/page.tsx
+++ b/src/app/restaurant-types/cafe-bistro/page.tsx
@@ -8,13 +8,34 @@ import Navbar from '@/components/Navbar'
 import Footer from '@/components/Footer'
 import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
-import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Coffee, Menu, AreaChart, RefreshCw } from 'lucide-react'
+import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Coffee, Menu, AreaChart, RefreshCw, Quote, Star } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import CafeLeft from '@/assets/restaurant/types/cafe/left.webp'
+import CafeCentre from '@/assets/restaurant/types/cafe/centre.webp'
+import CafeRight from '@/assets/restaurant/types/cafe/right.webp'
+import Cafe1 from '@/assets/restaurant/types/cafe/1.webp'
+import Cafe2 from '@/assets/restaurant/types/cafe/2.webp'
+import Cafe3 from '@/assets/restaurant/types/cafe/3.webp'
+import Cafe4 from '@/assets/restaurant/types/cafe/4.webp'
+import POSImg from '@/assets/restaurant/types/cafe/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/cafe/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/cafe/table-reservation.webp'
+import QRMenuImg from '@/assets/restaurant/types/cafe/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/cafe/multi-location.webp'
+import TestimonialImg from '@/assets/restaurant/types/cafe/testimonial.webp'
+
+const HERO_IMAGES = [
+  CafeLeft,
+  CafeCentre,
+  CafeRight,
+]
+
+const JOURNEY_IMAGES = [
+  Cafe1,
+  Cafe2,
+  Cafe3,
+  Cafe4,
 ]
 
 const CafeBistroPage = () => {
@@ -94,7 +115,7 @@ const CafeBistroPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Café Service" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Café Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Speed</p>
@@ -109,7 +130,7 @@ const CafeBistroPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Ordering" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Ordering" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Turnover</p>
@@ -124,7 +145,7 @@ const CafeBistroPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[3]} alt="Kitchen" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Kitchen" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
@@ -214,7 +235,7 @@ const CafeBistroPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Quick Order" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Quick Order" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -228,7 +249,7 @@ const CafeBistroPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Coffee Workflow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Coffee Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -242,7 +263,7 @@ const CafeBistroPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Customer Turnover" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Customer Turnover" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -256,7 +277,7 @@ const CafeBistroPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -315,7 +336,7 @@ const CafeBistroPage = () => {
               viewport={{ once: true }}
             >
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
+                 <Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -332,7 +353,7 @@ const CafeBistroPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -409,7 +430,7 @@ const CafeBistroPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src={CARD_IMAGES[2]} alt="Table Management" fill className="object-cover rounded-3xl" />
+               <Image src={TableReservationImg} alt="Table Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -421,7 +442,7 @@ const CafeBistroPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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={CARD_IMAGES[0]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
+               <Image src={QRMenuImg} alt="Digital Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -499,15 +520,15 @@ const CafeBistroPage = () => {
           <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-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
+               <Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
       </section>
 
-      {/* Testimonials */}
       <Testimonials />
 
+            
       {/* FAQ Section */}
       <FAQ />
       <Footer />
diff --git a/src/app/restaurant-types/cafeteria/page.tsx b/src/app/restaurant-types/cafeteria/page.tsx
index 35e51f4..ee1ea62 100644
--- a/src/app/restaurant-types/cafeteria/page.tsx
+++ b/src/app/restaurant-types/cafeteria/page.tsx
@@ -10,13 +10,19 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1574091417483-376043477164?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1541544741938-0af808871cc0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800",
-  "https://images.unsplash.com/photo-1576402187878-974f70c890a5?auto=format&fit=crop&q=80&w=600",
-]
+// Local Assets
+import LeftImg from '@/assets/restaurant/types/cafeteria/left.webp'
+import CenterImg from '@/assets/restaurant/types/cafeteria/center.avif'
+import RightImg from '@/assets/restaurant/types/cafeteria/right.avif'
+import Step1Img from '@/assets/restaurant/types/cafeteria/1.avif'
+import Step2Img from '@/assets/restaurant/types/cafeteria/2.avif'
+import Step3Img from '@/assets/restaurant/types/cafeteria/3.webp'
+import Step4Img from '@/assets/restaurant/types/cafeteria/4.avif'
+import PosImg from '@/assets/restaurant/types/cafeteria/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/cafeteria/order-management.webp'
+import TableMgmtImg from '@/assets/restaurant/types/cafeteria/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/cafeteria/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/cafeteria/multi-location.webp'
 
 const CafeteriaPage = () => {
   return (
@@ -85,8 +91,8 @@ const CafeteriaPage = () => {
           </div>
 
           {/* Right Content - Cards */}
-          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
+          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div
@@ -95,8 +101,8 @@ const CafeteriaPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Cafeteria View" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={LeftImg} alt="Cafeteria View" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                     <p className="text-white font-bold text-2xl">+90%</p>
@@ -110,8 +116,8 @@ const CafeteriaPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Service Station" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={CenterImg} alt="Service Station" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Queue</p>
                     <p className="text-white font-bold text-2xl">-40%</p>
@@ -125,8 +131,8 @@ const CafeteriaPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Dining Hall" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={RightImg} alt="Dining Hall" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
                     <p className="text-white font-bold text-2xl">100%</p>
@@ -135,7 +141,9 @@ const CafeteriaPage = () => {
               </motion.div>
             </div>
           </div>
-        </div>
+            </div>
+        
+        
       </main>
 
       {/* Intro Section */}
@@ -212,10 +220,10 @@ const CafeteriaPage = () => {
 
         <div className="relative max-w-4xl mx-auto">
           <div className="flex flex-col md:flex-row items-center relative">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Order Processing" fill className="object-cover" />
+                <Image src={Step1Img} alt="Order Processing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -225,11 +233,11 @@ const CafeteriaPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
+                <Image src={Step2Img} alt="Kitchen Coordination" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -239,11 +247,11 @@ const CafeteriaPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Queue Management" fill className="object-cover" />
+                <Image src={Step3Img} alt="Queue Management" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -253,11 +261,11 @@ const CafeteriaPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={Step4Img} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -294,7 +302,7 @@ const CafeteriaPage = () => {
                 "Real-time sales tracking across all stations"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -308,14 +316,14 @@ const CafeteriaPage = () => {
             </div>
           </div>
 
-          <div className="relative h-[400px] w-full order-1 lg:order-2">
+          <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -324,14 +332,14 @@ const CafeteriaPage = () => {
       {/* Order Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] w-full">
+          <div className="relative h-105 w-full">
              <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -354,7 +362,7 @@ const CafeteriaPage = () => {
                 "Manage dine-in and takeaway orders seamlessly"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -372,7 +380,7 @@ const CafeteriaPage = () => {
 
       {/* Table Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
-        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
         <div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
@@ -406,9 +414,9 @@ const CafeteriaPage = () => {
               Get Started
             </Link>
           </div>
-          <div className="relative h-[400px]">
+          <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-2xl" />
+               <Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
@@ -417,10 +425,10 @@ const CafeteriaPage = () => {
       {/* QR Code Menu Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] order-2 lg:order-1">
+          <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -443,7 +451,7 @@ const CafeteriaPage = () => {
                 "Highlight daily specials and offers"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -482,7 +490,7 @@ const CafeteriaPage = () => {
                 "Track performance of each location instantly"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -495,10 +503,10 @@ const CafeteriaPage = () => {
               </Link>
             </div>
           </div>
-          <div className="relative h-[420px]">
+          <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-3xl 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-Location Management" fill className="object-cover rounded-2xl" />
+               <Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/casual-dining/page.tsx b/src/app/restaurant-types/casual-dining/page.tsx
index 1c08f73..73ae9d8 100644
--- a/src/app/restaurant-types/casual-dining/page.tsx
+++ b/src/app/restaurant-types/casual-dining/page.tsx
@@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import CasualDiningLeft from '@/assets/restaurant/types/casual-dining/left.webp'
+import CasualDiningCentre from '@/assets/restaurant/types/casual-dining/centre.webp'
+import CasualDiningRight from '@/assets/restaurant/types/casual-dining/right.webp'
+import CasualDining1 from '@/assets/restaurant/types/casual-dining/1.webp'
+import CasualDining2 from '@/assets/restaurant/types/casual-dining/2.webp'
+import CasualDining3 from '@/assets/restaurant/types/casual-dining/3.webp'
+import CasualDining4 from '@/assets/restaurant/types/casual-dining/4.webp'
+import POSImg from '@/assets/restaurant/types/casual-dining/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/casual-dining/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/casual-dining/table-reservation.webp'
+import QRMenuImg from '@/assets/restaurant/types/casual-dining/qr-menu.webp'
+import MultiBranchImg from '@/assets/restaurant/types/casual-dining/multi-location.webp'
+
+const HERO_IMAGES = [
+  CasualDiningLeft,
+  CasualDiningCentre,
+  CasualDiningRight,
+]
+
+const JOURNEY_IMAGES = [
+  CasualDining1,
+  CasualDining2,
+  CasualDining3,
+  CasualDining4,
 ]
 
 const CasualDiningPage = () => {
@@ -95,7 +114,7 @@ const CasualDiningPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Casual Dining" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Casual Dining" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
@@ -110,7 +129,7 @@ const CasualDiningPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Service" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Revenue</p>
@@ -125,7 +144,7 @@ const CasualDiningPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
@@ -211,11 +230,11 @@ const CasualDiningPage = () => {
         </div>
 
         <div className="relative max-w-4xl mx-auto">
-          <div className="flex flex-col md:flex-row items-center relative">
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -229,7 +248,7 @@ const CasualDiningPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Syncing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Syncing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -243,7 +262,7 @@ const CasualDiningPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Queue" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Queue" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -257,7 +276,7 @@ const CasualDiningPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Delivery" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Delivery" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -315,7 +334,7 @@ const CasualDiningPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -331,7 +350,7 @@ const CasualDiningPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -408,7 +427,7 @@ const CasualDiningPage = () => {
           </div>
           <div className="relative h-[400px]">
              <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={TableReservationImg} alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
@@ -420,7 +439,7 @@ const CasualDiningPage = () => {
           <div className="relative h-[420px] order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={QRMenuImg} alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -498,7 +517,7 @@ const CasualDiningPage = () => {
           <div className="relative h-[420px]">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] 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-[1.5rem]" />
+               <Image src={MultiBranchImg} alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/coffee-house/page.tsx b/src/app/restaurant-types/coffee-house/page.tsx
index 57f593c..f65c0e6 100644
--- a/src/app/restaurant-types/coffee-house/page.tsx
+++ b/src/app/restaurant-types/coffee-house/page.tsx
@@ -10,12 +10,35 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Coffee, Utensils, Users, Store } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1541167760496-162955ed8a9f?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1453614512568-c4024d13c247?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import CoffeeHouseLeft from '@/assets/restaurant/types/coffee-house/left.webp'
+import CoffeeHouseCentre from '@/assets/restaurant/types/coffee-house/center.avif'
+import CoffeeHouseRight from '@/assets/restaurant/types/coffee-house/right.avif'
+import CoffeeHouse1 from '@/assets/restaurant/types/coffee-house/1.avif'
+import CoffeeHouse2 from '@/assets/restaurant/types/coffee-house/2.avif'
+import CoffeeHouse3 from '@/assets/restaurant/types/coffee-house/3.avif'
+import CoffeeHouse4 from '@/assets/restaurant/types/coffee-house/4.avif'
+import POSImg from '@/assets/restaurant/types/coffee-house/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/coffee-house/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/coffee-house/table-reservation.webp'
+import QRMenuImg from '@/assets/restaurant/types/coffee-house/qr-menu.webp'
+import MultiBranchImg from '@/assets/restaurant/types/coffee-house/multi-location.webp'
+import Multi1 from '@/assets/restaurant/types/coffee-house/multi 1.webp'
+import Multi2 from '@/assets/restaurant/types/coffee-house/multi 2.avif'
+import Multi3 from '@/assets/restaurant/types/coffee-house/multi 3.avif'
+import Multi4 from '@/assets/restaurant/types/coffee-house/multi 4.avif'
+
+const HERO_IMAGES = [
+  CoffeeHouseLeft,
+  CoffeeHouseCentre,
+  CoffeeHouseRight,
+]
+
+const JOURNEY_IMAGES = [
+  CoffeeHouse1,
+  CoffeeHouse2,
+  CoffeeHouse3,
+  CoffeeHouse4,
 ]
 
 const CoffeeHousePage = () => {
@@ -90,7 +113,7 @@ const CoffeeHousePage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Coffee House" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Coffee House" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Order Delivery</p>
@@ -105,7 +128,7 @@ const CoffeeHousePage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Coffee Service" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Coffee Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Turnover</p>
@@ -120,7 +143,7 @@ const CoffeeHousePage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Coffee Counter" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Coffee Counter" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
@@ -208,11 +231,11 @@ const CoffeeHousePage = () => {
         </div>
 
         <div className="relative max-w-4xl mx-auto">
-          <div className="flex flex-col md:flex-row items-center relative">
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Quick Coffee Orders" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Quick Coffee Orders" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -226,7 +249,7 @@ const CoffeeHousePage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Efficient Preparation" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Efficient Preparation" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -240,7 +263,7 @@ const CoffeeHousePage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Reduced Wait Time" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Reduced Wait Time" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -254,7 +277,7 @@ const CoffeeHousePage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Accurate Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -306,7 +329,7 @@ const CoffeeHousePage = () => {
           </div>
           <div className="order-1 lg:order-2">
             <div className="relative h-[400px] w-full rounded-[2.5rem] overflow-hidden shadow-2xl border-8 border-white">
-              <Image src={CARD_IMAGES[0]} alt="POS System" fill className="object-cover" />
+              <Image src={POSImg} alt="POS System" fill className="object-cover" />
             </div>
           </div>
         </div>
@@ -318,7 +341,7 @@ const CoffeeHousePage = () => {
           <div className="relative h-[400px] w-full">
             <div className="absolute inset-0 bg-red-50 rounded-[2.5rem] rotate-3" />
             <div className="relative h-full w-full rounded-[2.5rem] overflow-hidden shadow-2xl border-8 border-white">
-              <Image src={CARD_IMAGES[1]} alt="Order Management" fill className="object-cover" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover" />
             </div>
           </div>
           <div className="flex flex-col gap-6">
@@ -393,8 +416,8 @@ const CoffeeHousePage = () => {
           </div>
           <div className="relative flex items-center justify-center">
              <div className="absolute w-[120%] h-[120%] bg-red-600/20 rounded-full blur-3xl -z-10" />
-             <div className="relative h-[450px] w-full max-w-sm rounded-[3rem] overflow-hidden border-8 border-zinc-800 shadow-2xl">
-                <Image src={CARD_IMAGES[2]} alt="Table Management" fill className="object-cover" />
+             <div className="relative h-[450px] w-full max-sm:max-w-xs max-w-sm rounded-[3rem] overflow-hidden border-8 border-zinc-800 shadow-2xl">
+                <Image src={TableReservationImg} alt="Table Management" fill className="object-cover" />
              </div>
           </div>
         </div>
@@ -412,8 +435,8 @@ const CoffeeHousePage = () => {
             >
                <div className="w-full h-full bg-white rounded-[2.5rem] p-4 flex flex-col items-center">
                   <div className="w-12 h-1 bg-zinc-200 rounded-full mb-8 mt-2" />
-                  <div className="w-full aspect-square bg-zinc-50 rounded-2xl flex items-center justify-center mb-6">
-                     <Smartphone className="w-12 h-12 text-red-600" />
+                  <div className="w-full aspect-square bg-zinc-50 rounded-2xl flex items-center justify-center mb-6 overflow-hidden relative">
+                     <Image src={QRMenuImg} alt="QR Menu" fill className="object-cover" />
                   </div>
                   <div className="w-full space-y-3">
                     <div className="h-4 bg-zinc-100 rounded-full w-3/4 mx-auto" />
@@ -493,16 +516,16 @@ const CoffeeHousePage = () => {
           </div>
           <div className="relative grid grid-cols-2 gap-4">
              <div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white translate-y-8">
-               <Image src={CARD_IMAGES[3]} alt="Branch 1" fill className="object-cover" />
+               <Image src={Multi1} alt="Branch 1" fill className="object-cover" />
              </div>
              <div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white">
-               <Image src={CARD_IMAGES[4]} alt="Branch 2" fill className="object-cover" />
+               <Image src={Multi2} alt="Branch 2" fill className="object-cover" />
              </div>
              <div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white translate-y-8">
-               <Image src={CARD_IMAGES[0]} alt="Branch 3" fill className="object-cover" />
+               <Image src={Multi3} alt="Branch 3" fill className="object-cover" />
              </div>
              <div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white">
-               <Image src={CARD_IMAGES[1]} alt="Branch 4" fill className="object-cover" />
+               <Image src={Multi4} alt="Branch 4" fill className="object-cover" />
              </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/concession/page.tsx b/src/app/restaurant-types/concession/page.tsx
index ccc83ff..391bcb3 100644
--- a/src/app/restaurant-types/concession/page.tsx
+++ b/src/app/restaurant-types/concession/page.tsx
@@ -8,15 +8,21 @@ import Navbar from '@/components/Navbar'
 import Footer from '@/components/Footer'
 import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
-import { Check, Zap, Clock, Target, Smartphone, RefreshCw } from 'lucide-react'
+import { Check, Zap, Clock, Target, Smartphone, RefreshCw, Box, ChevronRight } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1541544741938-0af808871cc0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1574091417483-376043477164?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1576402187878-974f70c890a5?auto=format&fit=crop&q=80&w=600",
-]
+// Local Assets
+import LeftImg from '@/assets/restaurant/types/concession-stand/left.webp'
+import CenterImg from '@/assets/restaurant/types/concession-stand/centre.webp'
+import RightImg from '@/assets/restaurant/types/concession-stand/right.webp'
+import PosImg from '@/assets/restaurant/types/concession-stand/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/concession-stand/order-management.webp'
+import MultiLocationImg from '@/assets/restaurant/types/concession-stand/multi-location.webp'
+import QrMenuImg from '@/assets/restaurant/types/concession-stand/qr-menu.webp'
+import ServiceMgmtImg from '@/assets/restaurant/types/concession-stand/SERVICE MANAGEMENT.webp'
+import Img1 from '@/assets/restaurant/types/concession-stand/1.webp'
+import Img2 from '@/assets/restaurant/types/concession-stand/2.webp'
+import Img3 from '@/assets/restaurant/types/concession-stand/3.webp'
+import Img4 from '@/assets/restaurant/types/concession-stand/4.webp'
 
 const ConcessionPage = () => {
   return (
@@ -66,19 +72,26 @@ const ConcessionPage = () => {
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
-                <Image src={CARD_IMAGES[0]} alt="Concession Service" fill className="object-cover" />
+                <Image src={LeftImg} alt="Concession Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Crowd Speed</p>
                   <p className="text-white font-bold text-2xl">95% Faster</p>
                 </div>
               </motion.div>
               <motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
-                <Image src={CARD_IMAGES[1]} alt="Snack Billing" fill className="object-cover" />
+                <Image src={CenterImg} alt="Snack Billing" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Queue Efficiency</p>
                   <p className="text-white font-bold text-2xl">40% Less</p>
                 </div>
               </motion.div>
+              <motion.div className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left" initial={{ opacity: 0, x: 50, rotate: 20 }} animate={{ opacity: 1, x: 0, rotate: 12 }} transition={{ duration: 0.8, delay: 0.4 }}>
+                <Image src={RightImg} alt="Queue Management" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
+                  <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Rapid Flow</p>
+                  <p className="text-white font-bold text-2xl">100% Reliable</p>
+                </div>
+              </motion.div>
             </div>
           </div>
         </div>
@@ -133,10 +146,10 @@ const ConcessionPage = () => {
         <div className="relative max-w-4xl mx-auto">
           {/* Step 1 */}
           <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Rapid Order" fill className="object-cover" />
+                <Image src={Img1} alt="Rapid Order" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -148,10 +161,10 @@ const ConcessionPage = () => {
 
           {/* Step 2 */}
           <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Smooth Service" fill className="object-cover" />
+                <Image src={Img2} alt="Smooth Service" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -163,10 +176,10 @@ const ConcessionPage = () => {
 
           {/* Step 3 */}
           <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Short Lines" fill className="object-cover" />
+                <Image src={Img3} alt="Short Lines" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -178,10 +191,10 @@ const ConcessionPage = () => {
 
           {/* Step 4 */}
           <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
+                <Image src={Img4} alt="Accurate Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -232,7 +245,7 @@ const ConcessionPage = () => {
           <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[4]} alt="POS System" fill className="object-cover rounded-2xl" />
+                 <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -244,7 +257,7 @@ const ConcessionPage = () => {
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="relative h-105 w-full">
              <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
-              <Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -321,7 +334,7 @@ const ConcessionPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src={CARD_IMAGES[2]} alt="Service Management" fill className="object-cover rounded-3xl" />
+               <Image src={ServiceMgmtImg} alt="Service Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -333,7 +346,7 @@ const ConcessionPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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={CARD_IMAGES[1]} alt="QR Menu" fill className="object-cover rounded-3xl" />
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -411,7 +424,7 @@ const ConcessionPage = () => {
           <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-Location Management" fill className="object-cover rounded-3xl" />
+               <Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/contemporary-casual/page.tsx b/src/app/restaurant-types/contemporary-casual/page.tsx
index 9e09609..095885b 100644
--- a/src/app/restaurant-types/contemporary-casual/page.tsx
+++ b/src/app/restaurant-types/contemporary-casual/page.tsx
@@ -10,13 +10,22 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target, Utensils, Users, Layout, Sparkles } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1550961102-149b16afb386?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=600",
-]
+// Local Assets
+import LeftImg from '@/assets/restaurant/types/contemporary/left.avif'
+import CenterImg from '@/assets/restaurant/types/contemporary/center.avif'
+import RightImg from '@/assets/restaurant/types/contemporary/right.webp'
+import Step1Img from '@/assets/restaurant/types/contemporary/1.avif'
+import Step2Img from '@/assets/restaurant/types/contemporary/2.avif'
+import Step3Img from '@/assets/restaurant/types/contemporary/3.avif'
+import Step4Img from '@/assets/restaurant/types/contemporary/4.avif'
+import PosImg from '@/assets/restaurant/types/contemporary/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/contemporary/order-management.webp'
+import TableMgmtImg from '@/assets/restaurant/types/contemporary/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/contemporary/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/contemporary/multi-location.webp'
+
+const HERO_IMAGES = [LeftImg, CenterImg, RightImg]
+const JOURNEY_IMAGES = [Step1Img, Step2Img, Step3Img, Step4Img]
 
 const ContemporaryCasualPage = () => {
   return (
@@ -85,8 +94,8 @@ const ContemporaryCasualPage = () => {
           </div>
 
           {/* Right Content - Cards */}
-          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
+          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div
@@ -95,8 +104,8 @@ const ContemporaryCasualPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Dining Experience" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={HERO_IMAGES[0]} alt="Dining Experience" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                     <p className="text-white font-bold text-2xl">85%</p>
@@ -110,8 +119,8 @@ const ContemporaryCasualPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Modern Table" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={HERO_IMAGES[1]} alt="Modern Table" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Service</p>
                     <p className="text-white font-bold text-2xl">35%</p>
@@ -125,8 +134,8 @@ const ContemporaryCasualPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Signature Dish" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={HERO_IMAGES[2]} alt="Signature Dish" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliability</p>
                     <p className="text-white font-bold text-2xl">100%</p>
@@ -212,10 +221,10 @@ const ContemporaryCasualPage = () => {
 
         <div className="relative max-w-4xl mx-auto">
           <div className="flex flex-col md:flex-row items-center relative">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Order Handling" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -225,11 +234,11 @@ const ContemporaryCasualPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -239,11 +248,11 @@ const ContemporaryCasualPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Guest Experience" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Guest Experience" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -253,11 +262,11 @@ const ContemporaryCasualPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -294,7 +303,7 @@ const ContemporaryCasualPage = () => {
                 "Real-time sales tracking"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -308,14 +317,14 @@ const ContemporaryCasualPage = () => {
             </div>
           </div>
 
-          <div className="relative h-[400px] w-full order-1 lg:order-2">
+          <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -324,14 +333,14 @@ const ContemporaryCasualPage = () => {
       {/* Order Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] w-full">
+          <div className="relative h-105 w-full">
              <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -354,7 +363,7 @@ const ContemporaryCasualPage = () => {
                 "Monitor preparation time"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -372,7 +381,7 @@ const ContemporaryCasualPage = () => {
 
       {/* Table Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
-        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
         <div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
@@ -406,9 +415,9 @@ const ContemporaryCasualPage = () => {
               Get Started
             </Link>
           </div>
-          <div className="relative h-[400px]">
+          <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-2xl" />
+               <Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
@@ -417,10 +426,10 @@ const ContemporaryCasualPage = () => {
       {/* QR Code Menu Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] order-2 lg:order-1">
+          <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -443,7 +452,7 @@ const ContemporaryCasualPage = () => {
                 "Instant menu updates"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -482,7 +491,7 @@ const ContemporaryCasualPage = () => {
                 "Track sales and analytics"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -495,10 +504,10 @@ const ContemporaryCasualPage = () => {
               </Link>
             </div>
           </div>
-          <div className="relative h-[420px]">
+          <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-3xl 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 Location" fill className="object-cover rounded-2xl" />
+               <Image src={MultiLocationImg} alt="Multi Location" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/delivery-only/page.tsx b/src/app/restaurant-types/delivery-only/page.tsx
index ec51d66..eb31c95 100644
--- a/src/app/restaurant-types/delivery-only/page.tsx
+++ b/src/app/restaurant-types/delivery-only/page.tsx
@@ -8,15 +8,23 @@ import Navbar from '@/components/Navbar'
 import Footer from '@/components/Footer'
 import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
-import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart, Truck } from 'lucide-react'
+import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart, Truck, ChevronRight } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=800",
-  "https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&q=80&w=800",
-  "https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&q=80&w=800",
-  "https://images.unsplash.com/photo-1616733148217-1bb14305490e?auto=format&fit=crop&q=80&w=800",
-]
+// Local Assets
+import LeftImg from '@/assets/restaurant/types/delivery-only/left.webp'
+import CenterImg from '@/assets/restaurant/types/delivery-only/centre.webp'
+import RightImg from '@/assets/restaurant/types/delivery-only/right.webp'
+import PosImg from '@/assets/restaurant/types/delivery-only/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/delivery-only/order-management.webp'
+import DeliveryMgmtImg from '@/assets/restaurant/types/delivery-only/delivery-management.webp'
+import DigitalMenuImg from '@/assets/restaurant/types/delivery-only/digital-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/delivery-only/multi-location.webp'
+import UberIntegrationImg from '@/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp'
+import RestaurantImg from '@/assets/restaurant/types/food-truck/testimonial.webp'
+import Img1 from '@/assets/restaurant/types/delivery-only/1.webp'
+import Img2 from '@/assets/restaurant/types/delivery-only/2.webp'
+import Img3 from '@/assets/restaurant/types/delivery-only/3.webp'
+import Img4 from '@/assets/restaurant/types/delivery-only/4.webp'
 
 const DeliveryOnlyPage = () => {
   return (
@@ -24,7 +32,7 @@ const DeliveryOnlyPage = () => {
       <Navbar />
 
       {/* Hero Section */}
-      <main className="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden">
+      <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden">
         <div className="grid lg:grid-cols-2 gap-10 items-center">
 
           {/* Left Content */}
@@ -46,7 +54,7 @@ const DeliveryOnlyPage = () => {
             </div>
 
             <div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
-              <div className="h-[1px] w-6 bg-red-500" />
+              <div className="h-0.5 w-6 bg-red-500" />
               DELIVERY-ONLY OPERATIONS
             </div>
 
@@ -85,8 +93,8 @@ const DeliveryOnlyPage = () => {
           </div>
 
           {/* Right Content - Cards */}
-          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
+          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div
@@ -95,8 +103,8 @@ const DeliveryOnlyPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Delivery Hub" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={LeftImg} alt="Delivery Hub" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                     <p className="text-white font-bold text-2xl">3X Faster</p>
@@ -110,8 +118,8 @@ const DeliveryOnlyPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Operations" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={CenterImg} alt="Kitchen Operations" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Operational</p>
                     <p className="text-white font-bold text-2xl">+40%</p>
@@ -125,8 +133,8 @@ const DeliveryOnlyPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Cloud System" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={RightImg} alt="Cloud System" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliable</p>
                     <p className="text-white font-bold text-2xl">100% Cloud</p>
@@ -136,10 +144,10 @@ const DeliveryOnlyPage = () => {
             </div>
           </div>
         </div>
-      </main>
+      </section>
 
       {/* Stats Section */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-6xl">
         <div className="text-center max-w-4xl mx-auto mb-16">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -147,9 +155,9 @@ const DeliveryOnlyPage = () => {
             viewport={{ once: true }}
             className="flex items-center justify-center gap-2 mb-6"
           >
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-0.5 w-8 bg-red-500" />
             <span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR DELIVERY-FIRST BRANDS</span>
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-0.5 w-8 bg-red-500" />
           </motion.div>
 
           <motion.h2
@@ -186,7 +194,7 @@ const DeliveryOnlyPage = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: i * 0.1 }}
-              className="bg-white p-8 rounded-[2.5rem] shadow-sm border border-zinc-100 text-center"
+              className="bg-white p-8 rounded-4xl shadow-sm border border-zinc-100 text-center"
             >
               <p className="text-red-600 font-bold text-4xl mb-2">{stat.value}</p>
               <h4 className="text-zinc-900 font-bold text-lg mb-2">{stat.label}</h4>
@@ -212,10 +220,10 @@ const DeliveryOnlyPage = () => {
 
         <div className="relative max-w-4xl mx-auto">
           <div className="flex flex-col md:flex-row items-center relative">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
-              <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Centralized Orders" fill className="object-cover" />
+              <div className="relative h-36 w-full rounded-3xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
+                <Image src={Img1} alt="Centralized Orders" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -225,11 +233,11 @@ const DeliveryOnlyPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
-              <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
+              <div className="relative h-36 w-full rounded-3xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
+                <Image src={Img2} alt="Kitchen Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -239,11 +247,11 @@ const DeliveryOnlyPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
-              <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Order Fulfillment" fill className="object-cover" />
+              <div className="relative h-36 w-full rounded-3xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
+                <Image src={Img3} alt="Order Fulfillment" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -253,11 +261,11 @@ const DeliveryOnlyPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
-              <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Order Handling" fill className="object-cover" />
+              <div className="relative h-36 w-full rounded-3xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
+                <Image src={Img4} alt="Order Handling" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -274,7 +282,7 @@ const DeliveryOnlyPage = () => {
         <div className="grid lg:grid-cols-2 gap-12 items-center">
           <div className="flex flex-col gap-6 order-2 lg:order-1">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
@@ -294,7 +302,7 @@ const DeliveryOnlyPage = () => {
                 "Secure digital payments"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -308,7 +316,7 @@ const DeliveryOnlyPage = () => {
             </div>
           </div>
 
-          <div className="relative h-[400px] w-full order-1 lg:order-2">
+          <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
               initial={{ opacity: 0, scale: 0.95 }}
@@ -316,7 +324,7 @@ const DeliveryOnlyPage = () => {
               viewport={{ once: true }}
             >
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[0]} alt="Delivery POS" fill className="object-cover rounded-2xl" />
+                 <Image src={PosImg} alt="Delivery POS" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -326,19 +334,19 @@ const DeliveryOnlyPage = () => {
       {/* Order Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] w-full">
+          <div className="relative h-105 w-full">
              <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
@@ -356,7 +364,7 @@ const DeliveryOnlyPage = () => {
                 "Reduce order mistakes"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -373,12 +381,12 @@ const DeliveryOnlyPage = () => {
       </section>
 
       {/* Delivery Flow Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
-        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-6xl overflow-hidden relative">
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
         <div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-400 font-bold tracking-wider uppercase text-xs">DELIVERY MANAGEMENT</span>
@@ -408,9 +416,9 @@ const DeliveryOnlyPage = () => {
               Get Started
             </Link>
           </div>
-          <div className="relative h-[400px]">
-             <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src={CARD_IMAGES[1]} alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
+          <div className="relative h-100">
+             <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
+               <Image src={DeliveryMgmtImg} alt="Delivery Flow" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -419,15 +427,15 @@ const DeliveryOnlyPage = () => {
       {/* Menu Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] order-2 lg:order-1">
+          <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
-            <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src={CARD_IMAGES[3]} alt="Menu Management" fill className="object-cover rounded-[1.5rem]" />
+            <div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
+               <Image src={DigitalMenuImg} alt="Menu Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">DIGITAL MENU</span>
@@ -445,7 +453,7 @@ const DeliveryOnlyPage = () => {
                 "Highlight combos and offers"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -462,11 +470,11 @@ const DeliveryOnlyPage = () => {
       </section>
 
       {/* Multi-Brand Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-6xl">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI BRAND OPERATIONS</span>
@@ -484,7 +492,7 @@ const DeliveryOnlyPage = () => {
                 "Monitor revenue and analytics"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -497,15 +505,89 @@ const DeliveryOnlyPage = () => {
               </Link>
             </div>
           </div>
-          <div className="relative h-[420px]">
+          <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-[2rem] 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-Brand Management" fill className="object-cover rounded-[1.5rem]" />
+            <div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
+               <Image src={MultiLocationImg} alt="Multi-Brand Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
       </section>
 
+      {/* Integration Section
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div className="grid lg:grid-cols-2 gap-16 items-center">
+          <div className="relative h-105 order-2 lg:order-1">
+             <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={UberIntegrationImg} alt="Integrations" fill className="object-cover rounded-3xl" />
+             </div>
+          </div>
+          <div className="flex flex-col gap-6 order-1 lg:order-2">
+            <div className="flex items-center gap-3">
+              <div className="h-0.5 w-10 bg-red-500 relative">
+                <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
+              </div>
+              <span className="text-red-500 font-bold tracking-wider uppercase text-xs font-dm-sans">INTEGRATIONS</span>
+            </div>
+            <h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
+              Seamlessly Connect with Delivery Apps
+            </h2>
+            <p className="text-base text-zinc-600 leading-relaxed">
+              Dine360 integrates with major delivery platforms, ensuring all orders flow directly into your POS.
+            </p>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 pt-4">
+              {[
+                "Uber Eats", "Zomato", "Swiggy",
+                "Talabat", "Deliveroo", "Careem"
+              ].map((platform, i) => (
+                <div key={i} className="bg-white border border-zinc-100 p-4 rounded-xl flex items-center justify-center text-zinc-400 font-bold text-sm hover:border-red-500/20 hover:text-red-500 transition-all cursor-default shadow-sm shadow-zinc-200/50">
+                  {platform}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section> */}
+
+      {/* Highlights Section */}
+      {/* <section className="py-24 bg-zinc-900 relative overflow-hidden">
+        <div className="absolute top-0 left-0 w-full h-1 bg-linear-to-r from-transparent via-red-500/20 to-transparent" />
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Built for High-Growth Delivery Brands</h2>
+            <p className="text-zinc-400 text-lg">Scale your operations and maximize your revenue with features designed for delivery efficiency.</p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            {[
+              {
+                title: "Scalable Infrastructure",
+                desc: "Cloud-based system that grows with your brand across multiple locations.",
+                icon: <ChevronRight className="w-6 h-6" />
+              },
+              {
+                title: "In-depth Analytics",
+                desc: "Gain insights into customer behavior and order trends to optimize performance.",
+                icon: <ChevronRight className="w-6 h-6" />
+              },
+              {
+                title: "Centralized Management",
+                desc: "Manage everything—from menus to staff—across all your virtual brands from one dashboard.",
+                icon: <ChevronRight className="w-6 h-6" />
+              }
+            ].map((feature, i) => (
+              <div key={i} className="bg-zinc-800/50 p-8 rounded-3xl border border-zinc-700/50 hover:border-red-500/30 transition-all group">
+                <div className="w-12 h-12 rounded-2xl bg-red-500/10 flex items-center justify-center text-red-500 mb-6 group-hover:scale-110 transition-transform">
+                  {feature.icon}
+                </div>
+                <h3 className="text-xl font-bold text-white mb-4">{feature.title}</h3>
+                <p className="text-zinc-400 text-sm leading-relaxed">{feature.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section> */}
+
       {/* Testimonials */}
       <Testimonials />
 
diff --git a/src/app/restaurant-types/destination/page.tsx b/src/app/restaurant-types/destination/page.tsx
index c7b8a4f..84756cd 100644
--- a/src/app/restaurant-types/destination/page.tsx
+++ b/src/app/restaurant-types/destination/page.tsx
@@ -11,12 +11,31 @@ import FAQ from '@/components/FAQ'
 import { Check, MapPin, Star, Clock, Target, Utensils, Users, Globe } from 'lucide-react'
 import { Zap, RefreshCw } from "lucide-react";
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import DestinationLeft from '@/assets/restaurant/types/destination/left.avif'
+import DestinationCentre from '@/assets/restaurant/types/destination/center.avif'
+import DestinationRight from '@/assets/restaurant/types/destination/right.avif'
+import Destination1 from '@/assets/restaurant/types/destination/1.avif'
+import Destination2 from '@/assets/restaurant/types/destination/2.avif'
+import Destination3 from '@/assets/restaurant/types/destination/3.avif'
+import Destination4 from '@/assets/restaurant/types/destination/4.avif'
+import POSImg from '@/assets/restaurant/types/destination/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/destination/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/destination/table-reservation.webp'
+import QRMenuImg from '@/assets/restaurant/types/destination/qr-menu.webp'
+import MultiBranchImg from '@/assets/restaurant/types/destination/multi-location.webp'
+
+const HERO_IMAGES = [
+  DestinationLeft,
+  DestinationCentre,
+  DestinationRight,
+]
+
+const JOURNEY_IMAGES = [
+  Destination1,
+  Destination2,
+  Destination3,
+  Destination4,
 ]
 
 const DestinationPage = () => {
@@ -96,7 +115,7 @@ const DestinationPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Destination Atmosphere" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Destination Atmosphere" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Guest Experience</p>
@@ -111,7 +130,7 @@ const DestinationPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Premium Dining" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Premium Dining" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reservations</p>
@@ -126,7 +145,7 @@ const DestinationPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Exquisite Service" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Exquisite Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Scalability</p>
@@ -216,11 +235,11 @@ const DestinationPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Advanced Reservation" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Advanced Reservation" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
-              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Zap className="w-5 h-5" /></div>
+              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Zap className="w-5 s-5" /></div>
               <h3 className="text-xl font-bold text-zinc-900 mb-3">Advanced Reservation Management</h3>
               <p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle bookings and guest flow efficiently.</p>
             </div>
@@ -230,11 +249,11 @@ const DestinationPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Seamless Order Coordination" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Seamless Order Coordination" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
-              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><RefreshCw className="w-5 h-5" /></div>
+              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><RefreshCw className="w-5 s-5" /></div>
               <h3 className="text-xl font-bold text-zinc-900 mb-3">Seamless Order Coordination</h3>
               <p className="text-zinc-800 text-sm leading-relaxed font-medium">Ensure smooth communication between service staff and kitchen.</p>
             </div>
@@ -244,11 +263,11 @@ const DestinationPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Elevated Guest Experience" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Elevated Guest Experience" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
-              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Clock className="w-5 h-5" /></div>
+              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Clock className="w-5 s-5" /></div>
               <h3 className="text-xl font-bold text-zinc-900 mb-3">Elevated Guest Experience</h3>
               <p className="text-zinc-800 text-sm leading-relaxed font-medium">Deliver consistent, high-quality service without delays.</p>
             </div>
@@ -258,11 +277,11 @@ const DestinationPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Accurate Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
-              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Target className="w-5 h-5" /></div>
+              <div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Target className="w-5 s-5" /></div>
               <h3 className="text-xl font-bold text-zinc-900 mb-3">Accurate Billing</h3>
               <p className="text-zinc-800 text-sm leading-relaxed font-medium">Provide a smooth and professional checkout experience.</p>
             </div>
@@ -316,7 +335,7 @@ const DestinationPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="Premium POS" fill className="object-cover rounded-2xl" />
+              <Image src={POSImg} alt="Premium POS" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -332,7 +351,7 @@ const DestinationPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -409,7 +428,7 @@ const DestinationPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Selection" fill className="object-cover rounded-2xl" />
+               <Image src={TableReservationImg} alt="Table Selection" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
@@ -421,7 +440,7 @@ const DestinationPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Premium QR Menu" fill className="object-cover rounded-2xl" />
+               <Image src={QRMenuImg} alt="Premium QR Menu" fill className="object-cover rounded-2xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -499,7 +518,7 @@ const DestinationPage = () => {
           <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-3xl 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="Destination Scale" fill className="object-cover rounded-2xl" />
+               <Image src={MultiBranchImg} alt="Destination Scale" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/digital-only/page.tsx b/src/app/restaurant-types/digital-only/page.tsx
index 4e82338..dca33b6 100644
--- a/src/app/restaurant-types/digital-only/page.tsx
+++ b/src/app/restaurant-types/digital-only/page.tsx
@@ -10,13 +10,21 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, Clock, Target, Smartphone, RefreshCw } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1615892715664-d8480396000e?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1526367790999-0150786686a2?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-]
+// Asset Imports
+import DigitalLeft from '@/assets/restaurant/types/digital/left.webp'
+import DigitalCentre from '@/assets/restaurant/types/digital/centre.webp'
+import DigitalRight from '@/assets/restaurant/types/digital/right.webp'
+import Digital1 from '@/assets/restaurant/types/digital/1.webp'
+import Digital2 from '@/assets/restaurant/types/digital/2.webp'
+import Digital3 from '@/assets/restaurant/types/digital/3.webp'
+import Digital4 from '@/assets/restaurant/types/digital/4.webp'
+import DigitalPOS from '@/assets/restaurant/types/digital/pos.webp'
+import DigitalOrder from '@/assets/restaurant/types/digital/order-management.webp'
+import DigitalTable from '@/assets/restaurant/types/digital/table-reservation.webp'
+import DigitalQR from '@/assets/restaurant/types/digital/qr-menu.webp'
+import DigitalMulti from '@/assets/restaurant/types/digital/multi-location.webp'
+
+const JOURNEY_IMAGES = [Digital1, Digital2, Digital3, Digital4]
 
 const DigitalOnlyPage = () => {
   return (
@@ -61,24 +69,46 @@ const DigitalOnlyPage = () => {
             </div>
           </div>
 
-          {/* Right Content - Cards */}
-          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+          {/* Right Content - Images */}
+          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
-              <motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
-                <Image src={CARD_IMAGES[0]} alt="Online Orders" fill className="object-cover" />
+              <motion.div 
+                className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" 
+                initial={{ opacity: 0, x: -50, rotate: -20 }} 
+                animate={{ opacity: 1, x: 0, rotate: -12 }} 
+                transition={{ duration: 0.8, delay: 0.2 }}
+              >
+                <Image src={DigitalLeft} alt="Online Orders" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Online Growth</p>
                   <p className="text-white font-bold text-2xl">95% Increase</p>
                 </div>
               </motion.div>
-              <motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
-                <Image src={CARD_IMAGES[1]} alt="Digital Command" fill className="object-cover" />
+              <motion.div 
+                className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" 
+                initial={{ opacity: 0, y: 50 }} 
+                animate={{ opacity: 1, y: 0 }} 
+                transition={{ duration: 0.8 }}
+              >
+                <Image src={DigitalCentre} alt="Digital Command" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Response Time</p>
                   <p className="text-white font-bold text-2xl">90% Faster</p>
                 </div>
               </motion.div>
+              <motion.div 
+                className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left" 
+                initial={{ opacity: 0, x: 50, rotate: 20 }} 
+                animate={{ opacity: 1, x: 0, rotate: 12 }} 
+                transition={{ duration: 0.8, delay: 0.4 }}
+              >
+                <Image src={DigitalRight} alt="Delivery Peak" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
+                  <p className="text-[10px] text-red-400 font-bold tracking-widest uppercase mb-0.5">Volume</p>
+                  <p className="text-white font-bold text-2xl">Peak Ready</p>
+                </div>
+              </motion.div>
             </div>
           </div>
         </div>
@@ -132,11 +162,11 @@ const DigitalOnlyPage = () => {
 
         <div className="relative max-w-4xl mx-auto">
           {/* Step 1 */}
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Centralized Order" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Centralized Order" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -147,11 +177,11 @@ const DigitalOnlyPage = () => {
           </div>
 
           {/* Step 2 */}
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Automated Workflow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Automated Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -162,11 +192,11 @@ const DigitalOnlyPage = () => {
           </div>
 
           {/* Step 3 */}
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Faster Fulfillment" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Faster Fulfillment" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -177,11 +207,11 @@ const DigitalOnlyPage = () => {
           </div>
 
           {/* Step 4 */}
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -232,7 +262,7 @@ const DigitalOnlyPage = () => {
           <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[3]} alt="Digital POS" fill className="object-cover rounded-2xl" />
+                 <Image src={DigitalPOS} alt="Digital POS" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -244,7 +274,7 @@ const DigitalOnlyPage = () => {
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="relative h-105 w-full">
              <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
-              <Image src={CARD_IMAGES[1]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={DigitalOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -321,7 +351,7 @@ const DigitalOnlyPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src={CARD_IMAGES[2]} alt="Delivery Operations" fill className="object-cover rounded-3xl" />
+               <Image src={DigitalTable} alt="Delivery Operations" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -333,7 +363,7 @@ const DigitalOnlyPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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={CARD_IMAGES[1]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
+               <Image src={DigitalQR} alt="Digital Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -411,7 +441,7 @@ const DigitalOnlyPage = () => {
           <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-Brand Management" fill className="object-cover rounded-3xl" />
+               <Image src={DigitalMulti} alt="Multi-Brand Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/diner/page.tsx b/src/app/restaurant-types/diner/page.tsx
index d981d8f..f99d20b 100644
--- a/src/app/restaurant-types/diner/page.tsx
+++ b/src/app/restaurant-types/diner/page.tsx
@@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Store, Users } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1543353071-097072382f14?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1520699912061-0d3a54d5801c?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1502301103665-0b95cc738def?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1551024601-bec78aea704b?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import DinerLeft from '@/assets/restaurant/types/diner/left.webp'
+import DinerCentre from '@/assets/restaurant/types/diner/centre.webp'
+import DinerRight from '@/assets/restaurant/types/diner/right.webp'
+import Diner1 from '@/assets/restaurant/types/diner/1.webp'
+import Diner2 from '@/assets/restaurant/types/diner/2.webp'
+import Diner3 from '@/assets/restaurant/types/diner/3.webp'
+import Diner4 from '@/assets/restaurant/types/diner/4.webp'
+import PosImg from '@/assets/restaurant/types/diner/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/diner/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/diner/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/diner/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/diner/multi-location.webp'
+
+const HERO_IMAGES = [
+  DinerLeft,
+  DinerCentre,
+  DinerRight,
+]
+
+const JOURNEY_IMAGES = [
+  Diner1,
+  Diner2,
+  Diner3,
+  Diner4,
 ]
 
 const DinerPage = () => {
@@ -95,7 +114,7 @@ const DinerPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[3]} alt="Diner Service" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Diner Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
@@ -110,7 +129,7 @@ const DinerPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[4]} alt="Pancake Breakfast" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Pancake Breakfast" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Turnover</p>
@@ -125,7 +144,7 @@ const DinerPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Classic Diner Booth" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Classic Diner Booth" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
@@ -215,7 +234,7 @@ const DinerPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Quick Order Taking" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Quick Order Taking" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -229,7 +248,7 @@ const DinerPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Kitchen Coordination" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -243,7 +262,7 @@ const DinerPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Table Service" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Table Service" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -257,7 +276,7 @@ const DinerPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Accurate Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -308,7 +327,7 @@ const DinerPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -324,7 +343,7 @@ const DinerPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -393,7 +412,7 @@ const DinerPage = () => {
           </div>
           <div className="relative h-[400px]">
              <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Seating Management" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={TableReservationImg} alt="Seating Management" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
@@ -405,7 +424,7 @@ const DinerPage = () => {
           <div className="relative h-[420px] order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -475,7 +494,7 @@ const DinerPage = () => {
           <div className="relative h-[420px]">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] 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" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={MultiLocationImg} alt="Multi Branch" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/family-style/page.tsx b/src/app/restaurant-types/family-style/page.tsx
index 07604a6..d3dc3e6 100644
--- a/src/app/restaurant-types/family-style/page.tsx
+++ b/src/app/restaurant-types/family-style/page.tsx
@@ -10,12 +10,33 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Users, Calendar, Menu, AreaChart } from 'lucide-react'
 
+// Import local assets
+import HeroLeft from '@/assets/restaurant/types/family-style/left.webp'
+import HeroCenter from '@/assets/restaurant/types/family-style/centre.webp'
+import HeroRight from '@/assets/restaurant/types/family-style/right.webp'
+
+import Journey1 from '@/assets/restaurant/types/family-style/1.webp'
+import Journey2 from '@/assets/restaurant/types/family-style/2.webp'
+import Journey3 from '@/assets/restaurant/types/family-style/3.webp'
+import Journey4 from '@/assets/restaurant/types/family-style/4.webp'
+
+import PosImg from '@/assets/restaurant/types/family-style/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/family-style/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/family-style/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/family-style/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/family-style/multi-location.webp'
+
 const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1543353071-873f17a7a088?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
+  HeroLeft,
+  HeroCenter,
+  HeroRight,
+]
+
+const JOURNEY_IMAGES = [
+  Journey1,
+  Journey2,
+  Journey3,
+  Journey4,
 ]
 
 const FamilyStylePage = () => {
@@ -215,7 +236,7 @@ const FamilyStylePage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Group Order" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Group Order" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -229,7 +250,7 @@ const FamilyStylePage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Communication" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Communication" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -243,7 +264,7 @@ const FamilyStylePage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Table Coord" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Table Coord" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -257,7 +278,7 @@ const FamilyStylePage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -316,7 +337,7 @@ const FamilyStylePage = () => {
               viewport={{ once: true }}
             >
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[4]} alt="POS System" fill className="object-cover rounded-2xl" />
+                 <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -333,7 +354,7 @@ const FamilyStylePage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -410,7 +431,7 @@ const FamilyStylePage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src={CARD_IMAGES[2]} alt="Table Management" fill className="object-cover rounded-3xl" />
+               <Image src={TableReservationImg} alt="Table Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -422,7 +443,7 @@ const FamilyStylePage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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={CARD_IMAGES[1]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
+               <Image src={QrMenuImg} alt="Digital Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -500,7 +521,7 @@ const FamilyStylePage = () => {
           <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={MultiLocationImg} alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/fast-casual/page.tsx b/src/app/restaurant-types/fast-casual/page.tsx
index ee24d80..26c31b7 100644
--- a/src/app/restaurant-types/fast-casual/page.tsx
+++ b/src/app/restaurant-types/fast-casual/page.tsx
@@ -10,13 +10,24 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
-]
+// Import local hero and journey images
+import LeftImg from '@/assets/restaurant/types/fast-casual/left.webp'
+import CenterImg from '@/assets/restaurant/types/fast-casual/center.webp'
+import RightImg from '@/assets/restaurant/types/fast-casual/right.webp'
+
+// Import local feature images
+import PosImg from '@/assets/restaurant/types/fast-casual/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/fast-casual/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/fast-casual/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/fast-casual/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/fast-casual/multi-location.webp'
+
+// Import journey images
+import Img1 from '@/assets/restaurant/types/fast-casual/1.webp'
+import Img2 from '@/assets/restaurant/types/fast-casual/2.webp'
+import Img3 from '@/assets/restaurant/types/fast-casual/3.webp'
+import Img4 from '@/assets/restaurant/types/fast-casual/4.webp'
+
 
 const FastCasualPage = () => {
   return (
@@ -46,7 +57,7 @@ const FastCasualPage = () => {
             </div>
 
             <div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
-              <div className="h-[1px] w-6 bg-red-500" />
+              <div className="h-px w-6 bg-red-500" />
               FAST CASUAL RESTAURANT
             </div>
 
@@ -85,8 +96,8 @@ const FastCasualPage = () => {
           </div>
 
           {/* Right Content - Cards */}
-          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
+          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div
@@ -95,8 +106,8 @@ const FastCasualPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[3]} alt="Fast Casual" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={LeftImg} alt="Fast Casual" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Processing</p>
                     <p className="text-white font-bold text-2xl">90%</p>
@@ -110,8 +121,8 @@ const FastCasualPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[4]} alt="Quick Service" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={CenterImg} alt="Quick Service" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Growth</p>
                     <p className="text-white font-bold text-2xl">30%</p>
@@ -125,8 +136,8 @@ const FastCasualPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Checkout" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={RightImg} alt="Checkout" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Payments</p>
                     <p className="text-white font-bold text-2xl">100%</p>
@@ -139,7 +150,7 @@ const FastCasualPage = () => {
       </main>
 
       {/* Stats Section */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-4xl">
         <div className="text-center max-w-4xl mx-auto mb-16">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -147,9 +158,9 @@ const FastCasualPage = () => {
             viewport={{ once: true }}
             className="flex items-center justify-center gap-2 mb-6"
           >
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-px w-8 bg-red-500" />
             <span className="text-red-600 font-bold tracking-widest uppercase text-xs">EFFORTLESS SERVICE, BIGGER RESULTS</span>
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-px w-8 bg-red-500" />
           </motion.div>
 
           <motion.h2
@@ -212,10 +223,10 @@ const FastCasualPage = () => {
 
         <div className="relative max-w-4xl mx-auto">
           <div className="flex flex-col md:flex-row items-center relative">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
+                <Image src={Img1} alt="Order Processing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -225,11 +236,11 @@ const FastCasualPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Communication" fill className="object-cover" />
+                <Image src={Img2} alt="Communication" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -239,11 +250,11 @@ const FastCasualPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Wait Times" fill className="object-cover" />
+                <Image src={Img3} alt="Wait Times" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -253,11 +264,11 @@ const FastCasualPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Fulfillment" fill className="object-cover" />
+                <Image src={Img4} alt="Fulfillment" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -270,11 +281,11 @@ const FastCasualPage = () => {
       </section>
 
       {/* POS Section */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[2.5rem]">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
         <div className="grid lg:grid-cols-2 gap-12 items-center">
           <div className="flex flex-col gap-6 order-2 lg:order-1">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
@@ -294,7 +305,7 @@ const FastCasualPage = () => {
                 "Accept multiple payment options"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -308,14 +319,14 @@ const FastCasualPage = () => {
             </div>
           </div>
 
-          <div className="relative h-[400px] w-full order-1 lg:order-2">
+          <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -324,19 +335,19 @@ const FastCasualPage = () => {
       {/* Order Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] w-full">
+          <div className="relative h-105 w-full">
              <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
@@ -354,7 +365,7 @@ const FastCasualPage = () => {
                 "Monitor preparation status in real time"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -371,12 +382,12 @@ const FastCasualPage = () => {
       </section>
 
       {/* Table Management Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
-        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
         <div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-400 font-bold tracking-wider uppercase text-xs">TABLE MANAGEMENT</span>
@@ -406,9 +417,9 @@ const FastCasualPage = () => {
               Get Started
             </Link>
           </div>
-          <div className="relative h-[400px]">
-             <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Seating Management" fill className="object-cover rounded-[1.5rem]" />
+          <div className="relative h-100">
+             <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
+               <Image src={TableReservationImg} alt="Seating Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -417,15 +428,15 @@ const FastCasualPage = () => {
       {/* QR Code Menu Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] order-2 lg:order-1">
+          <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
-            <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
+            <div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">QR CODE MENU</span>
@@ -443,7 +454,7 @@ const FastCasualPage = () => {
                 "Highlight daily specials and combos"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -460,11 +471,11 @@ const FastCasualPage = () => {
       </section>
 
       {/* Multi-Branch Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI BRANCH RESTAURANT</span>
@@ -482,7 +493,7 @@ const FastCasualPage = () => {
                 "Monitor operations from one dashboard"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -495,10 +506,10 @@ const FastCasualPage = () => {
               </Link>
             </div>
           </div>
-          <div className="relative h-[420px]">
+          <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-[2rem] 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-[1.5rem]" />
+            <div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
+               <Image src={MultiLocationImg} alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/fast-food/page.tsx b/src/app/restaurant-types/fast-food/page.tsx
index a567180..498ef7c 100644
--- a/src/app/restaurant-types/fast-food/page.tsx
+++ b/src/app/restaurant-types/fast-food/page.tsx
@@ -10,11 +10,30 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Calendar, Menu, AreaChart, RefreshCw } from 'lucide-react'
 
+// Import local assets
+// import FastFood1 from '@/assets/restaurant/types/fast-food-restaurant/1.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'
+import FastFood3 from '@/assets/restaurant/types/fast-food-restaurant/3.webp'
+import FastFood4 from '@/assets/restaurant/types/fast-food-restaurant/4.webp'
+import FastFoodLeft from '@/assets/restaurant/types/fast-food-restaurant/left.webp'
+import FastFoodCentre from '@/assets/restaurant/types/fast-food-restaurant/centre.webp'
+import FastFoodRight from '@/assets/restaurant/types/fast-food-restaurant/right.webp'
+import FastFoodPos from '@/assets/restaurant/types/fast-food-restaurant/pos.webp'
+import FastFoodOrder from '@/assets/restaurant/types/fast-food-restaurant/order-management.webp'
+import FastFoodQR from '@/assets/restaurant/types/fast-food-restaurant/qr-menu.webp'
+import FastFoodTable from '@/assets/restaurant/types/fast-food-restaurant/table-reservation.webp'
+
 const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1561758033-d89a9ad46330?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1551782450-a2132b4ba21d?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1571091718767-18b5b1457add?auto=format&fit=crop&q=80&w=600",
+  FastFood1,
+  FastFood2,
+  FastFood3,
+  FastFood4,
+  FastFoodPos,
+  FastFoodOrder,
+  FastFoodQR,
+  FastFoodTable,
 ]
 
 const FastFoodPage = () => {
@@ -94,7 +113,7 @@ const FastFoodPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Fast Food Service" fill className="object-cover" />
+                <Image src={FastFoodLeft} alt="Fast Food Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Speed</p>
@@ -109,7 +128,7 @@ const FastFoodPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Ordering" fill className="object-cover" />
+                <Image src={FastFoodCentre} alt="Ordering" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Service</p>
@@ -124,7 +143,7 @@ const FastFoodPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[3]} alt="Kitchen" fill className="object-cover" />
+                <Image src={FastFoodRight} alt="Kitchen" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
@@ -214,7 +233,7 @@ const FastFoodPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
+                <Image src={FastFood1} alt="Order Processing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -228,7 +247,7 @@ const FastFoodPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Sync" fill className="object-cover" />
+                <Image src={FastFood2} alt="Kitchen Sync" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -242,7 +261,7 @@ const FastFoodPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Queues" fill className="object-cover" />
+                <Image src={FastFood3} alt="Queues" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -256,7 +275,7 @@ const FastFoodPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Validation" fill className="object-cover" />
+                <Image src={FastFood4} alt="Validation" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -315,7 +334,7 @@ const FastFoodPage = () => {
               viewport={{ once: true }}
             >
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
+                 <Image src={FastFoodPos} alt="POS System" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -332,7 +351,7 @@ const FastFoodPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={FastFoodOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -421,7 +440,7 @@ const FastFoodPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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={CARD_IMAGES[0]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
+               <Image src={FastFoodQR} alt="Digital Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
diff --git a/src/app/restaurant-types/fine-dine/page.tsx b/src/app/restaurant-types/fine-dine/page.tsx
index 039d7f3..c311348 100644
--- a/src/app/restaurant-types/fine-dine/page.tsx
+++ b/src/app/restaurant-types/fine-dine/page.tsx
@@ -10,11 +10,17 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Star, Zap, Clock, Target, Utensils, Users, Layout, Smartphone, Calendar, Menu, AreaChart, Award } from 'lucide-react'
 
+// Import local assets
+import FineDiningPos from '@/assets/restaurant/types/fine-dining/pos.webp'
+import FineDiningMenu from '@/assets/restaurant/types/fine-dining/digital-menu.webp'
+import FineDiningHero from '@/assets/restaurant/types/fine-dining/table-reservation.webp'
+import FineDiningOrder from '@/assets/restaurant/types/fine-dining/order-management.webp'
+
 const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
+  FineDiningPos,
+  FineDiningMenu,
+  FineDiningHero,
+  FineDiningOrder,
 ]
 
 const FineDiningPage = () => {
diff --git a/src/app/restaurant-types/fine-dining/page.tsx b/src/app/restaurant-types/fine-dining/page.tsx
index 25cb4c6..e0a0a62 100644
--- a/src/app/restaurant-types/fine-dining/page.tsx
+++ b/src/app/restaurant-types/fine-dining/page.tsx
@@ -10,10 +10,29 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, ShoppingCart, Package, QrCode, BookOpen, Tag } from 'lucide-react'
 
+// Import local hero images
+import Hero1 from '@/assets/restaurant/types/fine-dining/hero-1.webp'
+import Hero2 from '@/assets/restaurant/types/fine-dining/hero-2.webp'
+import Hero3 from '@/assets/restaurant/types/fine-dining/hero-3.webp'
+
+// Import other fine dining assets
+import PosImg from '@/assets/restaurant/types/fine-dining/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/fine-dining/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/fine-dining/table-reservation.webp'
+import DigitalMenuImg from '@/assets/restaurant/types/fine-dining/digital-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/fine-dining/multi-location.webp'
+
+// Import journey step images
+import KitchenCommsImg from '@/assets/restaurant/types/fine-dining/kitchen-comms.webp'
+import Journey1 from '@/assets/restaurant/types/fine-dining/1.webp'
+import Journey2 from '@/assets/restaurant/types/fine-dining/2.webp'
+import Journey3 from '@/assets/restaurant/types/fine-dining/3.webp'
+import Journey4 from '@/assets/restaurant/types/fine-dining/4.webp'
+
 const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
+  Hero1,
+  Hero2,
+  Hero3,
   "https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&q=80&w=600",
   "https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=600",
 ]
@@ -321,7 +340,7 @@ const FineDinePage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover" />
+                <Image src={Journey1} alt="Table Management" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -335,7 +354,7 @@ const FineDinePage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src="https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?auto=format&fit=crop&q=80&w=800" alt="Course Tracking" fill className="object-cover" />
+                <Image src={KitchenCommsImg} alt="Kitchen Communication" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -349,7 +368,7 @@ const FineDinePage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch" fill className="object-cover" />
+                <Image src={Journey3} alt="Multi-Branch" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -363,7 +382,7 @@ const FineDinePage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src="https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&q=80&w=800" alt="Guest Experience" fill className="object-cover" />
+                <Image src={Journey4} alt="Guest Experience" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -422,7 +441,7 @@ const FineDinePage = () => {
               viewport={{ once: true }}
             >
               <div className="flex flex-col h-full relative">
-                 <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+                 <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -439,7 +458,7 @@ const FineDinePage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -516,7 +535,7 @@ const FineDinePage = () => {
           </div>
           <div className="relative h-[400px]">
              <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={TableReservationImg} alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
@@ -528,7 +547,7 @@ const FineDinePage = () => {
           <div className="relative h-[420px] order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Digital Menu" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={DigitalMenuImg} alt="Digital Menu" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -606,7 +625,7 @@ const FineDinePage = () => {
           <div className="relative h-[420px]">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] 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-[1.5rem]" />
+               <Image src={MultiLocationImg} alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/food-truck/page.tsx b/src/app/restaurant-types/food-truck/page.tsx
index b32e366..2a118da 100644
--- a/src/app/restaurant-types/food-truck/page.tsx
+++ b/src/app/restaurant-types/food-truck/page.tsx
@@ -10,11 +10,31 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Truck, Menu, AreaChart, RefreshCw } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1565123409695-7b5ef63a2efb?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555126634-323283e090fa?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1524350300373-313d47ad9d63?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1567129995593-01024f1dc055?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import FoodTruckLeft from '@/assets/restaurant/types/food-truck/left.webp'
+import FoodTruckCentre from '@/assets/restaurant/types/food-truck/centre.webp'
+import FoodTruckRight from '@/assets/restaurant/types/food-truck/right.webp'
+import FoodTruck1 from '@/assets/restaurant/types/food-truck/1.webp'
+import FoodTruck2 from '@/assets/restaurant/types/food-truck/2.webp'
+import FoodTruck3 from '@/assets/restaurant/types/food-truck/3.webp'
+import FoodTruck4 from '@/assets/restaurant/types/food-truck/4.webp'
+import POSImg from '@/assets/restaurant/types/food-truck/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/food-truck/order-management.webp'
+import QRMenuImg from '@/assets/restaurant/types/food-truck/qr-menu.webp'
+import TableReservationImg from '@/assets/restaurant/types/food-truck/table-reservation.webp'
+import MultiLocationImg from '@/assets/restaurant/types/food-truck/multi-location.webp'
+
+const HERO_IMAGES = [
+  FoodTruckLeft,
+  FoodTruckCentre,
+  FoodTruckRight,
+]
+
+const JOURNEY_IMAGES = [
+  FoodTruck1,
+  FoodTruck2,
+  FoodTruck3,
+  FoodTruck4,
 ]
 
 const FoodTruckPage = () => {
@@ -94,7 +114,7 @@ const FoodTruckPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Food Truck Service" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Food Truck Service" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Speed</p>
@@ -109,7 +129,7 @@ const FoodTruckPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Ordering" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Ordering" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Sales</p>
@@ -124,7 +144,7 @@ const FoodTruckPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[3]} alt="Kitchen" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Kitchen" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
@@ -214,7 +234,7 @@ const FoodTruckPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Order Taking" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Order Taking" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -228,7 +248,7 @@ const FoodTruckPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -242,7 +262,7 @@ const FoodTruckPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Wait Times" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Wait Times" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -256,7 +276,7 @@ const FoodTruckPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Validation" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Validation" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -315,7 +335,7 @@ const FoodTruckPage = () => {
               viewport={{ once: true }}
             >
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
+                 <Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -332,7 +352,7 @@ const FoodTruckPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -409,7 +429,7 @@ const FoodTruckPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src={CARD_IMAGES[2]} alt="Service Management" fill className="object-cover rounded-3xl" />
+               <Image src={TableReservationImg} alt="Service Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -421,7 +441,7 @@ const FoodTruckPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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={CARD_IMAGES[0]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
+               <Image src={QRMenuImg} alt="Digital Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -499,7 +519,7 @@ const FoodTruckPage = () => {
           <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-1555126634-323283e090fa?auto=format&fit=crop&q=80&w=800" alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
+               <Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/ghost-kitchen/page.tsx b/src/app/restaurant-types/ghost-kitchen/page.tsx
index dc1bb7a..a8e74ef 100644
--- a/src/app/restaurant-types/ghost-kitchen/page.tsx
+++ b/src/app/restaurant-types/ghost-kitchen/page.tsx
@@ -8,15 +8,27 @@ import Navbar from '@/components/Navbar'
 import Footer from '@/components/Footer'
 import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
-import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart } from 'lucide-react'
+import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart, Star, Quote } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1616733148217-1bb14305490e?auto=format&fit=crop&q=80&w=600",
-]
+// Import local assets
+import LeftImg from '@/assets/restaurant/types/ghost-restaurant/left.webp'
+import CentreImg from '@/assets/restaurant/types/ghost-restaurant/centre.webp'
+import RightImg from '@/assets/restaurant/types/ghost-restaurant/right.webp'
+import POSImg from '@/assets/restaurant/types/ghost-restaurant/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/ghost-restaurant/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/ghost-restaurant/table-reservation.webp'
+import QRMenuImg from '@/assets/restaurant/types/ghost-restaurant/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/ghost-restaurant/multi-location.webp'
+import DeliveryOperationsImg from '@/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp'
+import TestimonialImg from '@/assets/restaurant/types/ghost-restaurant/testimonial.webp'
+
+import Ghost1 from '@/assets/restaurant/types/ghost-restaurant/1.webp'
+import Ghost2 from '@/assets/restaurant/types/ghost-restaurant/2.webp'
+import Ghost3 from '@/assets/restaurant/types/ghost-restaurant/3.webp'
+import Ghost4 from '@/assets/restaurant/types/ghost-restaurant/4.webp'
+
+const HERO_IMAGES = [LeftImg, CentreImg, RightImg]
+const JOURNEY_IMAGES = [Ghost1, Ghost2, Ghost3, Ghost4]
 
 const GhostKitchenPage = () => {
   return (
@@ -95,7 +107,7 @@ const GhostKitchenPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Delivery Hub" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Delivery Hub" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
@@ -110,7 +122,7 @@ const GhostKitchenPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Operations" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Kitchen Operations" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Operational</p>
@@ -125,7 +137,7 @@ const GhostKitchenPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Cloud System" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Cloud System" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliable</p>
@@ -215,7 +227,7 @@ const GhostKitchenPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Centralized Orders" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Centralized Orders" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -229,7 +241,7 @@ const GhostKitchenPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -243,7 +255,7 @@ const GhostKitchenPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Order Fulfillment" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Order Fulfillment" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -257,7 +269,7 @@ const GhostKitchenPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Order Handling" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -316,7 +328,7 @@ const GhostKitchenPage = () => {
               viewport={{ once: true }}
             >
               <div className="flex flex-col h-full relative">
-                 <Image src={CARD_IMAGES[0]} alt="Delivery POS" fill className="object-cover rounded-2xl" />
+                 <Image src={POSImg} alt="Delivery POS" fill className="object-cover rounded-2xl" />
               </div>
             </motion.div>
           </div>
@@ -333,7 +345,7 @@ const GhostKitchenPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -410,7 +422,7 @@ const GhostKitchenPage = () => {
           </div>
           <div className="relative h-[400px]">
              <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src={CARD_IMAGES[1]} alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={DeliveryOperationsImg} alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
@@ -422,7 +434,7 @@ const GhostKitchenPage = () => {
           <div className="relative h-[420px] order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src={CARD_IMAGES[3]} alt="Virtual Brands" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={QRMenuImg} alt="Virtual Brands" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -500,7 +512,7 @@ const GhostKitchenPage = () => {
           <div className="relative h-[420px]">
              <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-[2rem] 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-Kitchen Management" fill className="object-cover rounded-[1.5rem]" />
+               <Image src={MultiLocationImg} alt="Multi-Kitchen Management" fill className="object-cover rounded-[1.5rem]" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/ghost-restaurant/page.tsx b/src/app/restaurant-types/ghost-restaurant/page.tsx
index 9e6c617..f93e353 100644
--- a/src/app/restaurant-types/ghost-restaurant/page.tsx
+++ b/src/app/restaurant-types/ghost-restaurant/page.tsx
@@ -10,13 +10,19 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
-]
+// Image Imports
+import LeftImg from '@/assets/restaurant/types/ghost-restaurant/left.webp'
+import CentreImg from '@/assets/restaurant/types/ghost-restaurant/centre.webp'
+import RightImg from '@/assets/restaurant/types/ghost-restaurant/right.webp'
+import Step1Img from '@/assets/restaurant/types/ghost-restaurant/1.webp'
+import Step2Img from '@/assets/restaurant/types/ghost-restaurant/2.webp'
+import Step3Img from '@/assets/restaurant/types/ghost-restaurant/3.webp'
+import Step4Img from '@/assets/restaurant/types/ghost-restaurant/4.webp'
+import PosImg from '@/assets/restaurant/types/ghost-restaurant/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/ghost-restaurant/order-management.webp'
+import DeliveryOpsImg from '@/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp'
+import QrMenuImg from '@/assets/restaurant/types/ghost-restaurant/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/ghost-restaurant/multi-location.webp'
 
 const GhostKitchenPage = () => {
   return (
@@ -46,7 +52,7 @@ const GhostKitchenPage = () => {
             </div>
 
             <div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
-              <div className="h-[1px] w-6 bg-red-500" />
+              <div className="h-px w-6 bg-red-500" />
               GHOST RESTAURANT
             </div>
 
@@ -85,8 +91,8 @@ const GhostKitchenPage = () => {
           </div>
 
           {/* Right Content - Cards */}
-          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
+          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div
@@ -95,8 +101,8 @@ const GhostKitchenPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Ghost Kitchen" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={LeftImg} alt="Ghost Kitchen" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Processing</p>
                     <p className="text-white font-bold text-2xl">3X Faster</p>
@@ -110,8 +116,8 @@ const GhostKitchenPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Efficiency" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={CentreImg} alt="Efficiency" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                     <p className="text-white font-bold text-2xl">40% Up</p>
@@ -125,8 +131,8 @@ const GhostKitchenPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[4]} alt="Cloud System" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={RightImg} alt="Cloud System" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Cloud</p>
                     <p className="text-white font-bold text-2xl">100%</p>
@@ -139,7 +145,7 @@ const GhostKitchenPage = () => {
       </main>
 
       {/* Stats Section */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-6xl">
         <div className="text-center max-w-4xl mx-auto mb-16">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -147,9 +153,9 @@ const GhostKitchenPage = () => {
             viewport={{ once: true }}
             className="flex items-center justify-center gap-2 mb-6"
           >
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-px w-8 bg-red-500" />
             <span className="text-red-600 font-bold tracking-widest uppercase text-xs">DELIVERY-FIRST OPERATIONS</span>
-            <div className="h-[1px] w-8 bg-red-500" />
+            <div className="h-px w-8 bg-red-500" />
           </motion.div>
 
           <motion.h2
@@ -212,10 +218,10 @@ const GhostKitchenPage = () => {
 
         <div className="relative max-w-4xl mx-auto">
           <div className="flex flex-col md:flex-row items-center relative">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Delivery Orders" fill className="object-cover" />
+                <Image src={Step1Img} alt="Delivery Orders" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -225,11 +231,11 @@ const GhostKitchenPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Smart Workflow" fill className="object-cover" />
+                <Image src={Step2Img} alt="Smart Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -239,11 +245,11 @@ const GhostKitchenPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Fulfillment" fill className="object-cover" />
+                <Image src={Step3Img} alt="Fulfillment" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -253,11 +259,11 @@ const GhostKitchenPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Order Accuracy" fill className="object-cover" />
+                <Image src={Step4Img} alt="Order Accuracy" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -274,7 +280,7 @@ const GhostKitchenPage = () => {
         <div className="grid lg:grid-cols-2 gap-12 items-center">
           <div className="flex flex-col gap-6 order-2 lg:order-1">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
@@ -294,7 +300,7 @@ const GhostKitchenPage = () => {
                 "Accept secure online payments"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -308,14 +314,14 @@ const GhostKitchenPage = () => {
             </div>
           </div>
 
-          <div className="relative h-[400px] w-full order-1 lg:order-2">
+          <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="Delivery POS" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="Delivery POS" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -324,19 +330,19 @@ const GhostKitchenPage = () => {
       {/* Order Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] w-full">
+          <div className="relative h-105 w-full">
              <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
@@ -354,7 +360,7 @@ const GhostKitchenPage = () => {
                 "Prevent order bottlenecks during peak hours"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -371,12 +377,12 @@ const GhostKitchenPage = () => {
       </section>
 
       {/* Delivery Operations Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
-        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
+      <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-6xl overflow-hidden relative">
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
         <div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-400 font-bold tracking-wider uppercase text-xs">DELIVERY OPERATIONS</span>
@@ -406,9 +412,9 @@ const GhostKitchenPage = () => {
               Get Started
             </Link>
           </div>
-          <div className="relative h-[400px]">
-             <div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
+          <div className="relative h-100">
+             <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
+               <Image src={DeliveryOpsImg} alt="Delivery Flow" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -417,15 +423,15 @@ const GhostKitchenPage = () => {
       {/* Digital Menu (Virtual Brands) Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] order-2 lg:order-1">
+          <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
-            <div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Virtual Brands" fill className="object-cover rounded-[1.5rem]" />
+            <div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
+               <Image src={QrMenuImg} alt="Virtual Brands" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
             <div className="flex items-center gap-3">
-              <div className="h-[2px] w-10 bg-red-500 relative">
+              <div className="h-0.5 w-10 bg-red-500 relative">
                 <div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
               </div>
               <span className="text-red-500 font-bold tracking-wider uppercase text-xs">DIGITAL MENU</span>
@@ -443,7 +449,7 @@ const GhostKitchenPage = () => {
                 "Sync menus across delivery platforms"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -498,7 +504,7 @@ const GhostKitchenPage = () => {
           <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-Kithchen Management" fill className="object-cover rounded-3xl" />
+               <Image src={MultiLocationImg} alt="Multi-Kithchen Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/mongolian-bbq/page.tsx b/src/app/restaurant-types/mongolian-bbq/page.tsx
index 83eb64d..c16fa25 100644
--- a/src/app/restaurant-types/mongolian-bbq/page.tsx
+++ b/src/app/restaurant-types/mongolian-bbq/page.tsx
@@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1617196034183-421b4917c92d?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1563805042-7684c019e1cb?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1580442151529-343f2f5e3ef2?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import MongolianLeft from '@/assets/restaurant/types/mongolian-barbecue/left.avif'
+import MongolianCentre from '@/assets/restaurant/types/mongolian-barbecue/center.avif'
+import MongolianRight from '@/assets/restaurant/types/mongolian-barbecue/right.webp'
+import Mongolian1 from '@/assets/restaurant/types/mongolian-barbecue/1.webp'
+import Mongolian2 from '@/assets/restaurant/types/mongolian-barbecue/2.webp'
+import Mongolian3 from '@/assets/restaurant/types/mongolian-barbecue/3.webp'
+import Mongolian4 from '@/assets/restaurant/types/mongolian-barbecue/4.webp'
+import POSImg from '@/assets/restaurant/types/mongolian-barbecue/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/mongolian-barbecue/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/mongolian-barbecue/table-reservation.webp'
+import QRMenuImg from '@/assets/restaurant/types/mongolian-barbecue/qr-menu.webp'
+import MultiBranchImg from '@/assets/restaurant/types/mongolian-barbecue/multi-location.webp'
+
+const HERO_IMAGES = [
+  MongolianLeft,
+  MongolianCentre,
+  MongolianRight,
+]
+
+const JOURNEY_IMAGES = [
+  Mongolian1,
+  Mongolian2,
+  Mongolian3,
+  Mongolian4,
 ]
 
 const MongolianBBQPage = () => {
@@ -64,21 +83,21 @@ const MongolianBBQPage = () => {
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
-                <Image src={CARD_IMAGES[2]} alt="Grill Station" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Mongolian Left" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                   <p className="text-white font-bold text-2xl">90% Faster</p>
                 </div>
               </motion.div>
               <motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
-                <Image src={CARD_IMAGES[0]} alt="Fresh Ingredients" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Mongolian Centre" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Guest Flow</p>
                   <p className="text-white font-bold text-2xl">35% Improved</p>
                 </div>
               </motion.div>
               <motion.div className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left" initial={{ opacity: 0, x: 50, rotate: 20 }} animate={{ opacity: 1, x: 0, rotate: 12 }} transition={{ duration: 0.8, delay: 0.4 }}>
-                <Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Mongolian Right" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Billing</p>
                   <p className="text-white font-bold text-2xl">100% Accurate</p>
@@ -136,7 +155,7 @@ const MongolianBBQPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Guest Flow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Guest Flow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -150,7 +169,7 @@ const MongolianBBQPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Cooking Workflow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Cooking Workflow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -164,7 +183,7 @@ const MongolianBBQPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Service" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Service" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -178,7 +197,7 @@ const MongolianBBQPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -217,7 +236,7 @@ const MongolianBBQPage = () => {
           </div>
           <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -227,7 +246,7 @@ const MongolianBBQPage = () => {
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="relative h-105 w-full">
             <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -287,7 +306,7 @@ const MongolianBBQPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-3xl" />
+               <Image src={TableReservationImg} alt="Table Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -298,7 +317,7 @@ const MongolianBBQPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-3xl" />
+               <Image src={QRMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -354,7 +373,7 @@ const MongolianBBQPage = () => {
           </div>
           <div className="relative h-105">
              <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-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=800" alt="Multi Location" fill className="object-cover rounded-3xl" />
+               <Image src={MultiBranchImg} alt="Multi Location" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/page.tsx b/src/app/restaurant-types/page.tsx
index f606537..f4f5a5b 100644
--- a/src/app/restaurant-types/page.tsx
+++ b/src/app/restaurant-types/page.tsx
@@ -14,62 +14,30 @@ import Navbar from '@/components/Navbar'
 import Footer from '@/components/Footer'
 import Testimonials from '@/components/Testimonials'
 
+// Hero Images
+import HeroLeftTop from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-top.webp'
+import HeroLeftBottom from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-bottom.webp'
+import HeroRightBottom from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-bottom.webp'
+import HeroRightTop from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-top.webp'
+
+// Journey Images
+import Journey1 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/1.webp'
+import Journey2 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/2.webp'
+import Journey3 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/3.webp'
+import Journey4 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/4.webp'
+
 const RESTAURANT_TYPES = [
   {
-    label: "Fast Food",
-    icon: Zap,
-    description: "Handle high-volume orders with lightning-fast billing, instant kitchen sync, and peak-hour performance optimization.",
-    angle: 0,
-    href: "/restaurant-types/fast-food",
-  },
-  {
-    label: "Food Truck",
-    icon: Truck,
-    description: "Run your food truck from anywhere with a mobile-ready POS, simplified menu control, and real-time sales tracking.",
-    angle: 45,
-    href: "/restaurant-types/food-truck",
-  },
-  {
-    label: "Cafe & Bistro",
-    icon: Coffee,
-    description: "Deliver smooth table service, quick counter billing, and loyalty-ready customer management in one compact system.",
-    angle: 90,
-    href: "/restaurant-types/cafe-bistro",
-  },
-  {
-    label: "Ghost Kitchen",
-    icon: Cloud,
-    description: "Centralize delivery orders, manage multiple platforms, and optimize kitchen workflows for delivery-first operations.",
-    angle: 135,
-    href: "/restaurant-types/ghost-kitchen",
-  },
-  {
-    label: "Full Service",
-    icon: UtensilsCrossed,
-    description: "Coordinate front-of-house and kitchen operations seamlessly with reservations, table control, and staff synchronization.",
-    angle: 180,
-    href: "/restaurant-types/full-service",
-  },
-  {
-    label: "Bakery",
-    icon: ChefHat,
-    description: "Track daily inventory, manage batch production, and streamline pre-orders with precision and efficiency.",
-    angle: 225,
-    href: "/restaurant-types/bakery",
-  },
-  {
-    label: "Fine Dine",
+    label: "Fine Dining",
     icon: Gem,
     description: "Elevate premium dining with reservation accuracy, table layout control, and detailed performance analytics.",
-    angle: 270,
-    href: "/restaurant-types/fine-dine",
+    href: "/restaurant-types/fine-dining",
   },
   {
-    label: "Family Style",
-    icon: Users,
-    description: "Manage large group dining, shared tables, and flexible seating arrangements without operational confusion.",
-    angle: 315,
-    href: "/restaurant-types/family-style",
+    label: "Casual Dining",
+    icon: Store,
+    description: "Streamlined service for relaxed dining. Manage table turns, orders, and guest experiences with simplicity and speed.",
+    href: "/restaurant-types/casual-dining",
   },
   {
     label: "Fast Casual",
@@ -78,34 +46,34 @@ const RESTAURANT_TYPES = [
     href: "/restaurant-types/fast-casual",
   },
   {
-    label: "Diner",
-    icon: Store,
-    description: "Classic desk service meets modern tech. Manage high-turnover seating, complicated breakfast orders, and multi-staff coordination with ease.",
-    href: "/restaurant-types/diner",
+    label: "Ghost Restaurant",
+    icon: Cloud,
+    description: "Virtual brands, real profits. Manage multiple digital storefronts from one kitchen and sync with all major delivery apps.",
+    href: "/restaurant-types/ghost-restaurant",
   },
   {
-    label: "Pub",
-    icon: Beer,
-    description: "Built for busy bars and pubs. Track open tabs, manage age-restricted items, and handle lightning-fast counter rounds flawlessly.",
-    href: "/restaurant-types/pub",
+    label: "Family Style",
+    icon: Users,
+    description: "Manage large group dining, shared tables, and flexible seating arrangements without operational confusion.",
+    href: "/restaurant-types/family-style",
   },
   {
-    label: "Italian / Pizza",
-    icon: Pizza,
-    description: "Specialized for modifiers and toppings. Manage ingredient inventory, delivery zones, and custom modifiers with ease.",
-    href: "/restaurant-types/italian-pizza",
+    label: "Fast Food",
+    icon: Zap,
+    description: "Handle high-volume orders with lightning-fast billing, instant kitchen sync, and peak-hour performance optimization.",
+    href: "/restaurant-types/fast-food",
   },
   {
-    label: "Steakhouse",
-    icon: Beef,
-    description: "Focus on precision. Manage specific meat aging, cooking temperatures, and premium wine pairings for high-ticket service.",
-    href: "/restaurant-types/steakhouse",
+    label: "Food Truck",
+    icon: Truck,
+    description: "Run your food truck from anywhere with a mobile-ready POS, simplified menu control, and real-time sales tracking.",
+    href: "/restaurant-types/food-truck",
   },
   {
-    label: "Seafood",
-    icon: Utensils,
-    description: "Handle fresh catch inventory, fluctuating market pricing, and seasonal menu changes with our flexible management system.",
-    href: "/restaurant-types/seafood",
+    label: "Cafe",
+    icon: Coffee,
+    description: "Deliver smooth counter billing, quick service, and loyalty-ready customer management in one compact system.",
+    href: "/restaurant-types/cafe-bistro",
   },
   {
     label: "Buffet",
@@ -114,10 +82,10 @@ const RESTAURANT_TYPES = [
     href: "/restaurant-types/buffet",
   },
   {
-    label: "Bistro",
-    icon: Wine,
-    description: "Small plates, big impact. Manage cozy seating layouts, rotating wine lists, and intimate guest experiences efficiently.",
-    href: "/restaurant-types/bistro",
+    label: "Pub",
+    icon: Beer,
+    description: "Built for busy bars and pubs. Track open tabs, manage age-restricted items, and handle lightning-fast counter rounds flawlessly.",
+    href: "/restaurant-types/pub",
   },
   {
     label: "Cafeteria",
@@ -125,6 +93,42 @@ const RESTAURANT_TYPES = [
     description: "Built for institutional or corporate cafeterias. Handle meal plans, quick-tap payments, and large-scale bulk ordering.",
     href: "/restaurant-types/cafeteria",
   },
+  {
+    label: "Coffee House",
+    icon: Coffee,
+    description: "Perfect for coffee shops and tea houses. Manage customizations, loyalty programs, and create engaging customer relationships.",
+    href: "/restaurant-types/coffee-house",
+  },
+  {
+    label: "Diner",
+    icon: Store,
+    description: "Classic table service meets modern tech. Manage high-turnover seating, complicated breakfast orders, and multi-staff coordination with ease.",
+    href: "/restaurant-types/diner",
+  },
+  {
+    label: "Pop-Up",
+    icon: Zap,
+    description: "Flexible POS for temporary or seasonal restaurants. Quick setup, easy management, and seamless operations on the go.",
+    href: "/restaurant-types/pop-up",
+  },
+  {
+    label: "Contemporary Casual",
+    icon: Flame,
+    description: "Modern tech for modern dining. Integrated QR ordering, mobile payments, and tableside service for trend-setting restaurants.",
+    href: "/restaurant-types/contemporary-casual",
+  },
+  {
+    label: "Bistro",
+    icon: Wine,
+    description: "Small plates, big impact. Manage cozy seating layouts, rotating wine lists, and intimate guest experiences efficiently.",
+    href: "/restaurant-types/bistro",
+  },
+  {
+    label: "Destination",
+    icon: Gem,
+    description: "Premium experience management for high-end destination venues. Seamless coordination for exceptional dining moments.",
+    href: "/restaurant-types/destination",
+  },
   {
     label: "Teppanyaki",
     icon: Flame,
@@ -132,28 +136,10 @@ const RESTAURANT_TYPES = [
     href: "/restaurant-types/teppanyaki",
   },
   {
-    label: "Contemporary Casual",
-    icon: Zap,
-    description: "Modern tech for modern dining. Integrated QR ordering, mobile payments, and tableside service for trend-setting restaurants.",
-    href: "/restaurant-types/contemporary-casual",
-  },
-  {
-    label: "Buffet",
-    icon: UtensilsCrossed,
-    description: "Manage large scale dining with ticket entry systems, kitchen replenishment notifications, and wastage tracking.",
-    href: "/restaurant-types/buffet",
-  },
-  {
-    label: "Ghost Restaurant",
-    icon: Cloud,
-    description: "Virtual brands, real profits. Manage multiple digital storefronts from one kitchen and sync with all major delivery apps.",
-    href: "/restaurant-types/ghost-restaurant",
-  },
-  {
-    label: "Delivery Only",
-    icon: Truck,
-    description: "Focus on the fleet. Optimize dispatching, track delivery times, and manage third-party integration from a single order screen.",
-    href: "/restaurant-types/delivery-only",
+    label: "Mongolian Barbecue",
+    icon: Beef,
+    description: "Interactive dining optimization. Manage custom ingredient selections, station workflows, and guest-driven experience.",
+    href: "/restaurant-types/mongolian-bbq",
   },
   {
     label: "Concession",
@@ -162,31 +148,49 @@ const RESTAURANT_TYPES = [
     href: "/restaurant-types/concession",
   },
   {
-    label: "Ice Cream Shop",
-    icon: IceCream,
-    description: "Cold treats, hot sales. Manage complex modifier chains, seasonal flavors, and high-frequency transactions with ease.",
-    href: "/restaurant-types/ice-cream-shop",
+    label: "Digital-Only",
+    icon: Cloud,
+    description: "Delivery-first operations. Centralize orders across all platforms, optimize fulfillment, and track performance in real-time.",
+    href: "/restaurant-types/digital-only",
+  },
+  {
+    label: "Theme",
+    icon: Gem,
+    description: "Specialized management for themed venues. Coordinate experiences, manage entertainment, and deliver brand-consistent service.",
+    href: "/restaurant-types/theme",
+  },
+  {
+    label: "Bakery",
+    icon: ChefHat,
+    description: "Track daily inventory, manage batch production, and streamline pre-orders with precision and efficiency.",
+    href: "/restaurant-types/bakery",
+  },
+  {
+    label: "Delivery-Only",
+    icon: Truck,
+    description: "Focus on the fleet. Optimize dispatching, track delivery times, and manage third-party integration from a single order screen.",
+    href: "/restaurant-types/delivery-only",
   },
 ]
 
 const HERO_IMAGES = [
   {
-    src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=800",
+    src: HeroLeftTop,
     alt: "Fine Dining",
     label: "Full Service"
   },
   {
-    src: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&q=80&w=800",
+    src: HeroLeftBottom,
     alt: "Fast Food",
     label: "Fast Food"
   },
   {
-    src: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=800",
+    src: HeroRightBottom,
     alt: "Cafe Bistro",
     label: "Cafe & Bistro"
   },
   {
-    src: "https://images.unsplash.com/photo-1567521464027-f127ff144326?auto=format&fit=crop&q=80&w=800",
+    src: HeroRightTop,
     alt: "Ghost Kitchen",
     label: "Ghost Kitchen"
   }
@@ -468,7 +472,7 @@ const RestaurantTypesPage = () => {
               <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-black rounded-l-[100px] z-0" />
               <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
                 <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg border border-zinc-100">
-                  <Image src="https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&q=80&w=800" alt="Fast Processing" fill className="object-cover" />
+                  <Image src={Journey1} alt="Fast Processing" fill className="object-cover" />
                 </div>
               </div>
               <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -487,7 +491,7 @@ const RestaurantTypesPage = () => {
               <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-black rounded-r-[100px] z-0" />
               <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
                 <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg border border-zinc-100">
-                  <Image src="https://images.unsplash.com/photo-1556742044-3c52d6e88c62?auto=format&fit=crop&q=80&w=800" alt="Order Syncing" fill className="object-cover" />
+                  <Image src={Journey2} alt="Order Syncing" fill className="object-cover" />
                 </div>
               </div>
               <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -506,7 +510,7 @@ const RestaurantTypesPage = () => {
               <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-black rounded-l-[100px] z-0" />
               <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
                 <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg border border-zinc-100">
-                  <Image src="https://images.unsplash.com/photo-1556745753-b2904692b3cd?auto=format&fit=crop&q=80&w=800" alt="Zero Delays" fill className="object-cover" />
+                  <Image src={Journey3} alt="Zero Delays" fill className="object-cover" />
                 </div>
               </div>
               <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -525,7 +529,7 @@ const RestaurantTypesPage = () => {
               <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-black rounded-r-[100px] z-0" />
               <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
                 <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg border border-zinc-100">
-                  <Image src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?auto=format&fit=crop&q=80&w=800" alt="Order Accuracy" fill className="object-cover" />
+                  <Image src={Journey4} alt="Order Accuracy" fill className="object-cover" />
                 </div>
               </div>
               <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -592,7 +596,7 @@ const RestaurantTypesPage = () => {
                   viewBox="0 0 580 580"
                 >
                   {diagramItems.map((type, idx) => {
-                    const angle = type.angle ?? (idx * (360 / diagramItems.length))
+                    const angle = (idx * (360 / diagramItems.length))
                     const rad = (angle * Math.PI) / 180
                     const r = 210
                     const rInner = 90
@@ -635,7 +639,7 @@ const RestaurantTypesPage = () => {
                         >
                           <span className="text-red-500 font-black uppercase tracking-[0.25em] text-[11px]">DINE360</span>
                           <span className="text-white font-black text-lg leading-tight">Built for Every Restaurant Model</span>
-                          <span className="text-gray-300 text-xs leading-relaxed max-w-[200px] font-medium">
+                          <span className="text-gray-300 text-xs leading-relaxed max-w-50 font-medium">
                             One system. Unlimited possibilities. From small independent outlets to multi-branch operations, Dine360 powers modern restaurant performance.
                           </span>
                         </motion.div>
@@ -662,7 +666,7 @@ const RestaurantTypesPage = () => {
 
                 {/* Nodes */}
                 {diagramItems.map((type, idx) => {
-                  const angle = type.angle ?? (idx * (360 / diagramItems.length))
+                  const angle = (idx * (360 / diagramItems.length))
                   const rad = (angle * Math.PI) / 180
                   const r = 210
                   const cx = 290 + r * Math.sin(rad)
diff --git a/src/app/restaurant-types/pop-up/page.tsx b/src/app/restaurant-types/pop-up/page.tsx
index 062a573..ed67e4b 100644
--- a/src/app/restaurant-types/pop-up/page.tsx
+++ b/src/app/restaurant-types/pop-up/page.tsx
@@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target, Utensils, Users, Sparkles, Layout } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1550966841-3ee5ad0110c3?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import PopUpLeft from '@/assets/restaurant/types/pop-up/left.webp'
+import PopUpCentre from '@/assets/restaurant/types/pop-up/center.avif'
+import PopUpRight from '@/assets/restaurant/types/pop-up/right.avif'
+import PopUp1 from '@/assets/restaurant/types/pop-up/1.avif'
+import PopUp2 from '@/assets/restaurant/types/pop-up/2.avif'
+import PopUp3 from '@/assets/restaurant/types/pop-up/3.webp'
+import PopUp4 from '@/assets/restaurant/types/pop-up/4.avif'
+import POSImg from '@/assets/restaurant/types/pop-up/pos.webp'
+import OrderManagementImg from '@/assets/restaurant/types/pop-up/order-management.webp'
+import TableReservationImg from '@/assets/restaurant/types/pop-up/table-reservation.webp'
+import QRMenuImg from '@/assets/restaurant/types/pop-up/qr-menu.webp'
+import MultiBranchImg from '@/assets/restaurant/types/pop-up/multi-location.webp'
+
+const HERO_IMAGES = [
+  PopUpLeft,
+  PopUpCentre,
+  PopUpRight,
+]
+
+const JOURNEY_IMAGES = [
+  PopUp1,
+  PopUp2,
+  PopUp3,
+  PopUp4,
 ]
 
 const PopUpPage = () => {
@@ -95,7 +114,7 @@ const PopUpPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Pop-Up Setup" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Pop-Up Left" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Setup</p>
@@ -110,7 +129,7 @@ const PopUpPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Flexible Service" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Pop-Up Centre" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
@@ -125,7 +144,7 @@ const PopUpPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="On-the-go Dining" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Pop-Up Right" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Flexibility</p>
@@ -215,7 +234,7 @@ const PopUpPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Quick Setup" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Quick Setup" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -229,7 +248,7 @@ const PopUpPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Smooth Flow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Smooth Flow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -243,7 +262,7 @@ const PopUpPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Event Crowds" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Event Crowds" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -257,7 +276,7 @@ const PopUpPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -315,7 +334,7 @@ const PopUpPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -331,7 +350,7 @@ const PopUpPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -408,7 +427,7 @@ const PopUpPage = () => {
           </div>
           <div className="relative h-[400px]">
              <div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Event Service" fill className="object-cover rounded-2xl" />
+               <Image src={TableReservationImg} alt="Event Service" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
@@ -420,7 +439,7 @@ const PopUpPage = () => {
           <div className="relative h-[420px] order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
+               <Image src={QRMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -498,7 +517,7 @@ const PopUpPage = () => {
           <div className="relative h-[420px]">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-3xl 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 Location" fill className="object-cover rounded-2xl" />
+               <Image src={MultiBranchImg} alt="Multi Location" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/pub/page.tsx b/src/app/restaurant-types/pub/page.tsx
index 84e60f3..e4cceef 100644
--- a/src/app/restaurant-types/pub/page.tsx
+++ b/src/app/restaurant-types/pub/page.tsx
@@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1538488881038-e252a119ace7?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1574096079513-d8259312b785?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1566633806327-68e152aaf26d?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1572116469696-31de0f17cc34?auto=format&fit=crop&q=80&w=600",
+// Import local assets
+import PubLeft from '@/assets/restaurant/types/pub/left.webp'
+import PubCentre from '@/assets/restaurant/types/pub/centre.webp'
+import PubRight from '@/assets/restaurant/types/pub/right.webp'
+import Pub1 from '@/assets/restaurant/types/pub/1.webp'
+import Pub2 from '@/assets/restaurant/types/pub/2.webp'
+import Pub3 from '@/assets/restaurant/types/pub/3.webp'
+import Pub4 from '@/assets/restaurant/types/pub/4.webp'
+import PosImg from '@/assets/restaurant/types/pub/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/pub/order-management.webp'
+import TableMgmtImg from '@/assets/restaurant/types/pub/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/pub/qr-menu.webp'
+import MultiBranchImg from '@/assets/restaurant/types/pub/multi-location.webp'
+
+const HERO_IMAGES = [
+  PubLeft,
+  PubCentre,
+  PubRight,
+]
+
+const JOURNEY_IMAGES = [
+  Pub1,
+  Pub2,
+  Pub3,
+  Pub4,
 ]
 
 const PubPage = () => {
@@ -85,8 +104,8 @@ const PubPage = () => {
           </div>
 
           {/* Right Content - Cards */}
-          <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
+          <div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div
@@ -95,8 +114,8 @@ const PubPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Pub View" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={HERO_IMAGES[0]} alt="Pub View" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
                     <p className="text-white font-bold text-2xl">+85%</p>
@@ -110,8 +129,8 @@ const PubPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Bar Service" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={HERO_IMAGES[1]} alt="Bar Service" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Sales</p>
                     <p className="text-white font-bold text-2xl">+30%</p>
@@ -125,8 +144,8 @@ const PubPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[2]} alt="Pub Dining" fill className="object-cover" />
-                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
+                <Image src={HERO_IMAGES[2]} alt="Pub Dining" fill className="object-cover" />
+                <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
                     <p className="text-white font-bold text-2xl">100%</p>
@@ -212,10 +231,10 @@ const PubPage = () => {
 
         <div className="relative max-w-4xl mx-auto">
           <div className="flex flex-col md:flex-row items-center relative">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Drink Order" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Drink Order" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -225,11 +244,11 @@ const PubPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Bar Coordination" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Bar Coordination" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -239,11 +258,11 @@ const PubPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
-            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
+            <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Table Service" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Table Service" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -253,11 +272,11 @@ const PubPage = () => {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
-             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
+          <div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
+             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -294,7 +313,7 @@ const PubPage = () => {
                 "Real-time sales tracking"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -308,14 +327,14 @@ const PubPage = () => {
             </div>
           </div>
 
-          <div className="relative h-[400px] w-full order-1 lg:order-2">
+          <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -324,14 +343,14 @@ const PubPage = () => {
       {/* Order Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] w-full">
+          <div className="relative h-105 w-full">
              <motion.div
               className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -354,7 +373,7 @@ const PubPage = () => {
                 "Track preparation and service times"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -372,7 +391,7 @@ const PubPage = () => {
 
       {/* Table Management Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
-        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
+        <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
         <div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-3">
@@ -406,9 +425,9 @@ const PubPage = () => {
               Get Started
             </Link>
           </div>
-          <div className="relative h-[400px]">
+          <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-2xl" />
+               <Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
@@ -417,10 +436,10 @@ const PubPage = () => {
       {/* QR Code Menu Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[420px] order-2 lg:order-1">
+          <div className="relative h-105 order-2 lg:order-1">
             <div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
             <div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -443,7 +462,7 @@ const PubPage = () => {
                 "Update menu items instantly"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -482,7 +501,7 @@ const PubPage = () => {
                 "Manage menus and inventory centrally"
               ].map((point, i) => (
                 <li key={i} className="flex gap-3 items-start group">
-                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
+                  <div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
                     <Check className="w-3.5 h-3.5" />
                   </div>
                   <span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
@@ -495,10 +514,10 @@ const PubPage = () => {
               </Link>
             </div>
           </div>
-          <div className="relative h-[420px]">
+          <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-3xl 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-Location Management" fill className="object-cover rounded-2xl" />
+               <Image src={MultiBranchImg} alt="Multi-Location Management" fill className="object-cover rounded-2xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/teppanyaki/page.tsx b/src/app/restaurant-types/teppanyaki/page.tsx
index 87ffa69..0dd17ed 100644
--- a/src/app/restaurant-types/teppanyaki/page.tsx
+++ b/src/app/restaurant-types/teppanyaki/page.tsx
@@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1544124499-58962cc3d645?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1615362312505-babc78c19967?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=600",
+// Local Assets
+import TeppanyakiLeft from '@/assets/restaurant/types/teppanyaki-grill/left.avif'
+import TeppanyakiCentre from '@/assets/restaurant/types/teppanyaki-grill/centre.webp'
+import TeppanyakiRight from '@/assets/restaurant/types/teppanyaki-grill/right.webp'
+import Step1Img from '@/assets/restaurant/types/teppanyaki-grill/1.webp'
+import Step2Img from '@/assets/restaurant/types/teppanyaki-grill/2.webp'
+import Step3Img from '@/assets/restaurant/types/teppanyaki-grill/3.webp'
+import Step4Img from '@/assets/restaurant/types/teppanyaki-grill/4.webp'
+import PosImg from '@/assets/restaurant/types/teppanyaki-grill/pos.webp'
+import OrderMgmtImg from '@/assets/restaurant/types/teppanyaki-grill/order-management.webp'
+import TableMgmtImg from '@/assets/restaurant/types/teppanyaki-grill/table-reservation.webp'
+import QrMenuImg from '@/assets/restaurant/types/teppanyaki-grill/qr-menu.webp'
+import MultiLocationImg from '@/assets/restaurant/types/teppanyaki-grill/multi-location.webp'
+
+const HERO_IMAGES = [
+  TeppanyakiLeft,
+  TeppanyakiCentre,
+  TeppanyakiRight,
+]
+
+const JOURNEY_IMAGES = [
+  Step1Img,
+  Step2Img,
+  Step3Img,
+  Step4Img,
 ]
 
 const TeppanyakiPage = () => {
@@ -64,21 +83,21 @@ const TeppanyakiPage = () => {
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
             <div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
               <motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
-                <Image src={CARD_IMAGES[0]} alt="Chef Prep" fill className="object-cover" />
+                <Image src={HERO_IMAGES[0]} alt="Chef Prep" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Coordination</p>
                   <p className="text-white font-bold text-2xl">85% Better</p>
                 </div>
               </motion.div>
               <motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
-                <Image src={CARD_IMAGES[1]} alt="Live Cooking" fill className="object-cover" />
+                <Image src={HERO_IMAGES[1]} alt="Live Cooking" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Timing</p>
                   <p className="text-white font-bold text-2xl">30% Improved</p>
                 </div>
               </motion.div>
               <motion.div className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left" initial={{ opacity: 0, x: 50, rotate: 20 }} animate={{ opacity: 1, x: 0, rotate: 12 }} transition={{ duration: 0.8, delay: 0.4 }}>
-                <Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
+                <Image src={HERO_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-white">
                   <p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Billing</p>
                   <p className="text-white font-bold text-2xl">100% Accurate</p>
@@ -136,7 +155,7 @@ const TeppanyakiPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Group Seating" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Group Seating" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -150,7 +169,7 @@ const TeppanyakiPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -164,7 +183,7 @@ const TeppanyakiPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[2]} alt="Order Flow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Order Flow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -178,7 +197,7 @@ const TeppanyakiPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -217,7 +236,7 @@ const TeppanyakiPage = () => {
           </div>
           <div className="relative h-100 w-full order-1 lg:order-2">
             <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
-              <Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
+              <Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -227,7 +246,7 @@ const TeppanyakiPage = () => {
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="relative h-105 w-full">
             <motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
-              <Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -287,7 +306,7 @@ const TeppanyakiPage = () => {
           </div>
           <div className="relative h-100">
              <div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
-               <Image src="https://images.unsplash.com/photo-1544124499-58962cc3d645?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-3xl" />
+               <Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
@@ -298,7 +317,7 @@ const TeppanyakiPage = () => {
           <div className="relative h-105 order-2 lg:order-1">
             <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-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-3xl" />
+               <Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
             </div>
           </div>
           <div className="flex flex-col gap-6 order-1 lg:order-2">
@@ -354,7 +373,7 @@ const TeppanyakiPage = () => {
           </div>
           <div className="relative h-105">
              <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-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=800" alt="Multi Location" fill className="object-cover rounded-3xl" />
+               <Image src={MultiLocationImg} alt="Multi Location" fill className="object-cover rounded-3xl" />
             </div>
           </div>
         </div>
diff --git a/src/app/restaurant-types/theme/page.tsx b/src/app/restaurant-types/theme/page.tsx
index 66aa0be..8cf1db2 100644
--- a/src/app/restaurant-types/theme/page.tsx
+++ b/src/app/restaurant-types/theme/page.tsx
@@ -10,13 +10,21 @@ import Testimonials from '@/components/Testimonials'
 import FAQ from '@/components/FAQ'
 import { Check, Box, Zap, Clock, Target, Store, Users, Layout, AreaChart } from 'lucide-react'
 
-const CARD_IMAGES = [
-  "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1541544741938-0af808871cc0?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1574091417483-376043477164?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
-  "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
-]
+// Asset Imports
+import ThemeLeft from '@/assets/restaurant/types/theme/left.webp'
+import ThemeCentre from '@/assets/restaurant/types/theme/centre.webp'
+import ThemeRight from '@/assets/restaurant/types/theme/right.webp'
+import Theme1 from '@/assets/restaurant/types/theme/1.webp'
+import Theme2 from '@/assets/restaurant/types/theme/2.webp'
+import Theme3 from '@/assets/restaurant/types/theme/3.webp'
+import Theme4 from '@/assets/restaurant/types/theme/4.webp'
+import ThemePOS from '@/assets/restaurant/types/theme/pos.webp'
+import ThemeOrder from '@/assets/restaurant/types/theme/order-management.webp'
+import ThemeTable from '@/assets/restaurant/types/theme/table-reservation.webp'
+import ThemeQR from '@/assets/restaurant/types/theme/qr-menu.webp'
+import ThemeMulti from '@/assets/restaurant/types/theme/multi-location.webp'
+
+const JOURNEY_IMAGES = [Theme1, Theme2, Theme3, Theme4]
 
 const ThemeRestaurantPage = () => {
   return (
@@ -84,7 +92,7 @@ const ThemeRestaurantPage = () => {
             </div>
           </div>
 
-          {/* Right Content - Cards */}
+          {/* Right Content - Images */}
           <div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
 
@@ -95,7 +103,7 @@ const ThemeRestaurantPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: -12 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
               >
-                <Image src={CARD_IMAGES[0]} alt="Themed Dining" fill className="object-cover" />
+                <Image src={ThemeLeft} alt="Themed Dining" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Service Flow</p>
@@ -110,7 +118,7 @@ const ThemeRestaurantPage = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8 }}
               >
-                <Image src={CARD_IMAGES[1]} alt="Guest Experience" fill className="object-cover" />
+                <Image src={ThemeCentre} alt="Guest Experience" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Satisfaction</p>
@@ -125,7 +133,7 @@ const ThemeRestaurantPage = () => {
                 animate={{ opacity: 1, x: 0, rotate: 12 }}
                 transition={{ duration: 0.8, delay: 0.4 }}
               >
-                <Image src={CARD_IMAGES[4]} alt="Billing Experience" fill className="object-cover" />
+                <Image src={ThemeRight} alt="Billing Experience" fill className="object-cover" />
                 <div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
                   <div className="relative z-10">
                     <p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Checkout</p>
@@ -215,7 +223,7 @@ const ThemeRestaurantPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[0]} alt="Smooth Order Flow" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[0]} alt="Smooth Order Flow" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10 text-nowrap">
@@ -229,7 +237,7 @@ const ThemeRestaurantPage = () => {
             <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10 text-nowrap">
@@ -243,7 +251,7 @@ const ThemeRestaurantPage = () => {
             <div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[3]} alt="Enhanced Experience" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[2]} alt="Enhanced Experience" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -257,7 +265,7 @@ const ThemeRestaurantPage = () => {
              <div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
             <div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
               <div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
-                <Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
+                <Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
               </div>
             </div>
             <div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
@@ -315,7 +323,7 @@ const ThemeRestaurantPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[0]} alt="Theme POS" fill className="object-cover rounded-2xl" />
+              <Image src={ThemePOS} alt="Theme POS" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -331,7 +339,7 @@ const ThemeRestaurantPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
+              <Image src={ThemeOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -416,7 +424,7 @@ const ThemeRestaurantPage = () => {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[3]} alt="Table Management" fill className="object-cover rounded-2xl" />
+              <Image src={ThemeTable} alt="Table Management" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
         </div>
@@ -432,7 +440,7 @@ const ThemeRestaurantPage = () => {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <Image src={CARD_IMAGES[1]} alt="QR Menu" fill className="object-cover rounded-2xl" />
+              <Image src={ThemeQR} alt="QR Menu" fill className="object-cover rounded-2xl" />
             </motion.div>
           </div>
           <div className="flex flex-col gap-6">
@@ -511,28 +519,8 @@ const ThemeRestaurantPage = () => {
           </div>
 
           <div className="relative h-[400px] w-full hidden lg:block">
+            <Image src={ThemeMulti} alt="Multi Branch Management" fill className="object-cover opacity-40 mix-blend-overlay" />
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-red-600/20 rounded-full blur-[100px]" />
-            <div className="grid grid-cols-2 gap-4">
-               <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                className="aspect-square bg-white rounded-3xl p-6 shadow-xl relative overflow-hidden"
-              >
-                <Store className="w-8 h-8 text-red-600 mb-4" />
-                <p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Total Venues</p>
-                <p className="text-zinc-900 text-3xl font-bold">15+ Worlds</p>
-              </motion.div>
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.1 }}
-                className="aspect-square bg-zinc-800 rounded-3xl p-6 shadow-xl relative mt-8"
-              >
-                <AreaChart className="w-8 h-8 text-red-500 mb-4" />
-                <p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Growth rate</p>
-                <p className="text-white text-3xl font-bold">+35%</p>
-              </motion.div>
-            </div>
           </div>
         </div>
       </section>
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/1.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/1.webp
new file mode 100644
index 0000000..5aad04f
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/1.webp differ
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/2.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/2.webp
new file mode 100644
index 0000000..47cd9d3
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/2.webp differ
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/3.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/3.webp
new file mode 100644
index 0000000..cb555c8
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/3.webp differ
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/4.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/4.webp
new file mode 100644
index 0000000..b2bf1b9
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/4.webp differ
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-bottom.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-bottom.webp
new file mode 100644
index 0000000..b858ef6
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-bottom.webp differ
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-top.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-top.webp
new file mode 100644
index 0000000..bb8ea35
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-top.webp differ
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-bottom.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-bottom.webp
new file mode 100644
index 0000000..649c268
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-bottom.webp differ
diff --git a/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-top.webp b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-top.webp
new file mode 100644
index 0000000..e292bc5
Binary files /dev/null and b/src/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-top.webp differ
diff --git a/src/assets/restaurant/types/bakery/1.webp b/src/assets/restaurant/types/bakery/1.webp
new file mode 100644
index 0000000..142097e
Binary files /dev/null and b/src/assets/restaurant/types/bakery/1.webp differ
diff --git a/src/assets/restaurant/types/bakery/2.webp b/src/assets/restaurant/types/bakery/2.webp
new file mode 100644
index 0000000..53be19d
Binary files /dev/null and b/src/assets/restaurant/types/bakery/2.webp differ
diff --git a/src/assets/restaurant/types/bakery/3.webp b/src/assets/restaurant/types/bakery/3.webp
new file mode 100644
index 0000000..733d9cd
Binary files /dev/null and b/src/assets/restaurant/types/bakery/3.webp differ
diff --git a/src/assets/restaurant/types/bakery/4.webp b/src/assets/restaurant/types/bakery/4.webp
new file mode 100644
index 0000000..ea1e5a5
Binary files /dev/null and b/src/assets/restaurant/types/bakery/4.webp differ
diff --git a/src/assets/restaurant/types/bakery/centre.webp b/src/assets/restaurant/types/bakery/centre.webp
new file mode 100644
index 0000000..b8790c4
Binary files /dev/null and b/src/assets/restaurant/types/bakery/centre.webp differ
diff --git a/src/assets/restaurant/types/bakery/left.webp b/src/assets/restaurant/types/bakery/left.webp
new file mode 100644
index 0000000..a334287
Binary files /dev/null and b/src/assets/restaurant/types/bakery/left.webp differ
diff --git a/src/assets/restaurant/types/bakery/multi-location.webp b/src/assets/restaurant/types/bakery/multi-location.webp
new file mode 100644
index 0000000..920de3b
Binary files /dev/null and b/src/assets/restaurant/types/bakery/multi-location.webp differ
diff --git a/src/assets/restaurant/types/bakery/order-management.webp b/src/assets/restaurant/types/bakery/order-management.webp
new file mode 100644
index 0000000..3c7daa6
Binary files /dev/null and b/src/assets/restaurant/types/bakery/order-management.webp differ
diff --git a/src/assets/restaurant/types/bakery/pos.webp b/src/assets/restaurant/types/bakery/pos.webp
new file mode 100644
index 0000000..d3ad650
Binary files /dev/null and b/src/assets/restaurant/types/bakery/pos.webp differ
diff --git a/src/assets/restaurant/types/bakery/qr-menu.webp b/src/assets/restaurant/types/bakery/qr-menu.webp
new file mode 100644
index 0000000..3a7c88a
Binary files /dev/null and b/src/assets/restaurant/types/bakery/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/bakery/right.webp b/src/assets/restaurant/types/bakery/right.webp
new file mode 100644
index 0000000..24a77bf
Binary files /dev/null and b/src/assets/restaurant/types/bakery/right.webp differ
diff --git a/src/assets/restaurant/types/bakery/table-reservation.webp b/src/assets/restaurant/types/bakery/table-reservation.webp
new file mode 100644
index 0000000..1a98f5a
Binary files /dev/null and b/src/assets/restaurant/types/bakery/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/bistro/1.avif b/src/assets/restaurant/types/bistro/1.avif
new file mode 100644
index 0000000..27e09a3
Binary files /dev/null and b/src/assets/restaurant/types/bistro/1.avif differ
diff --git a/src/assets/restaurant/types/bistro/2.avif b/src/assets/restaurant/types/bistro/2.avif
new file mode 100644
index 0000000..26ec722
Binary files /dev/null and b/src/assets/restaurant/types/bistro/2.avif differ
diff --git a/src/assets/restaurant/types/bistro/3.webp b/src/assets/restaurant/types/bistro/3.webp
new file mode 100644
index 0000000..b81698d
Binary files /dev/null and b/src/assets/restaurant/types/bistro/3.webp differ
diff --git a/src/assets/restaurant/types/bistro/4.avif b/src/assets/restaurant/types/bistro/4.avif
new file mode 100644
index 0000000..3a33978
Binary files /dev/null and b/src/assets/restaurant/types/bistro/4.avif differ
diff --git a/src/assets/restaurant/types/bistro/center.avif b/src/assets/restaurant/types/bistro/center.avif
new file mode 100644
index 0000000..26ec722
Binary files /dev/null and b/src/assets/restaurant/types/bistro/center.avif differ
diff --git a/src/assets/restaurant/types/bistro/left.webp b/src/assets/restaurant/types/bistro/left.webp
new file mode 100644
index 0000000..acf2ee8
Binary files /dev/null and b/src/assets/restaurant/types/bistro/left.webp differ
diff --git a/src/assets/restaurant/types/bistro/multi-location.webp b/src/assets/restaurant/types/bistro/multi-location.webp
new file mode 100644
index 0000000..b99a914
Binary files /dev/null and b/src/assets/restaurant/types/bistro/multi-location.webp differ
diff --git a/src/assets/restaurant/types/bistro/order-management.webp b/src/assets/restaurant/types/bistro/order-management.webp
new file mode 100644
index 0000000..631a7d4
Binary files /dev/null and b/src/assets/restaurant/types/bistro/order-management.webp differ
diff --git a/src/assets/restaurant/types/bistro/pos.webp b/src/assets/restaurant/types/bistro/pos.webp
new file mode 100644
index 0000000..6086974
Binary files /dev/null and b/src/assets/restaurant/types/bistro/pos.webp differ
diff --git a/src/assets/restaurant/types/bistro/qr-menu.webp b/src/assets/restaurant/types/bistro/qr-menu.webp
new file mode 100644
index 0000000..7d67820
Binary files /dev/null and b/src/assets/restaurant/types/bistro/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/bistro/right.avif b/src/assets/restaurant/types/bistro/right.avif
new file mode 100644
index 0000000..04c0ced
Binary files /dev/null and b/src/assets/restaurant/types/bistro/right.avif differ
diff --git a/src/assets/restaurant/types/bistro/table-reservation.webp b/src/assets/restaurant/types/bistro/table-reservation.webp
new file mode 100644
index 0000000..f36ecb2
Binary files /dev/null and b/src/assets/restaurant/types/bistro/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/bistro/testimonial.webp b/src/assets/restaurant/types/bistro/testimonial.webp
new file mode 100644
index 0000000..e53e018
Binary files /dev/null and b/src/assets/restaurant/types/bistro/testimonial.webp differ
diff --git a/src/assets/restaurant/types/buffet/1.webp b/src/assets/restaurant/types/buffet/1.webp
new file mode 100644
index 0000000..e21bcf4
Binary files /dev/null and b/src/assets/restaurant/types/buffet/1.webp differ
diff --git a/src/assets/restaurant/types/buffet/2.webp b/src/assets/restaurant/types/buffet/2.webp
new file mode 100644
index 0000000..6cb714b
Binary files /dev/null and b/src/assets/restaurant/types/buffet/2.webp differ
diff --git a/src/assets/restaurant/types/buffet/3.webp b/src/assets/restaurant/types/buffet/3.webp
new file mode 100644
index 0000000..a581e6a
Binary files /dev/null and b/src/assets/restaurant/types/buffet/3.webp differ
diff --git a/src/assets/restaurant/types/buffet/4.webp b/src/assets/restaurant/types/buffet/4.webp
new file mode 100644
index 0000000..712e31a
Binary files /dev/null and b/src/assets/restaurant/types/buffet/4.webp differ
diff --git a/src/assets/restaurant/types/buffet/centre.webp b/src/assets/restaurant/types/buffet/centre.webp
new file mode 100644
index 0000000..9c32efc
Binary files /dev/null and b/src/assets/restaurant/types/buffet/centre.webp differ
diff --git a/src/assets/restaurant/types/buffet/left.webp b/src/assets/restaurant/types/buffet/left.webp
new file mode 100644
index 0000000..e95817e
Binary files /dev/null and b/src/assets/restaurant/types/buffet/left.webp differ
diff --git a/src/assets/restaurant/types/buffet/multi-location.webp b/src/assets/restaurant/types/buffet/multi-location.webp
new file mode 100644
index 0000000..f5d9c71
Binary files /dev/null and b/src/assets/restaurant/types/buffet/multi-location.webp differ
diff --git a/src/assets/restaurant/types/buffet/order-management.webp b/src/assets/restaurant/types/buffet/order-management.webp
new file mode 100644
index 0000000..5bd0b0f
Binary files /dev/null and b/src/assets/restaurant/types/buffet/order-management.webp differ
diff --git a/src/assets/restaurant/types/buffet/pos.webp b/src/assets/restaurant/types/buffet/pos.webp
new file mode 100644
index 0000000..0ef5835
Binary files /dev/null and b/src/assets/restaurant/types/buffet/pos.webp differ
diff --git a/src/assets/restaurant/types/buffet/qr-menu.webp b/src/assets/restaurant/types/buffet/qr-menu.webp
new file mode 100644
index 0000000..60b8f9c
Binary files /dev/null and b/src/assets/restaurant/types/buffet/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/buffet/right.webp b/src/assets/restaurant/types/buffet/right.webp
new file mode 100644
index 0000000..1dea295
Binary files /dev/null and b/src/assets/restaurant/types/buffet/right.webp differ
diff --git a/src/assets/restaurant/types/buffet/table-reservation.webp b/src/assets/restaurant/types/buffet/table-reservation.webp
new file mode 100644
index 0000000..1a836bc
Binary files /dev/null and b/src/assets/restaurant/types/buffet/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/cafe/1.webp b/src/assets/restaurant/types/cafe/1.webp
new file mode 100644
index 0000000..8668595
Binary files /dev/null and b/src/assets/restaurant/types/cafe/1.webp differ
diff --git a/src/assets/restaurant/types/cafe/2.webp b/src/assets/restaurant/types/cafe/2.webp
new file mode 100644
index 0000000..15d7168
Binary files /dev/null and b/src/assets/restaurant/types/cafe/2.webp differ
diff --git a/src/assets/restaurant/types/cafe/3.webp b/src/assets/restaurant/types/cafe/3.webp
new file mode 100644
index 0000000..ff4b71a
Binary files /dev/null and b/src/assets/restaurant/types/cafe/3.webp differ
diff --git a/src/assets/restaurant/types/cafe/4.webp b/src/assets/restaurant/types/cafe/4.webp
new file mode 100644
index 0000000..eb9ad4b
Binary files /dev/null and b/src/assets/restaurant/types/cafe/4.webp differ
diff --git a/src/assets/restaurant/types/cafe/centre.webp b/src/assets/restaurant/types/cafe/centre.webp
new file mode 100644
index 0000000..d5892b9
Binary files /dev/null and b/src/assets/restaurant/types/cafe/centre.webp differ
diff --git a/src/assets/restaurant/types/cafe/left.webp b/src/assets/restaurant/types/cafe/left.webp
new file mode 100644
index 0000000..5705048
Binary files /dev/null and b/src/assets/restaurant/types/cafe/left.webp differ
diff --git a/src/assets/restaurant/types/cafe/multi-location.webp b/src/assets/restaurant/types/cafe/multi-location.webp
new file mode 100644
index 0000000..8ab1087
Binary files /dev/null and b/src/assets/restaurant/types/cafe/multi-location.webp differ
diff --git a/src/assets/restaurant/types/cafe/order-management.webp b/src/assets/restaurant/types/cafe/order-management.webp
new file mode 100644
index 0000000..b63c3f7
Binary files /dev/null and b/src/assets/restaurant/types/cafe/order-management.webp differ
diff --git a/src/assets/restaurant/types/cafe/pos.webp b/src/assets/restaurant/types/cafe/pos.webp
new file mode 100644
index 0000000..3707c83
Binary files /dev/null and b/src/assets/restaurant/types/cafe/pos.webp differ
diff --git a/src/assets/restaurant/types/cafe/qr-menu.webp b/src/assets/restaurant/types/cafe/qr-menu.webp
new file mode 100644
index 0000000..9a52f68
Binary files /dev/null and b/src/assets/restaurant/types/cafe/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/cafe/right.webp b/src/assets/restaurant/types/cafe/right.webp
new file mode 100644
index 0000000..b09fe59
Binary files /dev/null and b/src/assets/restaurant/types/cafe/right.webp differ
diff --git a/src/assets/restaurant/types/cafe/table-reservation.webp b/src/assets/restaurant/types/cafe/table-reservation.webp
new file mode 100644
index 0000000..02c9277
Binary files /dev/null and b/src/assets/restaurant/types/cafe/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/cafe/testimonial.webp b/src/assets/restaurant/types/cafe/testimonial.webp
new file mode 100644
index 0000000..e2822ba
Binary files /dev/null and b/src/assets/restaurant/types/cafe/testimonial.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/1.avif b/src/assets/restaurant/types/cafeteria/1.avif
new file mode 100644
index 0000000..3dad32e
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/1.avif differ
diff --git a/src/assets/restaurant/types/cafeteria/2.avif b/src/assets/restaurant/types/cafeteria/2.avif
new file mode 100644
index 0000000..3a33978
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/2.avif differ
diff --git a/src/assets/restaurant/types/cafeteria/3.webp b/src/assets/restaurant/types/cafeteria/3.webp
new file mode 100644
index 0000000..8e4bf2a
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/3.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/4.avif b/src/assets/restaurant/types/cafeteria/4.avif
new file mode 100644
index 0000000..e3f8641
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/4.avif differ
diff --git a/src/assets/restaurant/types/cafeteria/center.avif b/src/assets/restaurant/types/cafeteria/center.avif
new file mode 100644
index 0000000..3a33978
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/center.avif differ
diff --git a/src/assets/restaurant/types/cafeteria/left.webp b/src/assets/restaurant/types/cafeteria/left.webp
new file mode 100644
index 0000000..10e7a39
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/left.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/multi-location.webp b/src/assets/restaurant/types/cafeteria/multi-location.webp
new file mode 100644
index 0000000..7898731
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/multi-location.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/order-management.webp b/src/assets/restaurant/types/cafeteria/order-management.webp
new file mode 100644
index 0000000..dc3e5b0
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/order-management.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/pos.webp b/src/assets/restaurant/types/cafeteria/pos.webp
new file mode 100644
index 0000000..7978975
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/pos.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/qr-menu.webp b/src/assets/restaurant/types/cafeteria/qr-menu.webp
new file mode 100644
index 0000000..6053180
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/right.avif b/src/assets/restaurant/types/cafeteria/right.avif
new file mode 100644
index 0000000..5918be8
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/right.avif differ
diff --git a/src/assets/restaurant/types/cafeteria/table-reservation.webp b/src/assets/restaurant/types/cafeteria/table-reservation.webp
new file mode 100644
index 0000000..178e437
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/cafeteria/testimonial.webp b/src/assets/restaurant/types/cafeteria/testimonial.webp
new file mode 100644
index 0000000..9a0c5d4
Binary files /dev/null and b/src/assets/restaurant/types/cafeteria/testimonial.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/1.webp b/src/assets/restaurant/types/casual-dining/1.webp
new file mode 100644
index 0000000..dc9aa91
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/1.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/2.webp b/src/assets/restaurant/types/casual-dining/2.webp
new file mode 100644
index 0000000..eb3971f
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/2.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/3.webp b/src/assets/restaurant/types/casual-dining/3.webp
new file mode 100644
index 0000000..047b821
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/3.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/4.webp b/src/assets/restaurant/types/casual-dining/4.webp
new file mode 100644
index 0000000..17a7407
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/4.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/centre.webp b/src/assets/restaurant/types/casual-dining/centre.webp
new file mode 100644
index 0000000..f9657fc
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/centre.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/left.webp b/src/assets/restaurant/types/casual-dining/left.webp
new file mode 100644
index 0000000..27e87da
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/left.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/multi-location.webp b/src/assets/restaurant/types/casual-dining/multi-location.webp
new file mode 100644
index 0000000..eff47e8
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/multi-location.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/order-management.webp b/src/assets/restaurant/types/casual-dining/order-management.webp
new file mode 100644
index 0000000..f603f76
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/order-management.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/pos.webp b/src/assets/restaurant/types/casual-dining/pos.webp
new file mode 100644
index 0000000..fa28a76
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/pos.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/qr-menu.webp b/src/assets/restaurant/types/casual-dining/qr-menu.webp
new file mode 100644
index 0000000..60b8f9c
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/right.webp b/src/assets/restaurant/types/casual-dining/right.webp
new file mode 100644
index 0000000..aa9bccf
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/right.webp differ
diff --git a/src/assets/restaurant/types/casual-dining/table-reservation.webp b/src/assets/restaurant/types/casual-dining/table-reservation.webp
new file mode 100644
index 0000000..9781346
Binary files /dev/null and b/src/assets/restaurant/types/casual-dining/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/coffee-house/1.avif b/src/assets/restaurant/types/coffee-house/1.avif
new file mode 100644
index 0000000..34a5e90
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/1.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/2.avif b/src/assets/restaurant/types/coffee-house/2.avif
new file mode 100644
index 0000000..ffae679
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/2.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/3.avif b/src/assets/restaurant/types/coffee-house/3.avif
new file mode 100644
index 0000000..67cbcb5
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/3.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/4.avif b/src/assets/restaurant/types/coffee-house/4.avif
new file mode 100644
index 0000000..113c54b
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/4.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/center.avif b/src/assets/restaurant/types/coffee-house/center.avif
new file mode 100644
index 0000000..67cbcb5
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/center.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/left.webp b/src/assets/restaurant/types/coffee-house/left.webp
new file mode 100644
index 0000000..8d24f0f
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/left.webp differ
diff --git a/src/assets/restaurant/types/coffee-house/multi 1.webp b/src/assets/restaurant/types/coffee-house/multi 1.webp
new file mode 100644
index 0000000..d781c38
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/multi 1.webp differ
diff --git a/src/assets/restaurant/types/coffee-house/multi 2.avif b/src/assets/restaurant/types/coffee-house/multi 2.avif
new file mode 100644
index 0000000..34a5e90
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/multi 2.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/multi 3.avif b/src/assets/restaurant/types/coffee-house/multi 3.avif
new file mode 100644
index 0000000..ffae679
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/multi 3.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/multi 4.avif b/src/assets/restaurant/types/coffee-house/multi 4.avif
new file mode 100644
index 0000000..67cbcb5
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/multi 4.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/multi-location.webp b/src/assets/restaurant/types/coffee-house/multi-location.webp
new file mode 100644
index 0000000..d781c38
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/multi-location.webp differ
diff --git a/src/assets/restaurant/types/coffee-house/order-management.webp b/src/assets/restaurant/types/coffee-house/order-management.webp
new file mode 100644
index 0000000..e95f83b
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/order-management.webp differ
diff --git a/src/assets/restaurant/types/coffee-house/pos.webp b/src/assets/restaurant/types/coffee-house/pos.webp
new file mode 100644
index 0000000..b515355
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/pos.webp differ
diff --git a/src/assets/restaurant/types/coffee-house/qr-menu.webp b/src/assets/restaurant/types/coffee-house/qr-menu.webp
new file mode 100644
index 0000000..764728f
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/coffee-house/right.avif b/src/assets/restaurant/types/coffee-house/right.avif
new file mode 100644
index 0000000..113c54b
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/right.avif differ
diff --git a/src/assets/restaurant/types/coffee-house/table-reservation.webp b/src/assets/restaurant/types/coffee-house/table-reservation.webp
new file mode 100644
index 0000000..41320f2
Binary files /dev/null and b/src/assets/restaurant/types/coffee-house/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/1.webp b/src/assets/restaurant/types/concession-stand/1.webp
new file mode 100644
index 0000000..51289be
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/1.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/2.webp b/src/assets/restaurant/types/concession-stand/2.webp
new file mode 100644
index 0000000..6883207
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/2.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/3.webp b/src/assets/restaurant/types/concession-stand/3.webp
new file mode 100644
index 0000000..64ae6b3
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/3.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/4.webp b/src/assets/restaurant/types/concession-stand/4.webp
new file mode 100644
index 0000000..fe5794d
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/4.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/SERVICE MANAGEMENT.webp b/src/assets/restaurant/types/concession-stand/SERVICE MANAGEMENT.webp
new file mode 100644
index 0000000..3cdc1e6
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/SERVICE MANAGEMENT.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/centre.webp b/src/assets/restaurant/types/concession-stand/centre.webp
new file mode 100644
index 0000000..82abd0c
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/centre.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/left.webp b/src/assets/restaurant/types/concession-stand/left.webp
new file mode 100644
index 0000000..740dc0e
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/left.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/multi-location.webp b/src/assets/restaurant/types/concession-stand/multi-location.webp
new file mode 100644
index 0000000..52cec22
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/multi-location.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/order-management.webp b/src/assets/restaurant/types/concession-stand/order-management.webp
new file mode 100644
index 0000000..c25e908
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/order-management.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/pos.webp b/src/assets/restaurant/types/concession-stand/pos.webp
new file mode 100644
index 0000000..a1f9cab
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/pos.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/qr-menu.webp b/src/assets/restaurant/types/concession-stand/qr-menu.webp
new file mode 100644
index 0000000..32ead1d
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/concession-stand/right.webp b/src/assets/restaurant/types/concession-stand/right.webp
new file mode 100644
index 0000000..9b8a638
Binary files /dev/null and b/src/assets/restaurant/types/concession-stand/right.webp differ
diff --git a/src/assets/restaurant/types/contemporary/1.avif b/src/assets/restaurant/types/contemporary/1.avif
new file mode 100644
index 0000000..423cf2a
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/1.avif differ
diff --git a/src/assets/restaurant/types/contemporary/2.avif b/src/assets/restaurant/types/contemporary/2.avif
new file mode 100644
index 0000000..26ec722
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/2.avif differ
diff --git a/src/assets/restaurant/types/contemporary/3.avif b/src/assets/restaurant/types/contemporary/3.avif
new file mode 100644
index 0000000..89b7d37
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/3.avif differ
diff --git a/src/assets/restaurant/types/contemporary/4.avif b/src/assets/restaurant/types/contemporary/4.avif
new file mode 100644
index 0000000..4b7db35
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/4.avif differ
diff --git a/src/assets/restaurant/types/contemporary/center.avif b/src/assets/restaurant/types/contemporary/center.avif
new file mode 100644
index 0000000..26ec722
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/center.avif differ
diff --git a/src/assets/restaurant/types/contemporary/left.avif b/src/assets/restaurant/types/contemporary/left.avif
new file mode 100644
index 0000000..89b7d37
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/left.avif differ
diff --git a/src/assets/restaurant/types/contemporary/multi-location.webp b/src/assets/restaurant/types/contemporary/multi-location.webp
new file mode 100644
index 0000000..94e83b9
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/multi-location.webp differ
diff --git a/src/assets/restaurant/types/contemporary/order-management.webp b/src/assets/restaurant/types/contemporary/order-management.webp
new file mode 100644
index 0000000..37391a3
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/order-management.webp differ
diff --git a/src/assets/restaurant/types/contemporary/pos.webp b/src/assets/restaurant/types/contemporary/pos.webp
new file mode 100644
index 0000000..fe7abd0
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/pos.webp differ
diff --git a/src/assets/restaurant/types/contemporary/qr-menu.webp b/src/assets/restaurant/types/contemporary/qr-menu.webp
new file mode 100644
index 0000000..30007d6
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/contemporary/right.webp b/src/assets/restaurant/types/contemporary/right.webp
new file mode 100644
index 0000000..ce203f8
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/right.webp differ
diff --git a/src/assets/restaurant/types/contemporary/table-reservation.webp b/src/assets/restaurant/types/contemporary/table-reservation.webp
new file mode 100644
index 0000000..6d2dc21
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/contemporary/testimonial.webp b/src/assets/restaurant/types/contemporary/testimonial.webp
new file mode 100644
index 0000000..5bc482f
Binary files /dev/null and b/src/assets/restaurant/types/contemporary/testimonial.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/1.webp b/src/assets/restaurant/types/delivery-only/1.webp
new file mode 100644
index 0000000..11b5906
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/1.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/2.webp b/src/assets/restaurant/types/delivery-only/2.webp
new file mode 100644
index 0000000..22461c3
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/2.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/3.webp b/src/assets/restaurant/types/delivery-only/3.webp
new file mode 100644
index 0000000..c5d0b72
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/3.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/4.webp b/src/assets/restaurant/types/delivery-only/4.webp
new file mode 100644
index 0000000..a43e055
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/4.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/centre.webp b/src/assets/restaurant/types/delivery-only/centre.webp
new file mode 100644
index 0000000..0e45e29
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/centre.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/delivery-management.webp b/src/assets/restaurant/types/delivery-only/delivery-management.webp
new file mode 100644
index 0000000..b2a5b2e
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/delivery-management.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/digital-menu.webp b/src/assets/restaurant/types/delivery-only/digital-menu.webp
new file mode 100644
index 0000000..aee1f08
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/digital-menu.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/left.webp b/src/assets/restaurant/types/delivery-only/left.webp
new file mode 100644
index 0000000..4036e0d
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/left.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/multi-location.webp b/src/assets/restaurant/types/delivery-only/multi-location.webp
new file mode 100644
index 0000000..5a111ba
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/multi-location.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/order-management.webp b/src/assets/restaurant/types/delivery-only/order-management.webp
new file mode 100644
index 0000000..9ecbd85
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/order-management.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/pos.webp b/src/assets/restaurant/types/delivery-only/pos.webp
new file mode 100644
index 0000000..e6e953f
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/pos.webp differ
diff --git a/src/assets/restaurant/types/delivery-only/right.webp b/src/assets/restaurant/types/delivery-only/right.webp
new file mode 100644
index 0000000..9e53f0f
Binary files /dev/null and b/src/assets/restaurant/types/delivery-only/right.webp differ
diff --git a/src/assets/restaurant/types/destination/1.avif b/src/assets/restaurant/types/destination/1.avif
new file mode 100644
index 0000000..423cf2a
Binary files /dev/null and b/src/assets/restaurant/types/destination/1.avif differ
diff --git a/src/assets/restaurant/types/destination/2.avif b/src/assets/restaurant/types/destination/2.avif
new file mode 100644
index 0000000..9d96b01
Binary files /dev/null and b/src/assets/restaurant/types/destination/2.avif differ
diff --git a/src/assets/restaurant/types/destination/3.avif b/src/assets/restaurant/types/destination/3.avif
new file mode 100644
index 0000000..26ec722
Binary files /dev/null and b/src/assets/restaurant/types/destination/3.avif differ
diff --git a/src/assets/restaurant/types/destination/4.avif b/src/assets/restaurant/types/destination/4.avif
new file mode 100644
index 0000000..89b7d37
Binary files /dev/null and b/src/assets/restaurant/types/destination/4.avif differ
diff --git a/src/assets/restaurant/types/destination/center.avif b/src/assets/restaurant/types/destination/center.avif
new file mode 100644
index 0000000..9d96b01
Binary files /dev/null and b/src/assets/restaurant/types/destination/center.avif differ
diff --git a/src/assets/restaurant/types/destination/left.avif b/src/assets/restaurant/types/destination/left.avif
new file mode 100644
index 0000000..26ec722
Binary files /dev/null and b/src/assets/restaurant/types/destination/left.avif differ
diff --git a/src/assets/restaurant/types/destination/multi-location.webp b/src/assets/restaurant/types/destination/multi-location.webp
new file mode 100644
index 0000000..a163817
Binary files /dev/null and b/src/assets/restaurant/types/destination/multi-location.webp differ
diff --git a/src/assets/restaurant/types/destination/order-management.webp b/src/assets/restaurant/types/destination/order-management.webp
new file mode 100644
index 0000000..b687398
Binary files /dev/null and b/src/assets/restaurant/types/destination/order-management.webp differ
diff --git a/src/assets/restaurant/types/destination/pos.webp b/src/assets/restaurant/types/destination/pos.webp
new file mode 100644
index 0000000..8704c1c
Binary files /dev/null and b/src/assets/restaurant/types/destination/pos.webp differ
diff --git a/src/assets/restaurant/types/destination/qr-menu.webp b/src/assets/restaurant/types/destination/qr-menu.webp
new file mode 100644
index 0000000..f88fc9b
Binary files /dev/null and b/src/assets/restaurant/types/destination/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/destination/right.avif b/src/assets/restaurant/types/destination/right.avif
new file mode 100644
index 0000000..27e09a3
Binary files /dev/null and b/src/assets/restaurant/types/destination/right.avif differ
diff --git a/src/assets/restaurant/types/destination/table-reservation.webp b/src/assets/restaurant/types/destination/table-reservation.webp
new file mode 100644
index 0000000..3d2a786
Binary files /dev/null and b/src/assets/restaurant/types/destination/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/digital/1.webp b/src/assets/restaurant/types/digital/1.webp
new file mode 100644
index 0000000..e4ef3aa
Binary files /dev/null and b/src/assets/restaurant/types/digital/1.webp differ
diff --git a/src/assets/restaurant/types/digital/2.webp b/src/assets/restaurant/types/digital/2.webp
new file mode 100644
index 0000000..a4f3c86
Binary files /dev/null and b/src/assets/restaurant/types/digital/2.webp differ
diff --git a/src/assets/restaurant/types/digital/3.webp b/src/assets/restaurant/types/digital/3.webp
new file mode 100644
index 0000000..65db5e7
Binary files /dev/null and b/src/assets/restaurant/types/digital/3.webp differ
diff --git a/src/assets/restaurant/types/digital/4.webp b/src/assets/restaurant/types/digital/4.webp
new file mode 100644
index 0000000..2282ce0
Binary files /dev/null and b/src/assets/restaurant/types/digital/4.webp differ
diff --git a/src/assets/restaurant/types/digital/centre.webp b/src/assets/restaurant/types/digital/centre.webp
new file mode 100644
index 0000000..49cd650
Binary files /dev/null and b/src/assets/restaurant/types/digital/centre.webp differ
diff --git a/src/assets/restaurant/types/digital/left.webp b/src/assets/restaurant/types/digital/left.webp
new file mode 100644
index 0000000..669b0fe
Binary files /dev/null and b/src/assets/restaurant/types/digital/left.webp differ
diff --git a/src/assets/restaurant/types/digital/multi-location.webp b/src/assets/restaurant/types/digital/multi-location.webp
new file mode 100644
index 0000000..cd281bd
Binary files /dev/null and b/src/assets/restaurant/types/digital/multi-location.webp differ
diff --git a/src/assets/restaurant/types/digital/order-management.webp b/src/assets/restaurant/types/digital/order-management.webp
new file mode 100644
index 0000000..a9fd4cc
Binary files /dev/null and b/src/assets/restaurant/types/digital/order-management.webp differ
diff --git a/src/assets/restaurant/types/digital/pos.webp b/src/assets/restaurant/types/digital/pos.webp
new file mode 100644
index 0000000..987ee5a
Binary files /dev/null and b/src/assets/restaurant/types/digital/pos.webp differ
diff --git a/src/assets/restaurant/types/digital/qr-menu.webp b/src/assets/restaurant/types/digital/qr-menu.webp
new file mode 100644
index 0000000..0bf2524
Binary files /dev/null and b/src/assets/restaurant/types/digital/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/digital/right.webp b/src/assets/restaurant/types/digital/right.webp
new file mode 100644
index 0000000..e09895d
Binary files /dev/null and b/src/assets/restaurant/types/digital/right.webp differ
diff --git a/src/assets/restaurant/types/digital/table-reservation.webp b/src/assets/restaurant/types/digital/table-reservation.webp
new file mode 100644
index 0000000..5c8bf74
Binary files /dev/null and b/src/assets/restaurant/types/digital/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/diner/1.webp b/src/assets/restaurant/types/diner/1.webp
new file mode 100644
index 0000000..e13ae83
Binary files /dev/null and b/src/assets/restaurant/types/diner/1.webp differ
diff --git a/src/assets/restaurant/types/diner/2.webp b/src/assets/restaurant/types/diner/2.webp
new file mode 100644
index 0000000..3ffdb23
Binary files /dev/null and b/src/assets/restaurant/types/diner/2.webp differ
diff --git a/src/assets/restaurant/types/diner/3.webp b/src/assets/restaurant/types/diner/3.webp
new file mode 100644
index 0000000..fd22c28
Binary files /dev/null and b/src/assets/restaurant/types/diner/3.webp differ
diff --git a/src/assets/restaurant/types/diner/4.webp b/src/assets/restaurant/types/diner/4.webp
new file mode 100644
index 0000000..fb4e873
Binary files /dev/null and b/src/assets/restaurant/types/diner/4.webp differ
diff --git a/src/assets/restaurant/types/diner/centre.webp b/src/assets/restaurant/types/diner/centre.webp
new file mode 100644
index 0000000..a020219
Binary files /dev/null and b/src/assets/restaurant/types/diner/centre.webp differ
diff --git a/src/assets/restaurant/types/diner/left.webp b/src/assets/restaurant/types/diner/left.webp
new file mode 100644
index 0000000..7d14791
Binary files /dev/null and b/src/assets/restaurant/types/diner/left.webp differ
diff --git a/src/assets/restaurant/types/diner/multi-location.webp b/src/assets/restaurant/types/diner/multi-location.webp
new file mode 100644
index 0000000..3bac349
Binary files /dev/null and b/src/assets/restaurant/types/diner/multi-location.webp differ
diff --git a/src/assets/restaurant/types/diner/order-management.webp b/src/assets/restaurant/types/diner/order-management.webp
new file mode 100644
index 0000000..047a8c4
Binary files /dev/null and b/src/assets/restaurant/types/diner/order-management.webp differ
diff --git a/src/assets/restaurant/types/diner/pos.webp b/src/assets/restaurant/types/diner/pos.webp
new file mode 100644
index 0000000..3fc2588
Binary files /dev/null and b/src/assets/restaurant/types/diner/pos.webp differ
diff --git a/src/assets/restaurant/types/diner/qr-menu.webp b/src/assets/restaurant/types/diner/qr-menu.webp
new file mode 100644
index 0000000..a1a618a
Binary files /dev/null and b/src/assets/restaurant/types/diner/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/diner/right.webp b/src/assets/restaurant/types/diner/right.webp
new file mode 100644
index 0000000..c7e4e40
Binary files /dev/null and b/src/assets/restaurant/types/diner/right.webp differ
diff --git a/src/assets/restaurant/types/diner/table-reservation.webp b/src/assets/restaurant/types/diner/table-reservation.webp
new file mode 100644
index 0000000..fd6ef80
Binary files /dev/null and b/src/assets/restaurant/types/diner/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/diner/testimonial.webp b/src/assets/restaurant/types/diner/testimonial.webp
new file mode 100644
index 0000000..cedf1b6
Binary files /dev/null and b/src/assets/restaurant/types/diner/testimonial.webp differ
diff --git a/src/assets/restaurant/types/family-style/1.webp b/src/assets/restaurant/types/family-style/1.webp
new file mode 100644
index 0000000..e15596f
Binary files /dev/null and b/src/assets/restaurant/types/family-style/1.webp differ
diff --git a/src/assets/restaurant/types/family-style/2.webp b/src/assets/restaurant/types/family-style/2.webp
new file mode 100644
index 0000000..0a92db6
Binary files /dev/null and b/src/assets/restaurant/types/family-style/2.webp differ
diff --git a/src/assets/restaurant/types/family-style/3.webp b/src/assets/restaurant/types/family-style/3.webp
new file mode 100644
index 0000000..f4b2ec8
Binary files /dev/null and b/src/assets/restaurant/types/family-style/3.webp differ
diff --git a/src/assets/restaurant/types/family-style/4.webp b/src/assets/restaurant/types/family-style/4.webp
new file mode 100644
index 0000000..dfc4bb3
Binary files /dev/null and b/src/assets/restaurant/types/family-style/4.webp differ
diff --git a/src/assets/restaurant/types/family-style/centre.webp b/src/assets/restaurant/types/family-style/centre.webp
new file mode 100644
index 0000000..f6b18b9
Binary files /dev/null and b/src/assets/restaurant/types/family-style/centre.webp differ
diff --git a/src/assets/restaurant/types/family-style/left.webp b/src/assets/restaurant/types/family-style/left.webp
new file mode 100644
index 0000000..7d3fe58
Binary files /dev/null and b/src/assets/restaurant/types/family-style/left.webp differ
diff --git a/src/assets/restaurant/types/family-style/multi-location.webp b/src/assets/restaurant/types/family-style/multi-location.webp
new file mode 100644
index 0000000..9d858c3
Binary files /dev/null and b/src/assets/restaurant/types/family-style/multi-location.webp differ
diff --git a/src/assets/restaurant/types/family-style/order-management.webp b/src/assets/restaurant/types/family-style/order-management.webp
new file mode 100644
index 0000000..22ac010
Binary files /dev/null and b/src/assets/restaurant/types/family-style/order-management.webp differ
diff --git a/src/assets/restaurant/types/family-style/pos.webp b/src/assets/restaurant/types/family-style/pos.webp
new file mode 100644
index 0000000..5d51c47
Binary files /dev/null and b/src/assets/restaurant/types/family-style/pos.webp differ
diff --git a/src/assets/restaurant/types/family-style/qr-menu.webp b/src/assets/restaurant/types/family-style/qr-menu.webp
new file mode 100644
index 0000000..83b5466
Binary files /dev/null and b/src/assets/restaurant/types/family-style/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/family-style/right.webp b/src/assets/restaurant/types/family-style/right.webp
new file mode 100644
index 0000000..770a597
Binary files /dev/null and b/src/assets/restaurant/types/family-style/right.webp differ
diff --git a/src/assets/restaurant/types/family-style/table-reservation.webp b/src/assets/restaurant/types/family-style/table-reservation.webp
new file mode 100644
index 0000000..c269301
Binary files /dev/null and b/src/assets/restaurant/types/family-style/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/family-style/testimonial.webp b/src/assets/restaurant/types/family-style/testimonial.webp
new file mode 100644
index 0000000..1ac2232
Binary files /dev/null and b/src/assets/restaurant/types/family-style/testimonial.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/1.webp b/src/assets/restaurant/types/fast-casual/1.webp
new file mode 100644
index 0000000..3b51ad0
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/1.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/2.webp b/src/assets/restaurant/types/fast-casual/2.webp
new file mode 100644
index 0000000..2ffc1ec
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/2.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/3.webp b/src/assets/restaurant/types/fast-casual/3.webp
new file mode 100644
index 0000000..5759efc
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/3.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/4.webp b/src/assets/restaurant/types/fast-casual/4.webp
new file mode 100644
index 0000000..2e68e60
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/4.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/center.webp b/src/assets/restaurant/types/fast-casual/center.webp
new file mode 100644
index 0000000..23be37d
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/center.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/left.webp b/src/assets/restaurant/types/fast-casual/left.webp
new file mode 100644
index 0000000..a19ba86
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/left.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/multi-location.webp b/src/assets/restaurant/types/fast-casual/multi-location.webp
new file mode 100644
index 0000000..dc45bdb
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/multi-location.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/order-management.webp b/src/assets/restaurant/types/fast-casual/order-management.webp
new file mode 100644
index 0000000..4774d16
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/order-management.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/pos.webp b/src/assets/restaurant/types/fast-casual/pos.webp
new file mode 100644
index 0000000..6086974
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/pos.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/qr-menu.webp b/src/assets/restaurant/types/fast-casual/qr-menu.webp
new file mode 100644
index 0000000..7ab5272
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/right.webp b/src/assets/restaurant/types/fast-casual/right.webp
new file mode 100644
index 0000000..050fd0e
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/right.webp differ
diff --git a/src/assets/restaurant/types/fast-casual/table-reservation.webp b/src/assets/restaurant/types/fast-casual/table-reservation.webp
new file mode 100644
index 0000000..bce8c56
Binary files /dev/null and b/src/assets/restaurant/types/fast-casual/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/1.webp b/src/assets/restaurant/types/fast-food-restaurant/1.webp
new file mode 100644
index 0000000..517b996
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/1.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/2.webp b/src/assets/restaurant/types/fast-food-restaurant/2.webp
new file mode 100644
index 0000000..c068cea
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/2.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/3.webp b/src/assets/restaurant/types/fast-food-restaurant/3.webp
new file mode 100644
index 0000000..77cc0da
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/3.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/4.webp b/src/assets/restaurant/types/fast-food-restaurant/4.webp
new file mode 100644
index 0000000..27ce1d9
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/4.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/centre.webp b/src/assets/restaurant/types/fast-food-restaurant/centre.webp
new file mode 100644
index 0000000..3a17079
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/centre.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/left.webp b/src/assets/restaurant/types/fast-food-restaurant/left.webp
new file mode 100644
index 0000000..dc328f8
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/left.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/multi-location.webp b/src/assets/restaurant/types/fast-food-restaurant/multi-location.webp
new file mode 100644
index 0000000..91cab1b
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/multi-location.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/order-management.webp b/src/assets/restaurant/types/fast-food-restaurant/order-management.webp
new file mode 100644
index 0000000..049b69c
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/order-management.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/pos.webp b/src/assets/restaurant/types/fast-food-restaurant/pos.webp
new file mode 100644
index 0000000..f79bfe1
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/pos.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/qr-menu.webp b/src/assets/restaurant/types/fast-food-restaurant/qr-menu.webp
new file mode 100644
index 0000000..cfcee17
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/right.webp b/src/assets/restaurant/types/fast-food-restaurant/right.webp
new file mode 100644
index 0000000..c51b5a4
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/right.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/table-reservation.webp b/src/assets/restaurant/types/fast-food-restaurant/table-reservation.webp
new file mode 100644
index 0000000..6bb5922
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/fast-food-restaurant/testimonial.webp b/src/assets/restaurant/types/fast-food-restaurant/testimonial.webp
new file mode 100644
index 0000000..f5f7615
Binary files /dev/null and b/src/assets/restaurant/types/fast-food-restaurant/testimonial.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/1.webp b/src/assets/restaurant/types/fine-dining/1.webp
new file mode 100644
index 0000000..7db1fd1
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/1.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/2.webp b/src/assets/restaurant/types/fine-dining/2.webp
new file mode 100644
index 0000000..3ffdb23
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/2.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/3.webp b/src/assets/restaurant/types/fine-dining/3.webp
new file mode 100644
index 0000000..3dd7c69
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/3.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/4.webp b/src/assets/restaurant/types/fine-dining/4.webp
new file mode 100644
index 0000000..1179e6e
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/4.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/digital-menu.webp b/src/assets/restaurant/types/fine-dining/digital-menu.webp
new file mode 100644
index 0000000..0cfe4bd
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/digital-menu.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/hero-1.webp b/src/assets/restaurant/types/fine-dining/hero-1.webp
new file mode 100644
index 0000000..455dfdd
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/hero-1.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/hero-2.webp b/src/assets/restaurant/types/fine-dining/hero-2.webp
new file mode 100644
index 0000000..5c4b406
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/hero-2.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/hero-3.webp b/src/assets/restaurant/types/fine-dining/hero-3.webp
new file mode 100644
index 0000000..514a2ed
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/hero-3.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/kitchen-comms.webp b/src/assets/restaurant/types/fine-dining/kitchen-comms.webp
new file mode 100644
index 0000000..dc242ce
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/kitchen-comms.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/multi-location.webp b/src/assets/restaurant/types/fine-dining/multi-location.webp
new file mode 100644
index 0000000..6c3352f
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/multi-location.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/order-management.webp b/src/assets/restaurant/types/fine-dining/order-management.webp
new file mode 100644
index 0000000..2f828c7
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/order-management.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/pos.webp b/src/assets/restaurant/types/fine-dining/pos.webp
new file mode 100644
index 0000000..be20c94
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/pos.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/table-reservation.webp b/src/assets/restaurant/types/fine-dining/table-reservation.webp
new file mode 100644
index 0000000..f536683
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/fine-dining/testimonial.webp b/src/assets/restaurant/types/fine-dining/testimonial.webp
new file mode 100644
index 0000000..858aa9d
Binary files /dev/null and b/src/assets/restaurant/types/fine-dining/testimonial.webp differ
diff --git a/src/assets/restaurant/types/food-truck/1.webp b/src/assets/restaurant/types/food-truck/1.webp
new file mode 100644
index 0000000..880e93b
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/1.webp differ
diff --git a/src/assets/restaurant/types/food-truck/2.webp b/src/assets/restaurant/types/food-truck/2.webp
new file mode 100644
index 0000000..87d2e58
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/2.webp differ
diff --git a/src/assets/restaurant/types/food-truck/3.webp b/src/assets/restaurant/types/food-truck/3.webp
new file mode 100644
index 0000000..095cc62
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/3.webp differ
diff --git a/src/assets/restaurant/types/food-truck/4.webp b/src/assets/restaurant/types/food-truck/4.webp
new file mode 100644
index 0000000..d83e61a
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/4.webp differ
diff --git a/src/assets/restaurant/types/food-truck/centre.webp b/src/assets/restaurant/types/food-truck/centre.webp
new file mode 100644
index 0000000..263a77b
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/centre.webp differ
diff --git a/src/assets/restaurant/types/food-truck/left.webp b/src/assets/restaurant/types/food-truck/left.webp
new file mode 100644
index 0000000..7e38284
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/left.webp differ
diff --git a/src/assets/restaurant/types/food-truck/multi-location.webp b/src/assets/restaurant/types/food-truck/multi-location.webp
new file mode 100644
index 0000000..649ab9e
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/multi-location.webp differ
diff --git a/src/assets/restaurant/types/food-truck/order-management.webp b/src/assets/restaurant/types/food-truck/order-management.webp
new file mode 100644
index 0000000..88a7547
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/order-management.webp differ
diff --git a/src/assets/restaurant/types/food-truck/pos.webp b/src/assets/restaurant/types/food-truck/pos.webp
new file mode 100644
index 0000000..1042038
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/pos.webp differ
diff --git a/src/assets/restaurant/types/food-truck/qr-menu.webp b/src/assets/restaurant/types/food-truck/qr-menu.webp
new file mode 100644
index 0000000..1f3ef18
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/food-truck/right.webp b/src/assets/restaurant/types/food-truck/right.webp
new file mode 100644
index 0000000..53ed096
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/right.webp differ
diff --git a/src/assets/restaurant/types/food-truck/table-reservation.webp b/src/assets/restaurant/types/food-truck/table-reservation.webp
new file mode 100644
index 0000000..f6e316a
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/food-truck/testimonial.webp b/src/assets/restaurant/types/food-truck/testimonial.webp
new file mode 100644
index 0000000..18910da
Binary files /dev/null and b/src/assets/restaurant/types/food-truck/testimonial.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/1.webp b/src/assets/restaurant/types/ghost-restaurant/1.webp
new file mode 100644
index 0000000..10fd7c3
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/1.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/2.webp b/src/assets/restaurant/types/ghost-restaurant/2.webp
new file mode 100644
index 0000000..fc301ca
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/2.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/3.webp b/src/assets/restaurant/types/ghost-restaurant/3.webp
new file mode 100644
index 0000000..5c14d30
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/3.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/4.webp b/src/assets/restaurant/types/ghost-restaurant/4.webp
new file mode 100644
index 0000000..ed0650c
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/4.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp b/src/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp
new file mode 100644
index 0000000..e063d92
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/centre.webp b/src/assets/restaurant/types/ghost-restaurant/centre.webp
new file mode 100644
index 0000000..b61f0da
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/centre.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/left.webp b/src/assets/restaurant/types/ghost-restaurant/left.webp
new file mode 100644
index 0000000..afccdb6
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/left.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/multi-location.webp b/src/assets/restaurant/types/ghost-restaurant/multi-location.webp
new file mode 100644
index 0000000..04d839e
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/multi-location.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/order-management.webp b/src/assets/restaurant/types/ghost-restaurant/order-management.webp
new file mode 100644
index 0000000..db71eec
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/order-management.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/pos.webp b/src/assets/restaurant/types/ghost-restaurant/pos.webp
new file mode 100644
index 0000000..3c180bb
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/pos.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/qr-menu.webp b/src/assets/restaurant/types/ghost-restaurant/qr-menu.webp
new file mode 100644
index 0000000..985bf30
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/ghost-restaurant/right.webp b/src/assets/restaurant/types/ghost-restaurant/right.webp
new file mode 100644
index 0000000..7972256
Binary files /dev/null and b/src/assets/restaurant/types/ghost-restaurant/right.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/1.webp b/src/assets/restaurant/types/mongolian-barbecue/1.webp
new file mode 100644
index 0000000..8e41735
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/1.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/2.webp b/src/assets/restaurant/types/mongolian-barbecue/2.webp
new file mode 100644
index 0000000..fe4d802
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/2.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/3.webp b/src/assets/restaurant/types/mongolian-barbecue/3.webp
new file mode 100644
index 0000000..befe2e6
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/3.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/4.webp b/src/assets/restaurant/types/mongolian-barbecue/4.webp
new file mode 100644
index 0000000..208bafd
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/4.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/center.avif b/src/assets/restaurant/types/mongolian-barbecue/center.avif
new file mode 100644
index 0000000..423cf2a
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/center.avif differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/left.avif b/src/assets/restaurant/types/mongolian-barbecue/left.avif
new file mode 100644
index 0000000..dc5ccec
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/left.avif differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/multi-location.webp b/src/assets/restaurant/types/mongolian-barbecue/multi-location.webp
new file mode 100644
index 0000000..8b421a3
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/multi-location.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/order-management.webp b/src/assets/restaurant/types/mongolian-barbecue/order-management.webp
new file mode 100644
index 0000000..34cf155
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/order-management.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/pos.webp b/src/assets/restaurant/types/mongolian-barbecue/pos.webp
new file mode 100644
index 0000000..1253d6d
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/pos.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/qr-menu.webp b/src/assets/restaurant/types/mongolian-barbecue/qr-menu.webp
new file mode 100644
index 0000000..60b8f9c
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/right.webp b/src/assets/restaurant/types/mongolian-barbecue/right.webp
new file mode 100644
index 0000000..f683fc9
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/right.webp differ
diff --git a/src/assets/restaurant/types/mongolian-barbecue/table-reservation.webp b/src/assets/restaurant/types/mongolian-barbecue/table-reservation.webp
new file mode 100644
index 0000000..1a836bc
Binary files /dev/null and b/src/assets/restaurant/types/mongolian-barbecue/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/pop-up/1.avif b/src/assets/restaurant/types/pop-up/1.avif
new file mode 100644
index 0000000..27e09a3
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/1.avif differ
diff --git a/src/assets/restaurant/types/pop-up/2.avif b/src/assets/restaurant/types/pop-up/2.avif
new file mode 100644
index 0000000..9d96b01
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/2.avif differ
diff --git a/src/assets/restaurant/types/pop-up/3.webp b/src/assets/restaurant/types/pop-up/3.webp
new file mode 100644
index 0000000..31baa37
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/3.webp differ
diff --git a/src/assets/restaurant/types/pop-up/4.avif b/src/assets/restaurant/types/pop-up/4.avif
new file mode 100644
index 0000000..3a33978
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/4.avif differ
diff --git a/src/assets/restaurant/types/pop-up/center.avif b/src/assets/restaurant/types/pop-up/center.avif
new file mode 100644
index 0000000..9d96b01
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/center.avif differ
diff --git a/src/assets/restaurant/types/pop-up/left.webp b/src/assets/restaurant/types/pop-up/left.webp
new file mode 100644
index 0000000..1eb8c09
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/left.webp differ
diff --git a/src/assets/restaurant/types/pop-up/multi-location.webp b/src/assets/restaurant/types/pop-up/multi-location.webp
new file mode 100644
index 0000000..1d7a682
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/multi-location.webp differ
diff --git a/src/assets/restaurant/types/pop-up/order-management.webp b/src/assets/restaurant/types/pop-up/order-management.webp
new file mode 100644
index 0000000..ce6f3ad
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/order-management.webp differ
diff --git a/src/assets/restaurant/types/pop-up/pos.webp b/src/assets/restaurant/types/pop-up/pos.webp
new file mode 100644
index 0000000..18f3f02
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/pos.webp differ
diff --git a/src/assets/restaurant/types/pop-up/qr-menu.webp b/src/assets/restaurant/types/pop-up/qr-menu.webp
new file mode 100644
index 0000000..ff8bdeb
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/pop-up/right.avif b/src/assets/restaurant/types/pop-up/right.avif
new file mode 100644
index 0000000..04c0ced
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/right.avif differ
diff --git a/src/assets/restaurant/types/pop-up/table-reservation.webp b/src/assets/restaurant/types/pop-up/table-reservation.webp
new file mode 100644
index 0000000..e2b56b2
Binary files /dev/null and b/src/assets/restaurant/types/pop-up/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/pub/1.webp b/src/assets/restaurant/types/pub/1.webp
new file mode 100644
index 0000000..b461320
Binary files /dev/null and b/src/assets/restaurant/types/pub/1.webp differ
diff --git a/src/assets/restaurant/types/pub/2.webp b/src/assets/restaurant/types/pub/2.webp
new file mode 100644
index 0000000..696b6d4
Binary files /dev/null and b/src/assets/restaurant/types/pub/2.webp differ
diff --git a/src/assets/restaurant/types/pub/3.webp b/src/assets/restaurant/types/pub/3.webp
new file mode 100644
index 0000000..153f3b8
Binary files /dev/null and b/src/assets/restaurant/types/pub/3.webp differ
diff --git a/src/assets/restaurant/types/pub/4.webp b/src/assets/restaurant/types/pub/4.webp
new file mode 100644
index 0000000..90435da
Binary files /dev/null and b/src/assets/restaurant/types/pub/4.webp differ
diff --git a/src/assets/restaurant/types/pub/centre.webp b/src/assets/restaurant/types/pub/centre.webp
new file mode 100644
index 0000000..caf65a0
Binary files /dev/null and b/src/assets/restaurant/types/pub/centre.webp differ
diff --git a/src/assets/restaurant/types/pub/left.webp b/src/assets/restaurant/types/pub/left.webp
new file mode 100644
index 0000000..30bab8d
Binary files /dev/null and b/src/assets/restaurant/types/pub/left.webp differ
diff --git a/src/assets/restaurant/types/pub/multi-location.webp b/src/assets/restaurant/types/pub/multi-location.webp
new file mode 100644
index 0000000..460cdfc
Binary files /dev/null and b/src/assets/restaurant/types/pub/multi-location.webp differ
diff --git a/src/assets/restaurant/types/pub/order-management.webp b/src/assets/restaurant/types/pub/order-management.webp
new file mode 100644
index 0000000..2ffc1ec
Binary files /dev/null and b/src/assets/restaurant/types/pub/order-management.webp differ
diff --git a/src/assets/restaurant/types/pub/pos.webp b/src/assets/restaurant/types/pub/pos.webp
new file mode 100644
index 0000000..4c8be48
Binary files /dev/null and b/src/assets/restaurant/types/pub/pos.webp differ
diff --git a/src/assets/restaurant/types/pub/qr-menu.webp b/src/assets/restaurant/types/pub/qr-menu.webp
new file mode 100644
index 0000000..6a145ce
Binary files /dev/null and b/src/assets/restaurant/types/pub/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/pub/right.webp b/src/assets/restaurant/types/pub/right.webp
new file mode 100644
index 0000000..c4a1e6a
Binary files /dev/null and b/src/assets/restaurant/types/pub/right.webp differ
diff --git a/src/assets/restaurant/types/pub/table-reservation.webp b/src/assets/restaurant/types/pub/table-reservation.webp
new file mode 100644
index 0000000..3780b1f
Binary files /dev/null and b/src/assets/restaurant/types/pub/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/pub/testimonial.webp b/src/assets/restaurant/types/pub/testimonial.webp
new file mode 100644
index 0000000..4904bf5
Binary files /dev/null and b/src/assets/restaurant/types/pub/testimonial.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/1.webp b/src/assets/restaurant/types/teppanyaki-grill/1.webp
new file mode 100644
index 0000000..d74e705
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/1.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/2.webp b/src/assets/restaurant/types/teppanyaki-grill/2.webp
new file mode 100644
index 0000000..fed686e
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/2.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/3.webp b/src/assets/restaurant/types/teppanyaki-grill/3.webp
new file mode 100644
index 0000000..f546560
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/3.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/4.webp b/src/assets/restaurant/types/teppanyaki-grill/4.webp
new file mode 100644
index 0000000..cf2a6cd
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/4.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/centre.webp b/src/assets/restaurant/types/teppanyaki-grill/centre.webp
new file mode 100644
index 0000000..3712bb3
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/centre.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/left.avif b/src/assets/restaurant/types/teppanyaki-grill/left.avif
new file mode 100644
index 0000000..04c0ced
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/left.avif differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/multi-location.webp b/src/assets/restaurant/types/teppanyaki-grill/multi-location.webp
new file mode 100644
index 0000000..1226831
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/multi-location.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/order-management.webp b/src/assets/restaurant/types/teppanyaki-grill/order-management.webp
new file mode 100644
index 0000000..8a35f8c
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/order-management.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/pos.webp b/src/assets/restaurant/types/teppanyaki-grill/pos.webp
new file mode 100644
index 0000000..b89bb12
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/pos.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/qr-menu.webp b/src/assets/restaurant/types/teppanyaki-grill/qr-menu.webp
new file mode 100644
index 0000000..b311514
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/right.webp b/src/assets/restaurant/types/teppanyaki-grill/right.webp
new file mode 100644
index 0000000..0a9d004
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/right.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/table-reservation.webp b/src/assets/restaurant/types/teppanyaki-grill/table-reservation.webp
new file mode 100644
index 0000000..6bb5922
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/table-reservation.webp differ
diff --git a/src/assets/restaurant/types/teppanyaki-grill/testimonial.webp b/src/assets/restaurant/types/teppanyaki-grill/testimonial.webp
new file mode 100644
index 0000000..a0a5423
Binary files /dev/null and b/src/assets/restaurant/types/teppanyaki-grill/testimonial.webp differ
diff --git a/src/assets/restaurant/types/theme/1.webp b/src/assets/restaurant/types/theme/1.webp
new file mode 100644
index 0000000..f6daaca
Binary files /dev/null and b/src/assets/restaurant/types/theme/1.webp differ
diff --git a/src/assets/restaurant/types/theme/2.webp b/src/assets/restaurant/types/theme/2.webp
new file mode 100644
index 0000000..0a6b6a7
Binary files /dev/null and b/src/assets/restaurant/types/theme/2.webp differ
diff --git a/src/assets/restaurant/types/theme/3.webp b/src/assets/restaurant/types/theme/3.webp
new file mode 100644
index 0000000..f836427
Binary files /dev/null and b/src/assets/restaurant/types/theme/3.webp differ
diff --git a/src/assets/restaurant/types/theme/4.webp b/src/assets/restaurant/types/theme/4.webp
new file mode 100644
index 0000000..b2df69c
Binary files /dev/null and b/src/assets/restaurant/types/theme/4.webp differ
diff --git a/src/assets/restaurant/types/theme/centre.webp b/src/assets/restaurant/types/theme/centre.webp
new file mode 100644
index 0000000..aaa7685
Binary files /dev/null and b/src/assets/restaurant/types/theme/centre.webp differ
diff --git a/src/assets/restaurant/types/theme/left.webp b/src/assets/restaurant/types/theme/left.webp
new file mode 100644
index 0000000..aefc114
Binary files /dev/null and b/src/assets/restaurant/types/theme/left.webp differ
diff --git a/src/assets/restaurant/types/theme/multi-location.webp b/src/assets/restaurant/types/theme/multi-location.webp
new file mode 100644
index 0000000..0d4fbfb
Binary files /dev/null and b/src/assets/restaurant/types/theme/multi-location.webp differ
diff --git a/src/assets/restaurant/types/theme/order-management.webp b/src/assets/restaurant/types/theme/order-management.webp
new file mode 100644
index 0000000..6fa9daa
Binary files /dev/null and b/src/assets/restaurant/types/theme/order-management.webp differ
diff --git a/src/assets/restaurant/types/theme/pos.webp b/src/assets/restaurant/types/theme/pos.webp
new file mode 100644
index 0000000..478568c
Binary files /dev/null and b/src/assets/restaurant/types/theme/pos.webp differ
diff --git a/src/assets/restaurant/types/theme/qr-menu.webp b/src/assets/restaurant/types/theme/qr-menu.webp
new file mode 100644
index 0000000..daa0797
Binary files /dev/null and b/src/assets/restaurant/types/theme/qr-menu.webp differ
diff --git a/src/assets/restaurant/types/theme/right.webp b/src/assets/restaurant/types/theme/right.webp
new file mode 100644
index 0000000..ce844de
Binary files /dev/null and b/src/assets/restaurant/types/theme/right.webp differ
diff --git a/src/assets/restaurant/types/theme/table-reservation.webp b/src/assets/restaurant/types/theme/table-reservation.webp
new file mode 100644
index 0000000..a265bb6
Binary files /dev/null and b/src/assets/restaurant/types/theme/table-reservation.webp differ
diff --git a/src/assets/testimonial/testimonial.webp b/src/assets/testimonial/testimonial.webp
new file mode 100644
index 0000000..c5aae46
Binary files /dev/null and b/src/assets/testimonial/testimonial.webp differ
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
index dbd322d..8e15e73 100644
--- a/src/components/Testimonials.tsx
+++ b/src/components/Testimonials.tsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { ArrowLeft, ArrowRight, Star, Quote } from 'lucide-react';
-import testimonialImage from '@/assets/homepage/testimonial.webp';
+import testimonialImage from '@/assets/testimonial/testimonial.webp';
 
 const testimonials = [
   {