Initial commit: Full Crawl API implementation

2026-04-29 07:03:48 +00:00
commit 62994d4f3d
92 changed files with 6176 additions and 0 deletions
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -0,0 +1,124 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 20px' }}>
+      <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 80 }}>
+        <div style={{ fontSize: 24, fontWeight: 700 }}>Crawl API</div>
+        <div style={{ display: 'flex', gap: 24 }}>
+          <Link href="/docs" style={{ color: '#888', textDecoration: 'none' }}>Docs</Link>
+          <Link href="/playground" style={{ color: '#888', textDecoration: 'none' }}>Playground</Link>
+          <Link href="/billing" style={{ color: '#888', textDecoration: 'none' }}>Pricing</Link>
+          <Link href="/dashboard" style={{ color: '#888', textDecoration: 'none' }}>Dashboard</Link>
+        </div>
+      </nav>
+
+      <section style={{ textAlign: 'center', marginBottom: 120 }}>
+        <h1 style={{ fontSize: 56, marginBottom: 20, lineHeight: 1.1 }}>
+          Extract, capture, and convert<br />any webpage
+        </h1>
+        <p style={{ fontSize: 20, color: '#888', maxWidth: 600, margin: '0 auto 40px' }}>
+          Screenshots, PDFs, markdown, structured data and more — all from a single API call.
+          Just send a URL and get back exactly what you need.
+        </p>
+        <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
+          <Link href="/dashboard" style={{
+            background: '#fff',
+            color: '#000',
+            padding: '14px 28px',
+            borderRadius: 8,
+            textDecoration: 'none',
+            fontWeight: 600
+          }}>
+            Get started free
+          </Link>
+          <Link href="/playground" style={{
+            border: '1px solid #333',
+            color: '#fff',
+            padding: '14px 28px',
+            borderRadius: 8,
+            textDecoration: 'none'
+          }}>
+            API Playground →
+          </Link>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: 120 }}>
+        <div style={{
+          background: '#111',
+          borderRadius: 12,
+          padding: 24,
+          fontFamily: 'monospace',
+          fontSize: 14,
+          overflow: 'auto'
+        }}>
+          <div style={{ color: '#888', marginBottom: 12 }}>$ curl -X POST /api/screenshot -d {'{'}&quot;url&quot;: &quot;https://example.com&quot;{'}'}</div>
+          <div>{'{'} &quot;success&quot;: <span style={{ color: '#4ade80' }}>true</span>,</div>
+          <div>  &quot;url&quot;: <span style={{ color: '#fbbf24' }}>&quot;https://cdn.crawlapi.dev/s/abc123.png&quot;</span>,</div>
+          <div>  &quot;width&quot;: <span style={{ color: '#60a5fa' }}>1440</span> {'}'}</div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: 120 }}>
+        <h2 style={{ fontSize: 36, marginBottom: 16, textAlign: 'center' }}>9 endpoints, one shape</h2>
+        <p style={{ color: '#888', textAlign: 'center', marginBottom: 48 }}>
+          Every endpoint accepts the same request body. Send a URL and optional config — get back exactly what you need.
+        </p>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+          gap: 16
+        }}>
+          {[
+            { method: 'POST', path: '/api/crawl', desc: 'Full JS-rendered page crawl with all resources' },
+            { method: 'POST', path: '/api/content', desc: 'Raw HTML content of any page' },
+            { method: 'POST', path: '/api/screenshot', desc: 'Full-page PNG screenshot, hosted on CDN' },
+            { method: 'POST', path: '/api/pdf', desc: 'PDF export of any page, hosted on CDN' },
+            { method: 'POST', path: '/api/markdown', desc: 'Clean Markdown extraction from any page' },
+            { method: 'POST', path: '/api/snapshot', desc: 'HTML + screenshot combined in one call' },
+            { method: 'POST', path: '/api/scrape', desc: 'Structured extraction with CSS selectors' },
+            { method: 'POST', path: '/api/json', desc: 'Page content as structured JSON' },
+            { method: 'POST', path: '/api/links', desc: 'Extract all links from any page' },
+          ].map((ep) => (
+            <div key={ep.path} style={{ background: '#111', borderRadius: 12, padding: 24 }}>
+              <span style={{ color: '#4ade80', fontSize: 12, fontWeight: 600 }}>{ep.method}</span>
+              <div style={{ fontFamily: 'monospace', fontSize: 14, margin: '8px 0' }}>{ep.path}</div>
+              <div style={{ color: '#888', fontSize: 14 }}>{ep.desc}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section style={{ marginBottom: 120 }}>
+        <h2 style={{ fontSize: 36, marginBottom: 16, textAlign: 'center' }}>Simple, per-call pricing</h2>
+        <p style={{ color: '#888', textAlign: 'center', marginBottom: 48 }}>
+          Start free. Scale as you grow. Every endpoint costs 1 API call — no surprises.
+        </p>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+          gap: 16
+        }}>
+          {[
+            { name: 'Hobby', price: '$9', credits: '1,000 API calls/mo', concurrent: '3 concurrent requests' },
+            { name: 'Starter', price: '$19', credits: '3,000 API calls/mo', concurrent: '5 concurrent requests' },
+            { name: 'Pro', price: '$49', credits: '10,000 API calls/mo', concurrent: '10 concurrent requests' },
+            { name: 'Startup', price: '$99', credits: '25,000 API calls/mo', concurrent: '20 concurrent requests' },
+          ].map((plan) => (
+            <div key={plan.name} style={{ background: '#111', borderRadius: 12, padding: 24 }}>
+              <div style={{ fontSize: 14, color: '#888', marginBottom: 8 }}>{plan.name}</div>
+              <div style={{ fontSize: 36, fontWeight: 700, marginBottom: 16 }}>{plan.price}<span style={{ fontSize: 14, color: '#888' }}>/mo</span></div>
+              <div style={{ fontSize: 14, marginBottom: 8 }}>{plan.credits}</div>
+              <div style={{ fontSize: 14, color: '#888' }}>{plan.concurrent}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <footer style={{ textAlign: 'center', color: '#888', padding: '40px 0', borderTop: '1px solid #222' }}>
+        © 2026 Crawl API. Built for developers.
+      </footer>
+    </main>
+  )
+}