A temporary minimal landing page for your SaaS

Looking to ship as quickly as possible? Use the Coming Soon component to showcase your product's progress.

If you're rushing to launch your SaaS, you can use the Coming Soon component to showcase a minimal landing page for your product and generate buzz before you launch.

My suggestion is to replace the whole _marketing layout using the Coming Soon component.

This will save you a lot of time making sure the landing page and the links are filled with the right information.

apps/web/src/routes/_marketing/route.tsx

import { Link, createFileRoute } from '@tanstack/react-router';
import {
  ComingSoon,
  ComingSoonButton,
  ComingSoonHeading,
  ComingSoonLogo,
  ComingSoonText,
} from '@kit/ui/marketing';
import { AppLogo } from '#/components/app-logo.tsx';
import appConfig from '#/config/app.config.ts';
export const Route = createFileRoute('/_marketing')({
  component: SiteLayout,
});
function SiteLayout() {
  return (
    <ComingSoon>
      <ComingSoonLogo>
        <AppLogo />
      </ComingSoonLogo>
      <ComingSoonHeading>{appConfig.name} is coming soon</ComingSoonHeading>
      <ComingSoonText>
        We&apos;re building something amazing. Our team is working hard to bring
        you a product that will revolutionize how you work.
      </ComingSoonText>
      <ComingSoonButton asChild>
        <Link to="/">Follow Our Progress</Link>
      </ComingSoonButton>
      {/* Additional custom content */}
      <div className="mt-8 flex justify-center gap-4">
        {/* Social icons, etc */}
      </div>
    </ComingSoon>
  );
}

Even better, you can use an env variable to check if it's a production build or not and display the normal layout during development:

apps/web/src/routes/_marketing/route.tsx

import { Link, Outlet, createFileRoute } from '@tanstack/react-router';
import {
  ComingSoon,
  ComingSoonButton,
  ComingSoonHeading,
  ComingSoonLogo,
  ComingSoonText,
} from '@kit/ui/marketing';
import { AppLogo } from '#/components/app-logo.tsx';
import { SiteFooter } from '#/components/marketing/site-footer.tsx';
import { SiteHeader } from '#/components/marketing/site-header.tsx';
import appConfig from '#/config/app.config.ts';
export const Route = createFileRoute('/_marketing')({
  component: SiteLayout,
});
function SiteLayout() {
  const { user } = Route.useRouteContext();
  if (!appConfig.production) {
    return (
      <div className={'flex min-h-screen flex-col'}>
        <SiteHeader user={user} />
        <Outlet />
        <SiteFooter />
      </div>
    );
  }
  return (
    <ComingSoon>
      <ComingSoonLogo>
        <AppLogo />
      </ComingSoonLogo>
      <ComingSoonHeading>{appConfig.name} is coming soon</ComingSoonHeading>
      <ComingSoonText>
        We&apos;re building something amazing. Our team is working hard to bring
        you a product that will revolutionize how you work.
      </ComingSoonText>
      <ComingSoonButton asChild>
        <Link to="/">Follow Our Progress</Link>
      </ComingSoonButton>
      {/* Additional custom content */}
      <div className="mt-8 flex justify-center gap-4">
        {/* Social icons, etc */}
      </div>
    </ComingSoon>
  );
}