Update src/app/support/page.tsx
This commit is contained in:
@@ -1,14 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/components/theme/ThemeProvider';
|
||||
import { NavbarStyleFullscreen } from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import { Mail, MessageSquare, Phone, AlertCircle } from 'lucide-react';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Features', id: '/#features' },
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'Sign In', id: '/login' },
|
||||
{ name: 'Support', id: '/support' },
|
||||
{ name: 'FAQ', id: '/faq' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
];
|
||||
|
||||
export default function SupportPage() {
|
||||
@@ -25,137 +24,16 @@ export default function SupportPage() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="AccountHub"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="support@accounthub.com"
|
||||
/>
|
||||
|
||||
<div className="pt-20 min-h-screen bg-gradient-to-br from-background to-card">
|
||||
<div className="max-w-6xl mx-auto px-4 py-12">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">
|
||||
Customer Support
|
||||
</h1>
|
||||
<p className="text-foreground/60 text-lg max-w-2xl mx-auto">
|
||||
We\'re here to help. Choose your preferred way to contact our support team.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
||||
{/* Email Support */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-8 text-center hover:shadow-lg transition-shadow">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-primary-cta/10 rounded-full">
|
||||
<Mail className="text-primary-cta" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">
|
||||
Email Support
|
||||
</h3>
|
||||
<p className="text-foreground/60 mb-4">
|
||||
Send us your questions and we\'ll respond within 24 hours.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@accounthub.com"
|
||||
className="text-primary-cta font-semibold hover:underline"
|
||||
>
|
||||
support@accounthub.com
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Live Chat */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-8 text-center hover:shadow-lg transition-shadow">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-primary-cta/10 rounded-full">
|
||||
<MessageSquare className="text-primary-cta" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">
|
||||
Live Chat
|
||||
</h3>
|
||||
<p className="text-foreground/60 mb-4">
|
||||
Chat with our support team in real-time (Available 9 AM - 9 PM EST)
|
||||
</p>
|
||||
<button className="px-6 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity font-semibold">
|
||||
Start Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Phone Support */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-8 text-center hover:shadow-lg transition-shadow">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-4 bg-primary-cta/10 rounded-full">
|
||||
<Phone className="text-primary-cta" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">
|
||||
Phone Support
|
||||
</h3>
|
||||
<p className="text-foreground/60 mb-4">
|
||||
Call us directly for urgent issues (Available 9 AM - 5 PM EST)
|
||||
</p>
|
||||
<a
|
||||
href="tel:+1-555-123-4567"
|
||||
className="text-primary-cta font-semibold hover:underline"
|
||||
>
|
||||
+1 (555) 123-4567
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-8 mb-12">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-8">Quick Answers</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{[
|
||||
{
|
||||
title: 'How do I reset my password?',
|
||||
answer:
|
||||
'Click "Forgot Password" on the login page and follow the email instructions to reset your password.',
|
||||
},
|
||||
{
|
||||
title: 'How do I track my order?',
|
||||
answer:
|
||||
'Log into your dashboard and click "Track Order" on any order to see real-time tracking information.',
|
||||
},
|
||||
{
|
||||
title: 'How do I update my profile?',
|
||||
answer:
|
||||
'Go to your dashboard, click the Profile tab, and click Edit to update your personal information.',
|
||||
},
|
||||
{
|
||||
title: 'Is my payment information secure?',
|
||||
answer:
|
||||
'Yes, we use industry-standard encryption and security protocols to protect all payment information.',
|
||||
},
|
||||
].map((item, index) => (
|
||||
<div key={index} className="border-l-4 border-primary-cta pl-4">
|
||||
<h3 className="font-semibold text-foreground mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-foreground/60">{item.answer}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Page */}
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 flex items-start gap-4">
|
||||
<AlertCircle
|
||||
className="text-blue-600 dark:text-blue-400 flex-shrink-0 mt-1"
|
||||
size={24}
|
||||
/>
|
||||
<div>
|
||||
<h3 className="font-semibold text-blue-900 dark:text-blue-200 mb-1">
|
||||
System Status: All Systems Operational
|
||||
</h3>
|
||||
<p className="text-blue-800 dark:text-blue-300 text-sm">
|
||||
Check our status page for real-time system updates and maintenance notifications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-br from-background to-card pt-24">
|
||||
<div className="max-w-4xl mx-auto px-4 py-12">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">Support</h1>
|
||||
<p className="text-foreground/60 text-lg">Get help from our support team.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user