# 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.

*Canonical: https://makerkit.dev/docs/tanstack-supabase/components/coming-soon*

---

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.

{% component path="coming-soon" /%}

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.

```tsx {% title="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:

```tsx {% title="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>
  );
}
```