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

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:14:39 +03:30
parent 2ffd05c14c
commit 329ce8c4cc
1 changed files with 81 additions and 0 deletions
@@ -0,0 +1,81 @@
+const POSTS = [
+  {
+    tag: 'Product',
+    date: 'May 20, 2026',
+    title: 'Introducing CShare: file sharing with a built-in expiry date',
+    excerpt: "We built CShare because every other file-sharing tool either requires the recipient to sign up, charges per GB, or keeps files around forever. Here's why we think expiry-first is the right model.",
+    readTime: '4 min read',
+  },
+  {
+    tag: 'Engineering',
+    date: 'May 14, 2026',
+    title: 'Why we store files at the edge, not in a central bucket',
+    excerpt: "Centralizing storage is the obvious choice. We chose not to. Here's what edge-first file storage actually means in practice, and why it matters for download speed.",
+    readTime: '6 min read',
+  },
+  {
+    tag: 'Security',
+    date: 'May 8, 2026',
+    title: 'How link expiry actually works under the hood',
+    excerpt: "It's not just a UI toggle. Files are deleted server-side at the moment of expiry, enforced at the request level. A full breakdown of the expiry pipeline.",
+    readTime: '5 min read',
+  },
+  {
+    tag: 'Product',
+    date: 'Apr 30, 2026',
+    title: 'Analytics without the surveillance: what we track and why',
+    excerpt: "We show you view counts and download counts. We don't fingerprint recipients or sell data. Here's the exact list of what we collect and why each item exists.",
+    readTime: '3 min read',
+  },
+];
+
+const TAG_COLORS = {
+  Product: 'var(--accent)',
+  Engineering: 'var(--success)',
+  Security: '#C084FC',
+};
+
+export default function BlogPage() {
+  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' }}>Blog</span>
+        </div>
+        <h1 className="heading-lg" style={{ marginBottom: '12px' }}>Writing</h1>
+        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem' }}>Product updates, engineering deep-dives, and thoughts on file sharing.</p>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        {POSTS.map((post, i) => (
+          <article
+            key={i}
+            className="card card-interactive"
+            style={{ padding: '28px 32px', cursor: 'pointer', animation: `fadeInUp 0.4s ${i * 0.07}s ease both` }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
+              <span style={{
+                padding: '3px 10px', borderRadius: '999px', fontSize: '0.6875rem',
+                fontFamily: 'var(--font-body)', fontWeight: 600, letterSpacing: '0.04em',
+                background: `${TAG_COLORS[post.tag]}18`,
+                color: TAG_COLORS[post.tag],
+                border: `1px solid ${TAG_COLORS[post.tag]}30`,
+              }}>
+                {post.tag}
+              </span>
+              <span style={{ fontSize: '0.8125rem', color: 'var(--text-muted)' }}>{post.date}</span>
+              <span style={{ marginLeft: 'auto', fontSize: '0.8125rem', color: 'var(--text-muted)' }}>{post.readTime}</span>
+            </div>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '1.1875rem', letterSpacing: '-0.02em', marginBottom: '10px', lineHeight: 1.3 }}>
+              {post.title}
+            </h2>
+            <p style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.7, margin: 0 }}>
+              {post.excerpt}
+            </p>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}