This commit is contained in:
Iliyan Angelov
2025-10-09 00:44:15 +03:00
parent 18ae8b9f88
commit dd8eb1c7aa
44 changed files with 3240 additions and 137 deletions

View File

@@ -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>