From b972376bf847a94784226abc555bc479cd62cc1a Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:14:42 +0330
Subject: [PATCH] Import source: cshare-app/src/pages/CareersPage

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 cshare-app/src/pages/CareersPage.jsx | 85 ++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 cshare-app/src/pages/CareersPage.jsx

diff --git a/cshare-app/src/pages/CareersPage.jsx b/cshare-app/src/pages/CareersPage.jsx
new file mode 100644
index 0000000..e42efdc
--- /dev/null
+++ b/cshare-app/src/pages/CareersPage.jsx
@@ -0,0 +1,85 @@
+import { useNavigate } from 'react-router-dom';
+
+const OPENINGS = [
+  {
+    title: 'Full-stack Engineer',
+    type: 'Full-time · Remote',
+    desc: 'Own features end-to-end: React frontend, Node/Express backend, storage infrastructure. Strong opinions about simplicity preferred.',
+    skills: ['React', 'Node.js', 'PostgreSQL', 'S3-compatible storage'],
+  },
+  {
+    title: 'Product Designer',
+    type: 'Full-time · Remote',
+    desc: "Design the product — not just the UI. You'll own interaction patterns, work directly with users, and set the visual direction.",
+    skills: ['Figma', 'Motion design', 'User research', 'Design systems'],
+  },
+];
+
+export default function CareersPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="page-enter" style={{ minHeight: '100vh', maxWidth: '860px', 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' }}>Careers</span>
+        </div>
+        <h1 className="heading-lg" style={{ marginBottom: '20px' }}>Small team. Real product.</h1>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.8, maxWidth: '600px' }}>
+          CShare is bootstrapped. No management layers, no process theater. You'll work on a product real people use, with full autonomy over your work.
+        </p>
+      </div>
+
+      {/* Perks strip */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '12px', marginBottom: '56px' }}>
+        {[
+          ['100% remote', 'Work from anywhere, any timezone.'],
+          ['Async-first', 'No mandatory standups. Own your calendar.'],
+          ['Equity', 'Meaningful stake for early team members.'],
+          ['Health coverage', 'Full medical, dental, vision.'],
+        ].map(([title, desc]) => (
+          <div key={title} className="card" style={{ padding: '20px' }}>
+            <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '0.9375rem', marginBottom: '6px' }}>{title}</div>
+            <p style={{ color: 'var(--text-muted)', fontSize: '0.8125rem', lineHeight: 1.6, margin: 0 }}>{desc}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Openings */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '24px' }}>
+        <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' }}>Open roles</span>
+        <span style={{ marginLeft: '8px', padding: '2px 8px', background: 'var(--accent-muted)', border: '1px solid var(--accent-border)', borderRadius: '999px', fontSize: '0.6875rem', color: 'var(--accent)', fontFamily: 'var(--font-body)', fontWeight: 600 }}>
+          {OPENINGS.length} open
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '48px' }}>
+        {OPENINGS.map((job) => (
+          <div key={job.title} className="card card-interactive" style={{ padding: '28px', cursor: 'pointer' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '16px', flexWrap: 'wrap', marginBottom: '14px' }}>
+              <h2 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '1.1875rem', letterSpacing: '-0.02em' }}>{job.title}</h2>
+              <span style={{ fontSize: '0.8125rem', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{job.type}</span>
+            </div>
+            <p style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.7, marginBottom: '16px' }}>{job.desc}</p>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+              {job.skills.map((s) => (
+                <span key={s} style={{ padding: '3px 10px', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)', borderRadius: '999px', fontSize: '0.75rem', color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>{s}</span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="card" style={{ padding: '32px', textAlign: 'center', border: '1px solid var(--border-subtle)' }}>
+        <p style={{ color: 'var(--text-secondary)', marginBottom: '20px', lineHeight: 1.7 }}>
+          Don't see your role? We're always open to hearing from great people.
+        </p>
+        <button className="btn btn-secondary" onClick={() => navigate('/contact')}>
+          Send a message
+        </button>
+      </div>
+    </div>
+  );
+}