crawlapi/frontend/app/page.tsx

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>
  )
}