NextBento logoNextBento
Get NextBento

Documentation

Guides and references

Landing Pages

Landing Pages

Landing 1 vs Landing 2, file structure, and component flow.

Overview

NextBento includes two landing page variants:

VariantRouteDescription
Landing 1/ (default)Header + Hero, API Demo, Features, Social Proof, Pricing, How It Works, FAQ, Final CTA, Footer
Landing 2/landing-2Navbar + Mega Menu, Hero, Logo Carousel, Stats, About, Features, Team, Pricing, Testimonials, Blog, FAQ, CTA, Contact, Footer
Landing 1 hero — headline, CTAs, and clone-to-run terminal

File Structure

app/
  page.tsx                    # Landing 1 (default homepage)
  landing-2/
    page.tsx                  # Landing 2 entry
    landing-page-content.tsx  # Assembles all Landing 2 sections
    mega-menu.tsx             # Mega menu dropdown
    components/               # Landing 2 section components
  landing-1/                  # Landing 1 components (co-located)
    header.tsx
    hero-section.tsx
    api-demo.tsx
    features-showcase.tsx
    social-proof.tsx
    pricing-section.tsx
    how-it-works.tsx
    faq.tsx
    final-cta.tsx
    footer.tsx

app/page.tsx Flow (Landing 1)

The default homepage imports and renders:

  1. LandingHeader — Top navigation
  2. HeroSection — Hero with headline, subheadline, CTAs
  3. ApiDemo — Interactive API demo
  4. FeaturesShowcase — Feature cards
  5. SocialProof — Logos, testimonials, or stats
  6. PricingSection — Plan cards
  7. HowItWorks — Step-by-step flow
  8. FAQ — Accordion FAQ
  9. FinalCTA — Final call-to-action
  10. LandingFooter — Footer with links

app/landing-2/page.tsx Flow

Uses LandingPageContent which renders:

  1. LandingNavbar — Nav with Mega Menu
  2. HeroSection — Hero
  3. LogoCarousel — Logo strip
  4. StatsSection — Metrics
  5. AboutSection — About content
  6. FeaturesSection — Features grid
  7. TeamSection — Team members
  8. PricingSection — Plans
  9. TestimonialsSection — Testimonials
  10. BlogSection — Blog preview
  11. FaqSection — FAQ
  12. CTASection — CTA
  13. ContactSection — Contact form
  14. LandingFooter — Footer

Switching Homepage

To use Landing 2 as the default homepage, update app/page.tsx to re-export or render LandingPageContent from landing-2.

Next Steps

PreviousOverviewNextLanding 1 Components