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 FeaturesSection from "@/components/home/home-1/FeaturesSection";
|
||||
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 FaqFour from "@/components/home/FaqFour";
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ import InnerBanner from "@/components/common/InnerBanner";
|
||||
import FaqPageSection from "@/components/faq/FaqPageSection";
|
||||
import FaqVideoSection from "@/components/careers/FaqVideoSection";
|
||||
import PageHeader from "@/components/common/PageHeader";
|
||||
import FaqSection from "@/components/home/home-3/FaqSection";
|
||||
|
||||
export default function FaqPage() {
|
||||
useEffect(() => {
|
||||
@ -27,6 +28,7 @@ export default function FaqPage() {
|
||||
<PageHeader title="FAQ" />
|
||||
<FaqPageSection />
|
||||
<FaqVideoSection />
|
||||
<FaqSection/>
|
||||
</main>
|
||||
<Footer1 />
|
||||
</>
|
||||
|
||||
1574
src/app/globals.css
1574
src/app/globals.css
File diff suppressed because it is too large
Load Diff
@ -46,9 +46,9 @@ export default function MainPage() {
|
||||
<main>
|
||||
<BannerSection />
|
||||
<AboutSection />
|
||||
<MedicalServices />
|
||||
<CounsellingSolutions />
|
||||
<ChooseSection />
|
||||
<CounsellingSolutions />
|
||||
<MedicalServices />
|
||||
<BrandSection />
|
||||
<CallAreaThree />
|
||||
<CounterAreaTwo />
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
import Header1 from "@/components/layout/Header1";
|
||||
import Footer1 from "@/components/layout/Footer1";
|
||||
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 { notFound } from "next/navigation";
|
||||
|
||||
@ -21,7 +21,7 @@ import Header1 from "@/components/layout/Header1";
|
||||
import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
|
||||
import ServiceSection2 from "@/components/careers/ServiceSection";
|
||||
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 AboutTwo from "@/components/home/AboutTwo";
|
||||
|
||||
@ -65,167 +65,6 @@ const WhyChooseUs = () => {
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,31 @@
|
||||
"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 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(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
@ -42,15 +64,71 @@ const ContactSection = () => {
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
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 (
|
||||
<section ref={sectionRef} className="contact-one">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-8">
|
||||
<div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
|
||||
<div className="contact-one__info__icon">
|
||||
@ -60,8 +138,9 @@ const ContactSection = () => {
|
||||
Let's call together just <span>contact</span> line
|
||||
</h3>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
@ -95,23 +174,93 @@ const ContactSection = () => {
|
||||
Get free Business touch Customers me.
|
||||
</h3>
|
||||
</div>
|
||||
<p className="contact-one__content__text">
|
||||
Business tailored it design, management & support services <br />business agency elit, sed do eiusmod tempor.
|
||||
</p>
|
||||
|
||||
{alert.show && (
|
||||
<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}>
|
||||
<div className="form-one__group">
|
||||
<div className="form-one__control">
|
||||
<input type="text" name="name" placeholder="Your Name" required />
|
||||
<div className="mb-20">
|
||||
<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 className="form-one__control">
|
||||
<input type="email" name="email" placeholder="Email address" required />
|
||||
<div className="mb-20">
|
||||
<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 className="form-one__control form-one__control--full">
|
||||
<textarea name="message" placeholder="Message" rows={6} required></textarea>
|
||||
<div className="mb-20">
|
||||
<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 className="form-one__control form-one__control--full">
|
||||
<button type="submit" className="tolak-btn">
|
||||
<b>Send Request</b>
|
||||
<div className="mb-20">
|
||||
<label className="form-label">Select Service</label>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,88 @@
|
||||
"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 [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 (
|
||||
<>
|
||||
<React.Fragment>
|
||||
<section className="faq-two">
|
||||
<div
|
||||
className="faq-two__bg jarallax"
|
||||
@ -18,22 +96,84 @@ const FaqVideoSection = () => {
|
||||
<span className="section-subtitle">Get In Touch</span>
|
||||
<h2 className="section-heading text-white">Have a Project in Mind?</h2>
|
||||
</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="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 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 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 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 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 className="col-md-12 text-center">
|
||||
<button type="submit" className="primary-btn-1">
|
||||
@ -45,8 +185,8 @@ const FaqVideoSection = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div >
|
||||
</section >
|
||||
|
||||
<section className="video-three wow fadeInUp" data-wow-delay="200ms">
|
||||
<div className="container">
|
||||
@ -68,142 +208,7 @@ const FaqVideoSection = () => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
</>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -80,7 +80,7 @@ const ServiceSection2 = () => {
|
||||
<span className={service.icon}></span>
|
||||
</div>
|
||||
<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>
|
||||
<p className="service-three__item__text">{service.description}</p>
|
||||
</div>
|
||||
|
||||
@ -3,12 +3,6 @@ import React, { useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import ReCAPTCHA from "react-google-recaptcha";
|
||||
import axios from "axios";
|
||||
|
||||
interface ContactPopupProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
import ContactStatus from '../../contact/ContactStatus';
|
||||
|
||||
interface ContactPopupProps {
|
||||
@ -35,7 +29,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// Close on ESC key
|
||||
useEffect(() => {
|
||||
const handleEsc = (e: KeyboardEvent) => {
|
||||
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.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
|
||||
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);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
@ -73,7 +66,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
const emailData = {
|
||||
...formData,
|
||||
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",
|
||||
recaptchaToken: captchaToken,
|
||||
};
|
||||
@ -149,7 +142,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side: Form */}
|
||||
<div className="col-lg-7 form-panel">
|
||||
<button onClick={onClose} className="close-btn">
|
||||
<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>
|
||||
<form className="contact-form" onSubmit={handleSubmit}>
|
||||
<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'} />
|
||||
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
||||
</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'} />
|
||||
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
||||
</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'} />
|
||||
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
||||
</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'} />
|
||||
{formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
|
||||
</div>
|
||||
@ -222,239 +214,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
</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>
|
||||
);
|
||||
|
||||
|
||||
@ -2,22 +2,10 @@ import React from 'react';
|
||||
|
||||
const GoogleReviewsBranding = ({ centered = false }) => {
|
||||
return (
|
||||
<div className="google-reviews-branding" style={{
|
||||
marginTop: '15px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: centered ? 'center' : 'flex-start',
|
||||
gap: '0px'
|
||||
<div className="google-reviews-branding-global" style={{
|
||||
alignItems: centered ? 'center' : 'flex-start'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '28px',
|
||||
fontWeight: '700',
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: '3px',
|
||||
fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<div className="google-logo">
|
||||
<span style={{ color: '#4285F4' }}>G</span>
|
||||
<span style={{ color: '#EA4335' }}>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: '#EA4335' }}>e</span>
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '700',
|
||||
lineHeight: '1.2',
|
||||
fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
marginTop: '-2px'
|
||||
}}>
|
||||
<div className="reviews-text-stars">
|
||||
<span style={{ color: '#fff' }}>Reviews</span>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
gap: '1px',
|
||||
fontSize: '13px',
|
||||
lineHeight: '1'
|
||||
}}>
|
||||
<div className="stars-container">
|
||||
<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 [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 (
|
||||
<section className="contact-area section-space">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-5 col-md-12">
|
||||
<div className="contact-info-wrapper">
|
||||
<div className="sec-title-wrapper mb-40">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">CONTACT WITH US</h6>
|
||||
<h3 className="sec-title__title">Feel Free to Get in Touch</h3>
|
||||
<>
|
||||
<section className="contact-area section-space">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-5 col-md-12">
|
||||
<div className="contact-info-wrapper">
|
||||
<div className="sec-title-wrapper">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<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>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
<div className="contact-info-list">
|
||||
<div className="contact-info-item d-flex align-items-center mb-30">
|
||||
<div className="icon">
|
||||
<i className="fa-solid fa-phone-volume"></i>
|
||||
<div className="contact-info-list">
|
||||
<div className="contact-info-item d-flex align-items-center mb-30">
|
||||
<div className="icon">
|
||||
<i className="fa-solid fa-phone-volume"></i>
|
||||
</div>
|
||||
<div className="content">
|
||||
<span>Call Anytime</span>
|
||||
<h6><a href="tel:+16476797651">+1-647-679-7651</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<span>Call Anytime</span>
|
||||
<h6><a href="tel:+8898006802">+ 88 ( 9800 ) 6802</a></h6>
|
||||
<div className="contact-info-item d-flex align-items-center mb-30">
|
||||
<div className="icon">
|
||||
<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 className="contact-info-item d-flex align-items-center mb-30">
|
||||
<div className="icon">
|
||||
<i className="fa-solid fa-envelope"></i>
|
||||
</div>
|
||||
<div className="content">
|
||||
<span>Send Email</span>
|
||||
<h6><a href="mailto:needhelp@company.com">needhelp@company.com</a></h6>
|
||||
</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 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>Canada</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7 col-md-12">
|
||||
<div className="contact-form-wrapper bg-color-light p-relative">
|
||||
<form action="#" className="contact-form">
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-20">
|
||||
<input type="text" placeholder="Your Name" required />
|
||||
<div className="col-lg-7 col-md-12">
|
||||
<div className="contact-form-wrapper bg-color-light p-relative">
|
||||
<form className="contact-form" onSubmit={handleSubmit}>
|
||||
{alert.show && (
|
||||
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
|
||||
{alert.message}
|
||||
</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 className="col-md-6 mb-20">
|
||||
<input type="email" placeholder="Email Address" required />
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -41,170 +41,6 @@ const ContactStatus: React.FC<ContactStatusProps> = ({ type, message, onClose })
|
||||
</button>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -17,25 +17,6 @@ const MapSection = () => {
|
||||
></iframe>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -135,7 +135,7 @@ const FaqPageSection = () => {
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@ -229,143 +229,6 @@ const FaqPageSection = () => {
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -6,7 +6,28 @@ const CounsellingSolutions: React.FC = () => {
|
||||
<section className="counselling-solutions">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
|
||||
<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="sec-title">
|
||||
<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
|
||||
</li>
|
||||
</ul>
|
||||
<Link href="#" className="pelocis-btn">
|
||||
<span>
|
||||
Discover More <i className="icon-right-arrow-white"></i>
|
||||
</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>
|
||||
<div className="about-btn-box mt-4">
|
||||
<Link className="primary-btn-1 btn-hover" href="/about">
|
||||
Discover More | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</Link>
|
||||
<span>WATCH VIDEO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,92 @@
|
||||
"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 [distance, setDistance] = useState(7000);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
service: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setDistance(parseInt(e.target.value));
|
||||
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 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 (
|
||||
<section className="home-contact-one">
|
||||
<div
|
||||
@ -17,8 +95,8 @@ const HomeContactOne = () => {
|
||||
></div>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<div className="home-contact__card ">
|
||||
<div className="col-xl-6 d-flex align-items-center justify-content-center">
|
||||
<div className="home-contact__card" style={{ margin: '0 auto' }}>
|
||||
<div className="home-contact__card__content">
|
||||
<ul className="home-contact__card__list">
|
||||
<li>
|
||||
@ -26,7 +104,7 @@ const HomeContactOne = () => {
|
||||
<div className="pl-5">
|
||||
<h3 className="home-contact__card__list__title">Get Contact Now</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div className="home-contact__card__list__shape"></div>
|
||||
@ -36,7 +114,7 @@ const HomeContactOne = () => {
|
||||
<div className="pl-5">
|
||||
<h3 className="home-contact__card__list__title">Sent Email</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div className="home-contact__card__list__shape"></div>
|
||||
@ -45,7 +123,7 @@ const HomeContactOne = () => {
|
||||
<span className="fa-solid fa-location-dot"></span>
|
||||
<div className="pl-5">
|
||||
<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 className="home-contact__card__list__shape"></div>
|
||||
</li>
|
||||
@ -66,80 +144,126 @@ const HomeContactOne = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<form
|
||||
className="appointment__form contact-form-validated form-one"
|
||||
action="#"
|
||||
noValidate
|
||||
>
|
||||
<div className="appointment__form__top">
|
||||
<div className="appointment__form__title">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<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 className="home-contact-form-container-global">
|
||||
<form
|
||||
className="appointment__form contact-form-validated form-one"
|
||||
onSubmit={handleSubmit}
|
||||
noValidate
|
||||
>
|
||||
<div className="appointment__form__top">
|
||||
<div className="appointment__form__title">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<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>
|
||||
<img
|
||||
src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-1.png"
|
||||
alt="pelocis"
|
||||
className="appointment__form__title__shape"
|
||||
/>
|
||||
</div>
|
||||
<p className="appointment__form__text">
|
||||
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="form-one__group row">
|
||||
<div className="form-one__control col-md-6">
|
||||
<label htmlFor="name" className="appointment__form__lable">Name</label>
|
||||
<input id="name" type="text" name="name" placeholder="Select Name *" />
|
||||
</div>
|
||||
<div className="form-one__control col-md-6">
|
||||
<label htmlFor="email" className="appointment__form__lable">Email</label>
|
||||
<input id="email" type="email" name="email" placeholder="Select Email *" />
|
||||
</div>
|
||||
<div className="form-one__control col-md-6">
|
||||
<label htmlFor="phone" className="appointment__form__lable">Phone</label>
|
||||
<input id="phone" type="text" name="phone" placeholder="Select a Phone" />
|
||||
</div>
|
||||
<div className="form-one__control form-one__control--full col-md-6">
|
||||
<label htmlFor="program-select" className="appointment__form__lable">Program</label>
|
||||
<div className="form-one__control__select">
|
||||
|
||||
{alert.show && (
|
||||
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
|
||||
{alert.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-one__group">
|
||||
<div className="mb-20">
|
||||
<label htmlFor="name" className="form-label-custom-global">Full Name</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Full Name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="form-input-custom-global"
|
||||
/>
|
||||
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
||||
</div>
|
||||
<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
|
||||
className="form-select selectpicker"
|
||||
id="program-select"
|
||||
defaultValue="Select program"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 20px',
|
||||
borderRadius: '5px',
|
||||
border: '1px solid #ddd',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
name="service"
|
||||
id="service"
|
||||
value={formData.service}
|
||||
onChange={handleChange}
|
||||
className="form-select-custom-styled-global"
|
||||
>
|
||||
<option value="Select program">Select a Program</option>
|
||||
<option value="Web Development">Web Development</option>
|
||||
<option value="Mobile App Development">Mobile App Development</option>
|
||||
<option value="UI/UX Design">UI/UX Design</option>
|
||||
<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 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 className="form-one__control mt-30">
|
||||
<button type="submit" className="pelocis-btn">
|
||||
<span>
|
||||
SEND Request
|
||||
<i className="fa-solid fa-arrow-right-long" style={{ marginLeft: '8px' }}></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section >
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -5,45 +5,45 @@ import React, { useState, useEffect } from "react";
|
||||
const services = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Excellent infection prevention",
|
||||
text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt",
|
||||
title: "Website Development",
|
||||
text: "Custom website development tailored to your business needs.",
|
||||
icon: "/assets/imgs/icon/icon-6.png",
|
||||
link: "service-details.html",
|
||||
link: "/services-digital-solutions/web-development",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Health patients comprehensive",
|
||||
text: "From its medieval origins to the digital era , learn everything there is to know",
|
||||
title: "Mobile Application Development",
|
||||
text: "High-performance mobile apps for iOS and Android.",
|
||||
icon: "/assets/imgs/icon/icon-2.png",
|
||||
link: "service-details.html",
|
||||
link: "/services-digital-solutions/mobile-app-development",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Pediatric Hematology Oncology",
|
||||
text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the",
|
||||
title: "Graphic Designing",
|
||||
text: "Creative graphic design solutions for your brand.",
|
||||
icon: "/assets/imgs/icon/icon-3.png",
|
||||
link: "service-details.html",
|
||||
link: "/services-digital-solutions/graphic-designing",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Care Pediatric & Medicine",
|
||||
text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus",
|
||||
title: "UI / UX Designing",
|
||||
text: "User-centric design experiences that engage and convert.",
|
||||
icon: "/assets/imgs/icon/icon-4.png",
|
||||
link: "service-details.html",
|
||||
link: "/services-digital-solutions/ui-ux-designing",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Labor & Delivery: The Birthplace",
|
||||
text: "Some claim lorem ipsum threatens to promote design over content, while others defend",
|
||||
title: "SEO & Content Writing",
|
||||
text: "Optimization and content that drives organic growth.",
|
||||
icon: "/assets/imgs/icon/icon-5.png",
|
||||
link: "service-details.html",
|
||||
link: "/services-digital-solutions/seo-content-writing",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Urogynecology & Pelvic Health",
|
||||
text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or",
|
||||
title: "Digital Marketing",
|
||||
text: "Strategic digital marketing to grow your online presence.",
|
||||
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="sec-title-wrapper text-center wow fadeInUp animated mb-50"
|
||||
className="sec-title-wrapper text-center wow fadeInUp animated"
|
||||
data-wow-delay="0.3s"
|
||||
>
|
||||
<div className="sec-title">
|
||||
|
||||
@ -210,6 +210,13 @@ export default function PortfolioSection() {
|
||||
return (
|
||||
<section className="pf-section">
|
||||
<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 ── */}
|
||||
<div className="pf-tabs">
|
||||
|
||||
@ -65,7 +65,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
|
||||
</div>
|
||||
|
||||
@ -48,59 +48,6 @@ const BlogSection = ({ hideHeader = false }: { hideHeader?: boolean }) => (
|
||||
</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>
|
||||
);
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@ const BrandSection = () => {
|
||||
tagline="OUR PARTNERS"
|
||||
title="Trusted by <span class='inner-text'>Leaders</span> Worldwide"
|
||||
centered={true}
|
||||
className="mb-50"
|
||||
/>
|
||||
<div className="small-container">
|
||||
<div className="swiper brand-active">
|
||||
|
||||
@ -7,7 +7,7 @@ const ProjectsSection = () => {
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<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>
|
||||
<h3 className="section-title mt-10">Our Latest Projects</h3>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ const ServiceSliderSection = () => {
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<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>
|
||||
<h3 className="section-title mt-10">Exclusive IT Services</h3>
|
||||
</div>
|
||||
|
||||
@ -27,7 +27,7 @@ const ServiceThreeSlider = () => {
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
@ -46,7 +46,7 @@ const ServiceThreeSlider = () => {
|
||||
<span className={service.icon}></span>
|
||||
</div>
|
||||
<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>
|
||||
<p className="service-three__item__text text-white">{service.description}</p>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@ const TeamSection = () => (
|
||||
<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="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>
|
||||
<h3 className="section-title mt-10">Our Leadership Team</h3>
|
||||
</div>
|
||||
|
||||
@ -1,57 +1,156 @@
|
||||
import React from "react";
|
||||
import { testimonialSlides } from "@/utils/data";
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Slider from "react-slick";
|
||||
import GoogleReviewsBranding from "@/components/common/GoogleReviewsBranding";
|
||||
|
||||
const TestimonialsSection = () => (
|
||||
<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>
|
||||
const TestimonialsSection = () => {
|
||||
const [reviews, setReviews] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadReviews() {
|
||||
try {
|
||||
const res = await fetch("/api/reviews");
|
||||
const data = await res.json();
|
||||
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 className="col-xxl-8 col-xl-8 col-lg-12">
|
||||
<div className="testimonials-two-area section-space-medium bg-color-1 p-relative">
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)" }}></div>
|
||||
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">TESTIMONIALS</h6>
|
||||
<h3 className="sec-title__title text-white">Our Client Feedback</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
<div className="swiper testimonial-active-2">
|
||||
<div className="swiper-wrapper">
|
||||
{[1, 2, 1].map((num, i) => (
|
||||
<div key={i} className="swiper-slide">
|
||||
<div className="testimonials-two-box">
|
||||
<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 className="col-xxl-8 col-xl-8 col-lg-12">
|
||||
<div className="testimonials-two-area section-space-medium p-relative parallax-bg" style={{
|
||||
backgroundImage: 'url(/assets/img/home/bg/bg-4.webp)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}>
|
||||
<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>
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)", zIndex: 1 }}></div>
|
||||
|
||||
<div className="sec-title-wrapper" style={{ position: 'relative', zIndex: 2 }}>
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">TESTIMONIALS</h6>
|
||||
<h3 className="sec-title__title text-white">Our Client Feedback</h3>
|
||||
<div className="space20"></div>
|
||||
<div className="d-flex justify-content-start">
|
||||
<GoogleReviewsBranding />
|
||||
</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 className="testimonial-dot-inner text-center mt-60">
|
||||
<div className="testimonial-swiper-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestimonialsSection;
|
||||
|
||||
@ -64,48 +64,6 @@ const Blog2Section = () => (
|
||||
</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>
|
||||
);
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { blogs } from "@/utils/data";
|
||||
import Link from "next/link";
|
||||
|
||||
const BlogSection = () => (
|
||||
<section className="blog-section-one section-space">
|
||||
<section className="blog-section-three section-space">
|
||||
<div className="small-container">
|
||||
<div className="blog-title-box mb-40">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
@ -47,48 +47,6 @@ const BlogSection = () => (
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ const ProjectsSection = () => {
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<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>
|
||||
<h3 className="section-title mt-10">Explore Our Recent Projects</h3>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@ const ServiceSection = () => {
|
||||
<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="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">
|
||||
<span className="section-sub-title no-border">SERVICES WE’RE OFFERING</span>
|
||||
<h3 className="section-title mt-10 text-white">Exclusive IT Services</h3>
|
||||
|
||||
@ -3,24 +3,24 @@ import Link from "next/link";
|
||||
|
||||
const NavMenu = () => (
|
||||
<ul>
|
||||
<li><Link href="/">Home</Link></li>
|
||||
<li><Link href="/about-us">About</Link></li>
|
||||
<li><Link href="/">HOME</Link></li>
|
||||
<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">
|
||||
<li><Link href="/">Website Development</Link></li>
|
||||
<li><Link href="/">Mobile Application Development</Link></li>
|
||||
<li><Link href="/">Graphic Designing</Link></li>
|
||||
<li><Link href="/">UI / UX Designing</Link></li>
|
||||
<li><Link href="/">SEO & Content Writing</Link></li>
|
||||
<li><Link href="/">Digital Marketing</Link></li>
|
||||
<li><Link href="/services-digital-solutions/web-development">WEBSITE DEVELOPMENT</Link></li>
|
||||
<li><Link href="/services-digital-solutions/mobile-app-development">MOBILE APPLICATION DEVELOPMENT</Link></li>
|
||||
<li><Link href="/services-digital-solutions/graphic-designing">GRAPHIC DESIGNING</Link></li>
|
||||
<li><Link href="/services-digital-solutions/ui-ux-designing">UI / UX DESIGNING</Link></li>
|
||||
<li><Link href="/services-digital-solutions/seo-content-writing">SEO & CONTENT WRITING</Link></li>
|
||||
<li><Link href="/services-digital-solutions/digital-marketing">DIGITAL MARKETING</Link></li>
|
||||
</ul>
|
||||
</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="/blog">Blog</Link></li>
|
||||
<li><Link href="/contact">Contact</Link></li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import ReCAPTCHA from "react-google-recaptcha";
|
||||
import axios from "axios";
|
||||
import ContactStatus from '@/components/contact/ContactStatus';
|
||||
|
||||
interface ContactPopupProps {
|
||||
isOpen: boolean;
|
||||
@ -10,6 +11,7 @@ interface ContactPopupProps {
|
||||
}
|
||||
|
||||
const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
@ -17,12 +19,11 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
businessName: "",
|
||||
projectRequirement: "",
|
||||
budgetRange: "",
|
||||
appType: "",
|
||||
});
|
||||
|
||||
const [formErrors, setFormErrors] = useState<any>({});
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
@ -57,32 +58,27 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
|
||||
if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
|
||||
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);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setStatus('submitting');
|
||||
|
||||
const emailData = {
|
||||
...formData,
|
||||
message: `Business: ${formData.businessName}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
|
||||
to: "selvipalanikumarn@gmail.com",
|
||||
message: `Business: ${formData.businessName}<br />App Type: ${formData.appType}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
|
||||
to: "info@metatroncubesolutions.com",
|
||||
senderName: "Metatroncube Contact Popup",
|
||||
recaptchaToken: captchaToken,
|
||||
};
|
||||
|
||||
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" },
|
||||
});
|
||||
|
||||
setAlert({
|
||||
show: true,
|
||||
type: "success",
|
||||
message: res?.data?.message || "Message sent successfully!",
|
||||
});
|
||||
|
||||
setStatus('success');
|
||||
setFormData({
|
||||
name: "",
|
||||
phone: "",
|
||||
@ -90,31 +86,24 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
businessName: "",
|
||||
projectRequirement: "",
|
||||
budgetRange: "",
|
||||
appType: "",
|
||||
});
|
||||
setCaptchaToken(null);
|
||||
setFormErrors({});
|
||||
// Close after delay
|
||||
setTimeout(onClose, 2000);
|
||||
} catch (error) {
|
||||
console.error("❌ Error sending email:", error);
|
||||
setAlert({
|
||||
show: true,
|
||||
type: "danger",
|
||||
message: "Failed to send message. Please try again later.",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setStatus('error');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (alert.show) {
|
||||
const timer = setTimeout(() => {
|
||||
setAlert((prev) => ({ ...prev, show: false }));
|
||||
}, 5000);
|
||||
return () => clearTimeout(timer);
|
||||
const handleCloseStatus = () => {
|
||||
if (status === 'success') {
|
||||
onClose();
|
||||
setStatus('idle');
|
||||
} else {
|
||||
setStatus('idle');
|
||||
}
|
||||
}, [alert.show]);
|
||||
};
|
||||
|
||||
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 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 }}>
|
||||
<h2 className="title text-white">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>
|
||||
<h2 className="title">Let's Discuss Your App Idea</h2>
|
||||
<p className="desc">Fill out the form and our team will contact you within 24 hours.</p>
|
||||
|
||||
<div className="contact-details">
|
||||
<div className="detail-item">
|
||||
<div className="icon"><i className="fa-solid fa-envelope"></i></div>
|
||||
<div className="text">
|
||||
<p className='text-white'>Email Us</p>
|
||||
<h5 className='text-white'>info@metatroncubesolutions.com</h5>
|
||||
<p>Email Us</p>
|
||||
<h5>info@metatroncubesolutions.com</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<div className="icon"><i className="fa-solid fa-phone"></i></div>
|
||||
<div className="text">
|
||||
<p className='text-white'>Call Us Free</p>
|
||||
<h5 className='text-white'><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
|
||||
<p>Call Us Free</p>
|
||||
<h5><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -156,83 +145,84 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side: Form */}
|
||||
{/* Right Side: Form or Status */}
|
||||
<div className="col-lg-7 form-panel">
|
||||
<button onClick={onClose} className="close-btn">
|
||||
<i className="fa-solid fa-xmark"></i>
|
||||
</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 && (
|
||||
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`}>
|
||||
{alert.message}
|
||||
<textarea
|
||||
name="projectRequirement"
|
||||
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>
|
||||
)}
|
||||
|
||||
<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>
|
||||
@ -417,6 +407,14 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.status-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
/* Mobile Optimizations */
|
||||
@media (max-width: 991px) {
|
||||
.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">
|
||||
{psychologyServices.map((item) => (
|
||||
<li key={item.id} className={item.slug === service.slug ? "active" : ""}>
|
||||
<Link href={`/services/${item.slug}`}>
|
||||
<Link href={`/services-digital-solutions/${item.slug}`}>
|
||||
{item.title}
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</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;
|
||||
@ -112,4 +112,4 @@ const Pricing = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
export default Pricing;
|
||||
|
||||
@ -550,10 +550,10 @@ export const pricingPlans: PricingType[] = [
|
||||
export const psychologyServices = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Cognitive Psychology",
|
||||
slug: "cognitive-psychology",
|
||||
icon: "fa-solid fa-brain",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
title: "Website Development",
|
||||
slug: "web-development",
|
||||
icon: "fa-solid fa-code",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
description: "Business tailored design, management & support services Business for free.",
|
||||
content: `
|
||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||
@ -583,10 +583,10 @@ export const psychologyServices = [
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Academic Psychology",
|
||||
slug: "academic-psychology",
|
||||
icon: "fa-solid fa-graduation-cap",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
title: "Mobile Application Development",
|
||||
slug: "mobile-app-development",
|
||||
icon: "fa-solid fa-mobile-screen-button",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
description: "Business tailored design, management & support services Business for free.",
|
||||
content: `
|
||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||
@ -616,9 +616,9 @@ export const psychologyServices = [
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Career Counseling",
|
||||
slug: "career-counseling",
|
||||
icon: "fa-solid fa-user-tie",
|
||||
title: "Graphic Designing",
|
||||
slug: "graphic-designing",
|
||||
icon: "fa-solid fa-palette",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
description: "Business tailored design, management & support services Business for free.",
|
||||
content: `
|
||||
@ -649,9 +649,9 @@ export const psychologyServices = [
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Clinical Psychology",
|
||||
slug: "clinical-psychology",
|
||||
icon: "fa-solid fa-stethoscope",
|
||||
title: "UI / UX Designing",
|
||||
slug: "ui-ux-designing",
|
||||
icon: "fa-solid fa-palette",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
description: "Business tailored design, management & support services Business for free.",
|
||||
content: `
|
||||
@ -682,10 +682,10 @@ export const psychologyServices = [
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Psychiatric Treatment",
|
||||
slug: "psychiatric-treatment",
|
||||
icon: "fa-solid fa-hospital-user",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
title: "SEO & Content Writing",
|
||||
slug: "seo-content-writing",
|
||||
icon: "fa-solid fa-palette",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
description: "Business tailored design, management & support services Business for free.",
|
||||
content: `
|
||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||
@ -715,10 +715,10 @@ export const psychologyServices = [
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Family Therapy",
|
||||
slug: "family-therapy",
|
||||
icon: "fa-solid fa-hospital-user",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
title: "Digital Marketing",
|
||||
slug: "digital-marketing",
|
||||
icon: "fa-solid fa-palette",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
description: "Business tailored design, management & support services Business for free.",
|
||||
content: `
|
||||
<h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user