cloud-hosting-platform/site-builder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add templates, tests, and miscellaneous project files

Browse Source 
Includes new page templates (fitness-gym, nonprofit, online-course,
photography-studio, real-estate, startup-company, travel-blog,
wedding-invitation) with thumbnail SVGs, test specs, documentation
files, and minor updates to index.html, router.php, and playwright config.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Knapp
2026-03-01 14:15:58 -08:00
parent 03f573b451
commit b511a6684d
61 changed files with 6919 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
templates/startup-company/contact.html Normal file
View File

@@ -0,0 +1,113 @@
<!-- 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:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">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:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">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>
<!-- Contact Section -->
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
<div style="max-width:1100px;margin:0 auto;display:flex;gap:64px;flex-wrap:wrap;">
<!-- Left: Contact Info -->
<div style="flex:1;min-width:320px;">
<p style="font-size:14px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Contact Us</p>
<h1 style="font-size:42px;font-weight:800;color:#0f172a;line-height:1.15;margin:0 0 20px;letter-spacing:-1px;">Let's Talk</h1>
<p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 40px;">Have a question about NovaTech? Want a personalized demo? We'd love to hear from you.</p>
<div style="display:flex;flex-direction:column;gap:28px;">
<div>
<h4 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px;">Email</h4>
<a href="mailto:hello@novatech.io" style="font-size:15px;color:#6366f1;text-decoration:none;">hello@novatech.io</a>
</div>
<div>
<h4 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px;">Headquarters</h4>
<p style="font-size:15px;color:#64748b;margin:0;line-height:1.6;">123 Innovation Drive, Suite 400<br />San Francisco, CA 94107</p>
</div>
<div>
<h4 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px;">Follow Us</h4>
<div style="display:flex;gap:16px;">
<a href="#" style="color:#6366f1;text-decoration:none;font-size:15px;font-weight:500;">Twitter</a>
<a href="#" style="color:#6366f1;text-decoration:none;font-size:15px;font-weight:500;">LinkedIn</a>
<a href="#" style="color:#6366f1;text-decoration:none;font-size:15px;font-weight:500;">GitHub</a>
</div>
</div>
</div>
</div>
<!-- Right: Contact Form -->
<div style="flex:1;min-width:320px;background-color:#f8fafc;border-radius:16px;padding:40px;">
<form style="display:flex;flex-direction:column;gap:20px;">
<div style="display:flex;gap:16px;flex-wrap:wrap;">
<div style="flex:1;min-width:140px;">
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Name</label>
<input type="text" placeholder="Your name" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;" />
</div>
<div style="flex:1;min-width:140px;">
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Email</label>
<input type="email" placeholder="you@company.com" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;" />
</div>
</div>
<div>
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Company</label>
<input type="text" placeholder="Your company" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;" />
</div>
<div>
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Subject</label>
<select style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;color:#64748b;">
<option>General Inquiry</option>
<option>Request a Demo</option>
<option>Pricing Question</option>
<option>Technical Support</option>
<option>Partnership</option>
</select>
</div>
<div>
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Message</label>
<textarea placeholder="How can we help?" rows="5" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;resize:vertical;box-sizing:border-box;"></textarea>
</div>
<button type="submit" style="background-color:#6366f1;color:#ffffff;padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;">Send Message</button>
</form>
</div>
</div>
</section>
<!-- FAQ Section -->
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
<div style="max-width:800px;margin:0 auto;">
<h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 48px;text-align:center;letter-spacing:-0.5px;">Frequently Asked Questions</h2>
<div style="display:flex;flex-direction:column;gap:24px;">
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">What is NovaTech?</h3>
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">NovaTech is an AI-powered analytics and automation platform that helps teams turn raw data into actionable insights. We combine real-time dashboards, workflow automation, and 200+ integrations in one unified workspace.</p>
</div>
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">Is there a free plan?</h3>
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Yes! Our Starter plan is completely free and includes up to 3 dashboards, 1,000 data points per day, and 5 integrations. No credit card required to get started.</p>
</div>
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">How long does setup take?</h3>
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Most teams are up and running within 15 minutes. Our one-click integrations connect to your existing tools instantly, and our onboarding wizard guides you through creating your first dashboard.</p>
</div>
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">Can I cancel anytime?</h3>
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Absolutely. All paid plans are month-to-month with no long-term contracts. You can upgrade, downgrade, or cancel at any time from your account settings.</p>
</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>

109
templates/startup-company/home.html Normal file
View File

