Product Incentives with description and enticing offers

Frequently ask Question with arrow

HTML

<section class="ezy__faq18">
  <div class="container">
    <div class="row justify-content-center mb-md-4">
      <div class="col-lg-8 col-xl-7 text-center">
        <h2 class="ezy__faq18-heading mb-3">Frequently Asked Questions</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h5 class="ezy__faq18-title mt-4 mt-md-5">Free Trial</h5>

        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-1" role="button" aria-expanded="true"
            aria-controls="ezy-faq18-collapse-1">
            <span>What is Easy Frontend?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse show" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-2" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-2">
            <span>Who is Easy Frontend for?</span>

            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-2">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>

        <h5 class="ezy__faq18-title mt-4 mt-md-5">Pricing & Payment</h5>

        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-3" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-3">
            <span>How often does your team upload resources?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-3">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>
        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-4" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-4">
            <span>Can I get a refund if I cancel my subscription?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-4">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>
        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-5" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-5">
            <span>Can I use Easy Frontend designs in my portfolio?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-5">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <h5 class="ezy__faq18-title mt-4 mt-md-5">General</h5>

        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-7" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-7">
            <span>How often does your team upload resources?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-7">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>
        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-8" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-8">
            <span>Can I get a refund if I cancel my subscription?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-8">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>
        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-9" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-9">
            <span>Can I use Easy Frontend designs in my portfolio?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-9">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>
        <div class="ezy__faq18-item mt-4">
          <a class="btn p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse"
            data-bs-toggle="collapse" href="#ezy-faq18-collapse-10" role="button" aria-expanded="false"
            aria-controls="ezy-faq18-collapse-10">
            <span>Can I buy Easy Frontend extended license?</span>
            <div class="ezy__faq18-icon">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse" id="ezy-faq18-collapse-10">
            <div class="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
              <p class="opacity-50 mb-0">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.ezy__faq18 {
  /* Bootstrap variables */
  --bs-body-bg: rgb(255, 255, 255);

  /* Easy Frontend variables */
  --ezy-theme-color: rgb(13, 110, 253);
  --ezy-theme-color-rgb: 13, 110, 253;
  --ezy-item-bg: rgb(246, 246, 246);
  --ezy-icon-bg: rgb(255, 255, 255);

  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  overflow: hidden;
  padding: 60px 0;
}

@media (min-width: 768px) {
  .ezy__faq18 {
    padding: 100px 0;
  }
}

/* Gray Block Style */
.gray .ezy__faq18,
.ezy__faq18.gray {
  /* Bootstrap variables */
  --bs-body-bg: rgb(246, 246, 246);

  /* Easy Frontend variables */
  --ezy-item-bg: #fff;
  --ezy-icon-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq18,
.ezy__faq18.dark-gray {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(30, 39, 53);

  /* Easy Frontend variables */
  --ezy-item-bg: rgb(11, 23, 39);
  --ezy-icon-bg: rgb(30, 39, 53);
}

/* Dark Block Style */
.dark .ezy__faq18,
.ezy__faq18.dark {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(11, 23, 39);

  /* Easy Frontend variables */
  --ezy-item-bg: rgb(30, 39, 53);
  --ezy-icon-bg: rgb(11, 23, 39);
}

.ezy__faq18-heading {
  font-weight: bold;
  font-size: 25px;
  line-height: 25px;
  color: var(--bs-body-color);
}

@media (min-width: 768px) {
  .ezy__faq18-heading {
    font-size: 45px;
    line-height: 45px;
  }
}

.ezy__faq18-item {
  background-color: var(--ezy-item-bg);
  border-radius: 5px;
}

.ezy__faq18-item * {
  color: var(--bs-body-color);
}

.ezy__faq18-btn-collapse [class*="fa-"] {
  transition: transform 0.25s ease-in-out;
}

.ezy__faq18-btn-collapse:focus {
  box-shadow: none;
}

.ezy__faq18-btn-collapse.active [class*="fa-"],
.ezy__faq18-btn-collapse[aria-expanded="true"] [class*="fa-"] {
  transform: rotate(-180deg);
}

.ezy__faq18-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--ezy-icon-bg);
}
</style>

Bootstrap

