180 lines
7.0 KiB
JavaScript
180 lines
7.0 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import ContactPopup from "./ContactPopup";
|
|
import ConsenHead from "@/src/ConsenHead";
|
|
|
|
const WhoCanBenifit = () => {
|
|
const [showPopup, setShowPopup] = useState(false);
|
|
|
|
const benefits = [
|
|
{
|
|
icon: "fas fa-rocket",
|
|
title: "Startups",
|
|
desc: "Turn your vision into a scalable mobile product."
|
|
},
|
|
{
|
|
icon: "fas fa-chart-line",
|
|
title: "Enterprises",
|
|
desc: "Streamline operations with high-performance apps."
|
|
},
|
|
{
|
|
icon: "fas fa-lightbulb",
|
|
title: "Entrepreneurs",
|
|
desc: "Bring your innovative ideas to the hands of millions."
|
|
},
|
|
{
|
|
icon: "fas fa-store",
|
|
title: "Small Businesses",
|
|
desc: "Engage customers and boost loyalty with direct access."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<style jsx>{`
|
|
.benefit-section {
|
|
padding: 80px 0;
|
|
background-color: #f7fbff;
|
|
}
|
|
.benefit-dark-card {
|
|
background: linear-gradient(135deg, #0a1c36 0%, #1d4d7c 100%);
|
|
padding: 50px;
|
|
border-radius: 30px;
|
|
color: #fff;
|
|
box-shadow: 0 20px 50px rgba(10, 28, 54, 0.2);
|
|
height: 100%;
|
|
}
|
|
.benefit-list-item {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding: 20px 25px;
|
|
border-radius: 15px;
|
|
margin-bottom: 20px;
|
|
transition: all 0.4s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.benefit-list-item:hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
transform: translateX(15px);
|
|
border-color: #3779b9;
|
|
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.2);
|
|
}
|
|
.benefit-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(55, 121, 185, 0.15);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #3779b9;
|
|
font-size: 22px;
|
|
margin-right: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.benefit-list-item:hover .benefit-icon {
|
|
background: #3779b9;
|
|
color: #fff;
|
|
transform: rotate(10deg);
|
|
}
|
|
.benefit-text h4 {
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
margin-bottom: 5px;
|
|
color: #fff;
|
|
}
|
|
.benefit-text p {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
margin: 0;
|
|
}
|
|
.benefit-image-box {
|
|
border-radius: 30px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
|
|
height: 100%;
|
|
}
|
|
.benefit-image-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.benefit-btn {
|
|
background: #3779b9;
|
|
color: #fff;
|
|
padding: 16px 35px;
|
|
border-radius: 50px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
}
|
|
.benefit-btn:hover {
|
|
background: #fff;
|
|
color: #3779b9;
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
}
|
|
`}</style>
|
|
|
|
<div className="benefit-section">
|
|
<div className="container">
|
|
<div className="row justify-content-center text-center mb-60">
|
|
<div className="col-lg-12">
|
|
<div className="consen-section-title">
|
|
<h2 style={{ fontSize: '38px', fontWeight: 800 }}>Is This Service <span>Right for You?</span></h2>
|
|
<p className="mt-3" style={{ color: '#666', fontSize: '17px' }}>We empower diverse clients to succeed in the mobile-first world.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row align-items-stretch">
|
|
<div className="col-lg-6">
|
|
<div className="benefit-dark-card wow fadeInLeft">
|
|
<div className="benefit-list">
|
|
{benefits.map((item, index) => (
|
|
<div key={index} className="benefit-list-item">
|
|
<div className="benefit-icon">
|
|
<i className={item.icon}></i>
|
|
</div>
|
|
<div className="benefit-text">
|
|
<h4>{item.title}</h4>
|
|
<p>{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
className="benefit-btn"
|
|
onClick={() => setShowPopup(true)}
|
|
>
|
|
Check If We Are a Good Fit <i className="fas fa-arrow-right ms-3"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-6">
|
|
<div className="benefit-image-box wow fadeInRight image-section">
|
|
<img
|
|
src="/assets/images/Mobile-app-development-service/wireframing.webp"
|
|
alt="Benefits of App Development"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default WhoCanBenifit;
|