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: - 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!
- To collect emails for a waitlist, set up a database.
- Replace the main call-to-action button in
Hero
,Pricing
, andCTA
with this: - It's time to deploy! If you require help here's a simple tutorial.
/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}
OPTIONAL
/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 ...