Files
thrilltrack-explorer/src-old/pages/Contact.tsx

121 lines
3.9 KiB
TypeScript

import { Mail, Clock, BookOpen, HelpCircle } from 'lucide-react';
import { ContactForm } from '@/components/contact/ContactForm';
import { ContactInfoCard } from '@/components/contact/ContactInfoCard';
import { ContactFAQ } from '@/components/contact/ContactFAQ';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Link } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
export default function Contact() {
useDocumentTitle('Contact Us');
return (
<div className="min-h-screen bg-background">
<Header />
<div className="container mx-auto px-4 py-8 max-w-7xl">
{/* Hero Section */}
<div className="text-center mb-12">
<h1 className="text-4xl md:text-5xl font-bold mb-4">Get in Touch</h1>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
Have questions or feedback? We're here to help. Send us a message and we'll respond as soon as possible.
</p>
</div>
<div className="grid lg:grid-cols-3 gap-8 mb-12">
{/* Contact Form - Main Content */}
<div className="lg:col-span-2">
<Card>
<CardHeader>
<CardTitle>Send Us a Message</CardTitle>
<CardDescription>
Fill out the form below and we'll get back to you within 24-48 hours
</CardDescription>
</CardHeader>
<CardContent>
<ContactForm />
</CardContent>
</Card>
</div>
{/* Sidebar - Quick Info */}
<div className="space-y-6">
{/* Email Support */}
<ContactInfoCard
icon={Mail}
title="Email Support"
description="Direct contact"
content={
<a
href="mailto:support@thrillwiki.com"
className="text-primary hover:underline font-medium"
>
support@thrillwiki.com
</a>
}
/>
{/* Response Time */}
<ContactInfoCard
icon={Clock}
title="Response Time"
description="Our commitment"
content={
<p className="text-sm">
We typically respond within <strong>24-48 hours</strong> during business days.
Complex inquiries may take longer.
</p>
}
/>
{/* Documentation */}
<ContactInfoCard
icon={BookOpen}
title="Documentation"
description="Self-service help"
content={
<div className="space-y-2 text-sm">
<Link
to="/submission-guidelines"
className="block text-primary hover:underline"
>
Submission Guidelines
</Link>
<Link
to="/terms"
className="block text-primary hover:underline"
>
Terms of Service
</Link>
<Link
to="/privacy"
className="block text-primary hover:underline"
>
Privacy Policy
</Link>
</div>
}
/>
{/* Help Resources */}
<ContactInfoCard
icon={HelpCircle}
title="Help Resources"
description="Before you contact us"
content={
<p className="text-sm">
Check out our FAQ section below for answers to common questions. Many issues can be resolved quickly by reviewing our documentation.
</p>
}
/>
</div>
</div>
{/* FAQ Section */}
<div className="mt-12">
<ContactFAQ />
</div>
</div>
</div>
);
}