195 lines
8.2 KiB
TypeScript
195 lines
8.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { submitContactMessage } from '@/lib/actions/contactActions';
|
|
import { Mail, Send, CheckCircle2, Sparkles } from 'lucide-react';
|
|
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
|
|
|
|
export default function ContactPage() {
|
|
const t = useTranslations('contact');
|
|
const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setErrorMsg(null);
|
|
|
|
const res = await submitContactMessage(form);
|
|
setIsSubmitting(false);
|
|
|
|
if (res.success) {
|
|
setSubmitted(true);
|
|
setForm({ name: '', email: '', subject: '', message: '' });
|
|
} else {
|
|
setErrorMsg(res.error || 'Failed to submit message');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12 flex-1 w-full">
|
|
|
|
{/* Header */}
|
|
<div className="text-center space-y-3 max-w-2xl mx-auto">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-xs font-bold border border-red-500/20">
|
|
<Mail className="w-4 h-4" />
|
|
<span>Get in Touch with Creator</span>
|
|
</div>
|
|
<h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
|
|
{t('title')}
|
|
</h1>
|
|
<p className="text-sm text-slate-400">
|
|
{t('subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start max-w-5xl mx-auto">
|
|
|
|
{/* Contact Info Card */}
|
|
<div className="lg:col-span-5 bg-slate-900/80 border border-slate-800 p-8 rounded-3xl space-y-6 shadow-xl">
|
|
<h2 className="text-xl font-bold text-white flex items-center gap-2">
|
|
<Sparkles className="w-5 h-5 text-red-500" />
|
|
<span>Why Reach Out?</span>
|
|
</h2>
|
|
|
|
<ul className="space-y-4 text-xs text-slate-300">
|
|
<li className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
✓
|
|
</div>
|
|
<div>
|
|
<span className="font-bold text-white block">Future Tutorial Requests</span>
|
|
<span>Suggest coding topics, frameworks, or projects you want covered.</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
✓
|
|
</div>
|
|
<div>
|
|
<span className="font-bold text-white block">Sponsorship & Inquiries</span>
|
|
<span>Discuss channel sponsorships or platform collaborations.</span>
|
|
</div>
|
|
</li>
|
|
|
|
<li className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
✓
|
|
</div>
|
|
<div>
|
|
<span className="font-bold text-white block">Code Issues & Feedback</span>
|
|
<span>Provide feedback on video code snippets or starter templates.</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="pt-6 border-t border-slate-800 space-y-3 text-xs">
|
|
<div className="flex items-center gap-3 text-slate-300">
|
|
<Mail className="w-4 h-4 text-red-400" />
|
|
<span>contact@youtube-devhub.com</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-slate-300">
|
|
<Youtube className="w-4 h-4 text-red-500" />
|
|
<span>YouTube: @DevHubChannel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form Area */}
|
|
<div className="lg:col-span-7 bg-slate-900/60 border border-slate-800 p-8 rounded-3xl shadow-xl">
|
|
{submitted ? (
|
|
<div className="p-8 text-center space-y-4 bg-emerald-950/30 border border-emerald-800/40 rounded-2xl">
|
|
<CheckCircle2 className="w-12 h-12 text-emerald-400 mx-auto animate-bounce" />
|
|
<h3 className="text-xl font-bold text-white">{t('success')}</h3>
|
|
<p className="text-xs text-slate-300">Your message has been saved in PostgreSQL. I will reply soon.</p>
|
|
<button
|
|
onClick={() => setSubmitted(false)}
|
|
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-xs font-bold text-white rounded-xl transition-colors"
|
|
>
|
|
Send Another Message
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{errorMsg && (
|
|
<div className="p-3 rounded-xl bg-red-950/50 border border-red-800 text-xs text-red-400">
|
|
{errorMsg}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('name')}</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={form.name}
|
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
|
|
placeholder="John Doe"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('email')}</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={form.email}
|
|
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('subject')}</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={form.subject}
|
|
onChange={(e) => setForm({ ...form, subject: e.target.value })}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
|
|
placeholder="Sponsorship Proposal or New Tutorial Request"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('message')}</label>
|
|
<textarea
|
|
rows={5}
|
|
required
|
|
value={form.message}
|
|
onChange={(e) => setForm({ ...form, message: e.target.value })}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
|
|
placeholder="Type your message here..."
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="w-full py-3.5 px-6 bg-red-600 hover:bg-red-500 text-white font-bold text-xs rounded-xl shadow-lg shadow-red-600/30 transition-all flex items-center justify-center gap-2"
|
|
>
|
|
{isSubmitting ? (
|
|
<span>Saving to PostgreSQL...</span>
|
|
) : (
|
|
<>
|
|
<Send className="w-4 h-4" />
|
|
<span>{t('send')}</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|