← back to Ffepurchasing
public/trade-account.html
142 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Open Trade Account — FFE Purchasing</title>
<meta name="description" content="Open a trade account with FFE Purchasing. NET30 terms, MOQ-aware ordering, and tear-sheet downloads for verified hospitality buyers.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="canonical" href="https://ffepurchasing.com/trade-account">
<meta name="robots" content="noindex,follow">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WJ8QQQ1YEW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WJ8QQQ1YEW');
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root { --bg:#F5F1E8; --paper:#101010; --muted:#5A554C; --line:rgba(16,16,16,0.14); --accent:#E55A2B; --bg-soft:#ECE5D2; }
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { font-family:'Inter',sans-serif; color:var(--paper); background:var(--bg); -webkit-font-smoothing:antialiased; min-height:100vh }
a { color:var(--paper); text-decoration:none; border-bottom:1px solid var(--accent) }
a:hover { color:var(--accent) }
header { display:flex; justify-content:space-between; align-items:center; padding:22px 32px; border-bottom:1px solid var(--line) }
.brand { font-family:'Inter Tight',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.02em; display:inline-flex; align-items:center; gap:10px }
.brand .dot { width:14px; height:14px; border-radius:50%; background:var(--accent); display:inline-block }
.brand a { border:0; color:var(--paper) }
nav { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700 }
nav a { border:0; color:var(--paper); margin-left:24px }
nav a:hover { color:var(--accent) }
.wrap { max-width:980px; margin:0 auto; padding:64px 32px }
.grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start }
@media (max-width:760px) { .grid { grid-template-columns:1fr; gap:32px } }
.eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:14px }
h1 { font-family:'Inter Tight',sans-serif; font-weight:600; font-size:clamp(34px,5vw,52px); line-height:1.05; letter-spacing:-0.02em; margin-bottom:18px }
.lede { font-size:16px; line-height:1.55; color:var(--muted); margin-bottom:28px; max-width:50ch }
.perk-list { list-style:none; padding:0; margin:0 0 28px }
.perk-list li { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.45 }
.perk-list li:last-child { border-bottom:1px solid var(--line) }
.perk-list .k { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:0.04em; color:var(--accent); flex:0 0 84px; text-transform:uppercase; padding-top:2px }
.perk-list .v { color:var(--paper) }
form { background:var(--bg-soft); border:1px solid var(--line); padding:28px 28px 24px; border-radius:0 }
form h2 { font-family:'Inter Tight',sans-serif; font-weight:600; font-size:18px; margin-bottom:6px }
form .sub { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; font-weight:600 }
.field { margin-bottom:14px }
.field label { display:block; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-weight:700 }
.field input, .field select { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:10px 4px; font-size:14px; font-family:inherit; color:var(--paper); outline:none; transition:border-color .15s }
.field input:focus, .field select:focus { border-bottom-color:var(--accent) }
.submit { width:100%; padding:14px 20px; background:var(--accent); color:var(--paper); border:1px solid var(--accent); font-family:'Inter Tight',sans-serif; font-size:11px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; cursor:pointer; margin-top:10px; transition:opacity .15s }
.submit:hover { opacity:0.9 }
.submit:disabled { opacity:0.5; cursor:default }
.status { margin-top:14px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; text-align:center; min-height:14px; font-weight:600 }
.status.ok { color:#3a6b3a }
.status.err { color:#a13a2b }
.legal { font-size:11px; line-height:1.5; color:var(--muted); margin-top:16px }
footer { border-top:1px solid var(--line); padding:32px; text-align:center; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
</style>
</head>
<body>
<header>
<div class="brand"><span class="dot"></span><a href="/">FFE Purchasing</a></div>
<nav><a href="/">Catalog</a><a href="/#shop">Patterns</a></nav>
</header>
<div class="wrap">
<div class="grid">
<div>
<div class="eyebrow">Trade Account</div>
<h1>Open a trade account.</h1>
<p class="lede">For hospitality buyers, designers, and procurement teams. Trade pricing, NET30 terms, MOQ-aware ordering, and downloadable tear sheets — once your account is verified.</p>
<ul class="perk-list">
<li><span class="k">NET30</span><span class="v">Net-30 invoicing on approved accounts. No cards required at order.</span></li>
<li><span class="k">MOQ</span><span class="v">Order to your job spec — minimums shown per SKU before commit.</span></li>
<li><span class="k">Spec</span><span class="v">Class-A fire-rated wallcoverings with tear sheets, fire certs, and CSI-format spec downloads.</span></li>
<li><span class="k">Memo</span><span class="v">Memo samples ship free to verified accounts within 3–5 business days.</span></li>
</ul>
<p class="legal">Submitting this form starts an account review. We respond within one business day. No payments are processed at sign-up.</p>
</div>
<form id="taForm" autocomplete="on">
<h2>Account Inquiry</h2>
<p class="sub">2-field minimum · Reply within 1 business day</p>
<div class="field"><label for="email">Work email</label><input type="email" id="email" name="email" required autocomplete="email"></div>
<div class="field"><label for="company">Company / Firm</label><input type="text" id="company" name="company" required autocomplete="organization"></div>
<div class="field"><label for="name">Name <span style="opacity:.5;font-size:9px">optional</span></label><input type="text" id="name" name="name" autocomplete="name"></div>
<div class="field"><label for="role">Role <span style="opacity:.5;font-size:9px">optional</span></label>
<select id="role" name="role">
<option value="">— Select —</option>
<option>Hospitality Buyer</option>
<option>Interior Designer</option>
<option>FF&E Purchasing</option>
<option>Architect / Specifier</option>
<option>General Contractor</option>
<option>Other</option>
</select>
</div>
<button type="submit" class="submit">Open trade account →</button>
<div class="status" id="taStatus"></div>
</form>
</div>
</div>
<footer>
<span>ffepurchasing.com · Hospitality FF&E Trade Portal</span>
</footer>
<script>
document.getElementById('taForm').addEventListener('submit', async function(e){
e.preventDefault();
var f = e.target;
var btn = f.querySelector('.submit');
var st = document.getElementById('taStatus');
var orig = btn.textContent;
btn.disabled = true; btn.textContent = 'Sending…'; st.textContent=''; st.className='status';
var data = {
email: f.email.value.trim(),
company: f.company.value.trim(),
name: f.name.value.trim(),
role: f.role.value
};
try {
var r = await fetch('/api/trade-inquiry', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
if (!r.ok) throw new Error('HTTP '+r.status);
var j = await r.json();
if (!j.ok) throw new Error('server rejected');
st.textContent = 'Thanks — we will reply within 1 business day.';
st.className = 'status ok';
btn.textContent = 'Sent ✓';
f.reset();
if (window.gtag) gtag('event','trade_inquiry_submit',{event_category:'lead'});
} catch (err) {
st.textContent = 'Send failed — please email info@ffepurchasing.com';
st.className = 'status err';
btn.disabled = false; btn.textContent = orig;
}
});
</script>
</body>
</html>