codeflash-ai/codeflash-internal
1
0
Fork 0
Code Issues Pull requests 39 Projects Releases Packages Wiki Activity Actions 2.0k

update

Browse source
This commit is contained in:
misrasaurabh1 2026-04-22 20:12:50 -07:00
parent 0c042999b8
commit fd28f8960b
2 changed files with 362 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
experiments/website-april/wireframe/index.html
View file

@ -32,8 +32,8 @@
<!-- Hero -->
<section class="hero">
<div class="container">
<h1>Cut your infra bill by <span class="accent">90%</span>. Not a pitch — a delivered outcome.</h1>
<p class="hero-sub">World-class performance engineers, amplified by <strong>codeflash-agent</strong>, find the best architecture and the fastest implementation across your codebase. Only PRs that pass our quality bar reach your team. <strong>ROI guaranteed.</strong></p>
<h1>Cut your infra bill by <span class="accent">40–90%</span>. Then keep it there.</h1>
<p class="hero-sub">Our <strong>codeflash-agent</strong> finds optimizations across your codebase — memory, latency, throughput, cost. Our senior performance engineers review and ship every one. <strong>ROI guaranteed.</strong></p>
<div class="hero-ctas">
<a class="btn btn-primary btn-lg" href="contact.html">Book a call</a>
<a class="btn btn-lg" href="case-studies/unstructured.html">See the Unstructured case study →</a>

360
experiments/website-april/wireframe/optimize.html Normal file
View file

