179 lines
9.2 KiB
JavaScript
179 lines
9.2 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 SubCardNew from '../Website-development-service/web-sub-card';
|
||
import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
|
||
|
||
const CustomToggle = ({ children, eventKey, activeKey, callback }) => {
|
||
const isCurrentEventKey = activeKey === eventKey;
|
||
const decoratedOnClick = useAccordionToggle(
|
||
eventKey,
|
||
() => callback && callback(activeKey === eventKey ? null : eventKey),
|
||
);
|
||
|
||
return (
|
||
<div
|
||
className="faq-header d-flex justify-content-between align-items-center p-3 cursor-pointer"
|
||
onClick={decoratedOnClick}
|
||
style={{
|
||
cursor: 'pointer',
|
||
background: isCurrentEventKey ? '#f0f4f8' : '#fff',
|
||
transition: '0.3s'
|
||
}}
|
||
>
|
||
<h5 className="m-0" style={{ fontSize: '16px', fontWeight: 'bold', color: '#0a1a36' }}>
|
||
{children}
|
||
</h5>
|
||
<div
|
||
className="faq-icon d-flex justify-content-center align-items-center"
|
||
style={{
|
||
width: '30px',
|
||
height: '30px',
|
||
borderRadius: '50%',
|
||
backgroundColor: '#3779b9',
|
||
color: '#fff',
|
||
transform: isCurrentEventKey ? 'rotate(180deg)' : 'rotate(0deg)',
|
||
transition: 'transform 0.3s ease'
|
||
}}
|
||
>
|
||
<i className="fas fa-chevron-down" style={{ fontSize: '12px' }}></i>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
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 [activeKeyLeft, setActiveKeyLeft] = useState("1"); // Default open: Item 1
|
||
const [activeKeyRight, setActiveKeyRight] = useState("6"); // Default open: Item 6
|
||
|
||
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."
|
||
/>
|
||
|
||
<style jsx>{`
|
||
.faq-section-wrapper {
|
||
background-image: url('/assets/images/Mobile-app-development-service/banner-bg.webp');
|
||
background-attachment: fixed;
|
||
background-position: center;
|
||
background-size: cover;
|
||
position: relative;
|
||
}
|
||
.faq-overlay {
|
||
padding: 80px 0;
|
||
// margin-bottom: -46px;
|
||
}
|
||
.faq-item-card {
|
||
background: #fff;
|
||
border: 1px solid #eef2f6;
|
||
border-radius: 12px;
|
||
margin-bottom: 25px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.faq-item-card:hover {
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
|
||
transform: translateY(-3px);
|
||
}
|
||
.faq-body-content {
|
||
background: #f9fbfd;
|
||
padding: 25px;
|
||
font-size: 15px;
|
||
color: #444;
|
||
line-height: 1.7;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
`}</style>
|
||
|
||
<div className="faq-section-wrapper">
|
||
<div className="faq-overlay">
|
||
<div className="container">
|
||
<div className="text-center mb-5">
|
||
<div className="section-title">
|
||
<h2 className='text-white'>Frequently Asked <span>Questions</span></h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
{/* Left Column - First 5 FAQs */}
|
||
<div className="col-md-6">
|
||
<Accordion defaultActiveKey={activeKeyLeft} className="accordion-custom">
|
||
{faqDataPart1.map((faq) => (
|
||
<div key={faq.id} className="faq-item-card wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||
<CustomToggle
|
||
eventKey={faq.id.toString()}
|
||
activeKey={activeKeyLeft}
|
||
callback={setActiveKeyLeft}
|
||
>
|
||
{faq.title}
|
||
</CustomToggle>
|
||
<Accordion.Collapse eventKey={faq.id.toString()}>
|
||
<div className="faq-body-content">
|
||
{faq.content}
|
||
</div>
|
||
</Accordion.Collapse>
|
||
</div>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
|
||
{/* Right Column - Next 5 FAQs */}
|
||
<div className="col-md-6">
|
||
<Accordion defaultActiveKey={activeKeyRight} className="accordion-custom">
|
||
{faqDataPart2.map((faq) => (
|
||
<div key={faq.id} className="faq-item-card wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||
<CustomToggle
|
||
eventKey={faq.id.toString()}
|
||
activeKey={activeKeyRight}
|
||
callback={setActiveKeyRight}
|
||
>
|
||
{faq.title}
|
||
</CustomToggle>
|
||
<Accordion.Collapse eventKey={faq.id.toString()}>
|
||
<div className="faq-body-content">
|
||
{faq.content}
|
||
</div>
|
||
</Accordion.Collapse>
|
||
</div>
|
||
))}
|
||
</Accordion>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="sub">
|
||
<div className="container">
|
||
<SubCardNew />
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Faq;
|