92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
const SupportCenterHero = () => {
|
|
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-4 justify-content-center">
|
|
<div className="col-md-4">
|
|
<div className="feature-item">
|
|
<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-md-4">
|
|
<div className="feature-item">
|
|
<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-md-4">
|
|
<div className="feature-item">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SupportCenterHero;
|
|
|