Shipixen Logo

Landing Page FAQ Component

Updated on

Use this component to display frequently asked questions & answers on the landing page.

This can also be added on a separate page, but it's usually a good idea to have it on the landing page so people can search for information.
Moreover, it can give you a bit of an SEO boost too.

FAQ

Looking to learn more about Shipixen? Here are some of the most common questions.

  • What is Shipixen exactly?

    Shipixen is an app that generates boilerplate code with your branding. You get the git repository & can modify the code as you want.

  • Where can I deploy the generated code?

    We make a deployment to Vercel for you as part of the generation process. However, you own the code, so you can technically deploy it on any host that support Next.js.

  • What do I get if I pre-order?

    With the pre-order, you get a 50% discount on the final price and a lifetime license for the generated code.

Usage

import { LandingFaqSection } from '@/components/landing/LandingFaq';
<LandingFaqSection
  title={'Frequently Asked Questions'}
  description="Looking to learn more about Shipixen? Here are some of the most common
  questions we get asked."
  faqItems={[
    {
      question: 'What is Shipixen exactly?',
      answer:
        'Shipixen is an app that generates boilerplate code with your branding. You get the git repository & can modify the code as you want.',
    },
  ]}
/>

Examples

With Background

FAQ

Looking to learn more about our product? Here are some of the most common questions.

  • Can I get a refund?

    Yes, you can get a refund within 30 days of your purchase. No questions asked.

  • What technologies are used?

    We use Next.js, Tailwind CSS, and Vercel for the deployment.

  • What do I get if I pre-order?

    With the pre-order, you get a 50% discount on the final price and a lifetime license for the generated code.

With Background Glow

FAQ

Looking to learn more about our product? Here are some of the most common questions.

  • Can I get a refund?

    Yes, you can get a refund within 30 days of your purchase. No questions asked.

  • What technologies are used?

    We use Next.js, Tailwind CSS, and Vercel for the deployment.

  • What do I get if I pre-order?

    With the pre-order, you get a 50% discount on the final price and a lifetime license for the generated code.

API Reference

Prop NameProp TypeRequiredDefault
title string ǀ React.ReactNodeNo-
titleComponent React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
faqItems FaqItem[]Yes-
withBackground booleanNofalse
withBackgroundGlow booleanNofalse
variant 'primary' ǀ 'secondary'No'primary'
backgroundGlowVariant 'primary' ǀ 'secondary'No'primary'
export interface FaqItem {
  question: string;
  answer: string;
}

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.