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 Name | Prop Type | Required | Default |
|---|---|---|---|
| title | string ǀ React.ReactNode | No | - |
| titleComponent | React.ReactNode | No | - |
| description | string ǀ React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| faqItems | FaqItem[] | Yes | - |
| withBackground | boolean | No | false |
| withBackgroundGlow | boolean | No | false |
| 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.