@@ -0,0 +1,109 @@
<!-- 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="#" 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:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">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>
<!-- Hero Section -->
<section style="position:relative;background-color:#0f172a;padding:100px 48px 120px;text-align:center;overflow:hidden;font-family:'Inter',sans-serif;">
<div style="position:absolute;top:-80px;left:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(99,102,241,0.3),transparent 70%);border-radius:50%;"></div>
<div style="position:absolute;bottom:-100px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(99,102,241,0.2),transparent 70%);border-radius:50%;"></div>
<div style="position:relative;max-width:800px;margin:0 auto;z-index:1;">
<h1 style="font-size:56px;font-weight:800;color:#ffffff;line-height:1.1;margin:0 0 24px;letter-spacing:-1.5px;">Build the Future with AI&#8209;Powered Analytics</h1>
<p style="font-size:19px;color:#94a3b8;line-height:1.7;margin:0 0 40px;max-width:600px;margin-left:auto;margin-right:auto;">Transform raw data into actionable insights. NovaTech helps teams make smarter decisions faster with real-time dashboards and intelligent automation.</p>
<div style="display:flex;gap:16px;justify-content:center;">
<a href="#" style="background-color:#6366f1;color:#ffffff;padding:14px 32px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:600;">Get Started</a>
<a href="#" style="border:1px solid #475569;color:#e2e8f0;padding:14px 32px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:600;">See Demo</a>
</div>
</div>
</section>
<!-- Trusted By -->
<section style="background-color:#0f172a;border-top:1px solid #1e293b;padding:48px;font-family:'Inter',sans-serif;text-align:center;">
<p style="font-size:13px;text-transform:uppercase;letter-spacing:2px;color:#64748b;margin:0 0 32px;font-weight:600;">Trusted by innovative teams worldwide</p>
<div style="display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap;">
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Acme Corp</span>
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Globex</span>
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Initech</span>
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Umbrella</span>
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Stark Ind.</span>
</div>
</section>
<!-- Features -->
<section style="background-color:#ffffff;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;">Everything you need to grow</h2>
<p style="font-size:17px;color:#64748b;margin:0 0 56px;max-width:560px;margin-left:auto;margin-right:auto;">Powerful features designed to help your team move faster and make better decisions.</p>
<div style="display:flex;gap:32px;flex-wrap:wrap;justify-content:center;">
<div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">&#9679;</div>
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Real-time Analytics</h3>
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Monitor your key metrics as they happen. Interactive dashboards update in real time so you never miss a trend.</p>
</div>
<div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">&#9881;</div>
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Smart Automation</h3>
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Automate repetitive tasks with AI-driven workflows. Set triggers, define actions, and let NovaTech handle the rest.</p>
</div>
<div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">&#9733;</div>
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Team Collaboration</h3>
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Share dashboards, leave comments, and collaborate in real time. Keep your entire team aligned and informed.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
<div style="max-width:1000px;margin:0 auto;text-align:center;">
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-1px;">How it works</h2>
<p style="font-size:17px;color:#64748b;margin:0 0 56px;">Get started in three simple steps.</p>
<div style="display:flex;gap:40px;flex-wrap:wrap;justify-content:center;">
<div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
<div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">1</div>
<h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Connect Your Data</h3>
<p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Integrate with your existing tools in minutes. We support 200+ data sources out of the box.</p>
</div>
<div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
<div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">2</div>
<h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Build Dashboards</h3>
<p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Drag and drop widgets to create custom dashboards. No code required, just point and click.</p>
</div>
<div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
<div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">3</div>
<h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Get Insights</h3>
<p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Our AI surfaces trends and anomalies automatically. Make data-driven decisions with confidence.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section style="padding:96px 48px;font-family:'Inter',sans-serif;background:linear-gradient(135deg,#6366f1,#4338ca);text-align:center;">
<div style="max-width:600px;margin:0 auto;">
<h2 style="font-size:38px;font-weight:800;color:#ffffff;margin:0 0 16px;letter-spacing:-1px;">Start Your Free Trial</h2>
<p style="font-size:17px;color:#c7d2fe;line-height:1.7;margin:0 0 36px;">No credit card required. Get full access for 14 days and see how NovaTech can transform your workflow.</p>
<a href="#" style="display:inline-block;background-color:#ffffff;color:#4338ca;padding:14px 36px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:700;">Get Started Free</a>
</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;">
<span style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;">NovaTech</span>
<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>

141
templates/startup-company/product.html Normal file
View File

@@ -0,0 +1,141 @@
<!-- 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>

