Get Your Startup in Front of Customers in Just 5 Minutes ⚡️

With UI Now, creating a stunning, high-converting landing page has never been easier. Follow this tutorial to build a beautiful page that’s ready to collect emails for your waitlist (optional) and showcase your startup to the world.

Complete this tutorial and get featured on our homepage ⭐️

Step 1: Set Up Your Environment

If you haven’t already, clone the repository and run the server locally. Follow the Get Started tutorial to get up and running in minutes.

Step 2: Build Your Landing Page

1. Navigate to /app/page.js.

2. Delete everything inside the file and paste the following code:
   
   

javascriptCopy codeimport { Suspense } from "react";
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import Problem from "@/components/Problem";
import FeaturesAccordion from "@/components/FeaturesAccordion";
import Pricing from "@/components/Pricing";
import FAQ from "@/components/FAQ";
import CTA from "@/components/CTA";
import Footer from "@/components/Footer";

export default function Home() {
  return (
    <>
      <Suspense>
        <Header />
      </Suspense>
      <main>
        <Hero />
        <Problem />
        <FeaturesAccordion />
        <Pricing />
        <FAQ />
        <CTA />
      </main>
      <Footer />

Edit the content: Tailor the copy to fit your business’s unique voice and value proposition. Each component includes built-in tips to help you write compelling, sales-driven content—check the Components section for guidance.

Congrats! 🎉 You now have a professional landing page ready to impress.

Step 3: Add a Waitlist (Optional)

Want to collect emails? Set up a database to capture leads:

1. Go to /api/lead/route.js.

2. Uncomment the code to enable email saving.

Step 4: Update Your Call-to-Action Buttons

Maximize your landing page’s effectiveness by replacing the main call-to-action buttons in the Hero, Pricing, and CTA sections:

File: Hero.js

javascriptCopy codeimport ButtonLead from "@/components/ButtonLead";

// Use this for Hero & CTA 👇
<ButtonLead />

// Use this for Pricing 👇
<ButtonLead extraStyle="!max-w-none !w-full" />

Step 5: Deploy Your Landing Page

Your landing page is ready to go live! Deploy your site to share your startup with the world. If you need help deploying, check out our Simple Deployment Tutorial.

Why UI Now?

• Fast Results: Build and launch in just minutes.

• Professional Design: Every component is crafted to captivate and convert.

• Customizable Features: Tailor your page to reflect your unique brand and goals.

Take your first step toward success. Build your landing page with UI Now today!