2025-09-01 18:16:11 +05:30
import React from "react" ;
import { Navigation } from "../components/Navigation" ;
import { Footer } from "../components/Footer" ;
import { Button } from "../components/ui/button" ;
import { Badge } from "../components/ui/badge" ;
import { Card , CardContent } from "../components/ui/card" ;
import { ArrowRight , Calendar , Users , Smartphone , Globe , Monitor , Check , Star , TrendingUp , Factory , Shield , Zap , Settings , Target , AlertCircle , Clock , Database , Wifi , BarChart3 , Bell , Activity , Wrench , Brain } from "lucide-react" ;
2025-09-23 20:13:31 +05:30
import { useNavigate } from "react-router-dom" ;
2025-09-01 18:16:11 +05:30
// import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png";
const vib360Image = "https://via.placeholder.com/600x600.png?text=VIB360+Platform+Image" ;
export const VIB360Project = ( ) = > {
2025-09-23 20:13:31 +05:30
const navigate = useNavigate ( ) ;
2025-09-01 18:16:11 +05:30
return (
< div className = "dark min-h-screen bg-background" >
2025-09-23 20:13:31 +05:30
{ /* <Navigation /> */ }
2025-09-01 18:16:11 +05:30
{ /* Hero Section */ }
< section className = "pt-24 pb-16 bg-background relative overflow-hidden" >
< div className = "absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" / >
< div className = "container mx-auto px-6 lg:px-8 relative" >
< div className = "grid lg:grid-cols-2 gap-12 items-center" >
< div >
< div className = "flex items-center gap-2 mb-6" >
< Badge className = "bg-[#E5195E]/10 text-[#E5195E] border border-[#E5195E]/20 font-manrope" >
< Activity className = "w-4 h-4 mr-2" / >
Industrial IoT Case Study
< / Badge >
< / div >
< h1 className = "text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope" >
VIB360 Platform
< / h1 >
< p className = "text-xl text-muted-foreground mb-8 font-manrope" >
Industrial IoT Vibration Monitoring & Predictive Maintenance Platform - AI - enabled solution for real - time monitoring and operational efficiency
< / p >
{ /* Tech Stack */ }
< div className = "flex flex-wrap gap-2 mb-8" >
{ [ "React.js" , "React Native" , "Node.js" , "PostgreSQL" , "InfluxDB" , "TensorFlow" , "AWS IoT" ] . map ( ( tech ) = > (
< Badge key = { tech } variant = "outline" className = "border-white/20 text-white font-manrope" >
{ tech }
< / Badge >
) ) }
< / div >
{ /* Key Metrics */ }
< div className = "grid grid-cols-2 md:grid-cols-4 gap-4 mb-8" >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< Calendar className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > 8 months < / div >
< div className = "text-xs text-muted-foreground font-manrope" > Duration < / div >
< / div >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< Users className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > 9 experts < / div >
< div className = "text-xs text-muted-foreground font-manrope" > Team Size < / div >
< / div >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< Globe className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > Web / Android / iOS < / div >
< div className = "text-xs text-muted-foreground font-manrope" > Platforms < / div >
< / div >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< TrendingUp className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > 92 % < / div >
< div className = "text-xs text-muted-foreground font-manrope" > AI Accuracy < / div >
< / div >
< / div >
{ /* Key Achievements */ }
< div className = "space-y-3 mb-8" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Key Achievements : < / h3 >
{ [
"Deployed across 15 industrial sites in first phase" ,
"Achieved 92% accuracy in predicting bearing and motor faults" ,
"Reduced unplanned downtime by 27% in pilot plants" ,
"Built comprehensive AI-enabled predictive maintenance platform"
] . map ( ( achievement , index ) = > (
< div key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { achievement } < / span >
< / div >
) ) }
< / div >
{ /* CTA Buttons */ }
< div className = "flex flex-col sm:flex-row gap-4" >
< Button
size = "lg"
className = "bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/start-a-project' ) }
2025-09-01 18:16:11 +05:30
>
Build Your IoT Platform
< ArrowRight className = "w-5 h-5 ml-2" / >
< / Button >
< Button
size = "lg"
variant = "outline"
className = "border-white/20 text-white hover:bg-white/10 font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/case-studies' ) }
2025-09-01 18:16:11 +05:30
>
View More Cases
< / Button >
< / div >
< / div >
< div className = "relative" >
< div className = "aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10" >
< img
src = { vib360Image }
alt = "VIB360 Industrial IoT Vibration Monitoring Platform"
className = "w-full h-full object-cover rounded-lg"
/ >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Executive Summary */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-6 font-manrope" > Executive Summary < / h2 >
< p className = "text-lg text-muted-foreground leading-relaxed font-manrope mb-6" >
VIB360 enables industrial operators to monitor vibration levels in real time , detect early signs of mechanical failure , and schedule maintenance proactively . The platform integrates IoT sensor hardware with cloud - based analytics , delivering actionable insights directly to technicians and management .
< / p >
< p className = "text-lg text-muted-foreground leading-relaxed font-manrope" >
The comprehensive solution addresses unplanned equipment failures that can lead to massive operational losses by continuously monitoring vibration signatures , identifying anomalies , and predicting failures before they happen across manufacturing , mining , and energy industries .
< / p >
< / div >
< / div >
< / section >
{ /* Project Overview */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Project Overview < / h2 >
< div className = "grid md:grid-cols-3 gap-8" >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< Target className = "w-8 h-8 text-[#E5195E] mb-4" / >
< h3 className = "text-xl font-semibold text-white mb-3 font-manrope" > Background & Context < / h3 >
< p className = "text-muted-foreground font-manrope" >
Unplanned equipment failures can lead to massive operational losses in industries such as manufacturing , mining , and energy . Traditional maintenance schedules are often inefficient , either wasting resources on unnecessary checks or missing early fault signs . VIB360 addresses this by continuously monitoring vibration signatures , identifying anomalies , and predicting failures before they happen .
< / p >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< Users className = "w-8 h-8 text-[#E5195E] mb-4" / >
< h3 className = "text-xl font-semibold text-white mb-3 font-manrope" > Target Audience < / h3 >
< p className = "text-muted-foreground font-manrope" >
Plant maintenance managers responsible for equipment upkeep , reliability engineers focused on preventing failures , and industrial operations supervisors overseeing production efficiency and equipment performance monitoring .
< / p >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< TrendingUp className = "w-8 h-8 text-[#E5195E] mb-4" / >
< h3 className = "text-xl font-semibold text-white mb-3 font-manrope" > Business Objectives < / h3 >
< p className = "text-muted-foreground font-manrope" >
Enable real - time vibration monitoring with minimal installation overhead , provide predictive analytics to reduce downtime and maintenance costs , deliver a scalable platform that can integrate with existing SCADA and ERP systems , and ensure secure remote access to sensor data for distributed teams .
< / p >
< / CardContent >
< / Card >
< / div >
< / div >
< / div >
< / section >
{ /* Project Scope */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Project Scope < / h2 >
< div className = "grid md:grid-cols-2 gap-12" >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Core Features < / h3 >
< div className = "space-y-4" >
{ [
"Real-Time Vibration Monitoring with threshold-based alerts" ,
"Predictive Maintenance Dashboard with AI-driven failure forecasts" ,
"Multi-Sensor Support for motors, pumps, compressors, and turbines" ,
"Mobile App for Field Technicians with push notifications and offline data sync" ,
"Customizable Alert Rules and maintenance scheduling" ,
"Integration API for SCADA/ERP connectivity"
] . map ( ( feature , index ) = > (
< div key = { index } className = "flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope text-sm" > { feature } < / span >
< / div >
) ) }
< / div >
< / div >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Technical Requirements < / h3 >
< div className = "space-y-4" >
{ [
"BLE & Wi-Fi connectivity for IoT devices" ,
"Time-series database for high-frequency sensor data storage" ,
"AI anomaly detection engine trained on vibration datasets" ,
"Secure cloud communication (TLS 1.3 encryption)" ,
"Mobile offline mode for sites with poor connectivity"
] . map ( ( requirement , index ) = > (
< div key = { index } className = "flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10" >
< Shield className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope text-sm" > { requirement } < / span >
< / div >
) ) }
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Challenges & Solution Architecture */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Challenges & Solution Architecture < / h2 >
< div className = "grid md:grid-cols-2 gap-12 mb-16" >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Technical Challenges < / h3 >
< div className = "space-y-4" >
{ [
"Handling high-volume vibration data without latency" ,
"Training AI models on limited historical fault data" ,
"Ensuring sensor accuracy in harsh industrial conditions"
] . map ( ( challenge , index ) = > (
< div key = { index } className = "flex items-start gap-3" >
< AlertCircle className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope" > { challenge } < / span >
< / div >
) ) }
< / div >
< / div >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Project Management Challenges < / h3 >
< div className = "space-y-4" >
{ [
"Coordinating sensor hardware deployment with software rollouts" ,
"Managing change adoption in traditional maintenance workflows" ,
"Aligning development timelines with client's phased deployment strategy"
] . map ( ( challenge , index ) = > (
< div key = { index } className = "flex items-start gap-3" >
< AlertCircle className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope" > { challenge } < / span >
< / div >
) ) }
< / div >
< / div >
< / div >
< div className = "bg-card/50 p-8 rounded-xl border border-white/10" >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Technical Architecture < / h3 >
< div className = "grid md:grid-cols-2 gap-8" >
< div >
< h4 className = "text-lg font-semibold text-white mb-4 font-manrope" > Technology Stack < / h4 >
< div className = "space-y-3" >
{ [
{ label : "Hardware Integration" , value : "IoT vibration sensors (BLE & Wi-Fi enabled)" } ,
{ label : "Frontend" , value : "React.js, React Native" } ,
{ label : "Backend" , value : "Node.js, Express.js" } ,
{ label : "Database" , value : "PostgreSQL, InfluxDB (time-series data)" } ,
{ label : "AI/ML" , value : "TensorFlow for anomaly detection & predictive analytics" } ,
{ label : "Cloud Services" , value : "AWS IoT Core, AWS Lambda, S3, CloudWatch" }
] . map ( ( item , index ) = > (
< div key = { index } className = "flex justify-between items-center p-3 bg-background/50 rounded-lg border border-white/10" >
< span className = "text-muted-foreground font-manrope" > { item . label } : < / span >
< span className = "text-white font-medium font-manrope text-sm" > { item . value } < / span >
< / div >
) ) }
< / div >
< / div >
< div >
< h4 className = "text-lg font-semibold text-white mb-4 font-manrope" > Architecture Highlights < / h4 >
< div className = "space-y-3" >
{ [
"AWS IoT Core for device-to-cloud communication" ,
"InfluxDB for storing high-frequency time-series vibration data" ,
"AI microservice for anomaly detection and fault prediction" ,
"React.js web dashboard with real-time visualizations" ,
"React Native mobile app for technician workflows" ,
"Event-driven architecture with AWS Lambda for alert processing"
] . map ( ( highlight , index ) = > (
< div key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground text-sm font-manrope" > { highlight } < / span >
< / div >
) ) }
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Development Process */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Development Process & Methodology < / h2 >
< div className = "mb-12" >
< div className = "text-center mb-8" >
< p className = "text-lg text-muted-foreground font-manrope" >
< strong > Agile < / strong > ( 2 - week sprints ) with sprint reviews with hardware + software teams , field testing after each major release , iterative model retraining with new sensor data
< / p >
< / div >
< div className = "grid md:grid-cols-2 lg:grid-cols-3 gap-6" >
{ [
{
phase : "Discovery & Planning" ,
duration : "3 weeks" ,
description : "Hardware-software integration feasibility, AI model baseline setup"
} ,
{
phase : "Design & Prototyping" ,
duration : "5 weeks" ,
description : "Sensor data visualization mockups, mobile UI/UX for technician workflows"
} ,
{
phase : "Core Platform Development" ,
duration : "12 weeks" ,
description : "Sensor connectivity modules, time-series data ingestion pipeline, web dashboard core features"
} ,
{
phase : "AI & Analytics Module" ,
duration : "6 weeks" ,
description : "Model training & tuning, predictive maintenance alerts"
} ,
{
phase : "Integration & Testing" ,
duration : "5 weeks" ,
description : "SCADA/ERP integration APIs, field testing in pilot plants"
} ,
{
phase : "Deployment & Training" ,
duration : "3 weeks" ,
description : "Rollout to initial sites, staff training & documentation"
}
] . map ( ( item , index ) = > (
< Card key = { index } className = "bg-background/50 border-white/10" >
< CardContent className = "p-6" >
< div className = "flex items-center justify-between mb-3" >
< div className = "w-8 h-8 bg-[#E5195E] rounded-full flex items-center justify-center text-white font-bold text-sm font-manrope" >
{ index + 1 }
< / div >
< Badge variant = "outline" className = "border-[#E5195E]/30 text-[#E5195E] font-manrope" >
{ item . duration }
< / Badge >
< / div >
< h3 className = "text-lg font-semibold text-white mb-2 font-manrope" > { item . phase } < / h3 >
< p className = "text-sm text-muted-foreground font-manrope" > { item . description } < / p >
< / CardContent >
< / Card >
) ) }
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Key Features */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Key Features & Functionality < / h2 >
< div className = "grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12" >
{ [
{
icon : BarChart3 ,
title : "Live Vibration Graphs" ,
description : "Real-time sensor readings displayed in dashboards"
} ,
{
icon : Brain ,
title : "Fault Prediction" ,
description : "Early detection of mechanical issues with confidence scores"
} ,
{
icon : Wrench ,
title : "Maintenance Scheduling" ,
description : "Automated work orders based on AI insights"
} ,
{
icon : Bell ,
title : "Multi-Device Alerts" ,
description : "Email, SMS, and push notifications"
} ,
{
icon : Database ,
title : "Data Export" ,
description : "CSV, PDF, and API access for further analysis"
} ,
{
icon : Wifi ,
title : "IoT Connectivity" ,
description : "BLE & Wi-Fi enabled vibration sensor integration"
}
] . map ( ( feature , index ) = > (
< Card key = { index } className = "bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300" >
< CardContent className = "p-6 text-center" >
< feature.icon className = "w-8 h-8 text-[#E5195E] mx-auto mb-4" / >
< h3 className = "text-lg font-semibold text-white mb-3 font-manrope" > { feature . title } < / h3 >
< p className = "text-muted-foreground text-sm font-manrope" > { feature . description } < / p >
< / CardContent >
< / Card >
) ) }
< / div >
< / div >
< / div >
< / section >
{ /* Results & Impact */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Results & Impact < / h2 >
< div className = "grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12" >
{ [
{ label : "Site Deployments" , value : "15" , icon : Factory , desc : "industrial sites" } ,
{ label : "AI Accuracy" , value : "92%" , icon : Brain , desc : "fault prediction" } ,
{ label : "Downtime Reduction" , value : "27%" , icon : TrendingUp , desc : "first 3 months" } ,
{ label : "Data Latency" , value : "<2s" , icon : Zap , desc : "sensor to dashboard" }
] . map ( ( metric , index ) = > (
< Card key = { index } className = "bg-background/50 border-white/10 text-center" >
< CardContent className = "p-6" >
< metric.icon className = "w-8 h-8 text-[#E5195E] mx-auto mb-3" / >
< div className = "text-2xl font-bold text-white mb-1 font-manrope" > { metric . value } < / div >
< div className = "text-muted-foreground text-sm font-manrope" > { metric . label } < / div >
< div className = "text-xs text-muted-foreground font-manrope" > { metric . desc } < / div >
< / CardContent >
< / Card >
) ) }
< / div >
< div className = "grid md:grid-cols-2 gap-8" >
< div >
< h3 className = "text-xl font-semibold text-white mb-4 font-manrope" > Business Impact < / h3 >
< ul className = "space-y-3" >
{ [
"27% downtime reduction in first 3 months" ,
"15% cost savings in maintenance budgets" ,
"Increased maintenance team efficiency with targeted inspections"
] . map ( ( impact , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { impact } < / span >
< / li >
) ) }
< / ul >
< / div >
< div >
< h3 className = "text-xl font-semibold text-white mb-4 font-manrope" > Technical Performance < / h3 >
< ul className = "space-y-3" >
{ [
"Data ingestion latency: < 2 seconds from sensor to dashboard" ,
"AI fault prediction accuracy: 92%" ,
"99.9% platform uptime since launch"
] . map ( ( performance , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { performance } < / span >
< / li >
) ) }
< / ul >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Lessons Learned */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Lessons Learned & Best Practices < / h2 >
< div className = "grid md:grid-cols-2 gap-8" >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > What Worked Well < / h3 >
< ul className = "space-y-2" >
{ [
"Parallel hardware and software development accelerated delivery" ,
"Continuous AI retraining improved prediction accuracy over time"
] . map ( ( item , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Check className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { item } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Key Learnings < / h3 >
< ul className = "space-y-2" >
{ [
"On-site calibration is critical to sensor performance" ,
"Edge processing could further reduce cloud costs in future phases"
] . map ( ( item , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< TrendingUp className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { item } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< / div >
< / div >
< / div >
< / section >
{ /* Client Testimonial */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto text-center" >
< div className = "flex justify-center mb-6" >
{ [ . . . Array ( 5 ) ] . map ( ( _ , i ) = > (
< Star key = { i } className = "w-6 h-6 text-[#E5195E] fill-current" / >
) ) }
< / div >
< blockquote className = "text-xl md:text-2xl text-white mb-6 font-manrope italic" >
"With VIB360, we've transformed our maintenance strategy from reactive to proactive. The accuracy of fault predictions and the ease of use for our technicians have been game changers."
< / blockquote >
< div className = "text-muted-foreground font-manrope" >
< div className = "font-semibold text-white" > Maintenance Director < / div >
< div > Industrial Manufacturing Client < / div >
< / div >
< / div >
< / div >
< / section >
{ /* Future Roadmap */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-8 text-center font-manrope" > Future Roadmap < / h2 >
< div className = "grid md:grid-cols-2 gap-8" >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Next 6 Months < / h3 >
< ul className = "space-y-2" >
{ [
"Edge AI integration for on-device anomaly detection" ,
"Expanded sensor compatibility (temperature, pressure)"
] . map ( ( feature , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Clock className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { feature } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Next 12 Months < / h3 >
< ul className = "space-y-2" >
{ [
"Multi-site centralized monitoring for enterprise clients" ,
"Predictive spare parts inventory management"
] . map ( ( vision , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Target className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { vision } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< / div >
< / div >
< / div >
< / section >
{ /* CTA Section */ }
< section className = "py-16 bg-gradient-to-r from-[#E5195E]/10 via-background to-[#E5195E]/10" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto text-center" >
< h2 className = "text-3xl md:text-4xl font-bold text-white mb-6 font-manrope" >
Ready to Build Your Industrial IoT Solution ?
< / h2 >
< p className = "text-lg text-muted-foreground mb-8 font-manrope" >
Create advanced predictive maintenance platforms with AI - enabled vibration monitoring and real - time analytics for industrial excellence .
< / p >
< div className = "flex flex-col sm:flex-row gap-4 justify-center" >
< Button
size = "lg"
className = "bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/start-a-project' ) }
2025-09-01 18:16:11 +05:30
>
Start Your Project
< ArrowRight className = "w-5 h-5 ml-2" / >
< / Button >
< Button
size = "lg"
variant = "outline"
className = "border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/case-studies' ) }
2025-09-01 18:16:11 +05:30
>
View More Cases
< / Button >
< / div >
< / div >
< / div >
< / section >
2025-09-23 20:13:31 +05:30
{ /* <Footer /> */ }
2025-09-01 18:16:11 +05:30
< / div >
) ;
} ;