<section class="ezy__faq18 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
  <div class="container px-16 md:px-8 lg:px-28">
    <div class="grid grid-cols-12 justify-center md:mb-6">
      <div class="col-span-12 lg:col-span-8 lg:col-start-3 xl:px-12 text-center">
        <h2 class="text-[25px] leading-none md:text-[45px] font-bold mb-4">Frequently Asked Questions</h2>
      </div>
    </div>
    <div class="grid grid-cols-12 gap-8">
      <div class="col-span-12 md:col-span-6">
        <h5 class="text-xl font-medium mt-6 md:mt-12 mb-2">Free Trial</h5>

        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span>What is Easy Frontend?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-up"></span>
            </div>
          </a>
          <div class="show">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span>Who is Easy Frontend for?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>

        <h5 class="text-xl font-medium mt-6 md:mt-12 mb-2">Pricing & Payment</h5>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span> How often does your team upload resources?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span> Can I get a refund if I cancel my subscription?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span> Can I use Easy Frontend designs in my portfolio?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6">
        <h5 class="text-xl font-medium mt-6 md:mt-12 mb-2">General</h5>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span> How often does your team upload resources?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span> Can I get a refund if I cancel my subscription?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span> Can I use Easy Frontend designs in my portfolio?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6">
          <a class="btn p-4 lg:p-6 w-full text-start flex justify-between items-center">
            <span> Can I buy Easy Frontend extended license?</span>
            <div class="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
              <span class="fas fa-chevron-down"></span>
            </div>
          </a>
          <div class="collapse hidden" id="ezy-faq18-collapse-1">
            <div class="ezy__faq18-content px-4 lg:px-6 lg:pb-6">
              <p class="opacity-50">
                When it comes to booking a holiday, we know everyone likes something different - so we've designed
                our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something
                different.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



Tailwind CSS

React JS

import React, { Fragment, useState } from "react";
import { Button, Col, Collapse, Container, Row } from "react-bootstrap";
import PropTypes from "prop-types";
import classNames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";

