Public Pages

---
import {
  Feature,
  FeaturesGrid,
  Hero,
  PlanCards,
  Statement
} from '~/components';
import { getPlans } from '~/core/plan/server';
import { MainLayout } from '~/layouts';

const plans = await getPlans();
---

<MainLayout>
  <div class="space-y-32 md:space-y-40">
    <Hero />

    <Statement />

    <Feature
      title="Support for Astro & Next.js"
      imageLight="https://assets.shipkit.app/placeholder/light/feature-astro-next.svg"
      imageDark="https://assets.shipkit.app/placeholder/dark/feature-astro-next.svg"
      text="ShipKit offers you the freedom to choose a boilerplate based on Astro or Next.js, empowering you to select the meta-framework that best fits your project's needs. This choice ensures you start with the strongest foundation possible, tailored to your development style."
    />

    <Feature
      title="Multiple frameworks"
      imageLight="https://assets.shipkit.app/placeholder/light/feature-frameworks.svg"
      imageDark="https://assets.shipkit.app/placeholder/dark/feature-frameworks.svg"
      text="With ShipKit, you can choose your favorite framework, including React, Vue, Svelte, Solid, or Preact - the choice is yours. You get to choose the tools you're comfortable with, making your development process smoother and much more enjoyable."
      reverse
    />

    <FeaturesGrid />

    <PlanCards
      title="Pricing"
      text="Save time and focus on building your product today"
      plans={plans}
    />
  </div>
</MainLayout>

---
import { PlanCards } from '~/components';
import { getPlans } from '~/core/plan/server';
import { MainLayout } from '~/layouts';

const plans = await getPlans();
---

<MainLayout title="Pricing">
  <PlanCards
    title="Pricing"
    text="Save time and focus on building your product today"
    plans={plans}
  />
</MainLayout>

---
import { FAQs } from '~/components';
import { MainLayout } from '~/layouts';
---

<MainLayout title="FAQs">
  <FAQs client:load />
</MainLayout>