Finding Leads and Generating Website Demos

Given a target niche/location (e.g., "dentists in Austin, TX"), produce four deliverables in sequence:

1. leads.xlsx — 25-100 qualified leads with contact info
2. One demo HTML/CSS file per lead (demo-{business-slug}.html)
3. Cloudflare Pages deployment steps per demo
4. One WhatsApp message per lead, with the live URL inserted

Do not skip ahead — each stage depends on the output of the previous one. Track progress with the checklist in the Workflow section.

Progress:
- [ ] Step 1: Source 25-100 leads, verify each has email, phone, or Instagram
- [ ] Step 2: Build structured Excel spreadsheet
- [ ] Step 3: Generate personalized demo landing page per lead
- [ ] Step 4: Write Cloudflare Pages deployment instructions (generic + per-lead naming)
- [ ] Step 5: Draft WhatsApp message per lead with live URL placeholder/final link

Step 1: Source Leads

Qualify a lead as "needs a website" if one of these is true:

• No website found in search/maps listing
• Website is broken, unstyled, or clearly abandoned (no SSL, outdated copyright year, Flash/table-based layout)
• Only has a Facebook/Instagram page as their "web presence"

Each lead must have at least one of: email, phone number, Instagram handle. Prioritize leads with phone + Instagram (needed for WhatsApp + visual context).

Capture per lead:

• Business name
• Category/niche (e.g., "bakery", "plumber", "yoga studio")
• City/region
• Phone (with country code if possible)
• Email (if available)
• Instagram handle (if available)
• Current web presence status (none / broken / social-only)
• Notes (e.g., tone of business, standout detail to personalize outreach)

If sourcing from a provided list/CSV, dedupe by phone+name. If sourcing via search, cap at the requested range (default to 50 if unspecified) and stop once qualified.

Step 2: Build the Spreadsheet

Use openpyxl (or pandas.to_excel) to produce leads.xlsx with one row per lead and these columns, in order:

| # | Business Name | Category | City | Phone | Email | Instagram | Web Status | Demo File | Live URL | Notes |

• Freeze header row, autofit column widths, bold headers.
• Leave Live URL blank until Step 4 deployment is confirmed — fill in afterward.
• Demo File column stores the filename generated in Step 3 for traceability.

Step 3: Generate Personalized Demo Pages

For each lead, output a single self-contained HTML file (inline <style>, no external deps) named demo-{business-slug}.html. Personalize:

• Business name in <title>, hero heading, and footer
• Industry-appropriate hero image placeholder (use a relevant Unsplash source URL or CSS gradient matching the niche color palette — e.g., warm tones for bakeries, blues/greens for medical/dental)
• Sections: Hero (name + tagline + CTA button), About/Services (3 generic but niche-relevant service cards), Contact (phone, email/Instagram, embedded Google Maps iframe using city name), Footer
• A visible "This is a free demo built for [Business Name] — contact us to make it live!" banner, since these are outreach demos, not final deliverables
• Mobile-responsive via CSS flexbox/grid + media queries, no JS frameworks required

Template skeleton to adapt per lead:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{Business Name} | {Category} in {City}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  :root { --primary: {hex-color-for-niche}; --dark: #1a1a1a; }
  * { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
  .banner { background:var(--primary); color:#fff; text-align:center; padding:10px; font-size:14px; }
  .hero { background: linear-gradient(135deg, var(--primary), #000); color:#fff; padding:100px 20px; text-align:center; }
  .hero h1 { font-size: 3rem; } .hero p { font-size:1.2rem; margin:15px 0 30px; }
  .cta { background:#fff; color:var(--primary); padding:15px 30px; border-radius:30px; text-decoration:none; font-weight:bold; }
  .services { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; padding:60px 10%; }
  .card { border:1px solid #eee; border-radius:12px; padding:30px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
  .contact { background:#f7f7f7; padding:60px 10%; text-align:center; }
  footer { background:var(--dark); color:#aaa; text-align:center; padding:20px; font-size:13px; }
  @media(max-width:600px){ .hero h1{font-size:2rem;} }
</style>
</head>
<body>
  <div class="banner">🚀 Free demo built for {Business Name} — contact us to make it live!</div>
  <section class="hero">
    <h1>{Business Name}</h1>
    <p>{Niche-tailored tagline}</p>
    <a class="cta" href="#contact">Get In Touch</a>
  </section>
  <section class="services">
    <div class="card"><h3>{Service 1}</h3><p>{short desc}</p></div>
    <div class="card"><h3>{Service 2}</h3><p>{short desc}</p></div>
    <div class="card"><h3>{Service 3}</h3><p>{short desc}</p></div>
  </section>
  <section class="contact" id="contact">
    <h2>Visit Us in {City}</h2>
    <p>📞 {Phone} &nbsp; | &nbsp; 📧 {Email or Instagram handle}</p>
  </section>
  <footer>&copy; 2024 {Business Name}. Demo site — not yet live.</footer>
</body>
</html>

Save each file into a /demos folder, named to match the spreadsheet's Demo File column.

Step 4: Deploy to Cloudflare Pages (free staging URL)

Provide these instructions once (reusable for all leads), plus the per-lead project naming convention:

1. Go to https://dash.cloudflare.com → Workers & Pages → Create → Pages → Upload assets.
2. Project name: use the lead's slug, e.g. demo-joes-bakery (lowercase, hyphenated, must be globally unique on your account).
3. Drag-and-drop the single demo-{business-slug}.html file. Rename it to index.html before upload (Cloudflare Pages serves index.html at root).
4. Click Deploy site. Cloudflare issues a live URL instantly: https://demo-{business-slug}.pages.dev.
5. Copy that URL into the Live URL column of leads.xlsx for that lead.
6. Repeat per lead — each demo is its own Pages project (free tier supports unlimited projects).
7. (Batch option) For many leads, use wrangler:

   Bash
   npm install -g wrangler
   wrangler login
   wrangler pages deploy ./demos/{business-slug} --project-name=demo-{business-slug}

   Put each lead's renamed index.html in its own subfolder under /demos/{business-slug}/ first.

Step 5: Draft WhatsApp Outreach Message

One message per lead, personalized, casual-professional tone, under ~60 words, with the live URL from Step 4 inserted. Format for direct paste into WhatsApp Web (no markdown, use emojis sparingly).

Template:

Hi {Business Name} team! 👋 I noticed {specific observation — e.g., "you don't have a website yet" / "your current site isn't mobile-friendly"}. I put together a free demo page for you: {Live URL}

No obligation — just wanted to show what's possible. Want me to make it live on your domain? Happy to chat!

Output as a table/list mapping lead → final WhatsApp message, matching the spreadsheet row order, so it can be copy-pasted or bulk-sent via a WhatsApp Web automation tool.