adds campaignX as upcoming feature

src/components/Layout.jsx

@@ -6,7 +6,7 @@ import {
     LayoutDashboard, Map, Calendar, LogOut, User, Home, MessageSquare,
     ChevronLeft, ChevronRight, Sun, Moon, Trophy, Users, Briefcase,
     FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings, CloudLightning,
-    HardHat, ShieldCheck, Sparkles, Megaphone
+    HardHat, ShieldCheck, Sparkles, Megaphone, Rocket
 } from 'lucide-react';
 
 import PageTransition from './PageTransition';
@@ -160,6 +160,8 @@ const Layout = () => {
                     ...commonItems,
                     { to: "/estimate-wizard/admin", icon: Settings, label: "Wizard Admin" },
                     { to: "/marketing", icon: Megaphone, label: "Ad Engine" },
+                    { type: "section", label: "Upcoming Features" },
+                    { to: "/campaignx", icon: Rocket, label: <span>Campaign<span className="text-amber-500">X</span></span> },
                 ];
             case 'ADMIN':
                 return [
@@ -183,6 +185,8 @@ const Layout = () => {
                     ...commonItems,
                     { to: "/estimate-wizard/admin", icon: Settings, label: "Wizard Admin" },
                     { to: "/marketing", icon: Megaphone, label: "Ad Engine" },
+                    { type: "section", label: "Upcoming Features" },
+                    { to: "/campaignx", icon: Rocket, label: <span>Campaign<span className="text-amber-500">X</span></span> },
                 ];
             case 'CONTRACTOR':
             case 'SUBCONTRACTOR':
@@ -288,16 +292,32 @@ const Layout = () => {
 
                 {/* 2. Navigation Items */}
                 <nav className="flex-1 px-3 py-6 space-y-1 overflow-y-auto custom-scrollbar" role="navigation">
-                    {navItems.map((item) => (
-                        <SidebarItem
-                            key={item.to}
-                            to={item.to}
-                            icon={item.icon}
-                            label={item.label}
-                            isCollapsed={isCollapsed && !isMobileMenuOpen}
-                            onClick={() => setIsMobileMenuOpen(false)}
-                        />
-                    ))}
+                    {navItems.map((item, idx) => {
+                        // Section header — a divider line followed by a small uppercase label.
+                        if (item.type === 'section') {
+                            const collapsed = isCollapsed && !isMobileMenuOpen;
+                            return (
+                                <div key={`section-${idx}`} className="pt-4 pb-1">
+                                    <div className="h-px bg-zinc-200 dark:bg-white/10 mb-2" />
+                                    {!collapsed && (
+                                        <span className="px-3 text-[10px] font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500">
+                                            {item.label}
+                                        </span>
+                                    )}
+                                </div>
+                            );
+                        }
+                        return (
+                            <SidebarItem
+                                key={item.to}
+                                to={item.to}
+                                icon={item.icon}
+                                label={item.label}
+                                isCollapsed={isCollapsed && !isMobileMenuOpen}
+                                onClick={() => setIsMobileMenuOpen(false)}
+                            />
+                        );
+                    })}
                 </nav>
 
                 {/* 3. User Profile & Footer */}