Edit proposal

Public link: https://os.vinewoodagency.com/p/izFGJl6lWnns

Open / preview → ↓ Download PDF (opens, then Print)

Client name Title (internal) Status Proposal HTML — fully editable

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vinewood Agency — Proposal</title>
<meta name="description" content="Vinewood Agency client proposal — branded, presentation-grade, print/PDF ready.">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  :root{
    --forest:#0E2A24; --forest-2:#0A1A16; --forest-3:#12352D;
    --gold:#C6A05B; --gold-2:#E2C98C; --cream:#F2EDE1; --muted:#A9B6AC;
    --line:rgba(226,201,140,.22); --maxw:860px;
  }
  :root:not([data-theme="light"]){color-scheme:dark}
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--forest-2);color:var(--cream);
    font-family:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
  .doc{max-width:var(--maxw);margin:0 auto;background:var(--forest-2)}
  .serif,h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif}
  h1{font-weight:600;font-size:clamp(38px,7vw,62px);line-height:1.02;letter-spacing:.005em;margin:.1em 0}
  h2{font-weight:600;font-size:clamp(26px,4.5vw,36px);margin:0}
  h3{font-weight:600;font-size:20px;margin:0 0 4px}
  p{margin:.5em 0}
  .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:400}
  .muted{color:var(--muted)}
  a{color:var(--gold-2)}
  /* hero */
  .hero{background:linear-gradient(160deg,#16463B 0%,var(--forest) 55%,var(--forest-2) 100%);
    padding:40px 48px 46px;border-bottom:2px solid var(--gold)}
  .brandrow{display:flex;align-items:center;gap:12px;margin-bottom:34px}
  .brandrow .wm{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:22px;color:var(--cream);line-height:1}
  .brandrow .tag{font-family:'Jost';font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-size:9px;margin-top:2px}
  .hero .sub{font-size:17px;color:#D8D2C4;max-width:62ch;margin-top:14px}
  .meta{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;margin-top:30px;overflow:hidden}
  .meta div{padding:14px 16px;border-right:1px solid var(--line)}
  .meta div:last-child{border-right:none}
  .meta .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
  .meta .val{font-family:'Cormorant Garamond',serif;font-size:19px;margin-top:3px}
  /* sections */
  section{padding:40px 48px}
  .sec-h{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
  .sec-n{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:17px;font-weight:600;letter-spacing:.1em}
  .rows .row{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:13px 0;border-top:1px solid var(--line)}
  .rows .row:first-child{border-top:none}
  .rows .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:680px){.g2,.g3,.g4,.meta{grid-template-columns:1fr}.rows .row{grid-template-columns:1fr;gap:4px}
    .hero,section{padding-left:22px;padding-right:22px}.meta div{border-right:none;border-bottom:1px solid var(--line)}}
  .card{background:var(--forest);border:1px solid var(--line);border-radius:14px;padding:20px}
  .stat{font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--gold);line-height:1}
  .stat + .s-lbl{color:var(--muted);font-size:13px;margin-top:8px;display:block}
  .bar{height:6px;background:var(--forest-3);border-radius:4px;overflow:hidden;margin:6px 0 14px}
  .bar > i{display:block;height:100%;background:var(--gold)}
  .barlbl{display:flex;justify-content:space-between;font-size:14px}
  table.cmp{width:100%;border-collapse:collapse;margin-top:6px}
  table.cmp th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:10px 12px;border-bottom:1px solid var(--line)}
  table.cmp td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
  table.cmp td:first-child{color:var(--muted);width:150px}
  .steps{counter-reset:s}
  .step .n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .step h3{margin-top:4px}
  .sample{background:var(--forest);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .sample .cap{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 14px 0}
  .sample .bd{padding:12px 14px 16px}
  .sample .bd h3{font-size:19px}
  .price{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .plan{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--forest)}
  .plan.feature{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
  .plan .amt{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--cream);margin:6px 0}
  .plan .amt small{font-size:15px;color:var(--muted)}
  .chip{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-2);background:var(--gold);border-radius:999px;padding:3px 9px;font-weight:500}
  ul.clean{list-style:none;padding:0;margin:8px 0 0}
  ul.clean li{padding:6px 0 6px 20px;position:relative;font-size:14px;border-top:1px solid var(--line)}
  ul.clean li:before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg)}
  .accept{background:var(--forest);border:1px solid var(--gold);border-radius:16px;padding:26px}
  .field{background:var(--forest-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin:10px 0;color:var(--muted)}
  .btn{display:inline-block;background:var(--gold);color:var(--forest-2);font-weight:500;letter-spacing:.04em;
    padding:12px 22px;border-radius:10px;text-decoration:none;margin-top:6px}
  .foot{padding:30px 48px 46px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px}
  /* ---- PRINT (Save as PDF) ---- */
  @media print{
    @page{margin:14mm}
    html,body{background:#fff;color:#14211d;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .doc{max-width:none}
    .hero{background:#0E2A24 !important;color:var(--cream)}
    section,.foot{padding:20px 0}
    .card,.plan,.sample{break-inside:avoid;background:#fbf9f3;border-color:#d9cfb5;color:#14211d}
    h2,.sec-n,.eyebrow,.lbl,.k,.stat,.step .n,.chip{color:#8a6d2f !important}
    .card .muted,.muted{color:#5b6b62 !important}
    .sec-h{border-color:#d9cfb5}
    table.cmp td,table.cmp th,.rows .row,ul.clean li{border-color:#d9cfb5}
    .accept{border-color:#8a6d2f;background:#fbf9f3;color:#14211d}
    .btn{display:none}
    section{break-inside:avoid-page}
  }
</style>
</head>
<body>
<div class="doc">

<div class="hero">
    <div class="brandrow">
      <svg width="38" height="47" viewBox="0 0 80 100" aria-label="Vinewood Agency">
        <path d="M40 92 L40 25" fill="none" stroke="#C6A05B" stroke-width="3.1" stroke-linecap="round"/>
        <path d="M33.5 92 H46.5" stroke="#C6A05B" stroke-width="2" stroke-linecap="round"/>
        <path d="M40 90 C27 83 27 71 40 66 C53 61 53 49 40 44 C29 40 30 30 41 25 C45 21 45 17 50 14" fill="none" stroke="#E2C98C" stroke-width="2.2" stroke-linecap="round"/>
        <path d="M30 72 C22 72 16 66 15.5 58 C23.5 58.5 29.5 64 30 72 Z" fill="#A9C987"/>
        <path d="M50 52 C58 52 64 46 64.5 38 C56.5 38.5 50.5 44 50 52 Z" fill="#A9C987"/>
        <path d="M50 14 C51 5.5 58 1.5 64 2 C62 10 55.5 15 50 14 Z" fill="#A9C987"/>
      </svg>
      <div><div class="wm">Vinewood</div><div class="tag">Agency</div></div>
    </div>
    <div class="eyebrow">Proposal</div>
    <h1>A growth plan built<br>for Clear Shine Maintenance</h1>
    <p class="sub">Prepared for Clear Shine Maintenance. Built from our conversation and what we learned about your market, your customers, and where the next customers will come from.</p>
    <div class="meta">
      <div><div class="k">Prepared by</div><div class="val">Vinewood Agency</div></div>
      <div><div class="k">Date</div><div class="val">November 7, 2026</div></div>
      <div><div class="k">Valid until</div><div class="val">December 7, 2026</div></div>
      <div><div class="k">Start</div><div class="val">Within 1 week of signing</div></div>
    </div>
  </div>

<section>
    <div class="sec-h"><span class="sec-n">01</span><h2>The short version</h2></div>
    <div class="rows">
      <div class="row"><div class="lbl">Your goal</div><div>Write the one outcome this client cares about most.</div></div>
      <div class="row"><div class="lbl">The problem</div><div>Name the gap between where they are and that goal — in their words.</div></div>
      <div class="row"><div class="lbl">The idea</div><div>The angle only you would bring to this business.</div></div>
      <div class="row"><div class="lbl">Our recommendation</div><div><b>Name the plan</b> and the shape of the investment in one line.</div></div>
    </div>
    <div class="g2" style="margin-top:22px">
      <div class="card"><h3>What we focus on</h3><p class="muted" style="font-size:14px">The one or two levers that move this specific business.</p></div>
      <div class="card"><h3>Tools &amp; budget</h3><p class="muted" style="font-size:14px">The stack and the rough monthly budget you discussed.</p></div>
    </div>
  </section>

<section>
    <div class="sec-h"><span class="sec-n">02</span><h2>Where you are today</h2></div>
    <p class="muted">A short, honest picture of the current situation — what a customer sees when they go looking.</p>
    <table class="cmp">
      <thead><tr><th>Where customers look</th><th>Today</th><th>In 90 days</th></tr></thead>
      <tbody>
        <tr><td>Visibility</td><td>Describe it now</td><td>Where it will be</td></tr>
        <tr><td>Reputation</td><td>Describe it now</td><td>Where it will be</td></tr>
        <tr><td>Leads</td><td>Describe it now</td><td>Where it will be</td></tr>
      </tbody>
    </table>
  </section>

<section>
    <div class="sec-h"><span class="sec-n">03</span><h2>The plan</h2></div>
    <div class="g4 steps">
      <div class="step"><div class="n">Step 1</div><h3>Be found</h3><p class="muted" style="font-size:14px">The first move to get them seen.</p></div>
      <div class="step"><div class="n">Step 2</div><h3>Be believed</h3><p class="muted" style="font-size:14px">What builds trust once they're found.</p></div>
      <div class="step"><div class="n">Step 3</div><h3>Be chosen</h3><p class="muted" style="font-size:14px">How you turn interest into a booked customer.</p></div>
      <div class="step"><div class="n">Step 4</div><h3>Be referred</h3><p class="muted" style="font-size:14px">How one happy customer becomes the next three.</p></div>
    </div>
  </section>

<section>
    <div class="sec-h"><span class="sec-n">04</span><h2>Investment</h2></div>
    <div class="price">
      <div class="plan"><h3>Foundation</h3>
        <div class="amt">$1,500 <small>setup</small></div>
        <div class="amt" style="font-size:24px">$500 <small>/ month</small></div>
        <p class="muted" style="font-size:14px">What the foundation covers for this client.</p>
      </div>
      <div class="plan feature"><span class="chip">Recommended</span><h3 style="margin-top:8px">Grow into it</h3>
        <div class="amt">$1,500 <small>setup</small></div>
        <div class="amt" style="font-size:24px">$500 <small>/ month</small></div>
        <ul class="clean">
          <li>Everything in Foundation</li>
          <li>Add the growth lever that fits this business</li>
          <li>Ad spend paid by you directly — never marked up</li>
        </ul>
      </div>
    </div>
  </section>

<section>
    <div class="sec-h"><span class="sec-n">05</span><h2>Terms</h2></div>
    <ul class="clean">
      <li>The setup fee is due at signing and starts the work.</li>
      <li>The monthly fee is billed on the 1st. First term is 3 months, then month to month with 30 days' notice.</li>
      <li>Ad spend is paid by you directly to the platforms. We never mark it up.</li>
      <li>You own every account, profile, page and piece of content we create.</li>
    </ul>
  </section>

<div class="foot">
    <div style="display:flex;align-items:center;gap:10px">
      <svg width="24" height="30" viewBox="0 0 80 100">
        <path d="M40 92 L40 25" fill="none" stroke="#C6A05B" stroke-width="3.4" stroke-linecap="round"/>
        <path d="M40 90 C27 83 27 71 40 66 C53 61 53 49 40 44 C29 40 30 30 41 25 C45 21 45 17 50 14" fill="none" stroke="#E2C98C" stroke-width="2.6" stroke-linecap="round"/>
        <path d="M30 72 C22 72 16 66 15.5 58 C23.5 58.5 29.5 64 30 72 Z" fill="#A9C987"/>
        <path d="M50 52 C58 52 64 46 64.5 38 C56.5 38.5 50.5 44 50 52 Z" fill="#A9C987"/>
        <path d="M50 14 C51 5.5 58 1.5 64 2 C62 10 55.5 15 50 14 Z" fill="#A9C987"/>
      </svg>
      <span style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--cream)">Vinewood Agency</span>
    </div>
    <div>vinewoodagency.com · info@vinewoodagency.com</div>
  </div>

</div>
</body>
</html>