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

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

diff --git a/cshare-app/src/pages/AboutPage.jsx b/cshare-app/src/pages/AboutPage.jsx
new file mode 100644
index 0000000..2a2f430
--- /dev/null
+++ b/cshare-app/src/pages/AboutPage.jsx
@@ -0,0 +1,69 @@
+import { useNavigate } from 'react-router-dom';
+import { ShieldIcon, ZapIcon, GlobeIcon } from '../components/Icons';
+
+const VALUES = [
+  { icon: <ZapIcon size={22} />, title: 'Speed over ceremony', desc: 'File sharing should take seconds, not minutes. We remove every unnecessary step between your file and your recipient.' },
+  { icon: <ShieldIcon size={22} />, title: 'Expiry by default', desc: "Files that live forever are a liability. Every link on CShare expires. That's not a limitation — it's the point." },
+  { icon: <GlobeIcon size={22} />, title: 'No walls', desc: "Recipients shouldn't need an account to download a file you sent them. We refuse to add sign-up friction to the receiving end." },
+];
+
+export default function AboutPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="page-enter" style={{ minHeight: '100vh' }}>
+      {/* Hero */}
+      <section style={{ padding: 'clamp(72px, 10vh, 120px) 24px 64px', maxWidth: '760px', margin: '0 auto' }}>
+        <div style={{ display: 'inline-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' }}>About</span>
+        </div>
+        <h1 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700, fontSize: 'clamp(2.25rem, 4vw, 3.5rem)', letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: '28px' }}>
+          Built by someone who got tired of WeTransfer links that live forever.
+        </h1>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.8, marginBottom: '20px' }}>
+          CShare started as a weekend project. The problem was simple: every file-sharing service either requires the recipient to sign up, charges too much, or keeps files around indefinitely with no way to clean up.
+        </p>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.8, marginBottom: '20px' }}>
+          The idea was to build the opposite — dead simple to use, zero friction for recipients, and files that disappear when they're supposed to.
+        </p>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.8 }}>
+          CShare is currently in public beta. It's a real product with real infrastructure, built carefully and maintained actively. No VC funding, no growth hacking, no dark patterns.
+        </p>
+      </section>
+
+      {/* Values */}
+      <section style={{ padding: '0 24px 80px', maxWidth: '1080px', margin: '0 auto' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '32px' }}>
+          <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' }}>What we believe</span>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px' }}>
+          {VALUES.map((v) => (
+            <div key={v.title} className="card" style={{ padding: '28px' }}>
+              <div style={{ width: '44px', height: '44px', borderRadius: 'var(--radius-md)', background: 'var(--accent-muted)', border: '1px solid var(--accent-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', marginBottom: '16px' }}>
+                {v.icon}
+              </div>
+              <h3 className="heading-sm" style={{ marginBottom: '8px' }}>{v.title}</h3>
+              <p style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.7 }}>{v.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section style={{ padding: '0 24px 80px', maxWidth: '760px', margin: '0 auto' }}>
+        <div className="card" style={{ padding: '40px', textAlign: 'center', position: 'relative', overflow: 'hidden', border: '1px solid var(--accent-border)' }}>
+          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, var(--accent), transparent)' }} />
+          <h2 className="heading-md" style={{ marginBottom: '16px' }}>Give it a try.</h2>
+          <p style={{ color: 'var(--text-secondary)', marginBottom: '28px', lineHeight: 1.7 }}>
+            No account needed to start. Upload a file right now and see how it feels.
+          </p>
+          <button className="btn btn-primary btn-lg" onClick={() => navigate('/upload')}>
+            Start Sharing Free
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}