index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>brick. — The Modern Platform for Brick Delivery</title>
  <meta name="description" content="Streamline your brick operations with enterprise-grade infrastructure. From order to doorstep in milliseconds.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Nav -->
  <nav class="nav">
    <div class="nav-logo">brick.</div>
    <ul class="nav-links">
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Enterprise</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#" class="btn btn-primary">Get Started</a></li>
    </ul>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-badge">Now in General Availability</div>
    <h1 class="hero-title">The modern platform<br>for brick delivery.</h1>
    <p class="hero-subtitle">Streamline your brick operations with enterprise-grade infrastructure. From order to doorstep in milliseconds.*</p>
    <div class="hero-actions">
      <a href="#" class="btn btn-primary btn-lg">Start for Free</a>
      <a href="#" class="btn btn-secondary btn-lg">Talk to Sales</a>
    </div>
    <p class="hero-footnote">*Physical delivery times may vary.</p>
  </section>

  <!-- Social Proof -->
  <section class="social-proof">
    <div class="social-proof-label">Trusted by industry leaders</div>
    <div class="social-proof-logos">
      <span>ACME Corp</span>
      <span>Brick &amp; Mortar Inc.</span>
      <span>The Wall Street</span>
      <span>Stackable</span>
      <span>Foundation AI</span>
    </div>
  </section>

  <!-- Features -->
  <section class="section">
    <div class="section-header">
      <h2 class="section-title">Everything you need to ship bricks.</h2>
    </div>
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon">&#x1F4E6;</div>
        <div class="feature-name">Real-time Tracking</div>
        <p class="feature-desc">Know exactly where your brick is. GPS-enabled, sub-centimeter accuracy.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">&#x1F512;</div>
        <div class="feature-name">SOC2 Compliant</div>
        <p class="feature-desc">Your brick data is encrypted at rest and in transit. Always.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">&#x26A1;</div>
        <div class="feature-name">99.97% Uptime SLA</div>
        <p class="feature-desc">Bricks are always available when you need them. Guaranteed.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">&#x1F9F1;</div>
        <div class="feature-name">Brick API</div>
        <p class="feature-desc">RESTful endpoints for programmatic brick ordering. GraphQL coming Q3.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">&#x1F916;</div>
        <div class="feature-name">BrickAI&trade;</div>
        <p class="feature-desc">Our ML model predicts which brick you need before you do.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">&#x1F30D;</div>
        <div class="feature-name">Edge Bricks</div>
        <p class="feature-desc">Bricks cached at 200+ edge locations worldwide. Low-latency masonry.</p>
      </div>
    </div>
  </section>

  <!-- Metrics -->
  <section class="metrics">
    <div class="metric">
      <div class="metric-value">2.4B</div>
      <div class="metric-label">Bricks delivered</div>
    </div>
    <div class="metric">
      <div class="metric-value">143ms</div>
      <div class="metric-label">Avg. time to brick</div>
    </div>
    <div class="metric">
      <div class="metric-value">99.97%</div>
      <div class="metric-label">Brick uptime</div>
    </div>
    <div class="metric">
      <div class="metric-value">1</div>
      <div class="metric-label">Type of product</div>
    </div>
  </section>

  <!-- Pricing -->
  <section class="section">
    <div class="section-header">
      <h2 class="section-title">Simple, transparent pricing.</h2>
      <p class="section-subtitle">No hidden fees. Just bricks.</p>
    </div>
    <div class="pricing-grid">
      <div class="pricing-card">
        <div class="pricing-tier">Starter</div>
        <div class="pricing-price">$9<span>/brick/mo</span></div>
        <ul class="pricing-features">
          <li>1 brick</li>
          <li>Community support</li>
          <li>Basic analytics</li>
          <li>Shared brick pool</li>
        </ul>
        <a href="#" class="btn btn-secondary" style="margin-top:24px;width:100%;text-align:center;">Get Started</a>
      </div>
      <div class="pricing-card pricing-card--featured">
        <div class="pricing-badge">Popular</div>
        <div class="pricing-tier">Pro</div>
        <div class="pricing-price">$49<span>/brick/mo</span></div>
        <ul class="pricing-features">
          <li>Up to 10 bricks</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
          <li>Dedicated brick pool</li>
          <li>BrickAI&trade; included</li>
        </ul>
        <a href="#" class="btn btn-primary" style="margin-top:24px;width:100%;text-align:center;">Get Started</a>
      </div>
      <div class="pricing-card">
        <div class="pricing-tier">Enterprise</div>
        <div class="pricing-price">Custom</div>
        <ul class="pricing-features">
          <li>Unlimited bricks</li>
          <li>Dedicated account manager</li>
          <li>SLA guarantee</li>
          <li>On-premise brick deployment</li>
          <li>Brick governance &amp; compliance</li>
        </ul>
        <a href="#" class="btn btn-secondary" style="margin-top:24px;width:100%;text-align:center;">Contact Sales</a>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="section">
    <div class="testimonials-grid">
      <div class="testimonial-card">
        <p class="testimonial-quote">"brick.email replaced our entire supply chain. We used to order bricks manually. Now we just don't."</p>
        <div class="testimonial-author">Sarah K.</div>
        <div class="testimonial-role">VP of Brick Operations, Stackable</div>
      </div>
      <div class="testimonial-card">
        <p class="testimonial-quote">"We evaluated 14 brick platforms. brick.email was the only one that existed."</p>
        <div class="testimonial-author">James R.</div>
        <div class="testimonial-role">CTO, Foundation AI</div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta">
    <h2 class="cta-title">Ready to transform your<br>brick workflow?</h2>
    <p class="cta-subtitle">Join 10,000+ teams already shipping bricks with confidence.</p>
    <div style="margin-top:32px;">
      <a href="#" class="btn btn-primary btn-lg">Get Started &mdash; It's Free</a>
    </div>
    <p class="cta-note">No credit card required. First brick on us.</p>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <ul class="footer-links">
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Security</a></li>
      <li><a href="#">Status</a></li>
    </ul>
    <div class="footer-copy">&copy; 2026 brick.email &mdash; Made with bricks in San Francisco.</div>
  </footer>

</body>
</html>