Import source: app/src/pages/ContactPage
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,93 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useNav, useToast } from '../../teknav-ui.jsx';
|
||||||
|
import { iconNode } from '../../src/lib/icon.jsx';
|
||||||
|
import mailIcon from '../../src/assets/icons/mail.svg';
|
||||||
|
import penLineIcon from '../../src/assets/icons/pen-line.svg';
|
||||||
|
import mapPinIcon from '../../src/assets/icons/map-pin.svg';
|
||||||
|
import { LegalPage, LegalSection } from './shared.jsx';
|
||||||
|
|
||||||
|
export function ContactPage() {
|
||||||
|
const { navigate } = useNav();
|
||||||
|
const toast = useToast();
|
||||||
|
const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
|
||||||
|
const [sent, setSent] = useState(false);
|
||||||
|
|
||||||
|
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
|
||||||
|
|
||||||
|
const submit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!form.name.trim() || !form.email.includes('@') || !form.message.trim()) {
|
||||||
|
toast('لطفاً همه فیلدهای ضروری را پر کنید', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await fetch('/api/v1/contact', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(form),
|
||||||
|
});
|
||||||
|
} catch {}
|
||||||
|
setSent(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (sent) return (
|
||||||
|
<div style={{ paddingTop: 88, paddingBottom: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<div style={{ textAlign: 'center', maxWidth: 420, padding: '0 24px' }}>
|
||||||
|
<div style={{ fontSize: 56, marginBottom: 16 }}>✓</div>
|
||||||
|
<h2 style={{ fontSize: 22, fontWeight: 800, color: '#0F2A2E', marginBottom: 10 }}>پیام شما ارسال شد</h2>
|
||||||
|
<p style={{ color: '#5F6B6D', lineHeight: 1.8, marginBottom: 24 }}>ممنون از تماس شما. تیم تکناو بهزودی پاسخ خواهد داد.</p>
|
||||||
|
<button onClick={() => navigate('/')} style={{ background: '#0F6B73', color: '#fff', border: 'none', borderRadius: 8, padding: '12px 28px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'Vazirmatn,sans-serif' }}>
|
||||||
|
بازگشت به خانه
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const field = { background: '#FAF7F0', border: '1px solid #D8D0C4', borderRadius: 8, padding: '11px 14px', fontSize: 14, fontFamily: 'Vazirmatn,sans-serif', color: '#263238', width: '100%', boxSizing: 'border-box', outline: 'none', direction: 'rtl' };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LegalPage title="تماس با ما" subtitle="سوال، پیشنهاد، یا همکاری؟ خوشحال میشویم بشنویم.">
|
||||||
|
<LegalSection title="راههای ارتباطی مستقیم">
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 16, marginBottom: 4 }}>
|
||||||
|
{[
|
||||||
|
[mailIcon, 'ایمیل عمومی', 'info@teknav.ir'],
|
||||||
|
[penLineIcon, 'همکاری محتوایی', 'admin@teknavglobal.com'],
|
||||||
|
[mapPinIcon, 'موقعیت', 'تهران، ایران'],
|
||||||
|
].map(([icon, label, val]) => (
|
||||||
|
<div key={label} style={{ background: '#FAF7F0', border: '1px solid #E4DDD2', borderRadius: 10, padding: '16px 18px' }}>
|
||||||
|
<div style={{ fontSize: 22, marginBottom: 6 }}>{iconNode(icon)}</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#5F6B6D', marginBottom: 2 }}>{label}</div>
|
||||||
|
<div style={{ fontSize: 13, fontWeight: 600, color: '#0F2A2E' }}>{val}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</LegalSection>
|
||||||
|
|
||||||
|
<LegalSection title="ارسال پیام">
|
||||||
|
<form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
|
||||||
|
<div>
|
||||||
|
<label style={{ fontSize: 12, fontWeight: 600, color: '#5F6B6D', display: 'block', marginBottom: 5 }}>نام <span style={{ color: '#C46A4D' }}>*</span></label>
|
||||||
|
<input value={form.name} onChange={e => set('name', e.target.value)} placeholder="نام شما" style={field} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style={{ fontSize: 12, fontWeight: 600, color: '#5F6B6D', display: 'block', marginBottom: 5 }}>ایمیل <span style={{ color: '#C46A4D' }}>*</span></label>
|
||||||
|
<input value={form.email} onChange={e => set('email', e.target.value)} placeholder="example@email.com" style={{ ...field, direction: 'ltr' }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style={{ fontSize: 12, fontWeight: 600, color: '#5F6B6D', display: 'block', marginBottom: 5 }}>موضوع</label>
|
||||||
|
<input value={form.subject} onChange={e => set('subject', e.target.value)} placeholder="موضوع پیام" style={field} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style={{ fontSize: 12, fontWeight: 600, color: '#5F6B6D', display: 'block', marginBottom: 5 }}>پیام <span style={{ color: '#C46A4D' }}>*</span></label>
|
||||||
|
<textarea value={form.message} onChange={e => set('message', e.target.value)} placeholder="پیام خود را اینجا بنویسید..." rows={5} style={{ ...field, resize: 'vertical', lineHeight: 1.8 }} />
|
||||||
|
</div>
|
||||||
|
<button type="submit" style={{ background: '#0F6B73', color: '#fff', border: 'none', borderRadius: 8, padding: '12px 28px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'Vazirmatn,sans-serif', alignSelf: 'flex-start' }}>
|
||||||
|
ارسال پیام
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</LegalSection>
|
||||||
|
</LegalPage>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user