251 lines
15 KiB
Rust
251 lines
15 KiB
Rust
|
//! Contact page component
|
||
|
|
//!
|
||
|
|
//! This page demonstrates the usage of the ContactForm component and provides
|
||
|
|
//! a complete contact page implementation with additional information and styling.
|
||
|
|
|
||
|
|
use crate::components::forms::ContactForm;
|
||
|
|
use leptos::prelude::*;
|
||
|
|
use leptos_meta::*;
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn ContactPage() -> impl IntoView {
|
||
|
|
view! {
|
||
|
|
<Title text="Contact Us - Get in Touch"/>
|
||
|
|
<Meta name="description" content="Contact us for questions, support, or feedback. We're here to help!"/>
|
||
|
|
|
||
|
|
<div class="min-h-screen bg-gray-50 py-12">
|
||
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
// Header Section
|
||
|
|
<div class="text-center mb-16">
|
||
|
|
<h1 class="text-4xl font-bold text-gray-900 sm:text-5xl mb-4">
|
||
|
|
"Get in Touch"
|
||
|
|
</h1>
|
||
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
|
|
"We'd love to hear from you. Whether you have a question about features, "
|
||
|
|
"pricing, need support, or anything else, our team is ready to answer all your questions."
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||
|
|
// Contact Information
|
||
|
|
<div class="lg:col-span-1">
|
||
|
|
<div class="bg-white rounded-lg shadow-lg p-8">
|
||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">
|
||
|
|
"Contact Information"
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="space-y-6">
|
||
|
|
// Email
|
||
|
|
<div class="flex items-start">
|
||
|
|
<div class="flex-shrink-0">
|
||
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="ml-4">
|
||
|
|
<h3 class="text-lg font-medium text-gray-900">"Email"</h3>
|
||
|
|
<p class="text-gray-600">"contact@yourapp.com"</p>
|
||
|
|
<p class="text-sm text-gray-500">"We'll respond within 24 hours"</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// Support
|
||
|
|
<div class="flex items-start">
|
||
|
|
<div class="flex-shrink-0">
|
||
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 12l2.828-2.828m0 5.656L12 12m0 0l-2.828-2.828M12 12l2.828 2.828"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="ml-4">
|
||
|
|
<h3 class="text-lg font-medium text-gray-900">"Support"</h3>
|
||
|
|
<p class="text-gray-600">"support@yourapp.com"</p>
|
||
|
|
<p class="text-sm text-gray-500">"Technical support and assistance"</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// Response Time
|
||
|
|
<div class="flex items-start">
|
||
|
|
<div class="flex-shrink-0">
|
||
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="ml-4">
|
||
|
|
<h3 class="text-lg font-medium text-gray-900">"Response Time"</h3>
|
||
|
|
<p class="text-gray-600">"Usually within 4 hours"</p>
|
||
|
|
<p class="text-sm text-gray-500">"Business hours: Mon-Fri 9AM-5PM EST"</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// Quick Links
|
||
|
|
<div class="mt-8 pt-8 border-t border-gray-200">
|
||
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">"Quick Links"</h3>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<a href="/docs" class="block text-blue-600 hover:text-blue-700 text-sm">
|
||
|
|
"📚 Documentation"
|
||
|
|
</a>
|
||
|
|
<a href="/faq" class="block text-blue-600 hover:text-blue-700 text-sm">
|
||
|
|
"❓ Frequently Asked Questions"
|
||
|
|
</a>
|
||
|
|
<a href="/support" class="block text-blue-600 hover:text-blue-700 text-sm">
|
||
|
|
"🛠️ Support Center"
|
||
|
|
</a>
|
||
|
|
<a href="/status" class="block text-blue-600 hover:text-blue-700 text-sm">
|
||
|
|
"📊 System Status"
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// Contact Form
|
||
|
|
<div class="lg:col-span-2">
|
||
|
|
<div class="bg-white rounded-lg shadow-lg p-8">
|
||
|
|
<ContactForm
|
||
|
|
title="Send us a Message"
|
||
|
|
description="Fill out the form below and we'll get back to you as soon as possible."
|
||
|
|
recipient="contact@yourapp.com"
|
||
|
|
submit_text="Send Message"
|
||
|
|
show_success=true
|
||
|
|
reset_after_success=true
|
||
|
|
class=""
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// FAQ Section
|
||
|
|
<div class="mt-16">
|
||
|
|
<div class="bg-white rounded-lg shadow-lg p-8">
|
||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">
|
||
|
|
"Frequently Asked Questions"
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
|
|
// FAQ Item 1
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||
|
|
"How quickly do you respond to messages?"
|
||
|
|
</h3>
|
||
|
|
<p class="text-gray-600">
|
||
|
|
"We aim to respond to all messages within 4 hours during business hours "
|
||
|
|
"(Mon-Fri 9AM-5PM EST). For urgent matters, please mark your message as high priority."
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// FAQ Item 2
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||
|
|
"What information should I include in my message?"
|
||
|
|
</h3>
|
||
|
|
<p class="text-gray-600">
|
||
|
|
"Please include as much detail as possible about your question or issue. "
|
||
|
|
"If it's a technical problem, include any error messages and steps to reproduce the issue."
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// FAQ Item 3
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||
|
|
"Do you offer phone support?"
|
||
|
|
</h3>
|
||
|
|
<p class="text-gray-600">
|
||
|
|
"Currently, we provide support primarily through email and our contact form. "
|
||
|
|
"This allows us to better track and resolve issues while providing detailed responses."
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// FAQ Item 4
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||
|
|
"Can I request new features?"
|
||
|
|
</h3>
|
||
|
|
<p class="text-gray-600">
|
||
|
|
"Absolutely! We love hearing feature requests from our users. "
|
||
|
|
"Please describe the feature you'd like and how it would help you."
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// Alternative Contact Methods
|
||
|
|
<div class="mt-16">
|
||
|
|
<div class="text-center">
|
||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-8">
|
||
|
|
"Other Ways to Reach Us"
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
|
|
// Technical Support
|
||
|
|
<div class="bg-blue-50 rounded-lg p-6">
|
||
|
|
<div class="text-blue-600 mb-4">
|
||
|
|
<svg class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||
|
|
"Technical Support"
|
||
|
|
</h3>
|
||
|
|
<p class="text-gray-600 mb-4">
|
||
|
|
"For technical issues, bugs, or integration help"
|
||
|
|
</p>
|
||
|
|
<a
|
||
|
|
href="/support"
|
||
|
|
class="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
|
||
|
|
>
|
||
|
|
"Open Support Ticket"
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// Sales Inquiries
|
||
|
|
<div class="bg-green-50 rounded-lg p-6">
|
||
|
|
<div class="text-green-600 mb-4">
|
||
|
|
<svg class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||
|
|
"Sales & Pricing"
|
||
|
|
</h3>
|
||
|
|
<p class="text-gray-600 mb-4">
|
||
|
|
"Questions about pricing, plans, or enterprise solutions"
|
||
|
|
</p>
|
||
|
|
<a
|
||
|
|
href="mailto:sales@yourapp.com"
|
||
|
|
class="inline-block bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors"
|
||
|
|
>
|
||
|
|
"Contact Sales"
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
// General Feedback
|
||
|
|
<div class="bg-purple-50 rounded-lg p-6">
|
||
|
|
<div class="text-purple-600 mb-4">
|
||
|
|
<svg class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
||
|
|
"Feedback & Suggestions"
|
||
|
|
</h3>
|
||
|
|
<p class="text-gray-600 mb-4">
|
||
|
|
"Share your ideas, feedback, or feature requests"
|
||
|
|
</p>
|
||
|
|
<a
|
||
|
|
href="mailto:feedback@yourapp.com"
|
||
|
|
class="inline-block bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700 transition-colors"
|
||
|
|
>
|
||
|
|
"Send Feedback"
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|