Plainform | Landing Page Structure

Plainform's public app shell is composed in app/(base)/layout.tsx, while the homepage section order is composed in app/(base)/page.tsx. The homepage is intentionally ordered as a conversion flow: start with the main promise, show the product, make the problem concrete, present the solution, handle objections, then ask for the conversion.

Base Layout

app/(base)/layout.tsx wraps the public marketing pages with shared UI:

app/(base)/layout.tsx

export default function BaseLayout({ children }) {
  return (
    <>
      <Navigation />
      <LeadMagnet />
      {children}
      <Footer />
    </>
  );
}

LeadMagnet lives here because it is a timed popup, not a visible homepage section. Mounting it in the (base) layout lets it appear across public base pages while keeping the homepage section flow clean.

Homepage Composition

app/(base)/page.tsx

export default async function Home() {
  return (
    <div className="flex flex-col">
      <Hero />
      <AppShowcase />
      <Problem />
      <Cost />
      <FeaturesSection />
      <BuiltFor />
      <HowItWorks />
      <Benefits />
      <GetStarted />
      <Pricing />
      <Testimonials />
      <Faq />
      <CallToValue />
    </div>
  );
}

The homepage section list does not include Navigation, Footer, or LeadMagnet. Those live in the (base) layout so they can wrap the page instead of behaving like content sections.

Visible Section Flow

Section	Purpose	Why it exists
`Hero`	Communicates the main promise and primary CTA	Gives visitors an immediate reason to keep reading
`AppShowcase`	Shows the product visually	Makes the offer feel tangible instead of abstract
`Problem`	Names the pain your product solves	Helps visitors recognize the cost of their current workflow
`Cost`	Quantifies wasted setup time or effort	Turns the pain into a measurable business problem
`FeaturesSection`	Presents the integrated capabilities	Shows how Plainform solves the setup problem
`BuiltFor`	Clarifies who the product is and is not for	Qualifies visitors and prevents mismatched expectations
`HowItWorks`	Explains the path to getting started	Reduces uncertainty about adoption
`Benefits`	Reinforces outcomes and value	Moves from features to practical results
`GetStarted`	Gives a simple next-step prompt	Keeps momentum before the pricing section
`Pricing`	Displays the offer and checkout path	Converts interest into purchase intent
`Testimonials`	Adds social proof	Builds trust with real user feedback
`Faq`	Handles common objections	Removes friction before the final CTA
`CallToValue`	Repeats the final conversion ask	Gives visitors a clear action after the full story

Lead Capture

LeadMagnet is a conversion layer, not a content section. It is mounted in app/(base)/layout.tsx so it can run on public base pages and control its own timing.

Use it for:

collecting emails from visitors who are not ready to buy
offering a resource, waitlist, discount, or product update
capturing intent without interrupting the visible section flow

If you remove it, the visible landing page still works normally.

If you only want the popup on the homepage, move LeadMagnet from app/(base)/layout.tsx back into app/(base)/page.tsx. If you want it in the root app/layout.tsx, add route guards first so it does not appear on auth, docs, order, or legal pages.

Customizing the Page

Most homepage copy lives in locales/en.json under homePage. Site-wide metadata, page titles, support email, and default SEO values live in config/siteConfig.ts.

When customizing the landing page:

edit copy in locales/en.json first
reorder sections in app/(base)/page.tsx only when the story changes
remove a section only if the previous or next section still covers its job
keep Pricing, Faq, and CallToValue near the end so objections are handled before the final conversion ask

For copy and metadata customization, start with Locales & Site Config.

Common Changes

Remove a Section

Delete the component from app/(base)/page.tsx and remove unused locale content later if you no longer need it.

app/(base)/page.tsx

<Hero />
<AppShowcase />
<Problem />
{/* <Cost /> removed */}
<FeaturesSection />

Reorder a Section

Move sections only when the narrative still makes sense. For example, keeping Testimonials before Pricing can work when trust matters more than showing the offer early.

app/(base)/page.tsx

<FeaturesSection />
<Testimonials />
<Pricing />
<Faq />
<CallToValue />

Add a New Section

Create a component in components/, add copy to locales/en.json, then mount it in app/(base)/page.tsx.

app/(base)/page.tsx

<FeaturesSection />
<UseCases />
<BuiltFor />

Landing Page Structure

On this page