TL;DR plan

Desktop: normal top-menu, separate routes (great for SEO).

Mobile: one long scroll that stitches the same sections together (no duplicated content logic).

How: a tiny useIsMobile() hook + two layout components. Your existing “pages” become sections we can reuse in both.

Below are full, drop-in files (TypeScript React). Replace/add them as shown. I kept the section components minimal so you can swap in your real content.

1) src/hooks/useIsMobile.ts
import { useEffect, useState } from "react";

const DEFAULT_BREAKPOINT = 1024; // Tailwind lg

export function useIsMobile(breakpoint: number = DEFAULT_BREAKPOINT) {
  const [isMobile, setIsMobile] = useState(
    typeof window !== "undefined" ? window.innerWidth < breakpoint : false
  );

  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < breakpoint);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [breakpoint]);

  return isMobile;
}

2) src/marketing/sections/Hero.tsx
export default function Hero() {
  return (
    <section id="hero" className="py-16 lg:py-24">
      <div className="max-w-6xl mx-auto px-4">
        <h1 className="text-3xl lg:text-5xl font-bold">IBrandBiz</h1>
        <p className="mt-4 text-base lg:text-lg">
          Brand kits, sites, assets — faster than your competition can blink.
        </p>
      </div>
    </section>
  );
}

3) src/marketing/sections/Features.tsx
export default function Features() {
  return (
    <section id="features" className="py-16 border-t">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-2xl lg:text-3xl font-semibold">What You Get</h2>
        <ul className="mt-4 list-disc pl-6 space-y-2">
          <li>Business Naming + Slogans</li>
          <li>Logo + Brand Kit Generator</li>
          <li>Website + Hosting</li>
          <li>Templates, Assets, and More</li>
        </ul>
      </div>
    </section>
  );
}

4) src/marketing/sections/Services.tsx
export default function Services() {
  return (
    <section id="services" className="py-16 border-t">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-2xl lg:text-3xl font-semibold">Services</h2>
        <p className="mt-4">Subscriptions + one-off options tailored to your launch stage.</p>
      </div>
    </section>
  );
}

5) src/marketing/sections/Products.tsx
export default function Products() {
  return (
    <section id="products" className="py-16 border-t">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-2xl lg:text-3xl font-semibold">Products</h2>
        <p className="mt-4">Cover & Divider packs, Infographics, Social kits, and more.</p>
      </div>
    </section>
  );
}

6) src/marketing/sections/Pricing.tsx
export default function Pricing() {
  return (
    <section id="pricing" className="py-16 border-t">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-2xl lg:text-3xl font-semibold">Pricing</h2>
        <p className="mt-4">Monthly / Yearly toggle, Free vs Pro comparison.</p>
      </div>
    </section>
  );
}

7) src/marketing/sections/FAQ.tsx
export default function FAQ() {
  return (
    <section id="faq" className="py-16 border-t">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-2xl lg:text-3xl font-semibold">FAQ</h2>
        <p className="mt-4">Short, punchy answers. Link deeper into docs if needed.</p>
      </div>
    </section>
  );
}

8) src/marketing/sections/Contact.tsx
export default function Contact() {
  return (
    <section id="contact" className="py-16 border-t">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-2xl lg:text-3xl font-semibold">Contact</h2>
        <p className="mt-4">CTA to book a call or DM. Footer lives here on mobile.</p>
      </div>
    </section>
  );
}


Swap these section placeholders with your existing non-logged-in page content (split each page into a section component). That way you reuse content across both layouts.

9) src/layouts/MobileMarketingLayout.tsx (long-scroll)
import Hero from "@/marketing/sections/Hero";
import Features from "@/marketing/sections/Features";
import Services from "@/marketing/sections/Services";
import Products from "@/marketing/sections/Products";
import Pricing from "@/marketing/sections/Pricing";
import FAQ from "@/marketing/sections/FAQ";
import Contact from "@/marketing/sections/Contact";

function FloatingMobileNav() {
  // Simple anchor-based nav; enhance with IntersectionObserver if you like
  const items = [
    { id: "hero", label: "Top" },
    { id: "features", label: "Features" },
    { id: "services", label: "Services" },
    { id: "products", label: "Products" },
    { id: "pricing", label: "Pricing" },
    { id: "faq", label: "FAQ" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <nav className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 bg-white/90 backdrop-blur rounded-full shadow px-3 py-2 flex gap-2 overflow-x-auto max-w-[95vw]">
      {items.map((it) => (
        <a
          key={it.id}
          href={`#${it.id}`}
          className="text-sm px-3 py-1 rounded-full border hover:bg-black hover:text-white transition"
        >
          {it.label}
        </a>
      ))}
    </nav>
  );
}

export default function MobileMarketingLayout() {
  return (
    <div className="mobile-marketing">
      <FloatingMobileNav />
      <Hero />
      <Features />
      <Services />
      <Products />
      <Pricing />
      <FAQ />
      <Contact />
    </div>
  );
}