115
templates/startup-company/team.html Normal file
View File

@@ -0,0 +1,115 @@
<!-- 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:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Product</a>
<a href="team.html" style="color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">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>
<!-- Page Header -->
<section style="background-color:#0f172a;padding:96px 48px;text-align:center;font-family:'Inter',sans-serif;">
<div style="max-width:640px;margin:0 auto;">
<p style="font-size:14px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 16px;">Our Team</p>
<h1 style="font-size:48px;font-weight:800;color:#ffffff;line-height:1.15;margin:0 0 20px;letter-spacing:-1.5px;">Meet Our Team</h1>
<p style="font-size:18px;color:#94a3b8;line-height:1.7;margin:0;">The people behind NovaTech who are passionate about building tools that help teams thrive.</p>
</div>
</section>
<!-- Team Grid -->
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
<div style="max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;">
<!-- Member 1 -->
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop&crop=face" alt="Alex Chen" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Alex Chen</h3>
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">CEO & Co-Founder</p>
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Former VP of Engineering at DataCo. 15 years building analytics platforms at scale.</p>
</div>
<!-- Member 2 -->
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop&crop=face" alt="Sarah Mitchell" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Sarah Mitchell</h3>
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">CTO & Co-Founder</p>
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">PhD in Machine Learning from Stanford. Led AI research at two Fortune 500 companies.</p>
</div>
<!-- Member 3 -->
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face" alt="James Park" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">James Park</h3>
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">Head of Design</p>
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Design lead with 10 years of experience crafting intuitive B2B products users love.</p>
</div>
<!-- Member 4 -->
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=face" alt="Maria Rodriguez" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Maria Rodriguez</h3>
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">VP of Engineering</p>
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Full-stack engineer turned leader. Scaled infrastructure at three hypergrowth startups.</p>
</div>
<!-- Member 5 -->
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face" alt="David Kim" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">David Kim</h3>
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">Head of Sales</p>
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Built sales teams from zero to $20M ARR. Passionate about helping customers succeed.</p>
</div>
<!-- Member 6 -->
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face" alt="Emily Watson" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Emily Watson</h3>
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">Head of Customer Success</p>
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Customer advocate with a track record of 98% retention rates and NPS scores above 70.</p>
</div>
</div>
</section>
<!-- Culture Section -->
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
<div style="max-width:800px;margin:0 auto;text-align:center;">
<h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 20px;letter-spacing:-0.5px;">Our Culture & Values</h2>
<p style="font-size:17px;color:#64748b;line-height:1.8;margin:0 0 40px;">We believe great products come from great teams. At NovaTech, we foster an environment of transparency, continuous learning, and bold experimentation. Every voice matters, and we celebrate both wins and thoughtful failures.</p>
<div style="display:flex;gap:32px;flex-wrap:wrap;justify-content:center;">
<div style="flex:1;min-width:200px;max-width:220px;text-align:center;">
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;color:#6366f1;font-weight:700;">&#9825;</div>
<h4 style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 4px;">Transparency</h4>
<p style="font-size:13px;color:#64748b;margin:0;">Open books, open doors, open minds.</p>
</div>
<div style="flex:1;min-width:200px;max-width:220px;text-align:center;">
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;color:#6366f1;font-weight:700;">&#9883;</div>
<h4 style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 4px;">Innovation</h4>
<p style="font-size:13px;color:#64748b;margin:0;">Ship fast, learn faster.</p>
</div>
<div style="flex:1;min-width:200px;max-width:220px;text-align:center;">
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;color:#6366f1;font-weight:700;">&#9734;</div>
<h4 style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 4px;">Excellence</h4>
<p style="font-size:13px;color:#64748b;margin:0;">Raise the bar, every day.</p>
</div>
</div>
</div>
</section>
<!-- Careers CTA -->
<section style="padding:96px 48px;font-family:'Inter',sans-serif;background:linear-gradient(135deg,#6366f1,#4338ca);text-align:center;">
<div style="max-width:600px;margin:0 auto;">
<h2 style="font-size:38px;font-weight:800;color:#ffffff;margin:0 0 16px;letter-spacing:-1px;">Join Our Team</h2>
<p style="font-size:17px;color:#c7d2fe;line-height:1.7;margin:0 0 36px;">We're always looking for talented people who share our passion for great products. Check out our open roles or drop us a line.</p>
<a href="mailto:careers@novatech.io" style="display:inline-block;background-color:#ffffff;color:#4338ca;padding:14px 36px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:700;">View Open Positions</a>
</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>