MetatroncubeSoftwareSolutions/MetatronLatestWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

faq responsive updated

Browse Source
This commit is contained in:
akash 2026-03-17 18:17:40 +05:30
parent 3825f0656d
commit 73daea374c
4 changed files with 73 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/globals.css
View File

@ -17970,6 +17970,34 @@ h4.service-details__dynamic-content-erp {
max-width: 520px !important;
}
.faq-four .pelocis-stretch-element-inside-column{
margin-top: 30px !important;
}
.faq-four__image__icon {
width: 175px;
height: 175px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 91px !important;
top: 50%;
}
.faq-four__image2__icon {
width: 175px;
height: 175px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 84px !important;
top: 50%;
}
.careers-popup-optimized .form-panel {
padding: 20px 35px 15px !important;
}
@ -18013,6 +18041,30 @@ h4.service-details__dynamic-content-erp {
min-height: 50px !important;
}
.faq-four__image__icon {
width: 175px;
height: 175px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0px !important;
top: 50%;
font-size: 54px !important;
}
.faq-four__image2__icon {
width: 175px;
height: 175px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0px !important;
top: 50%;
font-size: 54px !important;
}
.careers-popup-optimized .g-recaptcha-container {
transform: scale(0.7) !important;
margin: 0 !important;

10
src/components/faq/FaqPageSection.tsx
View File

@ -49,14 +49,14 @@ const FaqPageSection = () => {
<section className="faq-page-section">
<div className="container">
<div className="row align-items-center mb-60">
<div className="col-lg-6">
<div className="col-xl-6">
<div className="section-title-wrapper">
<div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Digital Mastery Unlocked</h6>
<h2 className="sec-title__title" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
</div>
</div>
<div className="col-lg-6">
<div className="col-xl-6">
<div className="section-desc-wrapper">
<p className="section-desc" style={{ margin: 0, paddingLeft: '20px' }}>
Welcome to Metatroncube’s FAQ page, where we delve into the intricacies of Web-App Development, the nuances of SEO, and the dynamics of Digital Marketing. Our goal is to address your queries and provide insightful answers that empower your digital journey, whether you’re navigating website design, mobile app development, or looking for effective digital marketing strategies.
@ -68,7 +68,7 @@ const FaqPageSection = () => {
{/* Section 1: 3-Column with Image */}
<div className="row align-items-center">
{/* Left Side FAQs */}
<div className="col-lg-4 col-md-12">
<div className="col-xl-4 col-md-12">
<div className="faq-one__accordion pelocis-accrodion">
{leftFaqs.map((faq) => (
<div key={faq.id} className={`accrodion ${activeLeftId === faq.id ? 'active' : ''}`}>
@ -93,14 +93,14 @@ const FaqPageSection = () => {
</div>
{/* Center Image */}
<div className="col-lg-4 col-md-12 text-center">
<div className="col-xl-4 col-md-12 text-center">
<div className="faq-center-image-wrap">
<img src="/assets/images/faq/1.webp" alt="FAQ Center" className="main-faq-img" />
</div>
</div>
{/* Right Side FAQs */}
<div className="col-lg-4 col-md-12">
<div className="col-xl-4 col-md-12">
<div className="faq-one__accordion pelocis-accrodion">
{rightFaqs.map((faq) => (
<div key={faq.id} className={`accrodion ${activeRightId === faq.id ? 'active' : ''}`}>

28
src/components/home/FaqFive.tsx
View File

@ -35,20 +35,7 @@ const FaqFive = () => {
return (
<section className="faq-four section-space">
<div className="container">
<div className="row">
<div className="col-xl-6">
<div className="pelocis-stretch-element-inside-column">
<div className="faq-four__image2">
<img
src="/assets/images/faq/3.webp"
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
/>
<div className="faq-four__image2__icon">
<i className="icon-faq">faq</i>
</div>
</div>
</div>
</div>
<div className="row flex-xl-row-reverse">
<div className="col-xl-6">
<div className="faq-four__content">
<div className="faq-one__accordion pelocis-accrodion">
@ -74,6 +61,19 @@ const FaqFive = () => {
</div>
</div>
</div>
<div className="col-xl-6">
<div className="pelocis-stretch-element-inside-column">
<div className="faq-four__image2 text-center">
<img
src="/assets/images/faq/3.webp"
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
/>
<div className="faq-four__image2__icon">
<i className="icon-faq">faq</i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

4
src/components/home/FaqFour.tsx
View File

@ -78,12 +78,12 @@ const FaqFour = () => {
</div>
<div className="col-xl-6">
<div className="pelocis-stretch-element-inside-column">
<div className="faq-four__image">
<div className="faq-four__image text-center">
<img
src="/assets/images/faq/2.webp"
alt="Get in touch with metatroncube"
/>
<div className="faq-four__image__icon">
<div className="faq-four__image__icon text-end">
<i className="icon-faq">faq</i>
</div>
</div>