152 lines
5.8 KiB
TypeScript
152 lines
5.8 KiB
TypeScript
"use client";
|
|
|
|
type ModalType = 'create' | 'knowledge' | 'status' | null;
|
|
|
|
interface SupportCenterHeroProps {
|
|
onFeatureClick: (type: ModalType) => void;
|
|
}
|
|
|
|
const SupportCenterHero = ({ onFeatureClick }: SupportCenterHeroProps) => {
|
|
return (
|
|
<section className="support-hero">
|
|
{/* Animated Background */}
|
|
<div className="hero-background">
|
|
{/* Floating Support Icons */}
|
|
<div className="floating-tech tech-1">
|
|
<i className="fa-solid fa-headset"></i>
|
|
</div>
|
|
<div className="floating-tech tech-2">
|
|
<i className="fa-solid fa-ticket"></i>
|
|
</div>
|
|
<div className="floating-tech tech-3">
|
|
<i className="fa-solid fa-book"></i>
|
|
</div>
|
|
<div className="floating-tech tech-4">
|
|
<i className="fa-solid fa-comments"></i>
|
|
</div>
|
|
<div className="floating-tech tech-5">
|
|
<i className="fa-solid fa-life-ring"></i>
|
|
</div>
|
|
<div className="floating-tech tech-6">
|
|
<i className="fa-solid fa-user-shield"></i>
|
|
</div>
|
|
|
|
{/* Grid Pattern */}
|
|
<div className="grid-overlay"></div>
|
|
|
|
{/* Animated Gradient Orbs */}
|
|
<div className="gradient-orb orb-1"></div>
|
|
<div className="gradient-orb orb-2"></div>
|
|
<div className="gradient-orb orb-3"></div>
|
|
|
|
{/* Video 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="support-hero__content text-center">
|
|
<h1 className="support-hero__title">
|
|
Support Center
|
|
</h1>
|
|
<p className="support-hero__subtitle">
|
|
Get expert assistance whenever you need it. Our dedicated support team is here to help you succeed.
|
|
</p>
|
|
|
|
<div className="support-hero__features">
|
|
<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>
|
|
<h3>Submit Tickets</h3>
|
|
<p>Create and track support requests</p>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<h3>Knowledge Base</h3>
|
|
<p>Find answers to common questions</p>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<h3>Track Status</h3>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SupportCenterHero;
|
|
|