224 lines
9.3 KiB
JavaScript
224 lines
9.3 KiB
JavaScript
"use client";
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import ConsenHead from "@/src/ConsenHead";
|
|
import ContactPopup from "./ContactPopup";
|
|
|
|
const WeServe = () => {
|
|
const [showPopup, setShowPopup] = useState(false);
|
|
|
|
// Using specific colors and icons to match a premium aesthetic.
|
|
// Fallback images are retained, but we prioritise a clean icon look if possible.
|
|
const features = [
|
|
{
|
|
img: "/assets/images/Mobile-app-development-service/retail.webp",
|
|
text: "E-commerce & Retail",
|
|
bgColor: "#E3F2FD", // Light Blue
|
|
iconColor: "#2196F3",
|
|
delay: ".1s",
|
|
icon: "fas fa-shopping-cart"
|
|
},
|
|
{
|
|
img: "/assets/images/Mobile-app-development-service/fitness.webp",
|
|
text: "Healthcare & Fitness",
|
|
bgColor: "#FBE9E7", // Light Orange
|
|
iconColor: "#FF5722",
|
|
delay: ".2s",
|
|
icon: "fas fa-heartbeat"
|
|
},
|
|
{
|
|
img: "/assets/images/Mobile-app-development-service/education.webp",
|
|
text: "Education & E-learning",
|
|
bgColor: "#F3E5F5", // Light Purple
|
|
iconColor: "#9C27B0",
|
|
delay: ".3s",
|
|
icon: "fas fa-graduation-cap"
|
|
},
|
|
{
|
|
img: "/assets/images/Mobile-app-development-service/finance.webp",
|
|
text: "Finance & Banking",
|
|
bgColor: "#E8F5E9", // Light Green
|
|
iconColor: "#4CAF50",
|
|
delay: ".4s",
|
|
icon: "fas fa-university"
|
|
},
|
|
// Second Row
|
|
{
|
|
img: "/assets/images/Mobile-app-development-service/food.webp",
|
|
text: "Food Delivery & Restaurants",
|
|
bgColor: "#FFF3E0", // Light Amber
|
|
iconColor: "#FF9800",
|
|
delay: ".15s",
|
|
icon: "fas fa-utensils"
|
|
},
|
|
{
|
|
img: "/assets/images/Mobile-app-development-service/transport.webp",
|
|
text: "Transport & Logistics",
|
|
bgColor: "#E0F2F1", // Light Teal
|
|
iconColor: "#009688",
|
|
delay: ".25s",
|
|
icon: "fas fa-truck"
|
|
},
|
|
{
|
|
img: "/assets/images/Mobile-app-development-service/entertainment.webp",
|
|
text: "Entertainment & Media",
|
|
bgColor: "#FFEBEE", // Light Red
|
|
iconColor: "#E91E63",
|
|
delay: ".35s",
|
|
icon: "fas fa-music"
|
|
},
|
|
];
|
|
|
|
const firstRow = features.slice(0, 4);
|
|
const secondRow = features.slice(4, 7);
|
|
|
|
return (
|
|
<>
|
|
<style jsx>{`
|
|
.industry-serve-area {
|
|
padding: 80px 0;
|
|
background-image: linear-gradient(rgba(10, 28, 54, 0.92), rgba(10, 28, 54, 0.92)), url('/assets/images/Mobile-app-development-service/banner-bg.webp');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.consen-section-title h2 {
|
|
color: #fff !important;
|
|
}
|
|
.section-subtitle {
|
|
color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
.industry-card {
|
|
background: rgba(255, 255, 255, 0.07) !important;
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.industry-text h4 {
|
|
color: #fff !important;
|
|
}
|
|
.industry-icon {
|
|
background: rgba(255, 255, 255, 0.15) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.industry-icon i {
|
|
color: #fff !important;
|
|
transition: none !important;
|
|
}
|
|
.industry-card:hover .industry-icon {
|
|
background: #3779b9 !important;
|
|
}
|
|
.industry-card:hover .industry-icon i {
|
|
color: #fff !important;
|
|
}
|
|
.industry-card:hover {
|
|
background: rgba(255, 255, 255, 0.12) !important;
|
|
transform: translateY(-8px) scale(1.03);
|
|
border-color: rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
.abouts-button a {
|
|
background: #3779b9;
|
|
color: #fff;
|
|
padding: 15px 35px;
|
|
border-radius: 50px;
|
|
font-weight: 700;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3);
|
|
}
|
|
.abouts-button a:hover {
|
|
background: #fff;
|
|
color: #3779b9;
|
|
transform: translateY(-3px);
|
|
}
|
|
`}</style>
|
|
|
|
<div className="industry-serve-area">
|
|
<div className="container">
|
|
|
|
<div className="row justify-content-center text-center">
|
|
<div className="col-lg-12">
|
|
<div className="consen-section-title">
|
|
<h2>
|
|
Apps That Power <span>Every Industry</span>
|
|
</h2>
|
|
<p className="section-subtitle">We build scalable solutions tailored to your specific business needs.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="industry-grid-container">
|
|
{/* First Row: 4 Items */}
|
|
<div className="row industry-row mb-4 justify-content-center">
|
|
{firstRow.map((feature, index) => (
|
|
<div className="col-lg-3 col-md-6 mb-4" key={index}>
|
|
<div
|
|
className="industry-card wow fadeInUp"
|
|
data-wow-delay={feature.delay}
|
|
>
|
|
<div className="industry-icon">
|
|
{/* Using FontAwesome for cleaner scalable icons as per screenshot aesthetic
|
|
If you prefer images, uncomment the image tag and comment out the i tag */}
|
|
<i className={feature.icon}></i>
|
|
{/* <img src={feature.img} alt={feature.text} className="img-fluid" /> */}
|
|
</div>
|
|
<div className="industry-text">
|
|
<h4>{feature.text}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Second Row: 3 Items */}
|
|
<div className="row industry-row justify-content-center">
|
|
{secondRow.map((feature, index) => (
|
|
<div className="col-lg-4 col-md-6 mb-4" key={index + 4}>
|
|
<div
|
|
className="industry-card wow fadeInUp"
|
|
data-wow-delay={feature.delay}
|
|
>
|
|
<div className="industry-icon">
|
|
<i className={feature.icon}></i>
|
|
</div>
|
|
<div className="industry-text">
|
|
<h4>{feature.text}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-12 pl-0 text-center mt-4">
|
|
<div className="abouts-button">
|
|
<div className="new-button mb-3">
|
|
<Link legacyBehavior href="/about">
|
|
<a
|
|
className="mt-4"
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setShowPopup(true);
|
|
}}
|
|
>
|
|
See Case Studies in Your Industry
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default WeServe;
|