all new section alteration are updated
This commit is contained in:
akash
parent
27d208384f
commit
2bd046a718
@ -26,6 +26,8 @@ import WhyChooseSection from "@/components/careers/WhyChooseSection";
|
||||
import PageHeader from "@/components/common/PageHeader";
|
||||
import HistoryTwo from "@/components/home/HistoryTwo";
|
||||
import WhyChooseTwo from "@/components/home/WhyChooseTwo";
|
||||
import ContactSection from "@/components/careers/ContactSection";
|
||||
import CouterAreaThree from "@/components/home/CounterAreaThree";
|
||||
|
||||
export default function Home2() {
|
||||
useEffect(() => {
|
||||
@ -46,10 +48,12 @@ export default function Home2() {
|
||||
<PageHeader title="About Us" />
|
||||
{/* <FeaturesSection /> */}
|
||||
<About2Section />
|
||||
<IconCounterSection />
|
||||
{/* <CounterAreaTwo /> */}
|
||||
<CouterAreaThree />
|
||||
{/* <IconCounterSection /> */}
|
||||
<WhyChooseTwo />
|
||||
<BrandSection />
|
||||
<HelpFormSection />
|
||||
|
||||
{/* <HelpFormSection /> */}
|
||||
{/* <WhyChooseSection /> */}
|
||||
{/* <WhyChooseUs /> */}
|
||||
{/* <ServiceTabSection /> */}
|
||||
@ -57,7 +61,9 @@ export default function Home2() {
|
||||
{/* <TextSliderSection /> */}
|
||||
{/* <WorkProcessSection /> */}
|
||||
<HistoryTwo />
|
||||
<BrandSection />
|
||||
<TestimonialsSection />
|
||||
<ContactSection />
|
||||
{/* <FaqSection /> */}
|
||||
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import Header1 from "@/components/layout/Header1";
|
||||
import Footer1 from "@/components/layout/Footer1";
|
||||
import BlogSection from "@/components/home/home-1/BlogSection";
|
||||
import PageHeader from "@/components/common/PageHeader";
|
||||
import SectionTitle from "@/components/common/SectionTitle";
|
||||
|
||||
export default function BlogPage() {
|
||||
useEffect(() => {
|
||||
@ -18,6 +19,21 @@ export default function BlogPage() {
|
||||
<Header1 />
|
||||
<main>
|
||||
<PageHeader title="Our Blog" />
|
||||
<div className="container section-space-top">
|
||||
<SectionTitle
|
||||
tagline="LATEST NEWS"
|
||||
title="Latest Blog & News"
|
||||
centered={true}
|
||||
/>
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8 text-center pt-20">
|
||||
<p className="sec-text">
|
||||
Stay updated with our latest industry insights, success stories, and technical guides.
|
||||
We share our expertise to help your business grow and stay ahead in the digital landscape.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BlogSection hideHeader={true} />
|
||||
</main>
|
||||
<Footer1 />
|
||||
|
||||
1355
src/app/globals.css
1355
src/app/globals.css
File diff suppressed because it is too large
Load Diff
34
src/app/services/[slug]/page.tsx
Normal file
34
src/app/services/[slug]/page.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
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 { psychologyServices } from "@/utils/data";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return psychologyServices.map((service) => ({
|
||||
slug: service.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
|
||||
const service = psychologyServices.find((s) => s.slug === slug);
|
||||
|
||||
if (!service) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header1 />
|
||||
<main>
|
||||
<PageHeader title={service.title} />
|
||||
<ServiceDetails service={service} />
|
||||
</main>
|
||||
<Footer1 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -19,15 +19,15 @@ const WhyChooseUs = () => {
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="content-area pr-50">
|
||||
<div className="section-title-wrapper mb-30">
|
||||
<span className="section-subtitle">
|
||||
<i className="fa-solid fa-play rotate-triangle"></i> WHY CHOOSE US
|
||||
</span>
|
||||
<h2 className="section-title">
|
||||
Consulting Solutions For Your Business Development.
|
||||
</h2>
|
||||
<div className="sec-title-wrapper mb-30">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">WHY CHOOSE US</h6>
|
||||
<h3 className="sec-title__title">Consulting Solutions For Your<br />Business Development.</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,
|
||||
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>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import { psychologyServices } from "@/utils/data";
|
||||
|
||||
const ServiceSection2 = () => {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
@ -43,50 +44,7 @@ const ServiceSection2 = () => {
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: "Network Infrastructure",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-network-wired",
|
||||
image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg",
|
||||
link: "/business-growth"
|
||||
},
|
||||
{
|
||||
title: "Data Management",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-database",
|
||||
image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg",
|
||||
link: "/business-support"
|
||||
},
|
||||
{
|
||||
title: "Technology Solution",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-microchip",
|
||||
image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg",
|
||||
link: "/technology-services"
|
||||
},
|
||||
{
|
||||
title: "Technology Solution",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-microchip",
|
||||
image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg",
|
||||
link: "/technology-services"
|
||||
},
|
||||
{
|
||||
title: "Data Management",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-database",
|
||||
image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg",
|
||||
link: "/business-support"
|
||||
},
|
||||
{
|
||||
title: "Network Infrastructure",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-network-wired",
|
||||
image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg",
|
||||
link: "/business-growth"
|
||||
},
|
||||
];
|
||||
const services = psychologyServices;
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="service-three">
|
||||
@ -99,13 +57,13 @@ const ServiceSection2 = () => {
|
||||
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/service-shape-3.png)" }}
|
||||
></div>
|
||||
<div className="container">
|
||||
<div className="sec-title-three">
|
||||
<h6 className="sec-title-three__tagline">
|
||||
<span className="sec-title-three__tagline__left-border"></span>
|
||||
OUR BEST SERVICE
|
||||
<span className="sec-title-three__tagline__right-border"></span>
|
||||
</h6>
|
||||
<h3 className="sec-title-three__title">We Are Service Your Business</h3>
|
||||
<div className="sec-title-wrapper text-center mb-50 wow fadeInUp" data-wow-delay=".3s">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
|
||||
<h3 className="sec-title__title">We Are Service Your Business</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
@ -122,9 +80,9 @@ const ServiceSection2 = () => {
|
||||
<span className={service.icon}></span>
|
||||
</div>
|
||||
<h3 className="service-three__item__title">
|
||||
<Link href={service.link}>{service.title}</Link>
|
||||
<Link href={`/services/${service.slug}`}>{service.title}</Link>
|
||||
</h3>
|
||||
<p className="service-three__item__text">{service.text}</p>
|
||||
<p className="service-three__item__text">{service.description}</p>
|
||||
</div>
|
||||
<div className="service-three__item__image">
|
||||
<img src={service.image} alt={service.title} />
|
||||
|
||||
@ -66,20 +66,20 @@ const WorkProcessSection2 = () => {
|
||||
<div className="row gy-5 gx-70 align-items-center">
|
||||
<div className="col-xl-5">
|
||||
<div className="work-process-content">
|
||||
<div className="section-title">
|
||||
<div className="subtitle text-white wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
|
||||
<span className="section-sub-title">How we do</span>
|
||||
<div className="sec-title-wrapper mb-30 wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">HOW WE DO</h6>
|
||||
<h3 className="sec-title__title">Amazing Solutions<br />For Business</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
<h2 className="title wow" data-wow-delay="0.6s" style={{ visibility: "hidden" }}>
|
||||
Amazing Solutions <br /> For business
|
||||
</h2>
|
||||
<p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
|
||||
We don't believe in a one-size-fit-all approach. Our services are carefully
|
||||
customized to suit your specific need, ensuring you to achieve your goals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-7">
|
||||
<div className="work-process-thumb wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
|
||||
|
||||
@ -9,7 +9,15 @@ interface ContactPopupProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
import ContactStatus from '../../contact/ContactStatus';
|
||||
|
||||
interface ContactPopupProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
@ -21,8 +29,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
|
||||
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 +63,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: "info@metatroncubesolutions.com",
|
||||
to: "akashlucaas@gmail.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: "",
|
||||
@ -93,28 +94,20 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
});
|
||||
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;
|
||||
|
||||
@ -148,7 +141,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
|
||||
<div className="social-links">
|
||||
<a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-facebook-f"></i></a>
|
||||
<a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-x-twitter"></i></a>
|
||||
<a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-linkedin-in"></i></a>
|
||||
<a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-youtube"></i></a>
|
||||
@ -162,34 +155,29 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
<i className="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
|
||||
{status === 'idle' || status === 'submitting' ? (
|
||||
<>
|
||||
<h3 className="form-title">Start Your Project</h3>
|
||||
|
||||
{alert.show && (
|
||||
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`}>
|
||||
{alert.message}
|
||||
</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" />
|
||||
<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">
|
||||
<input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" />
|
||||
<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">
|
||||
<input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" />
|
||||
<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">
|
||||
<input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" />
|
||||
<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-12">
|
||||
<select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select">
|
||||
<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>
|
||||
@ -207,6 +195,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
value={formData.projectRequirement}
|
||||
onChange={handleChange}
|
||||
className="form-textarea mt-3"
|
||||
disabled={status === 'submitting'}
|
||||
></textarea>
|
||||
{formErrors.projectRequirement && <small className="text-danger">{formErrors.projectRequirement}</small>}
|
||||
|
||||
@ -220,15 +209,27 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
{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-arrow-right"></i>
|
||||
<button type="submit" className="vl-btn1 submit-btn" disabled={status === 'submitting'}>
|
||||
{status === 'submitting' ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-arrow-right"></i>
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
) : (
|
||||
<div className="status-wrapper">
|
||||
<ContactStatus type={status as 'success' | 'error'} onClose={handleCloseStatus} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.status-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.contact-popup-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -277,10 +278,11 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
font-weight: 800;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.2;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.desc {
|
||||
font-size: 15px;
|
||||
opacity: 0.9;
|
||||
color: #ffffff !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.contact-details {
|
||||
@ -305,12 +307,13 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
|
||||
}
|
||||
.text p {
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
color: #ffffff !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
.text h5 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.social-links {
|
||||
display: flex;
|
||||
|
||||
40
src/components/common/SectionTitle.tsx
Normal file
40
src/components/common/SectionTitle.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
|
||||
interface SectionTitleProps {
|
||||
tagline: string;
|
||||
title: string;
|
||||
centered?: boolean;
|
||||
light?: boolean;
|
||||
showShape?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SectionTitle: React.FC<SectionTitleProps> = ({
|
||||
tagline,
|
||||
title,
|
||||
centered = false,
|
||||
light = false,
|
||||
showShape = true,
|
||||
className = "",
|
||||
}) => {
|
||||
return (
|
||||
<div className={`sec-title-wrapper p-relative ${centered ? "text-center" : ""} ${className}`}>
|
||||
<div className={`sec-title ${light ? "sec-title--light" : ""}`}>
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">{tagline}</h6>
|
||||
<h3 className={`sec-title__title ${light ? "text-white" : ""}`}
|
||||
dangerouslySetInnerHTML={{ __html: title }}
|
||||
/>
|
||||
</div>
|
||||
{showShape && (
|
||||
<img
|
||||
src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png"
|
||||
alt=""
|
||||
className="sec-title__text-shape"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionTitle;
|
||||
@ -7,11 +7,13 @@ const ContactSection = () => {
|
||||
<div className="row">
|
||||
<div className="col-lg-5 col-md-12">
|
||||
<div className="contact-info-wrapper">
|
||||
<div className="section-title-wrapper mb-40">
|
||||
<span className="section-subtitle">
|
||||
<span className="dash"></span> Contact With Us
|
||||
</span>
|
||||
<h1 className="section-title">Feel Free to Get in Touch</h1>
|
||||
<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>
|
||||
</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">
|
||||
|
||||
212
src/components/contact/ContactStatus.tsx
Normal file
212
src/components/contact/ContactStatus.tsx
Normal file
@ -0,0 +1,212 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ContactStatusProps {
|
||||
type: 'success' | 'error';
|
||||
message?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ContactStatus: React.FC<ContactStatusProps> = ({ type, message, onClose }) => {
|
||||
const isSuccess = type === 'success';
|
||||
|
||||
return (
|
||||
<div className={`status-container ${type}`}>
|
||||
<div className="status-card">
|
||||
<div className="bubbles">
|
||||
{[...Array(12)].map((_, i) => (
|
||||
<span key={i} className={`bubble bubble-${i + 1}`}></span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="icon-wrapper">
|
||||
<div className="icon-circle">
|
||||
{isSuccess ? (
|
||||
<i className="fa-solid fa-check"></i>
|
||||
) : (
|
||||
<i className="fa-solid fa-xmark"></i>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="status-title">
|
||||
{isSuccess ? 'Success' : 'Oooops'}
|
||||
</h3>
|
||||
|
||||
<p className="status-message">
|
||||
{message || (isSuccess ? 'Your message has been sent successfully.' : 'Something went wrong. Please try again.')}
|
||||
</p>
|
||||
|
||||
<button className="status-btn" onClick={onClose}>
|
||||
{isSuccess ? 'Continue' : 'Try again'}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactStatus;
|
||||
@ -3,27 +3,29 @@ import Link from 'next/link';
|
||||
|
||||
const CallAreaThree: React.FC = () => {
|
||||
return (
|
||||
<section className="call-area-three">
|
||||
<section className="call-area-three parallax-section section-space-top">
|
||||
<div
|
||||
className="call-area-three__bg"
|
||||
className="call-area-three__bg parallax-bg"
|
||||
style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/counter-area-two-bg.png)' }}
|
||||
></div>
|
||||
<div className="container">
|
||||
<div className="call-area-three__content">
|
||||
<h2 className="call-area-three__title">
|
||||
<h2 className="call-area-three__title wow fadeInUp" data-wow-delay="0.1s">
|
||||
We Are Always Ready For Every Challenge <br /> Please Trust Us
|
||||
</h2>
|
||||
<p className="call-area-three__text">
|
||||
<p className="call-area-three__text wow fadeInUp" data-wow-delay="0.2s">
|
||||
Business tailored design, management & support services Business agency, sed <br />
|
||||
tempor majority have in some we form, by injected solution.
|
||||
</p>
|
||||
<Link href="/contact" className="pelocis-btn">
|
||||
<div className="call-area-three__btn-wrapper wow fadeInUp" data-wow-delay="0.3s">
|
||||
<Link href="/contact" className="pelocis-btn pelocis-btn--premium">
|
||||
<span>
|
||||
Get A Free Quote <i className="icon-right-arrow-white"></i>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
102
src/components/home/CounterAreaThree.tsx
Normal file
102
src/components/home/CounterAreaThree.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
interface CounterProps {
|
||||
end: number;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
|
||||
const [count, setCount] = useState(0);
|
||||
const countRef = useRef<HTMLSpanElement>(null);
|
||||
const [hasStarted, setHasStarted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting && !hasStarted) {
|
||||
setHasStarted(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (countRef.current) {
|
||||
observer.observe(countRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [hasStarted]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasStarted) return;
|
||||
|
||||
let startTimestamp: number | null = null;
|
||||
const step = (timestamp: number) => {
|
||||
if (!startTimestamp) startTimestamp = timestamp;
|
||||
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
||||
setCount(Math.floor(progress * end));
|
||||
if (progress < 1) {
|
||||
window.requestAnimationFrame(step);
|
||||
}
|
||||
};
|
||||
window.requestAnimationFrame(step);
|
||||
}, [hasStarted, end, duration]);
|
||||
|
||||
return <span ref={countRef}>{count}</span>;
|
||||
};
|
||||
|
||||
const counterItems = [
|
||||
{
|
||||
icon: "/assets/imgs/icon/icon-1.png",
|
||||
count: 950,
|
||||
suffix: "k+",
|
||||
text: "Projects Succefull"
|
||||
},
|
||||
{
|
||||
icon: "/assets/imgs/icon/icon-2.png",
|
||||
count: 256,
|
||||
suffix: "k+",
|
||||
text: "Happy Customers"
|
||||
},
|
||||
{
|
||||
icon: "/assets/imgs/icon/icon-3.png",
|
||||
count: 852,
|
||||
suffix: "k+",
|
||||
text: "Consultants Planing"
|
||||
},
|
||||
{
|
||||
icon: "/assets/imgs/icon/icon-4.png",
|
||||
count: 965,
|
||||
suffix: "+",
|
||||
text: "Awards Winners"
|
||||
}
|
||||
];
|
||||
|
||||
const CounterAreaThree: React.FC = () => {
|
||||
return (
|
||||
<section className="counter-area-three">
|
||||
<div className="container">
|
||||
<ul className="counter-area-three__list">
|
||||
{counterItems.map((item, index) => (
|
||||
<li key={index} className="counter-area-three__item count-box">
|
||||
<div className="counter-area-three__icon">
|
||||
<img src={item.icon} alt="icon" />
|
||||
</div>
|
||||
<div className="counter-area-three__content">
|
||||
<h3 className="counter-area-three__count">
|
||||
<Counter end={item.count} />
|
||||
{item.suffix}
|
||||
</h3>
|
||||
<p className="counter-area-three__text">{item.text}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterAreaThree;
|
||||
@ -49,25 +49,25 @@ const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
|
||||
|
||||
const counterItems = [
|
||||
{
|
||||
icon: "icon-succefull",
|
||||
icon: "/assets/imgs/icon/icon-1.png",
|
||||
count: 950,
|
||||
suffix: "k+",
|
||||
text: "Projects Succefull"
|
||||
},
|
||||
{
|
||||
icon: "icon-customers",
|
||||
icon: "/assets/imgs/icon/icon-2.png",
|
||||
count: 256,
|
||||
suffix: "k+",
|
||||
text: "Happy Customers"
|
||||
},
|
||||
{
|
||||
icon: "icon-planing",
|
||||
icon: "/assets/imgs/icon/icon-3.png",
|
||||
count: 852,
|
||||
suffix: "k+",
|
||||
text: "Consultants Planing"
|
||||
},
|
||||
{
|
||||
icon: "icon-awards",
|
||||
icon: "/assets/imgs/icon/icon-4.png",
|
||||
count: 965,
|
||||
suffix: "+",
|
||||
text: "Awards Winners"
|
||||
@ -82,7 +82,7 @@ const CounterAreaTwo: React.FC = () => {
|
||||
{counterItems.map((item, index) => (
|
||||
<li key={index} className="counter-area-two__item count-box">
|
||||
<div className="counter-area-two__icon">
|
||||
<span className={item.icon}></span>
|
||||
<img src={item.icon} alt="icon" />
|
||||
</div>
|
||||
<div className="counter-area-two__content">
|
||||
<h3 className="counter-area-two__count">
|
||||
|
||||
@ -67,9 +67,7 @@ const HomeContactOne = () => {
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<form
|
||||
className="appointment__form contact-form-validated form-one wow fadeInUp animated"
|
||||
data-wow-duration="1500ms"
|
||||
data-wow-delay="100ms"
|
||||
className="appointment__form contact-form-validated form-one"
|
||||
action="#"
|
||||
noValidate
|
||||
>
|
||||
@ -121,8 +119,10 @@ const HomeContactOne = () => {
|
||||
}}
|
||||
>
|
||||
<option value="Select program">Select a Program</option>
|
||||
<option value="Select program 01">Select Program 01</option>
|
||||
<option value="Select program 02">Select Program 02</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="Digital Marketing">Digital Marketing</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,42 +7,42 @@ const services = [
|
||||
id: 0,
|
||||
title: "Excellent infection prevention",
|
||||
text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt",
|
||||
icon: "/assets/imgs/icon/icon-7.png",
|
||||
icon: "/assets/imgs/icon/icon-6.png",
|
||||
link: "service-details.html",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Health patients comprehensive",
|
||||
text: "From its medieval origins to the digital era , learn everything there is to know",
|
||||
icon: "/assets/imgs/icon/icon-7.png",
|
||||
icon: "/assets/imgs/icon/icon-2.png",
|
||||
link: "service-details.html",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Pediatric Hematology Oncology",
|
||||
text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the",
|
||||
icon: "/assets/imgs/icon/icon-7.png",
|
||||
icon: "/assets/imgs/icon/icon-3.png",
|
||||
link: "service-details.html",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Care Pediatric & Medicine",
|
||||
text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus",
|
||||
icon: "/assets/imgs/icon/icon-7.png",
|
||||
icon: "/assets/imgs/icon/icon-4.png",
|
||||
link: "service-details.html",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Labor & Delivery: The Birthplace",
|
||||
text: "Some claim lorem ipsum threatens to promote design over content, while others defend",
|
||||
icon: "/assets/imgs/icon/icon-7.png",
|
||||
icon: "/assets/imgs/icon/icon-5.png",
|
||||
link: "service-details.html",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Urogynecology & Pelvic Health",
|
||||
text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or",
|
||||
icon: "/assets/imgs/icon/icon-7.png",
|
||||
icon: "/assets/imgs/icon/icon-6.png",
|
||||
link: "service-details.html",
|
||||
},
|
||||
];
|
||||
@ -50,13 +50,6 @@ const services = [
|
||||
const MedicalServices = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveTab((prev) => (prev + 1) % services.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleTabClick = (e: React.MouseEvent, id: number) => {
|
||||
e.preventDefault();
|
||||
@ -65,24 +58,54 @@ const MedicalServices = () => {
|
||||
|
||||
return (
|
||||
<section
|
||||
className="medical-services-section space"
|
||||
style={{ backgroundImage: `url('/assets/img/bg/sr-bg-5-1.jpg')` }}
|
||||
data-bg-src="/assets/img/bg/sr-bg-5-1.jpg"
|
||||
className="medical-services-circle p-relative overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: `url('https://bracketweb.com/pelocishtml/assets/images/backgrounds/contact-bg-1.jpg')`,
|
||||
backgroundAttachment: 'fixed',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover'
|
||||
}}
|
||||
>
|
||||
<div className="container">
|
||||
<div
|
||||
className="section-title text-center wow fadeInUp animated"
|
||||
data-wow-delay="0.3s"
|
||||
style={{ visibility: "visible", animationDelay: "0.3s", animationName: "g" }}
|
||||
>
|
||||
<h2 className="sec-title h1">Medical <span className="inner-text">Services</span></h2>
|
||||
<p className="sec-text">Search or browse by hospital, treatment or consultant to see what can do for you</p>
|
||||
{/* Background Overlay */}
|
||||
<div className="section-overlay" style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'rgba(7, 23, 43, 0.65)',
|
||||
zIndex: 1
|
||||
}}></div>
|
||||
|
||||
{/* Decorative Elements - 4 Left, 4 Right */}
|
||||
<div className="decorative-element elem-left-1"><img src="/assets/img/elements/elements24.png" alt="shape" /></div>
|
||||
<div className="decorative-element elem-left-2"><img src="/assets/img/elements/elements23.png" alt="shape" /></div>
|
||||
{/* <div className="decorative-element elem-left-3"><img src="/assets/img/elements/elements25.png" alt="shape" style={{ opacity: 0.4 }} /></div> */}
|
||||
<div className="decorative-element elem-left-4"><img src="/assets/img/elements/elements47.png" alt="shape" style={{ opacity: 0.3 }} /></div>
|
||||
|
||||
<div className="decorative-element elem-right-1"><img src="/assets/img/elements/elements25.png" alt="shape" /></div>
|
||||
<div className="decorative-element elem-right-2"><img src="/assets/img/elements/elements24.png" alt="shape" /></div>
|
||||
{/* <div className="decorative-element elem-right-3"><img src="/assets/img/elements/elements23.png" alt="shape" style={{ opacity: 0.4 }} /></div> */}
|
||||
<div className="decorative-element elem-right-4"><img src="/assets/img/elements/elements47.png" alt="shape" style={{ opacity: 0.3 }} /></div>
|
||||
|
||||
<div className="container p-relative" style={{ zIndex: 5 }}>
|
||||
<div
|
||||
className="sec-title-wrapper text-center wow fadeInUp animated mb-50"
|
||||
data-wow-delay="0.3s"
|
||||
>
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline text-white">MEDICAL SERVICES</h6>
|
||||
<h3 className="sec-title__title text-white">Medical <span className="inner-text">Services</span></h3>
|
||||
</div>
|
||||
|
||||
<p className="sec-text mt-15 text-white">It is a long established fact that a reader will be distracted the readable content of <br /> a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
||||
</div>
|
||||
<div
|
||||
className="service-circle wow fadeInUp animated"
|
||||
data-wow-delay="0.4s"
|
||||
style={{ visibility: "visible", animationDelay: "0.4s", animationName: "g" }}
|
||||
style={{ visibility: "visible", animationDelay: "0.4s" }}
|
||||
>
|
||||
<div className="service-circle__lines">
|
||||
<div className="line"></div>
|
||||
@ -95,14 +118,24 @@ const MedicalServices = () => {
|
||||
{services.map((service, index) => (
|
||||
<li
|
||||
key={service.id}
|
||||
style={{ "--rotate-item": `${index * 60}deg` } as React.CSSProperties}
|
||||
className={activeTab === index ? "active" : ""}
|
||||
>
|
||||
{activeTab === index && <div className="active-tab-pointer"></div>}
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => handleTabClick(e, index)}
|
||||
data-tab-link={index}
|
||||
>
|
||||
<img src={service.icon} alt="icon" />
|
||||
<img
|
||||
src={service.icon}
|
||||
alt="icon"
|
||||
style={{
|
||||
"--rotate-icon": `${-(index * 60)}deg`,
|
||||
"--icon-top": "30%",
|
||||
"--icon-left": "50%"
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
@ -116,9 +149,9 @@ const MedicalServices = () => {
|
||||
data-tab-no={index}
|
||||
>
|
||||
<h3 className="service-circle__title h4">
|
||||
<a href={service.link}>{service.title}</a>
|
||||
<a href={service.link} className="text-white">{service.title}</a>
|
||||
</h3>
|
||||
<p className="service-circle__text">{service.text}</p>
|
||||
<p className="service-circle__text text-white">{service.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -1,131 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface ServiceItem {
|
||||
id: number;
|
||||
icon: string;
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const services: ServiceItem[] = [
|
||||
{
|
||||
id: 0,
|
||||
icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-1.jpg", // Using logical equivalents
|
||||
title: "Excellent infection prevention",
|
||||
text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-2.jpg",
|
||||
title: "Health patients comprehensive",
|
||||
text: "From its medieval origins to the digital era , learn everything there is to know"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-3.jpg",
|
||||
title: "Pediatric Hematology Oncology",
|
||||
text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-4.jpg",
|
||||
title: "Care Pediatric & Medicine",
|
||||
text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-5.jpg",
|
||||
title: "Labor & Delivery: The Birthplace",
|
||||
text: "Some claim lorem ipsum threatens to promote design over content, while others defend"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-6.jpg",
|
||||
title: "Urogynecology & Pelvic Health",
|
||||
text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or"
|
||||
}
|
||||
];
|
||||
|
||||
const MedicalServicesCircle: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveTab((prev) => (prev + 1) % services.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleTabClick = (e: React.MouseEvent, id: number) => {
|
||||
e.preventDefault();
|
||||
setActiveTab(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="medical-services-circle space" style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/video-one-bg.jpg)' }}>
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<h2 className="sec-title h1">Medical <span className="inner-text">Services</span></h2>
|
||||
<p className="sec-text">Search or browse by hospital, treatment or consultant to see what can do for you</p>
|
||||
<div className="sec-icon2">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/sec-title-shape-1.png" alt="icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="service-circle">
|
||||
<div className="service-circle__lines">
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
</div>
|
||||
|
||||
<nav className="service-circle__menu">
|
||||
<ul>
|
||||
{services.map((service, index) => (
|
||||
<li
|
||||
key={service.id}
|
||||
className={activeTab === service.id ? 'active' : ''}
|
||||
style={{ '--rotate-item': `${index * 60}deg` } as React.CSSProperties}
|
||||
>
|
||||
<a href="#" onClick={(e) => handleTabClick(e, service.id)}>
|
||||
<img
|
||||
src={service.icon}
|
||||
alt="icon"
|
||||
style={{
|
||||
'--rotate-icon': `-${index * 60}deg`,
|
||||
'--icon-left': index === 2 || index === 3 ? '46%' : index === 4 ? '48%' : '50%',
|
||||
'--icon-top': index === 2 ? '34%' : '35%'
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className="service-circle__center">
|
||||
{services.map((service) => (
|
||||
<div
|
||||
key={service.id}
|
||||
className={`service-circle__item ${activeTab === service.id ? 'active' : ''}`}
|
||||
>
|
||||
<div className="service-circle__item-inner">
|
||||
<h3 className="service-circle__title h4">
|
||||
<Link href="/service-details">{service.title}</Link>
|
||||
</h3>
|
||||
<p className="service-circle__text">{service.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MedicalServicesCircle;
|
||||
115
src/components/home/ProjectsSection.tsx
Normal file
115
src/components/home/ProjectsSection.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const projectsData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Cognitive Psychology",
|
||||
description: "Supporting individuals in overcoming and for their quality of life whether solution.",
|
||||
image: "/assets/imgs/project/project-1.jpg",
|
||||
category: "counseling"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Relationship Counseling",
|
||||
description: "Helping couples build stronger connections and resolve conflicts effectively.",
|
||||
image: "/assets/imgs/project/project-2.jpg",
|
||||
category: "relationship"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Team Support",
|
||||
description: "Enhancing workplace dynamics and providing support for professional teams.",
|
||||
image: "/assets/imgs/project/project-3.jpg",
|
||||
category: "team-support"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Family Therapy",
|
||||
description: "Guidance for families navigating transitions and challenging situations.",
|
||||
image: "/assets/imgs/project/project-4.jpg",
|
||||
category: "counseling"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Executive Coaching",
|
||||
description: "Professional development and mental wellness for corporate leaders.",
|
||||
image: "/assets/imgs/project/project-5.jpg",
|
||||
category: "team-support"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Child Psychology",
|
||||
description: "Specialized support for children's emotional and behavioral development.",
|
||||
image: "/assets/imgs/project/project-6.jpg",
|
||||
category: "counseling"
|
||||
}
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ label: "All", filter: "all" },
|
||||
{ label: "Counseling", filter: "counseling" },
|
||||
{ label: "Relationship", filter: "relationship" },
|
||||
{ label: "Team Support", filter: "team-support" }
|
||||
];
|
||||
|
||||
const ProjectsSection = () => {
|
||||
const [activeFilter, setActiveFilter] = useState("all");
|
||||
|
||||
const filteredProjects = projectsData.filter(project =>
|
||||
activeFilter === "all" || project.category.includes(activeFilter)
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="projects-one">
|
||||
<div className="container">
|
||||
<div className="text-center projects-one__title">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">Our Recent Work</h6>
|
||||
<h3 className="sec-title__title">Our Case Studies Best Quality <br /> Psychology & Counseling</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="list-unstyled post-filter projects-one__filter__list">
|
||||
{categories.map((cat, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={activeFilter === cat.filter ? "active" : ""}
|
||||
onClick={() => setActiveFilter(cat.filter)}
|
||||
>
|
||||
{cat.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="projects-grid">
|
||||
{filteredProjects.map((project) => (
|
||||
<div key={project.id} className="project-item">
|
||||
<div className="projects-one__card">
|
||||
<img src={project.image} alt={project.title} />
|
||||
<div className="projects-one__card__hover d-flex">
|
||||
<div className="projects-one__card__hover-mask"></div>
|
||||
<div className="projects-one__card__hover-content-inner">
|
||||
<div className="projects-one__card__hover-text">
|
||||
<h3><Link href="/projects-details">{project.title}</Link></h3>
|
||||
<p>{project.description}</p>
|
||||
</div>
|
||||
<div className="projects-one__card__hover-item"></div>
|
||||
<Link href="/projects-details" className="projects-one__card__hover-link">
|
||||
<i className="fa fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectsSection;
|
||||
@ -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: '-367.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: '-367.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>
|
||||
|
||||
@ -39,9 +39,13 @@ const AboutSection = () => {
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
||||
<div className="about-us-content-area p-relative z-1 pl-30">
|
||||
<div className="title-box mb-35 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">About Us</span>
|
||||
<h3 className="section-title mt-10">Selecting the Finest IT Service Provider</h3>
|
||||
<div className="sec-title-wrapper wow fadeInLeft mb-35" data-wow-delay=".5s">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">ABOUT US</h6>
|
||||
<h3 className="sec-title__title">Selecting the Finest IT<br />Service Provider</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
<p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
||||
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
|
||||
|
||||
@ -5,9 +5,13 @@ const BlogSection = ({ hideHeader = false }: { hideHeader?: boolean }) => (
|
||||
<section className="blog-section-one section-space">
|
||||
<div className="small-container">
|
||||
{!hideHeader && (
|
||||
<div className="title-box mb-40 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">LATEST blog</span>
|
||||
<h3 className="section-title mt-10">Latest Blog Insights</h3>
|
||||
<div className="sec-title-wrapper wow fadeInLeft mb-50" data-wow-delay=".5s">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">LATEST BLOG</h6>
|
||||
<h3 className="sec-title__title">Latest Blog Insights</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
)}
|
||||
<div className="row g-4">
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
import SectionTitle from "@/components/common/SectionTitle";
|
||||
|
||||
const BrandSection = () => {
|
||||
return (
|
||||
<div className="brand-section section-space-top section-space-bottom">
|
||||
<section className="brand-section section-space-top section-space-bottom">
|
||||
<div className="container">
|
||||
<SectionTitle
|
||||
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">
|
||||
<div className="swiper-wrapper">
|
||||
@ -15,6 +23,7 @@ const BrandSection = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -7,9 +7,13 @@ const ChooseSection = () => (
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 p-relative section-space-medium-bottom">
|
||||
<div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">why choose us</span>
|
||||
<h3 className="section-title mt-10">What's Make Us Different</h3>
|
||||
<div className="sec-title-wrapper wow fadeInLeft mb-50" data-wow-delay=".5s">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">WHY CHOOSE US</h6>
|
||||
<h3 className="sec-title__title">What's Make Us Different</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
{[
|
||||
{ icon: "fa-solid fa-building", title: "Commercial Service", delay: ".5s" },
|
||||
|
||||
@ -2,52 +2,11 @@
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { psychologyServices } from "@/utils/data";
|
||||
import { ServiceType } from "@/types";
|
||||
|
||||
const ServiceThreeSlider = () => {
|
||||
const services = [
|
||||
{
|
||||
title: "Network Infrastructure",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-network-wired",
|
||||
image: "/assets/img/about/about-img14.png",
|
||||
link: "/services"
|
||||
},
|
||||
{
|
||||
title: "Data Management",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-database",
|
||||
image: "/assets/img/about/about-img15.png",
|
||||
link: "/services"
|
||||
},
|
||||
{
|
||||
title: "Technology Solution",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-microchip",
|
||||
image: "/assets/img/about/about-img13.png",
|
||||
link: "/services"
|
||||
},
|
||||
{
|
||||
title: "Cloud Computing",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-cloud",
|
||||
image: "/assets/img/about/about-img14.png",
|
||||
link: "/services"
|
||||
},
|
||||
{
|
||||
title: "Cyber Security",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-shield-halved",
|
||||
image: "/assets/img/about/about-img15.png",
|
||||
link: "/services"
|
||||
},
|
||||
{
|
||||
title: "IT Consultancy",
|
||||
text: "Solution the connection, we create platforms business Solution",
|
||||
icon: "fa-solid fa-user-tie",
|
||||
image: "/assets/img/about/about-img13.png",
|
||||
link: "/services"
|
||||
}
|
||||
];
|
||||
const services: ServiceType[] = psychologyServices;
|
||||
|
||||
return (
|
||||
<section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
|
||||
@ -58,9 +17,13 @@ const ServiceThreeSlider = () => {
|
||||
<div className="small-container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-xxl-6 col-xl-6">
|
||||
<div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title no-border text-white">OUR BEST SERVICE</span>
|
||||
<h3 className="section-title mt-10 text-white">We Are Service Your Business</h3>
|
||||
<div className="sec-title-wrapper mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<div className="sec-title sec-title--light">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
|
||||
<h3 className="sec-title__title text-white">We Are Service Your Business</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6">
|
||||
@ -83,9 +46,9 @@ const ServiceThreeSlider = () => {
|
||||
<span className={service.icon}></span>
|
||||
</div>
|
||||
<h3 className="service-three__item__title">
|
||||
<Link href={service.link}>{service.title}</Link>
|
||||
<Link href={`/services/${service.slug}`}>{service.title}</Link>
|
||||
</h3>
|
||||
<p className="service-three__item__text text-white">{service.text}</p>
|
||||
<p className="service-three__item__text text-white">{service.description}</p>
|
||||
</div>
|
||||
<div className="service-three__item__image">
|
||||
<img src={service.image} alt={service.title} className="service-img-fixed" />
|
||||
@ -96,89 +59,6 @@ const ServiceThreeSlider = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.dark-bg {
|
||||
background: #07172b !important;
|
||||
}
|
||||
.text-white {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.section-sub-title.text-white::before {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.service-three__item {
|
||||
margin-top: 40px;
|
||||
// background: #fff;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
.service-three__item__content {
|
||||
padding: 0 28px 30px;
|
||||
}
|
||||
.service-three__item__icon {
|
||||
position: relative;
|
||||
top: -40px;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
background-color: #f1f5f9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto -20px;
|
||||
color: #3779b9;
|
||||
font-size: 36px;
|
||||
transition: all 500ms ease;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.service-three__item:hover .service-three__item__icon {
|
||||
background-color: #3779b9;
|
||||
color: #fff;
|
||||
}
|
||||
.service-three__item__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.service-three__item__title a {
|
||||
color: #1a1f2b !important;
|
||||
}
|
||||
.service-three__item__text {
|
||||
font-size: 15px;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.service-three__item__image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
.service-img-fixed {
|
||||
width: 100%;
|
||||
height: 250px !important;
|
||||
object-fit: cover;
|
||||
clip-path: polygon(0% 0%, 100% 0, 100% 69%, 50% 100%, 0 69%);
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
.service-three__item:hover .service-img-fixed {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.slider-nav-btn {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.slider-nav-btn:hover {
|
||||
background: #3779b9;
|
||||
border-color: #3779b9;
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -18,9 +18,13 @@ const TestimonialsSection = () => (
|
||||
<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="title-box wow fadeInLeft mb-60" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">Testimonials</span>
|
||||
<h3 className="section-title mt-10">Our Client Feedback</h3>
|
||||
<div className="sec-title-wrapper wow fadeInLeft mb-60" 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">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">
|
||||
|
||||
@ -28,9 +28,13 @@ const About2Section = () => (
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12">
|
||||
<div className="about-2-content-area pl-50">
|
||||
<div className="title-box mb-35 wow fadeInRight" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">About Us</span>
|
||||
<h3 className="section-title mt-10">We Strive To Offer Intelligent Business Solutions</h3>
|
||||
<div className="sec-title-wrapper wow fadeInRight mb-35" data-wow-delay=".5s">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">ABOUT US</h6>
|
||||
<h3 className="sec-title__title">We Strive To Offer Intelligent<br />Business Solutions</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
<p className="mb-35">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
||||
<div className="row mb-45">
|
||||
|
||||
@ -4,9 +4,13 @@ const WorkProcessSection = () => (
|
||||
<section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}>
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/line.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="title-box text-center mb-60 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">Working Process</span>
|
||||
<h3 className="section-title mt-10">Our Development Process</h3>
|
||||
<div className="sec-title-wrapper text-center mb-60 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">WORKING PROCESS</h6>
|
||||
<h3 className="sec-title__title">Our Development Process</h3>
|
||||
</div>
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
{[
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import SectionTitle from "@/components/common/SectionTitle";
|
||||
|
||||
const ChooseSection = () => (
|
||||
<section className="choose-3-section p-relative section-space" style={{ backgroundImage: "url(/assets/imgs/bg/choose-bg-2.png)" }}>
|
||||
@ -26,10 +27,11 @@ const ChooseSection = () => (
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
||||
<div className="choose-3-content-area pl-60 pt-20 p-relative">
|
||||
<div className="title-box mb-25 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title no-border">WHY Choose US</span>
|
||||
<h3 className="section-title mt-10">Elevate Your Achievements Using Premier IT Solutions</h3>
|
||||
</div>
|
||||
<SectionTitle
|
||||
tagline="WHY CHOOSE US"
|
||||
title="Elevate Your Achievements Using Premier IT Solutions"
|
||||
className="mb-25 wow fadeInLeft"
|
||||
/>
|
||||
<p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
||||
<div className="row g-4 pt-35">
|
||||
{[
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import NavMenu from "./NavMenu";
|
||||
|
||||
@ -32,15 +32,15 @@ const AboutService = () => {
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="content-area pl-60">
|
||||
<div className="section-title-wrapper mb-30">
|
||||
<span className="section-subtitle">
|
||||
<i className="fa-solid fa-play rotate-triangle"></i> OUR ABOUT US
|
||||
</span>
|
||||
<h2 className="section-title">
|
||||
We Provide Professional Advice About This Business.
|
||||
</h2>
|
||||
<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,
|
||||
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>
|
||||
|
||||
88
src/components/services/ServiceDetails.tsx
Normal file
88
src/components/services/ServiceDetails.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { ServiceType } from "@/types";
|
||||
import { psychologyServices } from "@/utils/data";
|
||||
|
||||
interface ServiceDetailsProps {
|
||||
service: ServiceType;
|
||||
}
|
||||
|
||||
const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
||||
useEffect(() => {
|
||||
const init = () => {
|
||||
if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
|
||||
(window as any).initMetatron();
|
||||
} else {
|
||||
setTimeout(init, 100);
|
||||
}
|
||||
};
|
||||
init();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="service-details section-space">
|
||||
<div className="container">
|
||||
<div className="row gutter-y-30">
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<div className="service-sidebar">
|
||||
<div className="service-sidebar__single">
|
||||
<h3 className="service-sidebar__title">All Services</h3>
|
||||
<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}`}>
|
||||
{item.title}
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="service-sidebar__single">
|
||||
<div className="service-sidebar__contact">
|
||||
<div className="service-sidebar__contact-bg" style={{ backgroundImage: "url(/assets/imgs/resources/service-sidebar-contact-bg.jpg)" }}></div>
|
||||
<div className="service-sidebar__contact-icon">
|
||||
<i className="fa-solid fa-phone-volume"></i>
|
||||
</div>
|
||||
<h3 className="service-sidebar__contact-title">Free for This <br /> First Contact Now</h3>
|
||||
<p className="service-sidebar__contact-phone">
|
||||
<a href="tel:+11234751328">+11234 751 328</a>
|
||||
</p>
|
||||
<div className="service-sidebar__contact-btn">
|
||||
<Link href="/contact" className="theme-btn">
|
||||
CALL NOW
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-8">
|
||||
<div className="service-details__content">
|
||||
<div className="service-details__thumbnail">
|
||||
<img src={service.image} alt={service.title} />
|
||||
</div>
|
||||
<h3 className="service-details__title">{service.title}</h3>
|
||||
<p className="service-details__text">{service.description}</p>
|
||||
|
||||
{service.content && (
|
||||
<div
|
||||
className="service-details__dynamic-content"
|
||||
dangerouslySetInnerHTML={{ __html: service.content }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceDetails;
|
||||
@ -4,6 +4,8 @@ export interface ServiceType {
|
||||
image?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
slug?: string;
|
||||
content?: string;
|
||||
}
|
||||
|
||||
export interface CaseStudyType {
|
||||
|
||||
@ -546,3 +546,204 @@ export const pricingPlans: PricingType[] = [
|
||||
link: '#'
|
||||
}
|
||||
];
|
||||
|
||||
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",
|
||||
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>
|
||||
<p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
<div class="service-details__benefit">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__content">
|
||||
<h3 class="service-details__benefit__title">Our Benefits</h3>
|
||||
<p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
|
||||
<ul class="list-unstyled service-details__benefit__list">
|
||||
<li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
|
||||
<li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
|
||||
<p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
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",
|
||||
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>
|
||||
<p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
<div class="service-details__benefit">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__content">
|
||||
<h3 class="service-details__benefit__title">Our Benefits</h3>
|
||||
<p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
|
||||
<ul class="list-unstyled service-details__benefit__list">
|
||||
<li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
|
||||
<li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
|
||||
<p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Career Counseling",
|
||||
slug: "career-counseling",
|
||||
icon: "fa-solid fa-user-tie",
|
||||
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>
|
||||
<p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
<div class="service-details__benefit">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__content">
|
||||
<h3 class="service-details__benefit__title">Our Benefits</h3>
|
||||
<p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
|
||||
<ul class="list-unstyled service-details__benefit__list">
|
||||
<li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
|
||||
<li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
|
||||
<p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Clinical Psychology",
|
||||
slug: "clinical-psychology",
|
||||
icon: "fa-solid fa-stethoscope",
|
||||
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>
|
||||
<p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
<div class="service-details__benefit">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__content">
|
||||
<h3 class="service-details__benefit__title">Our Benefits</h3>
|
||||
<p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
|
||||
<ul class="list-unstyled service-details__benefit__list">
|
||||
<li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
|
||||
<li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
|
||||
<p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
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",
|
||||
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>
|
||||
<p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
<div class="service-details__benefit">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__content">
|
||||
<h3 class="service-details__benefit__title">Our Benefits</h3>
|
||||
<p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
|
||||
<ul class="list-unstyled service-details__benefit__list">
|
||||
<li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
|
||||
<li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
|
||||
<p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
`
|
||||
},
|
||||
{
|
||||
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",
|
||||
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>
|
||||
<p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
<div class="service-details__benefit">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__content">
|
||||
<h3 class="service-details__benefit__title">Our Benefits</h3>
|
||||
<p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
|
||||
<ul class="list-unstyled service-details__benefit__list">
|
||||
<li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
|
||||
<li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
|
||||
<p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
|
||||
`
|
||||
}
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user