Vamos apresentar seu SaaS aos seus clientes em 10 minutos 🚀

Com esse tutorial você será capaz de criar uma linda landing page e apresentar seu SaaS aos seus clientes em 10 minutos, e se quiser vai poder coletar o e-mails para uma lista de espera (opcional).

Passo a passo

1- Exclua tudo em /app/[locale]/page.ts e cole isto:

import Providers from '@/providers/Providers'
import {
  CallToAction,
  Faq,
  Features,
  Footer,
  Header,
  Hero,
  Problems,
  Stats,
  Testimonials,
  Pricing,
  CookieBanner,
} from './(landing-page)/components'
import { useLandingPageInternationalization } from './(landing-page)/hooks/contents/useLandingPageInternationalization'

export default async function LandingPage() {
  const {
    headerIntl,
    heroIntl,
    problemsIntl,
    footerIntl,
    callToActionIntl,
    statsIntl,
    testimonialsIntl,
    faqsIntl,
    pricingIntl,
    featuresIntl,
    cookieBannerIntl,
  } = await useLandingPageInternationalization()

  return (
    <>
      <Providers>
        <Header intl={headerIntl} session={null} />
        <Hero intl={heroIntl} />
        <Problems intl={problemsIntl} />
        <Features intl={featuresIntl} />
        <Testimonials intl={testimonialsIntl} />
        <Stats intl={statsIntl} />
        <Pricing intl={pricingIntl} />
        <Faq intl={faqsIntl} />
        <CallToAction intl={callToActionIntl} />
        <Footer intl={footerIntl} />
        <CookieBanner intl={cookieBannerIntl} />
      </Providers>
    </>
  )
}

Resultado 👇🏻

2- Edite os textos em 📂 /contents/pt.json para se adequar à seu negócio.

3- Commit seu código e envie-o para um repositório privado no GitHub.

4- É hora do deploy! Se precisar de ajuda, aqui está um Tutorial simples.

Parabéns, você tem uma linda landing page para mostrar 🎉

Opcional

5- (Opcional) Para coletar e-mails para uma lista de espera, Crie uma conta no Formspark (Grátis).

6- (Opcional) Crie um formulário no formSpark:

7- (Opcional) Copie o Form id Cole no seu .ENV seu Form id na variável NEXT_PUBLIC_FORMSPARK_ID:

# Formspark
NEXT_PUBLIC_FORMSPARK_ID=

8- (Opcional) Substitua o codigo do /app/page.ts e cole isto:

import Providers from '@/providers/Providers'
import {
  CallToAction,
  Faq,
  Features,
  Footer,
  Header,
  Hero,
  Problems,
  Stats,
  Testimonials,
  Pricing,
  CookieBanner,
  SaveLeads,
} from './(landing-page)/components'
import { useLandingPageInternationalization } from './(landing-page)/hooks/contents/useLandingPageInternationalization'

export default async function LandingPage() {
  const {
    headerIntl,
    heroIntl,
    problemsIntl,
    footerIntl,
    callToActionIntl,
    statsIntl,
    testimonialsIntl,
    faqsIntl,
    pricingIntl,
    featuresIntl,
    cookieBannerIntl,
    saveLeadsIntl,
  } = await useLandingPageInternationalization()

  return (
    <>
      <Providers>
        <Header
          intl={headerIntl}
          session={null}
          callToActionToSaveLeads={<SaveLeads intl={saveLeadsIntl} />}
        />
        <Hero
          intl={heroIntl}
          callToActionToSaveLeads={<SaveLeads intl={saveLeadsIntl} />}
        />
        <Problems intl={problemsIntl} />
        <Features intl={featuresIntl} />
        <Testimonials intl={testimonialsIntl} />
        <Stats intl={statsIntl} />
        <Pricing
          intl={pricingIntl}
          callToActionToSaveLeads={<SaveLeads intl={saveLeadsIntl} />}
        />
        <Faq intl={faqsIntl} />
        <CallToAction
          intl={callToActionIntl}
          callToActionToSaveLeads={<SaveLeads intl={saveLeadsIntl} />}
        />
        <Footer intl={footerIntl} />
        <CookieBanner intl={cookieBannerIntl} />
      </Providers>
    </>
  )
}

Resultado 👇🏻