feat(landing): port the full marketing site into the CRM (static)
Copies the goutam-pages landing (React marketing home + /page/1..19 + assets) into /public and adds beforeFiles rewrites so '/' serves the marketing home and '/1'..'/19' + '/thanks' serve the static pages — reproducing the landing's vercel.json clean URLs. /portal/* (login/register) is untouched.
This commit is contained in:
tanweer919
@@ -0,0 +1,543 @@
|
||||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<title>LynkedUp Pro - Know Exactly Where Every Job Stands, Right Now</title>
|
||||
<meta name="description" content="Projects module: full stage pipeline, estimate statuses, live budget breakdown (team cost, commission, material). Zero guesswork on every job."/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;margin-top:44px}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.shot{display:block;width:100%;height:100%;border-radius:18px;border:1px solid var(--border);object-fit:cover;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
/* ── background image helpers ── */
|
||||
.has-bg{position:relative;overflow:hidden}
|
||||
.has-bg>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||||
.has-bg>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||||
.has-bg>.container,.has-bg>.hero-bg,.has-bg>.eyebrow,.has-bg>h1,.has-bg>.hero-sub,.has-bg>.hero-actions,.has-bg>.micro-row,.has-bg>.stat-row{position:relative;z-index:2}
|
||||
/* ── bigger, more impactful headings ── */
|
||||
.s-title{font-size:clamp(36px,5.2vw,64px);line-height:.96}
|
||||
/* ── CTA strip ── */
|
||||
.cta-strip{padding:86px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-strip>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||||
.cta-strip>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||||
.cta-strip>.glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:720px;height:380px;border-radius:50%;z-index:1;pointer-events:none}
|
||||
.cta-strip>.wrap{position:relative;z-index:2;max-width:700px;margin:0 auto}
|
||||
.strip-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 16px;border-radius:100px;margin-bottom:22px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
|
||||
.strip-tdot{width:6px;height:6px;border-radius:50%;display:inline-block;animation:blink 2s ease infinite}
|
||||
.cta-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,5.2vw,62px);font-weight:900;line-height:.96;letter-spacing:-.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
|
||||
.cta-strip p{font-size:16px;color:var(--muted);line-height:1.75;max-width:520px;margin:0 auto 30px}
|
||||
.strip-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.strip-trust{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap}
|
||||
.strip-trust span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.strip-trust b{color:var(--green)}
|
||||
/* ── metric compare cards ── */
|
||||
.metric-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
|
||||
.mpill{background:var(--card);border-radius:12px;padding:16px 22px;text-align:center;min-width:130px}
|
||||
.mpill-val{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;line-height:1}
|
||||
.mpill-lab{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
|
||||
@media(max-width:1280px){section{padding:80px 24px}.cta-section{padding:80px 24px}.cta-strip{padding:76px 24px}}
|
||||
@media(max-width:1024px){nav{padding:14px 24px}section{padding:72px 22px}.cta-section{padding:72px 22px}.cta-strip{padding:68px 22px}.pain-grid{grid-template-columns:repeat(2,1fr)}.sol-split{gap:36px}h1{font-size:clamp(44px,7vw,76px)}.hero{padding:108px 20px 64px}.proof-card{padding:30px 26px}.proof-result{top:18px;right:18px}.stat-row{gap:28px;margin-top:48px}}
|
||||
@media(max-width:768px){nav{padding:12px 18px}section{padding:56px 18px}.cta-section{padding:56px 18px}.cta-strip{padding:56px 18px}.hero{min-height:auto;padding:96px 16px 56px}h1{font-size:clamp(40px,9vw,64px);line-height:.95}.hero-sub{font-size:15px}.s-title{font-size:clamp(30px,7vw,46px)}.stat-row{gap:18px;margin-top:40px}.stat+.stat::before{display:none}.stat-num{font-size:32px}.proof-card{padding:26px 22px;margin-top:32px}.proof-result{position:static;display:inline-block;margin-bottom:14px}.proof-quote{font-size:15px}.cta-section h2{font-size:clamp(30px,7vw,46px)}.cta-strip h2{font-size:clamp(28px,7vw,46px)}.sol-points li{font-size:14px}.p-item{padding:22px 18px}.metric-pills{gap:8px}.mpill{min-width:110px;padding:14px 16px}.mpill-val{font-size:24px}}
|
||||
@media(max-width:480px){nav{padding:10px 14px}.nav-cta{padding:8px 14px;font-size:13px}.logo-text{font-size:16px}section{padding:48px 16px}.cta-section{padding:48px 16px}.cta-strip{padding:48px 16px}.hero{padding:88px 14px 48px}h1{font-size:clamp(34px,10vw,52px);letter-spacing:-.5px}.hero-sub{font-size:14px;margin-top:18px}.s-title{font-size:clamp(28px,8vw,40px);letter-spacing:0}.s-sub{font-size:15px}.micro{font-size:12px}.micro-row{gap:10px}.stat-row{flex-direction:column;gap:18px;margin-top:32px}.stat-num{font-size:28px}.pain-grid{margin-top:30px}.p-item h3{font-size:15px}.p-item p{font-size:13px}.proof-card{padding:22px 18px;border-radius:14px}.proof-quote{font-size:14px;line-height:1.7}.proof-author{flex-wrap:wrap;gap:10px}.cta-section h2,.cta-strip h2{font-size:clamp(26px,8vw,38px)}.cta-section p,.cta-strip p{font-size:14px}.btn-primary,.btn-ghost{padding:12px 22px;font-size:15px}.sol-stats{grid-template-columns:1fr 1fr;gap:8px}.sol-stat{padding:12px}.sol-stat-num{font-size:22px}.mock-card{border-radius:14px}.metric-pills{flex-wrap:wrap}.mpill{min-width:90px;padding:12px 14px}.mpill-val{font-size:22px}.cta-micro{gap:8px;font-size:11px}.strip-tag{font-size:10px;padding:4px 12px;letter-spacing:.8px}footer{padding:28px 16px 22px}footer p{font-size:12px}.mob-sticky{padding:10px 12px}.mob-sticky a{font-size:13px;padding:11px}.cta-form{flex-direction:column}.cta-form input{width:100%;min-width:100%}.cta-form .btn-primary{width:100%;text-align:center}.hero-actions{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}.strip-btns{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.strip-btns .btn-primary,.strip-btns .btn-ghost{width:100%;text-align:center}}
|
||||
@media(max-width:360px){h1{font-size:32px}.s-title{font-size:26px}.cta-section h2,.cta-strip h2{font-size:24px}.btn-primary,.btn-ghost{padding:11px 18px;font-size:14px}.sol-stats{grid-template-columns:1fr}}
|
||||
@media(max-width:860px){.mob-sticky{display:flex}body{padding-bottom:72px}.sol-split{grid-template-columns:1fr!important}.pain-grid{grid-template-columns:1fr!important}.shot{height:auto}}
|
||||
@media(max-width:768px){.stat+.stat::before{display:none}.stat-row{gap:18px}}
|
||||
@media(max-width:560px){.sol-stats{grid-template-columns:1fr 1fr}.stat-row{flex-direction:column;gap:18px}.hero-actions{flex-direction:column;align-items:stretch;max-width:300px;margin:24px auto 0}.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}.strip-btns{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.strip-btns .btn-primary,.strip-btns .btn-ghost{width:100%;text-align:center}.cta-form{flex-direction:column}.cta-form input{width:100%;min-width:100%}.cta-form .btn-primary{width:100%;text-align:center}}
|
||||
@media(max-width:360px){.sol-stats{grid-template-columns:1fr}}
|
||||
@keyframes hpulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.45;transform:scale(1.3)}}
|
||||
.stage-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;font-size:12px;font-weight:600;font-family:'Outfit',sans-serif}
|
||||
</style></head><body>
|
||||
<nav><a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a><a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a></nav>
|
||||
|
||||
<section class="hero has-bg" id="home">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=80');filter:brightness(.11) saturate(.4)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(5,8,15,.5) 0%,rgba(5,8,15,.8) 55%,rgba(5,8,15,1) 100%)"></div>
|
||||
<div class="hero-bg"><div class="hero-grid"></div><div class="hero-glow" style="background:radial-gradient(ellipse,rgba(139,92,246,.1),transparent 65%)"></div></div>
|
||||
<div class="eyebrow"><span class="dot" style="background:#a855f7"></span> Projects · Stages · Estimates · Budget</div>
|
||||
<h1>Right Now, One Job<br>Is Over Budget.<br><span style="color:#a855f7">Do You Know Which?</span></h1>
|
||||
<p class="hero-sub"><strong>Which jobs are stalled at estimate? Which ones are bleeding margin?</strong> Without a live projects view, you find out too late, after the job closes and the money's already gone. LynkedUp Pro is your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">See Projects Module →</a>
|
||||
|
||||
</div>
|
||||
<div class="micro-row" style="margin-top:18px">
|
||||
<span class="micro" style="color:var(--orange)">4.9★ · 248 reviews</span>
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro"><span>✅</span> Full stage pipeline</span>
|
||||
<span class="micro"><span>✅</span> Live budget per job</span>
|
||||
<span class="micro"><span>✅</span> Estimate status tracking</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat"><div class="stat-num" style="color:#a855f7">6</div><div class="stat-label">Pipeline stages tracked</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--orange)">4</div><div class="stat-label">Estimate statuses (live)</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--green)">Live</div><div class="stat-label">Budget vs actual per job</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--accent)">1-click</div><div class="stat-label">PDF estimate download</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pain-section has-bg reveal" id="problem">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1800&q=80');filter:brightness(.1) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(11,18,32,.98) 0%,rgba(11,18,32,.92) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--red)">The Problem</div>
|
||||
<h2 class="s-title">The Margin Was Gone<br>Before the Job Was <span style="color:var(--red)">Even Finished.</span></h2>
|
||||
<p class="s-sub">Most roofing software shows you a pipeline. LynkedUp Pro shows you the full financial picture of every job in real time, so problems surface before they cost you.</p>
|
||||
<div class="pain-grid">
|
||||
<div class="p-item"><div class="p-icon">🗂️</div><h3>Estimates Stalling Invisibly</h3><p>A rep sent a draft 5 days ago. Has the homeowner seen it? Approved it? Rejected it? Without status tracking you find out when it's too late.</p><span class="p-cost">Cost: Jobs lost to follow-up gaps</span></div>
|
||||
<div class="p-item"><div class="p-icon">💸</div><h3>Jobs Going Over Budget Silently</h3><p>Team cost, commissions, and material spend accumulate with no warning. By the time you notice the margin is gone, the job is already complete.</p><span class="p-cost">Cost: Margin erosion per job</span></div>
|
||||
<div class="p-item"><div class="p-icon">📋</div><h3>Stage Confusion Across the Team</h3><p>Your sales rep thinks the job is at "appointment scheduled." Your manager thinks it's at "estimate sent." Your admin thinks it's still a lead. No one knows what's actually happening.</p><span class="p-cost">Cost: Coordination overhead daily</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══ CTA STRIP 1 ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(10,5,18,.97) 100%)"></div>
|
||||
<div class="glow" style="background:radial-gradient(ellipse,rgba(168,85,247,.08),transparent 70%)"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.25);color:#a855f7">
|
||||
<span class="strip-tdot" style="background:#a855f7"></span>
|
||||
Every day without live tracking is a day you're flying blind
|
||||
</div>
|
||||
<h2>Your Jobs Are Running.<br><span style="color:#a855f7">Are You Running Them</span><br>or Are They <span style="color:var(--red)">Running You?</span></h2>
|
||||
<p>Right now, somewhere in your active jobs, a material order just pushed a budget over the edge. An estimate has been sitting unread for 4 days. A stage hasn't moved in a week. You don't know - but you should.</p>
|
||||
<!-- 3 pain pills -->
|
||||
<div class="metric-pills">
|
||||
<div class="mpill" style="border:1px solid rgba(239,68,68,.2)">
|
||||
<div class="mpill-val" style="color:var(--red)">3-5</div>
|
||||
<div class="mpill-lab">Jobs over budget unnoticed / month</div>
|
||||
</div>
|
||||
<div class="mpill" style="border:1px solid rgba(245,158,11,.2)">
|
||||
<div class="mpill-val" style="color:var(--orange)">4 days</div>
|
||||
<div class="mpill-lab">Avg estimate sitting unread</div>
|
||||
</div>
|
||||
<div class="mpill" style="border:1px solid rgba(168,85,247,.2)">
|
||||
<div class="mpill-val" style="color:#a855f7">$0</div>
|
||||
<div class="mpill-lab">Margin warning without LynkedUp</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Show Me Every Job Live →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> Free 30-min demo</span>
|
||||
<span><b>✅</b> No credit card</span>
|
||||
<span><b>✅</b> Live in 24 hrs</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solution-section has-bg reveal" id="solution">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1800&q=80');filter:brightness(.1) saturate(.4)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(90deg,rgba(5,8,15,1) 44%,rgba(5,8,15,.72) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:#a855f7">The Fix</div>
|
||||
<h2 class="s-title">Catch Overruns <span style="color:#a855f7">Live.</span><br>Close Estimates <span style="color:var(--green)">Faster.</span><br>Know Every Stage.</h2>
|
||||
<div class="sol-split">
|
||||
<div>
|
||||
<p class="s-sub">LynkedUp Pro's Projects module tracks every job through a defined stage pipeline with live estimate status and a real-time budget breakdown, so you always know exactly where you stand.</p>
|
||||
<ul class="sol-points">
|
||||
<li><span class="ico">🔄</span><span><strong>6-stage pipeline</strong> - Contacted → Appointment Scheduled → Estimate Sent → Approved → Job Active → Invoiced. Every stage visible to every stakeholder.</span></li>
|
||||
<li><span class="ico">📄</span><span><strong>4 estimate statuses</strong> - Draft, Sent, Approved, Rejected. One-click PDF download. Customer signs digitally on the spot.</span></li>
|
||||
<li><span class="ico">💰</span><span><strong>Live budget per job</strong> - team cost, commission, actor cost, material cost all tracked in real time against project budget. Margin warning before it's gone.</span></li>
|
||||
<li><span class="ico">👤</span><span><strong>Role-based visibility</strong> - reps see their jobs, managers see their team, owners see everything. Right data to the right person.</span></li>
|
||||
</ul>
|
||||
<div class="sol-stats">
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:#a855f7">6</div><div class="sol-stat-label">Defined pipeline stages</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--orange)">4</div><div class="sol-stat-label">Live estimate statuses</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--green)">Live</div><div class="sol-stat-label">Budget vs spend tracking</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--accent)">PDF</div><div class="sol-stat-label">One-click estimate export</div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- PROJECTS MOCK -->
|
||||
<div class="mock-card">
|
||||
<img src="/page/assets/pipeline.png" alt="LynkedUp Pro Overview Dashboard" style="display:block;width:100%;height:auto" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══ CTA STRIP 2 ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(2,14,10,.97) 100%)"></div>
|
||||
<div class="glow" style="background:radial-gradient(ellipse,rgba(0,229,160,.07),transparent 70%)"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.22);color:var(--green)">
|
||||
<span class="strip-tdot" style="background:var(--green)"></span>
|
||||
Your margin doesn't vanish overnight - it leaks $50 at a time
|
||||
</div>
|
||||
<h2>See the Leak <span style="color:var(--green)">Before</span><br>It Becomes a <span style="color:var(--red)">Loss.</span></h2>
|
||||
<p>LynkedUp Pro flags budget overruns the moment your material spend hits 80% of budget, not after the job closes. Three caught overruns a month is thousands back in your pocket.</p>
|
||||
<!-- Before / After comparison -->
|
||||
<div style="display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;max-width:560px;margin:0 auto 30px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 26px">
|
||||
<div style="text-align:center">
|
||||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px">Without LynkedUp</div>
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--red);line-height:1">After close</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:5px">When you find out the job lost money</div>
|
||||
</div>
|
||||
<div style="font-size:20px;color:var(--border2);text-align:center;padding:0 4px">vs</div>
|
||||
<div style="text-align:center">
|
||||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px">With LynkedUp Pro</div>
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--green);line-height:1">Live alert</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:5px">At 80% budget - while you can still act</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Protect My Margins Now →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> Live budget alerts</span>
|
||||
<span><b>✅</b> All 6 pipeline stages</span>
|
||||
<span><b>✅</b> Free onboarding</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="roofing-offer-section" id="pricing">
|
||||
<div class="container">
|
||||
|
||||
<!-- TOP HEADING -->
|
||||
<div class="text-center roofing-heading mb-5">
|
||||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="row g-4 align-items-stretch">
|
||||
|
||||
<!-- LEFT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="lifetime-card h-100">
|
||||
<div class="popular-tag">MOST POPULAR</div>
|
||||
<h3>Founders Lifetime Access</h3>
|
||||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||||
<div class="price-box">
|
||||
<h2>$2000</h2>
|
||||
<span>PAY ONCE • USE FOREVER</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li>Complete Roofing CRM</li>
|
||||
<li>Lead Management System</li>
|
||||
<li>Canvassing & Field Tracking</li>
|
||||
<li>Insurance Workflow</li>
|
||||
<li>Proposal & Inspection Tools</li>
|
||||
<li>Team Management Dashboard</li>
|
||||
<li>Unlimited Projects</li>
|
||||
<li>Future Feature Updates</li>
|
||||
<li>Priority Support</li>
|
||||
</ul>
|
||||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="roofing-info-card h-100">
|
||||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||||
<div class="info-box">
|
||||
<h5>More Revenue Visibility</h5>
|
||||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Less Operational Chaos</h5>
|
||||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Built for Roofing Teams</h5>
|
||||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||||
<div class="terms-wrapper mt-4">
|
||||
<details class="custom-accordion-item">
|
||||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||||
<div class="accordion-body">
|
||||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="roofing-cta-box mt-5 text-center">
|
||||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||||
<p>Join the next generation of roofing companies scaling with automation,
|
||||
field intelligence, and operational visibility.</p>
|
||||
<div class="cta-btn-group">
|
||||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||||
.roofing-offer-section{
|
||||
padding:64px 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||||
#1a120d;
|
||||
overflow:hidden; position:relative;
|
||||
}
|
||||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||||
.roofing-offer-section .h-100{height:100%;}
|
||||
.roofing-offer-section .text-center{text-align:center;}
|
||||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||||
@media (max-width:991px){
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||||
}
|
||||
@media (max-width:767px){
|
||||
.roofing-offer-section{padding:48px 0;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||||
.roofing-offer-section .lifetime-card,
|
||||
.roofing-offer-section .roofing-info-card,
|
||||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||||
}
|
||||
</style>
|
||||
<section class="proof-section has-bg reveal" id="proof">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(11,18,32,1) 0%,rgba(11,18,32,.88) 55%,rgba(11,18,32,1) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:#a855f7;text-align:center">Real Impact</div>
|
||||
<h2 class="s-title" style="text-align:center">He Caught 3 Overruns<br>in One Month. <span style="color:#a855f7">That's Real</span><br><span style="color:var(--green)">Money Back.</span></h2>
|
||||
<div class="proof-card" style="border-color:rgba(139,92,246,.2)">
|
||||
<div class="proof-result" style="border-color:rgba(139,92,246,.2);background:rgba(139,92,246,.07)"><div class="pr-num" style="color:#a855f7">/bin/sh</div><div class="pr-label">Budget Surprises</div></div>
|
||||
<div class="proof-stars">★★★★★</div>
|
||||
<p class="proof-quote">"Before LynkedUp Pro I was finding out jobs went over budget after they were done. Now the system flags it live. The minute our material spend hits 80% of budget I get a notification. We caught three jobs in the last month before they went negative. That's real money."</p>
|
||||
<div class="proof-author">
|
||||
<div class="proof-av" style="background:linear-gradient(135deg,#a855f7,#0ea5e9)">JR</div>
|
||||
<div><div class="proof-name">Jason Rodriguez</div><div class="proof-role">Owner · Plano, TX</div></div>
|
||||
</div>
|
||||
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section has-bg" id="cta">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=80');filter:brightness(.08) saturate(.3)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(139,92,246,.04))"></div>
|
||||
<div class="container" style="position:relative;z-index:2">
|
||||
<div style="display:inline-block;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:8px;padding:8px 18px;margin-bottom:24px;font-size:13px;color:#a855f7;font-weight:600">📊 Every job. Every stage. Every dollar. Live.</div>
|
||||
<h2>Every Job on Your Board<br>Deserves a <em style="color:#a855f7">Live Number.</em><br>Not a Gut Feeling.</h2>
|
||||
<p>See the full Projects module - stages, estimate tracking, and live budget breakdown - in a free 30-minute demo.</p>
|
||||
<div class="cta-form"><a href="https://book.lynkeduppro.com/" class="btn-primary" onclick="event.preventDefault()">See Projects Module →</a></div>
|
||||
<div class="cta-micro"><span>✅ No credit card</span><span>✅ 30-day guarantee</span><span>✅ Free onboarding</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer style="padding:32px 24px;border-top:1px solid var(--border);text-align:center"><p style="font-size:13px;color:var(--muted)">© 2026 LynkedUp Pro · <a href="lynkeduppro_final.html" style="color:var(--muted)">Full Platform →</a></p><p style="font-size:11px;color:var(--muted);opacity:.7;margin-top:10px;max-width:640px;margin-left:auto;margin-right:auto">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p></footer>
|
||||
<div class="mob-sticky"><a href="https://book.lynkeduppro.com/" class="p">Book a demo</a><a href="lynkeduppro_final.html" class="s">See All Features</a></div>
|
||||
<script>const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add('visible')})},{threshold:.1});document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||||
<script src="/square-checkout.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,560 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;margin-top:44px}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.shot{display:block;width:100%;height:100%;border-radius:18px; object-fit:cover;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
/* ── background image helpers ── */
|
||||
.has-bg{position:relative;overflow:hidden}
|
||||
.has-bg>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||||
.has-bg>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||||
.has-bg>.container,.has-bg>.hero-bg,.has-bg>.eyebrow,.has-bg>h1,.has-bg>.hero-sub,.has-bg>.hero-actions,.has-bg>.micro-row,.has-bg>.stat-row{position:relative;z-index:2}
|
||||
/* ── bigger, punchier headings ── */
|
||||
.s-title{font-size:clamp(36px,5.2vw,64px);line-height:.96}
|
||||
/* ── CTA strip component ── */
|
||||
.cta-strip{padding:86px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-strip>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||||
.cta-strip>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||||
.cta-strip>.glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:720px;height:380px;border-radius:50%;z-index:1;pointer-events:none}
|
||||
.cta-strip>.wrap{position:relative;z-index:2;max-width:700px;margin:0 auto}
|
||||
.strip-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 16px;border-radius:100px;margin-bottom:22px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
|
||||
.strip-tdot{width:6px;height:6px;border-radius:50%;display:inline-block;animation:blink 2s ease infinite}
|
||||
.cta-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,5.2vw,62px);font-weight:900;line-height:.96;letter-spacing:-.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
|
||||
.cta-strip p{font-size:16px;color:var(--muted);line-height:1.75;max-width:520px;margin:0 auto 30px}
|
||||
.strip-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.strip-trust{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap}
|
||||
.strip-trust span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.strip-trust b{color:var(--green)}
|
||||
/* ── comparison / stat cards in strips ── */
|
||||
.s-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;max-width:560px;margin:0 auto 30px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 26px}
|
||||
.sc-side{text-align:center}
|
||||
.sc-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
|
||||
.sc-val{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;line-height:1}
|
||||
.sc-sub{font-size:11px;color:var(--muted);margin-top:5px}
|
||||
.sc-div{font-size:20px;color:var(--border2);text-align:center;padding:0 4px}
|
||||
.mpills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
|
||||
.mpill{background:var(--card);border-radius:12px;padding:16px 20px;text-align:center;min-width:128px}
|
||||
.mpill-v{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;line-height:1}
|
||||
.mpill-l{font-size:11px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.4px;line-height:1.4}
|
||||
@media(max-width:1280px){section{padding:80px 24px}.cta-section{padding:80px 24px}.cta-strip{padding:76px 24px}}
|
||||
@media(max-width:1024px){nav{padding:14px 24px}section{padding:72px 22px}.cta-section{padding:72px 22px}.cta-strip{padding:68px 22px}.pain-grid{grid-template-columns:repeat(2,1fr)}.sol-split{gap:36px}h1{font-size:clamp(44px,7vw,76px)}.hero{padding:108px 20px 64px}.proof-card{padding:30px 26px}.proof-result{top:18px;right:18px}.stat-row{gap:28px;margin-top:48px}}
|
||||
@media(max-width:768px){nav{padding:12px 18px}section{padding:56px 18px}.cta-section{padding:56px 18px}.cta-strip{padding:56px 18px}.hero{min-height:auto;padding:96px 16px 56px}h1{font-size:clamp(40px,9vw,64px);line-height:.95}.hero-sub{font-size:15px}.s-title{font-size:clamp(30px,7vw,46px)}.stat-row{gap:18px;margin-top:40px}.stat+.stat::before{display:none}.stat-num{font-size:32px}.proof-card{padding:26px 22px;margin-top:32px}.proof-result{position:static;display:inline-block;margin-bottom:14px}.proof-quote{font-size:15px}.cta-section h2{font-size:clamp(30px,7vw,46px)}.cta-strip h2{font-size:clamp(28px,7vw,46px)}.sol-points li{font-size:14px}.p-item{padding:22px 18px}.mpills{gap:8px}.mpill{min-width:108px;padding:14px 16px}.mpill-v{font-size:22px}.s-compare{padding:18px 18px}.sc-val{font-size:24px}}
|
||||
@media(max-width:480px){nav{padding:10px 14px}.nav-cta{padding:8px 14px;font-size:13px}.logo-text{font-size:16px}section{padding:48px 16px}.cta-section{padding:48px 16px}.cta-strip{padding:48px 16px}.hero{padding:88px 14px 48px}h1{font-size:clamp(34px,10vw,52px);letter-spacing:-.5px}.hero-sub{font-size:14px;margin-top:18px}.s-title{font-size:clamp(28px,8vw,40px);letter-spacing:0}.s-sub{font-size:15px}.micro{font-size:12px}.micro-row{gap:10px}.stat-row{flex-direction:column;gap:18px;margin-top:32px}.stat-num{font-size:28px}.pain-grid{margin-top:30px}.p-item h3{font-size:15px}.p-item p{font-size:13px}.proof-card{padding:22px 18px;border-radius:14px}.proof-quote{font-size:14px;line-height:1.7}.proof-author{flex-wrap:wrap;gap:10px}.cta-section h2,.cta-strip h2{font-size:clamp(26px,8vw,38px)}.cta-section p,.cta-strip p{font-size:14px}.btn-primary,.btn-ghost{padding:12px 22px;font-size:15px}.sol-stats{grid-template-columns:1fr 1fr;gap:8px}.sol-stat{padding:12px}.sol-stat-num{font-size:22px}.mock-card{border-radius:14px}.mpills{flex-wrap:wrap}.mpill{min-width:86px;padding:12px 14px}.mpill-v{font-size:20px}.cta-micro{gap:8px;font-size:11px}.strip-tag{font-size:10px;padding:4px 12px;letter-spacing:.8px}footer{padding:32px 16px 24px}footer p{font-size:12px}.mob-sticky{padding:10px 12px}.mob-sticky a{font-size:13px;padding:11px}.cta-form{flex-direction:column}.cta-form input{width:100%;min-width:100%}.cta-form .btn-primary{width:100%;text-align:center}.hero-actions{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}.strip-btns{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.strip-btns .btn-primary,.strip-btns .btn-ghost{width:100%;text-align:center}}
|
||||
@media(max-width:360px){h1{font-size:32px}.s-title{font-size:26px}.cta-section h2,.cta-strip h2{font-size:24px}.btn-primary,.btn-ghost{padding:11px 18px;font-size:14px}.sol-stats{grid-template-columns:1fr}}
|
||||
@media(max-width:860px){.mob-sticky{display:flex}body{padding-bottom:72px}.sol-split{grid-template-columns:1fr!important}.pain-grid{grid-template-columns:1fr!important}.s-compare{grid-template-columns:1fr;gap:8px}.sc-div{display:none}.shot{height:auto}}
|
||||
@media(max-width:768px){.stat+.stat::before{display:none}.stat-row{gap:18px}}
|
||||
@media(max-width:560px){.sol-stats{grid-template-columns:1fr 1fr}.stat-row{flex-direction:column;gap:18px}.hero-actions{flex-direction:column;align-items:stretch;max-width:300px;margin:24px auto 0}.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}.strip-btns{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.strip-btns .btn-primary,.strip-btns .btn-ghost{width:100%;text-align:center}.cta-form{flex-direction:column}.cta-form input{width:100%;min-width:100%}.cta-form .btn-primary{width:100%;text-align:center}}
|
||||
@media(max-width:360px){.sol-stats{grid-template-columns:1fr}}</style>
|
||||
<title>LynkedUp Pro - Stop Losing Jobs to Double-Bookings and No-Shows</title>
|
||||
<meta name="description" content="AI-powered smart scheduling syncs with Google, iOS, and Calendly. Suggests optimal windows, prevents double-bookings, and gets your field team on time every time."/>
|
||||
</head><body>
|
||||
<nav>
|
||||
<a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||||
<a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a>
|
||||
</nav>
|
||||
<section class="hero has-bg" id="home">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1800&q=80');filter:brightness(.12) saturate(.4)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(5,8,15,.5) 0%,rgba(5,8,15,.82) 55%,rgba(5,8,15,1) 100%)"></div>
|
||||
<div class="hero-bg"><div class="hero-grid"></div><div class="hero-glow" style="background:radial-gradient(ellipse,rgba(245,158,11,.1),transparent 65%)"></div></div>
|
||||
<div class="eyebrow"><span class="dot" style="background:var(--orange)"></span> Smart Calendar · AI Scheduling · Field Intelligence</div>
|
||||
<h1>The Appointment<br>Was There. Your Rep<br><span style="color:var(--orange)">Wasn't. Job Gone.</span></h1>
|
||||
<p class="hero-sub">Double-bookings. Late arrivals. Reps walking in blind. <strong>Every scheduling failure hands a job to your competitor</strong>, and the homeowner never calls you back. It's your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Stop Losing Appointments →</a>
|
||||
|
||||
</div>
|
||||
<div class="micro-row" style="margin-top:18px">
|
||||
<span class="micro" style="color:var(--muted)"><span style="color:var(--orange)">4.9★</span> · 248 reviews</span>
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro"><span>✅</span> Syncs iOS, Google, Calendly</span>
|
||||
<span class="micro"><span>✅</span> AI suggests best times</span>
|
||||
<span class="micro"><span>✅</span> 98% on-track rate</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat"><div class="stat-num" style="color:var(--orange)">98%</div><div class="stat-label">On-track rate this week</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--accent)">3</div><div class="stat-label">Calendars synced in real-time</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--green)">0</div><div class="stat-label">Double-bookings since launch</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:#fff">AI</div><div class="stat-label">Suggests optimal windows</div></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pain-section has-bg reveal" id="problem">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1800&q=80');filter:brightness(.1) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(11,18,32,.98) 0%,rgba(11,18,32,.92) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--red)">The Problem</div>
|
||||
<h2 class="s-title">2-3 Lost Jobs a Month.<br>Same Cause <span style="color:var(--red)">Every Time.</span></h2>
|
||||
<p class="s-sub">It's never the product. It's never the price. It's the rep who was late, double-booked, or walked in with nothing to say. Scheduling failures are silent revenue killers, and they're completely preventable.</p>
|
||||
<div class="pain-grid">
|
||||
<div class="p-item"><div class="p-icon">📅</div><h3>Double-Bookings</h3><p>Rep A and Rep B both confirm the same homeowner for different times. The homeowner gets two calls, loses confidence in your operation, and calls someone else.</p><span class="p-cost">Cost: 1-2 leads lost per week</span></div>
|
||||
<div class="p-item"><div class="p-icon">👻</div><h3>No-Shows and Late Arrivals</h3><p>Rep doesn't check traffic, gets stuck, shows up 30 minutes late with no warning. Homeowner already moved on. You don't find out until the job's gone.</p><span class="p-cost">Cost: Referral reputation damage</span></div>
|
||||
<div class="p-item"><div class="p-icon">🗒️</div><h3>Reps Without Context</h3><p>Rep shows up to a homeowner meeting with no notes on the property, the previous conversation, or the damage assessment. Starts from scratch in front of the customer.</p><span class="p-cost">Cost: Lower close rate on every visit</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ══ CTA STRIP 1 ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1508739773434-c26b3d09e071?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(16,8,2,.97) 100%)"></div>
|
||||
<div class="glow" style="background:radial-gradient(ellipse,rgba(245,158,11,.09),transparent 70%)"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);color:var(--orange)">
|
||||
<span class="strip-tdot" style="background:var(--orange)"></span>
|
||||
Every missed appointment has a price tag
|
||||
</div>
|
||||
<h2>That Missed Appointment<br>You Didn't Follow Up On?<br><span style="color:var(--orange)">It Was Worth $12,000.</span></h2>
|
||||
<p>At an average job size of $12,000, losing 2-3 appointments a month isn't a scheduling inconvenience. It's $24,000-$36,000 in annual revenue walking out the door. Let's close that gap in one demo.</p>
|
||||
<!-- Revenue loss calc pills -->
|
||||
<div class="mpills">
|
||||
<div class="mpill" style="border:1px solid rgba(239,68,68,.22)">
|
||||
<div class="mpill-v" style="color:var(--red)">2-3</div>
|
||||
<div class="mpill-l">Jobs lost per month to scheduling</div>
|
||||
</div>
|
||||
<div class="mpill" style="border:1px solid rgba(245,158,11,.22)">
|
||||
<div class="mpill-v" style="color:var(--orange)">$12K</div>
|
||||
<div class="mpill-l">Avg roofing job value</div>
|
||||
</div>
|
||||
<div class="mpill" style="border:1px solid rgba(239,68,68,.22)">
|
||||
<div class="mpill-v" style="color:var(--red)">$36K</div>
|
||||
<div class="mpill-l">Lost revenue per year</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Show Me How to Fix This →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> Free 30-min demo</span>
|
||||
<span><b>✅</b> No credit card</span>
|
||||
<span><b>✅</b> Set up same day</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="roofing-offer-section" id="pricing">
|
||||
<div class="container">
|
||||
|
||||
<!-- TOP HEADING -->
|
||||
<div class="text-center roofing-heading mb-5">
|
||||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="row g-4 align-items-stretch">
|
||||
|
||||
<!-- LEFT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="lifetime-card h-100">
|
||||
<div class="popular-tag">MOST POPULAR</div>
|
||||
<h3>Founders Lifetime Access</h3>
|
||||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||||
<div class="price-box">
|
||||
<h2>$2000</h2>
|
||||
<span>PAY ONCE • USE FOREVER</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li>Complete Roofing CRM</li>
|
||||
<li>Lead Management System</li>
|
||||
<li>Canvassing & Field Tracking</li>
|
||||
<li>Insurance Workflow</li>
|
||||
<li>Proposal & Inspection Tools</li>
|
||||
<li>Team Management Dashboard</li>
|
||||
<li>Unlimited Projects</li>
|
||||
<li>Future Feature Updates</li>
|
||||
<li>Priority Support</li>
|
||||
</ul>
|
||||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="roofing-info-card h-100">
|
||||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||||
<div class="info-box">
|
||||
<h5>More Revenue Visibility</h5>
|
||||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Less Operational Chaos</h5>
|
||||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Built for Roofing Teams</h5>
|
||||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||||
<div class="terms-wrapper mt-4">
|
||||
<details class="custom-accordion-item">
|
||||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||||
<div class="accordion-body">
|
||||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="roofing-cta-box mt-5 text-center">
|
||||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||||
<p>Join the next generation of roofing companies scaling with automation,
|
||||
field intelligence, and operational visibility.</p>
|
||||
<div class="cta-btn-group">
|
||||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||||
.roofing-offer-section{
|
||||
padding:64px 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||||
#1a120d;
|
||||
overflow:hidden; position:relative;
|
||||
}
|
||||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||||
.roofing-offer-section .h-100{height:100%;}
|
||||
.roofing-offer-section .text-center{text-align:center;}
|
||||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||||
@media (max-width:991px){
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||||
}
|
||||
@media (max-width:767px){
|
||||
.roofing-offer-section{padding:48px 0;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||||
.roofing-offer-section .lifetime-card,
|
||||
.roofing-offer-section .roofing-info-card,
|
||||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||||
}
|
||||
</style>
|
||||
<section class="solution-section has-bg reveal" id="solution">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1800&q=80');filter:brightness(.1) saturate(.4)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(90deg,rgba(5,8,15,1) 44%,rgba(5,8,15,.72) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--accent)">The Fix</div>
|
||||
<h2 class="s-title">On Time. Every Time.<br><span style="color:var(--accent)">With Everything</span><br>They Need to Close.</h2>
|
||||
<div class="sol-split">
|
||||
<div>
|
||||
<p class="s-sub">LynkedUp Pro's smart calendar syncs your whole team, prevents conflicts automatically, and nudges reps with AI suggestions, traffic, timing, job context, before they even ask.</p>
|
||||
<ul class="sol-points">
|
||||
<li><span class="ico">🔄</span><span><strong>Real-time two-way sync</strong> - iOS Calendar, Google Calendar, and Calendly all stay in sync automatically. One source of truth for your entire team.</span></li>
|
||||
<li><span class="ico">🧠</span><span><strong>AI-suggested windows</strong> - suggests optimal times, avoids back-to-back gaps, and checks traffic before recommending when your rep should leave.</span></li>
|
||||
<li><span class="ico">📋</span><span><strong>Full context per appointment</strong> - every rep sees the homeowner notes, damage photos, previous conversations, and property details before they arrive.</span></li>
|
||||
<li><span class="ico">🛡️</span><span><strong>You stay in control</strong> - every AI suggestion is a nudge, not an override. You approve every change. No automation you didn't ask for.</span></li>
|
||||
</ul>
|
||||
<div class="sol-stats">
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--orange)">98%</div><div class="sol-stat-label">On-track rate in beta</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--accent)">3</div><div class="sol-stat-label">Calendar integrations</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--green)">AI</div><div class="sol-stat-label">Traffic-aware suggestions</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:#fff">0</div><div class="sol-stat-label">Double-bookings</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-card">
|
||||
<img src="/page/assets/calendar.png" alt="LynkedUp Pro Overview Dashboard" style="display:block;width:100%;height:auto" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ══ CTA STRIP 2 ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(2,14,10,.97) 100%)"></div>
|
||||
<div class="glow" style="background:radial-gradient(ellipse,rgba(0,200,255,.07),transparent 70%)"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.22);color:var(--accent)">
|
||||
<span class="strip-tdot" style="background:var(--accent)"></span>
|
||||
The rep who shows up prepared wins the job
|
||||
</div>
|
||||
<h2>Context Closes.<br><span style="color:var(--accent)">Showing Up Blind</span><br>Doesn't.</h2>
|
||||
<p>LynkedUp Pro feeds every rep the homeowner's damage history, previous conversations, and property notes before they knock. When your rep walks in knowing more than the homeowner expects, they close.</p>
|
||||
<!-- Before / After comparison -->
|
||||
<div class="s-compare">
|
||||
<div class="sc-side">
|
||||
<div class="sc-label">Without LynkedUp</div>
|
||||
<div class="sc-val" style="color:var(--red)">Walks in blind</div>
|
||||
<div class="sc-sub">No notes. Starts from scratch.<br>Homeowner senses it.</div>
|
||||
</div>
|
||||
<div class="sc-div">vs</div>
|
||||
<div class="sc-side">
|
||||
<div class="sc-label">With LynkedUp Pro</div>
|
||||
<div class="sc-val" style="color:var(--green)">Walks in ready</div>
|
||||
<div class="sc-sub">Full context. Feels like a<br>trusted advisor. Closes.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">See the Calendar in Action →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> iOS, Google & Calendly sync</span>
|
||||
<span><b>✅</b> AI-suggested windows</span>
|
||||
<span><b>✅</b> Full context per appointment</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="proof-section has-bg reveal" id="proof">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(11,18,32,1) 0%,rgba(11,18,32,.88) 55%,rgba(11,18,32,1) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--orange);text-align:center">Real Result</div>
|
||||
<h2 class="s-title" style="text-align:center">His Reps Stopped<br>Missing Appointments.<br><span style="color:var(--orange)">Close Rate Up 43%.</span></h2>
|
||||
<div class="proof-card" style="border-color:rgba(245,158,11,.2)">
|
||||
<div class="proof-result" style="border-color:rgba(245,158,11,.18);background:rgba(245,158,11,.06)"><div class="pr-num" style="color:var(--orange)">+43%</div><div class="pr-label">Close Rate</div></div>
|
||||
<div class="proof-stars">★★★★★</div>
|
||||
<p class="proof-quote">"The AI calendar suggestions changed everything for my team. Reps never miss appointments, they always show up with context about the property, and the route nudges actually help them plan smarter days. Within 60 days our close rate jumped 43%. The calendar alone drove most of that."</p>
|
||||
<div class="proof-author">
|
||||
<div class="proof-av" style="background:linear-gradient(135deg,#0ea5e9,#00e5a0)">JR</div>
|
||||
<div><div class="proof-name">Jason Rodriguez</div><div class="proof-role">Owner · Dallas, TX · 14-person crew</div></div>
|
||||
</div>
|
||||
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="cta-section has-bg" id="cta">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80');filter:brightness(.08) saturate(.3)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(245,158,11,.04))"></div>
|
||||
<div class="container" style="position:relative;z-index:2">
|
||||
<div style="display:inline-block;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:8px 18px;margin-bottom:24px;font-size:13px;color:var(--orange);font-weight:600">📅 The average roofing crew loses 2-3 jobs/month to scheduling failures</div>
|
||||
<h2>Your Next Missed<br>Appointment Is Already<br><em>On the Calendar.</em></h2>
|
||||
<p>See the smart calendar in action - synced, AI-powered, and built to stop your best leads from signing with someone else first.</p>
|
||||
<div class="cta-form">
|
||||
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo →</a>
|
||||
</div>
|
||||
<div class="cta-micro"><span>✅ No credit card</span><span>✅ 30-day guarantee</span><span>✅ Works with your existing calendar</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>© 2026 LynkedUp Pro See Full Platform <a href="https://book.lynkeduppro.com/">Privacy</a> · <a href="https://book.lynkeduppro.com/">Terms</a></p>
|
||||
<p style="margin-top:8px;font-size:12px;opacity:.5">$349/mo flat rate · No credit card required · 30-day money-back guarantee · Built for roofing</p>
|
||||
<p style="margin-top:8px;font-size:11px;opacity:.5">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p>
|
||||
</footer>
|
||||
<div class="mob-sticky">
|
||||
<a href="https://book.lynkeduppro.com/" class="p">Book a demo</a>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add("visible")})},{threshold:.1});
|
||||
document.querySelectorAll(".reveal").forEach(el=>obs.observe(el));
|
||||
document.querySelectorAll("a[href^=\"#\"]").forEach(a=>{a.addEventListener("click",function(e){const t=document.querySelector(this.getAttribute("href"));if(t){e.preventDefault();t.scrollIntoView({behavior:"smooth",block:"start"});}}); });
|
||||
</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||||
<script src="/square-checkout.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,635 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;margin-top:44px}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.shot{display:block;width:100%;height:100%;border-radius:18px;object-fit:cover;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
|
||||
@media(max-width:1280px){
|
||||
nav{padding:14px 32px}
|
||||
section{padding:80px 24px}
|
||||
.cta-strip{padding:72px 24px}
|
||||
.cta-section{padding:80px 24px}
|
||||
.container{max-width:100%}
|
||||
}
|
||||
@media(max-width:1024px){
|
||||
nav{padding:14px 24px}
|
||||
.pain-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.sol-split{gap:36px}
|
||||
.hero{min-height:auto;padding:120px 24px 72px}
|
||||
h1{font-size:clamp(40px,7vw,72px)}
|
||||
.s-title{font-size:clamp(32px,5vw,52px)!important}
|
||||
.stat-row{gap:28px}
|
||||
.proof-result{position:static;display:inline-block;margin-bottom:14px}
|
||||
}
|
||||
@media(max-width:860px){
|
||||
nav{padding:14px 20px}
|
||||
.sol-split{grid-template-columns:1fr!important}
|
||||
.pain-grid{grid-template-columns:1fr!important}
|
||||
.sol-stats{grid-template-columns:1fr 1fr}
|
||||
.mob-sticky{display:flex}
|
||||
body{padding-bottom:72px}
|
||||
section{padding:64px 20px}
|
||||
.cta-strip{padding:60px 20px}
|
||||
.cta-section{padding:64px 20px}
|
||||
.hero{padding:100px 16px 60px}
|
||||
.shot{height:auto}
|
||||
}
|
||||
@media(max-width:768px){
|
||||
nav{padding:12px 16px}
|
||||
.nav-cta{padding:8px 16px;font-size:13px}
|
||||
.logo-text{font-size:16px}
|
||||
.logo-mark{width:28px;height:28px;font-size:14px}
|
||||
section{padding:56px 18px}
|
||||
.cta-strip{padding:56px 18px}
|
||||
.cta-section{padding:56px 18px}
|
||||
.hero{padding:100px 16px 56px}
|
||||
.btn-primary,.btn-ghost{padding:12px 22px;font-size:15px}
|
||||
.stat-row{gap:20px;margin-top:44px}
|
||||
.stat+.stat::before{display:none}
|
||||
.stat-num{font-size:32px}
|
||||
.proof-quote{font-size:15px;line-height:1.7}
|
||||
.proof-card{padding:24px 20px}
|
||||
.cta-section h2{font-size:clamp(28px,7vw,48px)}
|
||||
.smet-row{gap:8px}
|
||||
.smet{min-width:0;flex:1 0 calc(50% - 8px);padding:12px}
|
||||
.smet-v{font-size:22px}
|
||||
.strip-trust{gap:12px}
|
||||
}
|
||||
@media(max-width:560px){
|
||||
.stat-row{gap:16px}
|
||||
h1{font-size:clamp(36px,11vw,64px);line-height:.96}
|
||||
.cta-form{flex-direction:column}
|
||||
.cta-form input{min-width:100%;width:100%}
|
||||
}
|
||||
@media(max-width:480px){
|
||||
nav{padding:10px 14px}
|
||||
.logo-text{font-size:15px}
|
||||
.nav-cta{padding:7px 13px;font-size:12px}
|
||||
section{padding:44px 16px}
|
||||
.cta-strip{padding:48px 16px}
|
||||
.cta-section{padding:48px 16px}
|
||||
.hero{padding:90px 14px 48px}
|
||||
h1{font-size:clamp(32px,11vw,56px);line-height:.96}
|
||||
.hero-sub{font-size:15px;margin-top:18px}
|
||||
.hero-actions{flex-direction:column;align-items:stretch;margin-top:28px}
|
||||
.hero-actions a{width:100%;text-align:center}
|
||||
.s-title{font-size:clamp(26px,8vw,42px)!important}
|
||||
.s-sub{font-size:15px}
|
||||
.stat-row{gap:14px;margin-top:32px}
|
||||
.stat-num{font-size:24px}
|
||||
.stat-label{font-size:11px}
|
||||
.sol-stats{grid-template-columns:1fr}
|
||||
.cta-form .btn-primary{width:100%;text-align:center}
|
||||
.cta-section h2{font-size:clamp(24px,8vw,38px)}
|
||||
.cta-section p{font-size:15px}
|
||||
.cta-micro{gap:8px;font-size:11px}
|
||||
.strip-btns{flex-direction:column;align-items:stretch}
|
||||
.strip-btns a{width:100%;text-align:center}
|
||||
.strip-trust{flex-direction:column;align-items:center;gap:8px}
|
||||
.smet{flex:1 0 calc(50% - 8px)}
|
||||
.smet-v{font-size:20px}
|
||||
.smet-l{font-size:10px}
|
||||
.proof-card{padding:22px 16px;margin-top:32px}
|
||||
.proof-quote{font-size:14px}
|
||||
.p-item{padding:22px 18px}
|
||||
.mock-card{box-shadow:0 14px 28px rgba(0,0,0,.4)}
|
||||
.mob-sticky{padding:10px 12px;gap:8px}
|
||||
.mob-sticky a{padding:11px 8px;font-size:13px}
|
||||
footer{padding:32px 16px 24px}
|
||||
footer p{font-size:12px}
|
||||
.eyebrow{font-size:11px;padding:5px 14px}
|
||||
}
|
||||
@media(max-width:360px){
|
||||
h1{font-size:clamp(28px,11vw,48px)}
|
||||
.s-title{font-size:clamp(22px,9vw,36px)!important}
|
||||
.btn-primary,.btn-ghost{padding:11px 16px;font-size:14px}
|
||||
.stat-num{font-size:20px}
|
||||
.smet{flex:1 0 100%}
|
||||
}
|
||||
|
||||
/* ── bg helpers (proven v3) ── */
|
||||
.bg-img{position:absolute!important;inset:0!important;z-index:0!important;background-size:cover!important;background-position:center!important;pointer-events:none}
|
||||
.bg-ov{position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none}
|
||||
.has-bg{position:relative!important;overflow:hidden!important}
|
||||
.has-bg>.container,.has-bg>.hero-bg,.has-bg>.eyebrow,
|
||||
.has-bg>h1,.has-bg>.hero-sub,.has-bg>.hero-actions,
|
||||
.has-bg>.micro-row,.has-bg>.stat-row,.has-bg>.wrap{position:relative!important;z-index:2!important}
|
||||
/* ── CTA strip ── */
|
||||
.cta-strip{padding:84px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-strip>.wrap{position:relative;z-index:2;max-width:700px;margin:0 auto}
|
||||
.strip-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 16px;border-radius:100px;margin-bottom:22px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
|
||||
.strip-tdot{width:6px;height:6px;border-radius:50%;display:inline-block;animation:blink 2s ease infinite}
|
||||
.cta-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,5vw,60px);font-weight:900;line-height:.97;letter-spacing:-.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
|
||||
.cta-strip p{font-size:16px;color:var(--muted);line-height:1.72;max-width:520px;margin:0 auto 28px}
|
||||
.strip-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.strip-trust{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap}
|
||||
.strip-trust span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.strip-trust b{color:var(--green)}
|
||||
.smet-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
|
||||
.smet{background:var(--card);border-radius:12px;padding:14px 20px;text-align:center;min-width:118px}
|
||||
.smet-v{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;line-height:1}
|
||||
.smet-l{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px;line-height:1.4}
|
||||
/* ── bigger s-title ── */
|
||||
.s-title{font-size:clamp(36px,5vw,62px)!important;line-height:.97!important}
|
||||
|
||||
</style>
|
||||
<title>LynkedUp Pro - Stop Losing Jobs When Hail Hits</title>
|
||||
<meta name="description" content="Real-time hail alerts route your reps to the highest-damage doors within minutes of a storm. Beat competitors before they know it rained."/>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||||
<a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero has-bg" id="home">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504309092620-4d0ec726efa4?w=1800&q=80');filter:brightness(.12) saturate(.4)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(5,8,15,.45) 0%,rgba(5,8,15,.8) 55%,rgba(5,8,15,1) 100%)"></div>
|
||||
<div class="hero-bg">
|
||||
<div class="hero-grid"></div>
|
||||
<div class="hero-glow" style="background:radial-gradient(ellipse,rgba(239,68,68,.1),transparent 65%)"></div>
|
||||
</div>
|
||||
<div class="eyebrow"><span class="dot" style="background:var(--red)"></span> Storm Intelligence · Real-Time Hail Alerts</div>
|
||||
<h1>While You Check<br>the Weather App,<br><span style="color:var(--red)">They Sign Contracts.</span></h1>
|
||||
<p class="hero-sub">By the time you hear about a hail event, the best crews in your market have knocked 40 doors and signed 10 contracts. <strong>LynkedUp Pro puts you there first</strong> - your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">See It Stop a Storm Loss →</a>
|
||||
|
||||
</div>
|
||||
<div class="micro-row" style="margin-top:18px">
|
||||
<span class="micro" style="color:var(--orange)">4.9★ · 248 reviews</span>
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro"><span>⚡</span> Sub-hour hail alerts</span>
|
||||
<span class="micro"><span>🗺️</span> AI address scoring</span>
|
||||
<span class="micro"><span>✅</span> 30-day guarantee</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat"><div class="stat-num" style="color:var(--red)">17 min</div><div class="stat-label">Storm alert → reps on doors</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--orange)">89</div><div class="stat-label">Addresses scored per event</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--green)">11</div><div class="stat-label">Contracts signed same day</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:#fff">1st</div><div class="stat-label">On scene before competition</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- THE PAIN -->
|
||||
<section class="pain-section has-bg reveal" id="problem">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1527689368864-3a821dbccc34?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(11,18,32,.98) 0%,rgba(11,18,32,.93) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--red)">The Problem</div>
|
||||
<h2 class="s-title">Second Place<br>After a Storm Is<br><span style="color:var(--red)">Worth $0.</span></h2>
|
||||
<p class="s-sub">It's not about effort. It's about intelligence. The crews winning after every storm have one thing you don't. They know about it first.</p>
|
||||
<div class="pain-grid">
|
||||
<div class="p-item">
|
||||
<div class="p-icon">🌩️</div>
|
||||
<h3>You Hear About It Late</h3>
|
||||
<p>Weather apps, neighbor texts, news alerts. By the time you piece it together, the storm swath is already being worked. You're not slow, you're uninformed.</p>
|
||||
<span class="p-cost">Cost: 3-5 lost jobs per storm</span>
|
||||
</div>
|
||||
<div class="p-item">
|
||||
<div class="p-icon">🗺️</div>
|
||||
<h3>No Map, No Priority</h3>
|
||||
<p>Even when you know it hailed, which street do you hit first? Without damage scoring, your reps knock random doors while competitors work the worst-hit blocks.</p>
|
||||
<span class="p-cost">Cost: Wasted canvassing hours</span>
|
||||
</div>
|
||||
<div class="p-item">
|
||||
<div class="p-icon">🚗</div>
|
||||
<h3>Reps Route Themselves</h3>
|
||||
<p>No dispatch. No territory assignment. Reps show up wherever they feel like, overlap each other, miss entire neighborhoods, and leave money on the ground.</p>
|
||||
<span class="p-cost">Cost: Hundreds of doors unmissed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- THE SOLUTION -->
|
||||
<section class="roofing-offer-section" id="pricing">
|
||||
<div class="container">
|
||||
|
||||
<!-- TOP HEADING -->
|
||||
<div class="text-center roofing-heading mb-5">
|
||||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="row g-4 align-items-stretch">
|
||||
|
||||
<!-- LEFT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="lifetime-card h-100">
|
||||
<div class="popular-tag">MOST POPULAR</div>
|
||||
<h3>Founders Lifetime Access</h3>
|
||||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||||
<div class="price-box">
|
||||
<h2>$2000</h2>
|
||||
<span>PAY ONCE • USE FOREVER</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li>Complete Roofing CRM</li>
|
||||
<li>Lead Management System</li>
|
||||
<li>Canvassing & Field Tracking</li>
|
||||
<li>Insurance Workflow</li>
|
||||
<li>Proposal & Inspection Tools</li>
|
||||
<li>Team Management Dashboard</li>
|
||||
<li>Unlimited Projects</li>
|
||||
<li>Future Feature Updates</li>
|
||||
<li>Priority Support</li>
|
||||
</ul>
|
||||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="roofing-info-card h-100">
|
||||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||||
<div class="info-box">
|
||||
<h5>More Revenue Visibility</h5>
|
||||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Less Operational Chaos</h5>
|
||||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Built for Roofing Teams</h5>
|
||||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||||
<div class="terms-wrapper mt-4">
|
||||
<details class="custom-accordion-item">
|
||||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||||
<div class="accordion-body">
|
||||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="roofing-cta-box mt-5 text-center">
|
||||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||||
<p>Join the next generation of roofing companies scaling with automation,
|
||||
field intelligence, and operational visibility.</p>
|
||||
<div class="cta-btn-group">
|
||||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||||
.roofing-offer-section{
|
||||
padding:64px 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||||
#1a120d;
|
||||
overflow:hidden; position:relative;
|
||||
}
|
||||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||||
.roofing-offer-section .h-100{height:100%;}
|
||||
.roofing-offer-section .text-center{text-align:center;}
|
||||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||||
@media (max-width:991px){
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||||
}
|
||||
@media (max-width:767px){
|
||||
.roofing-offer-section{padding:48px 0;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||||
.roofing-offer-section .lifetime-card,
|
||||
.roofing-offer-section .roofing-info-card,
|
||||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||||
}
|
||||
</style>
|
||||
<!-- ══ CTA STRIP ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1800&q=80');filter:brightness(.09) saturate(.38)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(16,4,4,.97) 100%)"></div>
|
||||
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:700px;height:360px;border-radius:50%;background:radial-gradient(ellipse,rgba(239,68,68,.07),transparent 70%);z-index:1;pointer-events:none"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);color:var(--red)">
|
||||
<span class="strip-tdot" style="background:var(--red)"></span>
|
||||
Right now, somewhere in your territory
|
||||
</div>
|
||||
<h2>Hail Fell.<br><span style="color:var(--red)">Is Anyone</span><br><span style="color:var(--orange)">Moving?</span></h2>
|
||||
<p>A competitor using LynkedUp Pro already has the swath mapped, the top addresses scored, and three reps auto-routed to the highest-damage doors. The window to be first is 17 minutes. Not hours.</p>
|
||||
<div class="smet-row"><div class="smet" style="border:1px solid rgba(239,68,68,.22)"><div class="smet-v" style="color:var(--red)"><1hr</div><div class="smet-l">Alert to reps deployed</div></div><div class="smet" style="border:1px solid rgba(245,158,11,.22)"><div class="smet-v" style="color:var(--orange)">17 min</div><div class="smet-l">Avg storm → dispatch</div></div><div class="smet" style="border:1px solid rgba(0,229,160,.22)"><div class="smet-v" style="color:var(--green)">11</div><div class="smet-l">Contracts same day</div></div><div class="smet" style="border:1px solid rgba(0,200,255,.22)"><div class="smet-v" style="color:var(--accent)">89</div><div class="smet-l">Addresses scored</div></div></div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Show Me How to Be First →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> No credit card</span>
|
||||
<span><b>✅</b> Free 30-min demo</span>
|
||||
<span><b>✅</b> 30-day guarantee</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solution-section has-bg reveal" id="solution">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(90deg,rgba(5,8,15,1) 42%,rgba(5,8,15,.75) 100%)"></div>
|
||||
<div class="container" style="position:relative;z-index:2">
|
||||
<div class="s-label" style="color:var(--accent)">The Fix</div>
|
||||
<h2 class="s-title">17 Minutes.<br><span style="color:var(--accent)">Reps Deployed.</span><br>Doors Getting Knocked.</h2>
|
||||
<div class="sol-split">
|
||||
<div>
|
||||
<p class="s-sub">LynkedUp Pro pulls storm data from HailTrace and HailWatch the moment a hail event is detected. Every address in the impact zone gets an AI damage score. Your reps get their route.</p>
|
||||
<ul class="sol-points">
|
||||
<li><span class="ico">📡</span><span><strong>Dual-source hail data.</strong> HailTrace + HailWatch fusion means you never miss an event in your territory, day or night.</span></li>
|
||||
<li><span class="ico">🎯</span><span><strong>AI address scoring.</strong> Every home ranked HIGH / MED / LOW by hail severity. Your reps hit the best doors first, every time.</span></li>
|
||||
<li><span class="ico">📲</span><span><strong>Auto-dispatch to field.</strong> Optimized canvassing routes pushed directly to your reps' phones within minutes of a storm ending.</span></li>
|
||||
<li><span class="ico">📎</span><span><strong>LiDAR scan on arrival.</strong> Rep deploys drone, AI builds digital twin and flags every impact zone in under 4 minutes. Proposal ready before competitors arrive.</span></li>
|
||||
</ul>
|
||||
<div class="sol-stats">
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--red)"><1 hr</div><div class="sol-stat-label">Alert to reps deployed</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--orange)">89</div><div class="sol-stat-label">Addresses scored per storm</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--accent)">2</div><div class="sol-stat-label">Storm data sources fused</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--green)">$0</div><div class="sol-stat-label">Extra cost for hail intel</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HAIL MAP MOCK -->
|
||||
<div class="mock-card">
|
||||
<img src="/page/assets/storm.png" alt="LynkedUp Pro Overview Dashboard" style="display:block;width:100%;height:auto" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROOF -->
|
||||
<section class="proof-section has-bg reveal">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(11,18,32,1) 0%,rgba(11,18,32,.88) 60%,rgba(11,18,32,1) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--green);text-align:center">Real Result</div>
|
||||
<h2 class="s-title" style="text-align:center">Alert at 2:14PM.<br><span style="color:var(--green)">11 Contracts</span><br>Before Dark.</h2>
|
||||
<div class="proof-card">
|
||||
<div class="proof-result"><div class="pr-num">17 min</div><div class="pr-label">Storm→Doors</div></div>
|
||||
<div class="proof-stars">★★★★★</div>
|
||||
<p class="proof-quote">"Alert fired at 2:14 PM. My three reps were knocking doors by 2:31. By end of day we had 11 signed contracts. Our closest competitor showed up the next morning. That is literally the difference this makes, and that was week one."</p>
|
||||
<div class="proof-author">
|
||||
<div class="proof-av" style="background:linear-gradient(135deg,#a855f7,#0ea5e9)">SA</div>
|
||||
<div><div class="proof-name">Sarah Alonzo</div><div class="proof-role">Operations Manager · Houston, TX</div></div>
|
||||
</div>
|
||||
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-section has-bg" id="cta">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=80');filter:brightness(.08) saturate(.3)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(245,158,11,.04))"></div>
|
||||
<div class="container" style="position:relative;z-index:1">
|
||||
<div style="display:inline-block;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:8px;padding:8px 18px;margin-bottom:24px;font-size:13px;color:var(--red);font-weight:600">⚡ The next storm in your territory could hit today</div>
|
||||
<h2>The Next Storm<br>Could Hit <em>Today.</em><br>Will You Be First?</h2>
|
||||
<p>Stop losing jobs to crews who just got lucky with timing. LynkedUp Pro makes luck irrelevant.</p>
|
||||
<div class="cta-form">
|
||||
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo →</a>
|
||||
</div>
|
||||
<div class="cta-micro">
|
||||
<span>✅ No credit card</span><span>✅ 30-day money-back guarantee</span><span>✅ Free onboarding</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
@keyframes hpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.45}}
|
||||
@keyframes hblink{0%,100%{opacity:1}50%{opacity:.55}}
|
||||
h1 .red{color:var(--red)}
|
||||
</style>
|
||||
<footer>
|
||||
<p>© 2026 LynkedUp Pro See Full Platform →<a href="https://book.lynkeduppro.com/">Privacy</a> · <a href="https://book.lynkeduppro.com/">Terms</a></p>
|
||||
<p style="margin-top:8px;font-size:12px;opacity:.5">$2000/mo flat rate · No credit card required · 30-day money-back guarantee · Built for roofing</p>
|
||||
<p style="margin-top:8px;font-size:11px;opacity:.5">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p>
|
||||
</footer>
|
||||
<div class="mob-sticky">
|
||||
<a href="https://book.lynkeduppro.com/" class="p">Book a demo</a>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add("visible")})},{threshold:.1});
|
||||
document.querySelectorAll(".reveal").forEach(el=>obs.observe(el));
|
||||
document.querySelectorAll("a[href^=\"#\"]").forEach(a=>{a.addEventListener("click",function(e){const t=document.querySelector(this.getAttribute("href"));if(t){e.preventDefault();t.scrollIntoView({behavior:"smooth",block:"start"});}}); });
|
||||
</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||||
<script src="/square-checkout.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+2194
File diff suppressed because it is too large
Load Diff
+2110
File diff suppressed because it is too large
Load Diff
+2026
File diff suppressed because it is too large
Load Diff
+1332
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,426 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:44px}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
/* ── background image helpers ── */
|
||||
.has-bg{position:relative;overflow:hidden}
|
||||
.has-bg>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||||
.has-bg>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||||
.has-bg>.container,.has-bg>.hero-bg,.has-bg>.eyebrow,.has-bg>h1,.has-bg>.hero-sub,.has-bg>.hero-actions,.has-bg>.micro-row,.has-bg>.stat-row{position:relative;z-index:2}
|
||||
/* ── bigger s-title ── */
|
||||
.s-title{font-size:clamp(36px,5vw,62px);line-height:.97}
|
||||
/* ── CTA strip ── */
|
||||
.cta-strip{padding:84px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-strip>.bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
|
||||
.cta-strip>.bg-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
|
||||
.cta-strip>.glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:700px;height:360px;border-radius:50%;z-index:1;pointer-events:none}
|
||||
.cta-strip>.wrap{position:relative;z-index:2;max-width:680px;margin:0 auto}
|
||||
.strip-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 16px;border-radius:100px;margin-bottom:22px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
|
||||
.strip-tag .tdot{width:6px;height:6px;border-radius:50%;display:inline-block;animation:blink 2s ease infinite}
|
||||
.cta-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,5vw,60px);font-weight:900;line-height:.97;letter-spacing:-.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
|
||||
.cta-strip p{font-size:16px;color:var(--muted);line-height:1.72;max-width:500px;margin:0 auto 28px}
|
||||
.strip-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.strip-trust{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap}
|
||||
.strip-trust span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.strip-trust span b{color:var(--green)}
|
||||
/* ── savings compare cards ── */
|
||||
.save-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
|
||||
.save-card{background:var(--card);border-radius:12px;padding:16px 22px;text-align:center;min-width:120px}
|
||||
.save-card .sv{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;line-height:1}
|
||||
.save-card .sl{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
|
||||
@media(max-width:1280px){section{padding:80px 24px}.cta-section{padding:80px 24px}.cta-strip{padding:76px 24px}}
|
||||
@media(max-width:1024px){nav{padding:14px 24px}section{padding:72px 22px}.cta-section{padding:72px 22px}.cta-strip{padding:68px 22px}.pain-grid{grid-template-columns:repeat(2,1fr)}.sol-split{gap:36px}h1{font-size:clamp(44px,7vw,76px)}.hero{padding:108px 20px 64px}.proof-card{padding:30px 26px}.proof-result{top:18px;right:18px}.stat-row{gap:28px;margin-top:48px}}
|
||||
@media(max-width:768px){nav{padding:12px 18px}section{padding:56px 18px}.cta-section{padding:56px 18px}.cta-strip{padding:56px 18px}.hero{min-height:auto;padding:96px 16px 56px}h1{font-size:clamp(40px,9vw,64px);line-height:.95}.hero-sub{font-size:15px}.s-title{font-size:clamp(30px,7vw,46px)}.stat-row{gap:18px;margin-top:40px}.stat+.stat::before{display:none}.stat-num{font-size:32px}.proof-card{padding:26px 22px;margin-top:32px}.proof-result{position:static;display:inline-block;margin-bottom:14px}.proof-quote{font-size:15px}.cta-section h2{font-size:clamp(30px,7vw,46px)}.cta-strip h2{font-size:clamp(28px,7vw,46px)}.sol-points li{font-size:14px}.p-item{padding:22px 18px}.save-cards{gap:8px}.save-card{min-width:96px;padding:14px 16px}.save-card .sv{font-size:24px}}
|
||||
@media(max-width:480px){nav{padding:10px 14px}.nav-cta{padding:8px 14px;font-size:13px}.logo-text{font-size:16px}section{padding:48px 16px}.cta-section{padding:48px 16px}.cta-strip{padding:48px 16px}.hero{padding:88px 14px 48px}h1{font-size:clamp(34px,10vw,52px);letter-spacing:-.5px}.hero-sub{font-size:14px;margin-top:18px}.s-title{font-size:clamp(28px,8vw,40px);letter-spacing:0}.s-sub{font-size:15px}.micro{font-size:12px}.micro-row{gap:10px}.stat-row{flex-direction:column;gap:18px;margin-top:32px}.stat-num{font-size:28px}.pain-grid{margin-top:30px}.p-item h3{font-size:15px}.p-item p{font-size:13px}.proof-card{padding:22px 18px;border-radius:14px}.proof-quote{font-size:14px;line-height:1.7}.proof-author{flex-wrap:wrap;gap:10px}.cta-section h2,.cta-strip h2{font-size:clamp(26px,8vw,38px)}.cta-section p,.cta-strip p{font-size:14px}.btn-primary,.btn-ghost{padding:12px 22px;font-size:15px}.sol-stats{grid-template-columns:1fr 1fr;gap:8px}.sol-stat{padding:12px}.sol-stat-num{font-size:22px}.mock-card{border-radius:14px}.save-cards{flex-wrap:wrap}.save-card{min-width:80px;padding:12px 14px}.save-card .sv{font-size:22px}.cta-micro{gap:8px;font-size:11px}.strip-tag{font-size:10px;padding:4px 12px;letter-spacing:.8px}footer{padding:32px 16px 24px}footer p{font-size:12px}.mob-sticky{padding:10px 12px}.mob-sticky a{font-size:13px;padding:11px}.cta-form{flex-direction:column}.cta-form input{width:100%;min-width:100%}.cta-form .btn-primary{width:100%;text-align:center}.hero-actions{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}.strip-btns{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.strip-btns .btn-primary,.strip-btns .btn-ghost{width:100%;text-align:center}}
|
||||
@media(max-width:360px){h1{font-size:32px}.s-title{font-size:26px}.cta-section h2,.cta-strip h2{font-size:24px}.btn-primary,.btn-ghost{padding:11px 18px;font-size:14px}.sol-stats{grid-template-columns:1fr}}
|
||||
@media(max-width:860px){.mob-sticky{display:flex}body{padding-bottom:72px}.sol-split{grid-template-columns:1fr!important}.pain-grid{grid-template-columns:1fr!important}}
|
||||
@media(max-width:768px){.stat+.stat::before{display:none}.stat-row{gap:18px}}
|
||||
@media(max-width:560px){.sol-stats{grid-template-columns:1fr 1fr}.stat-row{flex-direction:column;gap:18px}.hero-actions{flex-direction:column;align-items:stretch;max-width:300px;margin:24px auto 0}.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}.strip-btns{flex-direction:column;align-items:stretch;max-width:300px;margin-left:auto;margin-right:auto}.strip-btns .btn-primary,.strip-btns .btn-ghost{width:100%;text-align:center}.cta-form{flex-direction:column}.cta-form input{width:100%;min-width:100%}.cta-form .btn-primary{width:100%;text-align:center}}
|
||||
@media(max-width:360px){.sol-stats{grid-template-columns:1fr}}</style>
|
||||
<title>LynkedUp Pro - Kill Your EagleView Bill. Scan in Minutes.</title>
|
||||
<meta name="description" content="Stop paying $15-$50 per EagleView report and waiting 48 hours. LynkedUp Pro AI measurements scan any roof in minutes for $0 per report, included in your flat $349/mo."/>
|
||||
</head><body>
|
||||
<nav>
|
||||
<a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||||
<a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a>
|
||||
</nav>
|
||||
<section class="hero has-bg" id="home">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=1800&q=80');filter:brightness(.12) saturate(.45)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(5,8,15,.55) 0%,rgba(5,8,15,.82) 55%,rgba(5,8,15,1) 100%)"></div>
|
||||
<div class="hero-bg"><div class="hero-grid"></div><div class="hero-glow" style="background:radial-gradient(ellipse,rgba(0,200,255,.11),transparent 65%)"></div></div>
|
||||
<div class="eyebrow" style="position:relative;z-index:2"><span class="dot"></span> AI Measurements · LiDAR · $0/Report</div>
|
||||
<h1 style="position:relative;z-index:2">While You Wait<br><span style="color:var(--accent)">48 Hours,</span><br>They Sign Someone Else.</h1>
|
||||
<p class="hero-sub" style="position:relative;z-index:2">EagleView makes you pay <strong>$15-$50 per report</strong> and wait two days. That's two days for a competitor to fly their own drone, hand the homeowner a quote, and close the job that was yours. LynkedUp Pro is your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="hero-actions" style="position:relative;z-index:2">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">See What You'd Save →</a>
|
||||
|
||||
</div>
|
||||
<div class="micro-row" style="position:relative;z-index:2">
|
||||
<span class="micro" style="color:var(--muted)">4.9★ · 248 reviews</span>
|
||||
<span class="micro"><span>✅</span> $0 per report - always</span>
|
||||
<span class="micro"><span>✅</span> Scan in minutes on-site</span>
|
||||
<span class="micro"><span>✅</span> Insurance-grade accuracy</span>
|
||||
</div>
|
||||
<div class="stat-row" style="position:relative;z-index:2">
|
||||
<div class="stat"><div class="stat-num" style="color:var(--green)">$0</div><div class="stat-label">Per report fee. Ever.</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--accent)">10×</div><div class="stat-label">Faster than EagleView</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--orange)">$700+</div><div class="stat-label">Avg monthly EagleView bill</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:#fff">48 hrs</div><div class="stat-label">Wait time eliminated</div></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pain-section has-bg reveal" id="problem">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1800&q=80');filter:brightness(.1) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(11,18,32,.98) 0%,rgba(11,18,32,.9) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--red)">The Problem</div>
|
||||
<h2 class="s-title">$700 a Month<br>to <span style="color:var(--red)">Lose Jobs Faster.</span><br>That's the EagleView Deal.</h2>
|
||||
<p class="s-sub">You're funding a per-report model built for a world before drones and AI existed. Every slow turnaround and every invoice is a self-inflicted wound on your close rate.</p>
|
||||
<div class="pain-grid">
|
||||
<div class="p-item"><div class="p-icon">💸</div><h3>$700+ a Month in Report Fees</h3><p>20 reports at $35 each. 30 reports at $50 each. Active storm crews easily spend $700-$2,000 per month before any other software cost.</p><span class="p-cost">Cost: $8,400-$24,000/year</span></div>
|
||||
<div class="p-item"><div class="p-icon">⏳</div><h3>48-Hour Turnaround</h3><p>You order the report, wait two days, then call the homeowner back. By then, two other roofers have already been on the roof and one has a signed contract.</p><span class="p-cost">Cost: 1 in 3 leads lost to speed</span></div>
|
||||
<div class="p-item"><div class="p-icon">🔗</div><h3>Disconnected from Your Workflow</h3><p>EagleView report arrives as a PDF. You manually copy measurements into your estimate tool, then into your proposal. Three steps that should be zero.</p><span class="p-cost">Cost: 45+ min per job wasted</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ══ CTA STRIP 1 ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(18,8,2,.96) 100%)"></div>
|
||||
<div class="glow" style="background:radial-gradient(ellipse,rgba(245,158,11,.08),transparent 70%)"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);color:var(--orange)">
|
||||
<span class="tdot" style="background:var(--orange)"></span>
|
||||
Your money is leaving every time you order a report
|
||||
</div>
|
||||
<h2>Every Job You Quote<br>Costs <span style="color:var(--orange)">$35 Before You</span><br>Say a Word. <span style="color:var(--red)">Stop.</span></h2>
|
||||
<p>Run 20 jobs a month? That's $700 gone before a single shingle is sold. LynkedUp Pro scans the same roof in 4 minutes for exactly $0.00, and the report auto-fills your estimate.</p>
|
||||
<div class="save-cards">
|
||||
<div class="save-card" style="border:1px solid rgba(239,68,68,.2)">
|
||||
<div class="sv" style="color:var(--red)">$700+</div>
|
||||
<div class="sl">EagleView / mo</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted);padding:0 4px">→</div>
|
||||
<div class="save-card" style="border:1px solid rgba(0,229,160,.2)">
|
||||
<div class="sv" style="color:var(--green)">$0.00</div>
|
||||
<div class="sl">LynkedUp Pro / mo</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted);padding:0 4px">=</div>
|
||||
<div class="save-card" style="border:1px solid rgba(0,200,255,.2)">
|
||||
<div class="sv" style="color:var(--accent)">$8.4K+</div>
|
||||
<div class="sl">Back in your pocket / yr</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Calculate My Exact Savings →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> No per-report fees ever</span>
|
||||
<span><b>✅</b> Free 30-min demo</span>
|
||||
<span><b>✅</b> Switch in one day</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solution-section has-bg reveal" id="solution">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=80');filter:brightness(.1) saturate(.4)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(90deg,rgba(5,8,15,1) 42%,rgba(5,8,15,.7) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--green)">The Fix</div>
|
||||
<h2 class="s-title">Scan It. Quote It.<br>Close It. <span style="color:var(--green)">Before You</span><br><span style="color:var(--accent)">Leave the Driveway.</span></h2>
|
||||
<div class="sol-split">
|
||||
<div>
|
||||
<p class="s-sub">LynkedUp Pro's AI measurement engine runs on your DJI drone. Fly the property, get centimeter-accurate measurements, and generate an insurance-grade report - all before you leave the driveway.</p>
|
||||
<ul class="sol-points">
|
||||
<li><span class="ico">🎯</span><span><strong>Sub-centimeter precision</strong> - AI + LiDAR fusion delivers measurement accuracy insurance adjusters accept on first submission.</span></li>
|
||||
<li><span class="ico">⚡</span><span><strong>Minutes on-site, not 48 hours later</strong> - fly the drone, get the numbers, hand the homeowner a proposal while you're still standing there.</span></li>
|
||||
<li><span class="ico">🔄</span><span><strong>Auto-fills your estimate</strong> - measurements feed directly into Canvas proposals. No manual re-entry. No errors. No wasted hour.</span></li>
|
||||
<li><span class="ico">📎</span><span><strong>Xactimate-style output</strong> - reports formatted exactly how adjusters expect them, with full photo documentation and storm data included.</span></li>
|
||||
</ul>
|
||||
<div class="sol-stats">
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--green)">$0</div><div class="sol-stat-label">Per-report cost</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--accent)">~4 min</div><div class="sol-stat-label">Avg flight + scan time</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--orange)">10×</div><div class="sol-stat-label">Faster than waiting on EagleView</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:#fff">1st</div><div class="sol-stat-label">Submission approval rate</div></div>
|
||||
</div>
|
||||
<div style="margin-top:28px;background:rgba(0,229,160,.05);border:1px solid rgba(0,229,160,.18);border-radius:12px;padding:20px 22px">
|
||||
<div style="font-size:12px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px">Your Monthly Savings</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px">
|
||||
<div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:var(--red)">$700+</div><div style="font-size:11px;color:var(--muted)">EagleView/mo</div></div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--muted)">→</div>
|
||||
<div style="text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:var(--green)">$0</div><div style="font-size:11px;color:var(--muted)">LynkedUp Pro/mo</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-card">
|
||||
<div class="mock-bar"><span class="mock-title">Project #1286 - AI Measurement</span><span class="mock-badge" style="background:rgba(0,200,255,.1);color:var(--accent);border:1px solid rgba(0,200,255,.25)">AI-POWERED</span></div>
|
||||
<div style="padding:14px;background:#070d18">
|
||||
<svg width="100%" viewBox="0 0 300 185" fill="none">
|
||||
<rect width="300" height="185" fill="#070d18"/>
|
||||
<polygon points="150,18 268,105 210,105 210,165 90,165 90,105 32,105" fill="rgba(0,200,255,.05)" stroke="rgba(0,200,255,.5)" stroke-width="1.2"/>
|
||||
<line x1="32" y1="110" x2="268" y2="110" stroke="rgba(0,200,255,.3)" stroke-width="1" stroke-dasharray="4 3"/>
|
||||
<text x="150" y="122" fill="rgba(0,200,255,.9)" font-size="9" text-anchor="middle" font-family="monospace" font-weight="bold">27ft 6in</text>
|
||||
<rect x="168" y="20" width="122" height="85" rx="5" fill="rgba(7,13,24,.92)" stroke="rgba(0,200,255,.15)" stroke-width="1"/>
|
||||
<text x="229" y="35" fill="rgba(255,255,255,.4)" font-size="7" text-anchor="middle" font-family="monospace">TOTAL AREA</text>
|
||||
<text x="229" y="52" fill="#00c8ff" font-size="14" text-anchor="middle" font-family="monospace" font-weight="bold">2,347 sq ft</text>
|
||||
<text x="229" y="63" fill="rgba(255,255,255,.3)" font-size="6.5" text-anchor="middle" font-family="monospace">23.47 SQUARES</text>
|
||||
<text x="168" y="76" fill="rgba(255,255,255,.35)" font-size="6.5" font-family="monospace">PLANE 1</text><text x="282" y="76" fill="rgba(255,255,255,.6)" font-size="6.5" font-family="monospace" text-anchor="end">425 SQ FT</text>
|
||||
<text x="168" y="87" fill="rgba(255,255,255,.35)" font-size="6.5" font-family="monospace">PLANE 2</text><text x="282" y="87" fill="rgba(255,255,255,.6)" font-size="6.5" font-family="monospace" text-anchor="end">362 SQ FT</text>
|
||||
<text x="168" y="98" fill="rgba(255,255,255,.35)" font-size="6.5" font-family="monospace">PLANE 3+</text><text x="282" y="98" fill="#00c8ff" font-size="6.5" font-family="monospace" text-anchor="end" font-weight="bold">1,560 SQ FT</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="padding:12px 14px;border-top:1px solid var(--border)">
|
||||
<div style="display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border)"><span style="color:var(--muted)">Scan Time</span><span style="font-weight:600;color:#fff">~4 min</span></div>
|
||||
<div style="display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border)"><span style="color:var(--muted)">Planes Measured</span><span style="font-weight:600;color:#fff">14</span></div>
|
||||
<div style="display:flex;justify-content:space-between;font-size:13px;padding:8px 0;font-family:'Barlow Condensed',sans-serif;font-weight:800"><span style="color:var(--muted)">Report Cost</span><span style="color:var(--green)">$0.00</span></div>
|
||||
</div>
|
||||
<a href="https://book.lynkeduppro.com/" style="display:block;margin:0 12px 12px;background:var(--accent);color:#05080f;text-align:center;padding:9px;border-radius:7px;font-weight:700;font-size:13px;text-decoration:none">Generate Xactimate-Style Report →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ══ CTA STRIP 2 ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.96) 0%,rgba(2,14,10,.96) 100%)"></div>
|
||||
<div class="glow" style="background:radial-gradient(ellipse,rgba(0,229,160,.07),transparent 70%)"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.22);color:var(--green)">
|
||||
<span class="tdot" style="background:var(--green)"></span>
|
||||
The homeowner signs with whoever shows up first with numbers
|
||||
</div>
|
||||
<h2>Your Competitor<br>Is Already <span style="color:var(--green)">On That Roof.</span><br><span style="color:var(--accent)">Are You?</span></h2>
|
||||
<p>The job doesn't go to the best roofer. It goes to the roofer who hands over a professional proposal while still standing in the driveway. That's LynkedUp Pro, on every single job.</p>
|
||||
<!-- Speed comparison -->
|
||||
<div style="display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;max-width:540px;margin:0 auto 30px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px">
|
||||
<div style="text-align:center">
|
||||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px">EagleView</div>
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;color:var(--red);line-height:1">48 hrs</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px">to get measurements</div>
|
||||
</div>
|
||||
<div style="font-size:22px;color:var(--border2);text-align:center">vs</div>
|
||||
<div style="text-align:center">
|
||||
<div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px">LynkedUp Pro</div>
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;color:var(--green);line-height:1">4 min</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px">on-site, before you leave</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Start Closing Jobs Faster →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> $0 per report</span>
|
||||
<span><b>✅</b> Insurance-grade accuracy</span>
|
||||
<span><b>✅</b> Live in 24 hrs</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="proof-section has-bg reveal" id="proof">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(11,18,32,1) 0%,rgba(11,18,32,.9) 55%,rgba(11,18,32,1) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--green);text-align:center">Real Result</div>
|
||||
<h2 class="s-title" style="text-align:center">He Ditched EagleView<br>on a Tuesday. <span style="color:var(--green)">Saved<br>$2,100 by Friday.</span></h2>
|
||||
<div class="proof-card">
|
||||
<div class="proof-result"><div class="pr-num">$2.1K</div><div class="pr-label">Saved/Month</div></div>
|
||||
<div class="proof-stars">★★★★★</div>
|
||||
<p class="proof-quote">"Cut EagleView, JobNimbus, and SalesRabbit in one move. LynkedUp Pro replaced all three for less money - and the measurements are actually better. Every insurance claim gets approved on the first submission now. I don't know why I waited."</p>
|
||||
<div class="proof-author">
|
||||
<div class="proof-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">MT</div>
|
||||
<div><div class="proof-name">Marcus Thompson</div><div class="proof-role">Operations Manager · Houston, TX</div></div>
|
||||
</div>
|
||||
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="cta-section has-bg" id="cta">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=80');filter:brightness(.08) saturate(.3)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(245,158,11,.04))"></div>
|
||||
<div class="container" style="position:relative;z-index:2">
|
||||
<div style="display:inline-block;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);border-radius:8px;padding:8px 18px;margin-bottom:24px;font-size:13px;color:var(--green);font-weight:600">💰 EagleView charges per report. We never do.</div>
|
||||
<h2>Your Next Report<br>Costs <em>$0.</em><br>So Does Every One After.</h2>
|
||||
<p>One flat rate. Unlimited scans. See exactly how much you'd save - and how fast you'd close more jobs - in a free 30-minute demo.</p>
|
||||
<div class="cta-form">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="cta-micro"><span>✅ No credit card</span><span>✅ 30-day money-back guarantee</span><span>✅ Free onboarding call</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- LEGAL: Founders / pricing Terms & Conditions - no pricing section on this page, placed before footer -->
|
||||
<div class="legal-terms" style="max-width:820px;margin:26px auto 0;padding:16px 20px;border:1px solid rgba(255,255,255,0.10);border-radius:12px;background:rgba(255,255,255,0.02);text-align:left">
|
||||
<details>
|
||||
<summary style="cursor:pointer;font-size:12px;font-weight:700;letter-spacing:0.05em;color:#9aa4b2;list-style:none">Disclaimer, Terms & Conditions</summary>
|
||||
<div style="margin-top:12px;font-size:11px;line-height:1.65;color:#8b95a3">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2026 LynkedUp Pro · <a href="lynkeduppro_final.html">See Full Platform →</a> · <a href="https://book.lynkeduppro.com/">Privacy</a> · <a href="https://book.lynkeduppro.com/">Terms</a></p>
|
||||
<p style="margin-top:8px;font-size:12px;opacity:.5">$349/mo flat rate · No credit card required · 30-day money-back guarantee · Built for roofing</p>
|
||||
<p style="margin-top:8px;font-size:11px;opacity:.5">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p>
|
||||
</footer>
|
||||
<div class="mob-sticky">
|
||||
<a href="https://book.lynkeduppro.com/" class="p">Book a demo</a>
|
||||
<a href="lynkeduppro_final.html" class="s">See Full Platform</a>
|
||||
</div>
|
||||
<script>
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add("visible")})},{threshold:.1});
|
||||
document.querySelectorAll(".reveal").forEach(el=>obs.observe(el));
|
||||
document.querySelectorAll("a[href^=\"#\"]").forEach(a=>{a.addEventListener("click",function(e){const t=document.querySelector(this.getAttribute("href"));if(t){e.preventDefault();t.scrollIntoView({behavior:"smooth",block:"start"});}}); });
|
||||
</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,516 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;margin-top:44px}
|
||||
.sol-split > div:last-child{display:flex;align-items:center;justify-content:center;height:100%}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
@media(max-width:860px){nav{padding:14px 20px}.sol-split{grid-template-columns:1fr!important}.pain-grid{grid-template-columns:1fr!important}.sol-stats{grid-template-columns:1fr 1fr}.mob-sticky{display:flex}body{padding-bottom:72px}section{padding:64px 20px}.hero{padding:100px 16px 60px}}
|
||||
@media(max-width:560px){.stat-row{gap:24px}h1{font-size:clamp(44px,13vw,80px)}.cta-form{flex-direction:column}.cta-form input{min-width:100%}}
|
||||
@media(max-width:1280px){nav{padding:16px 32px}section{padding:80px 24px}.cta-strip{padding:72px 24px}.cta-section{padding:80px 24px}}
|
||||
@media(max-width:1024px){nav{padding:14px 24px}section{padding:72px 20px}.sol-split{grid-template-columns:1fr;gap:40px}.pain-grid{grid-template-columns:repeat(2,1fr)}.hero{padding:110px 20px 70px}h1{font-size:clamp(44px,7vw,76px)}.stat-row{gap:28px}.proof-card{padding:30px}}
|
||||
@media(max-width:768px){nav{padding:12px 16px}.nav-cta{padding:8px 16px;font-size:13px}section{padding:56px 18px}.cta-strip{padding:56px 18px}.cta-section{padding:56px 18px}.hero{padding:96px 16px 56px;min-height:auto}h1{font-size:clamp(40px,9vw,64px)}.s-title{font-size:clamp(30px,6vw,48px)!important}.stat-row{gap:20px;margin-top:44px}.stat+.stat::before{display:none}.stat-num{font-size:32px}.proof-card{padding:24px;margin-top:32px}.proof-quote{font-size:15px}.proof-result{position:static;display:inline-block;margin-bottom:14px}.cta-section h2{font-size:clamp(30px,6vw,46px)}.cta-strip h2{font-size:clamp(28px,6vw,46px)}.smet{min-width:100px;padding:12px 14px}.smet-v{font-size:24px}}
|
||||
@media(max-width:480px){body{font-size:15px}nav{padding:10px 14px}.logo-text{font-size:16px}.nav-cta{padding:7px 14px;font-size:12px}section{padding:48px 16px}.cta-strip{padding:48px 16px}.cta-section{padding:48px 16px}.hero{padding:88px 14px 48px}h1{font-size:clamp(36px,11vw,56px);max-width:100%}.hero-sub{font-size:15px}.s-title{font-size:clamp(26px,7vw,42px)!important}.s-sub{font-size:15px}.stat-row{gap:18px;margin-top:36px}.stat-num{font-size:28px}.proof-card{padding:20px}.proof-quote{font-size:14.5px;line-height:1.7}.cta-section h2{font-size:clamp(26px,8vw,40px)}.cta-strip h2{font-size:clamp(26px,8vw,40px)}.btn-primary,.btn-ghost{padding:12px 22px;font-size:15px}.pain-grid{margin-top:32px}.p-item{padding:22px 18px}.smet-row{gap:8px}.smet{min-width:calc(50% - 4px);padding:10px 12px}.mob-sticky{padding:10px 12px;gap:8px}.mob-sticky a{padding:10px;font-size:13px}.cta-micro{flex-direction:column;gap:6px}.strip-trust{flex-direction:column;gap:8px}.micro-row{gap:10px}.hero-actions{flex-direction:column;width:100%}.hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}.strip-btns{flex-direction:column;width:100%}.strip-btns .btn-primary,.strip-btns .btn-ghost{width:100%;text-align:center}.cta-form .btn-primary{width:100%;text-align:center}}
|
||||
@media(max-width:380px){h1{font-size:clamp(30px,12vw,48px)}.s-title{font-size:clamp(24px,8vw,38px)!important}.stat-num{font-size:24px}.sol-stats{grid-template-columns:1fr}.smet{min-width:100%}}
|
||||
/* ── bg helpers (proven v3) ── */
|
||||
.bg-img{position:absolute!important;inset:0!important;z-index:0!important;background-size:cover!important;background-position:center!important;pointer-events:none}
|
||||
.bg-ov{position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none}
|
||||
.has-bg{position:relative!important;overflow:hidden!important}
|
||||
.has-bg>.container,.has-bg>.hero-bg,.has-bg>.eyebrow,
|
||||
.has-bg>h1,.has-bg>.hero-sub,.has-bg>.hero-actions,
|
||||
.has-bg>.micro-row,.has-bg>.stat-row,.has-bg>.wrap{position:relative!important;z-index:2!important}
|
||||
/* ── CTA strip ── */
|
||||
.cta-strip{padding:84px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-strip>.wrap{position:relative;z-index:2;max-width:700px;margin:0 auto}
|
||||
.strip-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 16px;border-radius:100px;margin-bottom:22px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
|
||||
.strip-tdot{width:6px;height:6px;border-radius:50%;display:inline-block;animation:blink 2s ease infinite}
|
||||
.cta-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,5vw,60px);font-weight:900;line-height:.97;letter-spacing:-.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
|
||||
.cta-strip p{font-size:16px;color:var(--muted);line-height:1.72;max-width:520px;margin:0 auto 28px}
|
||||
.strip-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.strip-trust{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap}
|
||||
.strip-trust span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.strip-trust b{color:var(--green)}
|
||||
.smet-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
|
||||
.smet{background:var(--card);border-radius:12px;padding:14px 20px;text-align:center;min-width:118px}
|
||||
.smet-v{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;line-height:1}
|
||||
.smet-l{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px;line-height:1.4}
|
||||
/* ── bigger s-title ── */
|
||||
.s-title{font-size:clamp(36px,5vw,62px)!important;line-height:.97!important}
|
||||
|
||||
</style>
|
||||
<title>LynkedUp Pro - Replace 5 Roofing Tools With One $349/mo Platform</title>
|
||||
<meta name="description" content="Replace EagleView, JobNimbus, SalesRabbit, and more. One flat $349/mo. No per-user fees. No per-report charges. All 6 core systems built for roofing."/>
|
||||
</head><body>
|
||||
<nav>
|
||||
<a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||||
<a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a>
|
||||
</nav>
|
||||
<section class="hero has-bg" id="home">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1800&q=80');filter:brightness(.11) saturate(.4)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(5,8,15,.45) 0%,rgba(5,8,15,.8) 55%,rgba(5,8,15,1) 100%)"></div>
|
||||
<div class="hero-bg"><div class="hero-grid"></div><div class="hero-glow" style="background:radial-gradient(ellipse,rgba(0,229,160,.08),transparent 65%)"></div></div>
|
||||
<div class="eyebrow"><span class="dot" style="background:var(--green)"></span> All-In-One Platform · Flat $349/mo · 6 Core Systems</div>
|
||||
<h1>Count Your<br><span style="color:var(--red)">Subscriptions.</span><br><span style="color:var(--green)">Now Cut Them.</span></h1>
|
||||
<p class="hero-sub">EagleView. JobNimbus. SalesRabbit. A billing tool. A proposal tool. <strong>None of them talk to each other.</strong> LynkedUp Pro replaces all of them for $349/mo flat, and they all work together. It's your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Book a demo</a>
|
||||
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro" style="color:var(--muted)"><span style="color:var(--orange)">4.9★</span> · 248 reviews</span>
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro"><span>✅</span> 6 core systems, one login</span>
|
||||
<span class="micro"><span>✅</span> No per-user fees</span>
|
||||
<span class="micro"><span>✅</span> No per-report charges</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat"><div class="stat-num" style="color:var(--green)">$349</div><div class="stat-label">Flat rate - everything included</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--accent)">6</div><div class="stat-label">Core systems in one platform</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--orange)">$800+</div><div class="stat-label">Avg monthly savings vs. stack</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:#fff">1</div><div class="stat-label">Login. One source of truth.</div></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pain-section has-bg reveal" id="problem">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(11,18,32,.98) 0%,rgba(11,18,32,.93) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--red)">The Real Cost</div>
|
||||
<h2 class="s-title">$1,300 a Month.<br>5 Logins. Zero<br><span style="color:var(--red)">Working Together.</span></h2>
|
||||
<p class="s-sub">You're not just overpaying. You're also wasting hours every week copying data between tools that were never designed to work together.</p>
|
||||
<div style="background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;margin-top:40px">
|
||||
<div style="font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px">What most Texas roofing crews pay right now</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px">
|
||||
<div style="background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.15);border-radius:10px;padding:16px;text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--red)">$700+</div><div style="font-size:12px;color:var(--muted);margin-top:4px">EagleView reports/mo</div></div>
|
||||
<div style="background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.15);border-radius:10px;padding:16px;text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--red)">$300+</div><div style="font-size:12px;color:var(--muted);margin-top:4px">JobNimbus or AccuLynx</div></div>
|
||||
<div style="background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.15);border-radius:10px;padding:16px;text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--red)">$200+</div><div style="font-size:12px;color:var(--muted);margin-top:4px">SalesRabbit canvassing</div></div>
|
||||
<div style="background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.15);border-radius:10px;padding:16px;text-align:center"><div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--red)">$100+</div><div style="font-size:12px;color:var(--muted);margin-top:4px">Billing + proposal tools</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px">
|
||||
<div><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:var(--red)">$1,300+</div><div style="font-size:13px;color:var(--muted)">Total monthly tool stack</div></div>
|
||||
<div style="font-size:24px;color:var(--muted)">→</div>
|
||||
<div style="text-align:right"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:var(--green)">$349</div><div style="font-size:13px;color:var(--muted)">LynkedUp Pro - all-in</div></div>
|
||||
<div style="text-align:right"><div style="font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:var(--orange)">$951</div><div style="font-size:13px;color:var(--muted)">Saved every month</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pain-grid" style="margin-top:16px">
|
||||
<div class="p-item"><div class="p-icon">🔀</div><h3>Data Lives in 5 Places</h3><p>Lead is in JobNimbus. Measurement is in EagleView. Route is in SalesRabbit. Invoice is in QuickBooks. Nothing syncs. Your team copies and pastes all day.</p><span class="p-cost">Cost: 2+ hours/day wasted</span></div>
|
||||
<div class="p-item"><div class="p-icon">💳</div><h3>Hidden Fees Everywhere</h3><p>EagleView per report. JobNimbus per user. SalesRabbit per user. AccuLynx add-ons. Your "software budget" doubles every time you add a rep.</p><span class="p-cost">Cost: Unpredictable monthly bill</span></div>
|
||||
<div class="p-item"><div class="p-icon">🧩</div><h3>None of It Was Built for Roofing</h3><p>JobNimbus serves landscapers, plumbers, HVAC. SalesRabbit serves solar and insurance. You're adapting general tools to a specialized trade. That's the real problem.</p><span class="p-cost">Cost: Constant workarounds</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══ CTA STRIP ══ -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1800&q=80');filter:brightness(.09) saturate(.38)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(2,10,5,.97) 100%)"></div>
|
||||
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:700px;height:360px;border-radius:50%;background:radial-gradient(ellipse,rgba(239,68,68,.06),transparent 70%);z-index:1;pointer-events:none"></div>
|
||||
<div class="wrap">
|
||||
<div class="strip-tag" style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);color:var(--red)">
|
||||
<span class="strip-tdot" style="background:var(--red)"></span>
|
||||
Your tool stack bill arrives again next month
|
||||
</div>
|
||||
<h2>$951 Back<br>in Your Pocket.<br><span style="color:var(--green)">Every. Single. Month.</span></h2>
|
||||
<p>The math is simple. You're paying over $1,300/mo for tools that were never designed to work together. LynkedUp Pro does all of it for $349 flat, and the data flows between every module automatically.</p>
|
||||
<div class="smet-row"><div class="smet" style="border:1px solid rgba(239,68,68,.22)"><div class="smet-v" style="color:var(--red)">$1,300+</div><div class="smet-l">Current tool stack /mo</div></div><div class="smet" style="border:1px solid rgba(0,229,160,.22)"><div class="smet-v" style="color:var(--green)">$349</div><div class="smet-l">LynkedUp Pro flat rate</div></div><div class="smet" style="border:1px solid rgba(245,158,11,.22)"><div class="smet-v" style="color:var(--orange)">$951</div><div class="smet-l">Monthly savings</div></div><div class="smet" style="border:1px solid rgba(0,200,255,.22)"><div class="smet-v" style="color:var(--accent)">$11.4K</div><div class="smet-l">Annual back in pocket</div></div></div>
|
||||
<div class="strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Show Me My Savings →</a>
|
||||
|
||||
</div>
|
||||
<div class="strip-trust">
|
||||
<span><b>✅</b> No credit card</span>
|
||||
<span><b>✅</b> Free 30-min demo</span>
|
||||
<span><b>✅</b> 30-day guarantee</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solution-section has-bg reveal" id="solution">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(90deg,rgba(5,8,15,1) 42%,rgba(5,8,15,.75) 100%)"></div>
|
||||
<div class="container" style="position:relative;z-index:2">
|
||||
<div class="s-label" style="color:var(--green)">The Fix</div>
|
||||
<h2 class="s-title">Cancel 4 Bills.<br><span style="color:var(--green)">Keep One.</span><br>Run It All Better.</h2>
|
||||
<div class="sol-split">
|
||||
<div>
|
||||
<p class="s-sub">Every tool your roofing business needs - built to work together from day one. One login, one source of truth, one flat price that doesn't change when you hire your next rep.</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px">
|
||||
<div style="background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:16px"><div style="font-size:18px;margin-bottom:8px">👥</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;text-transform:uppercase">CRM</div><div style="font-size:12px;color:var(--muted)">Pipeline, leads, AI insights</div></div>
|
||||
<div style="background:var(--card);border:1px solid rgba(245,158,11,.15);border-radius:10px;padding:16px"><div style="font-size:18px;margin-bottom:8px">🎨</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;text-transform:uppercase">Canvas</div><div style="font-size:12px;color:var(--muted)">Estimates, proposals, e-sign</div></div>
|
||||
<div style="background:var(--card);border:1px solid rgba(0,229,160,.15);border-radius:10px;padding:16px"><div style="font-size:18px;margin-bottom:8px">📐</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;text-transform:uppercase">Measurements</div><div style="font-size:12px;color:var(--muted)">AI + LiDAR, $0/report</div></div>
|
||||
<div style="background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:16px"><div style="font-size:18px;margin-bottom:8px">⭐</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;text-transform:uppercase">Client Experience</div><div style="font-size:12px;color:var(--muted)">Portals, reviews, follow-ups</div></div>
|
||||
<div style="background:var(--card);border:1px solid rgba(245,158,11,.15);border-radius:10px;padding:16px"><div style="font-size:18px;margin-bottom:8px">💳</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;text-transform:uppercase">Billing</div><div style="font-size:12px;color:var(--muted)">Invoices, payments, cash flow</div></div>
|
||||
<div style="background:var(--card);border:1px solid rgba(0,229,160,.15);border-radius:10px;padding:16px"><div style="font-size:18px;margin-bottom:8px">🧮</div><div style="font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;text-transform:uppercase">Estimating</div><div style="font-size:12px;color:var(--muted)">Auto pricing, templates</div></div>
|
||||
</div>
|
||||
<div style="margin-top:16px;background:rgba(0,229,160,.04);border:1px solid rgba(0,229,160,.18);border-radius:10px;padding:16px;font-size:14px;color:var(--muted);line-height:1.65">
|
||||
<strong style="color:var(--green)">Plus hail alerts, smart calendar, adjuster reports, LiDAR scanning, and GPS rep tracking</strong>. All included. No add-ons. No surprises. No per-user math.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-card">
|
||||
<img src="/page/assets/overview13 (1).png" alt="LynkedUp Pro Overview Dashboard" style="display:block;width:100%;height:auto" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="proof-section has-bg reveal">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=80');filter:brightness(.09) saturate(.35)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(180deg,rgba(11,18,32,1) 0%,rgba(11,18,32,.88) 60%,rgba(11,18,32,1) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--green);text-align:center">Real Result</div>
|
||||
<h2 class="s-title" style="text-align:center">He Cut Three Tools<br>on a Tuesday. <span style="color:var(--green)">Saved<br>$2,100 by Friday.</span></h2>
|
||||
<div class="proof-card">
|
||||
<div class="proof-result"><div class="pr-num">$2.1K</div><div class="pr-label">Saved/Month</div></div>
|
||||
<div class="proof-stars">★★★★★</div>
|
||||
<p class="proof-quote">"Cut EagleView, JobNimbus, and SalesRabbit in one move. LynkedUp Pro replaced all three for less, and the data actually flows between them. My team doesn't copy and paste anything anymore. It's a completely different way of running the business."</p>
|
||||
<div class="proof-author">
|
||||
<div class="proof-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">MT</div>
|
||||
<div><div class="proof-name">Marcus Thompson</div><div class="proof-role">Operations Manager · Houston, TX</div></div>
|
||||
</div>
|
||||
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="roofing-offer-section" id="pricing">
|
||||
<div class="container">
|
||||
|
||||
<!-- TOP HEADING -->
|
||||
<div class="text-center roofing-heading mb-5">
|
||||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="row g-4 align-items-stretch">
|
||||
|
||||
<!-- LEFT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="lifetime-card h-100">
|
||||
<div class="popular-tag">MOST POPULAR</div>
|
||||
<h3>Founders Lifetime Access</h3>
|
||||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||||
<div class="price-box">
|
||||
<h2>$2000</h2>
|
||||
<span>PAY ONCE • USE FOREVER</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li>Complete Roofing CRM</li>
|
||||
<li>Lead Management System</li>
|
||||
<li>Canvassing & Field Tracking</li>
|
||||
<li>Insurance Workflow</li>
|
||||
<li>Proposal & Inspection Tools</li>
|
||||
<li>Team Management Dashboard</li>
|
||||
<li>Unlimited Projects</li>
|
||||
<li>Future Feature Updates</li>
|
||||
<li>Priority Support</li>
|
||||
</ul>
|
||||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="roofing-info-card h-100">
|
||||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||||
<div class="info-box">
|
||||
<h5>More Revenue Visibility</h5>
|
||||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Less Operational Chaos</h5>
|
||||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Built for Roofing Teams</h5>
|
||||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||||
<div class="terms-wrapper mt-4">
|
||||
<details class="custom-accordion-item">
|
||||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||||
<div class="accordion-body">
|
||||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="roofing-cta-box mt-5 text-center">
|
||||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||||
<p>Join the next generation of roofing companies scaling with automation,
|
||||
field intelligence, and operational visibility.</p>
|
||||
<div class="cta-btn-group">
|
||||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||||
.roofing-offer-section{
|
||||
padding:64px 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||||
#1a120d;
|
||||
overflow:hidden; position:relative;
|
||||
}
|
||||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||||
.roofing-offer-section .h-100{height:100%;}
|
||||
.roofing-offer-section .text-center{text-align:center;}
|
||||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||||
@media (max-width:991px){
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||||
}
|
||||
@media (max-width:767px){
|
||||
.roofing-offer-section{padding:48px 0;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||||
.roofing-offer-section .lifetime-card,
|
||||
.roofing-offer-section .roofing-info-card,
|
||||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||||
}
|
||||
</style>
|
||||
<section class="cta-section has-bg" id="cta">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=80');filter:brightness(.08) saturate(.3)"></div>
|
||||
<div class="bg-ov" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(245,158,11,.04))"></div>
|
||||
<div class="container" style="position:relative;z-index:1">
|
||||
<div style="display:inline-block;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);border-radius:8px;padding:8px 18px;margin-bottom:24px;font-size:13px;color:var(--green);font-weight:600">💰 Most crews save $800-$1,100/mo by switching to LynkedUp Pro</div>
|
||||
<h2>Your Stack Bill<br>Is Due Next Month.<br><em>Make It the Last One.</em></h2>
|
||||
<p>Cancel your EagleView, JobNimbus, and SalesRabbit subscriptions. Book a 30-minute demo and we'll show you exactly how.</p>
|
||||
<div class="cta-form">
|
||||
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary" onclick="event.preventDefault()">Book a demo</a>
|
||||
</div>
|
||||
<div class="cta-micro"><span>✅ No credit card</span><span>✅ 30-day money-back guarantee</span><span>✅ Free onboarding + data migration help</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>© 2026 LynkedUp Pro · <a href="lynkeduppro_final.html">See Full Platform →</a> · <a href="https://book.lynkeduppro.com/">Privacy</a> · <a href="https://book.lynkeduppro.com/">Terms</a></p>
|
||||
<p style="margin-top:8px;font-size:12px;opacity:.5">$349/mo flat rate · No credit card required · 30-day money-back guarantee · Built for roofing</p>
|
||||
<p style="margin-top:8px;font-size:11px;opacity:.5">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p>
|
||||
</footer>
|
||||
<div class="mob-sticky">
|
||||
<a href="https://book.lynkeduppro.com/" class="p">Book a demo</a>
|
||||
<a href="lynkeduppro_final.html" class="s">See Full Platform</a>
|
||||
</div>
|
||||
<script>
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add("visible")})},{threshold:.1});
|
||||
document.querySelectorAll(".reveal").forEach(el=>obs.observe(el));
|
||||
document.querySelectorAll("a[href^=\"#\"]").forEach(a=>{a.addEventListener("click",function(e){const t=document.querySelector(this.getAttribute("href"));if(t){e.preventDefault();t.scrollIntoView({behavior:"smooth",block:"start"});}}); });
|
||||
</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||||
<script src="/square-checkout.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+2116
File diff suppressed because it is too large
Load Diff
+1620
File diff suppressed because it is too large
Load Diff
+1346
File diff suppressed because it is too large
Load Diff
+1125
File diff suppressed because it is too large
Load Diff
+1451
File diff suppressed because it is too large
Load Diff
+1102
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,481 @@
|
||||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<title>LynkedUp Pro - Know Your Conversion Rate. Know Who's Performing.</title>
|
||||
<meta name="description" content="Track verified leads, unverified leads, conversion rate, agent revenue volume, and deal count. Know who's performing and where every lead stands."/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
.shot {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border);
|
||||
object-fit: cover;
|
||||
box-shadow: 0 36px 72px rgba(0, 0, 0, .5);
|
||||
}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:44px}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
@media(max-width:1280px){section{padding:80px 24px}nav{padding:16px 32px}}
|
||||
@media(max-width:1024px){section{padding:72px 24px}.pain-grid{grid-template-columns:repeat(2,1fr)}.sol-split{grid-template-columns:1fr;gap:40px}h1{font-size:clamp(42px,7vw,72px)}.s-title{font-size:clamp(30px,4.5vw,48px)}.cta-section h2{font-size:clamp(32px,5vw,52px)}}
|
||||
@media(max-width:860px){nav{padding:14px 20px}.sol-split{grid-template-columns:1fr!important;gap:36px}.pain-grid{grid-template-columns:1fr!important}.sol-stats{grid-template-columns:1fr 1fr}.mob-sticky{display:flex}body{padding-bottom:72px}section{padding:64px 20px}.hero{padding:100px 16px 60px;min-height:auto}.hero-actions{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto}.hero-actions .btn-primary,.hero-actions .btn-ghost{text-align:center;width:100%}.stat-row{gap:28px}.stat-num{font-size:32px}.cta-section{padding:64px 20px}.proof-card{padding:28px 22px}.proof-result{position:static;display:inline-block;margin:0 0 14px}}
|
||||
@media(max-width:560px){.stat-row{gap:20px;flex-direction:column}.stat+.stat::before{display:none}h1{font-size:clamp(36px,11vw,64px)}.s-title{font-size:clamp(26px,7.5vw,40px)}.cta-section h2{font-size:clamp(28px,8vw,44px)}.cta-form{flex-direction:column}.cta-form input{min-width:100%;width:100%}.cta-form .btn-primary{width:100%;text-align:center}.sol-stats{grid-template-columns:1fr}.hero-sub{font-size:15px}.micro-row{gap:10px}section{padding:56px 16px}.hero{padding:96px 16px 48px}.eyebrow{font-size:11px;padding:5px 12px}.proof-quote{font-size:15px}.cta-section p{font-size:15px}}
|
||||
@media(max-width:380px){nav{padding:12px 14px}.nav-cta{padding:8px 14px;font-size:13px}.logo-text{font-size:16px}h1{font-size:clamp(32px,11vw,48px)}.s-title{font-size:24px}.btn-primary,.btn-ghost{padding:12px 22px;font-size:14px}.cta-section h2{font-size:28px}.proof-card{padding:22px 18px}}</style></head><body>
|
||||
<nav><a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a><a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a></nav>
|
||||
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-bg"><div class="hero-grid"></div><div class="hero-glow" style="background:radial-gradient(ellipse,rgba(0,200,255,.09),transparent 65%)"></div></div>
|
||||
<div class="eyebrow"><span class="dot"></span> Pipeline Metrics · Conversion Tracking · Agent Performance</div>
|
||||
<h1>You Don't Know<br>Your Conversion Rate.<br><span style="color:var(--accent)">That's the Problem.</span></h1>
|
||||
<p class="hero-sub"><strong>How many leads are verified? How many converted?</strong> Which rep closes and which one stalls? Without metrics you're managing on vibes, and losing revenue you don't even know you're losing. LynkedUp Pro is your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">See Pipeline Metrics →</a>
|
||||
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro" style="color:var(--muted)">4.9★ · 248 reviews</span>
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro"><span>✅</span> Verified vs unverified leads</span>
|
||||
<span class="micro"><span>✅</span> Live conversion rate</span>
|
||||
<span class="micro"><span>✅</span> Per-agent revenue tracking</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat"><div class="stat-num" style="color:var(--accent)">4</div><div class="stat-label">Lead status categories</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--green)">Live</div><div class="stat-label">Conversion rate dashboard</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--orange)">Per</div><div class="stat-label">Agent revenue & deal count</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:#fff">Role</div><div class="stat-label">Based access control</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pain-section reveal" id="problem">
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--red)">The Problem</div>
|
||||
<h2 class="s-title">Your Pipeline Is Full.<br><span style="color:var(--red)">But You're Still Missing Numbers.</span></h2>
|
||||
<p class="s-sub">A big pipeline looks great. But if you don't know your conversion rate, you can't fix it. If you don't track per-agent volume, your best rep is carrying your weakest one.</p>
|
||||
<div class="pain-grid">
|
||||
<div class="p-item"><div class="p-icon">❓</div><h3>No Lead Verification</h3><p>Is this a real homeowner ready to buy, or a tire-kicker your rep spent 3 hours on? Unverified leads pollute your pipeline and inflate your numbers.</p><span class="p-cost">Cost: Wasted rep hours daily</span></div>
|
||||
<div class="p-item"><div class="p-icon">📉</div><h3>Conversion Rate Invisible</h3><p>You know how many leads came in. You know how many jobs closed. But no one has calculated the rate in between, and that's where all the coaching opportunity lives.</p><span class="p-cost">Cost: Uncoached underperformers</span></div>
|
||||
<div class="p-item"><div class="p-icon">👤</div><h3>No Per-Agent Visibility</h3><p>One rep closes 70% of their deals. Another closes 20%. Both look the same on the surface because nobody's tracking deal count and revenue volume per person.</p><span class="p-cost">Cost: Wrong reps in wrong territories</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CTA STRIP 1 ===== -->
|
||||
<section style="padding:72px 24px;background:linear-gradient(135deg,#080e1a 0%,#0a1220 50%,#06090f 100%);border-top:1px solid rgba(239,68,68,.12);border-bottom:1px solid rgba(239,68,68,.12);text-align:center;position:relative;overflow:hidden">
|
||||
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(239,68,68,.05),transparent 70%);pointer-events:none"></div>
|
||||
<div style="max-width:600px;margin:0 auto;position:relative;z-index:1">
|
||||
<div style="display:inline-flex;align-items:center;gap:7px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:100px;padding:5px 14px;margin-bottom:20px">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;animation:blink 2s ease infinite"></span>
|
||||
<span style="font-size:11px;font-weight:600;color:var(--red);letter-spacing:1px;text-transform:uppercase">You're Bleeding Revenue Right Now</span>
|
||||
</div>
|
||||
<h2 style="font-family:'Barlow Condensed',sans-serif;font-size:clamp(32px,4.5vw,52px);font-weight:900;color:#fff;line-height:1.05;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:14px">You Can't Fix<br><span style="color:var(--red)">What You Can't See.</span></h2>
|
||||
<p style="font-size:16px;color:var(--muted);line-height:1.7;max-width:460px;margin:0 auto 28px">Right now, one of your reps is closing 20% while another closes 70%. Same leads. Same territory. You just don't know who. <strong style="color:var(--text)">Let's fix that in 30 minutes.</strong></p>
|
||||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
|
||||
|
||||
<a href="#solution" class="btn-ghost">See How It Works</a>
|
||||
</div>
|
||||
<div style="display:flex;gap:20px;justify-content:center;margin-top:16px;flex-wrap:wrap">
|
||||
<span style="font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px"><span style="color:var(--green)">✅</span> Free 30-min demo</span>
|
||||
<span style="font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px"><span style="color:var(--green)">✅</span> No credit card required</span>
|
||||
<span style="font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px"><span style="color:var(--green)">✅</span> Live pipeline data</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solution-section reveal visible" id="solution">
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--accent)">The Fix</div>
|
||||
<h2 class="s-title">Every Metric<br>That <span style="color:var(--accent)">Actually</span><br>Matters.</h2>
|
||||
<div class="sol-split">
|
||||
<div>
|
||||
<p class="s-sub">LynkedUp Pro tracks every lead through a verified status pipeline and gives every manager and owner live conversion data, per-agent breakdowns, and deal volume, all in one dashboard.</p>
|
||||
<ul class="sol-points">
|
||||
<li><span class="ico">✅</span><span><strong>4 lead status categories</strong>: Verified, Unverified, Converted, and Lost. Every lead correctly categorized from first contact.</span></li>
|
||||
<li><span class="ico">📊</span><span><strong>Live conversion rate</strong>: per team, per rep, per territory. Updated in real time as leads move through the pipeline.</span></li>
|
||||
<li><span class="ico">💰</span><span><strong>Per-agent revenue volume</strong>: total revenue attributed to each rep, plus deal count, close rate, and average deal size.</span></li>
|
||||
<li><span class="ico">🔐</span><span><strong>Role-based access</strong>: reps see their own numbers, managers see their team, admins assign leads, owners see everything. No data leakage.</span></li>
|
||||
</ul>
|
||||
<div class="sol-stats">
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--green)">Real-Time</div><div class="sol-stat-label">Conversion rate tracking</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--accent)">4</div><div class="sol-stat-label">Lead verification statuses</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--orange)">Per Rep</div><div class="sol-stat-label">Revenue & deal count</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:#fff">Admin</div><div class="sol-stat-label">Lead assignment controls</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PIPELINE METRICS DASHBOARD SCREENSHOT -->
|
||||
<img src="/page/assets/dashboard.png" alt="LynkedUp Pro pipeline metrics and agent performance dashboard" class="shot" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="roofing-offer-section" id="pricing">
|
||||
<div class="container">
|
||||
|
||||
<!-- TOP HEADING -->
|
||||
<div class="text-center roofing-heading mb-5">
|
||||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="row g-4 align-items-stretch">
|
||||
|
||||
<!-- LEFT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="lifetime-card h-100">
|
||||
<div class="popular-tag">MOST POPULAR</div>
|
||||
<h3>Founders Lifetime Access</h3>
|
||||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||||
<div class="price-box">
|
||||
<h2>$2000</h2>
|
||||
<span>PAY ONCE • USE FOREVER</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li>Complete Roofing CRM</li>
|
||||
<li>Lead Management System</li>
|
||||
<li>Canvassing & Field Tracking</li>
|
||||
<li>Insurance Workflow</li>
|
||||
<li>Proposal & Inspection Tools</li>
|
||||
<li>Team Management Dashboard</li>
|
||||
<li>Unlimited Projects</li>
|
||||
<li>Future Feature Updates</li>
|
||||
<li>Priority Support</li>
|
||||
</ul>
|
||||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="roofing-info-card h-100">
|
||||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||||
<div class="info-box">
|
||||
<h5>More Revenue Visibility</h5>
|
||||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Less Operational Chaos</h5>
|
||||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Built for Roofing Teams</h5>
|
||||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||||
<div class="terms-wrapper mt-4">
|
||||
<details class="custom-accordion-item">
|
||||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||||
<div class="accordion-body">
|
||||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="roofing-cta-box mt-5 text-center">
|
||||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||||
<p>Join the next generation of roofing companies scaling with automation,
|
||||
field intelligence, and operational visibility.</p>
|
||||
<div class="cta-btn-group">
|
||||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||||
.roofing-offer-section{
|
||||
padding:64px 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||||
#1a120d;
|
||||
overflow:hidden; position:relative;
|
||||
}
|
||||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||||
.roofing-offer-section .h-100{height:100%;}
|
||||
.roofing-offer-section .text-center{text-align:center;}
|
||||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||||
@media (max-width:991px){
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||||
}
|
||||
@media (max-width:767px){
|
||||
.roofing-offer-section{padding:48px 0;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||||
.roofing-offer-section .lifetime-card,
|
||||
.roofing-offer-section .roofing-info-card,
|
||||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- ===== CTA STRIP 2 ===== -->
|
||||
<section style="padding:80px 24px;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;position:relative;overflow:hidden">
|
||||
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(0,200,255,.05),transparent 70%);pointer-events:none"></div>
|
||||
<div style="max-width:680px;margin:0 auto;position:relative;z-index:1">
|
||||
<div style="display:inline-block;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);border-radius:8px;padding:7px 18px;margin-bottom:22px;font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.3px;text-transform:uppercase">📊 Live for 500+ Roofing Companies</div>
|
||||
<h2 style="font-family:'Barlow Condensed',sans-serif;font-size:clamp(32px,4.5vw,54px);font-weight:900;color:#fff;line-height:1;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:14px">Stop Managing<br>on <span style="color:var(--orange)">Gut Feeling.</span><br><span style="color:var(--accent)">Start With Real Numbers.</span></h2>
|
||||
<p style="font-size:16px;color:var(--muted);line-height:1.7;max-width:480px;margin:0 auto 32px">The dashboard is live in 24 hours. You'll see your conversion rate, your verified vs unverified lead split, and every rep's numbers, before your next morning huddle.</p>
|
||||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px">
|
||||
<div style="background:var(--card);border:1px solid rgba(0,200,255,.18);border-radius:10px;padding:14px 20px;min-width:130px;text-align:center">
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:var(--accent);line-height:1">38.2%</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px">Conversion Rate</div>
|
||||
</div>
|
||||
<div style="background:var(--card);border:1px solid rgba(0,229,160,.18);border-radius:10px;padding:14px 20px;min-width:130px;text-align:center">
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:var(--green);line-height:1">89</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px">Verified Leads</div>
|
||||
</div>
|
||||
<div style="background:var(--card);border:1px solid rgba(245,158,11,.18);border-radius:10px;padding:14px 20px;min-width:130px;text-align:center">
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:var(--orange);line-height:1">$9K</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px">Top Rep Revenue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Get the Dashboard Free →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="proof-section reveal">
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--accent);text-align:center">Real Impact</div>
|
||||
<h2 class="s-title" style="text-align:center">Found the Problem.<br><span style="color:var(--accent)">Fixed the Team. Fast.</span></h2>
|
||||
<div class="proof-card">
|
||||
<div class="proof-result"><div class="pr-num">+43%</div><div class="pr-label">Close Rate</div></div>
|
||||
<div class="proof-stars">★★★★★</div>
|
||||
<p class="proof-quote">"When I saw the agent breakdown for the first time, I realized one rep had an 18% close rate while another had 68%. Same leads, same territory. I moved assignments around and the lower performer jumped to 34% in six weeks. I would never have known without the data."</p>
|
||||
<div class="proof-author">
|
||||
<div class="proof-av" style="background:linear-gradient(135deg,#0ea5e9,#00e5a0)">JR</div>
|
||||
<div><div class="proof-name">Jason Rodriguez</div><div class="proof-role">Owner · Dallas, TX · 14-person crew</div></div>
|
||||
</div>
|
||||
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section" id="cta">
|
||||
<div class="container" style="position:relative;z-index:1">
|
||||
<div style="display:inline-block;background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:8px 18px;margin-bottom:24px;font-size:13px;color:var(--accent);font-weight:600">📊 Know your conversion rate before your next storm season</div>
|
||||
<h2>Know Who's Performing.<br><em>Fix What Isn't.</em></h2>
|
||||
<p>See the full pipeline metrics dashboard, with verified leads, conversion rate, and per-agent revenue, in a free 30-minute demo.</p>
|
||||
<div class="cta-form"><a href="https://book.lynkeduppro.com/" class="btn-primary" onclick="event.preventDefault()">See Metrics Dashboard →</a></div>
|
||||
<div class="cta-micro"><span>✅ No credit card</span><span>✅ 30-day guarantee</span><span>✅ Free onboarding</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer style="padding:32px 24px;border-top:1px solid var(--border);text-align:center"><p style="font-size:13px;color:var(--muted)">© 2026 LynkedUp Pro Full Platform →</p><p style="font-size:11px;color:var(--muted);opacity:.7;margin-top:10px">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p></footer>
|
||||
<div class="mob-sticky"><a href="https://book.lynkeduppro.com/" class="p">Book a demo</a><a href="lynkeduppro_final.html" class="s">See All Features</a></div>
|
||||
<script>const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add('visible')})},{threshold:.1});document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||||
<script src="/square-checkout.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,470 @@
|
||||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<title>LynkedUp Pro - Everything You Need in 60 Seconds</title>
|
||||
<meta name="description" content="Replace EagleView, JobNimbus & SalesRabbit. AI measurements. Hail alerts. Smart calendar. Flat 49/mo. 30-day guarantee."/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:44px}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
@media(max-width:860px){nav{padding:14px 20px}.sol-split{grid-template-columns:1fr!important}.pain-grid{grid-template-columns:1fr!important}.sol-stats{grid-template-columns:1fr 1fr}.mob-sticky{display:flex}body{padding-bottom:72px}section{padding:64px 20px}.hero{padding:100px 16px 60px}}
|
||||
@media(max-width:560px){.stat-row{gap:24px}h1{font-size:clamp(44px,13vw,80px)}.cta-form{flex-direction:column}.cta-form input{min-width:100%}}
|
||||
.quick-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;position:relative;overflow:hidden}
|
||||
.quick-bg{inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent)}
|
||||
.glow-c{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1000px;height:700px;background:radial-gradient(ellipse,rgba(0,200,255,.07),transparent 65%);pointer-events:none}
|
||||
.q-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:28px;letter-spacing:.3px}
|
||||
.q-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 1.5s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
|
||||
.q-h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(52px,9vw,110px);font-weight:900;line-height:.9;letter-spacing:-2px;color:#fff;text-transform:uppercase;max-width:900px}
|
||||
.q-h1 .blue{color:var(--accent)}.q-h1 .orange{color:var(--orange)}
|
||||
.q-sub{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:560px;margin:20px auto 0;line-height:1.6}
|
||||
.q-sub strong{color:#fff}
|
||||
.q-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.q-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:900px;margin:60px auto 0}
|
||||
.q-stat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 16px;text-align:center;transition:border-color .25s}
|
||||
.q-stat:hover{border-color:var(--border2)}
|
||||
.q-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:900;line-height:1;margin-bottom:6px}
|
||||
.q-stat-label{font-size:13px;color:var(--muted);line-height:1.4}
|
||||
.q-strip{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px;margin-top:0}
|
||||
.q-strip-inner{max-width:900px;margin:0 auto;display:flex;gap:0;flex-wrap:wrap}
|
||||
.q-strip-item{flex:1;min-width:160px;padding:0 20px;text-align:center;border-right:1px solid var(--border)}
|
||||
.q-strip-item:last-child{border-right:none}
|
||||
.q-strip-icon{font-size:24px;margin-bottom:6px}
|
||||
.q-strip-title{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:4px}
|
||||
.q-strip-desc{font-size:12px;color:var(--muted);line-height:1.5}
|
||||
.q-vs{background:var(--bg);padding:48px 24px}
|
||||
.q-vs-inner{max-width:860px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
|
||||
.q-vs-col{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
|
||||
.q-vs-col.win{border-color:rgba(0,229,160,.3);background:linear-gradient(160deg,rgba(0,229,160,.04),var(--card))}
|
||||
.q-vs-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
|
||||
.q-vs-items{display:flex;flex-direction:column;gap:10px}
|
||||
.q-vs-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
|
||||
.q-vs-item .ico{font-size:14px;min-width:20px;text-align:center}
|
||||
.q-vs-sep{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--muted);text-align:center}
|
||||
.q-cta{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:72px 24px;text-align:center}
|
||||
.q-price{font-family:'Barlow Condensed',sans-serif;font-size:clamp(60px,8vw,100px);font-weight:900;color:var(--orange);line-height:1;letter-spacing:-2px}
|
||||
.q-price sub{font-size:24px;font-weight:500;color:var(--muted);letter-spacing:0}
|
||||
.q-price-note{font-size:17px;color:var(--muted);margin:10px 0 32px}
|
||||
@media(max-width:680px){.q-stats{grid-template-columns:1fr 1fr}.q-strip-item{min-width:50%;border-bottom:1px solid var(--border);border-right:none;padding:12px 16px}.q-vs-inner{grid-template-columns:1fr}.q-vs-sep{display:none}}
|
||||
@media(max-width:1280px){section{padding:80px 24px}nav{padding:16px 32px}.q-cta{padding:64px 24px}.q-vs{padding:40px 24px}}
|
||||
@media(max-width:1024px){section{padding:72px 24px}.q-stats{grid-template-columns:repeat(2,1fr);max-width:600px}.q-strip-inner{flex-wrap:wrap}.q-strip-item{flex:1 1 33.33%;min-width:33.33%;border-bottom:1px solid var(--border)}.q-h1{font-size:clamp(46px,8vw,84px)}.q-vs-inner{gap:18px}}
|
||||
@media(max-width:860px){nav{padding:14px 20px}.sol-split{grid-template-columns:1fr!important;gap:36px}.pain-grid{grid-template-columns:1fr!important}.sol-stats{grid-template-columns:1fr 1fr}.mob-sticky{display:flex}body{padding-bottom:72px}section{padding:64px 20px}.hero{padding:100px 16px 60px}.quick-hero{padding:96px 20px 56px;min-height:auto}.q-actions{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto}.q-actions .btn-primary,.q-actions .btn-ghost{text-align:center;width:100%}.q-h1{font-size:clamp(40px,9vw,72px)}.q-strip{padding:20px 16px}.q-strip-inner{gap:0}.q-vs{padding:48px 20px}.q-vs-col{padding:20px}.q-cta{padding:56px 20px}}
|
||||
@media(max-width:560px){.stat-row{gap:24px}h1{font-size:clamp(44px,13vw,80px)}.cta-form{flex-direction:column}.cta-form input{min-width:100%}.q-h1{font-size:clamp(36px,11vw,60px);letter-spacing:-1px}.q-sub{font-size:15px}.q-stats{grid-template-columns:1fr 1fr;gap:10px}.q-stat{padding:18px 12px}.q-stat-num{font-size:32px}.q-strip-item{flex:1 1 50%;min-width:50%}.q-vs-col{padding:18px}.q-vs-item{font-size:13px}.q-price{font-size:clamp(48px,14vw,72px)}.q-price-note{font-size:15px}section{padding:56px 16px}.eyebrow,.q-eyebrow{font-size:11px;padding:5px 12px}}
|
||||
@media(max-width:380px){nav{padding:12px 14px}.nav-cta{padding:8px 14px;font-size:13px}.logo-text{font-size:16px}.q-h1{font-size:clamp(32px,11vw,52px)}.q-stats{grid-template-columns:1fr}.q-strip-item{flex:1 1 100%;min-width:100%}.btn-primary,.btn-ghost{padding:12px 22px;font-size:14px}.q-actions .btn-primary{font-size:16px!important;padding:14px 28px!important}}
|
||||
</style></head><body>
|
||||
<nav><a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a><a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a></nav>
|
||||
|
||||
<section class="quick-hero" id="home">
|
||||
<div class="quick-bg"></div><div class="glow-c" aria-hidden="true"></div>
|
||||
<div class="q-eyebrow"><span class="q-dot"></span> Built for Roofing · Flat 49/mo · 30-Day Guarantee</div>
|
||||
<h1 class="q-h1">One Tool.<br><span class="blue">Every Job.</span><br><span class="orange">Done.</span></h1>
|
||||
<p class="q-sub">Replace <strong>EagleView, JobNimbus & SalesRabbit</strong> with one AI-powered roofing platform. Hail alerts. AI measurements. Smart calendar. All in. It's your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="q-actions">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary" style="font-size:18px;padding:16px 40px">Book a demo →</a>
|
||||
<a href="lynkeduppro_final.html" class="btn-ghost" style="font-size:16px;padding:16px 28px">See All Features</a>
|
||||
</div>
|
||||
<div style="font-size:14px;color:var(--muted);margin-top:16px">4.9★ · 248 reviews</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;flex-wrap:wrap">
|
||||
<span style="font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px"><span style="color:var(--green)">✅</span>No credit card</span>
|
||||
<span style="font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px"><span style="color:var(--green)">✅</span>30-day guarantee</span>
|
||||
<span style="font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px"><span style="color:var(--green)">✅</span>Cancel anytime</span>
|
||||
</div>
|
||||
<div class="q-stats">
|
||||
<div class="q-stat"><div class="q-stat-num" style="color:var(--orange)">$0</div><div class="q-stat-label">Per-report fee. Ever.</div></div>
|
||||
<div class="q-stat"><div class="q-stat-num" style="color:var(--accent)">17 min</div><div class="q-stat-label">Storm alert to reps on doors</div></div>
|
||||
<div class="q-stat"><div class="q-stat-num" style="color:var(--green)">+43%</div><div class="q-stat-label">Close rate lift (beta crews)</div></div>
|
||||
<div class="q-stat"><div class="q-stat-num" style="color:#fff">49</div><div class="q-stat-label">All 6 systems. Flat rate.</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-strip">
|
||||
<div class="q-strip-inner">
|
||||
<div class="q-strip-item"><div class="q-strip-icon">📅</div><div class="q-strip-title">Smart Calendar</div><div class="q-strip-desc">AI scheduling + iOS/Google/Calendly sync</div></div>
|
||||
<div class="q-strip-item"><div class="q-strip-icon">📐</div><div class="q-strip-title">AI Measurements</div><div class="q-strip-desc">LiDAR scan in minutes. $0 per report.</div></div>
|
||||
<div class="q-strip-item"><div class="q-strip-icon">⚡</div><div class="q-strip-title">Hail Alerts</div><div class="q-strip-desc">Sub-hour storm alerts + address scoring</div></div>
|
||||
<div class="q-strip-item"><div class="q-strip-icon">📋</div><div class="q-strip-title">Adjuster Reports</div><div class="q-strip-desc">1-click. Insurance-accepted. Auto-generated.</div></div>
|
||||
<div class="q-strip-item"><div class="q-strip-icon">📊</div><div class="q-strip-title">Pipeline CRM</div><div class="q-strip-desc">Leads, stages, estimates, proposals</div></div>
|
||||
<div class="q-strip-item"><div class="q-strip-icon">🏠</div><div class="q-strip-title">Owner's Box</div><div class="q-strip-desc">Revenue, KPIs, team performance, live</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-vs">
|
||||
<div style="text-align:center;margin-bottom:32px">
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:900;color:#fff;text-transform:uppercase">Your Current Stack vs. LynkedUp Pro</div>
|
||||
<p style="font-size:16px;color:var(--muted);margin-top:8px">The math is simple.</p>
|
||||
</div>
|
||||
<div class="q-vs-inner">
|
||||
<div class="q-vs-col">
|
||||
<div class="q-vs-label" style="color:var(--red)">❌ What you're paying now</div>
|
||||
<div class="q-vs-items">
|
||||
<div class="q-vs-item"><span class="ico">💸</span><span>EagleView reports - <strong style="color:#fff">$700+/mo</strong></span></div>
|
||||
<div class="q-vs-item"><span class="ico">💸</span><span>JobNimbus CRM - <strong style="color:#fff">00+/mo</strong></span></div>
|
||||
<div class="q-vs-item"><span class="ico">💸</span><span>SalesRabbit - <strong style="color:#fff">9+/user/mo</strong></span></div>
|
||||
<div class="q-vs-item"><span class="ico">💸</span><span>Billing + proposal tools - <strong style="color:#fff">00+/mo</strong></span></div>
|
||||
<div style="border-top:1px solid var(--border);margin-top:12px;padding-top:12px;display:flex;justify-content:space-between">
|
||||
<span style="font-size:14px;color:var(--muted)">Total monthly</span>
|
||||
<span style="font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:var(--red)">,150+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-vs-sep">→</div>
|
||||
<div class="q-vs-col win">
|
||||
<div class="q-vs-label" style="color:var(--green)">✅ LynkedUp Pro</div>
|
||||
<div class="q-vs-items">
|
||||
<div class="q-vs-item"><span class="ico">✅</span><span>AI Measurements - <strong style="color:#fff">$0/report</strong></span></div>
|
||||
<div class="q-vs-item"><span class="ico">✅</span><span>Roofing CRM - <strong style="color:#fff">included</strong></span></div>
|
||||
<div class="q-vs-item"><span class="ico">✅</span><span>Hail alerts + canvassing - <strong style="color:#fff">included</strong></span></div>
|
||||
<div class="q-vs-item"><span class="ico">✅</span><span>Billing + proposals - <strong style="color:#fff">included</strong></span></div>
|
||||
<div style="border-top:1px solid rgba(0,229,160,.2);margin-top:12px;padding-top:12px;display:flex;justify-content:space-between">
|
||||
<span style="font-size:14px;color:var(--muted)">Total monthly</span>
|
||||
<span style="font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:var(--green)">49</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width:860px;margin:24px auto 0;background:rgba(0,229,160,.05);border:1px solid rgba(0,229,160,.2);border-radius:12px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px">
|
||||
<span style="font-size:16px;color:var(--muted)">Your monthly savings:</span>
|
||||
<span style="font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:900;color:var(--green)">00+ / month</span>
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Claim These Savings →</a>
|
||||
</div>
|
||||
</div>
|
||||
<section class="roofing-offer-section" id="pricing">
|
||||
<div class="container">
|
||||
|
||||
<!-- TOP HEADING -->
|
||||
<div class="text-center roofing-heading mb-5">
|
||||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="row g-4 align-items-stretch">
|
||||
|
||||
<!-- LEFT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="lifetime-card h-100">
|
||||
<div class="popular-tag">MOST POPULAR</div>
|
||||
<h3>Founders Lifetime Access</h3>
|
||||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||||
<div class="price-box">
|
||||
<h2>$2000</h2>
|
||||
<span>PAY ONCE • USE FOREVER</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li>Complete Roofing CRM</li>
|
||||
<li>Lead Management System</li>
|
||||
<li>Canvassing & Field Tracking</li>
|
||||
<li>Insurance Workflow</li>
|
||||
<li>Proposal & Inspection Tools</li>
|
||||
<li>Team Management Dashboard</li>
|
||||
<li>Unlimited Projects</li>
|
||||
<li>Future Feature Updates</li>
|
||||
<li>Priority Support</li>
|
||||
</ul>
|
||||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="roofing-info-card h-100">
|
||||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||||
<div class="info-box">
|
||||
<h5>More Revenue Visibility</h5>
|
||||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Less Operational Chaos</h5>
|
||||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Built for Roofing Teams</h5>
|
||||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||||
<div class="terms-wrapper mt-4">
|
||||
<details class="custom-accordion-item">
|
||||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||||
<div class="accordion-body">
|
||||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="roofing-cta-box mt-5 text-center">
|
||||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||||
<p>Join the next generation of roofing companies scaling with automation,
|
||||
field intelligence, and operational visibility.</p>
|
||||
<div class="cta-btn-group">
|
||||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||||
.roofing-offer-section{
|
||||
padding:64px 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||||
#1a120d;
|
||||
overflow:hidden; position:relative;
|
||||
}
|
||||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||||
.roofing-offer-section .h-100{height:100%;}
|
||||
.roofing-offer-section .text-center{text-align:center;}
|
||||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||||
@media (max-width:991px){
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||||
}
|
||||
@media (max-width:767px){
|
||||
.roofing-offer-section{padding:48px 0;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||||
.roofing-offer-section .lifetime-card,
|
||||
.roofing-offer-section .roofing-info-card,
|
||||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<section class="q-cta" id="cta">
|
||||
<div style="position:relative;z-index:1">
|
||||
<div style="display:inline-block;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:8px 20px;margin-bottom:20px;font-size:13px;color:var(--orange);font-weight:600">🔥 Only 12 Founding Member Spots Remaining</div>
|
||||
<div class="q-price"><sup style="font-size:32px;color:var(--muted)">$</sup>2000<sub>/mo</sub></div>
|
||||
<div class="q-price-note">Everything included. No per-user fees. No per-report charges. 30-day money-back.</div>
|
||||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary" style="font-size:18px;padding:16px 40px">Book a demo →</a>
|
||||
</div>
|
||||
<div style="font-size:13px;color:var(--muted);display:flex;gap:20px;justify-content:center;flex-wrap:wrap">
|
||||
<span>✅ No credit card required</span><span>✅ Free onboarding</span><span>✅ 30-day money-back guarantee</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer style="padding:32px 24px;border-top:1px solid var(--border);text-align:center">
|
||||
<p style="font-size:13px;color:var(--muted)">© 2026 LynkedUp Pro · <a href="lynkeduppro_final.html" style="color:var(--muted)">Full Platform →</a> · <a href="https://book.lynkeduppro.com/" style="color:var(--muted)">Privacy</a></p>
|
||||
</footer>
|
||||
<div class="mob-sticky" style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px">
|
||||
<a href="https://book.lynkeduppro.com/" style="flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;background:var(--orange);color:#080c14">Book a demo</a>
|
||||
</div>
|
||||
<script>
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add('visible')})},{threshold:.1});
|
||||
document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));
|
||||
if(window.innerWidth<=640)document.querySelector('.mob-sticky').style.display='flex';
|
||||
window.addEventListener('resize',()=>{document.querySelector('.mob-sticky').style.display=window.innerWidth<=640?'flex':'none'});
|
||||
</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||||
<script src="/square-checkout.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,534 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
.shot {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border);
|
||||
object-fit: cover;
|
||||
box-shadow: 0 36px 72px rgba(0, 0, 0, .5);
|
||||
}
|
||||
:root{--bg:#05080f;--bg2:#0b1220;--bg3:#101928;--accent:#00c8ff;--orange:#f59e0b;--green:#00e5a0;--red:#ef4444;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#e8edf5;--muted:#8a9bb5;--card:#0d1725;--card2:#111c2e}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
||||
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
|
||||
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#00e5a0);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:#fff}
|
||||
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#fff}
|
||||
.logo-text span{color:var(--orange)}
|
||||
.nav-cta{background:var(--orange);color:#080c14;padding:9px 22px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .2s}
|
||||
.nav-cta:hover{opacity:.85}
|
||||
section{padding:88px 24px}
|
||||
.container{max-width:1080px;margin:0 auto}
|
||||
.s-label{font-size:11px;text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4.5vw,56px);font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
.s-sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:500px;line-height:1.65}
|
||||
.btn-primary{background:var(--orange);color:#080c14;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;display:inline-block;transition:transform .15s,box-shadow .15s;font-family:'Outfit',sans-serif;border:none;cursor:pointer}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.35)}
|
||||
.btn-ghost{background:transparent;color:#fff;padding:14px 28px;border-radius:8px;font-weight:500;text-decoration:none;font-size:16px;border:1px solid var(--border2);display:inline-block;transition:border-color .2s}
|
||||
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none}
|
||||
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black,transparent)}
|
||||
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.18);color:var(--accent);font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px;margin-bottom:24px;letter-spacing:.3px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;animation:blink 2s ease infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
|
||||
h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,8vw,92px);font-weight:900;line-height:.93;letter-spacing:-1px;color:#fff;max-width:860px;text-transform:uppercase}
|
||||
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin:24px auto 0;line-height:1.65}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
|
||||
.micro-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
|
||||
.micro{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
.micro span:first-child{color:var(--green)}
|
||||
.stat-row{display:flex;gap:40px;justify-content:center;margin-top:64px;flex-wrap:wrap}
|
||||
.stat{text-align:center;position:relative}
|
||||
.stat+.stat::before{content:'';position:absolute;left:-20px;top:20%;bottom:20%;width:1px;background:var(--border)}
|
||||
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
|
||||
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
|
||||
.pain-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
|
||||
.p-item{background:var(--card);padding:28px 22px}
|
||||
.p-icon{font-size:24px;margin-bottom:12px}
|
||||
.p-item h3{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px;text-transform:uppercase}
|
||||
.p-item p{font-size:14px;color:var(--muted);line-height:1.7}
|
||||
.p-cost{display:inline-block;background:rgba(239,68,68,.1);color:var(--red);font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-top:8px;border:1px solid rgba(239,68,68,.2)}
|
||||
.solution-section{background:var(--bg)}
|
||||
.sol-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:44px}
|
||||
.sol-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
|
||||
.sol-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text)}
|
||||
.sol-points li .ico{font-size:18px;min-width:26px;margin-top:1px}
|
||||
.sol-points li strong{color:#fff}
|
||||
.sol-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.sol-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px}
|
||||
.sol-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
|
||||
.sol-stat-label{font-size:12px;color:var(--muted)}
|
||||
.mock-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 36px 72px rgba(0,0,0,.5)}
|
||||
.mock-bar{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.mock-title{font-size:13px;font-weight:600;color:#fff}
|
||||
.mock-badge{font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px}
|
||||
.mock-body{padding:14px}
|
||||
.proof-section{background:var(--bg2)}
|
||||
.proof-card{background:var(--card);border:1px solid rgba(0,200,255,.15);border-radius:18px;padding:36px;max-width:720px;margin:44px auto 0;position:relative}
|
||||
.proof-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
|
||||
.proof-quote{font-size:17px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:22px}
|
||||
.proof-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.proof-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#05080f;flex-shrink:0}
|
||||
.proof-name{font-weight:600;font-size:15px;color:#fff}
|
||||
.proof-role{font-size:12px;color:var(--muted)}
|
||||
.proof-result{position:absolute;top:24px;right:24px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.18);border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.pr-num{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--green);line-height:1}
|
||||
.pr-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
|
||||
.cta-section{background:linear-gradient(135deg,rgba(0,200,255,.05),rgba(0,229,160,.04),rgba(245,158,11,.04));border-top:1px solid var(--border);padding:88px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:radial-gradient(ellipse,rgba(0,200,255,.06),transparent 70%);pointer-events:none}
|
||||
.cta-section h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;color:#fff;line-height:1;max-width:640px;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-1px}
|
||||
.cta-section h2 em{font-style:normal;color:var(--orange)}
|
||||
.cta-section p{font-size:17px;color:var(--muted);max-width:420px;margin:0 auto 28px}
|
||||
.cta-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||||
.cta-form input{flex:1;min-width:190px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;color:#fff;font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s}
|
||||
.cta-form input::placeholder{color:var(--muted)}
|
||||
.cta-form input:focus{border-color:rgba(0,200,255,.4)}
|
||||
.cta-micro{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
|
||||
footer{padding:40px 24px 28px;border-top:1px solid var(--border);text-align:center}
|
||||
footer p{font-size:13px;color:var(--muted)}
|
||||
footer a{color:var(--muted);text-decoration:none}
|
||||
footer a:hover{color:#fff}
|
||||
.mob-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:10px}
|
||||
.mob-sticky a{flex:1;text-align:center;padding:12px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none}
|
||||
.mob-sticky .p{background:var(--orange);color:#080c14}
|
||||
.mob-sticky .s{border:1px solid var(--border2);color:#fff}
|
||||
/* ---- Background image helpers ---- */
|
||||
.has-bg{position:relative;overflow:hidden}
|
||||
.has-bg .bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
|
||||
.has-bg .bg-overlay{position:absolute;inset:0;z-index:1}
|
||||
.has-bg .container,.has-bg>*:not(.bg-img):not(.bg-overlay):not(.hero-bg){position:relative;z-index:2}
|
||||
/* ---- Enhanced headings ---- */
|
||||
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,5vw,62px);font-weight:900;line-height:.97;letter-spacing:-.5px;color:#fff;text-transform:uppercase}
|
||||
/* ---- Mid-page CTA strips ---- */
|
||||
.cta-strip{padding:80px 24px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-strip .bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
|
||||
.cta-strip .bg-overlay{position:absolute;inset:0;z-index:1}
|
||||
.cta-strip .inner{position:relative;z-index:2;max-width:660px;margin:0 auto}
|
||||
.cta-strip-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:100px;margin-bottom:20px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
|
||||
.cta-strip h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,5vw,58px);font-weight:900;line-height:.97;letter-spacing:-.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
|
||||
.cta-strip p{font-size:16px;color:var(--muted);line-height:1.7;max-width:480px;margin:0 auto 28px}
|
||||
.cta-strip-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
||||
.cta-strip-trust{display:flex;gap:20px;justify-content:center;margin-top:16px;flex-wrap:wrap}
|
||||
.cta-strip-trust span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
|
||||
/* ---- Proof section bg ---- */
|
||||
.proof-section{position:relative;overflow:hidden}
|
||||
/* ---- Pain section heading accent line ---- */
|
||||
.accent-line{display:inline-block;width:40px;height:3px;border-radius:2px;margin-bottom:16px;vertical-align:middle}
|
||||
@media(max-width:1280px){section{padding:80px 24px}nav{padding:16px 32px}.cta-strip{padding:72px 24px}}
|
||||
@media(max-width:1024px){section{padding:72px 24px}.pain-grid{grid-template-columns:repeat(2,1fr)}.sol-split{grid-template-columns:1fr;gap:40px}h1{font-size:clamp(42px,7vw,72px)}.s-title{font-size:clamp(30px,4.5vw,48px)}.cta-section h2{font-size:clamp(32px,5vw,52px)}.cta-strip h2{font-size:clamp(30px,5vw,48px)}}
|
||||
@media(max-width:860px){nav{padding:14px 20px}.sol-split{grid-template-columns:1fr!important;gap:36px}.pain-grid{grid-template-columns:1fr!important}.sol-stats{grid-template-columns:1fr 1fr}.mob-sticky{display:flex}body{padding-bottom:72px}section{padding:64px 20px}.hero{padding:100px 16px 60px;min-height:auto}.hero-actions{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto}.hero-actions .btn-primary,.hero-actions .btn-ghost{text-align:center;width:100%}.stat-row{gap:28px}.stat-num{font-size:32px}.cta-section{padding:64px 20px}.cta-strip{padding:64px 20px}.cta-strip-btns{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto}.cta-strip-btns .btn-primary,.cta-strip-btns .btn-ghost{text-align:center;width:100%}.proof-card{padding:28px 22px}.proof-result{position:static;display:inline-block;margin:0 0 14px}}
|
||||
@media(max-width:560px){.stat-row{gap:20px;flex-direction:column}.stat+.stat::before{display:none}h1{font-size:clamp(36px,11vw,64px)}.s-title{font-size:clamp(26px,7.5vw,40px)}.cta-section h2{font-size:clamp(28px,8vw,44px)}.cta-strip h2{font-size:clamp(26px,7.5vw,40px)}.cta-form{flex-direction:column}.cta-form input{min-width:100%;width:100%}.cta-form .btn-primary{width:100%;text-align:center}.sol-stats{grid-template-columns:1fr}.hero-sub{font-size:15px}.micro-row{gap:10px}section{padding:56px 16px}.cta-strip{padding:56px 16px}.hero{padding:96px 16px 48px}.eyebrow{font-size:11px;padding:5px 12px}.proof-quote{font-size:15px}.cta-section p,.cta-strip p{font-size:15px}.cta-strip-trust{gap:10px}}
|
||||
@media(max-width:380px){nav{padding:12px 14px}.nav-cta{padding:8px 14px;font-size:13px}.logo-text{font-size:16px}h1{font-size:clamp(32px,11vw,48px)}.s-title{font-size:24px}.btn-primary,.btn-ghost{padding:12px 22px;font-size:14px}.cta-section h2,.cta-strip h2{font-size:26px}.proof-card{padding:22px 18px}}</style>
|
||||
<title>LynkedUp Pro - Stop Getting Your Insurance Claims Underpaid</title>
|
||||
<meta name="description" content="AI-annotated hail impact documentation and LiDAR digital twins get your insurance claims approved on the first submission. Stop leaving money on the table."/>
|
||||
</head><body>
|
||||
<nav>
|
||||
<a href="https://book.lynkeduppro.com/" class="logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||||
<a href="https://launch.lynkeduppro.com/" class="nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="nav-cta">Book a demo</a>
|
||||
</nav>
|
||||
<section class="hero has-bg" id="home">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1800&q=80');filter:brightness(.13) saturate(.5)"></div>
|
||||
<div class="bg-overlay" style="background:linear-gradient(180deg,rgba(5,8,15,.6) 0%,rgba(5,8,15,.85) 60%,rgba(5,8,15,1) 100%)"></div>
|
||||
<div class="hero-bg"><div class="hero-grid"></div><div class="hero-glow" style="background:radial-gradient(ellipse,rgba(245,158,11,.12),transparent 65%)"></div></div>
|
||||
<div class="eyebrow"><span class="dot" style="background:var(--orange)"></span> Adjuster-Ready Reports · Insurance Claims</div>
|
||||
<h1>The Insurance Company<br>Isn't Cheating You -<br><span style="color:var(--orange)">Your Docs Are.</span></h1>
|
||||
<p class="hero-sub">Adjusters need <strong>precise, annotated evidence</strong> to pay full value. Without AI-documented hail impacts and LiDAR data, you hand them every reason to underpay, and they take it. It's your assistant that never sleeps or takes a day off.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Fix My Claims Process →</a>
|
||||
</div>
|
||||
<div class="micro-row" style="margin-top:14px">
|
||||
<span class="micro" style="color:var(--muted)">4.9★ · 248 reviews</span>
|
||||
</div>
|
||||
<div class="micro-row">
|
||||
<span class="micro"><span>✅</span> First-submission approval</span>
|
||||
<span class="micro"><span>✅</span> AI-annotated hail impacts</span>
|
||||
<span class="micro"><span>✅</span> Xactimate-style output</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat"><div class="stat-num" style="color:var(--green)">1st</div><div class="stat-label">Submission approval rate</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--orange)">$0</div><div class="stat-label">Manual documentation time</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:var(--accent)">1-click</div><div class="stat-label">Generate full adjuster report</div></div>
|
||||
<div class="stat"><div class="stat-num" style="color:#fff">100%</div><div class="stat-label">Insurance-accepted format</div></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pain-section has-bg reveal" id="problem">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504309092620-4d0ec726efa4?w=1800&q=80');filter:brightness(.1) saturate(.4)"></div>
|
||||
<div class="bg-overlay" style="background:linear-gradient(135deg,rgba(11,18,32,.97) 0%,rgba(11,18,32,.88) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--red)">The Problem</div>
|
||||
<h2 class="s-title">Every Rejected Claim Is<br><span style="color:var(--red)">Money You've Already Earned.</span></h2>
|
||||
<p class="s-sub">You did the work. You climbed the roof. You filed the report. And the adjuster still came back with a low number, or nothing at all. It's not the damage that's the problem. It's the paper trail.</p>
|
||||
<div class="pain-grid">
|
||||
<div class="p-item"><div class="p-icon">📋</div><h3>Vague Reports Get Rejected</h3><p>Adjuster sees "hail damage noted" with a few phone photos. They write back for more evidence, delay the claim, or simply underpay. You have no leverage.</p><span class="p-cost">Cost: Weeks of delays, underpayment</span></div>
|
||||
<div class="p-item"><div class="p-icon">🔍</div><h3>You Miss Impact Zones</h3><p>Manual roof inspections miss impacts on complex roof geometries. AI catches what the human eye skips, and insurance adjusters know the difference.</p><span class="p-cost">Cost: Unclaimed damage per job</span></div>
|
||||
<div class="p-item"><div class="p-icon">📂</div><h3>Hours of Manual Documentation</h3><p>You do the roof work in 4 minutes. Then you spend 3 hours compiling photos, measurements, storm data and formatting a report adjusters may still reject.</p><span class="p-cost">Cost: 3+ hours per claim</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ===== CTA STRIP 1 ===== -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1527689368864-3a821dbccc34?w=1800&q=80');position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.08) saturate(.4)"></div>
|
||||
<div class="bg-overlay" style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,8,15,.97) 0%,rgba(15,8,5,.95) 100%)"></div>
|
||||
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:700px;height:350px;background:radial-gradient(ellipse,rgba(239,68,68,.07),transparent 70%);pointer-events:none;z-index:1"></div>
|
||||
<div class="inner">
|
||||
<div class="cta-strip-eyebrow" style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--red)">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 2s ease infinite;display:inline-block"></span>
|
||||
Right Now, This Storm Season
|
||||
</div>
|
||||
<h2>You're Handing Adjusters<br>a <span style="color:var(--red)">Reason to Say No.</span><br><span style="color:var(--orange)">Stop It Today.</span></h2>
|
||||
<p>Every claim you file without AI-annotated hail data is a claim the adjuster has permission to shrink. The good news? One 30-minute demo changes the entire outcome of your next job.</p>
|
||||
<div class="cta-strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Show Me How to Fix It →</a>
|
||||
|
||||
</div>
|
||||
<div class="cta-strip-trust">
|
||||
<span><span style="color:var(--green)">✅</span> No credit card</span>
|
||||
<span><span style="color:var(--green)">✅</span> 30-min live demo</span>
|
||||
<span><span style="color:var(--green)">✅</span> Real claims results</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solution-section has-bg reveal" id="solution">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=80');filter:brightness(.1) saturate(.4)"></div>
|
||||
<div class="bg-overlay" style="background:linear-gradient(90deg,rgba(5,8,15,1) 45%,rgba(5,8,15,.75) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--orange)">The Fix</div>
|
||||
<h2 class="s-title">One Scan.<br><span style="color:var(--orange)">Full Payout.</span><br>Zero Resubmissions.</h2>
|
||||
<div class="sol-split">
|
||||
<div>
|
||||
<p class="s-sub">LynkedUp Pro combines LiDAR drone scanning, AI hail impact annotation, and historical storm data into a single adjuster-ready PDF. Automatically. Every time.</p>
|
||||
<ul class="sol-points">
|
||||
<li><span class="ico">🤖</span><span><strong>AI auto-annotates every impact.</strong> The digital twin flags hail strikes, granule loss, and ridge damage with exact GPS coordinates. Nothing gets missed.</span></li>
|
||||
<li><span class="ico">🌩️</span><span><strong>Storm data auto-attached.</strong> HailTrace and NOAA historical records pull automatically into every report. Dated, sourced, irrefutable.</span></li>
|
||||
<li><span class="ico">📄</span><span><strong>Xactimate-style output.</strong> One click generates a formatted adjuster report with the exact structure insurance companies require. No resubmissions.</span></li>
|
||||
<li><span class="ico">🔗</span><span><strong>Wired into your CRM.</strong> Report links to the job file, the homeowner, the estimate, and the signed contract. Everything auditors want, one click away.</span></li>
|
||||
</ul>
|
||||
<div class="sol-stats">
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--green)">1-Click</div><div class="sol-stat-label">Report generation</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--orange)">0 hrs</div><div class="sol-stat-label">Manual documentation time</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:var(--accent)">100%</div><div class="sol-stat-label">Insurance-accepted format</div></div>
|
||||
<div class="sol-stat"><div class="sol-stat-num" style="color:#fff">Auto</div><div class="sol-stat-label">Storm data attached</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/page/assets/esitimate.png" alt="LynkedUp Pro AI-annotated adjuster report" class="shot" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ===== CTA STRIP 2 ===== -->
|
||||
<section class="cta-strip">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80');position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.1) saturate(.4)"></div>
|
||||
<div class="bg-overlay" style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,8,15,.96) 0%,rgba(5,12,8,.95) 100%)"></div>
|
||||
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:700px;height:350px;background:radial-gradient(ellipse,rgba(0,229,160,.06),transparent 70%);pointer-events:none;z-index:1"></div>
|
||||
<div class="inner">
|
||||
<div class="cta-strip-eyebrow" style="background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);color:var(--green)">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2s ease infinite;display:inline-block"></span>
|
||||
Your Adjuster Wants a Reason to Say Yes
|
||||
</div>
|
||||
<h2>Give Them <span style="color:var(--green)">Irrefutable</span><br>Evidence - or Keep<br><span style="color:var(--orange)">Fighting for Every Dollar.</span></h2>
|
||||
<p>LynkedUp Pro gives adjusters exactly what they need to approve on the first pass: GPS-pinned impacts, NOAA storm data, and Xactimate-ready formatting. Generated automatically. Every job.</p>
|
||||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px">
|
||||
<div style="background:var(--card);border:1px solid rgba(0,229,160,.18);border-radius:10px;padding:14px 22px;text-align:center;min-width:120px">
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--green);line-height:1">100%</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px">First-Pass Rate</div>
|
||||
</div>
|
||||
<div style="background:var(--card);border:1px solid rgba(245,158,11,.18);border-radius:10px;padding:14px 22px;text-align:center;min-width:120px">
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--orange);line-height:1">$2.1K</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px">Saved / Month</div>
|
||||
</div>
|
||||
<div style="background:var(--card);border:1px solid rgba(0,200,255,.18);border-radius:10px;padding:14px 22px;text-align:center;min-width:120px">
|
||||
<div style="font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--accent);line-height:1">0 hrs</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px">Manual Doc Time</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-strip-btns">
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary">Get the Dashboard Free →</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="proof-section has-bg reveal" id="proof">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1800&q=80');filter:brightness(.09) saturate(.4)"></div>
|
||||
<div class="bg-overlay" style="background:linear-gradient(180deg,rgba(11,18,32,1) 0%,rgba(11,18,32,.92) 60%,rgba(11,18,32,1) 100%)"></div>
|
||||
<div class="container">
|
||||
<div class="s-label" style="color:var(--orange);text-align:center">Real Result</div>
|
||||
<h2 class="s-title" style="text-align:center">Our Clients Don't<br>Resubmit. <span style="color:var(--orange)">They Get Paid.</span></h2>
|
||||
<div class="proof-card" style="border-color:rgba(245,158,11,.2)">
|
||||
<div class="proof-result" style="border-color:rgba(245,158,11,.18);background:rgba(245,158,11,.06)"><div class="pr-num" style="color:var(--orange)">$2.1K</div><div class="pr-label">Saved/Month</div></div>
|
||||
<div class="proof-stars">★★★★★</div>
|
||||
<p class="proof-quote">"We used to resubmit claims 2-3 times per job. Adjusters kept asking for more evidence we didn't have. With LynkedUp Pro, the AI-annotated reports have the exact documentation they need. Every claim gets approved on the first submission now. That alone is worth the entire subscription."</p>
|
||||
<div class="proof-author">
|
||||
<div class="proof-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">MT</div>
|
||||
<div><div class="proof-name">Marcus Thompson</div><div class="proof-role">Operations Manager · Fort Worth, TX</div></div>
|
||||
</div>
|
||||
<span style="position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.5">*</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="roofing-offer-section" id="pricing">
|
||||
<div class="container">
|
||||
|
||||
<!-- TOP HEADING -->
|
||||
<div class="text-center roofing-heading mb-5">
|
||||
<span class="offer-badge">🔥 Limited Founder Offer</span>
|
||||
<h2>Own Your Roofing CRM. Pay Once.</h2>
|
||||
<p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
|
||||
to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="row g-4 align-items-stretch">
|
||||
|
||||
<!-- LEFT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="lifetime-card h-100">
|
||||
<div class="popular-tag">MOST POPULAR</div>
|
||||
<h3>Founders Lifetime Access</h3>
|
||||
<p class="small-text">One payment. Unlimited operational control.</p>
|
||||
<div class="price-box">
|
||||
<h2>$2000</h2>
|
||||
<span>PAY ONCE • USE FOREVER</span>
|
||||
</div>
|
||||
<ul class="feature-list">
|
||||
<li>Complete Roofing CRM</li>
|
||||
<li>Lead Management System</li>
|
||||
<li>Canvassing & Field Tracking</li>
|
||||
<li>Insurance Workflow</li>
|
||||
<li>Proposal & Inspection Tools</li>
|
||||
<li>Team Management Dashboard</li>
|
||||
<li>Unlimited Projects</li>
|
||||
<li>Future Feature Updates</li>
|
||||
<li>Priority Support</li>
|
||||
</ul>
|
||||
<a href="https://book.lynkeduppro.com/" class="deal-btn">Claim Founders Lifetime Deal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="col-lg-6">
|
||||
<div class="roofing-info-card h-100">
|
||||
<span class="mini-badge">Why Roofers Choose LynkedUpPro</span>
|
||||
<h3>Replace 5 Different Tools With One Roofing OS</h3>
|
||||
<p class="info-para">Most roofing companies spend thousands yearly on disconnected
|
||||
CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
|
||||
<div class="info-box">
|
||||
<h5>More Revenue Visibility</h5>
|
||||
<p>Track leads, conversions, and team performance from one dashboard.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Less Operational Chaos</h5>
|
||||
<p>Eliminate scattered communication and disconnected workflows.</p>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<h5>Built for Roofing Teams</h5>
|
||||
<p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TERMS (native <details> accordion - no JS needed) -->
|
||||
<div class="terms-wrapper mt-4">
|
||||
<details class="custom-accordion-item">
|
||||
<summary class="accordion-button">Deal Terms & Conditions</summary>
|
||||
<div class="accordion-body">
|
||||
<div class="deal-terms-legal" style="font-size:12px;line-height:1.65;color:#444">
|
||||
<p style="margin:0 0 10px">All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
|
||||
<p style="margin:0 0 10px">Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
|
||||
<p style="margin:0 0 10px">The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
|
||||
<p style="margin:0 0 10px">SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
|
||||
<p style="margin:0 0 10px">Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
|
||||
<p style="margin:0">Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="roofing-cta-box mt-5 text-center">
|
||||
<h2>Roofing Moves Fast. Your CRM Should Too.</h2>
|
||||
<p>Join the next generation of roofing companies scaling with automation,
|
||||
field intelligence, and operational visibility.</p>
|
||||
<div class="cta-btn-group">
|
||||
<a href="https://book.lynkeduppro.com/" class="start-btn">Start Founders Lifetime Access</a>
|
||||
<a href="https://www.lynkeduppro.com/contact" class="sales-btn">Book a demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
/* ===== Roofing Offer / Pricing - compact, self-contained ===== */
|
||||
.roofing-offer-section{
|
||||
padding:64px 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
|
||||
radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
|
||||
#1a120d;
|
||||
overflow:hidden; position:relative;
|
||||
}
|
||||
.roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
|
||||
.roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
|
||||
.roofing-offer-section .row.g-4{margin:-12px;}
|
||||
.roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
|
||||
.roofing-offer-section .align-items-stretch{align-items:stretch;}
|
||||
.roofing-offer-section .h-100{height:100%;}
|
||||
.roofing-offer-section .text-center{text-align:center;}
|
||||
.roofing-offer-section .mb-5{margin-bottom:36px;}
|
||||
.roofing-offer-section .mt-4{margin-top:20px;}
|
||||
.roofing-offer-section .mt-5{margin-top:36px;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
|
||||
.roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
|
||||
.roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
|
||||
.roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
|
||||
.roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
|
||||
.roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
|
||||
.roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
|
||||
.roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
|
||||
.roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
|
||||
.roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
|
||||
.roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
|
||||
.roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
|
||||
.roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
|
||||
.roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
|
||||
.roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
|
||||
.roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
|
||||
.roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
|
||||
.roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
|
||||
.roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
|
||||
.roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
|
||||
.roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
|
||||
.roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
|
||||
.roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
|
||||
.roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
|
||||
.roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
|
||||
.roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
|
||||
.roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
|
||||
.roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
|
||||
.roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
|
||||
.roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
|
||||
.roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
|
||||
.roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
|
||||
.roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
|
||||
@media (max-width:991px){
|
||||
.roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:32px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:28px;}
|
||||
.roofing-offer-section .price-box h2{font-size:44px;}
|
||||
}
|
||||
@media (max-width:767px){
|
||||
.roofing-offer-section{padding:48px 0;}
|
||||
.roofing-offer-section .roofing-heading h2{font-size:27px;}
|
||||
.roofing-offer-section .roofing-info-card h3{font-size:23px;}
|
||||
.roofing-offer-section .roofing-cta-box h2{font-size:24px;}
|
||||
.roofing-offer-section .lifetime-card,
|
||||
.roofing-offer-section .roofing-info-card,
|
||||
.roofing-offer-section .roofing-cta-box{padding:22px;}
|
||||
.roofing-offer-section .price-box h2{font-size:40px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<section class="cta-section has-bg" id="cta">
|
||||
<div class="bg-img" style="background-image:url('https://images.unsplash.com/photo-1504309092620-4d0ec726efa4?w=1800&q=80');filter:brightness(.08) saturate(.3)"></div>
|
||||
<div class="bg-overlay" style="background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(0,229,160,.03),rgba(245,158,11,.04))"></div>
|
||||
<div class="container" style="position:relative;z-index:2">
|
||||
<div style="display:inline-block;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:8px 18px;margin-bottom:24px;font-size:13px;color:var(--orange);font-weight:600">📋 Stop resubmitting claims that should've been approved the first time</div>
|
||||
<h2>Every Dollar Is Yours.<br><em>Start Claiming It.</em></h2>
|
||||
<p>See how LynkedUp Pro generates bulletproof adjuster reports automatically, in a 30-minute demo.</p>
|
||||
<div class="cta-form">
|
||||
|
||||
<a href="https://book.lynkeduppro.com/" class="btn-primary" onclick="event.preventDefault()">Fix My Claims Process →</a>
|
||||
</div>
|
||||
<div class="cta-micro"><span>✅ No credit card</span><span>✅ 30-day money-back guarantee</span><span>✅ Free onboarding</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>© 2026 LynkedUp Pro · See Full Platform →</p>
|
||||
<p style="margin-top:8px;font-size:12px;opacity:.5">$349/mo flat rate · No credit card required · 30-day money-back guarantee · Built for roofing</p>
|
||||
<p style="margin-top:8px;font-size:11px;opacity:.5">* Testimonials and figures shown are illustrative and reflect beta-period results; individual results vary.</p>
|
||||
</footer>
|
||||
<div class="mob-sticky">
|
||||
<a href="https://book.lynkeduppro.com/" class="p">Book a demo</a>
|
||||
<a href="lynkeduppro_final.html" class="s">See Full Platform</a>
|
||||
</div>
|
||||
<script>
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(el=>{if(el.isIntersecting)el.target.classList.add("visible")})},{threshold:.1});
|
||||
document.querySelectorAll(".reveal").forEach(el=>obs.observe(el));
|
||||
document.querySelectorAll("a[href^=\"#\"]").forEach(a=>{a.addEventListener("click",function(e){const t=document.querySelector(this.getAttribute("href"));if(t){e.preventDefault();t.scrollIntoView({behavior:"smooth",block:"start"});}}); });
|
||||
</script>
|
||||
<!-- FLOATING LIFETIME DEAL BUTTON -->
|
||||
<a href="#pricing" id="floatingDealBtn">
|
||||
🔥 Founders Lifetime Deal - $2000
|
||||
</a>
|
||||
|
||||
<style>
|
||||
#floatingDealBtn {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background: linear-gradient(135deg,#0ea5e9,#2563eb);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 30px rgba(14,165,233,0.35);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
animation: floatPulse 2s infinite;
|
||||
}
|
||||
|
||||
#floatingDealBtn:hover {
|
||||
transform: translateY(-4px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(14,165,233,0.45);
|
||||
}
|
||||
|
||||
@keyframes floatPulse {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#floatingDealBtn {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||||
<script src="/square-checkout.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1009 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,641 @@
|
||||
/**
|
||||
* <image-slot> — user-fillable image placeholder.
|
||||
*
|
||||
* Drop this into a deck, mockup, or page wherever you want the user to
|
||||
* supply an image. You control the slot's shape and size; the user fills it
|
||||
* by dragging an image file onto it (or clicking to browse). The dropped
|
||||
* image persists across reloads via a .image-slots.state.json sidecar —
|
||||
* same read-via-fetch / write-via-window.omelette pattern as
|
||||
* design_canvas.jsx, so the filled slot shows on share links, downloaded
|
||||
* zips, and PPTX export. Outside the omelette runtime the slot is read-only.
|
||||
*
|
||||
* The host bridge only allows sidecar writes at the project root, so the
|
||||
* HTML that uses this component is assumed to live at the project root too
|
||||
* (same constraint as design_canvas.jsx).
|
||||
*
|
||||
* Attributes:
|
||||
* id Persistence key. REQUIRED for the drop to survive reload —
|
||||
* every slot on the page needs a distinct id.
|
||||
* shape 'rect' | 'rounded' | 'circle' | 'pill' (default 'rounded')
|
||||
* 'circle' applies 50% border-radius; on a non-square slot
|
||||
* that's an ellipse — set equal width and height for a true
|
||||
* circle.
|
||||
* radius Corner radius in px for 'rounded'. (default 12)
|
||||
* mask Any CSS clip-path value. Overrides `shape` — use this for
|
||||
* hexagons, blobs, arbitrary polygons.
|
||||
* fit object-fit: cover | contain | fill. (default 'cover')
|
||||
* With cover (the default) double-clicking the filled slot
|
||||
* enters a reframe mode: the whole image spills past the mask
|
||||
* (translucent outside, opaque inside), drag to reposition,
|
||||
* corner-drag to scale. The crop persists alongside the image
|
||||
* in the sidecar. contain/fill stay static.
|
||||
* position object-position for fit=contain|fill. (default '50% 50%')
|
||||
* placeholder Empty-state caption. (default 'Drop an image')
|
||||
* src Optional initial/fallback image URL. A user drop overrides
|
||||
* it; clearing the drop reveals src again.
|
||||
*
|
||||
* Size and layout come from ordinary CSS on the element — width/height
|
||||
* inline or from a parent grid — so it composes with any layout.
|
||||
*
|
||||
* Usage:
|
||||
* <script src="image-slot.js"></script>
|
||||
* <image-slot id="hero" style="width:800px;height:450px" shape="rounded" radius="20"
|
||||
* placeholder="Drop a hero image"></image-slot>
|
||||
* <image-slot id="avatar" style="width:120px;height:120px" shape="circle"></image-slot>
|
||||
* <image-slot id="kite" style="width:300px;height:300px"
|
||||
* mask="polygon(50% 0, 100% 50%, 50% 100%, 0 50%)"></image-slot>
|
||||
*/
|
||||
|
||||
(() => {
|
||||
const STATE_FILE = '.image-slots.state.json';
|
||||
// 2× a ~600px slot in a 1920-wide deck — retina-sharp without making the
|
||||
// sidecar enormous. A 1200px WebP at q=0.85 is ~150-300KB.
|
||||
const MAX_DIM = 1200;
|
||||
// Raster formats only. SVG is excluded (can carry script; createImageBitmap
|
||||
// on SVG blobs is inconsistent). GIF is excluded because the canvas
|
||||
// re-encode keeps only the first frame, so an animated GIF would silently
|
||||
// go still — better to reject than surprise.
|
||||
const ACCEPT = ['image/png', 'image/jpeg', 'image/webp', 'image/avif'];
|
||||
|
||||
// ── Shared sidecar store ────────────────────────────────────────────────
|
||||
// One fetch + immediate write-on-change for every <image-slot> on the
|
||||
// page. Reads via fetch() so viewing works anywhere the HTML and sidecar
|
||||
// are served together; writes go through window.omelette.writeFile, which
|
||||
// the host allowlists to *.state.json basenames only.
|
||||
const subs = new Set();
|
||||
let slots = {};
|
||||
// ids explicitly cleared before the sidecar fetch resolved — otherwise
|
||||
// the merge below can't tell "never set" from "just deleted" and would
|
||||
// resurrect the sidecar's stale value.
|
||||
const tombstones = new Set();
|
||||
let loaded = false;
|
||||
let loadP = null;
|
||||
|
||||
function load() {
|
||||
if (loadP) return loadP;
|
||||
loadP = fetch(STATE_FILE)
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then((j) => {
|
||||
// Merge: sidecar loses to any in-memory change that raced ahead of
|
||||
// the fetch (drop or clear) so neither is clobbered by hydration.
|
||||
if (j && typeof j === 'object') {
|
||||
const merged = Object.assign({}, j, slots);
|
||||
// A framing-only write that raced ahead of hydration must not
|
||||
// drop a user image that's only on disk — inherit u from the
|
||||
// sidecar for any in-memory entry that lacks one.
|
||||
for (const k in slots) {
|
||||
if (merged[k] && !merged[k].u && j[k]) {
|
||||
merged[k].u = typeof j[k] === 'string' ? j[k] : j[k].u;
|
||||
}
|
||||
}
|
||||
for (const id of tombstones) delete merged[id];
|
||||
slots = merged;
|
||||
}
|
||||
tombstones.clear();
|
||||
})
|
||||
.catch(() => {})
|
||||
.then(() => { loaded = true; subs.forEach((fn) => fn()); });
|
||||
return loadP;
|
||||
}
|
||||
|
||||
// Serialize writes so two near-simultaneous drops on different slots
|
||||
// can't reorder at the backend and leave the sidecar with only the
|
||||
// first. A save requested mid-flight just marks dirty and re-fires on
|
||||
// completion with the then-current slots.
|
||||
let saving = false;
|
||||
let saveDirty = false;
|
||||
function save() {
|
||||
if (saving) { saveDirty = true; return; }
|
||||
const w = window.omelette && window.omelette.writeFile;
|
||||
if (!w) return;
|
||||
saving = true;
|
||||
Promise.resolve(w(STATE_FILE, JSON.stringify(slots)))
|
||||
.catch(() => {})
|
||||
.then(() => { saving = false; if (saveDirty) { saveDirty = false; save(); } });
|
||||
}
|
||||
|
||||
const S_MAX = 5;
|
||||
const clampS = (s) => Math.max(1, Math.min(S_MAX, s));
|
||||
|
||||
// Normalize a stored slot value. Pre-reframe sidecars stored a bare
|
||||
// data-URL string; newer ones store {u, s, x, y}. Either shape is valid.
|
||||
function getSlot(id) {
|
||||
const v = slots[id];
|
||||
if (!v) return null;
|
||||
return typeof v === 'string' ? { u: v, s: 1, x: 0, y: 0 } : v;
|
||||
}
|
||||
|
||||
function setSlot(id, val) {
|
||||
if (!id) return;
|
||||
if (val) { slots[id] = val; tombstones.delete(id); }
|
||||
else { delete slots[id]; if (!loaded) tombstones.add(id); }
|
||||
subs.forEach((fn) => fn());
|
||||
// A drop is rare + high-value — write immediately so nav-away can't lose
|
||||
// it. Gate on the initial read so we don't overwrite a sidecar we haven't
|
||||
// merged yet; the merge in load() keeps this change once the read lands.
|
||||
if (loaded) save(); else load().then(save);
|
||||
}
|
||||
|
||||
// ── Image downscale ─────────────────────────────────────────────────────
|
||||
// Encode through a canvas so the sidecar carries resized bytes, not the
|
||||
// raw upload. Longest side is capped at 2× the slot's rendered width
|
||||
// (retina) and at MAX_DIM. WebP keeps alpha and is ~10× smaller than PNG
|
||||
// for photos, so there's no need for per-image format picking.
|
||||
async function toDataUrl(file, targetW) {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
try {
|
||||
const cap = Math.min(MAX_DIM, Math.max(1, Math.round(targetW * 2)) || MAX_DIM);
|
||||
const scale = Math.min(1, cap / Math.max(bitmap.width, bitmap.height));
|
||||
const w = Math.max(1, Math.round(bitmap.width * scale));
|
||||
const h = Math.max(1, Math.round(bitmap.height * scale));
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = w; canvas.height = h;
|
||||
canvas.getContext('2d').drawImage(bitmap, 0, 0, w, h);
|
||||
return canvas.toDataURL('image/webp', 0.85);
|
||||
} finally {
|
||||
bitmap.close && bitmap.close();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Custom element ──────────────────────────────────────────────────────
|
||||
const stylesheet =
|
||||
':host{display:inline-block;position:relative;vertical-align:top;' +
|
||||
' font:13px/1.3 system-ui,-apple-system,sans-serif;color:rgba(0,0,0,.55);width:240px;height:160px}' +
|
||||
'.frame{position:absolute;inset:0;overflow:hidden;background:rgba(0,0,0,.04)}' +
|
||||
// .frame img (clipped) and .spill (unclipped ghost + handles) share the
|
||||
// same left/top/width/height in frame-%, computed by _applyView(), so the
|
||||
// inside-mask crop and the outside-mask spill stay pixel-aligned.
|
||||
'.frame img{position:absolute;max-width:none;transform:translate(-50%,-50%);' +
|
||||
' -webkit-user-drag:none;user-select:none;touch-action:none}' +
|
||||
// Reframe mode (double-click): the full image spills past the mask. The
|
||||
// spill layer is sized to the IMAGE bounds so its corners are where the
|
||||
// resize handles belong. The ghost <img> inside is translucent; the real
|
||||
// clipped <img> underneath shows the opaque in-mask crop.
|
||||
'.spill{position:absolute;transform:translate(-50%,-50%);display:none;z-index:1;' +
|
||||
' cursor:grab;touch-action:none}' +
|
||||
':host([data-panning]) .spill{cursor:grabbing}' +
|
||||
'.spill .ghost{position:absolute;inset:0;width:100%;height:100%;opacity:.35;' +
|
||||
' pointer-events:none;-webkit-user-drag:none;user-select:none;' +
|
||||
' box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.2)}' +
|
||||
'.spill .handle{position:absolute;width:12px;height:12px;border-radius:50%;' +
|
||||
' background:#fff;box-shadow:0 0 0 1.5px #c96442,0 1px 3px rgba(0,0,0,.3);' +
|
||||
' transform:translate(-50%,-50%)}' +
|
||||
'.spill .handle[data-c=nw]{left:0;top:0;cursor:nwse-resize}' +
|
||||
'.spill .handle[data-c=ne]{left:100%;top:0;cursor:nesw-resize}' +
|
||||
'.spill .handle[data-c=sw]{left:0;top:100%;cursor:nesw-resize}' +
|
||||
'.spill .handle[data-c=se]{left:100%;top:100%;cursor:nwse-resize}' +
|
||||
':host([data-reframe]){z-index:10}' +
|
||||
':host([data-reframe]) .spill{display:block}' +
|
||||
':host([data-reframe]) .frame{box-shadow:0 0 0 2px #c96442}' +
|
||||
'.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;' +
|
||||
' justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;' +
|
||||
' cursor:pointer;user-select:none}' +
|
||||
'.empty svg{opacity:.45}' +
|
||||
'.empty .cap{max-width:90%;font-weight:500;letter-spacing:.01em}' +
|
||||
'.empty .sub{font-size:11px}' +
|
||||
'.empty .sub u{text-underline-offset:2px;text-decoration-color:rgba(0,0,0,.25)}' +
|
||||
'.empty:hover .sub u{color:rgba(0,0,0,.75);text-decoration-color:currentColor}' +
|
||||
':host([data-over]) .frame{outline:2px solid #c96442;outline-offset:-2px;' +
|
||||
' background:rgba(201,100,66,.10)}' +
|
||||
'.ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed rgba(0,0,0,.25);' +
|
||||
' transition:border-color .12s}' +
|
||||
':host([data-over]) .ring{border-color:#c96442}' +
|
||||
':host([data-filled]) .ring{display:none}' +
|
||||
// Controls sit BELOW the mask (top:100%), absolutely positioned so the
|
||||
// author-declared slot height is unaffected. The gap is padding, not a
|
||||
// top offset, so the hover target stays contiguous with the frame.
|
||||
'.ctl{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:8px;' +
|
||||
' display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2;' +
|
||||
' white-space:nowrap}' +
|
||||
':host([data-filled][data-editable]:hover) .ctl,:host([data-reframe]) .ctl' +
|
||||
' {opacity:1;pointer-events:auto}' +
|
||||
'.ctl button{appearance:none;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;' +
|
||||
' background:rgba(0,0,0,.65);color:#fff;font:11px/1 system-ui,-apple-system,sans-serif;' +
|
||||
' backdrop-filter:blur(6px)}' +
|
||||
'.ctl button:hover{background:rgba(0,0,0,.8)}' +
|
||||
'.err{position:absolute;left:8px;bottom:8px;right:8px;color:#b3261e;font-size:11px;' +
|
||||
' background:rgba(255,255,255,.85);padding:4px 6px;border-radius:5px;pointer-events:none}';
|
||||
|
||||
const icon =
|
||||
'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
|
||||
'stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">' +
|
||||
'<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>' +
|
||||
'<path d="m21 15-5-5L5 21"/></svg>';
|
||||
|
||||
class ImageSlot extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['shape', 'radius', 'mask', 'fit', 'position', 'placeholder', 'src', 'id'];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const root = this.attachShadow({ mode: 'open' });
|
||||
// .spill and .ctl sit OUTSIDE .frame so overflow:hidden + border-radius
|
||||
// on the frame (circle, pill, rounded) can't clip them.
|
||||
root.innerHTML =
|
||||
'<style>' + stylesheet + '</style>' +
|
||||
'<div class="frame" part="frame">' +
|
||||
' <img part="image" alt="" draggable="false" style="display:none">' +
|
||||
' <div class="empty" part="empty">' + icon +
|
||||
' <div class="cap"></div>' +
|
||||
' <div class="sub">or <u>browse files</u></div></div>' +
|
||||
' <div class="ring" part="ring"></div>' +
|
||||
'</div>' +
|
||||
'<div class="spill">' +
|
||||
' <img class="ghost" alt="" draggable="false">' +
|
||||
' <div class="handle" data-c="nw"></div><div class="handle" data-c="ne"></div>' +
|
||||
' <div class="handle" data-c="sw"></div><div class="handle" data-c="se"></div>' +
|
||||
'</div>' +
|
||||
'<div class="ctl"><button data-act="replace" title="Replace image">Replace</button>' +
|
||||
' <button data-act="clear" title="Remove image">Remove</button></div>' +
|
||||
'<input type="file" accept="' + ACCEPT.join(',') + '" hidden>';
|
||||
this._frame = root.querySelector('.frame');
|
||||
this._ring = root.querySelector('.ring');
|
||||
this._img = root.querySelector('.frame img');
|
||||
this._empty = root.querySelector('.empty');
|
||||
this._cap = root.querySelector('.cap');
|
||||
this._sub = root.querySelector('.sub');
|
||||
this._spill = root.querySelector('.spill');
|
||||
this._ghost = root.querySelector('.ghost');
|
||||
this._err = null;
|
||||
this._input = root.querySelector('input');
|
||||
this._depth = 0;
|
||||
this._gen = 0;
|
||||
this._view = { s: 1, x: 0, y: 0 };
|
||||
this._subFn = () => this._render();
|
||||
// Shadow-DOM listeners live with the shadow DOM — bound once here so
|
||||
// disconnect/reconnect (e.g. React remount) doesn't stack handlers.
|
||||
this._empty.addEventListener('click', () => this._input.click());
|
||||
root.addEventListener('click', (e) => {
|
||||
const act = e.target && e.target.getAttribute && e.target.getAttribute('data-act');
|
||||
if (act === 'replace') { this._exitReframe(true); this._input.click(); }
|
||||
if (act === 'clear') {
|
||||
this._exitReframe(false);
|
||||
this._gen++;
|
||||
this._local = null;
|
||||
if (this.id) setSlot(this.id, null); else this._render();
|
||||
}
|
||||
});
|
||||
this._input.addEventListener('change', () => {
|
||||
const f = this._input.files && this._input.files[0];
|
||||
if (f) this._ingest(f);
|
||||
this._input.value = '';
|
||||
});
|
||||
// naturalWidth/Height aren't known until load — re-apply so the cover
|
||||
// baseline is computed from real dimensions, not the 100%×100% fallback.
|
||||
this._img.addEventListener('load', () => this._applyView());
|
||||
// Gated on editable + fit=cover so share links and contain/fill slots
|
||||
// stay static.
|
||||
this.addEventListener('dblclick', (e) => {
|
||||
if (!this.hasAttribute('data-editable') || !this._reframes()) return;
|
||||
e.preventDefault();
|
||||
if (this.hasAttribute('data-reframe')) this._exitReframe(true);
|
||||
else this._enterReframe();
|
||||
});
|
||||
// Pan + resize both originate on the spill layer. A handle pointerdown
|
||||
// drives an aspect-locked resize anchored at the opposite corner; any
|
||||
// other pointerdown on the spill pans. Offsets are frame-% so a
|
||||
// reframed slot survives responsive resize / PPTX export.
|
||||
this._spill.addEventListener('pointerdown', (e) => {
|
||||
if (e.button !== 0 || !this.hasAttribute('data-reframe')) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this._spill.setPointerCapture(e.pointerId);
|
||||
const rect = this.getBoundingClientRect();
|
||||
const fw = rect.width || 1, fh = rect.height || 1;
|
||||
const corner = e.target.getAttribute && e.target.getAttribute('data-c');
|
||||
let move;
|
||||
if (corner) {
|
||||
// Resize about the OPPOSITE corner. Viewport-px throughout (rect
|
||||
// fw/fh, not clientWidth) so the math survives a transform:scale()
|
||||
// ancestor — deck_stage renders slides scaled-to-fit.
|
||||
const iw = this._img.naturalWidth || 1, ih = this._img.naturalHeight || 1;
|
||||
const base = Math.max(fw / iw, fh / ih);
|
||||
const sx = corner.includes('e') ? 1 : -1;
|
||||
const sy = corner.includes('s') ? 1 : -1;
|
||||
const s0 = this._view.s;
|
||||
const w0 = iw * base * s0, h0 = ih * base * s0;
|
||||
const cx0 = (50 + this._view.x) / 100 * fw;
|
||||
const cy0 = (50 + this._view.y) / 100 * fh;
|
||||
const ox = cx0 - sx * w0 / 2, oy = cy0 - sy * h0 / 2;
|
||||
const diag0 = Math.hypot(w0, h0);
|
||||
const ux = sx * w0 / diag0, uy = sy * h0 / diag0;
|
||||
move = (ev) => {
|
||||
const proj = (ev.clientX - rect.left - ox) * ux +
|
||||
(ev.clientY - rect.top - oy) * uy;
|
||||
const s = clampS(s0 * proj / diag0);
|
||||
const d = diag0 * s / s0;
|
||||
this._view.s = s;
|
||||
this._view.x = (ox + ux * d / 2) / fw * 100 - 50;
|
||||
this._view.y = (oy + uy * d / 2) / fh * 100 - 50;
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
};
|
||||
} else {
|
||||
this.setAttribute('data-panning', '');
|
||||
const start = { px: e.clientX, py: e.clientY, x: this._view.x, y: this._view.y };
|
||||
move = (ev) => {
|
||||
this._view.x = start.x + (ev.clientX - start.px) / fw * 100;
|
||||
this._view.y = start.y + (ev.clientY - start.py) / fh * 100;
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
};
|
||||
}
|
||||
const up = () => {
|
||||
try { this._spill.releasePointerCapture(e.pointerId); } catch {}
|
||||
this._spill.removeEventListener('pointermove', move);
|
||||
this._spill.removeEventListener('pointerup', up);
|
||||
this._spill.removeEventListener('pointercancel', up);
|
||||
this.removeAttribute('data-panning');
|
||||
this._dragUp = null;
|
||||
};
|
||||
// Stashed so _exitReframe (Escape / outside-click mid-drag) can
|
||||
// tear the capture + listeners down synchronously.
|
||||
this._dragUp = up;
|
||||
this._spill.addEventListener('pointermove', move);
|
||||
this._spill.addEventListener('pointerup', up);
|
||||
this._spill.addEventListener('pointercancel', up);
|
||||
});
|
||||
// Wheel zoom stays available inside reframe mode as a trackpad nicety —
|
||||
// zooms toward the cursor (offset' = cursor·(1-k) + offset·k).
|
||||
this.addEventListener('wheel', (e) => {
|
||||
if (!this.hasAttribute('data-reframe')) return;
|
||||
e.preventDefault();
|
||||
const r = this.getBoundingClientRect();
|
||||
const cx = (e.clientX - r.left) / r.width * 100 - 50;
|
||||
const cy = (e.clientY - r.top) / r.height * 100 - 50;
|
||||
const prev = this._view.s;
|
||||
const next = clampS(prev * Math.pow(1.0015, -e.deltaY));
|
||||
if (next === prev) return;
|
||||
const k = next / prev;
|
||||
this._view.s = next;
|
||||
this._view.x = cx * (1 - k) + this._view.x * k;
|
||||
this._view.y = cy * (1 - k) + this._view.y * k;
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Warn once per page — an id-less slot works for the session but
|
||||
// cannot persist, and two id-less slots would share nothing.
|
||||
if (!this.id && !ImageSlot._warned) {
|
||||
ImageSlot._warned = true;
|
||||
console.warn('<image-slot> without an id will not persist its dropped image.');
|
||||
}
|
||||
this.addEventListener('dragenter', this);
|
||||
this.addEventListener('dragover', this);
|
||||
this.addEventListener('dragleave', this);
|
||||
this.addEventListener('drop', this);
|
||||
subs.add(this._subFn);
|
||||
// width%/height% in _applyView encode the frame aspect at call time —
|
||||
// a host resize (responsive grid, pane divider) would stretch the
|
||||
// image until the next _render. Re-render on size change: _render()
|
||||
// re-seeds _view from stored before clamp/apply, so a shrink→grow
|
||||
// cycle round-trips instead of ratcheting x/y toward the narrower
|
||||
// frame's clamp range.
|
||||
this._ro = new ResizeObserver(() => this._render());
|
||||
this._ro.observe(this);
|
||||
load();
|
||||
this._render();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
subs.delete(this._subFn);
|
||||
this.removeEventListener('dragenter', this);
|
||||
this.removeEventListener('dragover', this);
|
||||
this.removeEventListener('dragleave', this);
|
||||
this.removeEventListener('drop', this);
|
||||
if (this._ro) { this._ro.disconnect(); this._ro = null; }
|
||||
this._exitReframe(false);
|
||||
}
|
||||
|
||||
_enterReframe() {
|
||||
if (this.hasAttribute('data-reframe')) return;
|
||||
this.setAttribute('data-reframe', '');
|
||||
this._applyView();
|
||||
// Close on click outside (the spill handler stopPropagation()s so
|
||||
// in-image drags don't reach this) and on Escape. Listeners are held
|
||||
// on the instance so _exitReframe / disconnectedCallback can detach
|
||||
// exactly what was attached.
|
||||
this._outside = (e) => {
|
||||
if (e.composedPath && e.composedPath().includes(this)) return;
|
||||
this._exitReframe(true);
|
||||
};
|
||||
this._esc = (e) => { if (e.key === 'Escape') this._exitReframe(true); };
|
||||
document.addEventListener('pointerdown', this._outside, true);
|
||||
document.addEventListener('keydown', this._esc, true);
|
||||
}
|
||||
|
||||
_exitReframe(commit) {
|
||||
if (!this.hasAttribute('data-reframe')) return;
|
||||
if (this._dragUp) this._dragUp();
|
||||
this.removeAttribute('data-reframe');
|
||||
this.removeAttribute('data-panning');
|
||||
if (this._outside) document.removeEventListener('pointerdown', this._outside, true);
|
||||
if (this._esc) document.removeEventListener('keydown', this._esc, true);
|
||||
this._outside = this._esc = null;
|
||||
if (commit) this._commitView();
|
||||
}
|
||||
|
||||
attributeChangedCallback() { if (this.shadowRoot) this._render(); }
|
||||
|
||||
// handleEvent — one listener object for all four drag events keeps the
|
||||
// add/remove symmetric and the depth counter correct.
|
||||
handleEvent(e) {
|
||||
if (e.type === 'dragenter' || e.type === 'dragover') {
|
||||
// Without preventDefault the browser never fires 'drop'.
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
|
||||
if (e.type === 'dragenter') this._depth++;
|
||||
this.setAttribute('data-over', '');
|
||||
} else if (e.type === 'dragleave') {
|
||||
// dragenter/leave fire for every descendant crossing — count depth
|
||||
// so hovering the icon inside the empty state doesn't flicker.
|
||||
if (--this._depth <= 0) { this._depth = 0; this.removeAttribute('data-over'); }
|
||||
} else if (e.type === 'drop') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this._depth = 0;
|
||||
this.removeAttribute('data-over');
|
||||
const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
|
||||
if (f) this._ingest(f);
|
||||
}
|
||||
}
|
||||
|
||||
async _ingest(file) {
|
||||
this._setError(null);
|
||||
if (!file || ACCEPT.indexOf(file.type) < 0) {
|
||||
this._setError('Drop a PNG, JPEG, WebP, or AVIF image.');
|
||||
return;
|
||||
}
|
||||
// toDataUrl can take hundreds of ms on a large photo. A Clear or a
|
||||
// newer drop during that window would be clobbered when this await
|
||||
// resumes — bump + capture a generation so stale encodes bail.
|
||||
const gen = ++this._gen;
|
||||
try {
|
||||
const w = this.clientWidth || this.offsetWidth || MAX_DIM;
|
||||
const url = await toDataUrl(file, w);
|
||||
if (gen !== this._gen) return;
|
||||
// Only exit reframe once the new image is in hand — a rejected type
|
||||
// or decode failure leaves the in-progress crop untouched.
|
||||
this._exitReframe(false);
|
||||
const val = { u: url, s: 1, x: 0, y: 0 };
|
||||
setSlot(this.id || '', val);
|
||||
// Keep a session-local copy for id-less slots so the drop still
|
||||
// shows, even though it cannot persist.
|
||||
if (!this.id) { this._local = val; this._render(); }
|
||||
} catch (err) {
|
||||
if (gen !== this._gen) return;
|
||||
this._setError('Could not read that image.');
|
||||
console.warn('<image-slot> ingest failed:', err);
|
||||
}
|
||||
}
|
||||
|
||||
_setError(msg) {
|
||||
if (this._err) { this._err.remove(); this._err = null; }
|
||||
if (!msg) return;
|
||||
const d = document.createElement('div');
|
||||
d.className = 'err'; d.textContent = msg;
|
||||
this.shadowRoot.appendChild(d);
|
||||
this._err = d;
|
||||
setTimeout(() => { if (this._err === d) { d.remove(); this._err = null; } }, 3000);
|
||||
}
|
||||
|
||||
// Reframing (pan/resize) is only meaningful for fit=cover — contain/fill
|
||||
// keep the old object-fit path and double-click is a no-op.
|
||||
_reframes() {
|
||||
return this.hasAttribute('data-filled') &&
|
||||
(this.getAttribute('fit') || 'cover') === 'cover';
|
||||
}
|
||||
|
||||
// Cover-baseline geometry, shared by clamp/apply/resize. Null until the
|
||||
// img has loaded (naturalWidth is 0 before that) or when the slot has no
|
||||
// layout box — ResizeObserver fires with a 0×0 rect under display:none,
|
||||
// and clamping against a degenerate 1×1 frame would silently pull the
|
||||
// stored pan toward zero.
|
||||
_geom() {
|
||||
const iw = this._img.naturalWidth, ih = this._img.naturalHeight;
|
||||
const fw = this.clientWidth, fh = this.clientHeight;
|
||||
if (!iw || !ih || !fw || !fh) return null;
|
||||
return { iw, ih, fw, fh, base: Math.max(fw / iw, fh / ih) };
|
||||
}
|
||||
|
||||
_clampView() {
|
||||
// Pan range on each axis is half the overflow past the frame edge.
|
||||
const g = this._geom();
|
||||
if (!g) return;
|
||||
const mx = Math.max(0, (g.iw * g.base * this._view.s / g.fw - 1) * 50);
|
||||
const my = Math.max(0, (g.ih * g.base * this._view.s / g.fh - 1) * 50);
|
||||
this._view.x = Math.max(-mx, Math.min(mx, this._view.x));
|
||||
this._view.y = Math.max(-my, Math.min(my, this._view.y));
|
||||
}
|
||||
|
||||
_applyView() {
|
||||
const g = this._geom();
|
||||
const fit = this.getAttribute('fit') || 'cover';
|
||||
if (fit !== 'cover' || !g) {
|
||||
// Non-cover, or dimensions not known yet (before img load).
|
||||
this._img.style.width = '100%';
|
||||
this._img.style.height = '100%';
|
||||
this._img.style.left = '50%';
|
||||
this._img.style.top = '50%';
|
||||
this._img.style.objectFit = fit;
|
||||
this._img.style.objectPosition = this.getAttribute('position') || '50% 50%';
|
||||
return;
|
||||
}
|
||||
// Cover baseline: img fills the frame on its tighter axis at s=1, so
|
||||
// pan works immediately on the overflowing axis without zooming first.
|
||||
// Width/height and left/top are all frame-% — depends only on the
|
||||
// frame aspect ratio, so a responsive resize keeps the same crop. The
|
||||
// spill layer mirrors the same box so its corners = image corners.
|
||||
const k = g.base * this._view.s;
|
||||
const w = (g.iw * k / g.fw * 100) + '%';
|
||||
const h = (g.ih * k / g.fh * 100) + '%';
|
||||
const l = (50 + this._view.x) + '%';
|
||||
const t = (50 + this._view.y) + '%';
|
||||
this._img.style.width = w; this._img.style.height = h;
|
||||
this._img.style.left = l; this._img.style.top = t;
|
||||
this._img.style.objectFit = '';
|
||||
this._spill.style.width = w; this._spill.style.height = h;
|
||||
this._spill.style.left = l; this._spill.style.top = t;
|
||||
}
|
||||
|
||||
_commitView() {
|
||||
const v = { s: this._view.s, x: this._view.x, y: this._view.y };
|
||||
if (this._userUrl) v.u = this._userUrl;
|
||||
// Framing-only (no u) persists too so an author-src slot remembers its
|
||||
// crop; clearing the sidecar still falls through to src=.
|
||||
if (this.id) setSlot(this.id, v);
|
||||
else { this._local = v; }
|
||||
}
|
||||
|
||||
_render() {
|
||||
// Shape / mask. Presets use border-radius so the dashed ring can
|
||||
// follow the rounded outline; clip-path is only applied for an
|
||||
// explicit `mask` (the ring is hidden there since a rectangle
|
||||
// dashed border chopped by an arbitrary polygon looks broken).
|
||||
const mask = this.getAttribute('mask');
|
||||
const shape = (this.getAttribute('shape') || 'rounded').toLowerCase();
|
||||
let radius = '';
|
||||
if (shape === 'circle') radius = '50%';
|
||||
else if (shape === 'pill') radius = '9999px';
|
||||
else if (shape === 'rounded') {
|
||||
const n = parseFloat(this.getAttribute('radius'));
|
||||
radius = (Number.isFinite(n) ? n : 12) + 'px';
|
||||
}
|
||||
this._frame.style.borderRadius = mask ? '' : radius;
|
||||
this._frame.style.clipPath = mask || '';
|
||||
this._ring.style.borderRadius = mask ? '' : radius;
|
||||
this._ring.style.display = mask ? 'none' : '';
|
||||
|
||||
// Controls and reframe entry gate on this so share links stay read-only.
|
||||
const editable = !!(window.omelette && window.omelette.writeFile);
|
||||
this.toggleAttribute('data-editable', editable);
|
||||
this._sub.style.display = editable ? '' : 'none';
|
||||
|
||||
// Content. The sidecar is also writable by the agent's write_file
|
||||
// tool, so its value isn't guaranteed canvas-originated — only accept
|
||||
// data:image/ URLs from it. The `src` attribute is author-controlled
|
||||
// (Claude wrote it into the HTML) so it passes through unchanged.
|
||||
let stored = this.id ? getSlot(this.id) : this._local;
|
||||
if (stored && stored.u && !/^data:image\//i.test(stored.u)) stored = null;
|
||||
const srcAttr = this.getAttribute('src') || '';
|
||||
this._userUrl = (stored && stored.u) || null;
|
||||
const url = this._userUrl || srcAttr;
|
||||
// Don't clobber an in-flight reframe with a store-triggered re-render.
|
||||
if (!this.hasAttribute('data-reframe')) {
|
||||
this._view = {
|
||||
s: stored && Number.isFinite(stored.s) ? clampS(stored.s) : 1,
|
||||
x: stored && Number.isFinite(stored.x) ? stored.x : 0,
|
||||
y: stored && Number.isFinite(stored.y) ? stored.y : 0,
|
||||
};
|
||||
}
|
||||
this._cap.textContent = this.getAttribute('placeholder') || 'Drop an image';
|
||||
// Toggle via style.display — the [hidden] attribute alone loses to
|
||||
// the display:flex / display:block rules in the stylesheet above.
|
||||
if (url) {
|
||||
if (this._img.getAttribute('src') !== url) {
|
||||
this._img.src = url;
|
||||
this._ghost.src = url;
|
||||
}
|
||||
this._img.style.display = 'block';
|
||||
this._empty.style.display = 'none';
|
||||
this.setAttribute('data-filled', '');
|
||||
this._clampView();
|
||||
this._applyView();
|
||||
} else {
|
||||
this._img.style.display = 'none';
|
||||
this._img.removeAttribute('src');
|
||||
this._ghost.removeAttribute('src');
|
||||
this._empty.style.display = 'flex';
|
||||
this.removeAttribute('data-filled');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!customElements.get('image-slot')) {
|
||||
customElements.define('image-slot', ImageSlot);
|
||||
}
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,239 @@
|
||||
/* LynkedUp Pro v3 — interactivity */
|
||||
|
||||
// ---------- Mobile nav (hamburger toggle) ----------
|
||||
(function() {
|
||||
const toggle = document.getElementById('navToggle');
|
||||
const links = document.getElementById('navLinks');
|
||||
const overlay = document.getElementById('navOverlay');
|
||||
if (!toggle || !links) return;
|
||||
|
||||
function setOpen(open) {
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
toggle.classList.toggle('is-open', open);
|
||||
links.classList.toggle('is-open', open);
|
||||
if (overlay) overlay.classList.toggle('is-open', open);
|
||||
document.body.classList.toggle('nav-locked', open);
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const open = toggle.getAttribute('aria-expanded') !== 'true';
|
||||
setOpen(open);
|
||||
});
|
||||
if (overlay) overlay.addEventListener('click', () => setOpen(false));
|
||||
// Close on any link tap inside the panel
|
||||
links.querySelectorAll('a').forEach(a => {
|
||||
a.addEventListener('click', () => setOpen(false));
|
||||
});
|
||||
// Close when crossing back to desktop width
|
||||
const mq = window.matchMedia('(min-width: 1024px)');
|
||||
mq.addEventListener('change', e => { if (e.matches) setOpen(false); });
|
||||
// Close on Escape
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
});
|
||||
})();
|
||||
|
||||
// ---------- Theme toggle (light/dark) ----------
|
||||
(function() {
|
||||
const root = document.documentElement;
|
||||
const key = 'lp-theme';
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved === 'light' || saved === 'dark') {
|
||||
root.setAttribute('data-theme', saved);
|
||||
} else {
|
||||
root.setAttribute('data-theme', 'dark'); // default
|
||||
}
|
||||
const btn = document.getElementById('themeToggle');
|
||||
if (btn) {
|
||||
btn.addEventListener('click', () => {
|
||||
const current = root.getAttribute('data-theme') || 'dark';
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
root.setAttribute('data-theme', next);
|
||||
localStorage.setItem(key, next);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// ---------- Countdown timer (both final card + sticky bar) ----------
|
||||
(function() {
|
||||
let secs = 42, mins = 27, hours = 14, days = 3;
|
||||
const get = id => document.getElementById(id);
|
||||
const elFinal = { s: get('cdS'), m: get('cdM'), h: get('cdH'), d: get('cdD') };
|
||||
const elStk = { s: get('ssS'), m: get('ssM'), h: get('ssH'), d: get('ssD') };
|
||||
|
||||
function pad(n) { return String(n).padStart(2, '0'); }
|
||||
function render() {
|
||||
const v = { d: pad(days), h: pad(hours), m: pad(mins), s: pad(secs) };
|
||||
for (const k of ['d','h','m','s']) {
|
||||
if (elFinal[k]) elFinal[k].textContent = v[k];
|
||||
if (elStk[k]) elStk[k].textContent = v[k];
|
||||
}
|
||||
}
|
||||
setInterval(() => {
|
||||
secs--;
|
||||
if (secs < 0) { secs = 59; mins--;
|
||||
if (mins < 0) { mins = 59; hours--;
|
||||
if (hours < 0) { hours = 23; days = Math.max(0, days - 1); }
|
||||
}
|
||||
}
|
||||
render();
|
||||
}, 1000);
|
||||
render();
|
||||
})();
|
||||
|
||||
// ---------- Sticky CTA reveal/hide ----------
|
||||
(function() {
|
||||
const el = document.getElementById('stickyCta');
|
||||
const close = document.getElementById('stickyClose');
|
||||
if (!el || !close) return;
|
||||
let dismissed = false;
|
||||
window.addEventListener('scroll', () => {
|
||||
if (dismissed) return;
|
||||
if (window.scrollY > 700) el.classList.add('show');
|
||||
else el.classList.remove('show');
|
||||
});
|
||||
close.addEventListener('click', () => {
|
||||
dismissed = true;
|
||||
el.classList.remove('show');
|
||||
document.body.style.paddingBottom = '0';
|
||||
});
|
||||
})();
|
||||
|
||||
// ---------- Video player ----------
|
||||
(function() {
|
||||
const frame = document.getElementById('videoFrame');
|
||||
const playBtn = document.getElementById('videoPlay');
|
||||
const videoEl = document.getElementById('videoEl');
|
||||
if (!frame || !playBtn || !videoEl) return;
|
||||
|
||||
function play(at) {
|
||||
frame.classList.add('playing');
|
||||
if (typeof at === 'number' && !isNaN(at)) {
|
||||
try { videoEl.currentTime = at; } catch (e) {}
|
||||
}
|
||||
videoEl.play().catch(() => {});
|
||||
}
|
||||
playBtn.addEventListener('click', () => play());
|
||||
document.querySelectorAll('.vc[data-seek]').forEach(chip => {
|
||||
chip.addEventListener('click', () => {
|
||||
const at = parseFloat(chip.dataset.seek);
|
||||
play(at);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
// ---------- Dashboard product-view tabs ----------
|
||||
(function() {
|
||||
const wrap = document.getElementById('dashWindow');
|
||||
if (!wrap) return;
|
||||
const tabs = wrap.querySelectorAll('.dw-tab');
|
||||
const shots = wrap.querySelectorAll('.dw-shot');
|
||||
const urlText = document.getElementById('dwUrlText');
|
||||
|
||||
function activate(name) {
|
||||
tabs.forEach(t => {
|
||||
const on = t.dataset.tab === name;
|
||||
t.classList.toggle('is-active', on);
|
||||
t.setAttribute('aria-selected', on ? 'true' : 'false');
|
||||
if (on && urlText && t.dataset.url) urlText.textContent = t.dataset.url;
|
||||
});
|
||||
shots.forEach(s => s.classList.toggle('is-active', s.dataset.shot === name));
|
||||
}
|
||||
|
||||
tabs.forEach(t => {
|
||||
t.addEventListener('click', () => activate(t.dataset.tab));
|
||||
});
|
||||
})();
|
||||
|
||||
// ---------- Smooth in-page nav ----------
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||||
a.addEventListener('click', (e) => {
|
||||
const id = a.getAttribute('href');
|
||||
if (id.length < 2) return;
|
||||
const t = document.querySelector(id);
|
||||
if (!t) return;
|
||||
e.preventDefault();
|
||||
window.scrollTo({ top: t.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
// ---------- Tweaks panel ----------
|
||||
(function() {
|
||||
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
||||
"accentOrange": "#f97316",
|
||||
"accentCyan": "#22d3ee",
|
||||
"bgIntensity": 0.65,
|
||||
"showGrid": true
|
||||
}/*EDITMODE-END*/;
|
||||
|
||||
let state = { ...TWEAK_DEFAULTS };
|
||||
let active = false;
|
||||
const root = document.getElementById('tweaks-root');
|
||||
|
||||
function applyState() {
|
||||
document.documentElement.style.setProperty('--orange', state.accentOrange);
|
||||
document.documentElement.style.setProperty('--cyan', state.accentCyan);
|
||||
document.documentElement.style.setProperty('--cyan-2', state.accentCyan);
|
||||
const orbs = document.querySelectorAll('.bg-orb');
|
||||
orbs.forEach(o => o.style.opacity = state.bgIntensity);
|
||||
const grid = document.querySelector('.bg-grid');
|
||||
if (grid) grid.style.display = state.showGrid ? '' : 'none';
|
||||
}
|
||||
applyState();
|
||||
|
||||
function render() {
|
||||
if (!active) { root.innerHTML = ''; return; }
|
||||
root.innerHTML = `
|
||||
<div style="width:300px; background:rgba(5,15,36,.96); backdrop-filter:blur(20px); border:1px solid rgba(56,189,248,.3); border-radius:16px; box-shadow:0 30px 60px -20px rgba(0,0,0,.8); padding:18px; font-family:'Plus Jakarta Sans'; color:#e6edf6;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
||||
<strong style="font-size:14px; letter-spacing:-.01em; color:#fff;">Tweaks</strong>
|
||||
<button id="tw-close" style="border:0; background:transparent; cursor:pointer; color:#94a3b8; font-size:18px;">×</button>
|
||||
</div>
|
||||
|
||||
<div style="font-size:11px; color:#94a3b8; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">CTA Orange</div>
|
||||
<div style="display:flex; gap:6px; margin-bottom:14px;">
|
||||
${['#f97316','#ef4444','#fbbf24','#ec4899'].map(c => `<button data-orange="${c}" style="flex:1; height:32px; border-radius:8px; border:2px solid ${state.accentOrange===c?'#fff':'transparent'}; background:${c}; cursor:pointer;"></button>`).join('')}
|
||||
</div>
|
||||
|
||||
<div style="font-size:11px; color:#94a3b8; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">Accent Cyan</div>
|
||||
<div style="display:flex; gap:6px; margin-bottom:14px;">
|
||||
${['#22d3ee','#38bdf8','#a78bfa','#10b981'].map(c => `<button data-cyan="${c}" style="flex:1; height:32px; border-radius:8px; border:2px solid ${state.accentCyan===c?'#fff':'transparent'}; background:${c}; cursor:pointer;"></button>`).join('')}
|
||||
</div>
|
||||
|
||||
<div style="font-size:11px; color:#94a3b8; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">Background glow · ${Math.round(state.bgIntensity*100)}%</div>
|
||||
<input type="range" min="0" max="1" step="0.05" value="${state.bgIntensity}" id="tw-bg" style="width:100%; margin-bottom:14px;">
|
||||
|
||||
<label style="display:flex; align-items:center; gap:8px; font-size:13px; color:#cbd5e1; cursor:pointer;">
|
||||
<input type="checkbox" id="tw-grid" ${state.showGrid?'checked':''}/>
|
||||
Show background grid
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
root.querySelector('#tw-close').onclick = () => {
|
||||
active = false; render();
|
||||
window.parent.postMessage({type:'__edit_mode_dismissed'}, '*');
|
||||
};
|
||||
root.querySelectorAll('[data-orange]').forEach(b => b.onclick = () => {
|
||||
state.accentOrange = b.dataset.orange; applyState(); render();
|
||||
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{accentOrange: state.accentOrange}}, '*');
|
||||
});
|
||||
root.querySelectorAll('[data-cyan]').forEach(b => b.onclick = () => {
|
||||
state.accentCyan = b.dataset.cyan; applyState(); render();
|
||||
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{accentCyan: state.accentCyan}}, '*');
|
||||
});
|
||||
root.querySelector('#tw-bg').oninput = (e) => {
|
||||
state.bgIntensity = parseFloat(e.target.value); applyState(); render();
|
||||
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{bgIntensity: state.bgIntensity}}, '*');
|
||||
};
|
||||
root.querySelector('#tw-grid').onchange = (e) => {
|
||||
state.showGrid = e.target.checked; applyState(); render();
|
||||
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{showGrid: state.showGrid}}, '*');
|
||||
};
|
||||
}
|
||||
|
||||
window.addEventListener('message', (e) => {
|
||||
if (e.data?.type === '__activate_edit_mode') { active = true; render(); }
|
||||
if (e.data?.type === '__deactivate_edit_mode') { active = false; render(); }
|
||||
});
|
||||
window.parent.postMessage({type:'__edit_mode_available'}, '*');
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Reference in New Issue
Block a user