site-builder/templates/startup-company/product.html

<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
  <a href="home.html" style="font-size:22px;font-weight:700;color:#ffffff;text-decoration:none;letter-spacing:-0.5px;">NovaTech</a>
  <div style="display:flex;align-items:center;gap:32px;">
    <a href="product.html" style="color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">Product</a>
    <a href="team.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Team</a>
    <a href="contact.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
    <a href="#" style="background-color:#6366f1;color:#ffffff;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;">Get Started</a>
  </div>
</nav>

<!-- Product Hero -->
<section style="background-color:#0f172a;padding:96px 48px;text-align:center;font-family:'Inter',sans-serif;">
  <div style="max-width:720px;margin:0 auto;">
    <p style="font-size:14px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 16px;">Product</p>
    <h1 style="font-size:52px;font-weight:800;color:#ffffff;line-height:1.1;margin:0 0 24px;letter-spacing:-1.5px;">One Platform. Endless Possibilities.</h1>
    <p style="font-size:18px;color:#94a3b8;line-height:1.7;margin:0;">From analytics to automation, NovaTech brings all your data tools together in one intuitive workspace.</p>
  </div>
</section>

<!-- Feature 1: Analytics Dashboard -->
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:64px;flex-wrap:wrap;">
    <div style="flex:1;min-width:320px;">
      <p style="font-size:13px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Analytics</p>
      <h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-0.5px;">Analytics Dashboard</h2>
      <p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 24px;">Visualize your most important metrics in real time. Build custom dashboards with drag-and-drop widgets, set alerts, and share insights with your team instantly.</p>
      <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> Real-time data streaming</li>
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> 50+ chart types</li>
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> Custom KPI tracking</li>
      </ul>
    </div>
    <div style="flex:1;min-width:320px;">
      <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop" alt="Analytics Dashboard" style="width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.1);" />
    </div>
  </div>
</section>

<!-- Feature 2: Workflow Automation -->
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:64px;flex-wrap:wrap;flex-direction:row-reverse;">
    <div style="flex:1;min-width:320px;">
      <p style="font-size:13px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Automation</p>
      <h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-0.5px;">Workflow Automation</h2>
      <p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 24px;">Eliminate manual tasks with intelligent automation. Build workflows visually, set conditions and triggers, and let NovaTech run your processes around the clock.</p>
      <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> Visual workflow builder</li>
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> Conditional logic & branching</li>
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> Scheduled & event-based triggers</li>
      </ul>
    </div>
    <div style="flex:1;min-width:320px;">
      <img src="https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=600&h=400&fit=crop" alt="Workflow Automation" style="width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.1);" />
    </div>
  </div>
</section>

<!-- Feature 3: Integrations -->
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:64px;flex-wrap:wrap;">
    <div style="flex:1;min-width:320px;">
      <p style="font-size:13px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Connect</p>
      <h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-0.5px;">200+ Integrations</h2>
      <p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 24px;">Connect NovaTech to the tools you already use. From Salesforce to Slack, Google Sheets to PostgreSQL, your data flows seamlessly into one unified platform.</p>
      <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> One-click setup</li>
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> REST API & webhooks</li>
        <li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">&#10003;</span> Custom data connectors</li>
      </ul>
    </div>
    <div style="flex:1;min-width:320px;">
      <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=600&h=400&fit=crop" alt="Integrations" style="width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.1);" />
    </div>
  </div>
</section>

<!-- Pricing -->
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;text-align:center;">
    <h2 style="font-size:38px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-1px;">Simple, transparent pricing</h2>
    <p style="font-size:17px;color:#64748b;margin:0 0 56px;">Start free and scale as you grow. No hidden fees.</p>
    <div style="display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:stretch;">
      <!-- Starter -->
      <div style="flex:1;min-width:280px;max-width:340px;background-color:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;display:flex;flex-direction:column;">
        <h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 8px;">Starter</h3>
        <div style="margin-bottom:24px;"><span style="font-size:40px;font-weight:800;color:#0f172a;">Free</span></div>
        <ul style="list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px;flex-grow:1;">
          <li style="font-size:14px;color:#64748b;">Up to 3 dashboards</li>
          <li style="font-size:14px;color:#64748b;">1,000 data points/day</li>
          <li style="font-size:14px;color:#64748b;">5 integrations</li>
          <li style="font-size:14px;color:#64748b;">Community support</li>
        </ul>
        <a href="#" style="display:block;text-align:center;border:2px solid #6366f1;color:#6366f1;padding:12px 24px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:600;">Get Started</a>
      </div>
      <!-- Pro -->
      <div style="flex:1;min-width:280px;max-width:340px;background-color:#6366f1;border-radius:16px;padding:40px 32px;text-align:left;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(99,102,241,0.3);">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
          <h3 style="font-size:20px;font-weight:700;color:#ffffff;margin:0;">Pro</h3>
          <span style="background-color:#e0e7ff;color:#4338ca;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;">Popular</span>
        </div>
        <div style="margin-bottom:24px;"><span style="font-size:40px;font-weight:800;color:#ffffff;">$49</span><span style="font-size:16px;color:#c7d2fe;">/mo</span></div>
        <ul style="list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px;flex-grow:1;">
          <li style="font-size:14px;color:#e0e7ff;">Unlimited dashboards</li>
          <li style="font-size:14px;color:#e0e7ff;">100,000 data points/day</li>
          <li style="font-size:14px;color:#e0e7ff;">50 integrations</li>
          <li style="font-size:14px;color:#e0e7ff;">Workflow automation</li>
          <li style="font-size:14px;color:#e0e7ff;">Priority support</li>
        </ul>
        <a href="#" style="display:block;text-align:center;background-color:#ffffff;color:#4338ca;padding:12px 24px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:700;">Start Free Trial</a>
      </div>
      <!-- Enterprise -->
      <div style="flex:1;min-width:280px;max-width:340px;background-color:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;display:flex;flex-direction:column;">
        <h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 8px;">Enterprise</h3>
        <div style="margin-bottom:24px;"><span style="font-size:40px;font-weight:800;color:#0f172a;">Custom</span></div>
        <ul style="list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px;flex-grow:1;">
          <li style="font-size:14px;color:#64748b;">Everything in Pro</li>
          <li style="font-size:14px;color:#64748b;">Unlimited data points</li>
          <li style="font-size:14px;color:#64748b;">SSO & SAML</li>
          <li style="font-size:14px;color:#64748b;">Dedicated account manager</li>
          <li style="font-size:14px;color:#64748b;">Custom SLA</li>
        </ul>
        <a href="#" style="display:block;text-align:center;border:2px solid #6366f1;color:#6366f1;padding:12px 24px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:600;">Contact Sales</a>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer style="background-color:#0f172a;padding:48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;">
    <a href="home.html" style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;text-decoration:none;">NovaTech</a>
    <div style="display:flex;gap:28px;">
      <a href="product.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Product</a>
      <a href="team.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Team</a>
      <a href="contact.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Contact</a>
      <a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;">Privacy</a>
    </div>
    <p style="color:#475569;font-size:13px;margin:0;">&copy; 2026 NovaTech. All rights reserved.</p>
  </div>
</footer>