Docs
Getting Started
Landing Page 1

First Landing Page

Overview

This section will guide you through setting up your first landing page using the components provided in the StartupBolt Rapid Launch Kit. You'll learn how to integrate various modules, including the Navbar, HeroSection, PricingTable, and more, to create a fully functional and visually appealing landing page.

First Landing Page

Below is a sample code snippet that showcases how to structure your first landing page. This example uses various components from StartupBolt to create a landing page that can help drive conversions and engage users.

import Navbar from "@/modules/native/Navbar";
import FeatureTabs from "@/modules/native/FeatureTabs";
import PricingTable from "@/modules/native/PricingTable";
import MyTeam_2 from "@/modules/native/MyTeam_2";
import FAQAccordion from "@/modules/shadcn/FAQAccordion";
import CTA from "@/modules/native/CTA";
import Footer from "@/modules/native/Footer";
import PayButton from "@/modules/native/PayButton";
import PromoBar from "@/modules/native/PromoBar";
import ScrollPrompt from "@/modules/native/ScrollPrompt";
import HeroSection from "@/modules/native/HeroSection";
import settings from "@/settings";
import { getJSONLD } from "@/utils/seo";
 
export default function Page() {
  return (
    <>
      {getJSONLD()}
      <PromoBar />
      <Navbar
        accountDropdownButton={false}
      />
      <main>
        <div id="home">
          <HeroSection
            CustomButton={() => (
              <PayButton
                payment={settings.PLAN_DETAILS[0].payment}
                buttonTitle="Get StartupBolt"
                className="bg-primary text-primary-foreground text-lg font-bold py-3 px-8 rounded-md hover:bg-primary/90 transition duration-300 text-center self-center lg:self-start flex items-center justify-center"
              />
            )}
          />
        </div>
        <CTA />
        <FeatureTabs />
        <div id="team">
          <MyTeam_2
            sectionColors={{
              background: "bg-accent",
              foreground: "text-accent-foreground"
            }}
          />
        </div>
        <div id="pricing">
          <PricingTable
            // This prop allows you to customize which pricing plans are displayed:
            // - By default, all plans defined in settings.js will be shown
            // - Using .slice(0, 3) here limits the display to the first 3 plans
            // - You can modify this to show different plans or a custom selection
            planDetails={settings.PLAN_DETAILS.slice(0, 3)}
          />
        </div>
        <ScrollPrompt
          text={{
            description: "Do you have any questions?"
          }}
        />
        <FAQAccordion
        />
      </main>
      <Footer
        sectionColors={{
          background: "bg-accent",
          foreground: "text-accent-foreground"
        }}
      />
    </>
  );
}

To see more examples of landing pages, check out Landing Page 2.

Conclusion

With these components, you can quickly build and customize your landing page to suit your brand and goals. For more detailed instructions on setting up additional features, explore the rest of our documentation.