<!doctype html>

<head>

<title>WoWiddi — Home</title>

<style>

:root{

/* Brand */

--blue-900:#1F3A5F; /* primary navy */

--blue-800:#243E63;

--blue-50:#F3F7FF; /* very light blue tint */

--orange-500:#F28C28; /* primary orange */

--orange-600:#E97D17;

/* Neutrals */

--bg:#F8FAFC;

--card:#FFFFFF;

--text:#0F172A;

--muted:#475569;

--line:#E5E7EB;

/* Layout */

--radius:18px;

--shadow: 0 14px 40px rgba(15, 23, 42, 0.10);

--shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.08);

--max: 1200px;

}

*{ box-sizing:border-box; }

body{

margin:0;

font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

color:var(--text);

background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 55%, #FFFFFF 100%);

}

a{ color:inherit; text-decoration:none; }

.container{

width:min(var(--max), calc(100% - 48px));

margin:0 auto;

}

/* Header */

.header{

position:sticky;

top:0;

z-index:50;

background: linear-gradient(180deg, rgba(31,58,95,.96), rgba(31,58,95,.92));

backdrop-filter: blur(8px);

border-bottom: 1px solid rgba(255,255,255,.12);

}

.nav{

height:72px;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}

.brand{

display:flex;

align-items:center;

gap:12px;

color:#fff;

font-weight:800;

letter-spacing:.2px;

font-size:22px;

white-space:nowrap;

}

.logo{

width:34px; height:34px;

display:grid; place-items:center;

border-radius:50%;

background: rgba(255,255,255,.12);

border: 1px solid rgba(255,255,255,.18);

}

.navlinks{

display:flex;

align-items:center;

gap:18px;

color: rgba(255,255,255,.92);

font-size:15px;

}

.navlinks a{

padding:10px 8px;

border-radius:10px;

}

.navlinks a:hover{

background: rgba(255,255,255,.10);

}

.navcta{

display:flex;

align-items:center;

gap:12px;

white-space:nowrap;

}

.link-light{

color: rgba(255,255,255,.92);

font-weight:600;

font-size:14px;

padding:10px 10px;

border-radius:10px;

}

.link-light:hover{

background: rgba(255,255,255,.10);

}

.btn{

border:0;

cursor:pointer;

border-radius:14px;

height:44px;

padding:0 16px;

font-weight:800;

font-size:14px;

letter-spacing:.2px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

transition: transform .08s ease, background .15s ease, box-shadow .15s ease;

user-select:none;

}

.btn:active{ transform: translateY(1px); }

.btn-primary{

background: var(--orange-500);

color:#fff;

box-shadow: 0 10px 22px rgba(242,140,40,.25);

}

.btn-primary:hover{ background: var(--orange-600); }

.btn-secondary{

background: transparent;

color: var(--blue-900);

border: 2px solid rgba(31,58,95,.24);

height:46px;

}

.btn-secondary:hover{

border-color: rgba(31,58,95,.40);

background: rgba(31,58,95,.04);

}

/* Hero */

.hero{

padding: 70px 0 40px;

}

.heroGrid{

display:grid;

grid-template-columns: 1.1fr .9fr;

gap:40px;

align-items:center;

}

.badge{

display:inline-flex;

align-items:center;

gap:10px;

background: rgba(242,140,40,.14);

color: #9A4E06;

border: 1px solid rgba(242,140,40,.25);

border-radius:999px;

padding: 10px 14px;

font-weight:800;

font-size:13px;

letter-spacing:.2px;

margin-bottom:18px;

}

h1{

margin:0 0 14px;

font-size:56px;

line-height:1.05;

letter-spacing:-1.2px;

color: var(--blue-900);

}

.sub{

margin:0 0 18px;

font-size:18px;

line-height:1.55;

color: var(--muted);

max-width: 52ch;

}

.bullets{

margin: 18px 0 22px;

padding:0;

list-style:none;

display:flex;

flex-direction:column;

gap:12px;

}

.bullets li{

display:flex;

gap:12px;

align-items:flex-start;

color: #0b1b31;

font-weight:650;

}

.check{

width:22px;

height:22px;

border-radius:7px;

background: rgba(242,140,40,.18);

border: 1px solid rgba(242,140,40,.35);

display:grid;

place-items:center;

flex: 0 0 22px;

margin-top:2px;

}

.check svg{ width:14px; height:14px; fill: var(--orange-600); }

.ctaRow{

display:flex;

gap:14px;

align-items:center;

flex-wrap:wrap;

margin-top: 10px;

}

/* Campaign Card */

.campaignCard{

background: var(--card);

border-radius: var(--radius);

box-shadow: var(--shadow);

border: 1px solid rgba(31,58,95,.12);

overflow:hidden;

position:relative;

}

.campaignTop{

padding:18px 18px 12px;

background: linear-gradient(180deg, rgba(31,58,95,.96), rgba(31,58,95,.86));

color:#fff;

}

.campaignTitle{

font-weight:900;

font-size:22px;

margin:0 0 8px;

}

.campaignMeta{

margin:0;

color: rgba(255,255,255,.92);

font-weight:650;

font-size:14px;

}

.campaignBody{

padding: 16px 18px 18px;

display:grid;

gap:12px;

}

