206 lines
13 KiB
JavaScript
206 lines
13 KiB
JavaScript
import Layout from "../components/layout/Layout"
|
||
import Link from "next/link"
|
||
import {useState} from "react"
|
||
|
||
const tabs = [
|
||
{name: 'Getting Started', icon: 'flaticon-mechanics'},
|
||
{name: 'My Account', icon: 'flaticon-suit'},
|
||
{name: 'Subscriptions', icon: 'flaticon-price-label'},
|
||
{name: 'Other Questions', icon: 'flaticon-screenplay'}
|
||
]
|
||
|
||
const tabContents = {
|
||
'Getting Started': [
|
||
{
|
||
title: 'What is MERMS, and how does it work?',
|
||
desc: `MERMS operates on a cloud-based model, allowing users to access the software from anywhere, at any time. By leveraging advanced technology, MERMS streamlines processes, enhances collaboration, and provides real-time data analytics. This system automates routine tasks, enabling teams to focus on more strategic initiatives.`
|
||
},
|
||
{
|
||
title: 'What can I do with MERMS?',
|
||
desc: `With MERMS, users can manage projects, track budgets, oversee inventory, and collaborate across different departments. Whether you're in finance, marketing, or operations, MERMS offers customizable solutions to cater to your specific needs. Not only can you streamline processes, but you can also improve decision-making with data-driven insights.`
|
||
},
|
||
{
|
||
title: 'Which Product and Tools does MERMS support?',
|
||
desc: `MERMS supports a wide array of tools, including CRM systems, project management software, and financial applications. It integrates seamlessly with popular platforms like Slack, Microsoft Teams, and Google Workspace, allowing for a comprehensive management experience without losing functionality.`
|
||
},
|
||
{
|
||
title: 'Can I Automate with MERMS?',
|
||
desc: `Yes! MERMS offers robust automation capabilities. Users can set up automated workflows for routine tasks, such as reporting, notifications, and data entry, minimizing human error and saving valuable time. This feature enhances productivity, making it easier for organizations to scale and adapt to changing needs.`
|
||
}
|
||
],
|
||
|
||
'My Account': [
|
||
{title: 'How do I reset my account password?', desc: `You can reset your password by clicking the “Forgot Password” link on the login page. Follow the instructions sent to your registered email to create a new password.`},
|
||
{title: 'How can I update my email address or personal information?', desc: `Log in to your account, navigate to the Account Settings or Profile section, and update your information as needed. Remember to save your changes before exiting.`},
|
||
{title: 'What should I do if I suspect unauthorized access to my account?', desc: `Immediately change your password and review your recent account activity. Contact support to report the issue and secure your account.`},
|
||
{title: 'How do I delete or deactivate my account?', desc: `Go to the Account Settings or Privacy section and look for the option to delete or deactivate your account. Follow the prompts to complete the process. If you need assistance, contact customer support.`},
|
||
{title: 'How can I view or download my account activity and history?', desc: `Most platforms have an Account Activity or History tab within your account dashboard. You can view or download your activity details from there. If you need a comprehensive report, contact support.`},
|
||
],
|
||
|
||
'Subscriptions': [
|
||
{title: 'What subscription plans are available?', desc: `We offer a variety of subscription plans designed to meet diverse needs, including monthly, annual, and enterprise options. Comprehensive details regarding each plan are available on our Pricing page.`},
|
||
{title: 'How can I upgrade or downgrade my subscription?', desc: `You may upgrade or downgrade your subscription at any time through your Account Settings. Any changes will be applied at the beginning of your next billing cycle.`},
|
||
{title: 'What is your subscription refund policy?', desc: `Refunds are provided in accordance with our Refund Policy. For eligibility requirements and detailed instructions on submitting a refund request, please consult our policy page.`},
|
||
{title: 'How do I cancel my subscription?', desc: `To cancel your subscription, please log in to your account, navigate to the Subscription section, and follow the provided cancellation prompts. A confirmation email will be sent to you upon successful completion of the process.`},
|
||
{title: 'Will I lose access to features immediately after canceling my subscription?', desc: `No, you will continue to have access to all subscription features until the conclusion of your current billing period. Afterward, your account will revert to the free or basic version.`},
|
||
],
|
||
|
||
'Other Questions': [
|
||
{
|
||
title: 'Is my personal information secure on your website?',
|
||
desc: `Yes, we employ industry-standard encryption and advanced security protocols to ensure that your personal information remains protected at all times.`
|
||
},
|
||
{title: 'How do I contact customer support?', desc: `You may contact our customer support team through the Contact Us page, by email, or via live chat, according to your preference.`},
|
||
{title: 'Are there any fees for using the website’s services?', desc: `Our basic services are complimentary. However, certain premium features may require a subscription or a one-time payment. For more information, please refer to our Pricing page.`},
|
||
{title: 'What browsers are supported by your website?', desc: `Our website is compatible with the latest versions of major web browsers, including Chrome, Firefox, Safari, and Edge.`},
|
||
{title: 'Can I access the website on my mobile device?', desc: `Yes, our website is fully responsive and optimized for seamless use on smartphones and tablets.`},
|
||
]
|
||
|
||
}
|
||
|
||
export default function Home() {
|
||
const [activeTab, setActiveTab] = useState(tabs[0])
|
||
const handleOnClick = (tab) => {
|
||
setActiveTab(tab)
|
||
}
|
||
|
||
|
||
const [isActive, setIsActive] = useState({
|
||
status: false,
|
||
key: 0,
|
||
})
|
||
|
||
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 */}
|
||
{tabs.map((tab, index) => (
|
||
<li key={index}
|
||
className={activeTab?.name === tab?.name ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"}
|
||
onClick={() => handleOnClick(tab)}>
|
||
<div className="tab-link-ico"><span className={tab.icon}/></div>
|
||
<p>{tab.name}</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">
|
||
{/* CONTENT */}
|
||
{tabs.map((tab, index) => (
|
||
<div key={index} id="tab-1"
|
||
className={activeTab?.name === tab?.name ? "tab-content current" : "tab-content "}>
|
||
<div className="accordion-wrapper">
|
||
<ul className="accordion">
|
||
{tabContents[activeTab.name]?.map((content, index) => (
|
||
<li key={index}
|
||
className={isActive.key == index ? "accordion-item is-active" : "accordion-item"}
|
||
onClick={() => handleToggle(index)}>
|
||
{/* Question */}
|
||
<div className="accordion-thumb">
|
||
<h5 className="s-22 w-700">{content?.title}</h5>
|
||
</div>
|
||
{/* Answer */}
|
||
<div className="accordion-panel color--grey"
|
||
style={{display: `${isActive.key == index ? "block" : "none"}`}}>
|
||
{/* Text */}
|
||
<p>{content?.desc}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{/* END OF 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>
|
||
</>
|
||
)
|
||
}
|
||
export async function getStaticProps({ locale }) {
|
||
const { getMessages } = await import('../utils/getMessages')
|
||
return {
|
||
props: {
|
||
locale,
|
||
messages: await getMessages(locale),
|
||
}
|
||
}
|
||
}
|