Import source: cshare-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:14:44 +03:30
parent b972376bf8
commit 536c9c6bce
1 changed files with 104 additions and 0 deletions
@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { useToast } from '../components/ToastContext';
+
+export default function ContactPage() {
+  const addToast = useToast();
+  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
+  const [sending, setSending] = useState(false);
+
+  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
+
+  const submit = (e) => {
+    e.preventDefault();
+    if (!form.name || !form.email || !form.message) {
+      addToast('Please fill in all required fields', 'error');
+      return;
+    }
+    setSending(true);
+    setTimeout(() => {
+      setSending(false);
+      setForm({ name: '', email: '', subject: '', message: '' });
+      addToast("Message sent — we'll get back to you within 48 hours", 'success');
+    }, 1200);
+  };
+
+  return (
+    <div className="page-enter" style={{ minHeight: '100vh', maxWidth: '720px', margin: '0 auto', padding: 'clamp(64px, 10vh, 100px) 24px 80px' }}>
+      <div style={{ marginBottom: '48px' }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '20px' }}>
+          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
+          <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Contact</span>
+        </div>
+        <h1 className="heading-lg" style={{ marginBottom: '16px' }}>Get in touch.</h1>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.7 }}>
+          Questions, feedback, bugs, partnership ideas — we read everything and reply within 48 hours.
+        </p>
+      </div>
+
+      <div className="contact-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: '40px', alignItems: 'start' }}>
+        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <div className="contact-name-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+            <div>
+              <label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>
+                Name <span style={{ color: 'var(--accent)' }}>*</span>
+              </label>
+              <input className="input" placeholder="Your name" value={form.name} onChange={set('name')} />
+            </div>
+            <div>
+              <label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>
+                Email <span style={{ color: 'var(--accent)' }}>*</span>
+              </label>
+              <input className="input" type="email" placeholder="you@example.com" value={form.email} onChange={set('email')} />
+            </div>
+          </div>
+
+          <div>
+            <label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>Subject</label>
+            <input className="input" placeholder="What's this about?" value={form.subject} onChange={set('subject')} />
+          </div>
+
+          <div>
+            <label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>
+              Message <span style={{ color: 'var(--accent)' }}>*</span>
+            </label>
+            <textarea
+              className="input"
+              placeholder="Tell us what's on your mind..."
+              value={form.message}
+              onChange={set('message')}
+              rows={6}
+              style={{ resize: 'vertical', lineHeight: 1.7 }}
+            />
+          </div>
+
+          <button type="submit" className="btn btn-primary btn-lg" disabled={sending} style={{ alignSelf: 'flex-start' }}>
+            {sending ? (
+              <>
+                <span style={{ width: '16px', height: '16px', border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin 0.6s linear infinite', display: 'inline-block' }} />
+                Sending…
+              </>
+            ) : 'Send message'}
+          </button>
+        </form>
+
+        {/* Contact info sidebar */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          {[
+            { label: 'General', value: 'hello@cshare.app' },
+            { label: 'Support', value: 'support@cshare.app' },
+            { label: 'Security', value: 'security@cshare.app' },
+          ].map(({ label, value }) => (
+            <div key={label} className="card" style={{ padding: '16px 20px' }}>
+              <div style={{ fontSize: '0.6875rem', fontFamily: 'var(--font-heading)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '4px' }}>{label}</div>
+              <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--accent)' }}>{value}</div>
+            </div>
+          ))}
+          <div className="card" style={{ padding: '16px 20px' }}>
+            <div style={{ fontSize: '0.6875rem', fontFamily: 'var(--font-heading)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '4px' }}>Response time</div>
+            <div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>Within 48 hours</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}