first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,583 @@
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user