10) src/layouts/DesktopMarketingLayout.tsx (top menu + routes)
import { Link, Outlet } from "react-router-dom";

export default function DesktopMarketingLayout() {
  return (
    <div className="min-h-screen">
      <header className="border-b">
        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center gap-6">
          <Link to="/" className="font-bold text-lg">IBrandBiz</Link>
          <nav className="flex gap-4 text-sm">
            <Link to="/features" className="hover:underline">Features</Link>
            <Link to="/services" className="hover:underline">Services</Link>
            <Link to="/products" className="hover:underline">Products</Link>
            <Link to="/pricing" className="hover:underline">Pricing</Link>
            <Link to="/faq" className="hover:underline">FAQ</Link>
            <Link to="/contact" className="hover:underline">Contact</Link>
          </nav>
          <div className="ml-auto">
            <Link to="/login" className="text-sm border px-3 py-1 rounded hover:bg-black hover:text-white transition">
              Log in
            </Link>
          </div>
        </div>
      </header>
      <main>
        <Outlet />
      </main>
      <footer className="border-t mt-12">
        <div className="max-w-6xl mx-auto px-4 py-8 text-sm text-gray-500">
          © {new Date().getFullYear()} IBrandBiz
        </div>
      </footer>
    </div>
  );
}

11) Desktop “page” wrappers (reuse sections)
src/marketing/pages/HomePage.tsx
import Hero from "@/marketing/sections/Hero";

export default function HomePage() {
  return <Hero />;
}

src/marketing/pages/FeaturesPage.tsx
import Features from "@/marketing/sections/Features";
export default function FeaturesPage() { return <Features />; }

src/marketing/pages/ServicesPage.tsx
import Services from "@/marketing/sections/Services";
export default function ServicesPage() { return <Services />; }

src/marketing/pages/ProductsPage.tsx
import Products from "@/marketing/sections/Products";
export default function ProductsPage() { return <Products />; }

src/marketing/pages/PricingPage.tsx
import Pricing from "@/marketing/sections/Pricing";
export default function PricingPage() { return <Pricing />; }

src/marketing/pages/FAQPage.tsx
import FAQ from "@/marketing/sections/FAQ";
export default function FAQPage() { return <FAQ />; }

src/marketing/pages/ContactPage.tsx
import Contact from "@/marketing/sections/Contact";
export default function ContactPage() { return <Contact />; }

12) src/App.tsx (router + conditional layout)
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { useIsMobile } from "@/hooks/useIsMobile";

import MobileMarketingLayout from "@/layouts/MobileMarketingLayout";
import DesktopMarketingLayout from "@/layouts/DesktopMarketingLayout";

import HomePage from "@/marketing/pages/HomePage";
import FeaturesPage from "@/marketing/pages/FeaturesPage";
import ServicesPage from "@/marketing/pages/ServicesPage";
import ProductsPage from "@/marketing/pages/ProductsPage";
import PricingPage from "@/marketing/pages/PricingPage";
import FAQPage from "@/marketing/pages/FAQPage";
import ContactPage from "@/marketing/pages/ContactPage";

// TODO: import your real auth routes/components as needed
function LoginPage() {
  return <div className="max-w-md mx-auto p-8">Login</div>;
}

export default function App() {
  const isMobile = useIsMobile(); // < 1024

  return (
    <BrowserRouter>
      {isMobile ? (
        // MOBILE: single long-scroll for all public (non-logged-in) marketing content
        <Routes>
          <Route path="/" element={<MobileMarketingLayout />} />
          <Route path="/login" element={<LoginPage />} />
          {/* Fallbacks */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      ) : (
        // DESKTOP: traditional routed pages with top menu
        <Routes>
          <Route element={<DesktopMarketingLayout />}>
            <Route path="/" element={<HomePage />} />
            <Route path="/features" element={<FeaturesPage />} />
            <Route path="/services" element={<ServicesPage />} />
            <Route path="/products" element={<ProductsPage />} />
            <Route path="/pricing" element={<PricingPage />} />
            <Route path="/faq" element={<FAQPage />} />
            <Route path="/contact" element={<ContactPage />} />
          </Route>
          <Route path="/login" element={<LoginPage />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      )}
    </BrowserRouter>
  );
}

13) src/index.css (a couple of niceties; add if you want smooth anchors)
html {
  scroll-behavior: smooth;
}
.mobile-marketing section {
  scroll-margin-top: 80px; /* avoid anchor being hidden behind nav if you add a sticky header later */
}