new section and conatct inetegration and testimonial integration are updated
This commit is contained in:
akash
parent
74fa05edeb
commit
dd1f13f9b4
@ -12,7 +12,7 @@ import ServiceSection from "@/components/careers/ServiceSection";
|
|||||||
import WorkProcessSection from "@/components/careers/WorkProcessSection";
|
import WorkProcessSection from "@/components/careers/WorkProcessSection";
|
||||||
import FeaturesSection from "@/components/home/home-1/FeaturesSection";
|
import FeaturesSection from "@/components/home/home-1/FeaturesSection";
|
||||||
import PageHeader from "@/components/common/PageHeader";
|
import PageHeader from "@/components/common/PageHeader";
|
||||||
import AboutService from "@/components/services/AboutService";
|
import AboutService from "@/components/services-digital-solutions/AboutService";
|
||||||
import AboutThree from "@/components/home/AboutThree";
|
import AboutThree from "@/components/home/AboutThree";
|
||||||
import FaqFour from "@/components/home/FaqFour";
|
import FaqFour from "@/components/home/FaqFour";
|
||||||
|
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import InnerBanner from "@/components/common/InnerBanner";
|
|||||||
import FaqPageSection from "@/components/faq/FaqPageSection";
|
import FaqPageSection from "@/components/faq/FaqPageSection";
|
||||||
import FaqVideoSection from "@/components/careers/FaqVideoSection";
|
import FaqVideoSection from "@/components/careers/FaqVideoSection";
|
||||||
import PageHeader from "@/components/common/PageHeader";
|
import PageHeader from "@/components/common/PageHeader";
|
||||||
|
import FaqSection from "@/components/home/home-3/FaqSection";
|
||||||
|
|
||||||
export default function FaqPage() {
|
export default function FaqPage() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -27,6 +28,7 @@ export default function FaqPage() {
|
|||||||
<PageHeader title="FAQ" />
|
<PageHeader title="FAQ" />
|
||||||
<FaqPageSection />
|
<FaqPageSection />
|
||||||
<FaqVideoSection />
|
<FaqVideoSection />
|
||||||
|
<FaqSection/>
|
||||||
</main>
|
</main>
|
||||||
<Footer1 />
|
<Footer1 />
|
||||||
</>
|
</>
|
||||||
|
|||||||
1572
src/app/globals.css
1572
src/app/globals.css
File diff suppressed because it is too large
Load Diff
@ -46,9 +46,9 @@ export default function MainPage() {
|
|||||||
<main>
|
<main>
|
||||||
<BannerSection />
|
<BannerSection />
|
||||||
<AboutSection />
|
<AboutSection />
|
||||||
<MedicalServices />
|
|
||||||
<CounsellingSolutions />
|
|
||||||
<ChooseSection />
|
<ChooseSection />
|
||||||
|
<CounsellingSolutions />
|
||||||
|
<MedicalServices />
|
||||||
<BrandSection />
|
<BrandSection />
|
||||||
<CallAreaThree />
|
<CallAreaThree />
|
||||||
<CounterAreaTwo />
|
<CounterAreaTwo />
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React from "react";
|
|||||||
import Header1 from "@/components/layout/Header1";
|
import Header1 from "@/components/layout/Header1";
|
||||||
import Footer1 from "@/components/layout/Footer1";
|
import Footer1 from "@/components/layout/Footer1";
|
||||||
import PageHeader from "@/components/common/PageHeader";
|
import PageHeader from "@/components/common/PageHeader";
|
||||||
import ServiceDetails from "@/components/services/ServiceDetails";
|
import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
|
||||||
import { psychologyServices } from "@/utils/data";
|
import { psychologyServices } from "@/utils/data";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ import Header1 from "@/components/layout/Header1";
|
|||||||
import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
|
import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
|
||||||
import ServiceSection2 from "@/components/careers/ServiceSection";
|
import ServiceSection2 from "@/components/careers/ServiceSection";
|
||||||
import WorkProcessSection2 from "@/components/careers/WorkProcessSection";
|
import WorkProcessSection2 from "@/components/careers/WorkProcessSection";
|
||||||
import AboutService from "@/components/services/AboutService";
|
import AboutService from "@/components/services-digital-solutions/AboutService";
|
||||||
import PageHeader from "@/components/common/PageHeader";
|
import PageHeader from "@/components/common/PageHeader";
|
||||||
import AboutTwo from "@/components/home/AboutTwo";
|
import AboutTwo from "@/components/home/AboutTwo";
|
||||||
|
|
||||||
@ -65,167 +65,6 @@ const WhyChooseUs = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.why-choose-us {
|
|
||||||
padding: 80px 0;
|
|
||||||
background: #eaf0f9;
|
|
||||||
}
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.why-choose-us {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.section-subtitle {
|
|
||||||
color: #3779b9;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
font-size: 15px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
.rotate-triangle {
|
|
||||||
font-size: 14px;
|
|
||||||
transform: rotate(-30deg);
|
|
||||||
margin-top: -2px;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 44px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #1a1a1a;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
.section-desc {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666;
|
|
||||||
line-height: 1.7;
|
|
||||||
margin-bottom: 35px;
|
|
||||||
}
|
|
||||||
.feature-item {
|
|
||||||
padding: 25px 0;
|
|
||||||
}
|
|
||||||
.border-top-line {
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
background: #3779b9;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 25px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
.feature-content h4 {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #1a1a1a;
|
|
||||||
}
|
|
||||||
.feature-content p {
|
|
||||||
font-size: 15px;
|
|
||||||
color: #666;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.bottom-note {
|
|
||||||
padding-top: 30px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
}
|
|
||||||
.note-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
.note-item i {
|
|
||||||
color: #1a1a1a;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
.note-item span {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #444;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
.image-area-wrapper {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
.main-image {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 30px 60px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
.main-image img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.circular-image {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: -80px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 280px;
|
|
||||||
height: 280px;
|
|
||||||
background: #fff;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.inner-circle {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
}
|
|
||||||
.inner-circle img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
@media (max-width: 1199px) {
|
|
||||||
.circular-image {
|
|
||||||
width: 220px;
|
|
||||||
height: 220px;
|
|
||||||
left: -50px;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.content-area {
|
|
||||||
padding-right: 0;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
.image-area-wrapper {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.circular-image {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
left: -30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 575px) {
|
|
||||||
.circular-image {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: none;
|
|
||||||
margin: -60px auto 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,9 +1,31 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
|
import ReCAPTCHA from "react-google-recaptcha";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
const ContactSection = () => {
|
const ContactSection = () => {
|
||||||
const sectionRef = useRef<HTMLDivElement>(null);
|
const sectionRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
service: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [formErrors, setFormErrors] = useState<any>({});
|
||||||
|
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
||||||
|
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCaptchaChange = (token: string | null) => {
|
||||||
|
setCaptchaToken(token);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
@ -42,15 +64,71 @@ const ContactSection = () => {
|
|||||||
return () => observer.disconnect();
|
return () => observer.disconnect();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// Handle form submission logic here
|
|
||||||
|
const errors: any = {};
|
||||||
|
if (!formData.name.trim()) errors.name = "Name is required.";
|
||||||
|
if (!formData.phone.trim()) errors.phone = "Phone is required.";
|
||||||
|
if (!formData.email.trim()) errors.email = "Email is required.";
|
||||||
|
if (!formData.service.trim()) errors.service = "Please select a service.";
|
||||||
|
if (!formData.message.trim()) errors.message = "Message is required.";
|
||||||
|
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||||||
|
|
||||||
|
setFormErrors(errors);
|
||||||
|
if (Object.keys(errors).length > 0) return;
|
||||||
|
|
||||||
|
const emailData = {
|
||||||
|
...formData,
|
||||||
|
message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
|
||||||
|
to: "info@metatroncubesolutions.com",
|
||||||
|
senderName: "Metatroncube Careers Contact",
|
||||||
|
recaptchaToken: captchaToken,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
});
|
||||||
|
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "success",
|
||||||
|
message: res?.data?.message || "Message sent successfully!",
|
||||||
|
});
|
||||||
|
|
||||||
|
setFormData({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
service: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
setCaptchaToken(null);
|
||||||
|
setFormErrors({});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ Error sending email:", error);
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "danger",
|
||||||
|
message: "Failed to send message. Please try again later.",
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (alert.show) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setAlert((prev) => ({ ...prev, show: false }));
|
||||||
|
}, 5000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [alert.show]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section ref={sectionRef} className="contact-one">
|
<section ref={sectionRef} className="contact-one">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row align-items-center">
|
||||||
<div className="col-lg-8">
|
<div className="col-lg-8">
|
||||||
<div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
|
<div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
|
||||||
<div className="contact-one__info__icon">
|
<div className="contact-one__info__icon">
|
||||||
@ -60,8 +138,9 @@ const ContactSection = () => {
|
|||||||
Let's call together just <span>contact</span> line
|
Let's call together just <span>contact</span> line
|
||||||
</h3>
|
</h3>
|
||||||
<p className="contact-one__info__text">
|
<p className="contact-one__info__text">
|
||||||
<a href="tel:255225551">++255225551</a>, <a href="tel:6544144444">+6544144444</a>
|
<a href="tel:+16476797651">+1-647-679-7651</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-4">
|
<div className="col-lg-4">
|
||||||
@ -95,23 +174,93 @@ const ContactSection = () => {
|
|||||||
Get free Business touch Customers me.
|
Get free Business touch Customers me.
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="contact-one__content__text">
|
|
||||||
Business tailored it design, management & support services <br />business agency elit, sed do eiusmod tempor.
|
{alert.show && (
|
||||||
</p>
|
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', color: '#fff', backgroundColor: alert.type === 'danger' ? 'rgba(255, 107, 107, 0.2)' : 'rgba(76, 175, 80, 0.2)', border: alert.type === 'danger' ? '1px solid #ff6b6b' : '1px solid #4CAF50', borderRadius: '8px' }}>
|
||||||
|
{alert.message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<form className="contact-one__form form-one" onSubmit={handleSubmit}>
|
<form className="contact-one__form form-one" onSubmit={handleSubmit}>
|
||||||
<div className="form-one__group">
|
<div className="form-one__group">
|
||||||
<div className="form-one__control">
|
<div className="mb-20">
|
||||||
<input type="text" name="name" placeholder="Your Name" required />
|
<label className="form-label">Full Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="Full Name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-input"
|
||||||
|
/>
|
||||||
|
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="form-one__control">
|
<div className="mb-20">
|
||||||
<input type="email" name="email" placeholder="Email address" required />
|
<label className="form-label">Email Address</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-input"
|
||||||
|
/>
|
||||||
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="form-one__control form-one__control--full">
|
<div className="mb-20">
|
||||||
<textarea name="message" placeholder="Message" rows={6} required></textarea>
|
<label className="form-label">Phone Number</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="phone"
|
||||||
|
placeholder="Phone Number"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-input"
|
||||||
|
/>
|
||||||
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="form-one__control form-one__control--full">
|
<div className="mb-20">
|
||||||
<button type="submit" className="tolak-btn">
|
<label className="form-label">Select Service</label>
|
||||||
<b>Send Request</b>
|
<select
|
||||||
|
name="service"
|
||||||
|
value={formData.service}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-select-custom"
|
||||||
|
>
|
||||||
|
<option value="">Select Service</option>
|
||||||
|
<option value="Website Development">Website Development</option>
|
||||||
|
<option value="Mobile Application Development">Mobile Application Development</option>
|
||||||
|
<option value="Graphic Designing">Graphic Designing</option>
|
||||||
|
<option value="UI / UX Designing">UI / UX Designing</option>
|
||||||
|
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||||||
|
<option value="Digital Marketing">Digital Marketing</option>
|
||||||
|
</select>
|
||||||
|
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="form-one__control--full mb-20">
|
||||||
|
<label className="form-label">Write Message</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
placeholder="Write Message"
|
||||||
|
rows={4}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-textarea"
|
||||||
|
></textarea>
|
||||||
|
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-one__control--full mb-3 mt-3">
|
||||||
|
<ReCAPTCHA
|
||||||
|
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
||||||
|
onChange={handleCaptchaChange}
|
||||||
|
/>
|
||||||
|
{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-one__control--full">
|
||||||
|
<button type="submit" className="submit-btn tolak-btn w-100">
|
||||||
|
<b>SEND A Message</b>
|
||||||
<span></span>
|
<span></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,10 +1,88 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
import ReCAPTCHA from "react-google-recaptcha";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
const FaqVideoSection = () => {
|
const FaqVideoSection = () => {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
service: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [formErrors, setFormErrors] = useState<any>({});
|
||||||
|
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
||||||
|
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCaptchaChange = (token: string | null) => {
|
||||||
|
setCaptchaToken(token);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const errors: any = {};
|
||||||
|
if (!formData.name.trim()) errors.name = "Name is required.";
|
||||||
|
if (!formData.phone.trim()) errors.phone = "Phone is required.";
|
||||||
|
if (!formData.email.trim()) errors.email = "Email is required.";
|
||||||
|
if (!formData.service.trim()) errors.service = "Please select a service.";
|
||||||
|
if (!formData.message.trim()) errors.message = "Message is required.";
|
||||||
|
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||||||
|
|
||||||
|
setFormErrors(errors);
|
||||||
|
if (Object.keys(errors).length > 0) return;
|
||||||
|
|
||||||
|
const emailData = {
|
||||||
|
...formData,
|
||||||
|
message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
|
||||||
|
to: "info@metatroncubesolutions.com",
|
||||||
|
senderName: "Metatroncube FAQ Section Contact",
|
||||||
|
recaptchaToken: captchaToken,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
});
|
||||||
|
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "success",
|
||||||
|
message: res?.data?.message || "Message sent successfully!",
|
||||||
|
});
|
||||||
|
|
||||||
|
setFormData({ name: "", phone: "", email: "", service: "", message: "" });
|
||||||
|
setCaptchaToken(null);
|
||||||
|
setFormErrors({});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error sending email:", error);
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "danger",
|
||||||
|
message: "Failed to send message. Please try again later.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (alert.show) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setAlert((prev) => ({ ...prev, show: false }));
|
||||||
|
}, 5000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [alert.show]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<React.Fragment>
|
||||||
<section className="faq-two">
|
<section className="faq-two">
|
||||||
<div
|
<div
|
||||||
className="faq-two__bg jarallax"
|
className="faq-two__bg jarallax"
|
||||||
@ -18,22 +96,84 @@ const FaqVideoSection = () => {
|
|||||||
<span className="section-subtitle">Get In Touch</span>
|
<span className="section-subtitle">Get In Touch</span>
|
||||||
<h2 className="section-heading text-white">Have a Project in Mind?</h2>
|
<h2 className="section-heading text-white">Have a Project in Mind?</h2>
|
||||||
</div>
|
</div>
|
||||||
<form className="faq-contact-form">
|
|
||||||
|
{alert.show && (
|
||||||
|
<div className={`faq-alert alert-${alert.type}`}>
|
||||||
|
{alert.message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form className="faq-contact-form" onSubmit={handleSubmit}>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-6 mb-20">
|
<div className="col-md-6 mb-20">
|
||||||
<input type="text" placeholder="Your Name" required />
|
<label className="faq-form-label">Full Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="Full Name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
{formErrors.name && <small className="faq-error">{formErrors.name}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 mb-20">
|
<div className="col-md-6 mb-20">
|
||||||
<input type="email" placeholder="Email Address" required />
|
<label className="faq-form-label">Email Address</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
{formErrors.email && <small className="faq-error">{formErrors.email}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 mb-20">
|
<div className="col-md-6 mb-20">
|
||||||
<input type="tel" placeholder="Phone Number" required />
|
<label className="faq-form-label">Phone Number</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
name="phone"
|
||||||
|
placeholder="Phone Number"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
{formErrors.phone && <small className="faq-error">{formErrors.phone}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 mb-20">
|
<div className="col-md-6 mb-20">
|
||||||
<input type="text" placeholder="Subject" required />
|
<label className="faq-form-label">Select Service</label>
|
||||||
|
<select
|
||||||
|
name="service"
|
||||||
|
value={formData.service}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="faq-select"
|
||||||
|
>
|
||||||
|
<option value="">Select Service</option>
|
||||||
|
<option value="Website Development">Website Development</option>
|
||||||
|
<option value="Mobile Application Development">Mobile Application Development</option>
|
||||||
|
<option value="Graphic Designing">Graphic Designing</option>
|
||||||
|
<option value="UI / UX Designing">UI / UX Designing</option>
|
||||||
|
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||||||
|
<option value="Digital Marketing">Digital Marketing</option>
|
||||||
|
</select>
|
||||||
|
{formErrors.service && <small className="faq-error">{formErrors.service}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 mb-20">
|
<div className="col-md-12 mb-20">
|
||||||
<textarea placeholder="Write a Message" rows={7} required></textarea>
|
<label className="faq-form-label">Write Message</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
placeholder="Write a Message"
|
||||||
|
rows={5}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
></textarea>
|
||||||
|
{formErrors.message && <small className="faq-error">{formErrors.message}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-12 mb-20">
|
||||||
|
<ReCAPTCHA
|
||||||
|
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
||||||
|
onChange={handleCaptchaChange}
|
||||||
|
theme="dark"
|
||||||
|
/>
|
||||||
|
{formErrors.captcha && <small className="faq-error">{formErrors.captcha}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 text-center">
|
<div className="col-md-12 text-center">
|
||||||
<button type="submit" className="primary-btn-1">
|
<button type="submit" className="primary-btn-1">
|
||||||
@ -45,8 +185,8 @@ const FaqVideoSection = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div >
|
||||||
</section>
|
</section >
|
||||||
|
|
||||||
<section className="video-three wow fadeInUp" data-wow-delay="200ms">
|
<section className="video-three wow fadeInUp" data-wow-delay="200ms">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
@ -68,142 +208,7 @@ const FaqVideoSection = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</React.Fragment>
|
||||||
<style jsx>{`
|
|
||||||
.faq-two {
|
|
||||||
padding: 120px 0 200px;
|
|
||||||
position: relative;
|
|
||||||
background-color: #0f172a;
|
|
||||||
clip-path: none !important;
|
|
||||||
}
|
|
||||||
.faq-two__bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-size: cover;
|
|
||||||
opacity: 0.15;
|
|
||||||
}
|
|
||||||
.contact-form-card {
|
|
||||||
background: rgba(26, 31, 43, 0.8);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
padding: 60px;
|
|
||||||
border-radius: 30px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.section-subtitle {
|
|
||||||
color: #3779b9;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.section-heading {
|
|
||||||
font-size: 42px;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.faq-contact-form input,
|
|
||||||
.faq-contact-form textarea {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 18px 25px;
|
|
||||||
border-radius: 12px;
|
|
||||||
color: #fff;
|
|
||||||
outline: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.faq-contact-form textarea {
|
|
||||||
min-height: 220px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
.faq-contact-form input:focus,
|
|
||||||
.faq-contact-form textarea:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-color: #3779b9;
|
|
||||||
box-shadow: 0 0 15px rgba(55, 121, 185, 0.2);
|
|
||||||
}
|
|
||||||
.primary-btn-1, .primary-btn-1-link {
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
padding: 18px 45px;
|
|
||||||
border-radius: 50px;
|
|
||||||
font-weight: 700;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 14px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-top: 25px;
|
|
||||||
}
|
|
||||||
.primary-btn-1:hover, .primary-btn-1-link:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 15px 30px rgba(55, 121, 185, 0.4);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.video-three__inner {
|
|
||||||
border-radius: 30px;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 500px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.video-three__inner::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
}
|
|
||||||
.video-content-overlay {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 800px;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
.consultation-title {
|
|
||||||
font-size: 48px;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.consultation-text {
|
|
||||||
font-size: 20px;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.consultation-title {
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
.contact-form-card {
|
|
||||||
padding: 40px 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.consultation-title {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -80,7 +80,7 @@ const ServiceSection2 = () => {
|
|||||||
<span className={service.icon}></span>
|
<span className={service.icon}></span>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="service-three__item__title">
|
<h3 className="service-three__item__title">
|
||||||
<Link href={`/services/${service.slug}`}>{service.title}</Link>
|
<Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="service-three__item__text">{service.description}</p>
|
<p className="service-three__item__text">{service.description}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,12 +3,6 @@ import React, { useEffect, useState } from 'react';
|
|||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
import ReCAPTCHA from "react-google-recaptcha";
|
import ReCAPTCHA from "react-google-recaptcha";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
interface ContactPopupProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
import ContactStatus from '../../contact/ContactStatus';
|
import ContactStatus from '../../contact/ContactStatus';
|
||||||
|
|
||||||
interface ContactPopupProps {
|
interface ContactPopupProps {
|
||||||
@ -35,7 +29,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
setMounted(true);
|
setMounted(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Close on ESC key
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleEsc = (e: KeyboardEvent) => {
|
const handleEsc = (e: KeyboardEvent) => {
|
||||||
if (e.key === 'Escape') onClose();
|
if (e.key === 'Escape') onClose();
|
||||||
@ -63,7 +56,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
|
if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
|
||||||
if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
|
if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
|
||||||
if (!formData.budgetRange) errors.budgetRange = "Please select a budget range.";
|
if (!formData.budgetRange) errors.budgetRange = "Please select a budget range.";
|
||||||
// if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||||||
|
|
||||||
setFormErrors(errors);
|
setFormErrors(errors);
|
||||||
if (Object.keys(errors).length > 0) return;
|
if (Object.keys(errors).length > 0) return;
|
||||||
@ -73,7 +66,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
const emailData = {
|
const emailData = {
|
||||||
...formData,
|
...formData,
|
||||||
message: `Business: ${formData.businessName}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
|
message: `Business: ${formData.businessName}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
|
||||||
to: "akashlucaas@gmail.com",
|
to: "info@metatroncubesolutions.com",
|
||||||
senderName: "Metatroncube Contact Popup",
|
senderName: "Metatroncube Contact Popup",
|
||||||
recaptchaToken: captchaToken,
|
recaptchaToken: captchaToken,
|
||||||
};
|
};
|
||||||
@ -149,7 +142,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Side: Form */}
|
|
||||||
<div className="col-lg-7 form-panel">
|
<div className="col-lg-7 form-panel">
|
||||||
<button onClick={onClose} className="close-btn">
|
<button onClick={onClose} className="close-btn">
|
||||||
<i className="fa-solid fa-xmark"></i>
|
<i className="fa-solid fa-xmark"></i>
|
||||||
@ -160,19 +152,19 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
<h3 className="form-title">Start Your Project</h3>
|
<h3 className="form-title">Start Your Project</h3>
|
||||||
<form className="contact-form" onSubmit={handleSubmit}>
|
<form className="contact-form" onSubmit={handleSubmit}>
|
||||||
<div className="row g-3">
|
<div className="row g-3">
|
||||||
<div className="col-md-6">
|
<div className="col-sm-6">
|
||||||
<input type="text" name="name" placeholder="Full Name" value={formData.name} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
<input type="text" name="name" placeholder="Full Name" value={formData.name} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6">
|
<div className="col-sm-6">
|
||||||
<input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
<input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6">
|
<div className="col-sm-6">
|
||||||
<input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
<input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6">
|
<div className="col-sm-6">
|
||||||
<input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
<input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
{formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
|
{formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
|
||||||
</div>
|
</div>
|
||||||
@ -222,239 +214,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.status-wrapper {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.contact-popup-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(2, 6, 11, 0.85);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 15px;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
||||||
}
|
|
||||||
.contact-popup-overlay.active {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.contact-popup-content {
|
|
||||||
background: #fff;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1000px;
|
|
||||||
max-height: 95vh;
|
|
||||||
border-radius: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 40px 100px rgba(0,0,0,0.4);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.info-panel {
|
|
||||||
padding: 50px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.info-inner {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: #ffffff !important;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-size: 15px;
|
|
||||||
color: #ffffff !important;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
.contact-details {
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
.detail-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.text p {
|
|
||||||
margin: 0;
|
|
||||||
color: #ffffff !important;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.text h5 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #ffffff !important;
|
|
||||||
}
|
|
||||||
.social-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.social-icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #fff;
|
|
||||||
transition: 0.3s;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
.social-icon:hover {
|
|
||||||
background: #fff;
|
|
||||||
color: #3779b9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-panel {
|
|
||||||
padding: 40px 50px;
|
|
||||||
position: relative;
|
|
||||||
background: #fff;
|
|
||||||
overflow-y: auto;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: #3779b9 #f1f1f1;
|
|
||||||
}
|
|
||||||
.form-panel::-webkit-scrollbar { width: 6px; }
|
|
||||||
.form-panel::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
||||||
.form-panel::-webkit-scrollbar-thumb { background: #3779b9; border-radius: 10px; }
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
background: #f3f4f6;
|
|
||||||
border: none;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 18px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #1a1f2b;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.3s;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
.close-btn:hover {
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
.form-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #1a1f2b;
|
|
||||||
}
|
|
||||||
.form-input, .form-textarea, .form-select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
outline: none;
|
|
||||||
background: #f8fafc;
|
|
||||||
transition: 0.2s;
|
|
||||||
font-size: 13.5px;
|
|
||||||
}
|
|
||||||
.form-input:focus, .form-textarea:focus, .form-select:focus {
|
|
||||||
border-color: #3779b9;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 0 0 3px rgba(55,121,185,0.1);
|
|
||||||
}
|
|
||||||
.form-textarea { resize: none; }
|
|
||||||
.submit-btn {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
padding: 14px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-top: 15px;
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
.submit-btn:hover:not(:disabled) {
|
|
||||||
background: #1a1f2b;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile Optimizations */
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.info-panel { display: none; }
|
|
||||||
.form-panel { padding: 40px 30px; }
|
|
||||||
.contact-popup-content { max-width: 550px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575px) {
|
|
||||||
.contact-popup-overlay { padding: 10px; }
|
|
||||||
.contact-popup-content { border-radius: 15px; }
|
|
||||||
.form-panel { padding: 30px 20px; }
|
|
||||||
.form-title { font-size: 20px; margin-bottom: 15px; }
|
|
||||||
.form-input, .form-textarea, .form-select { font-size: 13px; padding: 8px 12px; }
|
|
||||||
|
|
||||||
/* Scale ReCAPTCHA for small screens */
|
|
||||||
.g-recaptcha {
|
|
||||||
transform: scale(0.85);
|
|
||||||
-webkit-transform: scale(0.85);
|
|
||||||
transform-origin: 0 0;
|
|
||||||
-webkit-transform-origin: 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
|
||||||
.form-panel { padding: 25px 15px; }
|
|
||||||
.g-recaptcha {
|
|
||||||
transform: scale(0.77);
|
|
||||||
-webkit-transform: scale(0.77);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 320px) {
|
|
||||||
.form-panel { padding: 15px 10px; }
|
|
||||||
.form-title { font-size: 16px; margin-bottom: 8px; }
|
|
||||||
.form-input, .form-textarea, .form-select { font-size: 12px; padding: 6px 10px; }
|
|
||||||
.submit-btn { padding: 10px; font-size: 12px; margin-top: 10px; }
|
|
||||||
.row.g-3 { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.5rem; }
|
|
||||||
.mt-3 { margin-top: 0.5rem !important; }
|
|
||||||
.g-recaptcha {
|
|
||||||
transform: scale(0.68);
|
|
||||||
-webkit-transform: scale(0.68);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -2,22 +2,10 @@ import React from 'react';
|
|||||||
|
|
||||||
const GoogleReviewsBranding = ({ centered = false }) => {
|
const GoogleReviewsBranding = ({ centered = false }) => {
|
||||||
return (
|
return (
|
||||||
<div className="google-reviews-branding" style={{
|
<div className="google-reviews-branding-global" style={{
|
||||||
marginTop: '15px',
|
alignItems: centered ? 'center' : 'flex-start'
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: centered ? 'center' : 'flex-start',
|
|
||||||
gap: '0px'
|
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div className="google-logo">
|
||||||
fontSize: '28px',
|
|
||||||
fontWeight: '700',
|
|
||||||
lineHeight: '1.2',
|
|
||||||
letterSpacing: '3px',
|
|
||||||
fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center'
|
|
||||||
}}>
|
|
||||||
<span style={{ color: '#4285F4' }}>G</span>
|
<span style={{ color: '#4285F4' }}>G</span>
|
||||||
<span style={{ color: '#EA4335' }}>o</span>
|
<span style={{ color: '#EA4335' }}>o</span>
|
||||||
<span style={{ color: '#FBBC04' }}>o</span>
|
<span style={{ color: '#FBBC04' }}>o</span>
|
||||||
@ -25,23 +13,9 @@ const GoogleReviewsBranding = ({ centered = false }) => {
|
|||||||
<span style={{ color: '#34A853' }}>l</span>
|
<span style={{ color: '#34A853' }}>l</span>
|
||||||
<span style={{ color: '#EA4335' }}>e</span>
|
<span style={{ color: '#EA4335' }}>e</span>
|
||||||
</div>
|
</div>
|
||||||
<div style={{
|
<div className="reviews-text-stars">
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '700',
|
|
||||||
lineHeight: '1.2',
|
|
||||||
fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '5px',
|
|
||||||
marginTop: '-2px'
|
|
||||||
}}>
|
|
||||||
<span style={{ color: '#fff' }}>Reviews</span>
|
<span style={{ color: '#fff' }}>Reviews</span>
|
||||||
<div style={{
|
<div className="stars-container">
|
||||||
display: 'flex',
|
|
||||||
gap: '1px',
|
|
||||||
fontSize: '13px',
|
|
||||||
lineHeight: '1'
|
|
||||||
}}>
|
|
||||||
<span style={{ color: '#FBBC04' }}>★</span>
|
<span style={{ color: '#FBBC04' }}>★</span>
|
||||||
<span style={{ color: '#FBBC04' }}>★</span>
|
<span style={{ color: '#FBBC04' }}>★</span>
|
||||||
<span style={{ color: '#FBBC04' }}>★</span>
|
<span style={{ color: '#FBBC04' }}>★</span>
|
||||||
|
|||||||
@ -1,222 +1,240 @@
|
|||||||
import React from "react";
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import ReCAPTCHA from "react-google-recaptcha";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
const ContactSection = () => {
|
const ContactSection = () => {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
service: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [formErrors, setFormErrors] = useState<any>({});
|
||||||
|
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
||||||
|
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCaptchaChange = (token: string | null) => {
|
||||||
|
setCaptchaToken(token);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const errors: any = {};
|
||||||
|
if (!formData.name.trim()) errors.name = "Name is required.";
|
||||||
|
if (!formData.phone.trim()) errors.phone = "Phone is required.";
|
||||||
|
if (!formData.email.trim()) errors.email = "Email is required.";
|
||||||
|
if (!formData.service.trim()) errors.service = "Please select a service.";
|
||||||
|
if (!formData.message.trim()) errors.message = "Message is required.";
|
||||||
|
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||||||
|
|
||||||
|
setFormErrors(errors);
|
||||||
|
if (Object.keys(errors).length > 0) return;
|
||||||
|
|
||||||
|
const emailData = {
|
||||||
|
...formData,
|
||||||
|
message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
|
||||||
|
to: "info@metatroncubesolutions.com",
|
||||||
|
senderName: "Metatroncube Contact Page",
|
||||||
|
recaptchaToken: captchaToken,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
});
|
||||||
|
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "success",
|
||||||
|
message: res?.data?.message || "Message sent successfully!",
|
||||||
|
});
|
||||||
|
|
||||||
|
setFormData({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
service: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
setCaptchaToken(null);
|
||||||
|
setFormErrors({});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ Error sending email:", error);
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "danger",
|
||||||
|
message: "Failed to send message. Please try again later.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (alert.show) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setAlert((prev) => ({ ...prev, show: false }));
|
||||||
|
}, 5000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [alert.show]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="contact-area section-space">
|
<>
|
||||||
<div className="container">
|
<section className="contact-area section-space">
|
||||||
<div className="row">
|
<div className="container">
|
||||||
<div className="col-lg-5 col-md-12">
|
<div className="row">
|
||||||
<div className="contact-info-wrapper">
|
<div className="col-lg-5 col-md-12">
|
||||||
<div className="sec-title-wrapper mb-40">
|
<div className="contact-info-wrapper">
|
||||||
<div className="sec-title">
|
<div className="sec-title-wrapper">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title">
|
||||||
<h6 className="sec-title__tagline">CONTACT WITH US</h6>
|
<div className="sec-title__shape"></div>
|
||||||
<h3 className="sec-title__title">Feel Free to Get in Touch</h3>
|
<h6 className="sec-title__tagline">CONTACT WITH US</h6>
|
||||||
|
<h3 className="sec-title__title">Feel Free to Get in Touch</h3>
|
||||||
|
</div>
|
||||||
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
</div>
|
</div>
|
||||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
<div className="contact-info-list">
|
||||||
</div>
|
<div className="contact-info-item d-flex align-items-center mb-30">
|
||||||
<div className="contact-info-list">
|
<div className="icon">
|
||||||
<div className="contact-info-item d-flex align-items-center mb-30">
|
<i className="fa-solid fa-phone-volume"></i>
|
||||||
<div className="icon">
|
</div>
|
||||||
<i className="fa-solid fa-phone-volume"></i>
|
<div className="content">
|
||||||
|
<span>Call Anytime</span>
|
||||||
|
<h6><a href="tel:+16476797651">+1-647-679-7651</a></h6>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="content">
|
<div className="contact-info-item d-flex align-items-center mb-30">
|
||||||
<span>Call Anytime</span>
|
<div className="icon">
|
||||||
<h6><a href="tel:+8898006802">+ 88 ( 9800 ) 6802</a></h6>
|
<i className="fa-solid fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<span>Send Email</span>
|
||||||
|
<h6><a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a></h6>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="contact-info-item d-flex align-items-center">
|
||||||
<div className="contact-info-item d-flex align-items-center mb-30">
|
<div className="icon">
|
||||||
<div className="icon">
|
<i className="fa-solid fa-location-dot"></i>
|
||||||
<i className="fa-solid fa-envelope"></i>
|
</div>
|
||||||
</div>
|
<div className="content">
|
||||||
<div className="content">
|
<span>Visit Now</span>
|
||||||
<span>Send Email</span>
|
<h6>Canada</h6>
|
||||||
<h6><a href="mailto:needhelp@company.com">needhelp@company.com</a></h6>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="contact-info-item d-flex align-items-center">
|
|
||||||
<div className="icon">
|
|
||||||
<i className="fa-solid fa-location-dot"></i>
|
|
||||||
</div>
|
|
||||||
<div className="content">
|
|
||||||
<span>Visit Now</span>
|
|
||||||
<h6>88 Broklyn Golden Street. New York, USA</h6>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="col-lg-7 col-md-12">
|
||||||
<div className="col-lg-7 col-md-12">
|
<div className="contact-form-wrapper bg-color-light p-relative">
|
||||||
<div className="contact-form-wrapper bg-color-light p-relative">
|
<form className="contact-form" onSubmit={handleSubmit}>
|
||||||
<form action="#" className="contact-form">
|
{alert.show && (
|
||||||
<div className="row">
|
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
|
||||||
<div className="col-md-6 mb-20">
|
{alert.message}
|
||||||
<input type="text" placeholder="Your Name" required />
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="form-one__group">
|
||||||
|
<div className="mb-20">
|
||||||
|
<label className="form-label">Full Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="Full Name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="mb-20">
|
||||||
|
<label className="form-label">Email Address</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="mb-20">
|
||||||
|
<label className="form-label">Phone Number</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
name="phone"
|
||||||
|
placeholder="Phone Number"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="mb-20">
|
||||||
|
<label className="form-label">Select Service</label>
|
||||||
|
<select
|
||||||
|
name="service"
|
||||||
|
value={formData.service}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '18px 25px',
|
||||||
|
border: '1px solid #e2e8f0',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: '12px',
|
||||||
|
outline: 'none',
|
||||||
|
fontSize: '15px',
|
||||||
|
color: '#1e293b'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="">Select Service</option>
|
||||||
|
<option value="Website Development">Website Development</option>
|
||||||
|
<option value="Mobile Application Development">Mobile Application Development</option>
|
||||||
|
<option value="Graphic Designing">Graphic Designing</option>
|
||||||
|
<option value="UI / UX Designing">UI / UX Designing</option>
|
||||||
|
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||||||
|
<option value="Digital Marketing">Digital Marketing</option>
|
||||||
|
</select>
|
||||||
|
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="form-one__control--full mb-20">
|
||||||
|
<label className="form-label">Write Message</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
placeholder="Write a Message"
|
||||||
|
rows={5}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
></textarea>
|
||||||
|
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-one__control--full mb-4">
|
||||||
|
<ReCAPTCHA
|
||||||
|
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
||||||
|
onChange={handleCaptchaChange}
|
||||||
|
/>
|
||||||
|
{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-one__control--full">
|
||||||
|
<button type="submit" className="primary-btn-1 w-100">
|
||||||
|
SEND A MESSAGE
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 mb-20">
|
</form>
|
||||||
<input type="email" placeholder="Email Address" required />
|
</div>
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-20">
|
|
||||||
<input type="tel" placeholder="Phone Number" required />
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-20">
|
|
||||||
<input type="text" placeholder="Subject" required />
|
|
||||||
</div>
|
|
||||||
<div className="col-md-12 mb-20">
|
|
||||||
<textarea placeholder="Write a Message" rows={7} required></textarea>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-12">
|
|
||||||
<button type="submit" className="primary-btn-1 w-100">
|
|
||||||
SEND A MESSAGE
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<style jsx>{`
|
</>
|
||||||
.contact-area {
|
|
||||||
padding: 80px 0;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.contact-area {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.section-subtitle {
|
|
||||||
color: #3779b9;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
.section-subtitle .dash {
|
|
||||||
width: 25px;
|
|
||||||
height: 2px;
|
|
||||||
background: #3779b9;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 52px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #0f172a;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
.contact-info-item .icon {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 25px;
|
|
||||||
color: #3779b9;
|
|
||||||
font-size: 28px;
|
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
|
|
||||||
}
|
|
||||||
.contact-info-item:hover .icon {
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
transform: scale(1.1) rotate(10deg);
|
|
||||||
box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
|
|
||||||
}
|
|
||||||
.contact-info-item .content span {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #64748b;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.contact-info-item .content h6 {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0;
|
|
||||||
color: #1e293b;
|
|
||||||
}
|
|
||||||
.contact-info-item .content h6 a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
.contact-info-item .content h6 a:hover {
|
|
||||||
color: #3779b9;
|
|
||||||
}
|
|
||||||
.contact-form-wrapper {
|
|
||||||
background: #1a1f2b;
|
|
||||||
padding: 60px;
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
|
|
||||||
}
|
|
||||||
.contact-form input,
|
|
||||||
.contact-form textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 18px 25px;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
outline: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #1e293b;
|
|
||||||
}
|
|
||||||
.contact-form textarea {
|
|
||||||
min-height: 180px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
.contact-form input:focus,
|
|
||||||
.contact-form textarea:focus {
|
|
||||||
border-color: #3779b9;
|
|
||||||
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
|
|
||||||
}
|
|
||||||
.primary-btn-1 {
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
padding: 20px 30px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
font-size: 15px;
|
|
||||||
margin-top: 10px;
|
|
||||||
box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
|
|
||||||
}
|
|
||||||
.primary-btn-1:hover {
|
|
||||||
background: #3779b9;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 15px 30px rgba(55, 121, 185, 0.5);
|
|
||||||
}
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.contact-form-wrapper {
|
|
||||||
margin-top: 60px;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 575px) {
|
|
||||||
.contact-form-wrapper {
|
|
||||||
padding: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -41,170 +41,6 @@ const ContactStatus: React.FC<ContactStatusProps> = ({ type, message, onClose })
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.status-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 400px;
|
|
||||||
padding: 20px;
|
|
||||||
animation: fadeIn 0.5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card {
|
|
||||||
background: #fff;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
padding: 60px 40px;
|
|
||||||
border-radius: 24px;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
|
|
||||||
animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubbles {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Success Bubbles */
|
|
||||||
.success .bubble { background: #87b031; }
|
|
||||||
/* Error Bubbles */
|
|
||||||
.error .bubble { background: #f1595d; }
|
|
||||||
|
|
||||||
.bubble-1 { width: 12px; height: 12px; top: 15%; left: 10%; animation: float 3s infinite ease-in-out; }
|
|
||||||
.bubble-2 { width: 8px; height: 8px; top: 25%; right: 15%; animation: float 4s infinite ease-in-out; }
|
|
||||||
.bubble-3 { width: 15px; height: 15px; bottom: 20%; left: 15%; animation: float 5s infinite ease-in-out; }
|
|
||||||
.bubble-4 { width: 10px; height: 10px; bottom: 15%; right: 10%; animation: float 3.5s infinite ease-in-out; }
|
|
||||||
.bubble-5 { width: 6px; height: 6px; top: 40%; left: 5%; animation: float 6s infinite ease-in-out; }
|
|
||||||
.bubble-6 { width: 14px; height: 14px; top: 60%; right: 5%; animation: float 4.5s infinite ease-in-out; }
|
|
||||||
.bubble-7 { width: 9px; height: 9px; top: 10%; right: 30%; animation: float 3.2s infinite ease-in-out; }
|
|
||||||
.bubble-8 { width: 11px; height: 11px; bottom: 10%; left: 40%; animation: float 4.8s infinite ease-in-out; }
|
|
||||||
.bubble-9 { width: 7px; height: 7px; top: 50%; left: 20%; animation: float 5.5s infinite ease-in-out; }
|
|
||||||
.bubble-10 { width: 13px; height: 13px; bottom: 40%; right: 25%; animation: float 3.8s infinite ease-in-out; }
|
|
||||||
.bubble-11 { width: 8px; height: 8px; top: 70%; left: 35%; animation: float 4.2s infinite ease-in-out; }
|
|
||||||
.bubble-12 { width: 10px; height: 10px; top: 5%; left: 50%; animation: float 3.6s infinite ease-in-out; }
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0) scale(1); }
|
|
||||||
50% { transform: translateY(-15px) scale(1.1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-wrapper {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
animation: bounce 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-circle {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 40px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success .icon-circle {
|
|
||||||
background: rgba(135, 176, 49, 0.15);
|
|
||||||
color: #87b031;
|
|
||||||
border: 4px solid #87b031;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error .icon-circle {
|
|
||||||
background: rgba(241, 89, 93, 0.15);
|
|
||||||
color: #f1595d;
|
|
||||||
border: 4px solid #f1595d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-title {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
animation: fadeIn 0.5s ease-out 0.5s both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success .status-title { color: #87b031; }
|
|
||||||
.error .status-title { color: #f1595d; }
|
|
||||||
|
|
||||||
.status-message {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #64748b;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
line-height: 1.6;
|
|
||||||
animation: fadeIn 0.5s ease-out 0.6s both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-btn {
|
|
||||||
padding: 16px 40px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 200px;
|
|
||||||
animation: fadeIn 0.5s ease-out 0.7s both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success .status-btn {
|
|
||||||
background: #87b031;
|
|
||||||
color: #fff;
|
|
||||||
box-shadow: 0 10px 20px rgba(135, 176, 49, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.success .status-btn:hover {
|
|
||||||
background: #769a2b;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 15px 30px rgba(135, 176, 49, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error .status-btn {
|
|
||||||
background: #f1595d;
|
|
||||||
color: #fff;
|
|
||||||
box-shadow: 0 10px 20px rgba(241, 89, 93, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error .status-btn:hover {
|
|
||||||
background: #e04a4e;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 15px 30px rgba(241, 89, 93, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideUp {
|
|
||||||
from { opacity: 0; transform: translateY(40px) scale(0.9); }
|
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
0% { transform: scale(0); }
|
|
||||||
60% { transform: scale(1.1); }
|
|
||||||
80% { transform: scale(0.95); }
|
|
||||||
100% { transform: scale(1); }
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -17,25 +17,6 @@ const MapSection = () => {
|
|||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<style jsx>{`
|
|
||||||
.map-area {
|
|
||||||
margin-bottom: -10px; /* Adjust as needed to align with footer */
|
|
||||||
}
|
|
||||||
.map-wrapper {
|
|
||||||
height: 500px;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
iframe {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
filter: grayscale(1); /* Optional: Adjust to match the design */
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -135,7 +135,7 @@ const FaqPageSection = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="section-desc-wrapper">
|
<div className="section-desc-wrapper">
|
||||||
<p className="section-desc" style={{ margin: 0, paddingLeft: '20px'}}>
|
<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.
|
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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -229,143 +229,6 @@ const FaqPageSection = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.faq-page-section {
|
|
||||||
background: #f8fbff;
|
|
||||||
padding: 80px 0;
|
|
||||||
}
|
|
||||||
.section-subtitle {
|
|
||||||
color: #3779b9;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.subtitle-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #1a1f2b;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.section-desc {
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.section-desc {
|
|
||||||
margin-top: 20px !important;
|
|
||||||
padding-left: 0 !important;
|
|
||||||
border-left: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.faq-item {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
|
|
||||||
}
|
|
||||||
.faq-item.active {
|
|
||||||
border-color: #3779b9;
|
|
||||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
|
|
||||||
}
|
|
||||||
.faq-question {
|
|
||||||
width: 100%;
|
|
||||||
padding: 18px 25px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.question-text {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #1a1f2b;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
.faq-item.active .question-text {
|
|
||||||
color: #3779b9;
|
|
||||||
}
|
|
||||||
.faq-icon {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
min-width: 28px;
|
|
||||||
background: #f1f5f9;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #64748b;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.faq-item.active .faq-icon {
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
.faq-answer {
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.faq-answer.show {
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
.answer-inner {
|
|
||||||
padding: 0 25px 20px;
|
|
||||||
color: #64748b;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.faq-center-image-wrap {
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
.main-faq-img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.col-lg-4 {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.faq-center-image-wrap {
|
|
||||||
order: -1;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cta-box h3 {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #1a1f2b;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.cta-box p {
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -6,7 +6,28 @@ const CounsellingSolutions: React.FC = () => {
|
|||||||
<section className="counselling-solutions">
|
<section className="counselling-solutions">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
|
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
|
<div className="counselling-solutions__image">
|
||||||
|
<img
|
||||||
|
src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-1.png"
|
||||||
|
alt="pelocis"
|
||||||
|
className="counselling-solutions__image__one"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-2.png"
|
||||||
|
alt="pelocis"
|
||||||
|
className="counselling-solutions__image__two"
|
||||||
|
/>
|
||||||
|
<div className="counselling-solutions__image__watch-btn">
|
||||||
|
<Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
|
||||||
|
<i className="icon-play"></i>
|
||||||
|
</Link>
|
||||||
|
<span>WATCH VIDEO</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-6">
|
||||||
<div className="counselling-solutions__title">
|
<div className="counselling-solutions__title">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
@ -34,30 +55,11 @@ const CounsellingSolutions: React.FC = () => {
|
|||||||
The right therapist can help you develop the skills to manage
|
The right therapist can help you develop the skills to manage
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<Link href="#" className="pelocis-btn">
|
<div className="about-btn-box mt-4">
|
||||||
<span>
|
<Link className="primary-btn-1 btn-hover" href="/about">
|
||||||
Discover More <i className="icon-right-arrow-white"></i>
|
Discover More | <i className="fa-solid fa-arrow-right"></i>
|
||||||
</span>
|
<span className="btn-hover-span"></span>
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div className="counselling-solutions__image">
|
|
||||||
<img
|
|
||||||
src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-1.png"
|
|
||||||
alt="pelocis"
|
|
||||||
className="counselling-solutions__image__one"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-2.png"
|
|
||||||
alt="pelocis"
|
|
||||||
className="counselling-solutions__image__two"
|
|
||||||
/>
|
|
||||||
<div className="counselling-solutions__image__watch-btn">
|
|
||||||
<Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
|
|
||||||
<i className="icon-play"></i>
|
|
||||||
</Link>
|
</Link>
|
||||||
<span>WATCH VIDEO</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,14 +1,92 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import ReCAPTCHA from "react-google-recaptcha";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
const HomeContactOne = () => {
|
const HomeContactOne = () => {
|
||||||
const [distance, setDistance] = useState(7000);
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
service: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
|
||||||
const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const [formErrors, setFormErrors] = useState<any>({});
|
||||||
setDistance(parseInt(e.target.value));
|
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
||||||
|
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleCaptchaChange = (token: string | null) => {
|
||||||
|
setCaptchaToken(token);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const errors: any = {};
|
||||||
|
if (!formData.name.trim()) errors.name = "Name is required.";
|
||||||
|
if (!formData.phone.trim()) errors.phone = "Phone is required.";
|
||||||
|
if (!formData.email.trim()) errors.email = "Email is required.";
|
||||||
|
if (!formData.service.trim()) errors.service = "Please select a service.";
|
||||||
|
if (!formData.message.trim()) errors.message = "Message is required.";
|
||||||
|
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||||||
|
|
||||||
|
setFormErrors(errors);
|
||||||
|
if (Object.keys(errors).length > 0) return;
|
||||||
|
|
||||||
|
const emailData = {
|
||||||
|
...formData,
|
||||||
|
message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
|
||||||
|
to: "info@metatroncubesolutions.com",
|
||||||
|
senderName: "Metatroncube Home Contact",
|
||||||
|
recaptchaToken: captchaToken,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
});
|
||||||
|
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "success",
|
||||||
|
message: res?.data?.message || "Message sent successfully!",
|
||||||
|
});
|
||||||
|
|
||||||
|
setFormData({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
email: "",
|
||||||
|
service: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
setCaptchaToken(null);
|
||||||
|
setFormErrors({});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ Error sending email:", error);
|
||||||
|
setAlert({
|
||||||
|
show: true,
|
||||||
|
type: "danger",
|
||||||
|
message: "Failed to send message. Please try again later.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (alert.show) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setAlert((prev) => ({ ...prev, show: false }));
|
||||||
|
}, 5000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [alert.show]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="home-contact-one">
|
<section className="home-contact-one">
|
||||||
<div
|
<div
|
||||||
@ -17,8 +95,8 @@ const HomeContactOne = () => {
|
|||||||
></div>
|
></div>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-xl-6">
|
<div className="col-xl-6 d-flex align-items-center justify-content-center">
|
||||||
<div className="home-contact__card ">
|
<div className="home-contact__card" style={{ margin: '0 auto' }}>
|
||||||
<div className="home-contact__card__content">
|
<div className="home-contact__card__content">
|
||||||
<ul className="home-contact__card__list">
|
<ul className="home-contact__card__list">
|
||||||
<li>
|
<li>
|
||||||
@ -26,7 +104,7 @@ const HomeContactOne = () => {
|
|||||||
<div className="pl-5">
|
<div className="pl-5">
|
||||||
<h3 className="home-contact__card__list__title">Get Contact Now</h3>
|
<h3 className="home-contact__card__list__title">Get Contact Now</h3>
|
||||||
<p className="home-contact__card__list__text">
|
<p className="home-contact__card__list__text">
|
||||||
<a href="tel:+11234751328">+11234 751 328</a>
|
<a href="tel:+16476797651">+1-647-679-7651</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="home-contact__card__list__shape"></div>
|
<div className="home-contact__card__list__shape"></div>
|
||||||
@ -36,7 +114,7 @@ const HomeContactOne = () => {
|
|||||||
<div className="pl-5">
|
<div className="pl-5">
|
||||||
<h3 className="home-contact__card__list__title">Sent Email</h3>
|
<h3 className="home-contact__card__list__title">Sent Email</h3>
|
||||||
<p className="home-contact__card__list__text">
|
<p className="home-contact__card__list__text">
|
||||||
<a href="mailto:pelocis@envato.com">pelocis@envato.com</a>
|
<a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="home-contact__card__list__shape"></div>
|
<div className="home-contact__card__list__shape"></div>
|
||||||
@ -45,7 +123,7 @@ const HomeContactOne = () => {
|
|||||||
<span className="fa-solid fa-location-dot"></span>
|
<span className="fa-solid fa-location-dot"></span>
|
||||||
<div className="pl-5">
|
<div className="pl-5">
|
||||||
<h3 className="home-contact__card__list__title">Location</h3>
|
<h3 className="home-contact__card__list__title">Location</h3>
|
||||||
<p className="home-contact__card__list__text">8/05 Mozilla Golden</p>
|
<p className="home-contact__card__list__text">Canada</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="home-contact__card__list__shape"></div>
|
<div className="home-contact__card__list__shape"></div>
|
||||||
</li>
|
</li>
|
||||||
@ -66,80 +144,126 @@ const HomeContactOne = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xl-6">
|
<div className="col-xl-6">
|
||||||
<form
|
<div className="home-contact-form-container-global">
|
||||||
className="appointment__form contact-form-validated form-one"
|
<form
|
||||||
action="#"
|
className="appointment__form contact-form-validated form-one"
|
||||||
noValidate
|
onSubmit={handleSubmit}
|
||||||
>
|
noValidate
|
||||||
<div className="appointment__form__top">
|
>
|
||||||
<div className="appointment__form__title">
|
<div className="appointment__form__top">
|
||||||
<div className="sec-title">
|
<div className="appointment__form__title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title">
|
||||||
<h6 className="sec-title__tagline">OUR CONTACT US</h6>
|
<div className="sec-title__shape"></div>
|
||||||
<h3 className="sec-title__title">If Your Problem Contact Us For <br /> Immediately Center</h3>
|
<h6 className="sec-title__tagline">OUR CONTACT US</h6>
|
||||||
|
<h3 className="sec-title__title">If Your Problem Contact Us For <br /> Immediately Center</h3>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-1.png"
|
||||||
|
alt="pelocis"
|
||||||
|
className="appointment__form__title__shape"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<img
|
|
||||||
src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-1.png"
|
|
||||||
alt="pelocis"
|
|
||||||
className="appointment__form__title__shape"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<p className="appointment__form__text">
|
|
||||||
Business tailored design, management & support services Business
|
{alert.show && (
|
||||||
business agency elit, sed do eiusmod tempor majority have
|
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
|
||||||
in some we form, by injected humour solution.
|
{alert.message}
|
||||||
</p>
|
</div>
|
||||||
</div>
|
)}
|
||||||
<div className="form-one__group row">
|
|
||||||
<div className="form-one__control col-md-6">
|
<div className="form-one__group">
|
||||||
<label htmlFor="name" className="appointment__form__lable">Name</label>
|
<div className="mb-20">
|
||||||
<input id="name" type="text" name="name" placeholder="Select Name *" />
|
<label htmlFor="name" className="form-label-custom-global">Full Name</label>
|
||||||
</div>
|
<input
|
||||||
<div className="form-one__control col-md-6">
|
id="name"
|
||||||
<label htmlFor="email" className="appointment__form__lable">Email</label>
|
type="text"
|
||||||
<input id="email" type="email" name="email" placeholder="Select Email *" />
|
name="name"
|
||||||
</div>
|
placeholder="Full Name"
|
||||||
<div className="form-one__control col-md-6">
|
value={formData.name}
|
||||||
<label htmlFor="phone" className="appointment__form__lable">Phone</label>
|
onChange={handleChange}
|
||||||
<input id="phone" type="text" name="phone" placeholder="Select a Phone" />
|
className="form-input-custom-global"
|
||||||
</div>
|
/>
|
||||||
<div className="form-one__control form-one__control--full col-md-6">
|
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
||||||
<label htmlFor="program-select" className="appointment__form__lable">Program</label>
|
</div>
|
||||||
<div className="form-one__control__select">
|
<div className="mb-20">
|
||||||
|
<label htmlFor="email" className="form-label-custom-global">Email Address</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-input-custom-global"
|
||||||
|
/>
|
||||||
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="mb-20">
|
||||||
|
<label htmlFor="phone" className="form-label-custom-global">Phone Number</label>
|
||||||
|
<input
|
||||||
|
id="phone"
|
||||||
|
type="text"
|
||||||
|
name="phone"
|
||||||
|
placeholder="Phone Number"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-input-custom-global"
|
||||||
|
/>
|
||||||
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="mb-20">
|
||||||
|
<label htmlFor="service" className="form-label-custom-global">Select Service</label>
|
||||||
<select
|
<select
|
||||||
className="form-select selectpicker"
|
name="service"
|
||||||
id="program-select"
|
id="service"
|
||||||
defaultValue="Select program"
|
value={formData.service}
|
||||||
style={{
|
onChange={handleChange}
|
||||||
width: '100%',
|
className="form-select-custom-styled-global"
|
||||||
padding: '12px 20px',
|
|
||||||
borderRadius: '5px',
|
|
||||||
border: '1px solid #ddd',
|
|
||||||
fontSize: '14px'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<option value="Select program">Select a Program</option>
|
<option value="">Select Service</option>
|
||||||
<option value="Web Development">Web Development</option>
|
<option value="Website Development">Website Development</option>
|
||||||
<option value="Mobile App Development">Mobile App Development</option>
|
<option value="Mobile Application Development">Mobile Application Development</option>
|
||||||
<option value="UI/UX Design">UI/UX Design</option>
|
<option value="Graphic Designing">Graphic Designing</option>
|
||||||
|
<option value="UI / UX Designing">UI / UX Designing</option>
|
||||||
|
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||||||
<option value="Digital Marketing">Digital Marketing</option>
|
<option value="Digital Marketing">Digital Marketing</option>
|
||||||
</select>
|
</select>
|
||||||
|
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="form-one__control--full mb-20">
|
||||||
|
<label htmlFor="message" className="form-label-custom-global">Write Message</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
name="message"
|
||||||
|
placeholder="Write Message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
rows={4}
|
||||||
|
className="form-textarea-custom-global"
|
||||||
|
></textarea>
|
||||||
|
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-one__control--full mb-4">
|
||||||
|
<ReCAPTCHA
|
||||||
|
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
||||||
|
onChange={handleCaptchaChange}
|
||||||
|
/>
|
||||||
|
{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-one__control--full">
|
||||||
|
<button type="submit" className="submit-btn-custom-global">
|
||||||
|
SEND A MESSAGE
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-one__control mt-30">
|
</form>
|
||||||
<button type="submit" className="pelocis-btn">
|
</div>
|
||||||
<span>
|
|
||||||
SEND Request
|
|
||||||
<i className="fa-solid fa-arrow-right-long" style={{ marginLeft: '8px' }}></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section >
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -5,45 +5,45 @@ import React, { useState, useEffect } from "react";
|
|||||||
const services = [
|
const services = [
|
||||||
{
|
{
|
||||||
id: 0,
|
id: 0,
|
||||||
title: "Excellent infection prevention",
|
title: "Website Development",
|
||||||
text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt",
|
text: "Custom website development tailored to your business needs.",
|
||||||
icon: "/assets/imgs/icon/icon-6.png",
|
icon: "/assets/imgs/icon/icon-6.png",
|
||||||
link: "service-details.html",
|
link: "/services-digital-solutions/web-development",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "Health patients comprehensive",
|
title: "Mobile Application Development",
|
||||||
text: "From its medieval origins to the digital era , learn everything there is to know",
|
text: "High-performance mobile apps for iOS and Android.",
|
||||||
icon: "/assets/imgs/icon/icon-2.png",
|
icon: "/assets/imgs/icon/icon-2.png",
|
||||||
link: "service-details.html",
|
link: "/services-digital-solutions/mobile-app-development",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "Pediatric Hematology Oncology",
|
title: "Graphic Designing",
|
||||||
text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the",
|
text: "Creative graphic design solutions for your brand.",
|
||||||
icon: "/assets/imgs/icon/icon-3.png",
|
icon: "/assets/imgs/icon/icon-3.png",
|
||||||
link: "service-details.html",
|
link: "/services-digital-solutions/graphic-designing",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: "Care Pediatric & Medicine",
|
title: "UI / UX Designing",
|
||||||
text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus",
|
text: "User-centric design experiences that engage and convert.",
|
||||||
icon: "/assets/imgs/icon/icon-4.png",
|
icon: "/assets/imgs/icon/icon-4.png",
|
||||||
link: "service-details.html",
|
link: "/services-digital-solutions/ui-ux-designing",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: "Labor & Delivery: The Birthplace",
|
title: "SEO & Content Writing",
|
||||||
text: "Some claim lorem ipsum threatens to promote design over content, while others defend",
|
text: "Optimization and content that drives organic growth.",
|
||||||
icon: "/assets/imgs/icon/icon-5.png",
|
icon: "/assets/imgs/icon/icon-5.png",
|
||||||
link: "service-details.html",
|
link: "/services-digital-solutions/seo-content-writing",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
title: "Urogynecology & Pelvic Health",
|
title: "Digital Marketing",
|
||||||
text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or",
|
text: "Strategic digital marketing to grow your online presence.",
|
||||||
icon: "/assets/imgs/icon/icon-6.png",
|
icon: "/assets/imgs/icon/icon-6.png",
|
||||||
link: "service-details.html",
|
link: "/services-digital-solutions/digital-marketing",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -91,7 +91,7 @@ const MedicalServices = () => {
|
|||||||
|
|
||||||
<div className="container p-relative" style={{ zIndex: 5 }}>
|
<div className="container p-relative" style={{ zIndex: 5 }}>
|
||||||
<div
|
<div
|
||||||
className="sec-title-wrapper text-center wow fadeInUp animated mb-50"
|
className="sec-title-wrapper text-center wow fadeInUp animated"
|
||||||
data-wow-delay="0.3s"
|
data-wow-delay="0.3s"
|
||||||
>
|
>
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
|
|||||||
@ -210,6 +210,13 @@ export default function PortfolioSection() {
|
|||||||
return (
|
return (
|
||||||
<section className="pf-section">
|
<section className="pf-section">
|
||||||
<div className="pf-container">
|
<div className="pf-container">
|
||||||
|
<div className="sec-title-wrapper text-center wow fadeInUp animated" data-wow-delay="0.3s">
|
||||||
|
<div className="sec-title">
|
||||||
|
<div className="sec-title__shape"></div>
|
||||||
|
<h6 className="sec-title__tagline">PORTFOLIO</h6>
|
||||||
|
<h3 className="sec-title__title">Our Latest <span className="inner-text">Work </span></h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* ── Filter Tabs ── */}
|
{/* ── Filter Tabs ── */}
|
||||||
<div className="pf-tabs">
|
<div className="pf-tabs">
|
||||||
|
|||||||
@ -65,7 +65,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xl-6">
|
<div className="col-xl-6">
|
||||||
<div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-367.812px' }}>
|
<div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
|
||||||
<div className="why-choose-two__shape-one">
|
<div className="why-choose-two__shape-one">
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -48,59 +48,6 @@ const BlogSection = ({ hideHeader = false }: { hideHeader?: boolean }) => (
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.relative { position: relative; }
|
|
||||||
.blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
|
|
||||||
.blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
|
|
||||||
.blog-category-tag {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0px;
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
z-index: 2;
|
|
||||||
border-radius: 12px 0 0 0;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.blog-style-one {
|
|
||||||
border-left: 1px solid #e2e8f0;
|
|
||||||
border-right: 1px solid #e2e8f0;
|
|
||||||
border-bottom: 1px solid #e2e8f0;
|
|
||||||
border-radius: 20px 20px 15px 15px;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.blog-style-one:hover {
|
|
||||||
border-color: #3779b9;
|
|
||||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
|
|
||||||
}
|
|
||||||
.blog-content {
|
|
||||||
padding: 30px 25px;
|
|
||||||
}
|
|
||||||
.blog-title {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: 1.5;
|
|
||||||
height: 3em;
|
|
||||||
}
|
|
||||||
.post-meta span {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #64748b;
|
|
||||||
}
|
|
||||||
.post-meta i {
|
|
||||||
color: #3779b9;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -9,7 +9,6 @@ const BrandSection = () => {
|
|||||||
tagline="OUR PARTNERS"
|
tagline="OUR PARTNERS"
|
||||||
title="Trusted by <span class='inner-text'>Leaders</span> Worldwide"
|
title="Trusted by <span class='inner-text'>Leaders</span> Worldwide"
|
||||||
centered={true}
|
centered={true}
|
||||||
className="mb-50"
|
|
||||||
/>
|
/>
|
||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="swiper brand-active">
|
<div className="swiper brand-active">
|
||||||
|
|||||||
@ -7,7 +7,7 @@ const ProjectsSection = () => {
|
|||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-xxl-6">
|
<div className="col-xxl-6">
|
||||||
<div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<span className="section-sub-title">PROJECTS</span>
|
<span className="section-sub-title">PROJECTS</span>
|
||||||
<h3 className="section-title mt-10">Our Latest Projects</h3>
|
<h3 className="section-title mt-10">Our Latest Projects</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ const ServiceSliderSection = () => {
|
|||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-xxl-6">
|
<div className="col-xxl-6">
|
||||||
<div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<span className="section-sub-title">SERVICES WE’RE OFFERING</span>
|
<span className="section-sub-title">SERVICES WE’RE OFFERING</span>
|
||||||
<h3 className="section-title mt-10">Exclusive IT Services</h3>
|
<h3 className="section-title mt-10">Exclusive IT Services</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -27,7 +27,7 @@ const ServiceThreeSlider = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xxl-6 col-xl-6">
|
<div className="col-xxl-6 col-xl-6">
|
||||||
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30 mb-50">
|
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
||||||
<div className="common-slider-navigation">
|
<div className="common-slider-navigation">
|
||||||
<button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
|
<button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
|
||||||
<button className="service-1-button-next slider-nav-btn"><i className="fa-solid fa-chevron-right"></i></button>
|
<button className="service-1-button-next slider-nav-btn"><i className="fa-solid fa-chevron-right"></i></button>
|
||||||
@ -46,7 +46,7 @@ const ServiceThreeSlider = () => {
|
|||||||
<span className={service.icon}></span>
|
<span className={service.icon}></span>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="service-three__item__title">
|
<h3 className="service-three__item__title">
|
||||||
<Link href={`/services/${service.slug}`}>{service.title}</Link>
|
<Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="service-three__item__text text-white">{service.description}</p>
|
<p className="service-three__item__text text-white">{service.description}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,7 +5,7 @@ const TeamSection = () => (
|
|||||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-13.png)" }}></div>
|
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-13.png)" }}></div>
|
||||||
<div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-14.png)" }}></div>
|
<div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-14.png)" }}></div>
|
||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="title-box text-center mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
<div className="title-box text-center wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<span className="section-sub-title">OUR team</span>
|
<span className="section-sub-title">OUR team</span>
|
||||||
<h3 className="section-title mt-10">Our Leadership Team</h3>
|
<h3 className="section-title mt-10">Our Leadership Team</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,57 +1,156 @@
|
|||||||
import React from "react";
|
"use client";
|
||||||
import { testimonialSlides } from "@/utils/data";
|
import React, { useState, useEffect } from "react";
|
||||||
|
import Slider from "react-slick";
|
||||||
|
import GoogleReviewsBranding from "@/components/common/GoogleReviewsBranding";
|
||||||
|
|
||||||
const TestimonialsSection = () => (
|
const TestimonialsSection = () => {
|
||||||
<section className="testimonials-two-section fix section-space-bottom">
|
const [reviews, setReviews] = useState<any[]>([]);
|
||||||
<div className="container-fluid g-0">
|
const [loading, setLoading] = useState(true);
|
||||||
<div className="row g-0">
|
|
||||||
<div className="col-xxl-4 col-xl-4 col-lg-12">
|
useEffect(() => {
|
||||||
<div className="testimonials-video-area p-relative">
|
async function loadReviews() {
|
||||||
<figure className="image w-img"><img src="/assets/imgs/resources/video-1.jpg" alt="" /></figure>
|
try {
|
||||||
<div className="play-btn">
|
const res = await fetch("/api/reviews");
|
||||||
<div className="video_player_btn">
|
const data = await res.json();
|
||||||
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
const cleaned = (data.reviews || []).filter((r: any) =>
|
||||||
|
(r.snippet || r.text || r.review_text || r.description || r.body || r.content)
|
||||||
|
);
|
||||||
|
setReviews(cleaned);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch reviews", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loadReviews();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const displayedReviews = reviews.length > 0 && reviews.length < 4
|
||||||
|
? [...reviews, ...reviews, ...reviews]
|
||||||
|
: reviews;
|
||||||
|
|
||||||
|
const settings = {
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: displayedReviews.length > 2,
|
||||||
|
speed: 600,
|
||||||
|
slidesToShow: 2,
|
||||||
|
slidesToScroll: 1,
|
||||||
|
autoplay: true,
|
||||||
|
autoplaySpeed: 5000,
|
||||||
|
dotsClass: "testimonial-dot-inner",
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 1200,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 2,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 991,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
function getReviewText(r: any) {
|
||||||
|
return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getProfileImage(r: any, index: number) {
|
||||||
|
const url = r.user?.thumbnail || r.profile_photo_url || r.author_profile_photo_url || r.user?.profile_photo_url || r.thumbnail || r.profile_picture || r.avatar || r.author_image;
|
||||||
|
if (!url) return `/assets/imgs/resources/testimonials-${(index % 2) + 1}.png`;
|
||||||
|
if (typeof url === 'string' && url.startsWith("http")) return url;
|
||||||
|
return `https://lh3.googleusercontent.com/${url}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="testimonials-two-section fix section-space-bottom">
|
||||||
|
<div className="container-fluid g-0">
|
||||||
|
<div className="row g-0">
|
||||||
|
<div className="col-xxl-4 col-xl-4 col-lg-12">
|
||||||
|
<div className="testimonials-video-area p-relative">
|
||||||
|
<figure className="image w-img"><img src="/assets/imgs/resources/video-1.jpg" alt="" /></figure>
|
||||||
|
<div className="play-btn">
|
||||||
|
<div className="video_player_btn">
|
||||||
|
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="col-xxl-8 col-xl-8 col-lg-12">
|
||||||
<div className="col-xxl-8 col-xl-8 col-lg-12">
|
<div className="testimonials-two-area section-space-medium p-relative parallax-bg" style={{
|
||||||
<div className="testimonials-two-area section-space-medium bg-color-1 p-relative">
|
backgroundImage: 'url(/assets/img/home/bg/bg-4.webp)',
|
||||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)" }}></div>
|
backgroundSize: 'cover',
|
||||||
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
backgroundPosition: 'center'
|
||||||
<div className="sec-title">
|
}}>
|
||||||
<div className="sec-title__shape"></div>
|
<div className="section-overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(26, 31, 43, 0.82)', zIndex: 0 }}></div>
|
||||||
<h6 className="sec-title__tagline">TESTIMONIALS</h6>
|
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)", zIndex: 1 }}></div>
|
||||||
<h3 className="sec-title__title text-white">Our Client Feedback</h3>
|
|
||||||
</div>
|
<div className="sec-title-wrapper" style={{ position: 'relative', zIndex: 2 }}>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
<div className="sec-title">
|
||||||
</div>
|
<div className="sec-title__shape"></div>
|
||||||
<div className="swiper testimonial-active-2">
|
<h6 className="sec-title__tagline">TESTIMONIALS</h6>
|
||||||
<div className="swiper-wrapper">
|
<h3 className="sec-title__title text-white">Our Client Feedback</h3>
|
||||||
{[1, 2, 1].map((num, i) => (
|
<div className="space20"></div>
|
||||||
<div key={i} className="swiper-slide">
|
<div className="d-flex justify-content-start">
|
||||||
<div className="testimonials-two-box">
|
<GoogleReviewsBranding />
|
||||||
<div className="author-image"><img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" /></div>
|
|
||||||
<div className="icon-1"><i className="fa-solid fa-quote-right"></i></div>
|
|
||||||
<h4>Kathryn Murphy</h4>
|
|
||||||
<span>Engineering</span>
|
|
||||||
<ul className="ratings">
|
|
||||||
{[1, 2, 3, 4, 5].map((r) => <li key={r}><i className="fa-solid fa-star"></i></li>)}
|
|
||||||
</ul>
|
|
||||||
<p>“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="testi-slider-wrapper" style={{ position: 'relative', zIndex: 2, marginTop: '70px' }}>
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-5">
|
||||||
|
<p className="text-white">Loading reviews from Google...</p>
|
||||||
|
</div>
|
||||||
|
) : displayedReviews.length > 0 ? (
|
||||||
|
<Slider {...settings}>
|
||||||
|
{displayedReviews.map((slide, index) => {
|
||||||
|
const profileImg = getProfileImage(slide, index);
|
||||||
|
const name = slide.user?.name || slide.author_name || "Valued Client";
|
||||||
|
const rating = slide.rating || 5;
|
||||||
|
return (
|
||||||
|
<div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
|
||||||
|
<div className="testimonials-two-box-solid">
|
||||||
|
<div className="author-image-solid">
|
||||||
|
<img src={profileImg} alt={name} />
|
||||||
|
</div>
|
||||||
|
<div className="icon-quote-testi">
|
||||||
|
<i className="fa-solid fa-quote-right"></i>
|
||||||
|
</div>
|
||||||
|
<div className="content-solid">
|
||||||
|
<h4>{name}</h4>
|
||||||
|
<span className="tag">Verified Google Review</span>
|
||||||
|
<ul className="ratings-solid">
|
||||||
|
{[...Array(rating)].map((_, i) => (
|
||||||
|
<li key={i}><i className="fa-solid fa-star"></i></li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
"{getReviewText(slide)}"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Slider>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-5">
|
||||||
|
<p className="text-white">No reviews found.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="testimonial-dot-inner text-center mt-60">
|
|
||||||
<div className="testimonial-swiper-dot"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
);
|
||||||
);
|
};
|
||||||
|
|
||||||
export default TestimonialsSection;
|
export default TestimonialsSection;
|
||||||
|
|||||||
@ -64,48 +64,6 @@ const Blog2Section = () => (
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.relative { position: relative; }
|
|
||||||
.blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
|
|
||||||
.blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
|
|
||||||
.blog-category-tag {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0px;
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
z-index: 2;
|
|
||||||
border-radius: 12px 0 0 0;
|
|
||||||
}
|
|
||||||
.blog-style-two {
|
|
||||||
border-left: 1px solid #e2e8f0;
|
|
||||||
border-right: 1px solid #e2e8f0;
|
|
||||||
border-bottom: 1px solid #e2e8f0;
|
|
||||||
border-radius: 20px 20px 15px 15px;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.blog-style-two:hover {
|
|
||||||
border-color: #3779b9;
|
|
||||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
|
|
||||||
}
|
|
||||||
.blog-content-area {
|
|
||||||
padding: 30px 25px;
|
|
||||||
}
|
|
||||||
.blog-title {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: 1.5;
|
|
||||||
height: 3em;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { blogs } from "@/utils/data";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
const BlogSection = () => (
|
const BlogSection = () => (
|
||||||
<section className="blog-section-one section-space">
|
<section className="blog-section-three section-space">
|
||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="blog-title-box mb-40">
|
<div className="blog-title-box mb-40">
|
||||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||||
@ -47,48 +47,6 @@ const BlogSection = () => (
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.relative { position: relative; }
|
|
||||||
.blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
|
|
||||||
.blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
|
|
||||||
.blog-category-tag {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0px;
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 25px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
z-index: 2;
|
|
||||||
border-radius: 12px 0 0 0;
|
|
||||||
}
|
|
||||||
.blog-style-one {
|
|
||||||
border-left: 1px solid #e2e8f0;
|
|
||||||
border-right: 1px solid #e2e8f0;
|
|
||||||
border-bottom: 1px solid #e2e8f0;
|
|
||||||
border-radius: 20px 20px 15px 15px;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.blog-style-one:hover {
|
|
||||||
border-color: #3779b9;
|
|
||||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
|
|
||||||
}
|
|
||||||
.blog-content {
|
|
||||||
padding: 30px 25px;
|
|
||||||
}
|
|
||||||
.blog-title {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: 1.5;
|
|
||||||
height: 3em;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@ const ProjectsSection = () => {
|
|||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-xxl-6">
|
<div className="col-xxl-6">
|
||||||
<div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<span className="section-sub-title no-border">PROJECTS</span>
|
<span className="section-sub-title no-border">PROJECTS</span>
|
||||||
<h3 className="section-title mt-10">Explore Our Recent Projects</h3>
|
<h3 className="section-title mt-10">Explore Our Recent Projects</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -36,7 +36,7 @@ const ServiceSection = () => {
|
|||||||
<div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-47.png)" }}></div>
|
<div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-47.png)" }}></div>
|
||||||
<div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-48.png)" }}></div>
|
<div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-48.png)" }}></div>
|
||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="service-3-title-box mb-50">
|
<div className="service-3-title-box">
|
||||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<span className="section-sub-title no-border">SERVICES WE’RE OFFERING</span>
|
<span className="section-sub-title no-border">SERVICES WE’RE OFFERING</span>
|
||||||
<h3 className="section-title mt-10 text-white">Exclusive IT Services</h3>
|
<h3 className="section-title mt-10 text-white">Exclusive IT Services</h3>
|
||||||
|
|||||||
@ -3,24 +3,24 @@ import Link from "next/link";
|
|||||||
|
|
||||||
const NavMenu = () => (
|
const NavMenu = () => (
|
||||||
<ul>
|
<ul>
|
||||||
<li><Link href="/">Home</Link></li>
|
<li><Link href="/">HOME</Link></li>
|
||||||
<li><Link href="/about-us">About</Link></li>
|
|
||||||
<li className="has-dropdown">
|
<li className="has-dropdown">
|
||||||
<Link href="/services">Services</Link>
|
<Link href="/services-digital-solutions">SERVICE <i className="fa-solid fa-angle-down ms-1"></i></Link>
|
||||||
<ul className="submenu">
|
<ul className="submenu">
|
||||||
<li><Link href="/">Website Development</Link></li>
|
<li><Link href="/services-digital-solutions/web-development">WEBSITE DEVELOPMENT</Link></li>
|
||||||
<li><Link href="/">Mobile Application Development</Link></li>
|
<li><Link href="/services-digital-solutions/mobile-app-development">MOBILE APPLICATION DEVELOPMENT</Link></li>
|
||||||
<li><Link href="/">Graphic Designing</Link></li>
|
<li><Link href="/services-digital-solutions/graphic-designing">GRAPHIC DESIGNING</Link></li>
|
||||||
<li><Link href="/">UI / UX Designing</Link></li>
|
<li><Link href="/services-digital-solutions/ui-ux-designing">UI / UX DESIGNING</Link></li>
|
||||||
<li><Link href="/">SEO & Content Writing</Link></li>
|
<li><Link href="/services-digital-solutions/seo-content-writing">SEO & CONTENT WRITING</Link></li>
|
||||||
<li><Link href="/">Digital Marketing</Link></li>
|
<li><Link href="/services-digital-solutions/digital-marketing">DIGITAL MARKETING</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><Link href="/careers">Careers</Link></li>
|
<li><Link href="/portfolio">PORTFOLIO</Link></li>
|
||||||
<li><Link href="/portfolio">Portfolio</Link></li>
|
<li><Link href="/about-us">ABOUT</Link></li>
|
||||||
|
<li><Link href="/careers">CAREERS</Link></li>
|
||||||
|
<li><Link href="/blog">BLOG</Link></li>
|
||||||
|
<li><Link href="/contact">CONTACT</Link></li>
|
||||||
<li><Link href="/faq">FAQ</Link></li>
|
<li><Link href="/faq">FAQ</Link></li>
|
||||||
<li><Link href="/blog">Blog</Link></li>
|
|
||||||
<li><Link href="/contact">Contact</Link></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
|
|||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
import ReCAPTCHA from "react-google-recaptcha";
|
import ReCAPTCHA from "react-google-recaptcha";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import ContactStatus from '@/components/contact/ContactStatus';
|
||||||
|
|
||||||
interface ContactPopupProps {
|
interface ContactPopupProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@ -10,6 +11,7 @@ interface ContactPopupProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||||
|
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
name: "",
|
name: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
@ -17,12 +19,11 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
businessName: "",
|
businessName: "",
|
||||||
projectRequirement: "",
|
projectRequirement: "",
|
||||||
budgetRange: "",
|
budgetRange: "",
|
||||||
|
appType: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const [formErrors, setFormErrors] = useState<any>({});
|
const [formErrors, setFormErrors] = useState<any>({});
|
||||||
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
||||||
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [mounted, setMounted] = useState(false);
|
const [mounted, setMounted] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -57,32 +58,27 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
|
if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
|
||||||
if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
|
if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
|
||||||
if (!formData.budgetRange) errors.budgetRange = "Please select a budget range.";
|
if (!formData.budgetRange) errors.budgetRange = "Please select a budget range.";
|
||||||
// if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||||||
|
|
||||||
setFormErrors(errors);
|
setFormErrors(errors);
|
||||||
if (Object.keys(errors).length > 0) return;
|
if (Object.keys(errors).length > 0) return;
|
||||||
|
|
||||||
setIsSubmitting(true);
|
setStatus('submitting');
|
||||||
|
|
||||||
const emailData = {
|
const emailData = {
|
||||||
...formData,
|
...formData,
|
||||||
message: `Business: ${formData.businessName}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
|
message: `Business: ${formData.businessName}<br />App Type: ${formData.appType}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
|
||||||
to: "selvipalanikumarn@gmail.com",
|
to: "info@metatroncubesolutions.com",
|
||||||
senderName: "Metatroncube Contact Popup",
|
senderName: "Metatroncube Contact Popup",
|
||||||
recaptchaToken: captchaToken,
|
recaptchaToken: captchaToken,
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
});
|
});
|
||||||
|
|
||||||
setAlert({
|
setStatus('success');
|
||||||
show: true,
|
|
||||||
type: "success",
|
|
||||||
message: res?.data?.message || "Message sent successfully!",
|
|
||||||
});
|
|
||||||
|
|
||||||
setFormData({
|
setFormData({
|
||||||
name: "",
|
name: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
@ -90,31 +86,24 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
businessName: "",
|
businessName: "",
|
||||||
projectRequirement: "",
|
projectRequirement: "",
|
||||||
budgetRange: "",
|
budgetRange: "",
|
||||||
|
appType: "",
|
||||||
});
|
});
|
||||||
setCaptchaToken(null);
|
setCaptchaToken(null);
|
||||||
setFormErrors({});
|
setFormErrors({});
|
||||||
// Close after delay
|
|
||||||
setTimeout(onClose, 2000);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("❌ Error sending email:", error);
|
console.error("❌ Error sending email:", error);
|
||||||
setAlert({
|
setStatus('error');
|
||||||
show: true,
|
|
||||||
type: "danger",
|
|
||||||
message: "Failed to send message. Please try again later.",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
const handleCloseStatus = () => {
|
||||||
if (alert.show) {
|
if (status === 'success') {
|
||||||
const timer = setTimeout(() => {
|
onClose();
|
||||||
setAlert((prev) => ({ ...prev, show: false }));
|
setStatus('idle');
|
||||||
}, 5000);
|
} else {
|
||||||
return () => clearTimeout(timer);
|
setStatus('idle');
|
||||||
}
|
}
|
||||||
}, [alert.show]);
|
};
|
||||||
|
|
||||||
if (!mounted || !isOpen) return null;
|
if (!mounted || !isOpen) return null;
|
||||||
|
|
||||||
@ -126,22 +115,22 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
<div className="col-lg-5 info-panel" style={{ color: '#fff', position: 'relative' }}>
|
<div className="col-lg-5 info-panel" style={{ color: '#fff', position: 'relative' }}>
|
||||||
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)', zIndex: 0 }}></div>
|
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)', zIndex: 0 }}></div>
|
||||||
<div className="info-inner" style={{ position: 'relative', zIndex: 1 }}>
|
<div className="info-inner" style={{ position: 'relative', zIndex: 1 }}>
|
||||||
<h2 className="title text-white">Let’s Discuss Your App Idea</h2>
|
<h2 className="title">Let's Discuss Your App Idea</h2>
|
||||||
<p className="desc text-white">Fill out the form and our team will contact you within 24 hours.</p>
|
<p className="desc">Fill out the form and our team will contact you within 24 hours.</p>
|
||||||
|
|
||||||
<div className="contact-details">
|
<div className="contact-details">
|
||||||
<div className="detail-item">
|
<div className="detail-item">
|
||||||
<div className="icon"><i className="fa-solid fa-envelope"></i></div>
|
<div className="icon"><i className="fa-solid fa-envelope"></i></div>
|
||||||
<div className="text">
|
<div className="text">
|
||||||
<p className='text-white'>Email Us</p>
|
<p>Email Us</p>
|
||||||
<h5 className='text-white'>info@metatroncubesolutions.com</h5>
|
<h5>info@metatroncubesolutions.com</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="detail-item">
|
<div className="detail-item">
|
||||||
<div className="icon"><i className="fa-solid fa-phone"></i></div>
|
<div className="icon"><i className="fa-solid fa-phone"></i></div>
|
||||||
<div className="text">
|
<div className="text">
|
||||||
<p className='text-white'>Call Us Free</p>
|
<p>Call Us Free</p>
|
||||||
<h5 className='text-white'><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
|
<h5><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -156,83 +145,84 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Side: Form */}
|
{/* Right Side: Form or Status */}
|
||||||
<div className="col-lg-7 form-panel">
|
<div className="col-lg-7 form-panel">
|
||||||
<button onClick={onClose} className="close-btn">
|
<button onClick={onClose} className="close-btn">
|
||||||
<i className="fa-solid fa-xmark"></i>
|
<i className="fa-solid fa-xmark"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<h3 className="form-title">Start Your Project</h3>
|
{status === 'idle' || status === 'submitting' ? (
|
||||||
|
<>
|
||||||
|
<h3 className="form-title">Start Your Project</h3>
|
||||||
|
<form className="contact-form" onSubmit={handleSubmit}>
|
||||||
|
<div className="row g-3">
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<input type="text" name="name" placeholder="Full Name" value={formData.name} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
|
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
|
||||||
|
{formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<select name="appType" value={formData.appType} onChange={handleChange} className="form-input form-select" disabled={status === 'submitting'}>
|
||||||
|
<option value="">App Type</option>
|
||||||
|
<option value="Android">Android</option>
|
||||||
|
<option value="iOS">iOS</option>
|
||||||
|
<option value="Both">Both</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select" disabled={status === 'submitting'}>
|
||||||
|
<option value="">Select Budget Range</option>
|
||||||
|
<option value="$1,000 - $5,000">$1,000 - $5,000</option>
|
||||||
|
<option value="$5,000 - $10,000">$5,000 - $10,000</option>
|
||||||
|
<option value="$10,000 - $25,000">$10,000 - $25,000</option>
|
||||||
|
<option value="$25,000+">$25,000+</option>
|
||||||
|
</select>
|
||||||
|
{formErrors.budgetRange && <small className="text-danger">{formErrors.budgetRange}</small>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{alert.show && (
|
<textarea
|
||||||
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`}>
|
name="projectRequirement"
|
||||||
{alert.message}
|
placeholder="Your Project Requirements"
|
||||||
|
rows={3}
|
||||||
|
value={formData.projectRequirement}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="form-textarea mt-3"
|
||||||
|
disabled={status === 'submitting'}
|
||||||
|
></textarea>
|
||||||
|
{formErrors.projectRequirement && <small className="text-danger">{formErrors.projectRequirement}</small>}
|
||||||
|
|
||||||
|
<div className="mt-3 g-recaptcha-container">
|
||||||
|
<div className="g-recaptcha">
|
||||||
|
<ReCAPTCHA
|
||||||
|
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
||||||
|
onChange={handleCaptchaChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{formErrors.captcha && <small className="text-danger d-block mt-1">{formErrors.captcha}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="vl-btn1 submit-btn" disabled={status === 'submitting'}>
|
||||||
|
{status === 'submitting' ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-arrow-right"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="status-wrapper">
|
||||||
|
<ContactStatus type={status as 'success' | 'error'} onClose={handleCloseStatus} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<form className="contact-form" onSubmit={handleSubmit}>
|
|
||||||
<div className="row g-3">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<input type="text" name="name" placeholder="Full Name" value={formData.name} onChange={handleChange} className="form-input" />
|
|
||||||
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" />
|
|
||||||
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" />
|
|
||||||
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" />
|
|
||||||
{formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select">
|
|
||||||
<option value="">App Type</option>
|
|
||||||
<option value="Android">Android</option>
|
|
||||||
<option value=" iOS"> iOS</option>
|
|
||||||
<option value="Both">Both</option>
|
|
||||||
</select>
|
|
||||||
{formErrors.budgetRange && <small className="text-danger">{formErrors.budgetRange}</small>}
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select">
|
|
||||||
<option value="">Select Budget Range</option>
|
|
||||||
<option value="$1,000 - $5,000">$1,000 - $5,000</option>
|
|
||||||
<option value="$5,000 - $10,000">$5,000 - $10,000</option>
|
|
||||||
<option value="$10,000 - $25,000">$10,000 - $25,000</option>
|
|
||||||
<option value="$25,000+">$25,000+</option>
|
|
||||||
</select>
|
|
||||||
{formErrors.budgetRange && <small className="text-danger">{formErrors.budgetRange}</small>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
name="projectRequirement"
|
|
||||||
placeholder="Your Project Requirements"
|
|
||||||
rows={3}
|
|
||||||
value={formData.projectRequirement}
|
|
||||||
onChange={handleChange}
|
|
||||||
className="form-textarea mt-3"
|
|
||||||
></textarea>
|
|
||||||
{formErrors.projectRequirement && <small className="text-danger">{formErrors.projectRequirement}</small>}
|
|
||||||
|
|
||||||
<div className="mt-3 g-recaptcha-container">
|
|
||||||
<div className="g-recaptcha">
|
|
||||||
<ReCAPTCHA
|
|
||||||
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
|
||||||
onChange={handleCaptchaChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{formErrors.captcha && <small className="text-danger d-block mt-1">{formErrors.captcha}</small>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" className="vl-btn1 submit-btn" disabled={isSubmitting}>
|
|
||||||
{isSubmitting ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-angle-right"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -417,6 +407,14 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
|||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.status-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Mobile Optimizations */
|
/* Mobile Optimizations */
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.info-panel { display: none; }
|
.info-panel { display: none; }
|
||||||
|
|||||||
83
src/components/services-digital-solutions/AboutService.tsx
Normal file
83
src/components/services-digital-solutions/AboutService.tsx
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const AboutService = () => {
|
||||||
|
return (
|
||||||
|
<section className="about-service section-space">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="about-image-stack p-relative">
|
||||||
|
{/* Experience Box */}
|
||||||
|
{/* <div className="experience-box animate-bounce-y">
|
||||||
|
<h3>37+</h3>
|
||||||
|
<span>Years Experience</span>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
{/* Background Image */}
|
||||||
|
<div className="main-img-wrap">
|
||||||
|
<img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Foreground Curved Image */}
|
||||||
|
<div className="curved-img-wrap">
|
||||||
|
<img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Decorative Dots */}
|
||||||
|
<div className="dots-shape">
|
||||||
|
<img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="content-area pl-60">
|
||||||
|
<div className="sec-title-wrapper mb-30">
|
||||||
|
<div className="sec-title">
|
||||||
|
<div className="sec-title__shape"></div>
|
||||||
|
<h6 className="sec-title__tagline">OUR ABOUT US</h6>
|
||||||
|
<h3 className="sec-title__title">We Provide Professional Advice<br />About This Business.</h3>
|
||||||
|
</div>
|
||||||
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
|
<p className="section-desc">
|
||||||
|
Business tailored design, management & support services Business business agency elit,
|
||||||
|
sed do eiusmod tempor majority have in some we form, by injected humour solution.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="single-format-content mb-40">
|
||||||
|
<div className="format-row d-flex align-items-start gap-4">
|
||||||
|
{/* <div className="small-feature-img">
|
||||||
|
<img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
|
||||||
|
</div> */}
|
||||||
|
<div className="feature-bullets">
|
||||||
|
<div className="bullet-item d-flex align-items-center mb-15">
|
||||||
|
<i className="fa-solid fa-circle-check maroon-icon"></i>
|
||||||
|
<span>Great solution for your business growth.</span>
|
||||||
|
</div>
|
||||||
|
<div className="bullet-item d-flex align-items-center">
|
||||||
|
<i className="fa-solid fa-circle-check maroon-icon"></i>
|
||||||
|
<span>Remind yourself Business know fact.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="btn-wrapper">
|
||||||
|
<a href="/about-us" className="about-more-btn">
|
||||||
|
<span>ABOUT MORE</span>
|
||||||
|
<div className="icon-circle">
|
||||||
|
<i className="fa-solid fa-chevron-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AboutService;
|
||||||
@ -32,7 +32,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
|||||||
<ul className="list-unstyled service-sidebar__nav">
|
<ul className="list-unstyled service-sidebar__nav">
|
||||||
{psychologyServices.map((item) => (
|
{psychologyServices.map((item) => (
|
||||||
<li key={item.id} className={item.slug === service.slug ? "active" : ""}>
|
<li key={item.id} className={item.slug === service.slug ? "active" : ""}>
|
||||||
<Link href={`/services/${item.slug}`}>
|
<Link href={`/services-digital-solutions/${item.slug}`}>
|
||||||
{item.title}
|
{item.title}
|
||||||
<i className="fa-solid fa-chevron-right"></i>
|
<i className="fa-solid fa-chevron-right"></i>
|
||||||
</Link>
|
</Link>
|
||||||
@ -1,275 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const AboutService = () => {
|
|
||||||
return (
|
|
||||||
<section className="about-service section-space">
|
|
||||||
<div className="container">
|
|
||||||
<div className="row align-items-center">
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div className="about-image-stack p-relative">
|
|
||||||
{/* Experience Box */}
|
|
||||||
{/* <div className="experience-box animate-bounce-y">
|
|
||||||
<h3>37+</h3>
|
|
||||||
<span>Years Experience</span>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* Background Image */}
|
|
||||||
<div className="main-img-wrap">
|
|
||||||
<img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Foreground Curved Image */}
|
|
||||||
<div className="curved-img-wrap">
|
|
||||||
<img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Decorative Dots */}
|
|
||||||
<div className="dots-shape">
|
|
||||||
<img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div className="content-area pl-60">
|
|
||||||
<div className="sec-title-wrapper mb-30">
|
|
||||||
<div className="sec-title">
|
|
||||||
<div className="sec-title__shape"></div>
|
|
||||||
<h6 className="sec-title__tagline">OUR ABOUT US</h6>
|
|
||||||
<h3 className="sec-title__title">We Provide Professional Advice<br />About This Business.</h3>
|
|
||||||
</div>
|
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
|
||||||
<p className="section-desc">
|
|
||||||
Business tailored design, management & support services Business business agency elit,
|
|
||||||
sed do eiusmod tempor majority have in some we form, by injected humour solution.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="single-format-content mb-40">
|
|
||||||
<div className="format-row d-flex align-items-start gap-4">
|
|
||||||
{/* <div className="small-feature-img">
|
|
||||||
<img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
|
|
||||||
</div> */}
|
|
||||||
<div className="feature-bullets">
|
|
||||||
<div className="bullet-item d-flex align-items-center mb-15">
|
|
||||||
<i className="fa-solid fa-circle-check maroon-icon"></i>
|
|
||||||
<span>Great solution for your business growth.</span>
|
|
||||||
</div>
|
|
||||||
<div className="bullet-item d-flex align-items-center">
|
|
||||||
<i className="fa-solid fa-circle-check maroon-icon"></i>
|
|
||||||
<span>Remind yourself Business know fact.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="btn-wrapper">
|
|
||||||
<a href="/about-us" className="about-more-btn">
|
|
||||||
<span>ABOUT MORE</span>
|
|
||||||
<div className="icon-circle">
|
|
||||||
<i className="fa-solid fa-chevron-right"></i>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.about-service {
|
|
||||||
padding: 80px 0;
|
|
||||||
background: #fff;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.about-service {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .about-image-stack {
|
|
||||||
// padding-top: 50px;
|
|
||||||
// padding-left: 30px;
|
|
||||||
// }
|
|
||||||
.experience-box {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
padding: 40px 30px;
|
|
||||||
z-index: 3;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 10px 30px rgba(60, 114, 252, 0.3);
|
|
||||||
}
|
|
||||||
.experience-box h3 {
|
|
||||||
font-size: 54px;
|
|
||||||
font-weight: 800;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.experience-box span {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
display: block;
|
|
||||||
margin-top: 5px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
.main-img-wrap {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 450px;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-left: auto;
|
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
|
|
||||||
}
|
|
||||||
.main-img-wrap img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.curved-img-wrap {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -40px;
|
|
||||||
left: -20px;
|
|
||||||
width: 320px;
|
|
||||||
height: 320px;
|
|
||||||
border-radius: 100px 30px 100px 100px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 8px solid #fff;
|
|
||||||
z-index: 2;
|
|
||||||
box-shadow: 0 15px 45px rgba(0,0,0,0.12);
|
|
||||||
}
|
|
||||||
.curved-img-wrap img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.dots-shape {
|
|
||||||
position: absolute;
|
|
||||||
top: 80px;
|
|
||||||
left: -40px;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
.section-subtitle {
|
|
||||||
color: #3779b9;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
font-size: 15px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
}
|
|
||||||
.rotate-triangle {
|
|
||||||
font-size: 14px;
|
|
||||||
transform: rotate(-30deg);
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 46px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #0f172a;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
.section-desc {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #64748b;
|
|
||||||
line-height: 1.8;
|
|
||||||
margin-bottom: 35px;
|
|
||||||
}
|
|
||||||
.small-feature-img {
|
|
||||||
width: 140px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.small-feature-img img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.maroon-icon {
|
|
||||||
color: #0f172a;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
.bullet-item span {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0f172a;
|
|
||||||
}
|
|
||||||
.about-more-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
background: #3779b9;
|
|
||||||
color: #fff;
|
|
||||||
padding: 8px 8px 8px 25px;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.about-more-btn:hover {
|
|
||||||
background: #2563eb;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
.icon-circle {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: #fff;
|
|
||||||
color: #3779b9;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.animate-bounce-y {
|
|
||||||
animation: bounceY 4s infinite ease-in-out;
|
|
||||||
}
|
|
||||||
@keyframes bounceY {
|
|
||||||
0%, 100% { transform: translateY(0); }
|
|
||||||
50% { transform: translateY(-15px); }
|
|
||||||
}
|
|
||||||
@media (max-width: 1199px) {
|
|
||||||
.content-area {
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 38px;
|
|
||||||
}
|
|
||||||
.curved-img-wrap {
|
|
||||||
width: 260px;
|
|
||||||
height: 260px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.about-image-stack {
|
|
||||||
margin-bottom: 80px;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.content-area {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 575px) {
|
|
||||||
.curved-img-wrap {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
bottom: -20px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.experience-box {
|
|
||||||
padding: 25px 20px;
|
|
||||||
}
|
|
||||||
.experience-box h3 {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AboutService;
|
|
||||||
@ -550,10 +550,10 @@ export const pricingPlans: PricingType[] = [
|
|||||||
export const psychologyServices = [
|
export const psychologyServices = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "Cognitive Psychology",
|
title: "Website Development",
|
||||||
slug: "cognitive-psychology",
|
slug: "web-development",
|
||||||
icon: "fa-solid fa-brain",
|
icon: "fa-solid fa-code",
|
||||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||||
description: "Business tailored design, management & support services Business for free.",
|
description: "Business tailored design, management & support services Business for free.",
|
||||||
content: `
|
content: `
|
||||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||||
@ -583,10 +583,10 @@ export const psychologyServices = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "Academic Psychology",
|
title: "Mobile Application Development",
|
||||||
slug: "academic-psychology",
|
slug: "mobile-app-development",
|
||||||
icon: "fa-solid fa-graduation-cap",
|
icon: "fa-solid fa-mobile-screen-button",
|
||||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||||
description: "Business tailored design, management & support services Business for free.",
|
description: "Business tailored design, management & support services Business for free.",
|
||||||
content: `
|
content: `
|
||||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||||
@ -616,9 +616,9 @@ export const psychologyServices = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: "Career Counseling",
|
title: "Graphic Designing",
|
||||||
slug: "career-counseling",
|
slug: "graphic-designing",
|
||||||
icon: "fa-solid fa-user-tie",
|
icon: "fa-solid fa-palette",
|
||||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||||
description: "Business tailored design, management & support services Business for free.",
|
description: "Business tailored design, management & support services Business for free.",
|
||||||
content: `
|
content: `
|
||||||
@ -649,9 +649,9 @@ export const psychologyServices = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: "Clinical Psychology",
|
title: "UI / UX Designing",
|
||||||
slug: "clinical-psychology",
|
slug: "ui-ux-designing",
|
||||||
icon: "fa-solid fa-stethoscope",
|
icon: "fa-solid fa-palette",
|
||||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||||
description: "Business tailored design, management & support services Business for free.",
|
description: "Business tailored design, management & support services Business for free.",
|
||||||
content: `
|
content: `
|
||||||
@ -682,10 +682,10 @@ export const psychologyServices = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
title: "Psychiatric Treatment",
|
title: "SEO & Content Writing",
|
||||||
slug: "psychiatric-treatment",
|
slug: "seo-content-writing",
|
||||||
icon: "fa-solid fa-hospital-user",
|
icon: "fa-solid fa-palette",
|
||||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||||
description: "Business tailored design, management & support services Business for free.",
|
description: "Business tailored design, management & support services Business for free.",
|
||||||
content: `
|
content: `
|
||||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||||
@ -715,10 +715,10 @@ export const psychologyServices = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
title: "Family Therapy",
|
title: "Digital Marketing",
|
||||||
slug: "family-therapy",
|
slug: "digital-marketing",
|
||||||
icon: "fa-solid fa-hospital-user",
|
icon: "fa-solid fa-palette",
|
||||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||||
description: "Business tailored design, management & support services Business for free.",
|
description: "Business tailored design, management & support services Business for free.",
|
||||||
content: `
|
content: `
|
||||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user