246 lines
11 KiB
TypeScript
246 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import type { Metadata } from 'next';
|
|
import styles from './contact.module.css';
|
|
|
|
export default function ContactPage() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
subject: '',
|
|
message: '',
|
|
});
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value,
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Handle form submission
|
|
console.log('Form submitted:', formData);
|
|
alert('Thank you for your message! We\'ll get back to you soon.');
|
|
};
|
|
|
|
const contactInfo = [
|
|
{
|
|
icon: '📧',
|
|
title: 'Email',
|
|
value: 'support@socialbuddy.com',
|
|
link: 'mailto:support@socialbuddy.com',
|
|
},
|
|
{
|
|
icon: '💬',
|
|
title: 'Live Chat',
|
|
value: 'Available 24/7',
|
|
link: '#',
|
|
},
|
|
{
|
|
icon: '📞',
|
|
title: 'Phone',
|
|
value: '+1 (555) 123-4567',
|
|
link: 'tel:+15551234567',
|
|
},
|
|
{
|
|
icon: '📍',
|
|
title: 'Office',
|
|
value: 'San Francisco, CA',
|
|
link: '#',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={styles.contactPage}>
|
|
{/* Hero Section */}
|
|
<section className={styles.hero}>
|
|
<div className="container">
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>
|
|
Get in <span className="gradient-text">Touch</span>
|
|
</h1>
|
|
<p className={styles.heroSubtitle}>
|
|
Have a question or need help? We're here for you 24/7.
|
|
Reach out and let's start a conversation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Info Cards */}
|
|
<section className="section">
|
|
<div className="container">
|
|
<div className={styles.contactGrid}>
|
|
{contactInfo.map((info, index) => (
|
|
<a key={index} href={info.link} className={styles.contactCard}>
|
|
<div className={styles.cardIcon}>{info.icon}</div>
|
|
<h3 className={styles.cardTitle}>{info.title}</h3>
|
|
<p className={styles.cardValue}>{info.value}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Form Section */}
|
|
<section className={`section ${styles.formSection}`}>
|
|
<div className="container">
|
|
<div className={styles.formContainer}>
|
|
<div className={styles.formInfo}>
|
|
<h2 className={styles.formTitle}>Send Us a Message</h2>
|
|
<p className={styles.formDescription}>
|
|
Fill out the form and our team will get back to you within 24 hours.
|
|
</p>
|
|
|
|
<div className={styles.benefits}>
|
|
<div className={styles.benefit}>
|
|
<span className={styles.checkIcon}>✓</span>
|
|
<span>Quick response time</span>
|
|
</div>
|
|
<div className={styles.benefit}>
|
|
<span className={styles.checkIcon}>✓</span>
|
|
<span>Expert support team</span>
|
|
</div>
|
|
<div className={styles.benefit}>
|
|
<span className={styles.checkIcon}>✓</span>
|
|
<span>Personalized solutions</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.socialLinks}>
|
|
<h3 className={styles.socialTitle}>Follow Us</h3>
|
|
<div className={styles.socialIcons}>
|
|
<a href="#" className={styles.socialIcon}>🐦</a>
|
|
<a href="#" className={styles.socialIcon}>📘</a>
|
|
<a href="#" className={styles.socialIcon}>📷</a>
|
|
<a href="#" className={styles.socialIcon}>💼</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form className={styles.form} onSubmit={handleSubmit}>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="name" className={styles.label}>
|
|
Full Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
className={styles.input}
|
|
placeholder="John Doe"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="email" className={styles.label}>
|
|
Email Address *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className={styles.input}
|
|
placeholder="john@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="company" className={styles.label}>
|
|
Company
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
value={formData.company}
|
|
onChange={handleChange}
|
|
className={styles.input}
|
|
placeholder="Your Company"
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="subject" className={styles.label}>
|
|
Subject *
|
|
</label>
|
|
<select
|
|
id="subject"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
className={styles.select}
|
|
required
|
|
>
|
|
<option value="">Select a subject</option>
|
|
<option value="general">General Inquiry</option>
|
|
<option value="support">Technical Support</option>
|
|
<option value="sales">Sales Question</option>
|
|
<option value="partnership">Partnership</option>
|
|
<option value="feedback">Feedback</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="message" className={styles.label}>
|
|
Message *
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
className={styles.textarea}
|
|
placeholder="Tell us how we can help you..."
|
|
rows={6}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className="btn btn-primary btn-large">
|
|
Send Message
|
|
<span className={styles.arrow}>→</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Quick Links */}
|
|
<section className={styles.quickLinks}>
|
|
<div className="container">
|
|
<h2 className={styles.quickLinksTitle}>Looking for something specific?</h2>
|
|
<div className={styles.linksGrid}>
|
|
<a href="/docs" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>📚</span>
|
|
<span className={styles.linkText}>Documentation</span>
|
|
</a>
|
|
<a href="/pricing" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>💰</span>
|
|
<span className={styles.linkText}>Pricing</span>
|
|
</a>
|
|
<a href="/blog" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>📝</span>
|
|
<span className={styles.linkText}>Blog</span>
|
|
</a>
|
|
<a href="/features" className={styles.linkCard}>
|
|
<span className={styles.linkIcon}>✨</span>
|
|
<span className={styles.linkText}>Features</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|