135 lines
6.8 KiB
TypeScript
135 lines
6.8 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
|
||
|
||
const floatingItems = [
|
||
{
|
||
className: "item-1",
|
||
icon: "/assets/img/home/section1/custom.webp",
|
||
title: "Custom Solutions",
|
||
desc: "Built for your goals",
|
||
},
|
||
{
|
||
className: "item-2",
|
||
icon: "/assets/img/home/section1/seo.webp",
|
||
title: "SEO Optimized",
|
||
desc: "Better visibility",
|
||
},
|
||
{
|
||
className: "item-3",
|
||
icon: "/assets/img/home/section1/end.webp",
|
||
title: "End-to-End Support",
|
||
desc: "Design to launch",
|
||
},
|
||
{
|
||
className: "item-4",
|
||
icon: "/assets/img/home/section1/responsive.webp",
|
||
title: "Responsive Design",
|
||
desc: "All devices perfect",
|
||
},
|
||
];
|
||
|
||
const BannerBottom = () => {
|
||
const [isContactOpen, setIsContactOpen] = useState(false);
|
||
|
||
return (
|
||
<section className="bannerbottom-section website-service-strip">
|
||
<div className="container">
|
||
<div className="bottom-info-strip">
|
||
<div className="row align-items-center g-4">
|
||
|
||
{/* Left Column */}
|
||
<div className="col-lg-3 col-md-12">
|
||
<div className="info-column-left">
|
||
<h5 className="script-font">We Guarantee</h5>
|
||
<h4 className="title-font">Complete Website Development Solutions</h4>
|
||
<p className="desc-font">
|
||
We design and develop high-performing websites tailored to your business goals. From strategy and UI/UX design to development and launch, every project is built for speed, scalability, and lead generation. Our focus is not just design — it’s measurable growth.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Center Column - Illustration with Floating Icons */}
|
||
<div className="col-lg-6 col-md-12 text-center">
|
||
<div className="central-illustration-wrap position-relative">
|
||
<div className="floating-items-container">
|
||
{floatingItems.map((item, idx) => (
|
||
<div key={item.className} className={`floating-item ${item.className}`}>
|
||
<div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}>
|
||
<img loading="lazy" src={item.icon} alt={item.title} />
|
||
</div>
|
||
<div className="floating-content">
|
||
<h6>{item.title}</h6>
|
||
<p>{item.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Central hero image */}
|
||
<img
|
||
loading="lazy"
|
||
src="/assets/img/home/section1/second-section-centre-img.webp"
|
||
alt="Digital Solutions Illustration"
|
||
className="main-delivery-img img-fluid mt-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column */}
|
||
<div className="col-lg-3 col-md-12">
|
||
<div className="info-column-right text-md-end text-center">
|
||
<h4 className="title-font">High-Performance, Secure & Future-Ready Websites</h4>
|
||
<p className="desc-font mt-2">
|
||
Our websites are designed for performance, speed, and scalability. With strong technical architecture and modern frameworks, we deliver fast-loading, secure, and user-friendly digital experiences that convert visitors into customers.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/* Centered Call Box at the Bottom of Logo/Illustration */}
|
||
<div className="row">
|
||
<div className="col-lg-12 text-center">
|
||
<div className="call-box-container" style={{ display: 'inline-block' }}>
|
||
<div
|
||
className="call-info-box d-flex align-items-center justify-content-center"
|
||
onClick={() => setIsContactOpen(true)}
|
||
style={{
|
||
cursor: 'pointer',
|
||
background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
|
||
padding: '10px 25px',
|
||
borderRadius: '10px',
|
||
border: '1px solid rgba(55, 121, 185, 0.2)',
|
||
transition: 'all 0.3s'
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
|
||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important';
|
||
e.currentTarget.style.transform = 'translateY(0)';
|
||
}}
|
||
>
|
||
<div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
|
||
<img loading="lazy" src="/assets/img/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" style={{ width: '20px' }} />
|
||
</div>
|
||
<div className="call-details ms-2">
|
||
<span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our Experts Today</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default BannerBottom;
|