const faqList = [
	{
		isActive: true,
		question: "What is Easy Frontend?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Who is Easy Frontend for?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How does Easy Frontend work?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How often does your team upload resources?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I get a refund if I cancel my subscription?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I use Easy Frontend designs in my portfolio?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I buy Easy Frontend extended license?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How often does your team upload resources?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I get a refund if I cancel my subscription?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
];

const FaqItem = ({ faq }) => {
	const [isOpen, setIsOpen] = useState(faq.isActive || false);

	const toggleFaq = () => setIsOpen(!isOpen);

	return (
		<div className="ezy__faq18-item mt-4">
			<Button
				variant=""
				className={classNames(
					"p-3 p-lg-4 w-100 text-start d-flex justify-content-between align-items-center ezy__faq18-btn-collapse",
					{ active: isOpen }
				)}
				type="button"
				onClick={toggleFaq}
			>
				<span>{faq.question}</span>
				<div className="ezy__faq18-icon">
					<FontAwesomeIcon icon={faChevronDown} />
				</div>
			</Button>
			<Collapse in={isOpen}>
				<div className="ezy__faq18-content px-3 px-lg-4 pb-lg-4">
					<p className="opacity-50 mb-0">{faq.answer}</p>
				</div>
			</Collapse>
		</div>
	);
};

FaqItem.propTypes = {
	faq: PropTypes.object.isRequired,
};

const FaqsGroup = ({ title }) => (
	<Fragment>
		<h5 className="ezy__faq18-title mt-4 mt-md-5">{title}</h5>
		{faqList.slice(0, 2).map((faq, i) => (
			<FaqItem faq={faq} key={i} />
		))}
	</Fragment>
);

FaqsGroup.propTypes = {
	faqs: PropTypes.array.isRequired,
	title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
};

const Faq18 = () => {
	return (
		<section className="ezy__faq18">
			<Container>
				<Row className="justify-content-center mb-md-4">
					<Col lg={8} xl={7} className="text-center">
						<h2 className="ezy__faq18-heading mb-3">
							Frequently Asked Questions
						</h2>
					</Col>
				</Row>
				<Row>
					<Col md={6}>
						<FaqsGroup faqs={faqList.slice(0, 2)} title="Free Trial" />
						<FaqsGroup
							faqs={faqList.slice(2, 5)}
							title="Pricing &amp; Payment"
						/>
					</Col>
					<Col md={6}>
						<FaqsGroup faqs={faqList.slice(5, 9)} title="General" />
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__faq18 {
	/* Bootstrap variables */
	--bs-body-bg: rgb(255, 255, 255);

	/* Easy Frontend variables */
	--ezy-theme-color: rgb(13, 110, 253);
	--ezy-theme-color-rgb: 13, 110, 253;
	--ezy-item-bg: rgb(246, 246, 246);
	--ezy-icon-bg: rgb(255, 255, 255);

	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	overflow: hidden;
	padding: 60px 0;
}

@media (min-width: 768px) {
	.ezy__faq18 {
		padding: 100px 0;
	}
}

/* Gray Block Style */
.gray .ezy__faq18,
.ezy__faq18.gray {
	/* Bootstrap variables */
	--bs-body-bg: rgb(246, 246, 246);

	/* Easy Frontend variables */
	--ezy-item-bg: #fff;
	--ezy-icon-bg: rgb(246, 246, 246);
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq18,
.ezy__faq18.dark-gray {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(30, 39, 53);

	/* Easy Frontend variables */
	--ezy-item-bg: rgb(11, 23, 39);
	--ezy-icon-bg: rgb(30, 39, 53);
}

/* Dark Block Style */
.dark .ezy__faq18,
.ezy__faq18.dark {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(11, 23, 39);

	/* Easy Frontend variables */
	--ezy-item-bg: rgb(30, 39, 53);
	--ezy-icon-bg: rgb(11, 23, 39);
}

.ezy__faq18-heading {
	font-weight: bold;
	font-size: 25px;
	line-height: 25px;
	color: var(--bs-body-color);
}

@media (min-width: 768px) {
	.ezy__faq18-heading {
		font-size: 45px;
		line-height: 45px;
	}
}

.ezy__faq18-item {
	background-color: var(--ezy-item-bg);
	border-radius: 5px;
}

.ezy__faq18-item * {
	color: var(--bs-body-color);
}

.ezy__faq18-btn-collapse [class*="fa-"] {
	transition: transform 0.25s ease-in-out;
}

.ezy__faq18-btn-collapse:focus {
	box-shadow: none;
}

.ezy__faq18-btn-collapse.active [class*="fa-"],
.ezy__faq18-btn-collapse[aria-expanded="true"] [class*="fa-"] {
	transform: rotate(-180deg);
}

.ezy__faq18-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--ezy-icon-bg);
}
</style>

import React, { Fragment, useState } from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";

const faqList = [
	{
		isActive: true,
		question: "What is Easy Frontend?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Who is Easy Frontend for?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How does Easy Frontend work?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How often does your team upload resources?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I get a refund if I cancel my subscription?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I use Easy Frontend designs in my portfolio?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I buy Easy Frontend extended license?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How often does your team upload resources?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I get a refund if I cancel my subscription?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
];

const FaqItem = ({ faq }) => {
	const [isOpen, setIsOpen] = useState(faq.isActive || false);

	const toggleFaq = () => setIsOpen(!isOpen);

	return (
		<div
			className={`${
				isOpen && "active"
			} bg-gray-100 dark:bg-[#1E2735] rounded-md mt-6`}
		>
			<a
				href="#!"
				className="btn p-4 lg:p-6 w-full text-start flex justify-between items-center"
				onClick={toggleFaq}
			>
				<span>{faq.question}</span>
				<div className="w-10 h-10 rounded-full flex justify-center items-center bg-white dark:bg-[#0b1727]">
					<span className="fas fa-chevron-up"></span>
					<FontAwesomeIcon icon={isOpen ? faChevronUp : faChevronDown} />
				</div>
			</a>
			<div className={isOpen ? "block" : "hidden"}>
				<div className="px-4 lg:px-6 lg:pb-6">
					<p className="opacity-50">{faq.answer}</p>
				</div>
			</div>
		</div>
	);
};

FaqItem.propTypes = {
	faq: PropTypes.object.isRequired,
};

const FaqsGroup = ({ title }) => (
	<Fragment>
		<h5 className="text-xl font-medium mt-6 md:mt-12 mb-2">{title}</h5>

		{faqList.slice(0, 2).map((faq, i) => (
			<FaqItem faq={faq} key={i} />
		))}
	</Fragment>
);

FaqsGroup.propTypes = {
	faqs: PropTypes.array.isRequired,
	title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
};

const Faq18 = () => {
	return (
		<section className="ezy__faq18 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
			<div className="container px-16 md:px-8 lg:px-28">
				<div className="grid grid-cols-12 justify-center md:mb-6">
					<div className="col-span-12 lg:col-span-8 lg:col-start-3 xl:px-12 text-center">
						<h2 className="text-[25px] leading-none md:text-[45px] font-bold mb-4">
							Frequently Asked Questions
						</h2>
					</div>
				</div>
				<div className="grid grid-cols-12 gap-8">
					<div className="col-span-12 md:col-span-6">
						<FaqsGroup faqs={faqList.slice(0, 2)} title="Free Trial" />
						<FaqsGroup
							faqs={faqList.slice(2, 5)}
							title="Pricing &amp; Payment"
						/>
					</div>
					<div className="col-span-12 md:col-span-6">
						<FaqsGroup faqs={faqList.slice(5, 9)} title="General" />
					</div>
				</div>
			</div>
		</section>
	);
};



FAQ #18Multiple type open and close FAQ

Available resources

Share with

Tags

You may also like