arsam/CShare
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Import source: cshare-app/src/pages/AboutPage

Browse Source 
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
2026-09-18 23:14:37 +03:30
parent 87e9b837a4
commit 2ffd05c14c
1 changed files with 69 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cshare-app/src/pages/AboutPage.jsx
+69
View File
@@ -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>
);
}