forked from Goutam/lynkeduppro-crm
tanweer919
a459fefb7f
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.
1621 lines
73 KiB
HTML
1621 lines
73 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>LynkedUp Pro - One platform to run your entire roofing business</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg: #ffffff;
|
||
--bg-soft: #f8fafc;
|
||
--bg-tint: #f1f5f9;
|
||
--line: #e2e8f0;
|
||
--line-soft: #eef2f7;
|
||
|
||
--ink: #0f172a; /* dark charcoal */
|
||
--ink-2: #1e293b;
|
||
--body: #475569; /* muted gray body */
|
||
--muted: #64748b;
|
||
--muted-2: #94a3b8;
|
||
|
||
--blue: #0284c7;
|
||
--blue-2: #0ea5e9;
|
||
--blue-ink: #0c4a6e;
|
||
--mint: #10b981;
|
||
--mint-ink: #047857;
|
||
--amber: #f59e0b;
|
||
--amber-2: #f97316;
|
||
--amber-ink: #b45309;
|
||
|
||
--shadow-sm: 0 1px 2px rgba(15,23,42,.04);
|
||
--shadow-md: 0 8px 20px -10px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.04);
|
||
--shadow-lg: 0 30px 60px -30px rgba(15,23,42,.22), 0 18px 36px -18px rgba(15,23,42,.10);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; }
|
||
body {
|
||
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
|
||
color: var(--ink);
|
||
background: var(--bg);
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
overflow-x: hidden;
|
||
padding-bottom: 72px; /* room for sticky bar */
|
||
}
|
||
.mono { font-family: 'JetBrains Mono', monospace; }
|
||
|
||
/* ============== Page bg - very soft ============== */
|
||
.page-bg {
|
||
position: fixed; inset: 0; z-index: -1; pointer-events: none;
|
||
background: var(--bg);
|
||
}
|
||
.page-bg::before {
|
||
content:""; position: absolute; border-radius: 50%; filter: blur(110px); opacity: .5;
|
||
width: 900px; height: 900px; left: -260px; top: -300px;
|
||
background: radial-gradient(circle, rgba(14,165,233,.20), rgba(14,165,233,0) 70%);
|
||
}
|
||
.page-bg::after {
|
||
content:""; position: absolute; border-radius: 50%; filter: blur(110px); opacity: .42;
|
||
width: 700px; height: 700px; right: -180px; top: 80px;
|
||
background: radial-gradient(circle, rgba(249,115,22,.16), rgba(249,115,22,0) 70%);
|
||
}
|
||
|
||
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }
|
||
|
||
/* ============== Nav ============== */
|
||
.nav {
|
||
position: sticky; top: 0; z-index: 50;
|
||
backdrop-filter: blur(14px) saturate(140%);
|
||
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
||
background: rgba(255,255,255,.78);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.nav-inner {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 68px;
|
||
}
|
||
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
|
||
.brand-mark {
|
||
width: 30px; height: 30px; border-radius: 8px;
|
||
background: linear-gradient(135deg, var(--blue) 0%, #0369a1 100%);
|
||
display: grid; place-items: center; color: #fff;
|
||
box-shadow: 0 4px 12px -4px rgba(2,132,199,.55);
|
||
}
|
||
.nav-links { display: flex; gap: 32px; }
|
||
.nav-links a {
|
||
color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500;
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
}
|
||
.nav-links a:hover { color: var(--blue); }
|
||
.nav-cta { display: flex; align-items: center; gap: 10px; }
|
||
|
||
/* ============== Buttons ============== */
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1;
|
||
padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
|
||
cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s;
|
||
text-decoration: none; white-space: nowrap;
|
||
}
|
||
.btn:hover { transform: translateY(-1px); }
|
||
.btn-ghost { color: var(--ink-2); background: transparent; border-color: var(--line); }
|
||
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink-2); }
|
||
.btn-primary {
|
||
color: #fff;
|
||
background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
|
||
box-shadow: 0 8px 20px -8px rgba(2,132,199,.6), inset 0 1px 0 rgba(255,255,255,.25);
|
||
}
|
||
.btn-amber {
|
||
color: #fff;
|
||
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 60%, #ea8a00 100%);
|
||
box-shadow: 0 10px 22px -10px rgba(245,158,11,.7), inset 0 1px 0 rgba(255,255,255,.35);
|
||
}
|
||
.btn-dark {
|
||
color: #fff;
|
||
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
|
||
box-shadow: 0 8px 18px -8px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.1);
|
||
}
|
||
.btn-lg { padding: 16px 28px; font-size: 15px; }
|
||
.btn-xl { padding: 20px 36px; font-size: 16px; font-weight: 700; }
|
||
|
||
/* ============== Section eyebrow / heading ============== */
|
||
.eyebrow {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
padding: 6px 14px 6px 10px; border-radius: 999px;
|
||
color: var(--blue-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.eyebrow .e-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
|
||
.eyebrow.amber { color: var(--amber-ink); }
|
||
.eyebrow.amber .e-dot { background: var(--amber); }
|
||
.eyebrow.mint { color: var(--mint-ink); }
|
||
.eyebrow.mint .e-dot { background: var(--mint); }
|
||
|
||
.sec-h {
|
||
font-size: 52px; line-height: 1.05; letter-spacing: -.035em; font-weight: 800;
|
||
color: var(--ink);
|
||
margin: 22px 0 18px; text-wrap: balance;
|
||
}
|
||
.sec-sub {
|
||
font-size: 18px; line-height: 1.55; color: var(--body);
|
||
text-wrap: pretty;
|
||
}
|
||
.sec-center { text-align: center; }
|
||
.sec-center .sec-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
|
||
|
||
/* ============== HERO ============== */
|
||
.hero { padding: 80px 0 60px; text-align: center; }
|
||
.ltd-pill {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
padding: 7px 8px 7px 14px; border-radius: 999px;
|
||
background: #fffbeb;
|
||
border: 1px solid rgba(245,158,11,.35);
|
||
box-shadow: 0 4px 12px -6px rgba(245,158,11,.35);
|
||
font-size: 13px; font-weight: 600; color: var(--amber-ink);
|
||
}
|
||
.ltd-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.18); animation: pulse 2.2s infinite; }
|
||
.ltd-pill .badge {
|
||
background: linear-gradient(180deg, #fbbf24, #f59e0b);
|
||
color: #fff; font-weight: 700; font-size: 11px;
|
||
padding: 4px 10px; border-radius: 999px; letter-spacing: .04em;
|
||
}
|
||
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.18); } 50% { box-shadow: 0 0 0 9px rgba(245,158,11,.06); } }
|
||
|
||
.hero h1 {
|
||
font-size: 78px; line-height: 1.0; letter-spacing: -.04em; font-weight: 800;
|
||
margin: 28px auto 22px; max-width: 980px; text-wrap: balance;
|
||
}
|
||
.hero h1 .accent {
|
||
background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
|
||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||
}
|
||
.hero .sub {
|
||
font-size: 19px; line-height: 1.55; color: var(--body);
|
||
max-width: 680px; margin: 0 auto 36px;
|
||
}
|
||
.hero-ctas { display: inline-flex; gap: 12px; align-items: center; }
|
||
|
||
.hero-trust {
|
||
display: flex; align-items: center; justify-content: center;
|
||
gap: 28px; margin-top: 28px; color: var(--muted); font-size: 13.5px;
|
||
}
|
||
.hero-trust .it { display: inline-flex; align-items: center; gap: 6px; }
|
||
.hero-trust .it svg { color: var(--mint); }
|
||
.hero-trust .sep { width: 1px; height: 14px; background: var(--line); }
|
||
|
||
/* ============== Hero dashboard frame ============== */
|
||
.hero-stage {
|
||
position: relative; margin: 64px auto 0;
|
||
max-width: 1180px;
|
||
}
|
||
.browser-frame {
|
||
background: #f1f5f9;
|
||
border: 1px solid var(--line);
|
||
border-radius: 18px 18px 16px 16px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 1px 0 rgba(255,255,255,.6) inset,
|
||
0 60px 100px -40px rgba(2,132,199,.30),
|
||
0 30px 60px -30px rgba(15,23,42,.30);
|
||
}
|
||
.browser-bar {
|
||
display: flex; align-items: center; gap: 10px;
|
||
height: 40px; padding: 0 16px;
|
||
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.browser-bar .tl { display: flex; gap: 6px; }
|
||
.browser-bar .tl span { width: 11px; height: 11px; border-radius: 50%; }
|
||
.browser-bar .tl span:nth-child(1) { background: #fb7185; }
|
||
.browser-bar .tl span:nth-child(2) { background: #fbbf24; }
|
||
.browser-bar .tl span:nth-child(3) { background: #34d399; }
|
||
.browser-bar .url {
|
||
flex: 1; max-width: 360px; margin: 0 auto;
|
||
height: 24px; background: #fff; border: 1px solid var(--line);
|
||
border-radius: 6px; padding: 0 12px; display: flex; align-items: center;
|
||
font-size: 12px; color: var(--muted); gap: 8px;
|
||
}
|
||
.browser-bar .url svg { color: var(--mint); }
|
||
|
||
/* Hero dashboard screenshot - responsive on all devices */
|
||
.ob-shot { background: #fff; line-height: 0; }
|
||
.ob-shot img { display: block; width: 100%; height: auto; max-width: 100%; }
|
||
|
||
/* Owners Box dashboard */
|
||
.ob {
|
||
background: #ffffff;
|
||
display: grid; grid-template-columns: 220px 1fr;
|
||
height: 580px;
|
||
}
|
||
.ob-side {
|
||
border-right: 1px solid var(--line-soft); padding: 20px 14px;
|
||
background: #fbfcfd;
|
||
display: flex; flex-direction: column; gap: 4px;
|
||
}
|
||
.ob-side .sec-l {
|
||
font-size: 10.5px; font-weight: 700; color: var(--muted-2);
|
||
text-transform: uppercase; letter-spacing: .1em;
|
||
padding: 16px 10px 6px;
|
||
}
|
||
.ob-side .item {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 8px 10px; border-radius: 8px;
|
||
font-size: 13px; color: var(--ink-2); font-weight: 500;
|
||
}
|
||
.ob-side .item.active { background: rgba(2,132,199,.10); color: var(--blue-ink); font-weight: 600; }
|
||
.ob-side .item svg { color: var(--muted); }
|
||
.ob-side .item.active svg { color: var(--blue); }
|
||
.ob-side .item .count {
|
||
margin-left: auto; font-size: 11px; color: var(--muted-2);
|
||
background: var(--bg-soft); padding: 1px 6px; border-radius: 4px;
|
||
}
|
||
.ob-side .item.active .count { background: rgba(2,132,199,.15); color: var(--blue-ink); }
|
||
|
||
.ob-main { padding: 22px 26px; overflow: hidden; min-width: 0; }
|
||
.ob-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
|
||
.ob-head h2 {
|
||
font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0;
|
||
}
|
||
.ob-head .crumb { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
|
||
.ob-head .live {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
background: #ecfdf5; color: var(--mint-ink); font-size: 11.5px; font-weight: 600;
|
||
padding: 5px 10px; border-radius: 999px; border: 1px solid #a7f3d0;
|
||
}
|
||
.ob-head .live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
|
||
|
||
.ob-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
|
||
.kpi {
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px; padding: 14px 16px;
|
||
background: #ffffff;
|
||
}
|
||
.kpi .l { font-size: 11.5px; color: var(--muted); font-weight: 500; }
|
||
.kpi .v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-top: 4px; }
|
||
.kpi .d { font-size: 11px; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
|
||
.kpi .d.up { color: var(--mint-ink); }
|
||
.kpi .d.dn { color: #b91c1c; }
|
||
.kpi .d.am { color: var(--amber-ink); }
|
||
|
||
.ob-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
|
||
.ob-card {
|
||
border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
|
||
background: #fff;
|
||
}
|
||
.ob-card h3 { font-size: 13px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; color: var(--ink); display: flex; justify-content: space-between; }
|
||
.ob-card h3 .opt { color: var(--muted-2); font-weight: 500; font-size: 11px; }
|
||
|
||
/* Pipeline chart */
|
||
.chart { height: 160px; position: relative; }
|
||
.chart svg { width: 100%; height: 100%; overflow: visible; }
|
||
.chart .x { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-2); }
|
||
|
||
/* Jobs list */
|
||
.jobs-list { display: flex; flex-direction: column; gap: 10px; }
|
||
.job-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 10px 12px; border-radius: 10px;
|
||
background: var(--bg-soft);
|
||
border: 1px solid var(--line-soft);
|
||
}
|
||
.job-row .stat { width: 8px; height: 8px; border-radius: 50%; flex: none; }
|
||
.job-row .stat.b { background: var(--blue); }
|
||
.job-row .stat.m { background: var(--mint); }
|
||
.job-row .stat.a { background: var(--amber); }
|
||
.job-row .name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
|
||
.job-row .meta { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
|
||
.job-row .amt { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ink); }
|
||
|
||
/* Trust badges flanking */
|
||
.hero-flanks {
|
||
position: absolute; top: 200px; left: 0; right: 0;
|
||
display: flex; justify-content: space-between; pointer-events: none;
|
||
padding: 0 -20px;
|
||
}
|
||
.flank-card {
|
||
background: #fff; border: 1px solid var(--line);
|
||
border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-md);
|
||
transform: translateX(-50%);
|
||
display: flex; align-items: center; gap: 12px;
|
||
pointer-events: auto;
|
||
}
|
||
.flank-card.right { transform: translateX(50%); }
|
||
.flank-card .ic {
|
||
width: 38px; height: 38px; border-radius: 10px; background: var(--bg-soft);
|
||
display: grid; place-items: center; color: var(--blue);
|
||
}
|
||
.flank-card .ic.mint { color: var(--mint); background: #ecfdf5; }
|
||
.flank-card .ic.amber { color: var(--amber); background: #fffbeb; }
|
||
.flank-card .l { font-size: 10.5px; color: var(--muted); }
|
||
.flank-card .v { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
|
||
|
||
/* ============== Logo strip ============== */
|
||
.logos {
|
||
margin-top: 80px;
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 28px 0;
|
||
}
|
||
.logos-inner {
|
||
display: flex; align-items: center; justify-content: space-between; gap: 36px;
|
||
}
|
||
.logos-label {
|
||
color: var(--muted); font-size: 12px; font-weight: 600;
|
||
letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
|
||
}
|
||
.logos-row { display: flex; gap: 56px; align-items: center; flex: 1; justify-content: flex-end; opacity: .85; }
|
||
.logos-row span { color: #94a3b8; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
|
||
.logos-row .lg-1 { font-style: italic; font-family: 'JetBrains Mono'; font-weight: 800; }
|
||
.logos-row .lg-3 { letter-spacing: .3em; font-weight: 600; font-size: 13px; }
|
||
.logos-row .lg-5 { font-weight: 800; }
|
||
|
||
/* ============== FEATURES - divider style ============== */
|
||
.sec-features { padding: 120px 0 60px; }
|
||
.feature-rows {
|
||
margin-top: 60px;
|
||
display: grid; grid-template-columns: repeat(3, 1fr);
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
border: 1px solid var(--line);
|
||
overflow: hidden;
|
||
}
|
||
.feature-cell {
|
||
padding: 36px 32px;
|
||
border-right: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
transition: background .2s ease;
|
||
}
|
||
/* remove outer borders */
|
||
.feature-cell:nth-child(3n) { border-right: 0; }
|
||
.feature-cell:nth-child(n+4) { /* second row */ }
|
||
.feature-cell:nth-last-child(-n+3) { border-bottom: 0; }
|
||
.feature-cell:hover { background: #fbfdff; }
|
||
|
||
.feature-num {
|
||
font-family: 'JetBrains Mono'; font-size: 12px;
|
||
color: var(--muted-2); font-weight: 600;
|
||
margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.feature-num::before {
|
||
content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
|
||
}
|
||
.feature-cell.mint .feature-num::before { background: var(--mint); }
|
||
.feature-cell.amber .feature-num::before { background: var(--amber); }
|
||
|
||
.feature-cell h3 {
|
||
font-size: 21px; font-weight: 700; letter-spacing: -.02em;
|
||
color: var(--ink); margin: 0 0 10px;
|
||
}
|
||
.feature-cell p {
|
||
font-size: 14.5px; line-height: 1.55; color: var(--body);
|
||
margin: 0 0 18px;
|
||
}
|
||
.feature-cell .ic {
|
||
width: 44px; height: 44px; border-radius: 12px;
|
||
background: #f0f9ff;
|
||
border: 1px solid #e0f2fe;
|
||
display: grid; place-items: center; color: var(--blue);
|
||
margin-bottom: 22px;
|
||
}
|
||
.feature-cell.mint .ic { background: #ecfdf5; border-color: #d1fae5; color: var(--mint-ink); }
|
||
.feature-cell.amber .ic { background: #fffbeb; border-color: #fef3c7; color: var(--amber-ink); }
|
||
|
||
.feature-link {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: none;
|
||
}
|
||
.feature-link:hover { gap: 9px; }
|
||
.feature-cell.mint .feature-link { color: var(--mint-ink); }
|
||
.feature-cell.amber .feature-link { color: var(--amber-ink); }
|
||
|
||
/* ============== WORKFLOW ============== */
|
||
.sec-workflow { padding: 120px 0; }
|
||
.workflow {
|
||
margin-top: 80px;
|
||
position: relative;
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
border-radius: 28px;
|
||
padding: 80px 60px 70px;
|
||
overflow: hidden;
|
||
}
|
||
.workflow::before {
|
||
content: ""; position: absolute; inset: 0;
|
||
background:
|
||
radial-gradient(ellipse 500px 300px at 50% 50%, rgba(14,165,233,.05), transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.wf-stage {
|
||
position: relative;
|
||
height: 380px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.wf-hub {
|
||
position: relative; z-index: 3;
|
||
width: 140px; height: 140px; border-radius: 50%;
|
||
background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
|
||
box-shadow: 0 30px 60px -20px rgba(2,132,199,.5), inset 0 1px 0 rgba(255,255,255,.3);
|
||
display: grid; place-items: center; color: #fff;
|
||
text-align: center;
|
||
}
|
||
.wf-hub::before, .wf-hub::after {
|
||
content:""; position: absolute; border-radius: 50%; border: 1px solid rgba(2,132,199,.25);
|
||
}
|
||
.wf-hub::before { inset: -22px; }
|
||
.wf-hub::after { inset: -46px; border-color: rgba(2,132,199,.12); }
|
||
.wf-hub-inner { z-index: 2; }
|
||
.wf-hub-inner .lbl { font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; opacity: .85; }
|
||
.wf-hub-inner .nm { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
|
||
.wf-hub-inner svg { margin-bottom: 6px; }
|
||
|
||
.wf-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
|
||
|
||
.wf-node {
|
||
position: absolute; z-index: 2;
|
||
width: 200px;
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: 14px 16px;
|
||
box-shadow: var(--shadow-md);
|
||
transition: transform .2s, box-shadow .2s, border-color .2s;
|
||
}
|
||
.wf-node:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 18px 40px -16px rgba(2,132,199,.3); }
|
||
.wf-node .num {
|
||
font-family: 'JetBrains Mono'; font-size: 10px;
|
||
color: var(--blue); font-weight: 700; letter-spacing: .1em;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.wf-node .num span {
|
||
background: var(--blue); color: #fff; width: 16px; height: 16px; border-radius: 50%;
|
||
display: inline-grid; place-items: center; font-size: 9px;
|
||
}
|
||
.wf-node .t {
|
||
font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
|
||
margin: 8px 0 4px;
|
||
}
|
||
.wf-node .s { font-size: 11.5px; color: var(--body); line-height: 1.45; }
|
||
.wf-node .ic {
|
||
position: absolute; top: -16px; right: 14px;
|
||
width: 32px; height: 32px; border-radius: 9px;
|
||
background: #fff; border: 1px solid var(--line);
|
||
display: grid; place-items: center; color: var(--blue);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
/* node positions around hub */
|
||
.wfn-1 { top: 0; left: 4%; }
|
||
.wfn-2 { top: 0; right: 4%; }
|
||
.wfn-3 { top: 45%; left: -2%; transform: translateY(-50%); }
|
||
.wfn-4 { top: 45%; right: -2%; transform: translateY(-50%); }
|
||
.wfn-5 { bottom: 0; left: 16%; }
|
||
.wfn-6 { bottom: 0; right: 16%; }
|
||
|
||
/* ============== PRICING - 3 col matrix ============== */
|
||
.sec-pricing {
|
||
padding: 60px 0 120px;
|
||
background: linear-gradient(180deg, transparent 0%, #fbfcfd 30%, #fbfcfd 100%);
|
||
}
|
||
.pricing-grid {
|
||
margin-top: 60px;
|
||
display: grid; grid-template-columns: 1fr 1fr 1.15fr;
|
||
gap: 16px;
|
||
max-width: 1140px; margin-left: auto; margin-right: auto;
|
||
align-items: stretch;
|
||
}
|
||
.pcard {
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
border-radius: 20px;
|
||
padding: 32px 30px;
|
||
display: flex; flex-direction: column;
|
||
position: relative;
|
||
}
|
||
.pcard.muted {
|
||
background: #fbfcfd;
|
||
color: var(--muted);
|
||
}
|
||
.pcard.muted * { /* keep readable */ }
|
||
.pcard h4 {
|
||
font-size: 13px; font-weight: 700;
|
||
color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
|
||
margin: 0 0 8px;
|
||
}
|
||
.pcard .name {
|
||
font-size: 22px; font-weight: 800; letter-spacing: -.025em; color: var(--ink);
|
||
margin: 0 0 8px;
|
||
}
|
||
.pcard .desc {
|
||
font-size: 13.5px; color: var(--body); line-height: 1.5; margin: 0 0 22px;
|
||
min-height: 40px;
|
||
}
|
||
.pcard .price {
|
||
display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
|
||
}
|
||
.pcard .price .amt {
|
||
font-size: 48px; font-weight: 800; letter-spacing: -.035em; color: var(--ink);
|
||
}
|
||
.pcard .price .per { font-size: 14px; color: var(--muted); }
|
||
.pcard.muted .price .amt {
|
||
color: var(--muted-2);
|
||
text-decoration: line-through;
|
||
text-decoration-color: rgba(239,68,68,.65);
|
||
text-decoration-thickness: 2px;
|
||
}
|
||
.pcard .price-note { font-size: 12.5px; color: var(--muted); margin-bottom: 22px; }
|
||
.pcard .pbtn { width: 100%; }
|
||
.pcard ul {
|
||
list-style: none; padding: 0; margin: 26px 0 0;
|
||
display: flex; flex-direction: column; gap: 11px;
|
||
border-top: 1px solid var(--line-soft); padding-top: 22px;
|
||
}
|
||
.pcard ul li {
|
||
font-size: 13.5px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start;
|
||
line-height: 1.45;
|
||
}
|
||
.pcard ul li .ck { flex: none; margin-top: 2px; }
|
||
.pcard ul li .ck.mint { color: var(--mint); }
|
||
.pcard ul li .ck.amber { color: var(--amber); }
|
||
.pcard ul li .ck.muted { color: var(--muted-2); }
|
||
.pcard.muted ul li { color: var(--muted); }
|
||
|
||
.pcard.ltd {
|
||
background: linear-gradient(180deg, #fffdf7 0%, #ffffff 70%);
|
||
border: 2px solid var(--amber);
|
||
box-shadow: 0 30px 60px -28px rgba(245,158,11,.4), 0 18px 36px -18px rgba(15,23,42,.1);
|
||
padding: 36px 32px;
|
||
margin: -12px 0;
|
||
}
|
||
.pcard.ltd .ribbon {
|
||
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
|
||
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 60%, #ea8a00 100%);
|
||
color: #fff; font-weight: 700; font-size: 12px;
|
||
padding: 8px 16px; border-radius: 999px;
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
box-shadow: 0 8px 18px -6px rgba(245,158,11,.55);
|
||
white-space: nowrap;
|
||
}
|
||
.pcard.ltd h4 { color: var(--amber-ink); }
|
||
.pcard.ltd .price .amt {
|
||
background: linear-gradient(180deg, #f59e0b, #ea8a00);
|
||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||
}
|
||
.ltd-save {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
background: #fef3c7; color: var(--amber-ink);
|
||
border: 1px solid rgba(245,158,11,.3);
|
||
padding: 4px 10px; border-radius: 999px;
|
||
font-size: 11.5px; font-weight: 700;
|
||
margin-bottom: 14px; align-self: flex-start;
|
||
}
|
||
.pcard.ltd ul li .ck.mint { color: var(--amber); }
|
||
|
||
.pricing-foot {
|
||
margin-top: 38px;
|
||
display: flex; align-items: center; justify-content: center; gap: 28px;
|
||
flex-wrap: wrap;
|
||
color: var(--muted); font-size: 13px;
|
||
}
|
||
.pricing-foot .it { display: inline-flex; align-items: center; gap: 8px; }
|
||
.pricing-foot .it svg { color: var(--mint); }
|
||
|
||
/* ============== REVIEWS - masonry ============== */
|
||
.sec-reviews { padding: 60px 0 120px; }
|
||
.reviews {
|
||
margin-top: 60px;
|
||
columns: 3;
|
||
column-gap: 20px;
|
||
}
|
||
.review {
|
||
break-inside: avoid;
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
border-radius: 16px;
|
||
padding: 22px 22px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 1px 2px rgba(15,23,42,.03);
|
||
position: relative;
|
||
}
|
||
.review::after {
|
||
content: "*";
|
||
position: absolute;
|
||
bottom: 8px; right: 12px;
|
||
color: var(--muted-2);
|
||
font-size: 11px; line-height: 1;
|
||
pointer-events: none;
|
||
}
|
||
.review.featured::after { color: #94a3b8; }
|
||
.review .stars { color: var(--amber); letter-spacing: 1px; font-size: 13px; margin-bottom: 12px; }
|
||
.review p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
|
||
.review .meta { display: flex; align-items: center; gap: 10px; }
|
||
.review .av {
|
||
width: 36px; height: 36px; border-radius: 50%; flex: none;
|
||
}
|
||
.av-1 { background: linear-gradient(135deg, #fde68a, #f59e0b); }
|
||
.av-2 { background: linear-gradient(135deg, #bae6fd, #0284c7); }
|
||
.av-3 { background: linear-gradient(135deg, #bbf7d0, #10b981); }
|
||
.av-4 { background: linear-gradient(135deg, #fbcfe8, #ec4899); }
|
||
.av-5 { background: linear-gradient(135deg, #ddd6fe, #7c3aed); }
|
||
.av-6 { background: linear-gradient(135deg, #fed7aa, #ea580c); }
|
||
.av-7 { background: linear-gradient(135deg, #a5f3fc, #0891b2); }
|
||
.av-8 { background: linear-gradient(135deg, #fecaca, #dc2626); }
|
||
.av-9 { background: linear-gradient(135deg, #e9d5ff, #9333ea); }
|
||
.review .who { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
|
||
.review .role { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
|
||
.review .badge {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
background: #ecfdf5; color: var(--mint-ink);
|
||
font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
|
||
margin-left: auto;
|
||
}
|
||
.review.featured {
|
||
background: linear-gradient(180deg, #0c4a6e 0%, #0f172a 100%);
|
||
color: #fff;
|
||
border-color: transparent;
|
||
}
|
||
.review.featured p { color: #e2e8f0; font-size: 16px; font-weight: 500; }
|
||
.review.featured .who { color: #fff; }
|
||
.review.featured .role { color: #94a3b8; }
|
||
.review.featured .stars { color: #fbbf24; }
|
||
.review.featured .badge { background: rgba(16,185,129,.2); color: #6ee7b7; }
|
||
|
||
/* ============== FOOTER ============== */
|
||
footer {
|
||
border-top: 1px solid var(--line);
|
||
padding: 50px 0 30px;
|
||
background: #fff;
|
||
}
|
||
.foot {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
color: var(--muted); font-size: 13px;
|
||
}
|
||
.foot .links { display: flex; gap: 26px; }
|
||
.foot a { color: var(--muted); text-decoration: none; }
|
||
.foot a:hover { color: var(--ink-2); }
|
||
|
||
/* ============== STICKY BOTTOM CTA ============== */
|
||
.sticky-cta {
|
||
position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
|
||
background: rgba(255,255,255,.92);
|
||
backdrop-filter: blur(14px) saturate(150%);
|
||
-webkit-backdrop-filter: blur(14px) saturate(150%);
|
||
border-top: 1px solid var(--line);
|
||
box-shadow: 0 -8px 24px -16px rgba(15,23,42,.15);
|
||
transform: translateY(110%);
|
||
transition: transform .35s cubic-bezier(.2,.7,.2,1);
|
||
}
|
||
.sticky-cta.show { transform: translateY(0); }
|
||
.sticky-inner {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 14px 32px;
|
||
max-width: 1280px; margin: 0 auto; gap: 24px;
|
||
}
|
||
.sticky-l { display: flex; align-items: center; gap: 14px; }
|
||
.sticky-l .pulse {
|
||
width: 9px; height: 9px; border-radius: 50%; background: var(--amber);
|
||
box-shadow: 0 0 0 5px rgba(245,158,11,.18); animation: pulse 2.2s infinite;
|
||
}
|
||
.sticky-l .t { font-size: 14px; font-weight: 700; color: var(--ink); }
|
||
.sticky-l .t b { color: var(--amber-ink); }
|
||
.sticky-l .s { font-size: 12px; color: var(--muted); margin-top: 1px; }
|
||
.sticky-cd { display: flex; gap: 6px; align-items: center; }
|
||
.sticky-cd .c {
|
||
background: #fffbeb; border: 1px solid rgba(245,158,11,.25);
|
||
padding: 6px 10px; border-radius: 8px; font-family: 'JetBrains Mono';
|
||
font-size: 13px; font-weight: 700; color: var(--amber-ink);
|
||
min-width: 36px; text-align: center;
|
||
}
|
||
.sticky-cd .colon { color: var(--amber-ink); font-weight: 700; }
|
||
.sticky-close {
|
||
background: transparent; border: 0; cursor: pointer; color: var(--muted-2);
|
||
padding: 4px; margin-left: 8px;
|
||
}
|
||
|
||
#tweaks-root { position: fixed; bottom: 90px; right: 20px; z-index: 1000; }
|
||
|
||
/* ============================================================
|
||
============== RESPONSIVE - desktop-first overrides ===========
|
||
Breakpoints:
|
||
• lg ≤ 1199px : laptop tweaks
|
||
• md ≤ 1023px : tablet
|
||
• sm ≤ 767px : mobile
|
||
• xs ≤ 479px : small mobile
|
||
============================================================ */
|
||
img, svg, video { max-width: 100%; height: auto; }
|
||
|
||
/* ---------- ≤1199px (small laptop) ---------- */
|
||
@media (max-width: 1199px) {
|
||
.wrap, .wrap-narrow { padding: 0 24px; }
|
||
.hero h1 { font-size: 64px; }
|
||
.sec-h { font-size: 44px; }
|
||
.hero-stage { max-width: 100%; }
|
||
.hero-flanks { display: none; } /* flanking absolute cards collide */
|
||
.ob { height: auto; min-height: 480px; }
|
||
.ob-kpis { grid-template-columns: repeat(2, 1fr); }
|
||
.workflow { padding: 60px 36px; }
|
||
.wf-node { width: 180px; }
|
||
}
|
||
|
||
/* ---------- ≤1023px (tablet) ---------- */
|
||
@media (max-width: 1023px) {
|
||
.nav-inner { height: 60px; }
|
||
.nav-links { display: none; } /* hide nav links, keep CTAs */
|
||
|
||
.hero { padding: 56px 0 40px; }
|
||
.hero h1 { font-size: 52px; line-height: 1.05; }
|
||
.hero .sub { font-size: 17px; }
|
||
.btn-xl { padding: 16px 26px; font-size: 15px; }
|
||
|
||
.hero-trust { flex-wrap: wrap; gap: 14px 22px; }
|
||
.hero-trust .sep { display: none; }
|
||
|
||
/* Dashboard preview - collapse sidebar */
|
||
.ob { grid-template-columns: 1fr; min-height: 0; }
|
||
.ob-side { display: none; }
|
||
.ob-main { padding: 18px 18px; }
|
||
.ob-row { grid-template-columns: 1fr; }
|
||
.chart { height: 140px; }
|
||
|
||
/* Logos band */
|
||
.logos { margin-top: 56px; padding: 22px 0; }
|
||
.logos-inner { flex-direction: column; gap: 14px; align-items: center; }
|
||
.logos-label { text-align: center; }
|
||
.logos-row { justify-content: center; flex-wrap: wrap; gap: 18px 28px; }
|
||
.logos-row span { font-size: 14px; white-space: nowrap; }
|
||
|
||
/* Sections - paddings */
|
||
.sec-features { padding: 80px 0 40px; }
|
||
.sec-workflow { padding: 80px 0; }
|
||
.sec-pricing { padding: 40px 0 80px; }
|
||
.sec-reviews { padding: 40px 0 80px; }
|
||
.sec-h { font-size: 38px; }
|
||
.sec-sub { font-size: 16px; }
|
||
|
||
/* Features 3-col → 2-col */
|
||
.feature-rows { grid-template-columns: repeat(2, 1fr); }
|
||
.feature-cell { padding: 28px 24px; }
|
||
.feature-cell:nth-child(3n) { border-right: 1px solid var(--line); }
|
||
.feature-cell:nth-child(2n) { border-right: 0; }
|
||
.feature-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
|
||
.feature-cell:nth-last-child(-n+2) { border-bottom: 0; }
|
||
|
||
/* Workflow - stop the absolutely-positioned radial hub on tablet */
|
||
.workflow { padding: 48px 24px; border-radius: 20px; }
|
||
.wf-stage { height: auto; flex-direction: column; gap: 28px; }
|
||
.wf-svg { display: none; }
|
||
.wf-hub { width: 110px; height: 110px; }
|
||
.wf-hub-inner .nm { font-size: 15px; }
|
||
.wf-node,
|
||
.wfn-1, .wfn-2, .wfn-3, .wfn-4, .wfn-5, .wfn-6 {
|
||
position: relative; top: auto; left: auto; right: auto; bottom: auto;
|
||
transform: none;
|
||
width: 100%; max-width: 360px;
|
||
}
|
||
|
||
/* Pricing 3-col → 1-col stack */
|
||
.pricing-grid { grid-template-columns: 1fr; gap: 18px; max-width: 520px; }
|
||
.pcard.ltd { margin: 0; } /* drop negative vertical margin */
|
||
|
||
/* Reviews masonry → 2 columns */
|
||
.reviews { columns: 2; column-gap: 16px; }
|
||
|
||
/* Footer */
|
||
.foot { flex-direction: column; gap: 14px; text-align: center; }
|
||
.foot .links { flex-wrap: wrap; justify-content: center; gap: 16px 20px; }
|
||
|
||
/* Sticky CTA condense */
|
||
.sticky-inner { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
|
||
.sticky-l { gap: 10px; flex: 1 1 100%; }
|
||
.sticky-cd { flex-wrap: wrap; }
|
||
}
|
||
|
||
/* ---------- ≤767px (mobile) ---------- */
|
||
@media (max-width: 767px) {
|
||
body { padding-bottom: 96px; }
|
||
.wrap, .wrap-narrow { padding: 0 18px; }
|
||
|
||
/* Nav */
|
||
.nav-inner { height: 56px; }
|
||
.brand { font-size: 16px; }
|
||
.brand-mark { width: 26px; height: 26px; }
|
||
.nav-cta .btn-ghost { display: none; } /* save room - keep only the amber CTA */
|
||
.nav-cta .btn { padding: 9px 14px; font-size: 13px; }
|
||
|
||
/* Hero */
|
||
.hero { padding: 36px 0 28px; }
|
||
.ltd-pill { font-size: 11.5px; padding: 6px 6px 6px 12px; gap: 8px; flex-wrap: wrap; justify-content: center; }
|
||
.ltd-pill .badge { font-size: 10px; padding: 3px 8px; }
|
||
.hero h1 { font-size: 36px; line-height: 1.06; margin: 20px auto 16px; }
|
||
.hero h1 br { display: none; }
|
||
.hero .sub { font-size: 15.5px; margin-bottom: 24px; }
|
||
.hero-ctas { display: flex; flex-direction: column; width: 100%; gap: 10px; }
|
||
.hero-ctas .btn { width: 100%; }
|
||
.btn-xl { padding: 14px 20px; font-size: 14px; }
|
||
.hero-trust { font-size: 12.5px; gap: 10px 18px; margin-top: 22px; }
|
||
|
||
/* Browser frame / dashboard preview */
|
||
.hero-stage { margin-top: 40px; }
|
||
.browser-bar { height: 34px; padding: 0 12px; }
|
||
.browser-bar .url { font-size: 11px; height: 22px; }
|
||
.ob-main { padding: 14px 12px; }
|
||
.ob-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
|
||
.ob-head h2 { font-size: 18px; }
|
||
.ob-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
|
||
.kpi { padding: 12px 12px; }
|
||
.kpi .v { font-size: 18px; }
|
||
.chart { height: 120px; }
|
||
|
||
/* Section headings */
|
||
.sec-h { font-size: 30px; margin: 16px 0 14px; }
|
||
.sec-sub { font-size: 15px; }
|
||
.sec-features { padding: 56px 0 28px; }
|
||
.sec-workflow { padding: 56px 0; }
|
||
.sec-pricing { padding: 28px 0 56px; }
|
||
.sec-reviews { padding: 28px 0 64px; }
|
||
|
||
/* Features → 1 col */
|
||
.feature-rows { grid-template-columns: 1fr; margin-top: 36px; }
|
||
.feature-cell { padding: 26px 22px; border-right: 0 !important; border-bottom: 1px solid var(--line); }
|
||
.feature-cell:last-child { border-bottom: 0; }
|
||
|
||
/* Workflow */
|
||
.workflow { padding: 36px 16px; margin-top: 40px; border-radius: 16px; }
|
||
.wf-stage { gap: 20px; }
|
||
.wf-hub { width: 96px; height: 96px; }
|
||
.wf-hub::before { inset: -14px; }
|
||
.wf-hub::after { inset: -30px; }
|
||
|
||
/* Pricing */
|
||
.pricing-grid { margin-top: 36px; gap: 16px; }
|
||
.pcard { padding: 26px 22px; }
|
||
.pcard.ltd { padding: 28px 22px; }
|
||
.pcard .price .amt { font-size: 40px; }
|
||
.pcard .name { font-size: 20px; }
|
||
.pricing-foot { gap: 14px 20px; font-size: 12.5px; margin-top: 28px; }
|
||
|
||
/* Reviews 2 → 1 col */
|
||
.reviews { columns: 1; margin-top: 36px; }
|
||
.review { padding: 20px 18px; margin-bottom: 14px; }
|
||
.review p { font-size: 14px; }
|
||
.review.featured p { font-size: 15px; }
|
||
|
||
/* Footer */
|
||
footer { padding: 36px 0 22px; }
|
||
|
||
/* Sticky CTA - stack readable info, hide the countdown digits */
|
||
.sticky-inner { padding: 10px 14px; gap: 10px; }
|
||
.sticky-l { gap: 8px; }
|
||
.sticky-l .t { font-size: 12.5px; }
|
||
.sticky-l .s { font-size: 11px; }
|
||
.sticky-cd .c { padding: 4px 7px; font-size: 12px; min-width: 28px; }
|
||
.sticky-cta .btn { padding: 9px 14px; font-size: 12.5px; }
|
||
}
|
||
|
||
/* ---------- ≤479px (small mobile) ---------- */
|
||
@media (max-width: 479px) {
|
||
.hero h1 { font-size: 30px; }
|
||
.sec-h { font-size: 26px; }
|
||
.hero-trust { flex-direction: column; gap: 8px; align-items: center; }
|
||
.hero-trust .sep { display: none; }
|
||
.ob-kpis { grid-template-columns: 1fr; }
|
||
.pricing-foot { flex-direction: column; }
|
||
.pricing-foot .it { justify-content: center; }
|
||
.sticky-cd { display: none; } /* free up real-estate */
|
||
.foot .links { gap: 10px 16px; font-size: 12px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-bg"></div>
|
||
|
||
<!-- ============================ NAV ============================ -->
|
||
<nav class="nav">
|
||
<div class="wrap nav-inner">
|
||
<a class="brand" href="https://book.lynkeduppro.com/"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></a>
|
||
<div class="nav-links">
|
||
<a href="#features">Features</a>
|
||
<a href="#workflow">How it works</a>
|
||
<a href="#pricing">Pricing</a>
|
||
<a href="#reviews">Reviews</a>
|
||
</div>
|
||
<div class="nav-cta">
|
||
<a href="https://launch.lynkeduppro.com/" class="btn btn-amber">Watch a demo</a>
|
||
<a href="#pricing" class="btn btn-amber">
|
||
Claim Founders Lifetime Deal
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ============================ HERO ============================ -->
|
||
<section class="hero">
|
||
<div class="wrap">
|
||
<span class="ltd-pill">
|
||
<span class="dot"></span>
|
||
Limited Founders Lifetime Deal · only a few licenses left
|
||
</span>
|
||
<h1>
|
||
One platform to run your <br/>entire <span class="accent">roofing business</span>.
|
||
</h1>
|
||
<p class="sub">
|
||
LynkedUp Pro unifies your calendar, CRM, LiDAR measurements, estimates, invoicing, and crew chat, so contractors close 41% more jobs without juggling six tools. It's your assistant that never sleeps or takes a day off.
|
||
</p>
|
||
<div class="hero-ctas">
|
||
<a href="#pricing" class="btn btn-amber btn-xl">
|
||
Claim Founders Lifetime Access - $2000
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
<div class="hero-trust">
|
||
<div class="it">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||
Founders pricing locked in
|
||
</div>
|
||
<div class="sep"></div>
|
||
<div class="it">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||
3,000+ pros onboarded
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dashboard frame -->
|
||
<div class="hero-stage">
|
||
<div class="browser-frame">
|
||
<div class="browser-bar">
|
||
<span class="tl"><span></span><span></span><span></span></span>
|
||
<span class="url">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||
app.lynkedup.pro/owners-box
|
||
</span>
|
||
</div>
|
||
|
||
<div class="ob-shot" style="background:#fff">
|
||
<img src="/page/assets/dashboard.png" alt="LynkedUp Pro Owners Box - live pipeline, jobs, close rate, and crew utilization" loading="lazy" style="display:block;width:100%;height:auto"/>
|
||
</div>
|
||
|
||
<!-- Trust badges flanking the dashboard -->
|
||
<div class="hero-flanks">
|
||
<div class="flank-card" style="margin-left: -20px;">
|
||
<div class="ic mint">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6z"/><path d="m9 12 2 2 4-4"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="l">Compliant</div>
|
||
<div class="v">SOC 2 · Type II</div>
|
||
</div>
|
||
</div>
|
||
<div class="flank-card right" style="margin-right: -20px;">
|
||
<div class="ic amber">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 3 14h7v8l10-12h-7z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="l">G2 Rating</div>
|
||
<div class="v">4.9★ · 248 reviews</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ LOGOS ============================ -->
|
||
<div class="wrap">
|
||
<div class="logos">
|
||
<div class="logos-inner">
|
||
<div class="logos-label">Trusted by 3,000+ roofing & exterior pros</div>
|
||
<div class="logos-row">
|
||
<span class="lg-1">RidgeWorks</span>
|
||
<span class="lg-2">PEAK&SLOPE</span>
|
||
<span class="lg-4">Stonefield Co.</span>
|
||
<span class="lg-5">NORTHRIDGE</span>
|
||
<span class="lg-1">Skyhaus⌃</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================ FEATURES ============================ -->
|
||
<section class="sec-features" id="features">
|
||
<div class="wrap sec-center">
|
||
<span class="eyebrow"><span class="e-dot"></span>One ecosystem · Six native modules</span>
|
||
<h2 class="sec-h">Everything your crew needs,<br/>finally under one roof.</h2>
|
||
<p class="sec-sub">Stop paying for AccuLynx, JobNimbus, QuickBooks, Calendly, Slack, and a measurement add-on. LynkedUp Pro replaces all of them, natively integrated, no per-seat tax.</p>
|
||
</div>
|
||
|
||
<div class="wrap">
|
||
<div class="feature-rows">
|
||
<div class="feature-cell">
|
||
<div class="feature-num">01 / Schedule</div>
|
||
<div class="ic">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
||
</div>
|
||
<h3>Intelligent Calendar</h3>
|
||
<p>Auto-dispatch crews based on travel time, weather windows, and material readiness. The schedule books itself.</p> </div>
|
||
|
||
<div class="feature-cell mint">
|
||
<div class="feature-num">02 / Sell</div>
|
||
<div class="ic">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
||
</div>
|
||
<h3>Pipeline CRM</h3>
|
||
<p>Every door-knock, callback, and contract on one timeline. Kanban + map view + SMS, built for roofers, not lawyers.</p> </div>
|
||
|
||
<div class="feature-cell">
|
||
<div class="feature-num">03 / Estimate</div>
|
||
<div class="ic">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/><path d="m12 14 2 2 4-4"/></svg>
|
||
</div>
|
||
<h3>LiDAR Measurements</h3>
|
||
<p>Point your phone at the roof. We return precise pitch, area, and material take-off in 30 seconds. No drones, no climbing.</p> </div>
|
||
|
||
<div class="feature-cell amber">
|
||
<div class="feature-num">04 / Invoice</div>
|
||
<div class="ic">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h4"/></svg>
|
||
</div>
|
||
<h3>Smart Invoicing</h3>
|
||
<p>Stripe and ACH baked in. Send a deposit request from the truck, get paid before the tarps come off.</p> </div>
|
||
|
||
<div class="feature-cell">
|
||
<div class="feature-num">05 / Communicate</div>
|
||
<div class="ic">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 9h8M8 13h5"/></svg>
|
||
</div>
|
||
<h3>Crew Chat & Files</h3>
|
||
<p>Photos, contracts, change orders, all attached to the job, not lost in a group text. Works offline on the site.</p> </div>
|
||
|
||
<div class="feature-cell mint">
|
||
<div class="feature-num">06 / Analyze</div>
|
||
<div class="ic">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-5"/><path d="M16 9h4v4"/></svg>
|
||
</div>
|
||
<h3>Owner's Box</h3>
|
||
<p>Job-level margin, crew utilization, and supplier waste, surfaced as one number you can actually act on every Monday.</p> </div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ WORKFLOW ============================ -->
|
||
<section class="sec-workflow" id="workflow">
|
||
<div class="wrap sec-center">
|
||
<span class="eyebrow mint"><span class="e-dot"></span>How it works</span>
|
||
<h2 class="sec-h">From cold lead to cashed check.<br/>One continuous flow.</h2>
|
||
<p class="sec-sub">LynkedUp threads every step of a job through a single hub. No re-keying data, no exporting CSVs, no Slack-to-QuickBooks tab juggling at 9 PM.</p>
|
||
</div>
|
||
|
||
<div class="wrap">
|
||
<div class="workflow">
|
||
<div class="wf-stage">
|
||
<!-- Connector SVG -->
|
||
<svg class="wf-svg" viewBox="0 0 1080 380" preserveAspectRatio="none">
|
||
<defs>
|
||
<marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
||
<path d="M0 0 L10 5 L0 10 Z" fill="#0ea5e9"/>
|
||
</marker>
|
||
</defs>
|
||
<g fill="none" stroke="#0ea5e9" stroke-width="1.4" stroke-dasharray="4 5" stroke-linecap="round" opacity=".55">
|
||
<!-- hub center ~ 540, 190; radius ~ 100 -->
|
||
<path d="M150 65 Q330 110 470 170" marker-end="url(#arr)"/>
|
||
<path d="M930 65 Q750 110 610 170" marker-end="url(#arr)"/>
|
||
<path d="M70 195 Q260 195 440 195" marker-end="url(#arr)"/>
|
||
<path d="M1010 195 Q820 195 640 195" marker-end="url(#arr)"/>
|
||
<path d="M250 340 Q380 280 480 235" marker-end="url(#arr)"/>
|
||
<path d="M830 340 Q700 280 600 235" marker-end="url(#arr)"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Hub -->
|
||
<div class="wf-hub">
|
||
<div class="wf-hub-inner">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M3 11.5 12 4l9 7.5"/><path d="M5 10v10h14V10"/>
|
||
</svg>
|
||
<div class="lbl">Core hub</div>
|
||
<div class="nm">LynkedUp Pro</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nodes -->
|
||
<div class="wf-node wfn-1">
|
||
<div class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="10" r="3"/><path d="M12 2a8 8 0 0 1 8 8c0 4.5-8 12-8 12S4 14.5 4 10a8 8 0 0 1 8-8z"/></svg></div>
|
||
<div class="num"><span>1</span>LEAD CAPTURE</div>
|
||
<div class="t">Door-knock to deal</div>
|
||
<div class="s">Storm leads, web forms, and referrals flow straight into the CRM.</div>
|
||
</div>
|
||
|
||
<div class="wf-node wfn-2">
|
||
<div class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg></div>
|
||
<div class="num"><span>2</span>MEASURE</div>
|
||
<div class="t">LiDAR scan</div>
|
||
<div class="s">Phone-based measurement returns area & pitch in 30 seconds.</div>
|
||
</div>
|
||
|
||
<div class="wf-node wfn-3">
|
||
<div class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></div>
|
||
<div class="num"><span>3</span>ESTIMATE</div>
|
||
<div class="t">AI proposal</div>
|
||
<div class="s">Auto-generates branded estimate with material take-off and margin.</div>
|
||
</div>
|
||
|
||
<div class="wf-node wfn-4">
|
||
<div class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div>
|
||
<div class="num"><span>4</span>SCHEDULE</div>
|
||
<div class="t">Weather-aware dispatch</div>
|
||
<div class="s">Crews booked around the forecast, traffic, and material delivery.</div>
|
||
</div>
|
||
|
||
<div class="wf-node wfn-5">
|
||
<div class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
|
||
<div class="num"><span>5</span>EXECUTE</div>
|
||
<div class="t">Job site sync</div>
|
||
<div class="s">Crew updates, photos, and change orders attach to the job, not a group text.</div>
|
||
</div>
|
||
|
||
<div class="wf-node wfn-6">
|
||
<div class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
|
||
<div class="num"><span>6</span>GET PAID</div>
|
||
<div class="t">Invoice & reconcile</div>
|
||
<div class="s">Stripe and ACH close the loop, straight to QuickBooks.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ PRICING ============================ -->
|
||
<!-- ============================ PRICING ============================ -->
|
||
<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<sup style="font-size:0.32em;font-weight:600;vertical-align:super;color:#8d8d8d;">**</sup></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">Book a demo</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">Claim Founders Lifetime Deal</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>
|
||
|
||
<!-- ============================ REVIEWS - masonry ============================ -->
|
||
<section class="sec-reviews" id="reviews">
|
||
<div class="wrap sec-center">
|
||
<span class="eyebrow"><span class="e-dot"></span>Loved by roofers nationwide</span>
|
||
<h2 class="sec-h">3,000 contractors. One verdict.</h2>
|
||
<p class="sec-sub">From hail-chase teams in Texas to legacy slate shops in New England, LynkedUp has quietly become the operating layer for serious roofing companies.</p>
|
||
</div>
|
||
|
||
<div class="wrap">
|
||
<div class="reviews">
|
||
|
||
<div class="review featured">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"We killed five subscriptions the week we switched to LynkedUp. The LiDAR alone closes deals before competitors can even climb the ladder. It's the first software that actually feels built for our trade."</p>
|
||
<div class="meta">
|
||
<div class="av av-2"></div>
|
||
<div>
|
||
<div class="who">Marcus Holloway</div>
|
||
<div class="role">Owner · Plano, TX</div>
|
||
</div>
|
||
<span class="badge">VERIFIED</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"The Owners Box dashboard is the first time I've ever looked at my pipeline and immediately known what to do next."</p>
|
||
<div class="meta">
|
||
<div class="av av-1"></div>
|
||
<div>
|
||
<div class="who">Brenda Castillo</div>
|
||
<div class="role">Operations Manager · Houston, TX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"Closed 41% more jobs in the first quarter. The weather-aware dispatch alone saved us four cancellations during hail season."</p>
|
||
<div class="meta">
|
||
<div class="av av-3"></div>
|
||
<div>
|
||
<div class="who">DeShawn Price</div>
|
||
<div class="role">Operations Manager · Shreveport, LA</div>
|
||
</div>
|
||
<span class="badge">+41% CLOSE</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"I'm a one-person crew in Vermont. LynkedUp gives me the back office of a 50-person company. The Founders lifetime license paid for itself on job two."</p>
|
||
<div class="meta">
|
||
<div class="av av-4"></div>
|
||
<div>
|
||
<div class="who">Erin Holloway</div>
|
||
<div class="role">Owner · Plano, TX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"The QuickBooks sync just works. Took 11 minutes from sign-up to first paid invoice."</p>
|
||
<div class="meta">
|
||
<div class="av av-5"></div>
|
||
<div>
|
||
<div class="who">Tomás Veliz</div>
|
||
<div class="role">Owner · Houston, TX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"I evaluated AccuLynx, JobNimbus, and ServiceTitan. None of them measure roofs from your pocket. Done deal."</p>
|
||
<div class="meta">
|
||
<div class="av av-6"></div>
|
||
<div>
|
||
<div class="who">Jordan Mireles</div>
|
||
<div class="role">Business Development Manager · Shreveport, LA</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"Our office manager got 8 hours of her week back. That's literally a whole work day she now spends on customer follow-up."</p>
|
||
<div class="meta">
|
||
<div class="av av-7"></div>
|
||
<div>
|
||
<div class="who">Priya Anand</div>
|
||
<div class="role">Co-Founder · Houston, TX</div>
|
||
</div>
|
||
<span class="badge">−8 HRS/WK</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"Best $349 I've spent on tools in 22 years. The fact that it's a one-time payment is the cherry on top."</p>
|
||
<div class="meta">
|
||
<div class="av av-8"></div>
|
||
<div>
|
||
<div class="who">Frank Delaney</div>
|
||
<div class="role">Founder · Plano, TX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review">
|
||
<div class="stars">★★★★★</div>
|
||
<p>"Crews actually use it. That's the bar, and LynkedUp is the only software that's cleared it for us."</p>
|
||
<div class="meta">
|
||
<div class="av av-9"></div>
|
||
<div>
|
||
<div class="who">Renée Okafor</div>
|
||
<div class="role">Owner · Shreveport, LA</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ FOOTER ============================ -->
|
||
<footer>
|
||
<div class="wrap foot">
|
||
<div>© 2026 LynkedUp Inc · Built for roofers, by ex-roofers.</div>
|
||
</div>
|
||
<div class="wrap" style="margin-top:16px;">
|
||
<p style="max-width:920px;margin:0 auto;color:var(--muted-2);font-size:11px;line-height:1.5;">
|
||
* Figures shown are illustrative and reflect beta-period targets; individual results vary.<br/>
|
||
** Founders Lifetime Deal is a one-time payment; limited founding-member availability.
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ============================ STICKY CTA ============================ -->
|
||
<div class="sticky-cta" id="stickyCta">
|
||
<div class="sticky-inner">
|
||
<div class="sticky-l">
|
||
<span class="pulse"></span>
|
||
<div>
|
||
<div class="t">Founders Lifetime Deal ends Friday, <b>only a few licenses left</b></div>
|
||
<div class="s">$2000 one-time · pays for itself in ~3 jobs</div>
|
||
</div>
|
||
</div>
|
||
<div class="sticky-cd">
|
||
<div class="c" id="sd">03</div>
|
||
<span class="colon">:</span>
|
||
<div class="c" id="sh">14</div>
|
||
<span class="colon">:</span>
|
||
<div class="c" id="sm">27</div>
|
||
<span class="colon">:</span>
|
||
<div class="c" id="ss">42</div>
|
||
</div>
|
||
<div style="display:flex; gap:8px; align-items:center;">
|
||
<a href="#pricing" class="btn btn-amber btn-lg">
|
||
Claim $2000 Founders Lifetime
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||
</a>
|
||
<button class="sticky-close" id="stickyClose" aria-label="Dismiss">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="tweaks-root"></div>
|
||
|
||
<script>
|
||
// Countdown - drives sticky bar
|
||
(function(){
|
||
let secs = 42, mins = 27, hours = 14, days = 3;
|
||
const ss = document.getElementById('ss');
|
||
const sm = document.getElementById('sm');
|
||
setInterval(() => {
|
||
secs--;
|
||
if (secs < 0) { secs = 59; mins--; if (mins < 0) { mins = 59; hours--; if (hours < 0) { hours = 23; days--; } } }
|
||
ss.textContent = String(secs).padStart(2,'0');
|
||
sm.textContent = String(mins).padStart(2,'0');
|
||
}, 1000);
|
||
})();
|
||
|
||
// Sticky CTA - show after scrolling past hero
|
||
(function(){
|
||
const el = document.getElementById('stickyCta');
|
||
const close = document.getElementById('stickyClose');
|
||
let dismissed = false;
|
||
window.addEventListener('scroll', () => {
|
||
if (dismissed) return;
|
||
if (window.scrollY > 800) el.classList.add('show');
|
||
else el.classList.remove('show');
|
||
});
|
||
close.addEventListener('click', () => {
|
||
dismissed = true;
|
||
el.classList.remove('show');
|
||
document.body.style.paddingBottom = '0';
|
||
});
|
||
})();
|
||
|
||
// Tweaks panel
|
||
(function(){
|
||
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
||
"accentBlue": "#0284c7",
|
||
"accentAmber": "#f59e0b",
|
||
"headingFont": "Plus Jakarta Sans"
|
||
}/*EDITMODE-END*/;
|
||
|
||
let state = { ...TWEAK_DEFAULTS };
|
||
let active = false;
|
||
const root = document.getElementById('tweaks-root');
|
||
|
||
function applyState() {
|
||
document.documentElement.style.setProperty('--blue', state.accentBlue);
|
||
document.documentElement.style.setProperty('--amber', state.accentAmber);
|
||
document.body.style.fontFamily = `'${state.headingFont}', 'Inter', system-ui, sans-serif`;
|
||
}
|
||
applyState();
|
||
|
||
function render() {
|
||
if (!active) { root.innerHTML = ''; return; }
|
||
root.innerHTML = `
|
||
<div style="width:280px; background:rgba(255,255,255,.97); backdrop-filter:blur(20px); border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 30px 60px -20px rgba(15,23,42,.25); padding:16px; font-family:'Plus Jakarta Sans';">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
|
||
<strong style="font-size:14px; letter-spacing:-.01em;">Tweaks</strong>
|
||
<button id="tw-close" style="border:0; background:transparent; cursor:pointer; color:#64748b; font-size:16px;">✕</button>
|
||
</div>
|
||
|
||
<div style="font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">Primary blue</div>
|
||
<div style="display:flex; gap:6px; margin-bottom:14px;">
|
||
${['#0284c7','#2563eb','#7c3aed','#0f766e'].map(c => `<button data-blue="${c}" style="flex:1; height:30px; border-radius:8px; border:2px solid ${state.accentBlue===c?'#0f172a':'transparent'}; background:${c}; cursor:pointer;"></button>`).join('')}
|
||
</div>
|
||
|
||
<div style="font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">LTD accent</div>
|
||
<div style="display:flex; gap:6px; margin-bottom:14px;">
|
||
${['#f59e0b','#ef4444','#ec4899','#84cc16'].map(c => `<button data-amber="${c}" style="flex:1; height:30px; border-radius:8px; border:2px solid ${state.accentAmber===c?'#0f172a':'transparent'}; background:${c}; cursor:pointer;"></button>`).join('')}
|
||
</div>
|
||
|
||
<div style="font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;">Heading font</div>
|
||
<div style="display:flex; flex-direction:column; gap:6px;">
|
||
${['Plus Jakarta Sans','Inter'].map(f => `<button data-font="${f}" style="padding:8px 10px; border-radius:8px; border:1px solid ${state.headingFont===f?'#0f172a':'#e2e8f0'}; background:#fff; cursor:pointer; font-family:'${f}'; text-align:left; font-size:13px;">${f}</button>`).join('')}
|
||
</div>
|
||
</div>
|
||
`;
|
||
root.querySelector('#tw-close').onclick = () => {
|
||
active = false; render();
|
||
window.parent.postMessage({type:'__edit_mode_dismissed'}, '*');
|
||
};
|
||
root.querySelectorAll('[data-blue]').forEach(b => b.onclick = () => {
|
||
state.accentBlue = b.dataset.blue; applyState(); render();
|
||
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{accentBlue: state.accentBlue}}, '*');
|
||
});
|
||
root.querySelectorAll('[data-amber]').forEach(b => b.onclick = () => {
|
||
state.accentAmber = b.dataset.amber; applyState(); render();
|
||
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{accentAmber: state.accentAmber}}, '*');
|
||
});
|
||
root.querySelectorAll('[data-font]').forEach(b => b.onclick = () => {
|
||
state.headingFont = b.dataset.font; applyState(); render();
|
||
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{headingFont: state.headingFont}}, '*');
|
||
});
|
||
}
|
||
|
||
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'}, '*');
|
||
})();
|
||
</script>
|
||
|
||
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
||
<script src="/square-checkout.js"></script>
|
||
|
||
</body>
|
||
</html>
|