CHIEFSOFT\ameye
583 lines
52 KiB
JavaScript
583 lines
52 KiB
JavaScript
import Layout from "/components/layout/Layout"
|
|
import Link from "next/link"
|
|
import { useState } from "react"
|
|
export default function Home() {
|
|
const [activeIndex, setActiveIndex] = useState(1)
|
|
const handleOnClick = (index) => {
|
|
setActiveIndex(index)
|
|
}
|
|
const [isActive, setIsActive] = useState({
|
|
status: false,
|
|
key: 1,
|
|
})
|
|
|
|
const handleToggle = (key) => {
|
|
if (isActive.key === key) {
|
|
setIsActive({
|
|
status: false,
|
|
})
|
|
} else {
|
|
setIsActive({
|
|
status: true,
|
|
key,
|
|
})
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
<Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
|
|
<div>
|
|
<section id="faqs-4" className="gr--whitesmoke inner-page-hero pb-100 faqs-section division">
|
|
<div className="container">
|
|
{/* SECTION TITLE */}
|
|
<div className="row justify-content-center">
|
|
<div className="col-lg-11 col-xl-10">
|
|
<div className="inner-page-title">
|
|
<h2 className="s-52 w-700">How Can We Help?</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* TABS NAVIGATION */}
|
|
<div className="row">
|
|
<div className="col">
|
|
<div className="tabs-nav tabs--theme clearfix">
|
|
<ul className="tabs-1">
|
|
{/* TAB-1 LINK */}
|
|
<li className={activeIndex === 1 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(1)}>
|
|
<div className="tab-link-ico"><span className="flaticon-mechanics" /></div>
|
|
<p>Getting Started</p>
|
|
</li>
|
|
{/* TAB-2 LINK */}
|
|
<li className={activeIndex === 2 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(2)}>
|
|
<div className="tab-link-ico"><span className="flaticon-suit" /></div>
|
|
<p>My Account</p>
|
|
</li>
|
|
{/* TAB-3 LINK */}
|
|
<li className={activeIndex === 3 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(3)}>
|
|
<div className="tab-link-ico"><span className="flaticon-price-label" /></div>
|
|
<p>Pricing Plans</p>
|
|
</li>
|
|
{/* TAB-4 LINK */}
|
|
<li className={activeIndex === 4 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(4)}>
|
|
<div className="tab-link-ico"><span className="flaticon-screenplay" /></div>
|
|
<p>Other Questions</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> {/* END TABS NAVIGATION */}
|
|
{/* TABS CONTENT */}
|
|
<div className="tabs-content">
|
|
<div className="row justify-content-center">
|
|
<div className="col-xl-10">
|
|
{/* TAB-1 CONTENT */}
|
|
<div id="tab-1" className={activeIndex === 1 ? "tab-content current" : "tab-content "}>
|
|
<div className="accordion-wrapper">
|
|
<ul className="accordion">
|
|
{/* QUESTION #1 */}
|
|
<li className={isActive.key == 1 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(1)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">What is Martex and how does it work?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit
|
|
egestas magna ipsum vitae purus congue efficitur and ipsum primis
|
|
in cubilia laoreet augue egestas luctus donec and curabitur dapibus
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #1 */}
|
|
{/* QUESTION #2 */}
|
|
<li className={isActive.key == 2 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(2)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">What's inside the package?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
|
|
tempor magna undo ipsum vitae purus and efficitur ipsum primis in
|
|
cubilia laoreet tempor gravida luctus neque purus ipsum neque
|
|
</p>
|
|
{/* Text */}
|
|
<p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
|
|
lectus laoreet and gestas neque vitae auctor dolor luctus placerat
|
|
a magna cursus congue magna mpedit ligula undo congue. Maecenas
|
|
agravida augue porttitor nunc, quis vehicula magna luctus tempor.
|
|
Quisque vel laoreet turpis. Viverra augue, a augue tempor, dictum
|
|
tempor diam. Sed pulvinar a consectetur nibh, imperdiet varius viverra
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #2 */}
|
|
{/* QUESTION #3 */}
|
|
<li className={isActive.key == 3 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(3)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">General settings</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet magna suscipit egestas magna ipsum purus
|
|
ipsum a primis an augue ultrice ligula egestas suscipit lectus gestas
|
|
integer congue a lectus porta phasellus neque blandit tristique
|
|
</p>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
|
|
and magna and vehicula
|
|
</p>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit lipsum
|
|
egestas magna ipsum vitae a purus ipsum congue efficitur ipsum primis
|
|
in cubilia laoreet augue egestas luctus donec and curabitur
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #3 */}
|
|
{/* QUESTION #4 */}
|
|
<li className={isActive.key == 4 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(4)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Which languages does Martex support?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
|
|
ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
|
|
integer congue a lectus porta tristique phasellus neque a blandit and
|
|
tristique justo aliquam justo suscipit congue augue egestas volutpat
|
|
egestas magna sem congue
|
|
</p>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
|
|
ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
|
|
integer congue a lectus porta phasellus neque
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #4 */}
|
|
{/* QUESTION #5 */}
|
|
<li className={isActive.key == 5 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(5)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Automate testing with API</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<ul className="simple-list">
|
|
<li className="list-item">
|
|
<p>Curabitur ac dapibus libero quisque eu congue tristique egestas
|
|
phasellus blandit tristique justo aliquam. Aliquam vitae molestie
|
|
quisque sapien justo, aliquet aliquam molestie sed purus undo
|
|
venenatis tempor gravida eget lacinia. Augue aliquam a suscipit
|
|
tincidunt tincidunt massa
|
|
</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Aliquam vitae molestie nunc. Quisque sapien justo, aliquet non
|
|
molestie sed purus, venenatis
|
|
</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit
|
|
egestas magna ipsum vitae an efficitur purus undo ipsum primis
|
|
in cubilia laoreet augue egestas luctus donec curabitur dapibus
|
|
libero
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li> {/* END QUESTION #5 */}
|
|
</ul>
|
|
</div>
|
|
</div> {/* END TAB-1 CONTENT */}
|
|
{/* TAB-2 CONTENT */}
|
|
<div id="tab-2" className={activeIndex === 2 ? "tab-content current" : "tab-content "}>
|
|
<div className="accordion-wrapper">
|
|
<ul className="accordion">
|
|
{/* QUESTION #1 */}
|
|
<li className={isActive.key == 6 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(6)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Sign up and manage your account</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 6 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<ol className="digit-list">
|
|
<li className="list-item">
|
|
<p>Curabitur ac dapibus libero eu congue tristique neque</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Sagittis congue augue egestas volutpat egestas</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>An aliquam justo suscipit congue augue</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Gestas integer congue a lectus porta</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</li> {/* END QUESTION #1 */}
|
|
{/* QUESTION #2 */}
|
|
<li className={isActive.key == 7 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(7)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Manage account settings</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus
|
|
laoreet gestas neque and vitae undo auctor dolor luctus placerat a magna
|
|
cursus congue magna mpedit ligula congue maecenas gravida augue porttitor
|
|
nunc, quis vehicula magna luctus tempor. Quisque vel laoreet turpis. Viverra
|
|
augue, a augue tempor, dictum tempor diam. Sed pulvinar a consectetur nibh,
|
|
imperdiet varius viverra
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #2 */}
|
|
{/* QUESTION #3 */}
|
|
<li className={isActive.key == 8 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(8)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Change language or location settings</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 8 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus
|
|
laoreet gestas neque and vitae undo auctor dolor luctus placerat a magna
|
|
cursus congue magna mpedit ligula congue maecenas gravida augue porttitor
|
|
nunc, quis vehicula magna luctus tempor. Quisque vel laoreet turpis. Viverra
|
|
augue, a augue tempor, dictum tempor diam. Sed pulvinar a consectetur nibh,
|
|
imperdiet varius viverra
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #3 */}
|
|
{/* QUESTION #4 */}
|
|
<li className={isActive.key == 9 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(9)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Troubleshoot account issues</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
|
|
ipsum primis an augue ultrice ligula egestas suscipit lectus gestas
|
|
integer congue a lectus porta tristique phasellus neque a blandit and
|
|
tristique justo aliquam justo suscipit congue augue egestas volutpat
|
|
egestas magna sem congue
|
|
</p>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
|
|
ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
|
|
integer congue a lectus porta phasellus neque
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #4 */}
|
|
{/* QUESTION #5 */}
|
|
<li className={isActive.key == 10 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(10)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Manage accessibility settings</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 10 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
|
|
lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
|
|
a magna cursus congue magna mpedit ligula congue maecenas gravida augue
|
|
porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
|
|
turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
|
|
a consectetur nibh, imperdiet varius viverra
|
|
</p>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
|
|
and magna ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
|
|
tempor gravida
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #5 */}
|
|
</ul>
|
|
</div>
|
|
</div> {/* END TAB-2 CONTENT */}
|
|
{/* TAB-3 CONTENT */}
|
|
<div id="tab-3" className={activeIndex === 3 ? "tab-content current" : "tab-content "}>
|
|
<div className="accordion-wrapper">
|
|
<ul className="accordion">
|
|
{/* QUESTION #1 */}
|
|
<li className={isActive.key == 11 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(11)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">How much does Martex cost?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 11 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
|
|
ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
|
|
integer congue a lectus porta neque blandit tristique
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #1 */}
|
|
{/* QUESTION #2 */}
|
|
<li className={isActive.key == 12 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(12)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">I didn't receive the license key after purchased</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 12 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<ul className="simple-list">
|
|
<li className="list-item">
|
|
<p>Curabitur ac dapibus libero. Quisque eu congue tristique neque.
|
|
Phasellus blandit tristique aliquam justo undo. Aliquam vitae molestie nunc. Quisque sapien justo, aliquet non molestie purus
|
|
tempor
|
|
</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit
|
|
egestas magna ipsum vitae purus undo efficitur ipsum primis in
|
|
cubilia laoreet augue egestas luctus donec curabitur dapibus libero
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li> {/* END QUESTION #2 */}
|
|
{/* QUESTION #3 */}
|
|
<li className={isActive.key == 13 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(13)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Do you offer discounts for annual plans?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 13 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<ul className="simple-list">
|
|
<li className="list-item">
|
|
<p>Curabitur ac dapibus libero. Quisque eu congue justo undo
|
|
tristique neque phasellus and blandit tristique aliquam. Aliquam
|
|
vitae molestie nunc. Quisque sapien justo, aliquet non molestie
|
|
purus tempor
|
|
</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit
|
|
egestas magna ipsum vitae purus undo efficitur ipsum primis in
|
|
cubilia laoreet augue egestas luctus donec curabitur dapibus libero
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li> {/* END QUESTION #3 */}
|
|
{/* QUESTION #4 */}
|
|
<li className={isActive.key == 14 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(14)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">How safe is my data?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 14 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna an ipsum
|
|
purus ipsum primis an augue ultrice ligula egestas suscipit lectus
|
|
gestas integer congue a lectus porta tristique phasellus neque a blandit
|
|
undo tristique justo aliquam justo suscipit congue augue egestas volutpat
|
|
egestas magna sem
|
|
</p>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
|
|
ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
|
|
integer congue a lectus porta phasellus neque
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #4 */}
|
|
{/* QUESTION #5 */}
|
|
<li className={isActive.key == 15 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(15)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">How to request a refund?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 15 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<ul className="simple-list">
|
|
<li className="list-item">
|
|
<p>Curabitur ac dapibus libero. Quisque eu congue tristique</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Congue tristique neque phasellus blandit tristique justo
|
|
undo aliquam. Aliquam vitae molestie quisque sapien justo,
|
|
aliquet non molestie purus tempor
|
|
</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit
|
|
egestas magna ipsum
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li> {/* END QUESTION #5 */}
|
|
</ul>
|
|
</div>
|
|
</div> {/* END TAB-3 CONTENT */}
|
|
{/* TAB-4 CONTENT */}
|
|
<div id="tab-4" className={activeIndex === 4 ? "tab-content current" : "tab-content "}>
|
|
<div className="accordion-wrapper">
|
|
<ul className="accordion">
|
|
{/* QUESTION #1 */}
|
|
<li className={isActive.key == 16 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(16)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">How do I get the error log?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 16 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
|
|
and magna ipsum vitae
|
|
</p>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas and magna suscipit an
|
|
egestas magna ipsum vitae purus congue efficitur ipsum primis in cubilia
|
|
laoreet augue egestas luctus donec and curabitur dapibus
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #1 */}
|
|
{/* QUESTION #2 */}
|
|
<li className={isActive.key == 17 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(17)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">I forgot my folder password, what should I do?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 17 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
|
|
magna ipsum vitae purus congue efficitur ipsum primis in cubilia laoreet
|
|
augue egestas luctus donec and curabitur dapibus
|
|
</p>
|
|
{/* Text */}
|
|
<ol className="digit-list">
|
|
<li className="list-item">
|
|
<p>Gestas integer congue a lectus porta</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>An aliquam justo suscipit congue augue</p>
|
|
</li>
|
|
<li className="list-item">
|
|
<p>Sagittis congue augue egestas volutpat egestas</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</li> {/* END QUESTION #2 */}
|
|
{/* QUESTION #3 */}
|
|
<li className={isActive.key == 18 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(18)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Limitations of folder password protection</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 18 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
|
|
lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
|
|
a magna cursus congue magna mpedit ligula congue maecenas gravida augue
|
|
porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
|
|
turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
|
|
a consectetur nibh, imperdiet varius viverra
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #3 */}
|
|
{/* QUESTION #4 */}
|
|
<li className={isActive.key == 19 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(19)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">Import existing library</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 19 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
|
|
lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
|
|
a magna cursus congue magna mpedit ligula congue maecenas gravida augue
|
|
porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
|
|
turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
|
|
a consectetur nibh, imperdiet varius viverra
|
|
</p>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
|
|
and magna ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
|
|
tempor gravida
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #4 */}
|
|
{/* QUESTION #5 */}
|
|
<li className={isActive.key == 20 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(20)}>
|
|
{/* Question */}
|
|
<div className="accordion-thumb">
|
|
<h5 className="s-22 w-700">I lost my license. Can you send it to me?</h5>
|
|
</div>
|
|
{/* Answer */}
|
|
<div className="accordion-panel color--grey" style={{ display: `${isActive.key == 20 ? "block" : "none"}` }}>
|
|
{/* Text */}
|
|
<p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
|
|
ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
|
|
integer congue phasellus neque blandit tristique
|
|
</p>
|
|
{/* Text */}
|
|
<p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
|
|
and magna ipsum vitae
|
|
</p>
|
|
</div>
|
|
</li> {/* END QUESTION #5 */}
|
|
</ul>
|
|
</div>
|
|
</div> {/* END TAB-4 CONTENT */}
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* END TABS CONTENT */}
|
|
</div> {/* End container */}
|
|
</section> {/* END FAQs-4 */}
|
|
{/* BANNER-9
|
|
============================================= */}
|
|
<section id="banner-9" className="bg--02 py-70 x-border banner-section">
|
|
<div className="container">
|
|
{/* BANNER-9 WRAPPER */}
|
|
<div className="banner-7-wrapper">
|
|
<div className="row justify-content-center d-flex align-items-center">
|
|
{/* BANNER-9 TEXT */}
|
|
<div className="col-md-7 col-xl-5">
|
|
<div className="banner-9-txt">
|
|
{/* Title */}
|
|
<h3 className="s-40 w-700">Still need help?</h3>
|
|
{/* Text */}
|
|
<p className="p-lg">Don't hesitate to contact us about any question you might be interested in</p>
|
|
{/* Button */}
|
|
<Link href="/contacts" className="btn r-04 btn--theme hover--theme">Ask your question here</Link>
|
|
</div>
|
|
</div>
|
|
{/* BANNER-9 IMAGE */}
|
|
<div className="col-md-5 col-xl-5">
|
|
<div className="banner-9-img text-end">
|
|
<img className="img-fluid" src="/images/help.png" alt="banner-image" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* END BANNER-9 WRAPPER */}
|
|
</div> {/* End container */}
|
|
</section>
|
|
</div>
|
|
|
|
</Layout>
|
|
</>
|
|
)
|
|
} |