Tutoriais
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
Clone o projeto
Se ainda não o fez, clone o repositório e execute o servidor localmente. Consulte o tutorial de Comece por aqui.
1- Exclua tudo em /app/[locale]/page.ts e cole isto:
import Providers from '@/providers/Providers'
import {
CallToAction,
CookieBanner,
Faq,
Features,
Footer,
Header,
Hero,
Pricing,
Problems,
Stats,
Testimonials,
} from '../shared/@JustLaunch/components/LandingPage'
import { useLandingPageInternationalization } from '../shared/@JustLaunch/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} url={'/signup'} />
<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 '../shared/@JustLaunch/components/LandingPage'
import { useLandingPageInternationalization } from '../shared/@JustLaunch/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 👇🏻