update
This commit is contained in:
@@ -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