`public/intake.html`

130 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Website + Social — Intake · Consulting Intake</title>
<style>
:root{--bg:#0c1016;--panel:#121722;--ink:#eef1f6;--gold:#c8a15a;--line:rgba(200,161,90,.25);--dim:rgba(238,241,246,.66)}
*{box-sizing:border-box}
body{margin:0;font-family:'Jost',system-ui,sans-serif;background:var(--bg);color:var(--ink);padding:0;line-height:1.6}
header{padding:64px 24px 30px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#121722,#0c1016)}
header .eyebrow{letter-spacing:.34em;text-transform:uppercase;font-size:11px;color:var(--gold)}
header h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(30px,5vw,46px);margin:.35em 0 .15em}
header p{color:var(--dim);margin:0;font-size:16px}
form{max-width:780px;margin:0 auto;padding:30px 24px 90px}
fieldset{border:1px solid var(--line);background:var(--panel);margin:20px 0;padding:24px 26px;border-radius:8px}
legend{font-family:'Cormorant Garamond',serif;font-size:20px;padding:0 12px;color:var(--gold)}
label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:16px 0 6px;font-weight:500}
input,textarea,select{width:100%;padding:12px 13px;border:1px solid var(--line);background:#0a0d12;color:var(--ink);font-size:15px;font-family:inherit;border-radius:4px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)}
textarea{min-height:80px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.hint{font-size:12px;color:var(--dim);text-transform:none;letter-spacing:0;font-weight:400;margin-top:6px}
.check{display:flex;align-items:center;gap:10px;margin-top:12px}
.check input{width:auto}
button{background:var(--gold);color:#0c1016;border:0;padding:16px 38px;letter-spacing:.2em;text-transform:uppercase;font-size:13px;font-weight:500;cursor:pointer;margin-top:12px;border-radius:3px}
button:hover{filter:brightness(1.1)}
#done{display:none;background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.5);padding:18px;margin:18px 0;color:#9fd6b0;border-radius:6px}
@media(max-width:640px){.two{grid-template-columns:1fr}}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <div class="eyebrow">Consulting Intake · Questionnaire</div>
    <h1>Let's build your website &amp; social</h1>
    <p>Answer what you can — this spawns your new site concepts and a full social growth plan. No current website required.</p>
  </header>

  <form id="f">
    <div id="done"></div>

    <fieldset><legend>The Business</legend>
      <div class="two">
        <div><label>Business name*</label><input name="business_name" required></div>
        <div><label>Industry / what you do</label><input name="industry" placeholder="e.g. car wash, yacht charters, law firm"></div>
      </div>
      <div class="two">
        <div><label>City / service area</label><input name="location"></div>
        <div><label>In business since</label><input name="since" placeholder="year"></div>
      </div>
      <label>One-line pitch (tagline)</label><input name="tagline" placeholder="What makes you the obvious choice?">
    </fieldset>

    <fieldset><legend>Contact</legend>
      <div class="two">
        <div><label>Your name</label><input name="contact_name"></div>
        <div><label>Role</label><input name="contact_role"></div>
      </div>
      <div class="two">
        <div><label>Email</label><input name="contact_email" type="email"></div>
        <div><label>Phone</label><input name="contact_phone"></div>
      </div>
    </fieldset>

    <fieldset><legend>Current Presence</legend>
      <div class="check"><input type="checkbox" id="nosite" name="no_website" value="1"><label for="nosite" style="margin:0;text-transform:none;letter-spacing:0;font-weight:400">We don't have a website yet — build one from scratch</label></div>
      <label>Current website (if any)</label><input name="current_website" placeholder="https://">
      <div class="hint">Social handles — leave blank what you don't have; we'll set up the rest.</div>
      <div class="two">
        <div><label>Instagram</label><input name="ig"></div>
        <div><label>Facebook</label><input name="fb"></div>
        <div><label>TikTok</label><input name="tt"></div>
        <div><label>YouTube</label><input name="yt"></div>
        <div><label>LinkedIn</label><input name="li"></div>
        <div><label>Google Business Profile</label><input name="gbp"></div>
      </div>
    </fieldset>

    <fieldset><legend>Goals &amp; Growth</legend>
      <label>Top goals (one per line)</label><textarea name="goals" placeholder="More bookings&#10;Rank on Google&#10;Grow Instagram"></textarea>
      <label>Who is your ideal customer?</label><textarea name="audience"></textarea>
      <label>Direct competitors (one per line)</label><textarea name="competitors"></textarea>
    </fieldset>

    <fieldset><legend>Brand &amp; Aesthetic</legend>
      <label>Aesthetic direction</label>
      <select name="aesthetic">
        <option value="">— pick a starting feel —</option>
        <option>Luxury / editorial</option>
        <option>Modern / minimal</option>
        <option>Bold / energetic</option>
        <option>Warm / approachable</option>
        <option>Classic / trustworthy</option>
      </select>
      <div class="hint">We'll generate several concept versions of your site in different high-end looks to choose from.</div>
      <label>Brand colors / anything you love or hate</label><textarea name="brand_notes"></textarea>
      <label>Assets you have (logo, photos, video?)</label><textarea name="assets"></textarea>
    </fieldset>

    <button type="submit">Submit intake →</button>
  </form>

<script>
document.getElementById('f').addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(e.target);
  const o = Object.fromEntries(fd.entries());
  const payload = {
    business_name: o.business_name, industry: o.industry, location: o.location, since: o.since,
    tagline: o.tagline, contact_name: o.contact_name, contact_role: o.contact_role,
    contact_email: o.contact_email, contact_phone: o.contact_phone,
    current_website: o.no_website ? null : (o.current_website || null),
    no_website: !!o.no_website,
    socials: { instagram: o.ig||null, facebook: o.fb||null, tiktok: o.tt||null, youtube: o.yt||null, linkedin: o.li||null, google_business: o.gbp||null },
    goals: (o.goals||'').split('\n').map(s=>s.trim()).filter(Boolean),
    audience: o.audience, competitors: (o.competitors||'').split('\n').map(s=>s.trim()).filter(Boolean),
    aesthetic: o.aesthetic, brand_notes: o.brand_notes, assets: o.assets,
  };
  const r = await fetch('/api/intake', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload) });
  const j = await r.json();
  const d = document.getElementById('done');
  d.textContent = j.message || 'Received — thank you.';
  d.style.display = 'block';
  d.scrollIntoView({ behavior:'smooth' });
  e.target.reset();
});
</script>
</body>
</html>