100 lines
6.1 KiB
JavaScript
100 lines
6.1 KiB
JavaScript
"use client";
|
||
import Accordion from 'react-bootstrap/Accordion';
|
||
import React, { useState } from "react";
|
||
import Link from "next/link";
|
||
import ConsenHead from '@/src/ConsenHead';
|
||
import SubCard from '../AboveFooter';
|
||
import SubCardNew from '../Website-development-service/web-sub-card';
|
||
|
||
const Faq = () => {
|
||
// First 5 FAQs
|
||
const faqDataPart1 = [
|
||
{ id: 1, title: "How long does it take to build a website?", content: "The timeline depends on your requirements. A simple business website can take 2–3 weeks, while an advanced e-commerce or custom site may take 6–8 weeks.", animationDelay: ".5s" },
|
||
{ id: 2, title: "Do you make mobile-friendly designs?", content: "Yes! All our websites are fully responsive and optimized for mobile, tablet, and desktop devices.", animationDelay: ".5s" },
|
||
{ id: 3, title: "Can you redesign my existing site? ", content: "Absolutely. We can revamp your current website with a modern look, improved performance, and better user experience.", animationDelay: ".5s" },
|
||
{ id: 4, title: "What’s the cost of a new website? ", content: "It varies based on features, design, and functionality. We provide customized packages to fit your budget.", animationDelay: ".5s" },
|
||
{ id: 5, title: " Do you provide hosting & domain support?", content: "Yes, we help you choose the right domain and hosting plan, and we can set it up for you.", animationDelay: ".5s" },
|
||
];
|
||
|
||
// Next 5 FAQs
|
||
const faqDataPart2 = [
|
||
{ id: 6, title: "Will I get a CMS to manage content?", content: "Of course! We build websites with CMS (like WordPress, Shopify, or custom CMS) so you can easily update text, images, and products.", animationDelay: ".5s" },
|
||
{ id: 7, title: "Can you build e-commerce stores?", content: "Yes, we specialize in building secure and user-friendly e-commerce websites with payment gateways and product management.", animationDelay: ".5s" },
|
||
{ id: 8, title: "Do you handle SEO & digital marketing too?", content: "Yes, we provide on-page SEO, performance optimization, and digital marketing services to help you grow online.", animationDelay: ".5s" },
|
||
{ id: 9, title: "Do you offer ongoing support?", content: "Yes, we provide maintenance and support packages to keep your website running smoothly.", animationDelay: ".5s" },
|
||
{ id: 10, title: "How do I get started?", content: "Just fill out our inquiry form or book a free consultation. Our team will guide you through the next steps.", animationDelay: ".5s" },
|
||
];
|
||
|
||
const [activeLeft, setActiveLeft] = useState(faqDataPart1[0].id);
|
||
const [activeRight, setActiveRight] = useState(faqDataPart2[0].id);
|
||
|
||
return (
|
||
<>
|
||
<ConsenHead
|
||
title="Web & App Development, SEO, Marketing FAQs | Metatroncube"
|
||
description="Explore FAQs about Web & App Development, SEO, digital marketing, and graphic design. Uncover expert insights and solutions with Metatroncube."
|
||
/>
|
||
|
||
<div className="faq pb-90">
|
||
<div className="container">
|
||
<div className="text-center mb-5">
|
||
<h2>
|
||
Frequently Asked <span>Questions</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="row">
|
||
{/* Left Column - First 5 FAQs */}
|
||
<div className="col-md-6">
|
||
<Accordion defaultActiveKey={faqDataPart1[0].id.toString()} as="ul" className="accordion">
|
||
{faqDataPart1.map((faq) => (
|
||
<li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||
<Accordion.Toggle
|
||
as="a"
|
||
eventKey={faq.id.toString()}
|
||
onClick={() => setActiveLeft(faq.id === activeLeft ? null : faq.id)}
|
||
className={faq.id === activeLeft ? "active" : ""}
|
||
>
|
||
<span>{faq.title}</span>
|
||
</Accordion.Toggle>
|
||
<Accordion.Collapse eventKey={faq.id.toString()}>
|
||
<p>{faq.content}</p>
|
||
</Accordion.Collapse>
|
||
</li>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
|
||
{/* Right Column - Next 5 FAQs */}
|
||
<div className="col-md-6">
|
||
<Accordion defaultActiveKey={faqDataPart2[0].id.toString()} as="ul" className="accordion">
|
||
{faqDataPart2.map((faq) => (
|
||
<li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||
<Accordion.Toggle
|
||
as="a"
|
||
eventKey={faq.id.toString()}
|
||
onClick={() => setActiveRight(faq.id === activeRight ? null : faq.id)}
|
||
className={faq.id === activeRight ? "active" : ""}
|
||
>
|
||
<span>{faq.title}</span>
|
||
</Accordion.Toggle>
|
||
<Accordion.Collapse eventKey={faq.id.toString()}>
|
||
<p>{faq.content}</p>
|
||
</Accordion.Collapse>
|
||
</li>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="sub">
|
||
<div className="container">
|
||
<SubCardNew />
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Faq; |