107 lines
5.6 KiB
TypeScript
107 lines
5.6 KiB
TypeScript
"use client";
|
||
|
||
const floatingItems = [
|
||
{
|
||
className: "item-1",
|
||
icon: "/assets/img-app/home/section1/user.webp",
|
||
title: "User-Centered UI/UX Design",
|
||
desc: "Intuitive User Experience",
|
||
},
|
||
{
|
||
className: "item-2",
|
||
icon: "/assets/img-app/home/section1/custom.webp",
|
||
title: "Custom App Development",
|
||
desc: "Tailored App Solutions",
|
||
},
|
||
{
|
||
className: "item-3",
|
||
icon: "/assets/img-app/home/section1/end.webp",
|
||
title: "End-to-End Project Management",
|
||
desc: "Complete Project Execution",
|
||
},
|
||
{
|
||
className: "item-4",
|
||
icon: "/assets/img-app/home/section1/platform.webp",
|
||
title: "Cross-Platform & Native Apps",
|
||
desc: "Multi-Platform Development",
|
||
},
|
||
];
|
||
|
||
const BannerBottom = () => {
|
||
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 Build Powerful Mobile Apps</h5>
|
||
<h4 className="title-font">End-to-End App Development Services</h4>
|
||
<p className="desc-font">
|
||
We create high-performance mobile applications tailored to your business goals and user needs. From in-depth research and wireframing to intuitive UI/UX design, development, API integration, testing, and launch — we manage the complete lifecycle.
|
||
</p>
|
||
<p className="desc-font">
|
||
Our apps are built for speed, security, scalability, and seamless performance across devices. Whether it’s Android, iOS, or cross-platform, we ensure your product is future-ready and built to grow with your business.</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 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
|
||
src="/assets/img-app/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">Secure, High-Performance & Future-Ready Apps</h4>
|
||
<p className="desc-font mt-2">
|
||
Our mobile apps are optimized for speed, security, and scalability. We use modern development frameworks and strong backend architecture to ensure smooth functionality, data protection, and long-term growth.
|
||
</p>
|
||
<p className="desc-font mt-2">
|
||
We build apps that are reliable, fast-loading, and ready for future upgrades.</p>
|
||
<div className="call-info-box d-flex align-items-center mt-3 justify-content-md-end justify-content-center">
|
||
<div className="call-icon-bg">
|
||
<img src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" />
|
||
</div>
|
||
<div className="call-details ms-3">
|
||
<span>Speak With Our App Experts Today</span>
|
||
<h3 className="phone-number">
|
||
<a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a>
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default BannerBottom;
|