diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx
index 6c98219..c039dd9 100644
--- a/src/components/ProductCard.jsx
+++ b/src/components/ProductCard.jsx
@@ -2,9 +2,9 @@ import { motion, useReducedMotion } from 'framer-motion';
import { assetUrl } from '../lib/assetUrl';
const ACCENT_GRADIENTS = [
- 'radial-gradient(circle at top right, rgba(139, 92, 246, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
- 'radial-gradient(circle at top right, rgba(16, 185, 129, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
- 'radial-gradient(circle at top right, rgba(245, 158, 11, 0.08) 0%, transparent 50%), linear-gradient(to bottom, #FAF9FA 0%, #F6F2F5 100%)',
+ 'linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(235, 252, 240, 0.5) 100%)',
+ 'linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(250, 243, 255, 0.5) 100%)',
+ 'linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(254, 252, 232, 0.5) 100%)',
];
export default function ProductCard({ product, isMobile, delay = 0, index = 0 }) {
@@ -12,9 +12,28 @@ export default function ProductCard({ product, isMobile, delay = 0, index = 0 })
const shouldReduceMotion = useReducedMotion();
const dashWidth = isMobile ? '92%' : '520px';
- const dashLeft = isMobile ? '4%' : '32%';
- const dashHeight = isMobile ? '200px' : '320px';
- const shadowHeight = isMobile ? '170px' : '280px';
+ const dashLeft = isMobile ? '4%' : '20px';
+ const dashHeight = isMobile ? '220px' : '300px';
+
+ // Badge position configurations matching exact design screenshot
+ const statPositions = [
+ // Index 0: Nebula AI Platform
+ [
+ { bottom: '25px', left: '20px', bg: 'rgba(30, 30, 35, 0.65)', color: '#ffffff' }, // Bottom Left: 60% Faster Process Automation
+ { top: '15px', right: '15px', bg: 'rgba(30, 30, 35, 0.65)', color: '#ffffff' } // Top Right: 24/7 AI Driven Assistance
+ ],
+ // Index 1: PRODMAX
+ [
+ { top: '40px', left: '15px', bg: 'rgba(255, 255, 255, 0.65)', color: '#000000' }, // Top/Middle Left: 5%+ OEE Improvement
+ { bottom: '15px', right: '15px', bg: 'rgba(30, 30, 35, 0.65)', color: '#ffffff' } // Bottom Right: 15% Reduction in Downtime
+ ],
+ // Index 2: Budgie
+ [
+ { bottom: '40px', left: '20px', bg: 'rgba(255, 255, 255, 0.75)', color: '#166534' } // Bottom Left: 40% Faster HR Operations
+ ]
+ ];
+
+ const currentPos = statPositions[index % statPositions.length] || [];
return (
{
if (isMobile) return;
e.currentTarget.style.transform = 'translateY(-6px)';
- e.currentTarget.style.boxShadow = '0 10px 30px rgba(255, 170, 0, 0.2)';
- e.currentTarget.style.borderColor = '#ffaa00';
+ e.currentTarget.style.boxShadow = '0 12px 35px rgba(0, 0, 0, 0.08)';
+ e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.15)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)';
- e.currentTarget.style.boxShadow = '0 4px 24px rgba(234, 227, 232, 0.25)';
- e.currentTarget.style.borderColor = '#EAE3E8';
+ e.currentTarget.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.04)';
+ e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.08)';
}}
>
-
-
+ {/* Dashboard Image Container */}
-
-
})
+
+ {/* Floating Stat Badges */}
+ {product.stats?.map((stat, sIdx) => {
+ const pos = currentPos[sIdx] || {};
+ return (
+
+
+ {stat.value}
+
+
+ {stat.label}
+
+
+ );
+ })}
-
- {product.stats?.[0] && (
-
-
- {product.stats[0].value}
-
-
- {product.stats[0].label}
-
-
- )}
-
- {product.stats?.[1] && (
-
-
- {product.stats[1].value}
-
-
- {product.stats[1].label}
-
-
- )}
);
diff --git a/src/data/site.js b/src/data/site.js
index 6455af9..62f4e2e 100644
--- a/src/data/site.js
+++ b/src/data/site.js
@@ -3,95 +3,79 @@ export const services = [
id: "ai-data-services",
number: "01",
title: "AI & Data Services",
- boldStatement: "Your Data, Unlocked.",
- description: "Harness Generative AI, Agentic AI, and predictive analytics to automate complex workflows, predict market shifts, and unlock hidden revenue — powered by modern AI architectures.",
+ boldStatement: "Stop drowning in dashboards. Start acting on insights.",
+ description: "Leverage Generative AI, Agentic AI, predictive analytics, and conversational intelligence to automate operations, predict outcomes, and unlock hidden value in your data.",
capabilities: [
- "Generative AI & LLM Solutions",
- "Agentic AI & Autonomous Systems",
- "Predictive Analytics & Forecasting",
- "Conversational AI & Enterprise Assistants"
+ "Generative AI & LLMs – Create, summarise, and innovate at lightspeed.",
+ "Agentic AI – Autonomous AI that executes, not just suggests.",
+ "Predictive Analytics – Forecast demand, risks, and opportunities with precision.",
+ "Conversational AI – Intelligent assistants your team actually loves using."
],
cta: "Explore AI Solutions",
glowColor: "radial-gradient(circle at bottom right, rgba(255, 120, 0, 0.15) 0%, rgba(2, 7, 16, 0) 70%)",
borderColor: "rgba(255, 120, 0, 0.12)"
},
{
- id: "sap-managed-services",
+ id: "enterprise-software",
number: "02",
- title: "SAP Managed Services",
- boldStatement: "SAP That Works. So You Can Focus.",
- description: "Certified SAP consultants delivering functional expertise, ABAP development, security, upgrades, and license optimization — keeping your enterprise running smooth and audit-ready.",
+ title: "Enterprise Software",
+ boldStatement: "Built to Scale. Built for Your Complexity.",
+ description: "Bespoke enterprise applications, mobile & web solutions, legacy modernisation, and intelligent workflow automation tailored to your unique operations.",
capabilities: [
- "SAP Functional Consulting",
- "SAP ABAP Development",
- "SAP Security & Compliance",
- "SAP Upgrades & Optimization"
+ "Custom Enterprise Applications – Perfect fit, zero compromise.",
+ "Mobile & Web Development – Intuitive experiences that drive adoption.",
+ "Modernisation Services – Transform legacy systems into future-ready platforms.",
+ "Workflow Automation – Eliminate manual tasks. Accelerate outcomes."
+ ],
+ cta: "Explore Software Solutions",
+ glowColor: "radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.12) 0%, rgba(255, 120, 0, 0.08) 50%, rgba(2, 7, 16, 0) 100%)",
+ borderColor: "rgba(59, 130, 246, 0.12)"
+ },
+ {
+ id: "sap-managed-services",
+ number: "03",
+ title: "SAP Managed Services",
+ boldStatement: "SAP That Doesn't Break. Growth That Doesn't Stop.",
+ description: "Certified SAP experts delivering functional excellence, ABAP development, robust security, compliance, and seamless upgrades with zero disruption.",
+ capabilities: [
+ "SAP Functional Consulting – Deep industry-specific expertise.",
+ "ABAP Development – Reliable, high-performance custom solutions.",
+ "Security & Compliance – Audit-ready, always secure.",
+ "Upgrades & Optimization – Reduce costs while future-proofing your SAP landscape."
],
cta: "Explore SAP Solutions",
glowColor: "radial-gradient(circle at bottom right, rgba(0, 240, 255, 0.15) 0%, rgba(2, 7, 16, 0) 70%)",
borderColor: "rgba(0, 240, 255, 0.12)"
},
{
- id: "enterprise-development",
- number: "03",
- title: "Enterprise Development",
- boldStatement: "Built to Scale With You.",
- description: "Custom enterprise applications that modernize legacy workflows, connect business systems, and deliver reliable digital operations as your organization evolves.",
- capabilities: [
- "Custom Enterprise Applications",
- "Mobile & Web Platforms",
- "Modernization of Legacy Systems",
- "Workflow Automation"
- ],
- cta: "Explore Enterprise Solutions",
- glowColor: "radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.12) 0%, rgba(255, 120, 0, 0.08) 50%, rgba(2, 7, 16, 0) 100%)",
- borderColor: "rgba(59, 130, 246, 0.12)"
- },
- {
- id: "architecture-as-a-service",
+ id: "smart-factory",
number: "04",
- title: "Architecture as a Service",
- boldStatement: "Design the Foundation Before You Build.",
- description: "We help businesses define scalable technology architecture, integration models, cloud strategy, and modernization roadmaps before execution begins.",
+ title: "Smart Factory",
+ boldStatement: "Stop Guessing. Start Optimising with Intelligence.",
+ description: "PRODMAX – Our AI-powered Industrial IoT platform connects every machine, turning live factory data into actionable intelligence with real-time OEE, energy optimisation, complete traceability, predictive maintenance, and AI-driven operations.",
capabilities: [
- "Enterprise Architecture",
- "Solution Architecture",
- "Cloud Architecture",
- "Integration Architecture"
- ],
- cta: "Explore Architecture Solutions",
- glowColor: "radial-gradient(circle at bottom right, rgba(29, 78, 216, 0.15) 0%, rgba(2, 7, 16, 0) 70%)",
- borderColor: "rgba(29, 78, 216, 0.12)"
- },
- {
- id: "smart-factory-iot",
- number: "05",
- title: "Smart Factory / Industrial IoT",
- boldStatement: "Make Operations Visible, Connected, and Intelligent.",
- description: "Connect machines, sensors, production systems, and dashboards to enable real-time monitoring, predictive maintenance, and smarter factory decisions.",
- capabilities: [
- "Industrial IoT Integration",
- "Real-Time Machine Monitoring",
- "Predictive Maintenance",
- "Factory Dashboards"
+ "OEE Monitoring – Maximum visibility. Maximum efficiency.",
+ "Energy Management – Lower costs. Reduce emissions.",
+ "Traceability & WMS – Complete product and material visibility.",
+ "AI Vision & Predictive Maintenance – Detect issues early. Prevent failures before they impact production."
],
cta: "Explore Smart Factory Solutions",
glowColor: "radial-gradient(circle at bottom right, rgba(255, 120, 0, 0.08) 0%, rgba(59, 130, 246, 0.08) 50%, rgba(2, 7, 16, 0) 100%)",
borderColor: "rgba(255, 120, 0, 0.1)"
},
{
- id: "ar-vr-solutions-digifox",
- number: "06",
- title: "AR/VR Solutions — DigiFox",
- boldStatement: "Immersive Experiences for Training, Learning, and Visualization.",
- description: "Create virtual environments, simulations, AR product experiences, and immersive learning platforms that improve engagement, understanding, and retention.",
+ id: "ar-vr-immersive-tech",
+ number: "05",
+ title: "AR/VR & Immersive Tech",
+ boldStatement: "Train in VR. Perform with Zero Real-World Risk.",
+ description: "Immersive VR, mixed reality, and digital twin solutions that improve knowledge retention by up to 75%, reduce workplace incidents, and accelerate workforce capability - all in safe, controlled environments.",
capabilities: [
- "VR Training Simulations",
- "AR Product Visualization",
- "Immersive Learning Experiences",
- "3D Interaction Design"
+ "VR Safety Training – Hands-on learning without real-world consequences.",
+ "Mixed Reality – Seamless blend of physical and digital.",
+ "Digital Twins – Simulate, optimise, and innovate.",
+ "XR Learning Platforms – Next-generation training today."
],
- cta: "Explore DigiFox Solutions",
+ cta: "Explore AR/VR Solutions",
glowColor: "radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.15) 0%, rgba(2, 7, 16, 0) 70%)",
borderColor: "rgba(139, 92, 246, 0.12)"
}
diff --git a/src/index.css b/src/index.css
index b8bd57e..e727fa7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -196,10 +196,22 @@ body {
background: var(--border-glow);
}
-/* Blog Carousel */
+/* Blog & Services Carousel */
+.blog-carousel,
+.services-carousel {
+ overflow-x: auto;
+ overflow-y: hidden;
+ touch-action: pan-x pan-y;
+ overscroll-behavior-x: contain;
+ overscroll-behavior-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
.blog-carousel::-webkit-scrollbar,
.services-carousel::-webkit-scrollbar {
- display: none;
+ display: none !important;
+ width: 0 !important;
+ height: 0 !important;
}
.blog-card:hover .blog-card-img {