@ -0,0 +1,360 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Start an optimization · Codeflash</title>
<link rel="stylesheet" href="styles.css" />
<style>
/* ---- /optimize page-specific layout ---- */
.opt-hero { padding: 96px 0 56px; border-bottom: 1px solid var(--border); }
.opt-hero .kicker { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.opt-hero h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 20px; max-width: 920px; }
.opt-hero .hero-sub { font-size: 19px; color: var(--fg-dim); max-width: 740px; margin: 0 0 32px; line-height: 1.5; }
.opt-hero .price-anchor { font-family: var(--mono); font-size: 13px; color: var(--fg-mute); letter-spacing: 0.06em; text-transform: uppercase; }
.opt-hero .price-anchor strong { color: var(--fg); font-weight: 600; }
.process-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 48px 0 0; }
.process-step { background: var(--bg); padding: 24px 22px; position: relative; }
.process-step .n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.14em; }
.process-step h4 { font-size: 17px; margin: 10px 0 6px; letter-spacing: -0.01em; }
.process-step p { font-size: 13px; color: var(--fg-dim); margin: 0; }
.opt-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; padding-top: 40px; }
.opt-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.opt-form .form-section-label { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }
.opt-form .form-section + .form-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.help-text { font-size: 12px; color: var(--fg-mute); font-family: var(--mono); margin-top: 6px; line-height: 1.5; }
.inline-warn { font-size: 12px; color: var(--accent); font-family: var(--mono); margin-top: 6px; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 13px; color: var(--fg-dim); line-height: 1.5; }
.checkbox-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.opt-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 20px; }
.trust-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.trust-card h4 { font-size: 14px; margin: 0 0 14px; font-family: var(--mono); color: var(--fg-mute); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.trust-card ul { list-style: none; padding: 0; margin: 0; }
.trust-card li { padding: 8px 0; font-size: 13px; color: var(--fg-dim); border-bottom: 1px solid var(--border); }
.trust-card li:last-child { border-bottom: none; }
.trust-card li::before { content: "◆ "; color: var(--accent); font-size: 10px; }
.sample-card { background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 22px; }
.sample-card h4 { margin: 0 0 8px; font-size: 15px; color: var(--accent); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.sample-card p { font-size: 13px; color: var(--fg-dim); margin: 0 0 14px; }
.post-submit-preview { margin-top: 28px; padding: 18px 22px; background: var(--bg-elev); border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 13px; color: var(--fg-dim); font-family: var(--mono); line-height: 1.6; }
.post-submit-preview::before { content: "// after submit, the user sees: "; color: var(--accent); display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 960px) {
.opt-grid { grid-template-columns: 1fr; gap: 32px; }
.process-band { grid-template-columns: repeat(2, 1fr); }
.opt-side { position: static; }
}
</style>
</head>
<body>
<div class="wire-bar">Wireframe · /optimize — xbow-modeled self-serve intent capture</div>
<header class="nav">
<div class="container nav-inner">
<a class="nav-logo" href="index.html">codeflash</a>
<nav class="nav-links">
<a href="how-it-works.html">How it works</a>
<a href="case-studies.html">Case studies</a>
<a href="continuous-optimization.html">Continuous Optimization</a>
<a href="ml-performance.html">ML Performance</a>
<a href="security.html">Security</a>
<a href="pricing.html">Pricing</a>
<a href="team.html">Team</a>
</nav>
<div class="nav-cta">
<a class="btn btn-ghost" href="pricing.html">Start free</a>
<a class="btn btn-primary" href="contact.html">Book a call</a>
</div>
</div>
</header>
<!-- Hero -->
<section class="opt-hero">
<div class="container">
<div class="kicker">Codeflash Lightspeed · Optimization Assessment</div>
<h1>Autonomous, expert-reviewed performance optimization, on demand.</h1>
<p class="hero-sub">A traditional performance audit takes months. Codeflash Lightspeed runs in days. Our <strong>codeflash-agent</strong> generates candidates against your benchmark, our senior performance engineers review every one, and you receive merge-ready PRs on your repo.</p>
<div class="price-anchor">Starts at <strong>$5,000</strong> · credited against a full engagement if you convert within 60 days · <a href="pricing.html">pricing →</a></div>
<div class="process-band">
<div class="process-step">
<div class="n">01 · Connect</div>
<h4>GitHub App + benchmark</h4>
<p>Install our app on one repo, point at a benchmark file. Read-only, scoped, expires in 14 days.</p>
</div>
<div class="process-step">
<div class="n">02 · Run</div>
<h4>Agent runs 48–72h</h4>
<p>codeflash-agent profiles, generates candidates, benchmarks each one on our hardware in a sandbox.</p>
</div>
<div class="process-step">
<div class="n">03 · Review</div>
<h4>Engineer audit</h4>
<p>A Codeflash performance engineer reviews every candidate. Rejects the fragile ones. Keeps the shippable ones.</p>
</div>
<div class="process-step">
<div class="n">04 · Merge</div>
<h4>Reviewable PRs</h4>
<p>Up to 5 draft PRs land on your repo, each with before/after benchmarks and reviewer rationale. Report delivered within 5 business days.</p>
</div>
</div>
</div>
</section>
<!-- Form + side -->
<section style="padding-top: 0; padding-bottom: 72px;">
<div class="container">
<div class="opt-grid">
<!-- FORM -->
<div class="opt-form">
<!-- About you -->
<div class="form-section">
<div class="form-section-label">About you</div>
<div class="field-row">
<div class="field"><label>First name *</label><input type="text" /></div>
<div class="field"><label>Last name *</label><input type="text" /></div>
</div>
<div class="field"><label>Job title *</label><input type="text" /></div>
<div class="field"><label>Company *</label><input type="text" /></div>
<div class="field"><label>Company website *</label><input type="text" placeholder="https://" /></div>
<div class="field">
<label>Company email *</label>
<input type="email" placeholder="you@company.com" />
<div class="help-text">Corporate email required. We reject gmail.com, outlook.com, proton.me, etc.</div>
</div>
</div>
<!-- Billing -->
<div class="form-section">
<div class="form-section-label">Billing</div>
<div class="field"><label>Billing address *</label><input type="text" /></div>
<div class="field"><label>Billing email *</label><input type="email" /></div>
<div class="field">
<label>Use case *</label>
<div style="display: flex; gap: 16px; font-size: 13px; color: var(--fg-dim); margin-top: 4px;">
<label style="display: flex; gap: 8px; font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-dim);"><input type="radio" name="use_case" /> Internal use at my company</label>
<label style="display: flex; gap: 8px; font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-dim);"><input type="radio" name="use_case" /> Partner / consultancy engagement</label>
</div>
</div>
</div>
<!-- Target -->
<div class="form-section">
<div class="form-section-label">What to optimize</div>
<div class="field">
<label>GitHub repo URL *</label>
<input type="text" placeholder="https://github.com/your-org/your-repo" />
<div class="help-text">If private, install the Codeflash GitHub App on this repo before submitting. We'll send the install link immediately after submit if needed.</div>
<div class="inline-warn">The repo cannot be modified after submission. Ensure it's correct.</div>
</div>
<div class="field">
<label>Benchmark entrypoint *</label>
<input type="text" placeholder="path/to/bench_main.py or tests/perf/bench_*.ts" />
<div class="help-text">File or glob in the repo. If you don't have a benchmark, <a href="#" style="color: var(--accent); border: none;">upload one</a> — we need a reproducible measurement before we start.</div>
</div>
<div class="field-row">
<div class="field">
<label>Objective *</label>
<select>
<option>Select...</option>
<option>Cost (infra / cloud spend)</option>
<option>Latency (p50 / p99)</option>
<option>Memory (RSS / heap)</option>
<option>Throughput (req/sec / tokens/sec)</option>
<option>Cold start</option>
</select>
</div>
<div class="field">
<label>Approximate scope *</label>
<select>
<option>Select...</option>
<option>One function</option>
<option>One module</option>
<option>One service</option>
<option>Whole repo</option>
</select>
</div>
</div>
<div class="field">
<label>Anything we should know?</label>
<textarea placeholder="Stack, rough infra spend, what hurts most. One paragraph."></textarea>
</div>
</div>
<!-- Plan -->
<div class="form-section">
<div class="form-section-label">Plan</div>
<div class="field">
<label>Assessment plan *</label>
<select>
<option>Lightspeed — $5,000 · 1 repo · up to 5 PRs</option>
<option>Lightspeed+ — custom · multiple repos · higher PR count</option>
<option>Full Engagement — contact sales</option>
</select>
<div class="help-text">Full <a href="pricing.html" style="color: var(--accent); border: none;">pricing breakdown →</a></div>
</div>
<div class="field">
<label>Referral code</label>
<input type="text" placeholder="Optional" />
</div>
</div>
<!-- Legal checkboxes -->
<div class="form-section">
<div class="checkbox-row">
<input type="checkbox" id="auth" />
<label for="auth" style="font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-dim); margin: 0;">I authorize Codeflash to read and run this code in an isolated sandbox, I'm authorized to bind my organization to this agreement, and I confirm rightful ownership of this repository. I agree to the <a href="#" style="color: var(--accent); border: none;">Terms</a> and <a href="#" style="color: var(--accent); border: none;">Trust Center</a>.</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="comms" />
<label for="comms" style="font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-dim); margin: 0;">I understand Codeflash will contact me about this assessment. I can unsubscribe at any time. <a href="#" style="color: var(--accent); border: none;">Privacy Policy</a>.</label>
</div>
</div>
<div class="recaptcha-mock" style="margin-top: 20px;">I'm not a robot <span style="margin-left: auto; font-size: 10px;">reCAPTCHA</span></div>
<button class="btn btn-primary btn-lg" style="width: 100%; margin-top: 8px;">Start optimizing</button>
<div class="post-submit-preview">
We'll contact you within 24 hours with the GitHub App installation link and kick off the run. You'll receive your optimization report and draft PRs within 5 business days.
</div>
<div class="wire-note">Form structure modeled on xbow/pentest. Key shape: self-serve intent capture, billing upfront, one immutable target field (repo URL replaces their URL), plan dropdown as qualifier, legal checkboxes identical in purpose. The 24-hour human follow-up is deliberate — same as xbow, this is human-gated activation disguised as self-serve.</div>
</div>
<!-- SIDE: trust, sample, CTA -->
<div class="opt-side">
<div class="sample-card">
<h4>Sample optimization report</h4>
<p>See what you get back before you commit. Redacted report from a 7-week engagement — 24 PRs, 4 stacked bottlenecks, 90% infra cost cut.</p>
<a class="btn" href="#">Download sample (PDF) →</a>
</div>
<div class="trust-card">
<h4>What we commit to</h4>
<ul>
<li>SOC 2 Type 2</li>
<li>Your code is never used to train models. Ever.</li>
<li>Sandboxed, zero-egress execution</li>
<li>Read-only GitHub App, expires in 14 days</li>
<li>Every PR reviewed by a performance engineer</li>
<li>Report within 5 business days</li>
<li>Named a Gartner® Cool Vendor™ 2025</li>
</ul>
</div>
<div class="trust-card">
<h4>What we need from you</h4>
<ul>
<li>One repo</li>
<li>One benchmark file (or upload one)</li>
<li>Corporate email</li>
<li>Billing address</li>
<li>An objective worth measuring</li>
</ul>
</div>
<div class="trust-card">
<h4>Typical result</h4>
<p style="font-size: 13px; color: var(--fg-dim); margin: 0 0 10px; line-height: 1.55;">Lightspeed assessments deliver 3–8 reviewed PRs. Typical speedup range: <strong style="color: var(--fg);">2×–20×</strong> on the targeted workload. Ships in 5 business days.</p>
<p style="font-size: 12px; color: var(--fg-mute); font-family: var(--mono); margin: 0;">No reviewed PRs? Assessment fee refunded in full.</p>
</div>
</div>
</div>
<div class="wire-note" style="margin-top: 40px;">
<strong>Open design questions for this page:</strong>
<br/>· Price anchor: <span style="color: var(--danger)">[CONFIRM $5,000]</span>. xbow uses $4K for a pentest. For us, one reviewed PR is worth more than a pentest report — but higher than $10K probably breaks the "self-serve" framing.
<br/>· Credit-back mechanic: we're saying "credited against a full engagement within 60 days". <span style="color: var(--danger)">[CONFIRM]</span> this vs. "flat paid diagnostic with a 5× identification floor" (the §7.2 draft). Can't run both promises on the site without confusion.
<br/>· No-PR refund: added "no reviewed PRs = refund". <span style="color: var(--danger)">[CONFIRM]</span> — changes the economic model. Alternative: guarantee at least 1 PR or money back.
<br/>· Private-repo access: current copy says install GitHub App before submit. Worth A/B testing against "fill form first, we send install link" (lower friction, but higher drop-off between intent and activation).
<br/>· Benchmark-upload path: drafted as a link in help text. Real question: do we allow "no benchmark, we'll write one for you" as a paid add-on, or reject those runs outright?
<br/>· Do we replace the homepage primary CTA "Book a call" with "Start optimizing"? Or keep both and measure?
</div>
</div>
</section>
<!-- FAQ -->
<section>
<div class="container" style="max-width: 780px;">
<div class="section-label">FAQ</div>
<h2 style="font-size: 30px;">The short list.</h2>
<div style="margin-top: 32px;">
<details open style="padding: 20px 0; border-bottom: 1px solid var(--border);">
<summary style="cursor: pointer; font-weight: 600; font-size: 17px;">What if you can't find any optimizations?</summary>
<p style="color: var(--fg-dim); margin-top: 12px;">If no reviewed PRs land on your repo, the assessment fee is refunded in full. That's happened on zero Lightspeed runs to date. <span style="color: var(--danger)">[CONFIRM phrasing + the "zero to date" claim]</span></p>
</details>
<details style="padding: 20px 0; border-bottom: 1px solid var(--border);">
<summary style="cursor: pointer; font-weight: 600; font-size: 17px;">Do you need access to our production data?</summary>
<p style="color: var(--fg-dim); margin-top: 12px;">No. The agent runs against your benchmark in our sandbox. Benchmarks use synthetic or scrubbed inputs. We never touch your production systems.</p>
</details>
<details style="padding: 20px 0; border-bottom: 1px solid var(--border);">
<summary style="cursor: pointer; font-weight: 600; font-size: 17px;">What if we don't have a benchmark?</summary>
<p style="color: var(--fg-dim); margin-top: 12px;">Benchmarks are non-negotiable — without one we can't measure a win. If you don't have one, our engineers can write one for you as a paid add-on. Alternatively, upload a py-spy / pprof / perf profile and we'll deliver a diagnostic report instead of PRs.</p>
</details>
<details style="padding: 20px 0; border-bottom: 1px solid var(--border);">
<summary style="cursor: pointer; font-weight: 600; font-size: 17px;">Will you use our code to train models?</summary>
<p style="color: var(--fg-dim); margin-top: 12px;">Never. Not ours, not third-party.</p>
</details>
<details style="padding: 20px 0; border-bottom: 1px solid var(--border);">
<summary style="cursor: pointer; font-weight: 600; font-size: 17px;">Can we run it on-prem?</summary>
<p style="color: var(--fg-dim); margin-top: 12px;">The Lightspeed assessment runs in our sandbox. If you need on-prem, that's a Full Engagement — <a href="contact.html" style="color: var(--accent);">talk to us</a>.</p>
</details>
<details style="padding: 20px 0; border-bottom: 1px solid var(--border);">
<summary style="cursor: pointer; font-weight: 600; font-size: 17px;">What languages?</summary>
<p style="color: var(--fg-dim); margin-top: 12px;">Python, Java, JavaScript, TypeScript, Go, and more.</p>
</details>
</div>
</div>
</section>
<div class="cta-band">
<div class="container">
<h2>Not sure Lightspeed is right?</h2>
<p>Book a 20-minute diagnostic call with a performance engineer. We'll help you scope the right path.</p>
<a class="btn btn-primary btn-lg" href="contact.html">Book a call</a>
</div>
</div>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="nav-logo">codeflash</div>
<p>We cut infra bills. Our codeflash-agent finds the waste; our engineers review and ship every change.</p>
<div class="addr">149 New Montgomery St Fl 4<br/>San Francisco, CA</div>
</div>
<div class="footer-col"><h5>Product</h5><ul>
<li><a href="how-it-works.html">How it works</a></li>
<li><a href="continuous-optimization.html">Continuous Optimization</a></li>
<li><a href="ml-performance.html">ML Performance</a></li>
<li><a href="pricing.html">Pricing</a></li>
</ul></div>
<div class="footer-col"><h5>Proof</h5><ul>
<li><a href="case-studies.html">Case studies</a></li>
<li><a href="security.html">Security</a></li>
</ul></div>
<div class="footer-col"><h5>Company</h5><ul>
<li><a href="team.html">Team</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="partners.html">Partners</a></li>
</ul></div>
<div class="footer-col"><h5>Legal</h5><ul>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
</ul></div>
</div>
<div class="footer-legal"><p>© 2026 Codeflash Inc.</p></div>
</div>
</footer>
</body>
</html>