first commit
This commit is contained in:
AyrisAI
@@ -0,0 +1,194 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user