272 lines
10 KiB
TypeScript
272 lines
10 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useAbout } from "@/lib/hooks/useAbout";
|
|
|
|
const AboutBanner = () => {
|
|
const { data, loading, error } = useAbout();
|
|
const [currentMetric, setCurrentMetric] = useState(0);
|
|
|
|
useEffect(() => {
|
|
// Auto-rotate metrics
|
|
const interval = setInterval(() => {
|
|
setCurrentMetric(prev => (prev + 1) % 3);
|
|
}, 4000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
// Show loading state
|
|
if (loading) {
|
|
return (
|
|
<section className="about-banner fix-top pb-120 position-relative overflow-x-clip">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="text-center py-5">
|
|
<div className="spinner-border text-primary" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p className="mt-3">Loading about us content...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Show error state
|
|
if (error) {
|
|
return (
|
|
<section className="about-banner fix-top pb-120 position-relative overflow-x-clip">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="text-center py-5">
|
|
<div className="alert alert-danger" role="alert">
|
|
<h4 className="alert-heading">Error Loading Content</h4>
|
|
<p>{error}</p>
|
|
<hr />
|
|
<p className="mb-0">Please try refreshing the page or contact support if the problem persists.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Use API data or fallback to default content
|
|
const bannerData = data?.banner;
|
|
|
|
const metrics = [
|
|
{ value: "500+", label: "Fortune 500 Clients", icon: "fa-building", color: "#3b82f6" },
|
|
{ value: "99.9%", label: "Uptime Guarantee", icon: "fa-shield-halved", color: "#10b981" },
|
|
{ value: "24/7", label: "Enterprise Support", icon: "fa-headset", color: "#f59e0b" },
|
|
{ value: "15+", label: "Years Experience", icon: "fa-award", color: "#8b5cf6" }
|
|
];
|
|
|
|
return (
|
|
<section className="hero-banner">
|
|
{/* Video-like Background */}
|
|
<div className="hero-background">
|
|
{/* Animated Code Lines */}
|
|
<div className="code-animation">
|
|
<div className="code-line line-1">
|
|
<span className="code-keyword">const</span> enterprise = <span className="code-string">'mission-critical'</span>;
|
|
</div>
|
|
<div className="code-line line-2">
|
|
<span className="code-keyword">if</span> (security.level === <span className="code-string">'enterprise'</span>) {
|
|
</div>
|
|
<div className="code-line line-3">
|
|
deploy<span className="code-function">()</span>;
|
|
</div>
|
|
<div className="code-line line-4">
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Tech Icons */}
|
|
<div className="floating-tech">
|
|
<div className="tech-icon icon-1">
|
|
<i className="fa-solid fa-shield-halved"></i>
|
|
</div>
|
|
<div className="tech-icon icon-2">
|
|
<i className="fa-solid fa-cloud"></i>
|
|
</div>
|
|
<div className="tech-icon icon-3">
|
|
<i className="fa-solid fa-server"></i>
|
|
</div>
|
|
<div className="tech-icon icon-4">
|
|
<i className="fa-solid fa-lock"></i>
|
|
</div>
|
|
<div className="tech-icon icon-5">
|
|
<i className="fa-solid fa-chart-line"></i>
|
|
</div>
|
|
<div className="tech-icon icon-6">
|
|
<i className="fa-solid fa-database"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enterprise Dashboard Elements */}
|
|
<div className="dashboard-elements">
|
|
<div className="dashboard-card card-1">
|
|
<div className="card-header">
|
|
<i className="fa-solid fa-shield-check"></i>
|
|
<span>Security Status</span>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="status-indicator resolved"></div>
|
|
<span>Enterprise Grade</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="dashboard-card card-2">
|
|
<div className="card-header">
|
|
<i className="fa-solid fa-clock"></i>
|
|
<span>SLA Response</span>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="metric-value">99.9%</div>
|
|
<span>Uptime</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="dashboard-card card-3">
|
|
<div className="card-header">
|
|
<i className="fa-solid fa-building"></i>
|
|
<span>Enterprise Clients</span>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="metric-value">500+</div>
|
|
<span>Fortune 500</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Network Connection Lines */}
|
|
<div className="network-lines">
|
|
<div className="connection-line line-1"></div>
|
|
<div className="connection-line line-2"></div>
|
|
<div className="connection-line line-3"></div>
|
|
<div className="connection-line line-4"></div>
|
|
</div>
|
|
|
|
{/* Data Flow Particles */}
|
|
<div className="data-particles">
|
|
<div className="particle particle-1"></div>
|
|
<div className="particle particle-2"></div>
|
|
<div className="particle particle-3"></div>
|
|
<div className="particle particle-4"></div>
|
|
<div className="particle particle-5"></div>
|
|
<div className="particle particle-6"></div>
|
|
</div>
|
|
|
|
{/* Background Gradient Overlay */}
|
|
<div className="video-overlay"></div>
|
|
</div>
|
|
|
|
<div className="container">
|
|
<div className="row justify-content-center">
|
|
<div className="col-12 col-lg-10 col-xl-8">
|
|
<div className="hero-content text-center">
|
|
{/* Badge */}
|
|
<div className="hero-badge">
|
|
<div className="badge-icon">
|
|
<i className="fa-solid fa-shield-check"></i>
|
|
</div>
|
|
<span>Enterprise Security Certified</span>
|
|
</div>
|
|
|
|
{/* Main Title */}
|
|
<h1 className="hero-title">
|
|
{bannerData?.title || "Mission-Critical Software Solutions for Global Enterprises"}
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p className="hero-description">
|
|
{bannerData?.description || "Trusted by Fortune 500 companies worldwide, we deliver enterprise-grade software solutions with 99.9% uptime SLA, SOC 2 Type II certification, and 24/7 dedicated support. Our mission-critical platforms power digital transformation across industries."}
|
|
</p>
|
|
|
|
{/* Key Metrics */}
|
|
<div className="hero-metrics">
|
|
{metrics.map((metric, index) => (
|
|
<div
|
|
key={index}
|
|
className={`metric-item ${currentMetric === index ? 'active' : ''}`}
|
|
onClick={() => setCurrentMetric(index)}
|
|
>
|
|
<div className="metric-icon" style={{ backgroundColor: metric.color }}>
|
|
<i className={`fa-solid ${metric.icon}`}></i>
|
|
</div>
|
|
<div className="metric-content">
|
|
<div className="metric-value">{metric.value}</div>
|
|
<div className="metric-label">{metric.label}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="hero-actions">
|
|
<Link href={bannerData?.cta_link || "services"} className="btn-primary">
|
|
<span>View Enterprise Solutions</span>
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
<Link href="contact-us" className="btn-secondary">
|
|
<span>Schedule Consultation</span>
|
|
<i className="fa-solid fa-calendar-check"></i>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Trust Badges */}
|
|
<div className="trust-badges">
|
|
<div className="trust-badge">
|
|
<i className="fa-solid fa-shield-check"></i>
|
|
<span>SOC 2 Type II</span>
|
|
</div>
|
|
<div className="trust-badge">
|
|
<i className="fa-solid fa-lock"></i>
|
|
<span>ISO 27001</span>
|
|
</div>
|
|
<div className="trust-badge">
|
|
<i className="fa-solid fa-certificate"></i>
|
|
<span>GDPR Compliant</span>
|
|
</div>
|
|
<div className="trust-badge">
|
|
<i className="fa-solid fa-globe"></i>
|
|
<span>Global Operations</span>
|
|
</div>
|
|
<div className="trust-badge">
|
|
<i className="fa-solid fa-award"></i>
|
|
<span>Microsoft Partner</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="social-links">
|
|
<Link href="https://www.linkedin.com/company/enterprisesoft-solutions" target="_blank" className="social-link">
|
|
<i className="fa-brands fa-linkedin-in"></i>
|
|
</Link>
|
|
<Link href="https://github.com/enterprisesoft" target="_blank" className="social-link">
|
|
<i className="fa-brands fa-github"></i>
|
|
</Link>
|
|
<Link href="https://www.twitter.com/enterprisesoft" target="_blank" className="social-link">
|
|
<i className="fa-brands fa-twitter"></i>
|
|
</Link>
|
|
<Link href="https://stackoverflow.com/teams/enterprisesoft" target="_blank" className="social-link">
|
|
<i className="fa-brands fa-stack-overflow"></i>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutBanner;
|