428 lines
17 KiB
TypeScript
428 lines
17 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import { useState, useEffect } from "react";
|
|
|
|
const HomeBanner = () => {
|
|
const [currentTextIndex, setCurrentTextIndex] = useState(0);
|
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
|
|
// Fix viewport height for mobile browsers (especially iOS Safari)
|
|
useEffect(() => {
|
|
const setVH = () => {
|
|
const vh = window.innerHeight * 0.01;
|
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
};
|
|
|
|
setVH();
|
|
window.addEventListener('resize', setVH);
|
|
window.addEventListener('orientationchange', setVH);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', setVH);
|
|
window.removeEventListener('orientationchange', setVH);
|
|
};
|
|
}, []);
|
|
|
|
// Static banner slides data based on actual services
|
|
const carouselTexts = [
|
|
{
|
|
id: 1,
|
|
badge: "Custom Development",
|
|
icon: "fa-solid fa-code",
|
|
heading: "Tailored Enterprise Software ",
|
|
highlight: "Development",
|
|
subheading: "Aligned with Your Business Goals",
|
|
description: "We design and build custom digital solutions that deliver reliable, scalable, and future-ready applications, driving measurable value and competitive advantage for your enterprise.",
|
|
button_text: "Explore Solutions",
|
|
button_url: "/services/custom-software-development",
|
|
is_active: true,
|
|
display_order: 1,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 2,
|
|
badge: "Business Intelligence",
|
|
icon: "fa-solid fa-brain",
|
|
heading: "AI-Powered ",
|
|
highlight: "Analytics",
|
|
subheading: "Transform Data into Insights",
|
|
description: "Turn enterprise data into actionable intelligence with advanced AI and machine learning, enabling smarter decisions, performance optimization, and data-driven innovation.",
|
|
button_text: "Discover AI Solutions",
|
|
button_url: "/services/ai-powered-business-intelligence",
|
|
is_active: true,
|
|
display_order: 2,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 3,
|
|
badge: "System Integration",
|
|
icon: "fa-solid fa-plug",
|
|
heading: "Enterprise Systems ",
|
|
highlight: "Integration",
|
|
subheading: "Seamless Connectivity",
|
|
description: "Connect everything — from payment systems and ERP platforms to cloud services, enabling your enterprise to operate seamlessly across physical and digital environments.",
|
|
button_text: "View Integrations",
|
|
button_url: "/services/external-systems-integrations",
|
|
is_active: true,
|
|
display_order: 3,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 4,
|
|
badge: "Incident Management",
|
|
icon: "fa-solid fa-bell",
|
|
heading: "Intelligent Incident ",
|
|
highlight: "Management",
|
|
subheading: "Minimize Downtime & Protect Trust",
|
|
description: "Cloud-based incident management that empowers teams to detect, respond, and resolve issues faster, reducing downtime and maintaining customer confidence.",
|
|
button_text: "Learn More",
|
|
button_url: "/services/incident-management-saas",
|
|
is_active: true,
|
|
display_order: 4,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
}
|
|
];
|
|
|
|
// Carousel rotation effect
|
|
useEffect(() => {
|
|
if (carouselTexts.length <= 1) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setIsTransitioning(true);
|
|
|
|
setTimeout(() => {
|
|
setCurrentTextIndex((prevIndex) =>
|
|
prevIndex === carouselTexts.length - 1 ? 0 : prevIndex + 1
|
|
);
|
|
setIsTransitioning(false);
|
|
}, 1000); // Slightly longer for smoother transition
|
|
}, 6000); // Increased interval for slower changes
|
|
|
|
return () => clearInterval(interval);
|
|
}, [carouselTexts.length]);
|
|
|
|
const currentText = carouselTexts[currentTextIndex];
|
|
|
|
if (!currentText) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className="modern-banner">
|
|
<div className="banner-background">
|
|
<div className="gradient-orb orb-1"></div>
|
|
<div className="gradient-orb orb-2"></div>
|
|
<div className="gradient-orb orb-3"></div>
|
|
|
|
{/* Industrial Enterprise Background Elements */}
|
|
<div className="enterprise-bg-elements">
|
|
{/* Flying Code Elements */}
|
|
<div className="flying-code">
|
|
<div className="code-snippet code-1">
|
|
<span className="code-line">const enterprise = {'{'}</span>
|
|
<span className="code-line"> security: 'enterprise-grade',</span>
|
|
<span className="code-line"> scalability: 'unlimited'</span>
|
|
<span className="code-line">{'}'};</span>
|
|
</div>
|
|
<div className="code-snippet code-2">
|
|
<span className="code-line">if (security === 'max') {'{'}</span>
|
|
<span className="code-line"> deploy.enterprise();</span>
|
|
<span className="code-line">{'}'}</span>
|
|
</div>
|
|
<div className="code-snippet code-3">
|
|
<span className="code-line">class EnterpriseSoftware {'{'}</span>
|
|
<span className="code-line"> constructor() {'{'}</span>
|
|
<span className="code-line"> this.secure = true;</span>
|
|
<span className="code-line"> {'}'}</span>
|
|
<span className="code-line">{'}'}</span>
|
|
</div>
|
|
<div className="code-snippet code-4">
|
|
<span className="code-line">API.authenticate({'{'}</span>
|
|
<span className="code-line"> level: 'enterprise',</span>
|
|
<span className="code-line"> encryption: 'AES-256'</span>
|
|
<span className="code-line">{'}'});</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Industrial Grid */}
|
|
<div className="industrial-grid">
|
|
<div className="grid-line horizontal h-1"></div>
|
|
<div className="grid-line horizontal h-2"></div>
|
|
<div className="grid-line horizontal h-3"></div>
|
|
<div className="grid-line horizontal h-4"></div>
|
|
<div className="grid-line vertical v-1"></div>
|
|
<div className="grid-line vertical v-2"></div>
|
|
<div className="grid-line vertical v-3"></div>
|
|
<div className="grid-line vertical v-4"></div>
|
|
</div>
|
|
|
|
{/* Security Elements */}
|
|
<div className="security-elements">
|
|
<div className="shield shield-1">
|
|
<i className="fa-solid fa-shield-halved"></i>
|
|
</div>
|
|
<div className="shield shield-2">
|
|
<i className="fa-solid fa-lock"></i>
|
|
</div>
|
|
<div className="shield shield-3">
|
|
<i className="fa-solid fa-key"></i>
|
|
</div>
|
|
<div className="shield shield-4">
|
|
<i className="fa-solid fa-fingerprint"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Circuit Patterns */}
|
|
<div className="circuit-patterns">
|
|
<div className="circuit circuit-1">
|
|
<div className="circuit-node"></div>
|
|
<div className="circuit-line"></div>
|
|
<div className="circuit-node"></div>
|
|
</div>
|
|
<div className="circuit circuit-2">
|
|
<div className="circuit-node"></div>
|
|
<div className="circuit-line"></div>
|
|
<div className="circuit-node"></div>
|
|
<div className="circuit-line"></div>
|
|
<div className="circuit-node"></div>
|
|
</div>
|
|
<div className="circuit circuit-3">
|
|
<div className="circuit-node"></div>
|
|
<div className="circuit-line"></div>
|
|
<div className="circuit-node"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Streams */}
|
|
<div className="data-streams">
|
|
<div className="stream stream-1">
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
</div>
|
|
<div className="stream stream-2">
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
</div>
|
|
<div className="stream stream-3">
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
<div className="data-bit"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Request/Response Data */}
|
|
<div className="request-response-data">
|
|
<div className="api-request req-1">
|
|
<div className="request-label">POST /api/enterprise</div>
|
|
<div className="request-data">
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
</div>
|
|
</div>
|
|
<div className="api-response resp-1">
|
|
<div className="response-label">200 OK</div>
|
|
<div className="response-data">
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
</div>
|
|
</div>
|
|
<div className="api-request req-2">
|
|
<div className="request-label">GET /api/analytics</div>
|
|
<div className="request-data">
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
</div>
|
|
</div>
|
|
<div className="api-response resp-2">
|
|
<div className="response-label">201 Created</div>
|
|
<div className="response-data">
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
<div className="data-packet"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Space Data Generation */}
|
|
<div className="space-data-generation">
|
|
<div className="data-cluster cluster-1">
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
</div>
|
|
<div className="data-cluster cluster-2">
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
</div>
|
|
<div className="data-cluster cluster-3">
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
</div>
|
|
<div className="data-cluster cluster-4">
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
<div className="data-point"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Database Connections */}
|
|
<div className="database-connections">
|
|
<div className="db-connection conn-1">
|
|
<div className="connection-line"></div>
|
|
<div className="db-node">
|
|
<i className="fa-solid fa-database"></i>
|
|
</div>
|
|
<div className="connection-pulse"></div>
|
|
</div>
|
|
<div className="db-connection conn-2">
|
|
<div className="connection-line"></div>
|
|
<div className="db-node">
|
|
<i className="fa-solid fa-server"></i>
|
|
</div>
|
|
<div className="connection-pulse"></div>
|
|
</div>
|
|
<div className="db-connection conn-3">
|
|
<div className="connection-line"></div>
|
|
<div className="db-node">
|
|
<i className="fa-solid fa-cloud"></i>
|
|
</div>
|
|
<div className="connection-pulse"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Real-time Metrics */}
|
|
<div className="real-time-metrics">
|
|
<div className="metric metric-1">
|
|
<div className="metric-label">API Calls/sec</div>
|
|
<div className="metric-value">2,847</div>
|
|
<div className="metric-bar">
|
|
<div className="bar-fill"></div>
|
|
</div>
|
|
</div>
|
|
<div className="metric metric-2">
|
|
<div className="metric-label">Data Processed</div>
|
|
<div className="metric-value">15.2TB</div>
|
|
<div className="metric-bar">
|
|
<div className="bar-fill"></div>
|
|
</div>
|
|
</div>
|
|
<div className="metric metric-3">
|
|
<div className="metric-label">Active Users</div>
|
|
<div className="metric-value">45,892</div>
|
|
<div className="metric-bar">
|
|
<div className="bar-fill"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container">
|
|
<div className="banner-content">
|
|
<div className="content-center">
|
|
<div className="badge-container">
|
|
<span className="badge">
|
|
<i className={currentText.icon}></i>
|
|
{currentText.badge}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className={`main-heading carousel-text ${isTransitioning ? 'fade-out' : 'fade-in'}`}>
|
|
{currentText.heading}
|
|
<span className="gradient-text"> {currentText.highlight}</span>
|
|
<br />
|
|
{currentText.subheading}
|
|
</h1>
|
|
|
|
<p className={`description carousel-text ${isTransitioning ? 'fade-out' : 'fade-in'}`}>
|
|
{currentText.description}
|
|
</p>
|
|
|
|
{/* Carousel Indicators */}
|
|
<div className="carousel-indicators">
|
|
{carouselTexts.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
className={`indicator ${index === currentTextIndex ? 'active' : ''}`}
|
|
onClick={() => {
|
|
if (index !== currentTextIndex) {
|
|
setIsTransitioning(true);
|
|
setTimeout(() => {
|
|
setCurrentTextIndex(index);
|
|
setIsTransitioning(false);
|
|
}, 1000);
|
|
}
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="cta-section">
|
|
<Link href={currentText.button_url || "#"} className="cta-primary">
|
|
<span>{currentText.button_text || "Learn More"}</span>
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
<Link href="contact-us" className="cta-secondary">
|
|
<i className="fa-solid fa-phone"></i>
|
|
<span>Contact Sales</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="trust-indicators">
|
|
<div className="trust-item">
|
|
<div className="trust-number">30+</div>
|
|
<div className="trust-label">Enterprise Clients</div>
|
|
</div>
|
|
<div className="trust-item">
|
|
<div className="trust-number">99.9%</div>
|
|
<div className="trust-label">Uptime SLA</div>
|
|
</div>
|
|
<div className="trust-item">
|
|
<div className="trust-number">24/7</div>
|
|
<div className="trust-label">Enterprise Support</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div className="scroll-indicator" onClick={() => window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })}>
|
|
<div className="scroll-text">Scroll to explore</div>
|
|
<div className="scroll-arrow">
|
|
<i className="fa-solid fa-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default HomeBanner;
|