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.
1452 lines
64 KiB
HTML
1452 lines
64 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LynkedUp Pro - AI-Powered Roofing Operations</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&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #09090b;
|
|
--bg-1: #0f0f12;
|
|
--bg-2: #141418;
|
|
--bg-3: #1a1a20;
|
|
--border: rgba(255,255,255,0.07);
|
|
--border-glow: rgba(249,115,22,0.3);
|
|
--orange: #f97316;
|
|
--orange-light: #fb923c;
|
|
--orange-pale: #fed7aa;
|
|
--cyan: #22d3ee;
|
|
--cyan-dim: rgba(34,211,238,0.15);
|
|
--green: #4ade80;
|
|
--text: #fafafa;
|
|
--text-2: #a1a1aa;
|
|
--text-3: #52525b;
|
|
--white: #ffffff;
|
|
--mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
h1, h2, h3, h4 {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ========== NAV ========== */
|
|
nav {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
padding: 0 60px;
|
|
height: 64px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
background: rgba(9,9,11,0.9);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.logo-mark {
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.logo-icon {
|
|
width: 32px; height: 32px; background: var(--orange);
|
|
border-radius: 8px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.logo-icon svg { width: 18px; height: 18px; fill: white; }
|
|
.logo-text {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 17px; font-weight: 800;
|
|
letter-spacing: -0.2px; color: var(--text);
|
|
}
|
|
.logo-text span { color: var(--orange); }
|
|
|
|
.nav-center { display: flex; gap: 32px; list-style: none; }
|
|
.nav-center a {
|
|
font-size: 14px; font-weight: 500; color: var(--text-2);
|
|
text-decoration: none; transition: color 0.2s;
|
|
}
|
|
.nav-center a:hover { color: var(--text); }
|
|
|
|
.nav-right { display: flex; align-items: center; gap: 12px; }
|
|
.btn-ghost {
|
|
font-size: 13px; font-weight: 500; color: var(--text-2);
|
|
text-decoration: none; padding: 8px 16px;
|
|
border-radius: 6px; border: 1px solid var(--border);
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.15); }
|
|
.btn-nav-cta {
|
|
font-size: 13px; font-weight: 600;
|
|
background: var(--orange); color: white;
|
|
padding: 8px 18px; border-radius: 6px;
|
|
text-decoration: none; transition: all 0.2s;
|
|
}
|
|
.btn-nav-cta:hover { background: var(--orange-light); }
|
|
|
|
/* ========== HERO ========== */
|
|
.hero {
|
|
min-height: 100vh;
|
|
position: relative; display: flex; align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
.hero-bg-img {
|
|
position: absolute; inset: 0;
|
|
background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1800&q=80');
|
|
background-size: cover; background-position: center 40%;
|
|
filter: brightness(0.12) saturate(0.4);
|
|
}
|
|
/* Grid overlay */
|
|
.hero-grid {
|
|
position: absolute; inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(249,115,22,0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(249,115,22,0.04) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
}
|
|
/* Glows */
|
|
.hero-glow-1 {
|
|
position: absolute; top: -200px; left: -200px;
|
|
width: 700px; height: 700px; border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-glow-2 {
|
|
position: absolute; bottom: -100px; right: 10%;
|
|
width: 500px; height: 500px; border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-inner {
|
|
position: relative; z-index: 2;
|
|
max-width: 1200px; margin: 0 auto;
|
|
padding: 120px 60px 80px;
|
|
display: grid; grid-template-columns: 1fr 1fr;
|
|
gap: 72px; align-items: center; width: 100%;
|
|
}
|
|
.hero-badge {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 5px 12px 5px 6px;
|
|
background: rgba(249,115,22,0.08);
|
|
border: 1px solid rgba(249,115,22,0.2);
|
|
border-radius: 100px; margin-bottom: 28px;
|
|
}
|
|
.badge-dot {
|
|
width: 20px; height: 20px; background: rgba(249,115,22,0.15);
|
|
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.badge-dot::after {
|
|
content: ''; display: block;
|
|
width: 8px; height: 8px; background: var(--orange);
|
|
border-radius: 50%; animation: blink 2s infinite;
|
|
}
|
|
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
|
|
.badge-text { font-size: 12px; font-weight: 600; color: var(--orange); letter-spacing: 0.5px; font-family: var(--mono); }
|
|
|
|
.hero h1 {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: clamp(40px, 5vw, 62px);
|
|
font-weight: 800;
|
|
line-height: 1.1; letter-spacing: -0.5px; color: var(--white);
|
|
}
|
|
.hero h1 .highlight {
|
|
color: var(--orange);
|
|
position: relative;
|
|
}
|
|
.hero h1 .dim { color: var(--text-2); }
|
|
|
|
.hero-sub {
|
|
margin-top: 22px; font-size: 16px; line-height: 1.8;
|
|
color: #b4b4be; max-width: 500px; font-weight: 400;
|
|
}
|
|
|
|
.hero-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; align-items: center; }
|
|
.btn-primary {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: var(--orange); color: white;
|
|
padding: 14px 28px; border-radius: 8px;
|
|
font-size: 15px; font-weight: 600; text-decoration: none;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
border: none; cursor: pointer; transition: all 0.2s;
|
|
letter-spacing: 0;
|
|
}
|
|
.btn-primary:hover { background: var(--orange-light); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(249,115,22,0.25); }
|
|
.btn-outline {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: transparent; color: var(--text-2);
|
|
padding: 13px 24px; border-radius: 8px;
|
|
font-size: 15px; font-weight: 500; text-decoration: none;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.btn-outline:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
|
|
|
|
.hero-metrics {
|
|
display: flex; gap: 32px; margin-top: 48px;
|
|
padding-top: 28px; border-top: 1px solid var(--border);
|
|
}
|
|
.hm-val { font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--orange); line-height: 1; }
|
|
.hm-label { font-size: 12px; color: #71717a; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; }
|
|
|
|
/* === Map UI Mockup === */
|
|
.hero-visual { position: relative; }
|
|
.map-frame {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px; overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.map-topbar {
|
|
background: var(--bg-1); border-bottom: 1px solid var(--border);
|
|
padding: 10px 16px;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.win-dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
.map-title { font-size: 12px; color: var(--text-3); margin-left: 8px; font-family: var(--mono); }
|
|
.map-body {
|
|
position: relative;
|
|
background: #0e1117;
|
|
background-image:
|
|
linear-gradient(rgba(249,115,22,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(249,115,22,0.05) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
height: 280px;
|
|
overflow: hidden;
|
|
}
|
|
/* Rooftop outlines on the map */
|
|
.roof-zone {
|
|
position: absolute; border: 1.5px solid;
|
|
border-radius: 3px;
|
|
}
|
|
.roof-zone.assessed { border-color: rgba(249,115,22,0.6); background: rgba(249,115,22,0.08); }
|
|
.roof-zone.normal { border-color: rgba(74,222,128,0.5); background: rgba(74,222,128,0.06); }
|
|
.roof-zone.alert { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.08); animation: pulseAlert 2s infinite; }
|
|
@keyframes pulseAlert { 0%,100%{opacity:1} 50%{opacity:0.5} }
|
|
.roof-zone.selected { border-color: var(--orange); background: rgba(249,115,22,0.15); border-width: 2px; }
|
|
|
|
.map-panel {
|
|
position: absolute; bottom: 0; left: 0; right: 0;
|
|
background: rgba(9,9,11,0.95);
|
|
border-top: 1px solid var(--border);
|
|
padding: 12px 16px;
|
|
}
|
|
.mp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
|
.mp-addr { font-size: 12px; font-weight: 600; color: var(--text); }
|
|
.mp-status {
|
|
font-size: 10px; padding: 2px 8px; border-radius: 4px;
|
|
font-family: var(--mono); font-weight: 600;
|
|
}
|
|
.mp-status.critical { background: rgba(239,68,68,0.15); color: #f87171; }
|
|
.mp-status.good { background: rgba(74,222,128,0.1); color: var(--green); }
|
|
.mp-status.ai { background: rgba(249,115,22,0.12); color: var(--orange); }
|
|
|
|
.mp-data { display: flex; gap: 16px; }
|
|
.mp-d { font-size: 11px; color: var(--text-3); }
|
|
.mp-d span { color: var(--text-2); font-weight: 500; }
|
|
|
|
.map-legend {
|
|
position: absolute; top: 12px; right: 12px;
|
|
background: rgba(9,9,11,0.85); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: 8px 12px;
|
|
display: flex; flex-direction: column; gap: 5px;
|
|
}
|
|
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-3); }
|
|
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
|
|
|
|
/* Sidebar */
|
|
.map-sidebar {
|
|
position: absolute; left: 0; top: 0; bottom: 0;
|
|
width: 50px; background: rgba(9,9,11,0.7);
|
|
border-right: 1px solid var(--border);
|
|
display: flex; flex-direction: column; align-items: center;
|
|
gap: 6px; padding: 10px 0;
|
|
}
|
|
.sidebar-btn {
|
|
width: 32px; height: 32px; border-radius: 6px;
|
|
background: rgba(255,255,255,0.04);
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; font-size: 14px;
|
|
}
|
|
.sidebar-btn.active { background: rgba(249,115,22,0.2); }
|
|
|
|
/* Floating cards */
|
|
.float-card {
|
|
position: absolute; z-index: 10;
|
|
background: rgba(9,9,11,0.95);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px; padding: 10px 14px;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.fc-label { font-size: 10px; color: var(--text-3); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.fc-val { font-size: 18px; font-weight: 700; color: var(--orange); font-family: var(--mono); line-height: 1.2; }
|
|
.fc-sub { font-size: 10px; color: var(--text-3); }
|
|
|
|
/* ========== STATS BELT ========== */
|
|
.stats-belt {
|
|
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
background: var(--bg-1);
|
|
padding: 0 60px;
|
|
}
|
|
.stats-belt-inner {
|
|
max-width: 1200px; margin: 0 auto;
|
|
display: grid; grid-template-columns: repeat(4,1fr);
|
|
divide: 1px solid var(--border);
|
|
}
|
|
.stat-cell {
|
|
padding: 32px 20px;
|
|
border-right: 1px solid var(--border);
|
|
text-align: center;
|
|
}
|
|
.stat-cell:last-child { border-right: none; }
|
|
.sc-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 40px; font-weight: 800; color: var(--white); line-height: 1; }
|
|
.sc-val .unit { font-size: 24px; color: var(--orange); }
|
|
.sc-desc { font-size: 14px; color: #71717a; margin-top: 8px; font-weight: 400; }
|
|
|
|
/* ========== FEATURE SECTIONS ========== */
|
|
.feature-section {
|
|
min-height: 88vh;
|
|
position: relative; display: flex; align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
.fs-bg {
|
|
position: absolute; inset: 0;
|
|
background-size: cover; background-position: center;
|
|
filter: brightness(0.1) saturate(0.3);
|
|
}
|
|
.fs-overlay-l { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 40%, rgba(9,9,11,0.5) 75%, transparent 100%); }
|
|
.fs-overlay-r { position: absolute; inset: 0; background: linear-gradient(270deg, var(--bg) 40%, rgba(9,9,11,0.5) 75%, transparent 100%); }
|
|
|
|
.fs-inner {
|
|
position: relative; z-index: 2;
|
|
max-width: 1200px; margin: 0 auto;
|
|
padding: 80px 60px;
|
|
display: grid; grid-template-columns: 1fr 1fr;
|
|
gap: 72px; align-items: center; width: 100%;
|
|
}
|
|
.fs-inner.flip { direction: rtl; }
|
|
.fs-inner.flip > * { direction: ltr; }
|
|
|
|
.fs-tag {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-family: var(--mono); font-size: 11px; font-weight: 600;
|
|
color: var(--cyan); letter-spacing: 1px; text-transform: uppercase;
|
|
margin-bottom: 20px;
|
|
}
|
|
.fs-tag::before { content: ''; width: 20px; height: 1px; background: var(--cyan); }
|
|
|
|
.fs-h {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: clamp(28px, 3.5vw, 46px);
|
|
font-weight: 800; line-height: 1.15; letter-spacing: -0.3px;
|
|
}
|
|
.fs-h .accent { color: var(--orange); }
|
|
.fs-h .accent-cyan { color: var(--cyan); }
|
|
|
|
.fs-desc {
|
|
margin-top: 18px; font-size: 15px; line-height: 1.8;
|
|
color: #b4b4be; max-width: 460px;
|
|
}
|
|
.fs-points { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
|
|
.fs-point {
|
|
display: flex; align-items: flex-start; gap: 10px;
|
|
padding: 10px 14px; border-radius: 8px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.fs-point-icon {
|
|
width: 20px; height: 20px; min-width: 20px;
|
|
background: rgba(249,115,22,0.12); border-radius: 4px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-top: 1px;
|
|
}
|
|
.fs-point-icon svg { width: 10px; height: 10px; }
|
|
.fs-point p { font-size: 14px; color: #b4b4be; line-height: 1.65; }
|
|
.fs-point p strong { color: var(--text); font-weight: 600; }
|
|
.fs-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
|
|
|
|
/* === UI Mockup components === */
|
|
.ui-card {
|
|
background: var(--bg-2); border: 1px solid var(--border);
|
|
border-radius: 14px; overflow: hidden;
|
|
}
|
|
.ui-card-header {
|
|
background: var(--bg-1); border-bottom: 1px solid var(--border);
|
|
padding: 10px 16px; display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.uih-dots { display: flex; gap: 5px; }
|
|
.uih-dot { width: 9px; height: 9px; border-radius: 50%; }
|
|
.uih-title { font-size: 11px; color: var(--text-3); font-family: var(--mono); margin-left: 8px; }
|
|
.ui-body { padding: 18px; }
|
|
|
|
/* Estimate card */
|
|
.estimate-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.est-addr { font-size: 14px; font-weight: 600; color: var(--text); }
|
|
.est-badge { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-weight: 600; background: rgba(249,115,22,0.12); color: var(--orange); border: 1px solid rgba(249,115,22,0.2); }
|
|
|
|
.lidar-strip {
|
|
background: #0a0e14; border-radius: 10px; padding: 14px;
|
|
border: 1px solid rgba(34,211,238,0.15); margin-bottom: 14px;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.lidar-scan-line {
|
|
position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
|
|
animation: scan 2.5s infinite linear;
|
|
}
|
|
@keyframes scan { 0%{top:0} 100%{top:100%} }
|
|
.lidar-grid {
|
|
display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
|
|
}
|
|
.lidar-metric { text-align: center; }
|
|
.lm-val { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--cyan); }
|
|
.lm-lab { font-size: 10px; color: var(--text-3); margin-top: 2px; }
|
|
|
|
.cost-breakdown { display: flex; flex-direction: column; gap: 6px; }
|
|
.cost-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
|
|
.cost-row:last-child { border-bottom: none; }
|
|
.cr-label { font-size: 13px; color: #b4b4be; }
|
|
.cr-val { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--mono); }
|
|
.cr-val.total { color: var(--orange); font-size: 16px; }
|
|
|
|
/* AI Diagnosis card */
|
|
.roof-image-mock {
|
|
border-radius: 8px; overflow: hidden; position: relative;
|
|
height: 140px; background: #0a0e16;
|
|
background-image: url('https://images.unsplash.com/photo-1494526585095-c41746248156?w=600&q=70');
|
|
background-size: cover; background-position: center;
|
|
filter: brightness(0.6) saturate(0.5);
|
|
margin-bottom: 14px;
|
|
}
|
|
.roof-ai-overlay {
|
|
position: absolute; inset: 0;
|
|
background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, transparent 40%, rgba(249,115,22,0.15) 80%);
|
|
}
|
|
.damage-box {
|
|
position: absolute; border: 1.5px solid #ef4444;
|
|
border-radius: 3px; background: rgba(239,68,68,0.08);
|
|
}
|
|
.ai-finding-list { display: flex; flex-direction: column; gap: 7px; }
|
|
.ai-finding {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 7px 10px; border-radius: 7px;
|
|
background: rgba(255,255,255,0.02); border: 1px solid var(--border);
|
|
}
|
|
.af-severity {
|
|
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
|
}
|
|
.af-text { font-size: 13px; color: #b4b4be; flex: 1; }
|
|
.af-conf { font-size: 10px; font-family: var(--mono); color: var(--orange); }
|
|
|
|
/* CRM pipeline card */
|
|
.pipeline { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
|
|
.pipeline-col { min-width: 120px; }
|
|
.pipe-header {
|
|
font-size: 10px; font-weight: 600; color: var(--text-3);
|
|
text-transform: uppercase; letter-spacing: 0.5px;
|
|
margin-bottom: 6px; padding: 0 2px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.pipe-count { background: var(--bg-3); border-radius: 10px; padding: 1px 6px; font-size: 10px; }
|
|
.pipe-card {
|
|
background: var(--bg-3); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: 9px; margin-bottom: 5px;
|
|
}
|
|
.pc-name { font-size: 11px; font-weight: 600; color: var(--text); }
|
|
.pc-val { font-size: 10px; color: var(--orange); font-family: var(--mono); margin-top: 2px; }
|
|
.pc-when { font-size: 9px; color: var(--text-3); margin-top: 4px; }
|
|
|
|
/* Analytics mockup */
|
|
.chart-wrap { height: 100px; display: flex; align-items: flex-end; gap: 5px; margin-bottom: 12px; }
|
|
.bar-c { flex: 1; border-radius: 4px 4px 0 0; background: rgba(249,115,22,0.2); transition: height 1s; position: relative; }
|
|
.bar-c.hi { background: var(--orange); }
|
|
.bar-c::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; }
|
|
.chart-labels { display: flex; justify-content: space-between; margin-bottom: 14px; }
|
|
.chart-label { font-size: 9px; color: var(--text-3); font-family: var(--mono); }
|
|
|
|
/* ========== CTA STRIPS ========== */
|
|
.cta-band {
|
|
padding: 72px 60px;
|
|
text-align: center; position: relative; overflow: hidden;
|
|
}
|
|
.cta-band.orange-tint {
|
|
background: linear-gradient(135deg, #1c0f00 0%, #150a00 50%, #0d0600 100%);
|
|
border-top: 1px solid rgba(249,115,22,0.15);
|
|
border-bottom: 1px solid rgba(249,115,22,0.15);
|
|
}
|
|
.cta-band.cyan-tint {
|
|
background: var(--bg-1);
|
|
border-top: 1px solid rgba(34,211,238,0.08);
|
|
border-bottom: 1px solid rgba(34,211,238,0.08);
|
|
}
|
|
.cta-band.final-dark {
|
|
background: linear-gradient(135deg, #0d0600 0%, var(--bg) 100%);
|
|
border-top: 1px solid rgba(249,115,22,0.1);
|
|
}
|
|
.cta-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 2; }
|
|
.cta-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
|
|
.cta-h {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: clamp(28px, 3.8vw, 44px);
|
|
font-weight: 800; line-height: 1.15; letter-spacing: -0.3px;
|
|
}
|
|
.cta-h em { font-style: normal; color: var(--orange); }
|
|
.cta-h .cyan { color: var(--cyan); }
|
|
.cta-p { font-size: 16px; color: #b4b4be; margin-top: 14px; line-height: 1.75; }
|
|
.cta-btns { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
|
|
|
|
/* Radial glow for CTAs */
|
|
.cta-glow {
|
|
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
|
|
width: 600px; height: 300px; pointer-events: none;
|
|
background: radial-gradient(ellipse, rgba(249,115,22,0.07) 0%, transparent 70%);
|
|
}
|
|
|
|
/* ========== TESTIMONIALS ========== */
|
|
.testimonials {
|
|
padding: 96px 60px;
|
|
background: var(--bg-1);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.section-label {
|
|
font-family: var(--mono); font-size: 11px;
|
|
letter-spacing: 2px; text-transform: uppercase; color: var(--orange);
|
|
text-align: center; margin-bottom: 12px;
|
|
}
|
|
.section-h {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: clamp(30px, 4vw, 46px);
|
|
font-weight: 800; line-height: 1.15; letter-spacing: -0.3px;
|
|
text-align: center;
|
|
}
|
|
.section-h em { font-style: normal; color: var(--orange); }
|
|
.section-sub { font-size: 16px; color: #b4b4be; text-align: center; margin-top: 12px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.75; }
|
|
.testimonials-grid {
|
|
max-width: 1100px; margin: 56px auto 0;
|
|
display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
|
|
}
|
|
.t-card {
|
|
background: var(--bg-2); border: 1px solid var(--border);
|
|
border-radius: 14px; padding: 24px;
|
|
position: relative; transition: border-color 0.3s;
|
|
}
|
|
.t-card:hover { border-color: rgba(249,115,22,0.25); }
|
|
.t-card.featured { border-color: rgba(249,115,22,0.25); background: #140c01; }
|
|
.t-stars { display: flex; gap: 2px; margin-bottom: 14px; }
|
|
.t-star { color: var(--orange); font-size: 12px; }
|
|
.t-text { font-size: 15px; line-height: 1.8; color: #b4b4be; }
|
|
.t-text strong { color: var(--text); font-weight: 600; }
|
|
.t-author { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
|
|
.t-avatar {
|
|
width: 40px; height: 40px; border-radius: 8px;
|
|
background: rgba(249,115,22,0.15);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--orange);
|
|
}
|
|
.t-name { font-size: 13px; font-weight: 600; color: var(--text); }
|
|
.t-role { font-size: 11px; color: var(--text-3); margin-top: 1px; }
|
|
|
|
/* ========== FINAL CTA ========== */
|
|
.final-hero {
|
|
min-height: 60vh;
|
|
position: relative; display: flex; align-items: center;
|
|
overflow: hidden; text-align: center;
|
|
}
|
|
.fh-bg {
|
|
position: absolute; inset: 0;
|
|
background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80');
|
|
background-size: cover; background-position: center;
|
|
filter: brightness(0.08) saturate(0.3);
|
|
}
|
|
.fh-ov { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(9,9,11,0.5) 50%, var(--bg) 100%); }
|
|
.fh-inner {
|
|
position: relative; z-index: 2;
|
|
max-width: 760px; margin: 0 auto;
|
|
padding: 80px 60px;
|
|
width: 100%;
|
|
}
|
|
.fh-inner h2 {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: clamp(36px, 5vw, 58px);
|
|
font-weight: 800; line-height: 1.12; letter-spacing: -0.5px;
|
|
}
|
|
.fh-inner h2 .o { color: var(--orange); }
|
|
.fh-inner p { font-size: 16px; color: #b4b4be; margin-top: 18px; line-height: 1.8; max-width: 520px; margin-left: auto; margin-right: auto; }
|
|
|
|
/* ========== FOOTER ========== */
|
|
footer {
|
|
background: var(--bg);
|
|
border-top: 1px solid var(--border);
|
|
padding: 36px 60px;
|
|
}
|
|
.footer-row { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
|
|
.footer-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; color: var(--text); }
|
|
.footer-logo span { color: var(--orange); }
|
|
.footer-links { display: flex; gap: 28px; list-style: none; }
|
|
.footer-links a { font-size: 14px; color: #52525b; text-decoration: none; transition: color 0.2s; }
|
|
.footer-links a:hover { color: var(--text-2); }
|
|
.footer-copy { font-size: 13px; color: #3f3f46; }
|
|
|
|
/* ========== ANIMATIONS ========== */
|
|
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
|
|
.reveal.in { opacity: 1; transform: none; }
|
|
.d1 { transition-delay: 0.1s; }
|
|
.d2 { transition-delay: 0.2s; }
|
|
.d3 { transition-delay: 0.3s; }
|
|
|
|
/* ========== RESPONSIVE ========== */
|
|
@media (max-width: 920px) {
|
|
nav { padding: 0 20px; }
|
|
.nav-center { display: none; }
|
|
.hero-inner, .fs-inner { grid-template-columns: 1fr; padding: 100px 20px 60px; gap: 40px; }
|
|
.fs-inner.flip { direction: ltr; }
|
|
.hero-visual { display: none; }
|
|
.cta-band, .testimonials { padding: 60px 20px; }
|
|
.testimonials-grid { grid-template-columns: 1fr; }
|
|
.stats-belt { padding: 0 20px; }
|
|
.stats-belt-inner { grid-template-columns: repeat(2,1fr); }
|
|
.fh-inner { padding: 60px 20px; }
|
|
footer { padding: 28px 20px; }
|
|
.footer-row { flex-direction: column; text-align: center; }
|
|
}
|
|
img,svg,video{max-width:100%}
|
|
@media (max-width:1280px){
|
|
nav{padding:0 40px}
|
|
.hero-inner,.fs-inner{padding:100px 40px 72px;gap:48px}
|
|
.stats-belt{padding:0 40px}
|
|
.cta-band{padding:64px 40px}
|
|
.testimonials{padding:80px 40px}
|
|
.fh-inner{padding:72px 40px}
|
|
footer{padding:32px 40px}
|
|
}
|
|
@media (max-width:1024px) and (min-width:921px){
|
|
nav{padding:0 28px;height:60px}
|
|
.nav-center{gap:22px}
|
|
.hero{min-height:auto}
|
|
.hero-inner{padding:96px 28px 60px;gap:40px}
|
|
.hero h1{font-size:clamp(36px,5.4vw,54px)}
|
|
.fs-inner{padding:72px 28px;gap:40px}
|
|
.feature-section{min-height:auto}
|
|
.stats-belt{padding:0 28px}
|
|
.cta-band{padding:56px 28px}
|
|
.testimonials{padding:72px 28px}
|
|
.testimonials-grid{grid-template-columns:repeat(2,1fr)}
|
|
.fh-inner{padding:64px 28px}
|
|
footer{padding:28px}
|
|
}
|
|
@media (max-width:920px){
|
|
.hero-visual{display:block}
|
|
.footer-links{flex-wrap:wrap;justify-content:center}
|
|
}
|
|
@media (max-width:768px){
|
|
nav{height:58px;padding:0 16px}
|
|
.logo-text{font-size:16px}
|
|
.btn-ghost{padding:7px 12px;font-size:12px}
|
|
.btn-nav-cta{padding:7px 14px;font-size:12px}
|
|
.hero-inner{padding:92px 18px 52px;gap:36px}
|
|
.hero h1{font-size:clamp(32px,8vw,48px);line-height:1.12}
|
|
.hero-sub{font-size:15px;max-width:100%}
|
|
.hero-ctas{gap:10px}
|
|
.hero-ctas .btn-primary,.hero-ctas .btn-outline{padding:12px 20px;font-size:14px}
|
|
.hero-metrics{gap:20px;margin-top:36px;padding-top:22px}
|
|
.hm-val{font-size:24px}
|
|
.hm-label{font-size:11px;letter-spacing:.6px}
|
|
.map-body{height:240px}
|
|
.float-card{padding:8px 12px}
|
|
.fc-val{font-size:16px}
|
|
.fs-inner{padding:56px 18px;gap:36px}
|
|
.fs-h{font-size:clamp(26px,6vw,38px)}
|
|
.fs-desc{font-size:14px;max-width:100%}
|
|
.fs-point{padding:9px 12px}
|
|
.fs-point p{font-size:13px}
|
|
.stats-belt{padding:0 16px}
|
|
.stat-cell{padding:24px 14px}
|
|
.sc-val{font-size:30px}
|
|
.sc-val .unit{font-size:18px}
|
|
.sc-desc{font-size:12px}
|
|
.cta-band{padding:48px 18px}
|
|
.cta-h{font-size:clamp(24px,6.5vw,36px)}
|
|
.cta-p{font-size:15px}
|
|
.testimonials{padding:56px 18px}
|
|
.section-h{font-size:clamp(26px,6.5vw,38px)}
|
|
.section-sub{font-size:15px}
|
|
.testimonials-grid{margin-top:40px}
|
|
.t-card{padding:22px}
|
|
.t-text{font-size:14px}
|
|
.fh-inner{padding:52px 18px}
|
|
.fh-inner h2{font-size:clamp(28px,7vw,44px)}
|
|
.fh-inner p{font-size:15px}
|
|
footer{padding:24px 18px}
|
|
.footer-links{gap:18px}
|
|
.footer-links a{font-size:13px}
|
|
.ui-body{padding:16px}
|
|
}
|
|
@media (max-width:480px){
|
|
nav{height:56px;padding:0 12px}
|
|
.logo-icon{width:28px;height:28px}
|
|
.logo-text{font-size:15px}
|
|
.btn-ghost{display:none}
|
|
.btn-nav-cta{padding:7px 12px;font-size:12px}
|
|
.hero-inner{padding:86px 14px 44px;gap:28px}
|
|
.hero h1{font-size:clamp(26px,8vw,38px);line-height:1.15;letter-spacing:-.3px}
|
|
.hero-sub{font-size:14px;margin-top:18px;line-height:1.7}
|
|
.hero-ctas{flex-direction:column;align-items:stretch;width:100%;gap:10px}
|
|
.hero-ctas .btn-primary,.hero-ctas .btn-outline{width:100%;justify-content:center;padding:13px 18px;font-size:14px}
|
|
.hero-metrics{gap:14px;flex-wrap:wrap}
|
|
.hero-metrics > div{flex:1 1 calc(50% - 7px);min-width:0}
|
|
.hm-val{font-size:22px}
|
|
.hero-badge{padding:4px 10px 4px 4px;margin-bottom:22px}
|
|
.badge-text{font-size:11px}
|
|
.map-body{height:210px}
|
|
.map-sidebar{width:40px}
|
|
.sidebar-btn{width:26px;height:26px;font-size:12px}
|
|
.map-legend{padding:6px 8px;top:8px;right:8px}
|
|
.legend-item{font-size:9px}
|
|
.map-panel{padding:10px 12px}
|
|
.mp-data{flex-wrap:wrap;gap:6px 12px}
|
|
.mp-d{font-size:10px}
|
|
.float-card{padding:7px 10px}
|
|
.fc-val{font-size:14px}
|
|
.fc-label,.fc-sub{font-size:9px}
|
|
.stats-belt{padding:0 12px}
|
|
.stats-belt-inner{grid-template-columns:1fr 1fr}
|
|
.stat-cell{padding:20px 10px}
|
|
.sc-val{font-size:24px}
|
|
.sc-val .unit{font-size:16px}
|
|
.sc-desc{font-size:11px;margin-top:6px}
|
|
.fs-inner{padding:44px 14px;gap:28px}
|
|
.fs-tag{font-size:10px;margin-bottom:14px}
|
|
.fs-h{font-size:clamp(22px,7vw,32px)}
|
|
.fs-desc{font-size:14px;margin-top:14px}
|
|
.fs-points{margin-top:18px;gap:8px}
|
|
.fs-point{padding:8px 10px;gap:8px}
|
|
.fs-point p{font-size:12.5px;line-height:1.55}
|
|
.fs-ctas{flex-direction:column;align-items:stretch}
|
|
.fs-ctas .btn-primary,.fs-ctas .btn-outline{width:100%;justify-content:center}
|
|
.ui-body{padding:14px}
|
|
.ui-card-header{padding:8px 14px}
|
|
.uih-title{font-size:10px}
|
|
.lidar-strip{padding:12px}
|
|
.lm-val{font-size:16px}
|
|
.lm-lab{font-size:9px}
|
|
.cr-label,.cr-val{font-size:12px}
|
|
.cr-val.total{font-size:14px}
|
|
.pipeline-col{min-width:110px}
|
|
.chart-wrap{height:84px}
|
|
.cta-band{padding:40px 14px}
|
|
.cta-tag{font-size:10px;letter-spacing:1.4px;margin-bottom:10px}
|
|
.cta-h{font-size:clamp(22px,7vw,30px)}
|
|
.cta-p{font-size:14px;margin-top:12px}
|
|
.cta-btns{flex-direction:column;align-items:stretch}
|
|
.cta-btns .btn-primary,.cta-btns .btn-outline{width:100%;justify-content:center}
|
|
.testimonials{padding:44px 14px}
|
|
.testimonials-grid{gap:14px;margin-top:32px}
|
|
.t-card{padding:20px;border-radius:12px}
|
|
.t-text{font-size:13.5px;line-height:1.7}
|
|
.section-h{font-size:clamp(22px,7vw,32px)}
|
|
.section-sub{font-size:14px}
|
|
.fh-inner{padding:44px 14px}
|
|
.fh-inner h2{font-size:clamp(24px,8vw,36px)}
|
|
.fh-inner p{font-size:14px;margin-top:14px}
|
|
footer{padding:22px 14px}
|
|
.footer-links{gap:14px 18px}
|
|
.footer-links a{font-size:12px}
|
|
.footer-copy{font-size:12px}
|
|
}
|
|
@media (max-width:360px){
|
|
.hero h1{font-size:26px}
|
|
.section-h,.cta-h,.fs-h{font-size:22px}
|
|
.fh-inner h2{font-size:24px}
|
|
.sc-val{font-size:22px}
|
|
}
|
|
/* disclaimer stars + fine print */
|
|
.disc-star{position:absolute;right:12px;bottom:10px;font-size:11px;line-height:1;color:var(--text-3);font-weight:400;}
|
|
.claim-sup{font-size:.5em;color:var(--text-3);font-weight:400;vertical-align:super;margin-left:1px;}
|
|
.fine-print{max-width:1200px;margin:24px auto 0;padding:14px 0 0;border-top:1px solid var(--border);font-size:11px;line-height:1.6;color:var(--text-3);}
|
|
.fine-print p{margin:2px 0;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav>
|
|
<div class="logo-mark"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></div>
|
|
<ul class="nav-center">
|
|
<li><a href="#mapping">Geospatial</a></li>
|
|
<li><a href="#ai">AI Diagnose</a></li>
|
|
<li><a href="#lidar">Estimates</a></li>
|
|
<li><a href="#crm">CRM</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
</ul>
|
|
<div class="nav-right">
|
|
<a href="https://launch.lynkeduppro.com/" class="btn-nav-cta">Watch a demo</a> <a href="https://book.lynkeduppro.com/" class="btn-nav-cta">Secure Your Spot</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ===== HERO ===== -->
|
|
<section class="hero">
|
|
<div class="hero-bg-img"></div>
|
|
<div class="hero-grid"></div>
|
|
<div class="hero-glow-1"></div>
|
|
<div class="hero-glow-2"></div>
|
|
<div class="hero-inner">
|
|
<!-- LEFT -->
|
|
<div>
|
|
<div class="hero-badge">
|
|
<div class="badge-dot"></div>
|
|
<span class="badge-text">AI-Powered · LiDAR · Geospatial</span>
|
|
</div>
|
|
<h1>
|
|
Stop Climbing Roofs<br>
|
|
to <span class="highlight">Know</span> What<br>
|
|
Needs Fixing.
|
|
</h1>
|
|
<p class="hero-sub">
|
|
LynkedUp Pro combines real-time geospatial mapping, AI roof diagnosis, and LiDAR-powered instant estimates, so your crew closes faster, wastes less time, and wins more jobs. It's your assistant that never sleeps or takes a day off.
|
|
</p>
|
|
<div class="hero-ctas">
|
|
<a href="https://book.lynkeduppro.com/" class="btn-primary">
|
|
Book a demo
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
|
|
</div>
|
|
<p class="hero-rating" style="margin-top:14px;font-size:13px;color:var(--text-2);font-weight:500;">4.9★ · 248 reviews</p>
|
|
<div class="hero-metrics">
|
|
<div>
|
|
<div class="hm-val">3.2x<sup class="claim-sup">*</sup></div>
|
|
<div class="hm-label">Faster Estimates</div>
|
|
</div>
|
|
<div>
|
|
<div class="hm-val">94%<sup class="claim-sup">*</sup></div>
|
|
<div class="hm-label">Diagnosis Accuracy</div>
|
|
</div>
|
|
<div>
|
|
<div class="hm-val">$47k<sup class="claim-sup">*</sup></div>
|
|
<div class="hm-label">Avg. Revenue/Mo</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: MAP MOCKUP -->
|
|
<div class="hero-visual reveal d2">
|
|
<img src="/page/assets/dashboard.png" alt="LynkedUp Pro operations dashboard" class="shot" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- STATS BELT -->
|
|
<div class="stats-belt">
|
|
<div class="stats-belt-inner">
|
|
<div class="stat-cell">
|
|
<div class="sc-val">1,200<sup class="claim-sup">*</sup></div>
|
|
<div class="sc-desc">Roofs measured</div>
|
|
</div>
|
|
<div class="stat-cell">
|
|
<div class="sc-val">38<span class="unit">k</span><sup class="claim-sup">*</sup></div>
|
|
<div class="sc-desc">Roofs diagnosed with AI</div>
|
|
</div>
|
|
<div class="stat-cell">
|
|
<div class="sc-val">10.9<span class="unit">min</span><sup class="claim-sup">*</sup></div>
|
|
<div class="sc-desc">Avg. estimate time (was 3hrs)</div>
|
|
</div>
|
|
<div class="stat-cell">
|
|
<div class="sc-val">98.6<span class="unit">%</span><sup class="claim-sup">*</sup></div>
|
|
<div class="sc-desc">Customer satisfaction score</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== FEATURE 1: GEOSPATIAL MAPPING ========== -->
|
|
<section class="feature-section" id="mapping">
|
|
<div class="fs-bg" style="background-image:url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=80')"></div>
|
|
<div class="fs-overlay-l"></div>
|
|
<div class="fs-inner">
|
|
<div class="reveal">
|
|
<div class="fs-tag">01 - Geospatial Mapping</div>
|
|
<h2 class="fs-h">
|
|
See Every Roof in Your<br>
|
|
Territory <span class="accent">Before You<br>
|
|
Leave Your Truck.</span>
|
|
</h2>
|
|
<p class="fs-desc">
|
|
Why drive around guessing? LynkedUp Pro overlays your entire service area with real-time roof data, job status, AI flags, and opportunity scores, live on your screen.
|
|
</p>
|
|
<div class="fs-points">
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Live territory overlay</strong>, every property color-coded by roof condition, job stage, and revenue potential.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Route optimization</strong>. Plan 8 site visits in the time it used to take for 3. Never backtrack.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Storm damage heat maps</strong>. When hail hits, see affected roofs in your area instantly and move first.</p>
|
|
</div>
|
|
</div>
|
|
<div class="fs-ctas">
|
|
|
|
<a href="https://book.lynkeduppro.com/" class="btn-outline">Book a demo →</a>
|
|
</div>
|
|
</div>
|
|
<!-- Mockup: extended map with more data -->
|
|
<div class="reveal d2">
|
|
<img src="/page/assets/map.png" alt="LynkedUp Pro geospatial territory map" class="shot" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== CTA STRIP 1 ========== -->
|
|
<section class="cta-band orange-tint">
|
|
<div class="cta-glow"></div>
|
|
<div class="cta-inner reveal">
|
|
<div class="cta-tag">For Roofing Contractors</div>
|
|
<h2 class="cta-h">
|
|
Your Competitors Are<br>
|
|
Knocking on Doors at Random.<br>
|
|
<em>You Don't Have To.</em>
|
|
</h2>
|
|
<p class="cta-p">
|
|
LynkedUp Pro helps your team scout potential clients more efficiently with homeowner data and storm tracking, ranked by urgency and estimated job value before you show up.
|
|
</p>
|
|
<div class="cta-btns">
|
|
<a href="https://book.lynkeduppro.com/" class="btn-primary">Secure Your Spot</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== FEATURE 2: AI DIAGNOSIS ========== -->
|
|
<section class="feature-section" id="ai">
|
|
<div class="fs-bg" style="background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=80')"></div>
|
|
<div class="fs-overlay-r"></div>
|
|
<div class="fs-inner flip">
|
|
<!-- UI MOCKUP -->
|
|
<div class="reveal">
|
|
<div class="ui-card">
|
|
<div class="ui-card-header">
|
|
<div class="uih-dots">
|
|
<div class="uih-dot" style="background:#ff5f57"></div>
|
|
<div class="uih-dot" style="background:#febc2e"></div>
|
|
<div class="uih-dot" style="background:#28c840"></div>
|
|
</div>
|
|
<span class="uih-title">AI Roof Diagnosis · v3.2</span>
|
|
</div>
|
|
<div class="ui-body">
|
|
<div class="roof-image-mock">
|
|
<div class="roof-ai-overlay"></div>
|
|
<div class="damage-box" style="left:30px;top:20px;width:60px;height:45px"></div>
|
|
<div class="damage-box" style="right:40px;top:50px;width:40px;height:35px"></div>
|
|
<div style="position:absolute;bottom:8px;left:8px;background:rgba(9,9,11,0.9);border-radius:6px;padding:4px 10px;font-size:10px;color:#f87171;font-family:var(--mono);border:1px solid rgba(239,68,68,0.3)">2 damage zones detected</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
|
|
<div>
|
|
<div style="font-size:13px;font-weight:600;color:var(--text)">1847 Birchwood Ave</div>
|
|
<div style="font-size:11px;color:var(--text-3)">Scan: 14s · Model: roof-diag-v3</div>
|
|
</div>
|
|
<div style="font-size:11px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:3px 8px;border-radius:4px;font-family:var(--mono)">HIGH RISK</div>
|
|
</div>
|
|
<div class="ai-finding-list">
|
|
<div class="ai-finding">
|
|
<div class="af-severity" style="background:#ef4444"></div>
|
|
<span class="af-text">Granule loss - NW quadrant, ~180 sqft</span>
|
|
<span class="af-conf">98%</span>
|
|
</div>
|
|
<div class="ai-finding">
|
|
<div class="af-severity" style="background:#f97316"></div>
|
|
<span class="af-text">Flashing separation near chimney</span>
|
|
<span class="af-conf">91%</span>
|
|
</div>
|
|
<div class="ai-finding">
|
|
<div class="af-severity" style="background:#eab308"></div>
|
|
<span class="af-text">Minor curling shingles - SE ridge</span>
|
|
<span class="af-conf">84%</span>
|
|
</div>
|
|
<div class="ai-finding">
|
|
<div class="af-severity" style="background:#22d3ee"></div>
|
|
<span class="af-text">Gutters clear - no debris buildup</span>
|
|
<span class="af-conf">96%</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:12px;padding:10px;background:rgba(249,115,22,0.06);border:1px solid rgba(249,115,22,0.15);border-radius:8px">
|
|
<div style="font-size:11px;color:var(--text-2);font-weight:600;margin-bottom:4px">⚡ <span style="color:var(--orange)">Lynk</span> Dispatch recommendation</div>
|
|
<div style="font-size:12px;color:var(--text-2);line-height:1.5">Full replacement recommended within 12-18 months. Estimated scope: 2,340 sqft, asphalt shingle. Insurance claim likely eligible.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- TEXT -->
|
|
<div class="reveal d1">
|
|
<div class="fs-tag">02 - AI Roof Diagnosis</div>
|
|
<h2 class="fs-h">
|
|
Know Exactly What's<br>
|
|
Wrong - <span class="accent">Without<br>
|
|
Climbing Up There.</span>
|
|
</h2>
|
|
<p class="fs-desc">
|
|
Use our proprietary drones and AI damage detection (beta) to scan roof photos in seconds, with confidence scores so you can quote accurately the first time.
|
|
</p>
|
|
<div class="fs-points">
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Quick AI scan</strong>. Upload a photo from your phone. AI returns full diagnosis with zone mapping.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Insurance-ready reports</strong>, one-click PDF export with annotated images, findings, and repair scope.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Before/after comparison</strong>. Document job completion with visual proof customers trust and insurers accept.</p>
|
|
</div>
|
|
</div>
|
|
<div class="fs-ctas">
|
|
<a href="https://book.lynkeduppro.com/" class="btn-primary">Try AI Diagnosis</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== FEATURE 3: LIDAR ESTIMATES ========== -->
|
|
<section class="feature-section" id="lidar">
|
|
<div class="fs-bg" style="background-image:url('https://images.unsplash.com/photo-1461896836934-ffe607ba8211?w=1800&q=80')"></div>
|
|
<div class="fs-overlay-l"></div>
|
|
<div class="fs-inner">
|
|
<div class="reveal">
|
|
<div class="fs-tag">03 - LiDAR Instant Estimates</div>
|
|
<h2 class="fs-h">
|
|
Stop Losing Jobs<br>
|
|
Because Your Quote<br>
|
|
Came in <span class="accent">Two Days Late.</span>
|
|
</h2>
|
|
<p class="fs-desc">
|
|
LynkedUp Pro uses LiDAR data to measure roof pitch, surface area, and material needs with millimeter precision, in rapid time, from anywhere, on any device.
|
|
</p>
|
|
<div class="fs-points">
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>No site visit needed for estimates</strong>. Generate professional quotes from the office using LiDAR aerial data.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Material cost auto-calculation</strong>, synced with live lumber and shingle pricing so margins stay protected.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Digital proposal in one click</strong>. Send e-sign-ready quotes to customers before your competitor even visits the site.</p>
|
|
</div>
|
|
</div>
|
|
<div class="fs-ctas">
|
|
<a href="https://book.lynkeduppro.com/" class="btn-primary">Generate Estimate Now</a>
|
|
|
|
</div>
|
|
<p style="font-size:12px;color:var(--text-3);margin-top:10px">while you're still at the property</p>
|
|
</div>
|
|
<!-- Estimate mockup -->
|
|
<div class="reveal d2">
|
|
<img src="/page/assets/esitimate.png" alt="LynkedUp Pro LiDAR instant estimate" 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<sup class="claim-sup">**</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">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>
|
|
<!-- ========== CTA STRIP 2 ========== -->
|
|
<section class="cta-band cyan-tint">
|
|
<div class="cta-inner reveal">
|
|
<div class="cta-tag" style="color:var(--cyan)">No More Guesswork</div>
|
|
<h2 class="cta-h">
|
|
Your Next Quote Could Be<br>
|
|
Ready Before the<br>
|
|
<span class="cyan">Homeowner Hangs Up.</span>
|
|
</h2>
|
|
<p class="cta-p">
|
|
LiDAR + AI means your estimate is more accurate than a hand-measured one, and it's done in the time it takes to have a coffee. Win the job before anyone else shows up.
|
|
</p>
|
|
<div class="cta-btns">
|
|
<a href="https://book.lynkeduppro.com/" class="btn-primary">Try LiDAR Estimating Free</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== FEATURE 4: CRM OPERATIONS ========== -->
|
|
<section class="feature-section" id="crm">
|
|
<div class="fs-bg" style="background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1800&q=80')"></div>
|
|
<div class="fs-overlay-r"></div>
|
|
<div class="fs-inner flip">
|
|
<!-- CRM Mockup -->
|
|
<div class="reveal">
|
|
<img src="/page/assets/lynkedispatch.png" alt="LynkedUp Pro CRM and dispatch operations" class="shot" loading="lazy">
|
|
</div>
|
|
<!-- TEXT -->
|
|
<div class="reveal d1">
|
|
<div class="fs-tag">04 - CRM & Operations</div>
|
|
<h2 class="fs-h">
|
|
Run Your Entire<br>
|
|
Business From<br>
|
|
<span class="accent">One Dashboard.</span>
|
|
</h2>
|
|
<p class="fs-desc">
|
|
From first lead to final invoice, track every job, every crew, every follow-up. LynkedUp Pro replaces the 5 disconnected tools most roofing companies are limping along with.
|
|
</p>
|
|
<div class="fs-points">
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Visual sales pipeline</strong>. See every deal's status, value, and next action at a glance. Nothing falls through the cracks.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Crew scheduling + GPS tracking</strong>. Assign jobs, track arrival, and get real-time field updates without calling anyone.</p>
|
|
</div>
|
|
<div class="fs-point">
|
|
<div class="fs-point-icon"><svg viewBox="0 0 10 10" fill="none"><path d="M8 2.5L4 7 1.5 4.5" stroke="#f97316" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
|
<p><strong>Automated follow-ups</strong>. AI sends quotes, appointment reminders, and payment requests so nothing sits in a queue.</p>
|
|
</div>
|
|
</div>
|
|
<div class="fs-ctas">
|
|
|
|
<a href="https://book.lynkeduppro.com/" class="btn-outline">See All Features →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== TESTIMONIALS ========== -->
|
|
<section class="testimonials">
|
|
<div class="section-label reveal">From the Field</div>
|
|
<h2 class="section-h reveal d1">Roofing Contractors Who <em>Stopped Guessing</em></h2>
|
|
<p class="section-sub reveal d2">Real results from contractors who replaced hours of fieldwork with LynkedUp Pro's AI platform.</p>
|
|
<div class="testimonials-grid">
|
|
<div class="t-card featured reveal">
|
|
<div class="t-stars">★★★★★</div>
|
|
<span class="disc-star">*</span>
|
|
<p class="t-text">I used to wait hours for measurements before I could quote it. With LynkedUp Pro's LADAR, <strong>I'm sending quotes in minutes</strong>. The AI diagnosis caught a flashing issue I missed, and it saved me $1,400 on comeback calls.</p>
|
|
<div class="t-author">
|
|
<div class="t-avatar">MR</div>
|
|
<div>
|
|
<div class="t-name">Mike Rodriguez</div>
|
|
<div class="t-role">Owner · Houston, TX</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="t-card reveal d1">
|
|
<div class="t-stars">★★★★★</div>
|
|
<span class="disc-star">*</span>
|
|
<p class="t-text">The AI diagnosis caught a flashing issue I almost quoted over. <strong>Saved me $1,400 on a comebacks call.</strong> The insurance report it generates? Adjusters love it. Saved 2 claims this month alone.</p>
|
|
<div class="t-author">
|
|
<div class="t-avatar">SJ</div>
|
|
<div>
|
|
<div class="t-name">Sarah Jensen</div>
|
|
<div class="t-role">Operations Manager · Denver</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="t-card reveal d2">
|
|
<div class="t-stars">★★★★★</div>
|
|
<span class="disc-star">*</span>
|
|
<p class="t-text">The territory map is insane. After a hailstorm, <strong>I had a list of 47 flagged addresses</strong> before my competitors even drove out. Booked 11 jobs in 48 hours. That's what this platform does.</p>
|
|
<div class="t-author">
|
|
<div class="t-avatar" style="background:rgba(34,211,238,0.12);color:var(--cyan)">DL</div>
|
|
<div>
|
|
<div class="t-name">Derek Lam</div>
|
|
<div class="t-role">Owner · Dallas, TX</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ========== FINAL CTA ========== -->
|
|
<section class="final-hero">
|
|
<div class="fh-bg"></div>
|
|
<div class="fh-ov"></div>
|
|
<div class="fh-inner">
|
|
<div class="hero-badge" style="justify-content:center;margin-bottom:24px" class="reveal">
|
|
<div class="badge-dot"></div>
|
|
<span class="badge-text">Book a Demo · See It Live</span>
|
|
</div>
|
|
<h2 class="reveal">
|
|
Your Crew Is Ready.<br>
|
|
Your Territory Is Ready.<br>
|
|
Are <span class="o">You?</span>
|
|
</h2>
|
|
<p class="reveal d1">
|
|
Every day you're not using LiDAR estimates, AI diagnosis, and geospatial mapping, a competitor who is will close the jobs that should be yours.
|
|
</p>
|
|
<div class="cta-btns reveal d2">
|
|
|
|
<a href="https://book.lynkeduppro.com/" class="btn-outline" style="font-size:15px;padding:14px 24px">Book a demo</a>
|
|
</div>
|
|
<p style="font-size:12px;color:var(--text-3);margin-top:20px" class="reveal d3">Setup in under 10 minutes · Works on iOS, Android & Web · Cancel anytime</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="footer-row">
|
|
<div class="footer-logo"><img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro" class="brand-logo-img" style="height:34px;width:auto;display:block;object-fit:contain"></div>
|
|
|
|
<div class="footer-copy">© 2025 LynkedUp Pro. All rights reserved.</div>
|
|
</div>
|
|
<div class="fine-print">
|
|
<p>* Figures shown are illustrative and reflect beta-period targets; individual results vary.</p>
|
|
<p>** Founders Lifetime Deal is a one-time payment; limited founding-member availability.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const obs = new IntersectionObserver(es => es.forEach(e => { if(e.isIntersecting) e.target.classList.add('in'); }), { threshold: 0.12 });
|
|
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
|
|
|
|
// Animate bars on scroll
|
|
const barObs = new IntersectionObserver(es => {
|
|
es.forEach(e => {
|
|
if(e.isIntersecting) {
|
|
const bars = e.target.querySelectorAll('.bar-c');
|
|
bars.forEach((b,i) => {
|
|
const h = b.style.height;
|
|
b.style.height = '0%';
|
|
setTimeout(() => b.style.height = h, i*100);
|
|
});
|
|
barObs.unobserve(e.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
document.querySelectorAll('.chart-wrap').forEach(el => barObs.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>
|
|
|
|
<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>
|
|
|
|
<!-- Hosted checkout (Stripe) for the "Claim Founders Lifetime Deal" button -->
|
|
<script src="/square-checkout.js"></script>
|
|
|
|
</body>
|
|
</html>
|