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.js, and paste this:
  • /app/page.js

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

      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.