Import source: app/src/pages/ContactPage

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:25:05 +03:30
parent 9b076eeae5
commit dd55dcfcdc
1 changed files with 93 additions and 0 deletions
@@ -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>
+  );
+}