.campaignImage{

border-radius: 16px;

border: 1px solid rgba(31,58,95,.12);

background:

radial-gradient(circle at 20% 25%, rgba(242,140,40,.25), transparent 55%),

radial-gradient(circle at 70% 55%, rgba(31,58,95,.12), transparent 60%),

linear-gradient(180deg, #FFFFFF, #F7FBFF);

height: 170px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

}

.giftCardMock{

width: 210px;

height: 120px;

border-radius: 16px;

background: linear-gradient(135deg, rgba(31,58,95,.96), rgba(31,58,95,.75));

box-shadow: var(--shadow-soft);

border: 1px solid rgba(255,255,255,.25);

transform: rotate(-7deg);

position:relative;

}

.giftRibbon{

position:absolute;

left:0; right:0; top:0; bottom:0;

background:

linear-gradient(90deg, transparent 0 44%, rgba(242,140,40,.95) 44% 56%, transparent 56% 100%),

linear-gradient(0deg, transparent 0 44%, rgba(242,140,40,.95) 44% 56%, transparent 56% 100%);

opacity:.95;

}

.giftText{

position:absolute;

left:14px;

top:14px;

right:14px;

color:#fff;

font-weight:900;

font-size:18px;

line-height:1.2;

text-shadow: 0 8px 20px rgba(0,0,0,.18);

}

.campaignRow{

display:flex;

align-items:center;

gap:10px;

padding:12px 14px;

border-radius: 14px;

background: rgba(31,58,95,.04);

border: 1px solid rgba(31,58,95,.10);

color: var(--blue-900);

font-weight:750;

font-size:14px;

}

.campaignRow .dot{

width:10px; height:10px; border-radius:50%;

background: var(--orange-500);

box-shadow: 0 0 0 4px rgba(242,140,40,.18);

flex: 0 0 10px;

}

.campaignFooter{

padding: 0 18px 18px;

}

.pill{

display:inline-flex;

align-items:center;

justify-content:center;

padding: 10px 14px;

border-radius: 999px;

font-weight:900;

color:#fff;

background: var(--orange-500);

border: 1px solid rgba(0,0,0,.04);

box-shadow: 0 10px 22px rgba(242,140,40,.22);

font-size:13px;

letter-spacing:.2px;

}

/* Feature tiles */

.tiles{

padding: 28px 0 70px;

}

.tileGrid{

display:grid;

grid-template-columns: repeat(3, 1fr);

gap:18px;

}

.tile{

background: var(--card);

border: 1px solid rgba(31,58,95,.10);

border-radius: var(--radius);

padding: 20px;

box-shadow: 0 10px 22px rgba(15,23,42,.06);

display:flex;

gap:14px;

align-items:flex-start;

}

.tileIcon{

width:46px; height:46px;

border-radius: 16px;

background: rgba(31,58,95,.08);

border: 1px solid rgba(31,58,95,.12);

display:grid; place-items:center;

flex: 0 0 46px;

}

.tileIcon svg{ width:22px; height:22px; fill: var(--blue-900); }

.tileTitle{

margin:0 0 6px;

font-size:16px;

font-weight:900;

color: var(--blue-900);

}

.tileBody{

margin:0;

color: var(--muted);

font-size:14.5px;

line-height:1.45;

}

/* Responsive */

@media (max-width: 980px){

.navlinks{ display:none; }

h1{ font-size:42px; }

.heroGrid{ grid-template-columns: 1fr; }

.campaignCard{ max-width: 560px; }

.tileGrid{ grid-template-columns: 1fr; }

.tiles{ padding-bottom: 56px; }

}

@media (max-width: 520px){

.container{ width: calc(100% - 32px); }

h1{ font-size: 36px; }

.sub{ font-size: 16.5px; }

.btn{ width:100%; }

.ctaRow{ width:100%; }

.navcta .link-light{ display:none; }

}

</style>

</head>

<body>

</svg>

</span>

WoWiddi

</a>

<a href="#how">How it Works</a>

<a href="#neighbourhoods">Neighbourhoods</a>

<a href="#pricing">Pricing</a>

<a href="#featured">Featured</a>

<a href="#map">Shop Small Map</a>

</nav>

<a class="link-light" href="#apply">Apply to Join</a>

</div>

</header>

<main>

<div>

<div class="badge">Neighbourhood Sweepstakes • City-wide Reach</div>

<h1>Turn local attention into real customers — without discounts.</h1>

WoWiddi runs multi-month neighbourhood sweepstakes that drive foot traffic and help businesses build

<strong style="color:var(--blue-900)">opt-in customer relationships</strong> that last.

</p>

<li>

</span>

One campaign per neighbourhood

</li>

<li>

</span>

Gift card prizes (not discounting)

</li>

<li>

</span>

Measurable visits + opt-in contacts

</li>

</ul>

<a class="btn btn-secondary" href="#pricing">View Pricing</a>

</div>

<p class="campaignTitle">Shop Local: Bells Corners</p>

<p class="campaignMeta">June – Oct • Grand Prize: October</p>

</div>

<div class="giftText">Win Local<br/>Gift Cards!</div>

</div>

Scan in-store for bonus entries

</div>

<span class="pill">Limited Featured Spots</span>

</div>

</aside>

</div>

</section>

</div>

<div>

<p class="tileTitle">Fixed-cost campaign</p>

<p class="tileBody">One neighbourhood campaign, designed to run for months—not a one-week promo.</p>

</div>

</div>

<div>

<p class="tileTitle">Customers you can reach again</p>

<p class="tileBody">Collect opt-in contacts so your marketing builds an owned audience over time.</p>

</div>

</div>

<div>

<p class="tileTitle">Foot traffic you can prove</p>

<p class="tileBody">In-store QR scans create measurable engagement signals—without forcing purchase.</p>

</div>

</section>

</main>

</body>

</html>