GuidesShip In 5 Minutes

Now that you have setup ShipFast, you can follow this simple tutorial to create a landing page and add forms to collect emails for a waitlist.

Delete everything in /app/page.tsx, and paste this:

/app/page.tsx

1import { Suspense } from "react";
2import Header from "@/components/Header";
3import Hero from "@/components/Hero";
4import Problem from "@/components/Problem";
5import FeaturesAccordion from "@/components/FeaturesAccordion";
6import Pricing from "@/components/Pricing";
7import FAQ from "@/components/FAQ";
8import CTA from "@/components/CTA";
9import Footer from "@/components/Footer";
10
11export default function Home() {
12  return (
13    <>
14      <Suspense>
15        <Header />
16      </Suspense>
17      <main>
18        <Hero />
19        <Problem />
20        <FeaturesAccordion />
21        <Pricing />
22        <FAQ />
23        <CTA />
24      </main>
25      <Footer />
26    </>
27  );
28}

Edit the copy to fit your business logic. Each component has tips to help you write copy that sells. Congrats you have a beautiful landing page to show!

OPTIONAL

To collect emails for a waitlist, set up a database.
Replace the main call-to-action button in Hero, Pricing, and CTA with this:

/componets/Hero.tsx

1import ButtonLead from "@/components/ButtonLead";
2
3  ...
4  </div>
5
6  {/* For the Hero & CTA use this 👇 */}
7  <ButtonLead />
8
9  {/* For the Pricing use this instead 👇 */}
10  <ButtonLead extraStyle="!max-w-none !w-full" />
11
12  <div>
13  ...

It's time to deploy! If you require help here's a simple tutorial.