update
This commit is contained in:
Iliyan Angelov
@@ -62,10 +62,10 @@ const AboutBanner = () => {
|
||||
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: "8", label: "Industry Verticals", icon: "fa-industry", color: "#3b82f6" },
|
||||
{ value: "99.9%", label: "Uptime SLA", 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" }
|
||||
{ value: "5+", label: "Years of Operation", icon: "fa-award", color: "#8b5cf6" }
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -187,7 +187,7 @@ const AboutBanner = () => {
|
||||
|
||||
{/* 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."}
|
||||
{bannerData?.description || "GNX Soft Ltd delivers enterprise-grade software solutions for mission-critical industries with 99.9% uptime SLA and 24/7 dedicated support. Our platforms power digital transformation across Defense & Aerospace, Healthcare, Banking, Telecommunication, and other highly regulated sectors."}
|
||||
</p>
|
||||
|
||||
{/* Key Metrics */}
|
||||
@@ -220,30 +220,6 @@ const AboutBanner = () => {
|
||||
<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>
|
||||
|
||||
@@ -111,7 +111,7 @@ const AboutServiceComponent = () => {
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h6>Enterprise Security</h6>
|
||||
<p>SOC 2 Type II Certified</p>
|
||||
<p>Defense-Grade Protection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,53 +1,165 @@
|
||||
"use client";
|
||||
import { useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import CreateTicketForm from './CreateTicketForm';
|
||||
import KnowledgeBase from './KnowledgeBase';
|
||||
import TicketStatusCheck from './TicketStatusCheck';
|
||||
|
||||
type TabType = 'create' | 'knowledge' | 'status';
|
||||
type ModalType = 'create' | 'knowledge' | 'status' | null;
|
||||
|
||||
const SupportCenterContent = () => {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('create');
|
||||
interface SupportCenterContentProps {
|
||||
activeModal: ModalType;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const SupportCenterContent = ({ activeModal, onClose }: SupportCenterContentProps) => {
|
||||
// Close modal on escape key
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && activeModal) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
return () => document.removeEventListener('keydown', handleEscape);
|
||||
}, [activeModal, onClose]);
|
||||
|
||||
// Prevent body scroll when modal is open
|
||||
useEffect(() => {
|
||||
if (activeModal) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [activeModal]);
|
||||
|
||||
if (!activeModal) return null;
|
||||
|
||||
return (
|
||||
<section className="support-center-content section-padding">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{/* Tab Navigation */}
|
||||
<div className="support-tabs">
|
||||
<ul className="support-tabs__nav">
|
||||
<li className={activeTab === 'create' ? 'active' : ''}>
|
||||
<button onClick={() => setActiveTab('create')}>
|
||||
<i className="fa-solid fa-ticket me-2"></i>
|
||||
Submit a Ticket
|
||||
</button>
|
||||
</li>
|
||||
<li className={activeTab === 'knowledge' ? 'active' : ''}>
|
||||
<button onClick={() => setActiveTab('knowledge')}>
|
||||
<i className="fa-solid fa-book me-2"></i>
|
||||
Knowledge Base
|
||||
</button>
|
||||
</li>
|
||||
<li className={activeTab === 'status' ? 'active' : ''}>
|
||||
<button onClick={() => setActiveTab('status')}>
|
||||
<i className="fa-solid fa-search me-2"></i>
|
||||
Check Ticket Status
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<>
|
||||
{/* Modal Overlay */}
|
||||
<div
|
||||
className="support-modal-overlay"
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
zIndex: 9998,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '20px',
|
||||
backdropFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
{/* Modal Content */}
|
||||
<div
|
||||
className="support-modal-content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: '12px',
|
||||
maxWidth: '1000px',
|
||||
width: '100%',
|
||||
maxHeight: '90vh',
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
animation: 'modalSlideIn 0.3s ease-out',
|
||||
}}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="support-modal-close"
|
||||
aria-label="Close modal"
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
float: 'right',
|
||||
background: '#f3f4f6',
|
||||
border: 'none',
|
||||
borderRadius: '50%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
fontSize: '20px',
|
||||
color: '#374151',
|
||||
transition: 'all 0.2s',
|
||||
zIndex: 10,
|
||||
marginBottom: '-40px',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = '#e5e7eb';
|
||||
e.currentTarget.style.transform = 'scale(1.1)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = '#f3f4f6';
|
||||
e.currentTarget.style.transform = 'scale(1)';
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-times"></i>
|
||||
</button>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="support-tabs__content">
|
||||
{activeTab === 'create' && <CreateTicketForm />}
|
||||
{activeTab === 'knowledge' && <KnowledgeBase />}
|
||||
{activeTab === 'status' && <TicketStatusCheck />}
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal Body */}
|
||||
<div className="support-modal-body" style={{ padding: '40px' }}>
|
||||
{activeModal === 'create' && <CreateTicketForm />}
|
||||
{activeModal === 'knowledge' && <KnowledgeBase />}
|
||||
{activeModal === 'status' && <TicketStatusCheck />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Modal Animation Keyframes */}
|
||||
<style jsx>{`
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.support-modal-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.support-modal-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.support-modal-content::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.support-modal-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.support-modal-body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
"use client";
|
||||
|
||||
const SupportCenterHero = () => {
|
||||
type ModalType = 'create' | 'knowledge' | 'status' | null;
|
||||
|
||||
interface SupportCenterHeroProps {
|
||||
onFeatureClick: (type: ModalType) => void;
|
||||
}
|
||||
|
||||
const SupportCenterHero = ({ onFeatureClick }: SupportCenterHeroProps) => {
|
||||
return (
|
||||
<section className="support-hero">
|
||||
{/* Animated Background */}
|
||||
@@ -49,9 +55,15 @@ const SupportCenterHero = () => {
|
||||
</p>
|
||||
|
||||
<div className="support-hero__features">
|
||||
<div className="row g-4 justify-content-center">
|
||||
<div className="col-md-4">
|
||||
<div className="feature-item">
|
||||
<div className="row g-3 g-md-4 g-lg-5 justify-content-center">
|
||||
<div className="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div
|
||||
className="feature-item clickable"
|
||||
onClick={() => onFeatureClick('create')}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => e.key === 'Enter' && onFeatureClick('create')}
|
||||
>
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-ticket"></i>
|
||||
</div>
|
||||
@@ -59,8 +71,14 @@ const SupportCenterHero = () => {
|
||||
<p>Create and track support requests</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="feature-item">
|
||||
<div className="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div
|
||||
className="feature-item clickable"
|
||||
onClick={() => onFeatureClick('knowledge')}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => e.key === 'Enter' && onFeatureClick('knowledge')}
|
||||
>
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-book"></i>
|
||||
</div>
|
||||
@@ -68,8 +86,14 @@ const SupportCenterHero = () => {
|
||||
<p>Find answers to common questions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="feature-item">
|
||||
<div className="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div
|
||||
className="feature-item clickable"
|
||||
onClick={() => onFeatureClick('status')}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => e.key === 'Enter' && onFeatureClick('status')}
|
||||
>
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-search"></i>
|
||||
</div>
|
||||
@@ -77,6 +101,42 @@ const SupportCenterHero = () => {
|
||||
<p>Monitor your ticket progress</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<a
|
||||
href="/policy?type=privacy"
|
||||
className="feature-item clickable link-item"
|
||||
>
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-shield-halved"></i>
|
||||
</div>
|
||||
<h3>Privacy Policy</h3>
|
||||
<p>Learn about data protection</p>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<a
|
||||
href="/policy?type=terms"
|
||||
className="feature-item clickable link-item"
|
||||
>
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-file-contract"></i>
|
||||
</div>
|
||||
<h3>Terms of Use</h3>
|
||||
<p>Review our service terms</p>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<a
|
||||
href="/policy?type=support"
|
||||
className="feature-item clickable link-item"
|
||||
>
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-headset"></i>
|
||||
</div>
|
||||
<h3>Support Policy</h3>
|
||||
<p>Understand our support coverage</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user