First Landing Page

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
                plan={settings.PLAN_DETAILS[0]}
                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"
        }}
      />
    </>
  );
}