updated next config and feature pages

src/app/features/business-dashboard/page.tsx

@@ -15,10 +15,15 @@ import {
   FileText
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import DashboardOne from '@/assets/features/dashboard/dashboard-1.webp';
+import DashboardTwo from '@/assets/features/dashboard/dashboard-2.webp';
+
 const BusinessDashboardPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -74,31 +79,26 @@ const BusinessDashboardPage = () => {
 
           {/* SECTION 2: ANALYTICS & REPORTING */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: Dashboard Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.9 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <BarChart3 className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={DashboardOne} 
-                  <LineChart className="w-7 h-7" />
+                  alt="Dine360 Business Dashboard Analysis" 
-                </div>
+                  fill
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-                  <Target className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
+            {/* Right: Text Content */}
+
             {/* Right: Text Content */}
             <div className="space-y-6 order-1 lg:order-2">
               <span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">
@@ -150,7 +150,7 @@ const BusinessDashboardPage = () => {
 
         {/* SECTION 3: REAL-TIME PERFORMANCE (Dark) */}
         <section className="py-24 bg-zinc-900 text-white relative overflow-hidden">
-          <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#ef4444_1px,transparent_1px)] bg-[size:32px_32px]" />
+          <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#ef4444_1px,transparent_1px)] bg-size-[32px_32px]" />
           <div className="max-w-7xl mx-auto px-6 relative z-10">
             <div className="text-center mb-16">
               <motion.span 
@@ -313,40 +313,19 @@ const BusinessDashboardPage = () => {
             </div>
 
             {/* Abstract Graphic for Integrations */}
-            <div className="relative h-[400px] bg-zinc-50 rounded-[40px] border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl">
+            <motion.div 
-                <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+               initial={{ opacity: 0, scale: 0.95 }}
-                
+               whileInView={{ opacity: 1, scale: 1 }}
-                {/* Central Hub */}
+               viewport={{ once: true }}
-                <div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-2xl flex items-center justify-center border-4 border-red-50 group hover:scale-110 transition-transform duration-500">
+               className="relative h-[400px] lg:h-[500px] rounded-[40px] overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border-8 border-white bg-white"
-                   <div className="text-2xl font-black text-red-600 tracking-tighter uppercase ">Dashboard</div>
+            >
-                </div>
+                <Image 
-
+                  src={DashboardTwo} 
-                {/* Connecting Lines */}
+                  alt="Dine360 Integration Dashboard" 
-                <div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
+                  fill
-                <div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-
+                />
-                {/* Satellite Nodes */}
+            </motion.div>
-                 <div className="absolute top-10 left-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[-5px] transition-transform">
-                    <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
-                        <LineChart className="w-5 h-5" />
-                    </div>
-                 </div>
-                 <div className="absolute bottom-10 right-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[5px] transition-transform">
-                    <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
-                        <Zap className="w-5 h-5" />
-                    </div>
-                 </div>
-                 <div className="absolute top-10 right-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[-5px] transition-transform">
-                    <div className="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center text-orange-600">
-                        <Search className="w-5 h-5" />
-                    </div>
-                 </div>
-                 <div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[5px] transition-transform">
-                    <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600">
-                        <PieChart className="w-5 h-5" />
-                    </div>
-                 </div>
-            </div>
         </section>
 
         {/* QUICK NAV */}
@@ -377,3 +356,6 @@ const BusinessDashboardPage = () => {
 };
 
 export default BusinessDashboardPage;
+
+
+

src/app/features/inventory-management/page.tsx

@@ -18,10 +18,14 @@ import {
   ClipboardList
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import InventoryImage from '@/assets/features/inventory-management/inventory-management.webp';
+
 const InventoryManagementPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -76,31 +80,27 @@ const InventoryManagementPage = () => {
 
           {/* Lower Split Section matching the image */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: Inventory Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <Layers className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={InventoryImage} 
-                  <Layers className="w-7 h-7" />
+                  alt="Dine360 Inventory Management System" 
-                </div>
+                  className="w-full h-auto object-cover"
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                />
-                  <Menu className="w-7 h-7" />
+              </motion.div>
-                </div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
+            {/* Right: Text Content */}
+          
+         
+
             {/* Right: Text Content */}
             <div className="space-y-6 order-1 lg:order-2">
               <span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">

src/app/features/invoicing/page.tsx

@@ -27,10 +27,14 @@ import {
   History
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import InvoiceImage from '@/assets/features/invoice/invoice.webp';
+
 const InvoicingPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -88,26 +92,19 @@ const InvoicingPage = () => {
             {/* Left: Illustration Graphic */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <FileText className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={InvoiceImage} 
-                  <Receipt className="w-7 h-7" />
+                  alt="Invoice Management" 
-                </div>
+                  fill
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-                  <CreditCard className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}

src/app/features/kitchen-management/page.tsx

@@ -15,10 +15,15 @@ import {
   ChefHat
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import KDSOne from '@/assets/features/kds-20260406T072434Z-1-001/kds/kds-1.webp';
+import KDSTwo from '@/assets/features/kds-20260406T072434Z-1-001/kds/kds-2.webp';
+
 const KitchenManagementPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -74,31 +79,26 @@ const KitchenManagementPage = () => {
 
           {/* SECTION 2: KITCHEN DISPLAY */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: KDS Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, x: -20 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, x: 0 }}
-                  <Monitor className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={KDSOne} 
-                  <ChefHat className="w-7 h-7" />
+                  alt="Dine360 Kitchen Display System" 
-                </div>
+                  fill
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-                  <Menu className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
+            {/* Right: Text Content */}
+
             {/* Right: Text Content */}
             <div className="space-y-6 order-1 lg:order-2">
               <span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">
@@ -291,34 +291,23 @@ const KitchenManagementPage = () => {
               </div>
             </div>
 
-            {/* Abstract Graphic for Integrations */}
+            {/* KDS Integration Image */}
-            <div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
+            <motion.div 
-                <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+               initial={{ opacity: 0, scale: 0.95 }}
-                
+               whileInView={{ opacity: 1, scale: 1 }}
-                {/* Central Hub */}
+               viewport={{ once: true }}
-                <div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
+               className="relative h-[400px] lg:h-[500px] rounded-3xl overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border-8 border-white bg-white"
-                   <div className="text-2xl font-black text-red-600">KDS</div>
+            >
-                </div>
+                <Image 
-
+                  src={KDSTwo} 
-                {/* Connecting Lines */}
+                  alt="Dine360 KDS Integration" 
-                <div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
+                  fill
-                <div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-
+                />
-                {/* Satellite Nodes */}
+            </motion.div>
-                 <div className="absolute top-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <div className="w-8 h-8 bg-blue-100 rounded-full"></div>
-                 </div>
-                 <div className="absolute bottom-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <div className="w-8 h-8 bg-green-100 rounded-full"></div>
-                 </div>
-                 <div className="absolute top-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <div className="w-8 h-8 bg-orange-100 rounded-full"></div>
-                 </div>
-                 <div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <div className="w-8 h-8 bg-purple-100 rounded-full"></div>
-                 </div>
-            </div>
         </section>
+            
+     
 
         {/* QUICK NAV */}
         <FeatureQuickNav />

src/app/features/loyalty-management/page.tsx

@@ -30,10 +30,15 @@ import {
   Star,  RefreshCw,  UserPlus
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import CRMOne from '@/assets/features/crm/crm-1.webp';
+import CRMTwo from '@/assets/features/crm/crm-2.webp';
+
 const LoyaltyManagementPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -88,29 +93,21 @@ const LoyaltyManagementPage = () => {
 
           {/* Lower Split Section */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: CRM Image One */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <Users className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white/50 bg-white"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={CRMOne} 
-                  <Heart className="w-7 h-7" />
+                  alt="Dine360 Customer Relationship Management" 
-                </div>
+                  className="w-full h-auto object-contain hover:scale-105 transition-transform duration-700"
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                />
-                  <UserPlus className="w-7 h-7" />
+              </motion.div>
-                </div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Star className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}
@@ -165,14 +162,14 @@ const LoyaltyManagementPage = () => {
         {/* SECTION 3: CUSTOMER INSIGHTS (Professional Design) */}
         <section className="bg-zinc-950 text-white py-32 px-6 relative overflow-hidden">
           {/* Decorative background elements */}
-          <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/5 to-transparent"></div>
+          <div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/5 to-transparent"></div>
           <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-red-600/10 rounded-full blur-[120px]"></div>
 
           <div className="max-w-7xl mx-auto px-6 relative z-10">
             <div className="flex flex-col lg:flex-row lg:items-end justify-between mb-20 gap-8">
               <div className="max-w-2xl text-left">
                 <div className="inline-flex items-center gap-2 mb-6 text-red-500">
-                  <span className="w-12 h-[2px] bg-red-600"></span>
+                  <span className="w-12 h-0.5 bg-red-600"></span>
                   <span className="font-bold uppercase tracking-[0.2em] text-sm">Customer Insights</span>
                 </div>
                 <h2 className="text-4xl md:text-5xl font-bold mb-6 uppercase tracking-tight leading-none">
@@ -320,13 +317,19 @@ const LoyaltyManagementPage = () => {
             </div>
 
             {/* Abstract Graphic area - keeping structure as-is */}
-            <div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
+            <motion.div 
-                <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+                initial={{ opacity: 0, scale: 0.95 }}
-                
+                whileInView={{ opacity: 1, scale: 1 }}
-                <div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
+                viewport={{ once: true }}
-                  <Users className="w-16 h-16 text-red-600" />
+                className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center order-1 lg:order-2"
-                </div>
+            >
-            </div>
+                <Image 
+                  src={CRMTwo} 
+                  alt="Unified CRM" 
+                  fill 
+                  className="object-contain hover:scale-105 transition-transform duration-700"
+                />
+            </motion.div>
         </section>
 
         {/* QUICK NAV */}
@@ -356,4 +359,6 @@ const LoyaltyManagementPage = () => {
   );
 };
 
-export default LoyaltyManagementPage;
+export default LoyaltyManagementPage;
+
+

src/app/features/multi-menu-management/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client';
 
 import { 
   ArrowRight, 
@@ -17,10 +17,15 @@ import {
   Globe
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import MultiBranchOne from '@/assets/features/multi-branch/multi-branch-1.webp';
+import MultiBranchTwo from '@/assets/features/multi-branch/multi-branch-2.webp';
+
 const MultiBranchManagementPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -76,31 +81,27 @@ const MultiBranchManagementPage = () => {
 
           {/* SECTION 2: MULTI-LOCATION MANAGEMENT */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: Multi-Branch Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <Network className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border border-zinc-200"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={MultiBranchOne} 
-                  <Globe className="w-7 h-7" />
+                  alt="Dine360 Multi-Branch Dashboard" 
-                </div>
+                  className="w-full h-auto object-cover"
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                />
-                  <Users className="w-7 h-7" />
+              </motion.div>
-                </div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <LayoutDashboard className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
+            {/* Right: Text Content */}
+              
+            
+
             {/* Right: Text Content */}
             <div className="space-y-6 order-1 lg:order-2">
               <span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">
@@ -293,32 +294,16 @@ const MultiBranchManagementPage = () => {
               </div>
             </div>
 
-            {/* Abstract Graphic for Integrations */}
+            {/* Multi-Branch Integration Image */}
-            <div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
+            <div className="relative h-[400px] rounded-3xl overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border border-zinc-200">
-                <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+                <Image 
-                
+                  src={MultiBranchTwo} 
-                {/* Central Hub */}
+                  alt="Dine360 Multi-Branch Integration" 
-                <div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
+                  layout="fill"
-                   <div className="text-2xl font-black text-red-600 uppercase">HUB</div>
+                  objectFit="cover"
-                </div>
+                  className="hover:scale-105 transition-transform duration-700"
-
+                />
-                {/* Connecting Lines */}
+                <div className="absolute inset-0 bg-gradient-to-tr from-zinc-950/40 to-transparent" />
-                <div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
-                <div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
-
-                {/* Satellite Nodes */}
-                 <div className="absolute top-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <Globe className="w-8 h-8 text-blue-500" />
-                 </div>
-                 <div className="absolute bottom-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <Users className="w-8 h-8 text-green-500" />
-                 </div>
-                 <div className="absolute top-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <ClipboardList className="w-8 h-8 text-orange-500" />
-                 </div>
-                 <div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
-                    <Layers className="w-8 h-8 text-purple-500" />
-                 </div>
             </div>
         </section>
 

src/app/features/order-management/page.tsx

@@ -28,10 +28,15 @@ import {
   Utensils
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import SalesOne from '@/assets/features/sales/sales-1.webp';
+import SalesTwo from '@/assets/features/sales/sales-2.webp';
+
 const OrderManagementPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -89,26 +94,19 @@ const OrderManagementPage = () => {
             {/* Left: Illustration Graphic */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <BarChart3 className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={SalesOne} 
-                  <TrendingUp className="w-7 h-7" />
+                  alt="Sales Performance Dashboard" 
-                </div>
+                  fill
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-                  <Layers className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}
@@ -268,13 +266,19 @@ const OrderManagementPage = () => {
             </div>
 
             {/* Abstract Graphic area - keeping structure as-is */}
-            <div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
+            <motion.div 
-                <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+               initial={{ opacity: 0, scale: 0.95 }}
-                
+               whileInView={{ opacity: 1, scale: 1 }}
-                <div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
+               viewport={{ once: true }}
-                  <BarChart3 className="w-16 h-16 text-red-600" />
+               className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center order-1 lg:order-2"
-                </div>
+            >
-            </div>
+                <Image 
+                  src={SalesTwo} 
+                  alt="Unified Sales Hub" 
+                  fill 
+                  className="object-contain hover:scale-105 transition-transform duration-700"
+                />
+            </motion.div>
         </section>
 
         {/* QUICK NAV */}

src/app/features/pos/page.tsx

@@ -18,10 +18,14 @@ import {
   Target
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import POSImage from '@/assets/features/pos/pos.webp';
+
 const POSPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -79,54 +83,22 @@ const POSPage = () => {
         {/* SECTION 2: HARDWARE & MOBILE (Split Layout) */}
         <section className="py-32 px-6">
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
-            {/* Left: Interactive Graphic */}
+            {/* Left: POS Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -inset-10 bg-gradient-to-tr from-red-600/20 to-transparent blur-3xl opacity-50 -z-10 rounded-full"></div>
-              <div className="relative bg-zinc-950 rounded-[40px] p-12 border border-zinc-800 shadow-3xl overflow-hidden aspect-square flex flex-col justify-center">
+              <motion.div 
-                <div className="absolute top-0 right-0 w-64 h-64 bg-red-600/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl"></div>
+                initial={{ opacity: 0, x: -30 }}
-                
+                whileInView={{ opacity: 1, x: 0 }}
-                {/* POS Screen Simulation */}
+                viewport={{ once: true }}
-                <div className="relative z-10 space-y-6">
+                transition={{ duration: 0.8 }}
-                   <div className="flex items-center justify-between border-b border-zinc-800 pb-4">
+                className="relative rounded-[40px] overflow-hidden shadow-3xl border border-zinc-200"
-                      <div className="flex items-center gap-3">
+              >
-                         <div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center text-white font-black text-xs ">D360</div>
+                <Image 
-                         <div>
+                  src={POSImage} 
-                            <div className="text-white font-bold text-sm tracking-tight uppercase">Checkout #4</div>
+                  alt="Dine360 POS System Terminal" 
-                            <div className="text-zinc-500 text-[10px] font-bold">12:45 PM | OPERATOR: SARAH</div>
+                  className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
-                         </div>
+                />
-                      </div>
+              </motion.div>
-                      <Wifi className="w-4 h-4 text-green-500" />
-                   </div>
-                   
-                   <div className="space-y-3">
-                      {[
-                        { item: 'Margherita Pizza (Large)', price: '$18.00' },
-                        { item: 'Garlic Bread Sticks', price: '$6.50' },
-                        { item: 'Classic Cola', price: '$3.00' }
-                      ].map((line, i) => (
-                        <div key={i} className="flex justify-between text-sm py-1 border-b border-zinc-900">
-                          <span className="text-zinc-300">{line.item}</span>
-                          <span className="text-white font-bold font-mono">{line.price}</span>
-                        </div>
-                      ))}
-                   </div>
-                   
-                   <div className="pt-4 space-y-2">
-                       <div className="flex justify-between text-xs text-zinc-500 font-bold uppercase">
-                          <span>Subtotal</span>
-                          <span>$27.50</span>
-                       </div>
-                       <div className="flex justify-between text-2xl text-white font-black tracking-tighter uppercase pt-2 border-t border-zinc-800">
-                          <span>Total</span>
-                          <span className="text-red-500">$29.84</span>
-                       </div>
-                   </div>
-
-                   <button className="w-full bg-red-600 text-white font-black py-4 rounded-xl shadow-lg shadow-red-600/20 uppercase tracking-widest text-sm hover:bg-red-500 transition-colors">
-                      Process Payment (F10)
-                   </button>
-                </div>
-              </div>
             </div>
 
             {/* Right: Content */}

src/app/features/promotion-management/page.tsx

@@ -29,10 +29,14 @@ import {
   Truck
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import PromotionImage from '@/assets/features/purchase-promotions/purchase-promotions.webp';
+
 const PromotionManagementPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -87,29 +91,22 @@ const PromotionManagementPage = () => {
 
           {/* SECTION 2: SUPPLY MANAGEMENT */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: Promotion Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, x: -30 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, x: 0 }}
-                  <Tag className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                transition={{ duration: 0.8 }}
-                
+                className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200"
-                {/* Floating Icons */}
+              >
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                <Image 
-                  <Users className="w-7 h-7" />
+                  src={PromotionImage} 
-                </div>
+                  alt="Dine360 Purchase & Promotion Management" 
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="w-full h-auto object-cover"
-                  <ClipboardList className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}

src/app/features/promotions/page.tsx

@@ -20,9 +20,14 @@ import {
   ArrowUpRight
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 
+// Visual Assets
+import PromotionOne from '@/assets/features/promotions/promotions-1.webp';
+import PromotionTwo from '@/assets/features/promotions/promotions-2.webp';
+
 const PromotionsPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -78,29 +83,22 @@ const PromotionsPage = () => {
 
           {/* SECTION 2: PROMOTION ENGINE */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: Promotion Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, x: -30 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, x: 0 }}
-                  <Megaphone className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                transition={{ duration: 0.8 }}
-                
+                className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200"
-                {/* Floating Icons */}
+              >
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                <Image 
-                  <TicketPercent className="w-7 h-7" />
+                  src={PromotionOne} 
-                </div>
+                  alt="Dine360 Smart Promotions System" 
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
-                  <MousePointer2 className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Calendar className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Sparkles className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}
@@ -295,29 +293,16 @@ const PromotionsPage = () => {
               </div>
             </div>
 
-            {/* Abstract Graphic for Integrations */}
+            {/* Promotion Integration Image */}
-            <div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
+            <div className="relative h-[400px] rounded-[40px] overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border border-zinc-200">
-                <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+                <Image 
-                
+                  src={PromotionTwo} 
-                {/* Central Hub */}
+                  alt="Dine360 Promotion Integration" 
-                <div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
+                  layout="fill"
-                   <div className="text-2xl font-black text-red-600">OFFER</div>
+                  objectFit="cover"
-                </div>
+                  className="hover:scale-105 transition-transform duration-700"
-
+                />
-                {/* Orbiting Elements */}
+                <div className="absolute inset-0 bg-gradient-to-tr from-zinc-950/40 to-transparent" />
-                <div className="absolute w-64 h-64 border border-red-100 rounded-full animate-[spin_20s_linear_infinite]"></div>
-                <div className="absolute w-80 h-80 border border-zinc-200 rounded-full animate-[spin_30s_linear_infinite_reverse]"></div>
-                
-                {/* Connection Points */}
-                <div className="absolute top-1/4 left-1/4 w-12 h-12 bg-white rounded-xl shadow-lg border border-zinc-100 flex items-center justify-center text-red-600 z-20">
-                   <TicketPercent className="w-6 h-6" />
-                </div>
-                <div className="absolute bottom-1/4 right-1/4 w-12 h-12 bg-white rounded-xl shadow-lg border border-zinc-100 flex items-center justify-center text-orange-600 z-20">
-                   <Gift className="w-6 h-6" />
-                </div>
-                <div className="absolute top-1/2 -right-6 w-12 h-12 bg-white rounded-xl shadow-lg border border-zinc-100 flex items-center justify-center text-blue-600 z-20">
-                   <Users className="w-6 h-6" />
-                </div>
             </div>
         </section>
       </main>

src/app/features/qr-code-menu/page.tsx

@@ -26,10 +26,15 @@ import {
   Tags
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import OnlineOrderingOne from '@/assets/features/online-ordering/online-ordering-1.webp';
+import OnlineOrderingTwo from '@/assets/features/online-ordering/online-ordering-2.webp';
+
 const QRCodeMenuPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -87,26 +92,19 @@ const QRCodeMenuPage = () => {
             {/* Left: Illustration Graphic */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <QrCode className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={OnlineOrderingOne} 
-                  <Smartphone className="w-7 h-7" />
+                  alt="QR Code Menu" 
-                </div>
+                  fill
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-                  <Menu className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}
@@ -189,23 +187,19 @@ const QRCodeMenuPage = () => {
               </div>
             </div>
             
-             <div className="relative">
+             <motion.div 
-              <div className="absolute inset-0 bg-gradient-to-t from-pink-600/20 to-transparent rounded-3xl blur-2xl"></div>
+               initial={{ opacity: 0, scale: 0.95 }}
-              <div className="relative bg-zinc-950 border border-zinc-800 rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center">
+               whileInView={{ opacity: 1, scale: 1 }}
-                 <QrCode className="w-32 h-32 text-white mb-6" />
+               viewport={{ once: true }}
-                 <p className="text-zinc-400 mb-6 font-mono text-sm">SCAN TO VIEW MENU</p>
+               className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center p-4"
-                 <div className="w-full bg-zinc-900 rounded-xl p-4 border border-zinc-800">
+             >
-                    <div className="flex items-center space-x-3 mb-2">
+                <Image 
-                       <div className="w-10 h-10 bg-zinc-800 rounded-md"></div>
+                  src={OnlineOrderingTwo} 
-                       <div className="flex-1 h-2 bg-zinc-800 rounded"></div>
+                  alt="Dynamic QR Menu" 
-                    </div>
+                  fill 
-                    <div className="flex items-center space-x-3">
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-                       <div className="w-10 h-10 bg-zinc-800 rounded-md"></div>
+                />
-                       <div className="flex-1 h-2 bg-zinc-800 rounded"></div>
+            </motion.div>
-                    </div>
-                 </div>
-              </div>
-            </div>
           </div>
         </section>
 

src/app/features/restaurant-website/page.tsx

@@ -14,10 +14,15 @@ import {
   CreditCard
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import SalesOne from '@/assets/features/sales/sales-1.webp';
+import SalesTwo from '@/assets/features/sales/sales-2.webp';
+
 const RestaurantWebsitePage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -76,26 +81,19 @@ const RestaurantWebsitePage = () => {
             {/* Left: Illustration Graphic */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <Smartphone className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={SalesOne} 
-                  <Globe className="w-7 h-7" />
+                  alt="Online Ordering System" 
-                </div>
+                  fill
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="object-contain hover:scale-105 transition-transform duration-700"
-                  <CreditCard className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}
@@ -291,15 +289,19 @@ const RestaurantWebsitePage = () => {
             </div>
 
             {/* Abstract Graphic for Integrations */}
-            <div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
+            <motion.div 
-                <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+               initial={{ opacity: 0, scale: 0.95 }}
-                
+               whileInView={{ opacity: 1, scale: 1 }}
-                {/* Central Hub */}
+               viewport={{ once: true }}
-                <div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
+               className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center order-1 lg:order-2"
-                   <div className="text-2xl font-black text-red-600 text-center leading-none">ONLINE<br/>HUB</div>
+            >
-                </div>
+                <Image 
-
+                  src={SalesTwo} 
-                {/* Connecting Lines */}
+                  alt="Sales Hub" 
+                  fill 
+                  className="object-contain hover:scale-105 transition-transform duration-700"
+                />
+            </motion.div>
                 <div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
                 <div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
 
@@ -316,7 +318,7 @@ const RestaurantWebsitePage = () => {
                  <div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
                     <div className="w-8 h-8 bg-purple-100 rounded-full"></div>
                  </div>
-            </div>
+           
         </section>
 
         {/* QUICK NAV */}

src/app/features/table-reservation/page.tsx

@@ -27,10 +27,14 @@ import {
   Tags
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import TableReservationImage from '@/assets/features/table-reservation/table-reseravtion.webp';
+
 const TableReservationPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -85,29 +89,25 @@ const TableReservationPage = () => {
 
           {/* SECTION 2: TABLE RESERVATION SPLIT */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: Table Reservation Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, x: -30 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, x: 0 }}
-                  <Calendar className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                transition={{ duration: 0.8 }}
-                
+                className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200 bg-white"
-                {/* Floating Icons */}
+              >
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                <Image 
-                  <Clock className="w-7 h-7" />
+                  src={TableReservationImage} 
-                </div>
+                  alt="Dine360 Table Reservation System" 
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
-                  <LayoutGrid className="w-7 h-7" />
+                />
-                </div>
+              </motion.div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
+            </div>
-                  <CheckCircle className="w-7 h-7" />
+
-                </div>
+            {/* Right: Text Content */}
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Users className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}
@@ -156,7 +156,7 @@ const TableReservationPage = () => {
                 <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
               </button>
             </div>
-          </div>
+        
         </section>
 
         {/* SECTION 3: FLOOR MANAGEMENT (Stats) */}

src/app/features/team-communication/page.tsx

@@ -18,10 +18,14 @@ import {
   Flag
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import TeamCommImage from '@/assets/features/team-communiaction/team-communiaction.webp';
+
 const TeamCommunicationPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -80,44 +84,18 @@ const TeamCommunicationPage = () => {
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
             {/* Left Graphics */}
             <div className="relative">
-               <div className="relative w-full max-w-[400px] mx-auto">
+              <motion.div 
-                  {/* Phone Frame mock */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                  <div className="bg-zinc-950 rounded-[3rem] p-4 border-[8px] border-zinc-900 shadow-3xl aspect-[9/19] overflow-hidden flex flex-col">
+                whileInView={{ opacity: 1, scale: 1 }}
-                     <div className="w-20 h-6 bg-zinc-900 rounded-full mx-auto mb-6"></div>
+                viewport={{ once: true }}
-                     
+                className="relative rounded-[40px] overflow-hidden shadow-[0_50px_100px_-20px_rgba(0,0,0,0.25)] border border-zinc-200"
-                     <div className="flex-1 space-y-4 px-2">
+              >
-                        <div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
+                <Image 
-                           <div className="text-[10px] text-zinc-500 font-black mb-2 uppercase">Kitchen Station</div>
+                  src={TeamCommImage} 
-                           <div className="text-white text-xs font-bold leading-tight">Order #102 is taking longer than 15 mins. Need assistance?</div>
+                  alt="Dine360 Team Communication Mobile App" 
-                        </div>
+                  className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
-                        
+                />
-                        <div className="bg-red-600 rounded-2xl p-4 text-white">
+              </motion.div>
-                           <div className="text-[10px] text-red-200 font-black mb-2 uppercase">Manager Alert</div>
-                           <div className="text-xs font-bold leading-tight">Table 12 just ordered a $400 bottle. VIP Protocol active.</div>
-                        </div>
-
-                        <div className="bg-zinc-800 rounded-2xl p-4">
-                           <div className="text-[10px] text-zinc-400 font-bold mb-2 uppercase tracking-widest">Shift Poll</div>
-                           <div className="text-white text-xs mb-3">Who's available for Sunday brunch double?</div>
-                           <div className="flex gap-2">
-                              <div className="w-6 h-6 bg-zinc-700 rounded-full border border-white"></div>
-                              <div className="w-6 h-6 bg-zinc-600 rounded-full"></div>
-                              <div className="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-[10px]">+3</div>
-                           </div>
-                        </div>
-                     </div>
-
-                     <div className="h-1 bg-zinc-800 w-1/3 mx-auto mt-6 rounded-full mb-2"></div>
-                  </div>
-                  
-                  {/* Floating Elements */}
-                  <div className="absolute -top-10 -right-10 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center rotate-6 border border-zinc-100">
-                     <MessageCircle className="w-10 h-10 text-red-600" />
-                  </div>
-                  <div className="absolute bottom-20 -left-10 w-20 h-20 bg-zinc-950 rounded-full shadow-2xl flex items-center justify-center -rotate-12 border-4 border-white">
-                     <Zap className="w-8 h-8 text-yellow-400" />
-                  </div>
-               </div>
             </div>
 
             {/* Right Content */}

src/app/features/uber-integration/page.tsx

@@ -35,10 +35,14 @@ import {
   RefreshCw
 } from 'lucide-react';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import FeatureQuickNav from '@/components/FeatureQuickNav';
 
+// Visual Assets
+import UberImage from '@/assets/features/uber/uber.webp';
+
 const UberIntegrationPage = () => {
   return (
     <div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@@ -93,29 +97,21 @@ const UberIntegrationPage = () => {
 
           {/* SECTION 2: DELIVERY PLATFORM INTEGRATION */}
           <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
-            {/* Left: Illustration Graphic */}
+            {/* Left: Uber Image */}
             <div className="relative order-2 lg:order-1">
               <div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
-              <div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
+              <motion.div 
-                {/* Central Icon */}
+                initial={{ opacity: 0, scale: 0.95 }}
-                <div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
+                whileInView={{ opacity: 1, scale: 1 }}
-                  <Globe className="w-20 h-20" />
+                viewport={{ once: true }}
-                </div>
+                className="relative rounded-3xl overflow-hidden shadow-2xl border border-zinc-200"
-                
+              >
-                {/* Floating Icons */}
+                <Image 
-                <div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
+                  src={UberImage} 
-                  <Smartphone className="w-7 h-7" />
+                  alt="Dine360 Uber and Delivery Integration" 
-                </div>
+                  className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
-                <div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
+                />
-                  <Bike className="w-7 h-7" />
+              </motion.div>
-                </div>
-                <div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <Clock className="w-7 h-7" />
-                </div>
-                <div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
-                  <CheckCircle className="w-7 h-7" />
-                </div>
-              </div>
             </div>
 
             {/* Right: Text Content */}

src/app/globals.css

@@ -12,6 +12,12 @@
   --font-mono: var(--font-geist-mono);
   --color-brand-red: #dc2626;
   --color-brand-cream: #f9f9f5;
+  --animate-infinite-scroll: infinite-scroll 40s linear infinite;
+
+  @keyframes infinite-scroll {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+  }
 }
 
 body {

src/app/restaurant-types/page.tsx

@@ -2,7 +2,12 @@
 
 import React, { useState } from 'react'
 import Image from 'next/image'
-import { ArrowUpRight, Zap, RefreshCw, Clock, Target, Truck, Coffee, Cloud, UtensilsCrossed, ChefHat, Gem, Users } from 'lucide-react'
+import { 
+  ArrowUpRight, Zap, RefreshCw, Clock, Target, Truck, Coffee, Cloud, 
+  UtensilsCrossed, ChefHat, Gem, Users, Store, Beer, Flame, 
+  Pizza, Sandwich, IceCream, Wine, Soup, Beef, Utensils, 
+  ChevronLeft, ChevronRight, Layers 
+} from 'lucide-react'
 import { motion, AnimatePresence } from 'framer-motion'
 import Link from 'next/link'
 import Navbar from '@/components/Navbar'
@@ -66,6 +71,102 @@ const RESTAURANT_TYPES = [
     angle: 315,
     href: "/restaurant-types/family-style",
   },
+  {
+    label: "Fast Casual",
+    icon: Flame,
+    description: "Combine speed with quality service. Our POS handles unique workflows for restaurants that bridge the gap between fast food and fine dining.",
+    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: "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: "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: "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: "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: "Buffet",
+    icon: Layers,
+    description: "Optimized for self-service or staff-assisted buffets. Track wastage, manage entry payments, and monitor kitchen refill rates.",
+    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: "Cafeteria",
+    icon: Soup,
+    description: "Built for institutional or corporate cafeterias. Handle meal plans, quick-tap payments, and large-scale bulk ordering.",
+    href: "/restaurant-types/cafeteria",
+  },
+  {
+    label: "Teppanyaki",
+    icon: Flame,
+    description: "Experience-led dining. Sync chef stations with POS orders and manage theater-style seating arrangements.",
+    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: "Concession",
+    icon: Sandwich,
+    description: "Built for stadiums and events. Handle extreme peak waves with offline-readiness and high-speed tap-to-pay processing.",
+    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",
+  },
 ]
 
 const HERO_IMAGES = [
@@ -111,6 +212,28 @@ const RESTAURANT_TYPE_EMOJIS: Record<string, string> = {
 const RestaurantTypesPage = () => {
   const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
   const [hoveredCardIdx, setHoveredCardIdx] = useState<number | null>(null)
+  const [currentPage, setCurrentPage] = useState(0)
+  const [direction, setDirection] = useState(1) // 1 for next, -1 for previous
+  const itemsPerPage = 8
+  const totalPages = Math.ceil(RESTAURANT_TYPES.length / itemsPerPage)
+
+  const nextPage = () => {
+    setDirection(1)
+    setCurrentPage((prev) => (prev + 1) % totalPages)
+  }
+
+  const prevPage = () => {
+    setDirection(-1)
+    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages)
+  }
+
+  const currentItems = RESTAURANT_TYPES.slice(
+    currentPage * itemsPerPage,
+    (currentPage + 1) * itemsPerPage
+  )
+
+  const diagramItems = RESTAURANT_TYPES.slice(0, 8)
+
   return (
     <div className="min-h-screen bg-black font-sans selection:bg-red-600 selection:text-white">
       <Navbar />
@@ -468,8 +591,9 @@ const RestaurantTypesPage = () => {
                   className="absolute inset-0 w-full h-full pointer-events-none"
                   viewBox="0 0 580 580"
                 >
-                  {RESTAURANT_TYPES.map((type, idx) => {
+                  {diagramItems.map((type, idx) => {
-                    const rad = (type.angle * Math.PI) / 180
+                    const angle = type.angle ?? (idx * (360 / diagramItems.length))
+                    const rad = (angle * Math.PI) / 180
                     const r = 210
                     const rInner = 90
                     const x1 = 290 + rInner * Math.sin(rad)
@@ -525,10 +649,10 @@ const RestaurantTypesPage = () => {
                           className="flex flex-col items-center gap-2"
                         >
                           <span className="text-red-500 font-black uppercase tracking-[0.18em] text-[10px]">
-                            {RESTAURANT_TYPES[hoveredIdx].label}
+                            {diagramItems[hoveredIdx].label}
                           </span>
                           <span className="text-white text-sm leading-snug font-semibold">
-                            {RESTAURANT_TYPES[hoveredIdx].description}
+                            {diagramItems[hoveredIdx].description}
                           </span>
                         </motion.div>
                       )}
@@ -537,8 +661,9 @@ const RestaurantTypesPage = () => {
                 </div>
 
                 {/* Nodes */}
-                {RESTAURANT_TYPES.map((type, idx) => {
+                {diagramItems.map((type, idx) => {
-                  const rad = (type.angle * Math.PI) / 180
+                  const angle = type.angle ?? (idx * (360 / diagramItems.length))
+                  const rad = (angle * Math.PI) / 180
                   const r = 210
                   const cx = 290 + r * Math.sin(rad)
                   const cy = 290 - r * Math.cos(rad)
@@ -591,82 +716,143 @@ const RestaurantTypesPage = () => {
         </section>
 
         {/* ─── RESTAURANT TYPES CARD GRID ─────────────────────────────── */}
-        <section className="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-zinc-100">
+        <section className="py-20 sm:py-24 px-4 sm:px-6 lg:px-8 bg-white border-t border-white/5 relative">
-          <div className="max-w-7xl mx-auto">
+          {/* Subtle noise pattern for texture */}
+          <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', backgroundSize: '16px 16px' }}></div>
+
+          <div className="max-w-7xl mx-auto relative z-10">
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.2 }}
               transition={{ duration: 0.45 }}
-              className="mb-8 sm:mb-10 text-center"
+              className="mb-12 text-center"
             >
-              <p className="text-red-600 font-bold uppercase tracking-[0.2em] text-[10px] mb-2">View All Types</p>
+              <p className="text-red-600 font-bold uppercase tracking-[0.3em] text-[11px] mb-3">Explore All Models</p>
-              <h3 className="text-zinc-900 text-2xl sm:text-3xl font-black">Built for All Restaurant Types</h3>
+              <h3 className="text-black text-3xl sm:text-4xl md:text-5xl font-black mb-6">Designed For Every Scale</h3>
+              <div className="flex items-center justify-center gap-6">
+                <button 
+                  onClick={prevPage}
+                  className="group relative flex items-center justify-center w-14 h-14 transition-all active:scale-95"
+                  aria-label="Previous Page"
+                >
+                  <div className="absolute inset-0 rounded-2xl border border-black/50 bg-white shadow-sm group-hover:border-red-600 transition-colors" />
+                  <div className="absolute inset-0 rounded-2xl bg-red-600 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-90 group-hover:scale-100" />
+                  <ChevronLeft className="relative w-6 h-6 text-black group-hover:text-white transition-colors" />
+                </button>
+
+                <div className="flex gap-2 bg-black/5 px-4 py-3 rounded-2xl">
+                  {[...Array(totalPages)].map((_, i) => (
+                    <button
+                      key={i}
+                      onClick={() => setCurrentPage(i)}
+                      className={`h-2 rounded-full transition-all duration-300 ${
+                        currentPage === i ? 'w-8 bg-red-600 shadow-sm shadow-red-600/30' : 'w-2 bg-black/20 hover:bg-black/40'
+                      }`}
+                    />
+                  ))}
+                </div>
+
+                <button 
+                  onClick={nextPage}
+                  className="group relative flex items-center justify-center w-14 h-14 transition-all active:scale-95"
+                  aria-label="Next Page"
+                >
+                  <div className="absolute inset-0 rounded-2xl border border-black/50 bg-white shadow-sm group-hover:border-red-600 transition-colors" />
+                  <div className="absolute inset-0 rounded-2xl bg-red-600 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-90 group-hover:scale-100" />
+                  <ChevronRight className="relative w-6 h-6 text-black group-hover:text-white transition-colors" />
+                </button>
+              </div>
             </motion.div>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-5">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 perspective-[2000px]">
-              {RESTAURANT_TYPES.map((type, idx) => {
+              <AnimatePresence mode="wait">
-                const isHovered = hoveredCardIdx === idx
+                <motion.div
+                  key={currentPage}
+                  className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 col-span-full"
+                  style={{ transformStyle: 'preserve-3d' }}
+                >
+                  {currentItems.map((type, idx) => {
+                    const isHovered = hoveredCardIdx === idx
 
-                return (
+                    return (
-                  <motion.div
+                      <motion.div
-                    key={type.label}
+                        key={type.label}
-                    initial={{ opacity: 0, y: 24 }}
+                        initial={{ opacity: 0, rotateY: 180 * direction, scale: 0.8 }}
-                    whileInView={{ opacity: 1, y: 0 }}
+                        animate={{ 
-                    viewport={{ once: true, amount: 0.2 }}
+                          opacity: 1, 
-                    transition={{ duration: 0.45, delay: idx * 0.04 }}
+                          rotateY: 0,
-                    whileHover={{ y: -6 }}
+                          scale: 1,
-                  >
+                          transition: { 
-                    <Link
+                            delay: direction === 1 ? idx * 0.1 : (7 - idx) * 0.1, 
-                      href={type.href}
+                            duration: 0.7, 
-                      className="group block rounded-2xl border transition-all duration-300 relative overflow-hidden h-full p-5 sm:p-6"
+                            ease: [0.34, 1.56, 0.64, 1] 
-                      style={{
+                          }
-                        backgroundColor: isHovered ? '#ffffff' : '#18181b', // White on hover, Black default
-                        borderColor: isHovered ? '#dc2626' : '#27272a', // RED Border on hover
-                        borderWidth: isHovered ? '2px' : '1px', // Thick border on hover
-                        boxShadow: isHovered ? '0 16px 36px rgba(0,0,0,0.1)' : '0 6px 18px rgba(0,0,0,0.3)',
-                      }}
-                      onMouseEnter={() => setHoveredCardIdx(idx)}
-                      onMouseLeave={() => setHoveredCardIdx(null)}
-                    >
-                      {/* Background Glow Effect on Hover - Subtle warm tint */}
-                      <div className={`absolute inset-0 bg-gradient-to-br from-red-50/50 to-transparent transition-opacity duration-300 pointer-events-none ${isHovered ? 'opacity-100' : 'opacity-0'}`} />
-
-                      <div 
-                        className={`w-16 h-16 rounded-full border flex items-center justify-center text-3xl shadow-sm mb-4 transition-all duration-300 group-hover:scale-105 relative z-10 text-white ${
-                          isHovered 
-                            ? 'bg-red-500 border-red-600' 
-                            : 'bg-zinc-800 border-zinc-700'
-                        }`}
-                      >
-                        <type.icon aria-hidden="true" className="w-8 h-8 transition-all duration-300 text-white" />
-                      </div>
-
-                      <h4 className={`text-2xl leading-tight font-black mb-2 relative z-10 transition-colors duration-300 ${
-                        isHovered ? 'text-red-600' : 'text-white' // Red Title on Hover
-                      }`}>
-                        {type.label}
-                      </h4>
-                      <p className={`text-base leading-relaxed mb-6 relative z-10 transition-colors duration-300 ${
-                        isHovered ? 'text-zinc-600' : 'text-zinc-400'
-                      }`}>
-                        {type.description}
-                      </p>
-
-                      <span
-                        className="inline-flex items-center justify-center rounded-xl px-4 py-2 font-semibold text-sm transition-all duration-300 relative z-10"
-                        style={{
-                          backgroundColor: '#dc2626',
-                          border: `1px solid #dc2626`,
-                          color: '#ffffff',
                         }}
+                        exit={{ 
+                          opacity: 0, 
+                          rotateY: -180 * direction,
+                          scale: 0.8,
+                          transition: { 
+                            delay: direction === 1 ? (7 - idx) * 0.05 : idx * 0.05, 
+                            duration: 0.5 
+                          } 
+                        }}
+                        whileHover={{ y: -8 }}
+                        className="h-full"
+                        style={{ transformStyle: 'preserve-3d', backfaceVisibility: 'hidden' }}
                       >
-                        Learn More →
+                        <Link
-                      </span>
+                          href={type.href}
-                    </Link>
+                          className="group block rounded-3xl border transition-all duration-500 relative overflow-hidden h-full p-7"
-                  </motion.div>
+                          style={{
-                )
+                            backgroundColor: isHovered ? '#ffffff' : '#111111',
-              })}
+                            borderColor: isHovered ? '#dc2626' : 'rgba(255,255,255,0.05)',
+                            boxShadow: isHovered ? '0 30px 60px -12px rgba(220,38,38,0.2)' : '0 10px 30px -10px rgba(0,0,0,0.5)',
+                          }}
+                          onMouseEnter={() => setHoveredCardIdx(idx)}
+                          onMouseLeave={() => setHoveredCardIdx(null)}
+                        >
+                          {/* Hover Accent Line */}
+                          <div className={`absolute top-0 left-0 w-full h-1.5 bg-red-600 transition-transform duration-500 ${isHovered ? 'translate-y-0' : '-translate-y-full'}`} />
+
+                          <div 
+                            className={`w-14 h-14 rounded-2xl border flex items-center justify-center mb-6 transition-all duration-500 relative z-10 ${
+                              isHovered 
+                                ? 'bg-red-600 border-red-600 text-white shadow-lg shadow-red-600/30 rotate-12' 
+                                : 'bg-red-600/10 border-red-900/20 text-red-500'
+                            }`}
+                          >
+                            <type.icon aria-hidden="true" className="w-7 h-7" />
+                          </div>
+
+                          <h4 className={`text-2xl font-black mb-3 leading-tight relative z-10 transition-colors duration-300 ${
+                            isHovered ? 'text-zinc-900' : 'text-white'
+                          }`}>
+                            {type.label}
+                          </h4>
+                          
+                          <p className={`text-sm leading-relaxed mb-8 relative z-10 transition-colors duration-300 ${
+                            isHovered ? 'text-zinc-600' : 'text-zinc-400'
+                          }`}>
+                            {type.description}
+                          </p>
+
+                          <div className="mt-auto flex items-center justify-between relative z-10">
+                            <span
+                              className={`text-xs font-black uppercase tracking-wider flex items-center gap-1 transition-colors duration-300 ${
+                                isHovered ? 'text-red-600' : 'text-white/40'
+                              }`}
+                            >
+                              Learn More <ArrowUpRight className="w-3.5 h-3.5" />
+                            </span>
+                          </div>
+                        </Link>
+                      </motion.div>
+                    )
+                  })}
+                </motion.div>
+              </AnimatePresence>
             </div>
           </div>
         </section>

src/app/sitemap.ts

@@ -1,5 +1,7 @@
 import { MetadataRoute } from 'next'
 
+export const dynamic = "force-static"
+
 export default function sitemap(): MetadataRoute.Sitemap {
   const baseUrl = "https://dine360.vercel.app"
 

src/components/FeatureQuickNav.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { motion } from 'framer-motion';
 import { 
   Monitor, 
   BookOpen, 
@@ -9,46 +10,76 @@ import {
   Users, 
   QrCode, 
   Tag, 
-  Layers 
+  Layers,
+  LayoutDashboard,
+  ChefHat,
+  Heart,
+  FileText,
+  MessageSquare,
+  Bike,
+  TicketPercent
 } from 'lucide-react';
 
 const navItems = [
-  { name: 'POS', href: '/features/pos-management', icon: Monitor, color: 'bg-emerald-400' },
+  { name: 'DASHBOARD', href: '/features/business-dashboard', icon: LayoutDashboard, color: 'bg-indigo-500' },
+  { name: 'POS', href: '/features/pos', icon: Monitor, color: 'bg-emerald-400' },
   { name: 'MENU', href: '/features/multi-menu-management', icon: BookOpen, color: 'bg-sky-400' },
   { name: 'ORDERS', href: '/features/order-management', icon: ClipboardList, color: 'bg-orange-400' },
+  { name: 'KITCHEN', href: '/features/kitchen-management', icon: ChefHat, color: 'bg-red-500' },
   { name: 'TABLES', href: '/features/table-reservation', icon: Users, color: 'bg-purple-400' },
   { name: 'WEBSITE', href: '/features/restaurant-website', icon: Globe, color: 'bg-emerald-500' },
+  { name: 'LOYALTY', href: '/features/loyalty-management', icon: Heart, color: 'bg-pink-500' },
   { name: 'QR CODE', href: '/features/qr-code-menu', icon: QrCode, color: 'bg-sky-500' },
+  { name: 'INVOICING', href: '/features/invoicing', icon: FileText, color: 'bg-blue-500' },
   { name: 'PROMO', href: '/features/promotion-management', icon: Tag, color: 'bg-orange-500' },
+  { name: 'OFFERS', href: '/features/promotions', icon: TicketPercent, color: 'bg-yellow-500' },
   { name: 'STOCK', href: '/features/inventory-management', icon: Layers, color: 'bg-purple-500' },
+  { name: 'TEAM', href: '/features/team-communication', icon: MessageSquare, color: 'bg-teal-500' },
+  { name: 'UBER', href: '/features/uber-integration', icon: Bike, color: 'bg-black' },
 ];
 
 const FeatureQuickNav = () => {
+  // Duplicate only once for CSS loop
+  const duplicatedItems = [...navItems, ...navItems];
+
   return (
-    <section className="py-16 bg-slate-50 border-t border-zinc-100">
+    <section className="py-16 bg-gray-300 text-whiteborder-y border-white/5 overflow-hidden">
-      <div className="max-w-7xl mx-auto px-6">
+      <div className="max-w-7xl mx-auto px-6 mb-10">
-        <div className="text-center mb-10">
+        <div className="text-center">
-          <h3 className="text-sm font-black uppercase tracking-[0.3em] text-zinc-400">Explore More Features</h3>
+          <h3 className="text-sm font-black uppercase tracking-[0.3em] text-zinc-500 flex items-center justify-center gap-4">
+            <span className="h-px w-8 bg-zinc-900"></span>
+            Explore All Features
+            <span className="h-px w-8 bg-zinc-800"></span>
+          </h3>
         </div>
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
+      </div>
-          {navItems.map((item) => (
+
+      <div className="relative flex overflow-hidden group">
+        <div 
+          className="flex gap-4 px-4 whitespace-nowrap animate-infinite-scroll group-hover:[animation-play-state:paused]"
+        >
+          {duplicatedItems.map((item, idx) => (
             <Link 
-              key={item.name} 
+              key={`${item.name}-${idx}`} 
               href={item.href}
-              className="relative bg-zinc-100 hover:bg-white p-6 rounded-lg transition-all duration-300 group shadow-sm hover:shadow-xl border-2 border-zinc-200 hover:border-zinc-300 flex flex-col items-center gap-4 text-center overflow-hidden"
+              className="relative w-40 flex-shrink-0 bg-zinc-900 hover:bg-white p-6 rounded-2xl transition-all duration-300 group/card shadow-sm hover:shadow-xl border border-white/5 hover:border-red-500 flex flex-col items-center gap-4 text-center overflow-hidden"
             >
-              {/* Colorful Top Border like the image */}
+              {/* Colorful Top Border */}
-              <div className={`absolute top-0 left-0 right-0 h-1.5 ${item.color}`}></div>
+              <div className={`absolute top-0 left-0 right-0 h-1 ${item.color}`}></div>
               
-              <div className="text-zinc-500 group-hover:text-red-500 transition-colors">
+              <div className="text-white group-hover/card:text-red-500 transition-colors transform group-hover/card:scale-110 duration-300">
-                <item.icon className="w-8 h-8 md:w-10 md:h-10" />
+                <item.icon className="w-10 h-10" />
               </div>
-              <span className="text-[10px] font-black tracking-widest uppercase text-zinc-400 group-hover:text-zinc-900 transition-colors">
+              <span className="text-[10px] font-black tracking-widest uppercase text-zinc-500 group-hover/card:text-zinc-950 transition-colors">
                 {item.name}
               </span>
             </Link>
           ))}
         </div>
+        
+        {/* Gradient Overlays for smooth entry/exit fade */}
+        <div className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-zinc-950 to-transparent z-10 pointer-events-none"></div>
+        <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-zinc-950 to-transparent z-10 pointer-events-none"></div>
       </div>
     </section>
   );

src/components/Footer.tsx

@@ -50,13 +50,8 @@ const Footer = () => {
     { name: "Inventory Management", href: "/features/inventory-management" },
     { name: "Purchase & Promotions", href: "/features/promotion-management" },
     { name: "Uber Integration", href: "/features/uber-integration" },
-    { name: "Invoicing", href: "/features/invoicing" },
+    { name: "view all pages ", href: "/features " },
-    { name: "POS Management", href: "/features/pos" },
+    
-    { name: "Promotions", href: "/features/promotions" },
-    { name: "Website & Online Ordering", href: "/features/restaurant-website" },
-    { name: "Business Dashboard", href: "/features/business-dashboard" },
-    { name: "Multi-Branch Management", href: "/features/multi-menu-management" },
-    { name: "Team Communication", href: "/features/team-communication" },
   ];
 
   const restaurantTypeLinks = [
@@ -67,23 +62,7 @@ const Footer = () => {
     { name: "Family Style Restaurant", href: "/restaurant-types/family-style" },
     { name: "Fast Food Restaurant", href: "/restaurant-types/fast-food" },
     { name: "Food Truck, Cart, or Stand", href: "/restaurant-types/food-truck" },
-    { name: "Cafe", href: "/restaurant-types/cafe-bistro" },
+    { name: "view all pages", href: "/restaurant-types" },
-    { name: "Buffet Restaurant", href: "/restaurant-types/buffet" },
-    { name: "Pub", href: "/restaurant-types/pub" },
-    { name: "Cafeteria", href: "/restaurant-types/cafeteria" },
-    { name: "Coffee House", href: "/restaurant-types/coffee-house" },
-    { name: "Diner", href: "/restaurant-types/diner" },
-    { name: "Pop-Up Restaurant", href: "/restaurant-types/pop-up" },
-    { name: "Contemporary Casual Restaurant", href: "/restaurant-types/contemporary-casual" },
-    { name: "Bistro", href: "/restaurant-types/bistro" },
-    { name: "Destination Restaurant", href: "/restaurant-types/destination" },
-    { name: "Teppanyaki Grill", href: "/restaurant-types/teppanyaki" },
-    { name: "Mongolian Barbecue", href: "/restaurant-types/mongolian-bbq" },
-    { name: "Concession Stand", href: "/restaurant-types/concession" },
-    { name: "Digital-Only Restaurant", href: "/restaurant-types/digital-only" },
-    { name: "Theme Restaurant", href: "/restaurant-types/theme" },
-    { name: "Bakery", href: "/restaurant-types/bakery" },
-    { name: "Delivery-Only Restaurant", href: "/restaurant-types/delivery-only" },
   ];
 
   return (
@@ -147,10 +126,10 @@ const Footer = () => {
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true }}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12"
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8"
         >
           {/* Column 1: Brand */}
-          <motion.div variants={itemVariants} className="space-y-6 lg:col-span-4">
+          <motion.div variants={itemVariants} className="space-y-6">
             <div className="flex flex-col gap-2">
                 <h2 className="text-4xl font-bold tracking-tighter uppercase relative inline-block">
                     Dine <span className="text-brand-red">360</span>
@@ -181,7 +160,7 @@ const Footer = () => {
           </motion.div>
 
           {/* Column 2: Quick Links */}
-          <motion.div variants={itemVariants} className="space-y-6 lg:col-span-2">
+          <motion.div variants={itemVariants} className="space-y-6">
              <div className="flex flex-col items-start">
                  <h3 className="text-2xl font-bold whitespace-nowrap">Quick Links</h3>
                  <div className="h-1 w-10 bg-brand-red mt-2"></div>
@@ -190,7 +169,7 @@ const Footer = () => {
                {links.map((link, i) => (
                  <li key={i}>
                    <a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
-                     <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform" />
+                     <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
                      {link.name}
                    </a>
                  </li>
@@ -199,92 +178,41 @@ const Footer = () => {
           </motion.div>
 
           {/* Column 3: Features */}
-          <motion.div variants={itemVariants} className="space-y-6 lg:col-span-6">
+          <motion.div variants={itemVariants} className="space-y-6">
              <div className="flex flex-col items-start">
                  <h3 className="text-2xl font-bold whitespace-nowrap">Features</h3>
                  <div className="h-1 w-10 bg-brand-red mt-2"></div>
              </div>
-             <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 pt-4">
+             <ul className="space-y-4 pt-4">
-               <ul className="space-y-4">
+               {featureLinks.map((link, i) => (
-                 {featureLinks.slice(0, 7).map((link, i) => (
+                 <li key={i}>
-                   <li key={i}>
+                   <a href={link.href} className={`flex items-center gap-2 transition-colors group text-base ${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white font-bold hover:text-gray-200' : 'text-gray-400 hover:text-brand-red'}`}>
-                     <a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
+                     <ChevronsRight size={16} className={`${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white' : 'text-brand-red'} group-hover:translate-x-1 transition-transform shrink-0`} />
-                       <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform" />
+                     {link.name}
-                       {link.name}
+                   </a>
-                     </a>
+                 </li>
-                   </li>
+               ))}
-                 ))}
+             </ul>
-               </ul>
-               <ul className="space-y-4">
-                 {featureLinks.slice(7, 14).map((link, i) => (
-                   <li key={i}>
-                     <a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
-                       <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform" />
-                       {link.name}
-                     </a>
-                   </li>
-                 ))}
-               </ul>
-             </div>
           </motion.div>
 
-        </motion.div>
+          {/* Column 4: Restaurant Types */}
+          <motion.div variants={itemVariants} className="space-y-6">
+             <div className="flex flex-col items-start">
+                 <h3 className="text-2xl font-bold whitespace-nowrap">Restaurant Types</h3>
+                 <div className="h-1 w-10 bg-brand-red mt-2"></div>
+             </div>
+             <ul className="space-y-4 pt-4">
+               {restaurantTypeLinks.map((link, i) => (
+                 <li key={i}>
+                   <a href={link.href} className={`flex items-center gap-2 transition-colors group text-base ${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white font-bold hover:text-gray-200' : 'text-gray-400 hover:text-brand-red'}`}>
+                     <ChevronsRight size={16} className={`${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white' : 'text-brand-red'} group-hover:translate-x-1 transition-transform shrink-0`} />
+                     {link.name}
+                   </a>
+                 </li>
+               ))}
+             </ul>
+          </motion.div>
 
-        {/* 2nd Main Row: Restaurant Types */}
-        <motion.div 
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true }}
-            className="pt-16 border-t border-white/10 mt-16"
-        >
-          <div className="flex flex-col items-start mb-8">
-              <h3 className="text-2xl font-bold whitespace-nowrap uppercase tracking-wider">Restaurant Types</h3>
-              <div className="h-1 w-12 bg-brand-red mt-2"></div>
-          </div>
-          
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4">
-            <ul className="space-y-4">
-              {restaurantTypeLinks.slice(0, 6).map((link, i) => (
-                <li key={i}>
-                  <a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
-                    <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
-                    {link.name}
-                  </a>
-                </li>
-              ))}
-            </ul>
-            <ul className="space-y-4">
-              {restaurantTypeLinks.slice(6, 12).map((link, i) => (
-                <li key={i}>
-                  <a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
-                    <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
-                    {link.name}
-                  </a>
-                </li>
-              ))}
-            </ul>
-            <ul className="space-y-4">
-              {restaurantTypeLinks.slice(12, 18).map((link, i) => (
-                <li key={i}>
-                  <a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
-                    <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
-                    {link.name}
-                  </a>
-                </li>
-              ))}
-            </ul>
-            <ul className="space-y-4">
-              {restaurantTypeLinks.slice(18, 24).map((link, i) => (
-                <li key={i}>
-                  <a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
-                    <ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
-                    {link.name}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
         </motion.div>
       </div>
 
@@ -292,7 +220,7 @@ const Footer = () => {
       <div className="bg-brand-red py-8 relative z-20">
         <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
           <p className="text-white font-medium">
-             © All Copyright 2024 by Dine 360
+             © All Copyright 2026 by Dine 360
           </p>
           <div className="flex gap-4">
             <Link href="/terms" className="text-white hover:bg-black bg-brand-red transition-all text-sm px-6 py-2.5 font-bold rounded-lg shadow-sm border-1 border-white">Terms & Condition</Link>

src/components/Navbar.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import Logo from '@/assets/logo/dine360.jpeg';
+import Logo from '../../public/dine360.jpeg';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
   Monitor,