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.
1092 lines
51 KiB
React
1092 lines
51 KiB
React
/* global React, Logo, Counter, Reveal, GlowCard, BlueprintHouse, Sparkline, DonutChart, Icon, DimCorner */
|
||
// Hero, Nav, Marquee, Metrics - v2 editorial / blueprint
|
||
|
||
const { useEffect, useState } = React;
|
||
|
||
function Nav() {
|
||
const [scrolled, setScrolled] = useState(false);
|
||
useEffect(() => {
|
||
const onScroll = () => setScrolled(window.scrollY > 20);
|
||
window.addEventListener("scroll", onScroll, { passive: true });
|
||
return () => window.removeEventListener("scroll", onScroll);
|
||
}, []);
|
||
return (
|
||
<nav style={{
|
||
position: "fixed",
|
||
top: 18,
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
width: "calc(100% - 40px)",
|
||
maxWidth: 1340,
|
||
zIndex: 50,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
padding: "10px 14px 10px 20px",
|
||
borderRadius: 999,
|
||
border: "1px solid var(--border)",
|
||
background: scrolled ? "rgba(6, 12, 24, 0.85)" : "rgba(6, 12, 24, 0.55)",
|
||
backdropFilter: "blur(16px)",
|
||
WebkitBackdropFilter: "blur(16px)",
|
||
transition: "background 0.3s, box-shadow 0.3s",
|
||
boxShadow: scrolled ? "0 18px 40px -20px rgba(0,209,255,0.4), 0 0 0 1px rgba(0,209,255,0.1)" : "none",
|
||
}}>
|
||
<div className="row gap-16">
|
||
<Logo size={30} />
|
||
<span className="mono" style={{ fontSize: 10, letterSpacing: "0.24em", color: "var(--cyan-2)", padding: "3px 8px", border: "1px solid var(--border)", borderRadius: 4 }}>
|
||
MK.07 · 2026.Q2
|
||
</span>
|
||
</div>
|
||
<div className="row gap-24" style={{ fontSize: 13, color: "var(--ink-2)" }}>
|
||
{["Platform", "Features", "Intelligence", "Pricing", "Customers"].map(item => (
|
||
<a key={item} href={`#${item.toLowerCase()}`} style={{
|
||
color: "inherit",
|
||
textDecoration: "none",
|
||
padding: "6px 2px",
|
||
transition: "color 0.2s",
|
||
}}
|
||
onMouseEnter={e => e.currentTarget.style.color = "var(--cyan-2)"}
|
||
onMouseLeave={e => e.currentTarget.style.color = "var(--ink-2)"}
|
||
>{item}</a>
|
||
))}
|
||
</div>
|
||
<div className="row gap-12">
|
||
<a href="https://launch.lynkeduppro.com/" className="btn btn-orange" style={{ height: 38, padding: "0 16px", fontSize: 13 }}>
|
||
Watch a demo
|
||
</a>
|
||
<a href="https://book.lynkeduppro.com/" className="btn btn-orange" style={{ height: 38, padding: "0 16px", fontSize: 13 }}>
|
||
Book a demo <span className="arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
);
|
||
}
|
||
|
||
// ------------ Floating dashboard mockup ----------------
|
||
function HeroDashboard() {
|
||
return (
|
||
<div style={{ position: "relative", width: "100%", maxWidth: 720, perspective: 1600 }}>
|
||
<div className="ring-glow" style={{
|
||
width: 600, height: 600, top: -120, left: -50,
|
||
background: "radial-gradient(circle, rgba(0,209,255,0.45), transparent 60%)",
|
||
}}/>
|
||
<div className="ring-glow" style={{
|
||
width: 400, height: 400, bottom: -100, right: -80,
|
||
background: "radial-gradient(circle, rgba(255,138,30,0.25), transparent 60%)",
|
||
}}/>
|
||
|
||
<div style={{ position: "absolute", top: -20, left: "50%", transform: "translateX(-45%)", opacity: 0.4, zIndex: 0 }}>
|
||
<BlueprintHouse size={700} withMeasurements={false} withScan={true}/>
|
||
</div>
|
||
|
||
<div style={{
|
||
position: "relative",
|
||
zIndex: 2,
|
||
transform: "rotateX(2deg) rotateY(-6deg)",
|
||
transformStyle: "preserve-3d",
|
||
marginLeft: 30,
|
||
marginTop: 70,
|
||
}}>
|
||
<GlowCard style={{ width: 620, padding: 0, background: "linear-gradient(180deg, rgba(8,16,32,0.95), rgba(4,10,22,0.95))" }}>
|
||
<div style={{
|
||
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||
padding: "14px 20px",
|
||
borderBottom: "1px solid var(--border)",
|
||
background: "rgba(0,209,255,0.04)",
|
||
}}>
|
||
<div className="row gap-12">
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<span style={{ width:10,height:10,borderRadius:"50%",background:"#ff5f57"}}/>
|
||
<span style={{ width:10,height:10,borderRadius:"50%",background:"#ffbd2e"}}/>
|
||
<span style={{ width:10,height:10,borderRadius:"50%",background:"#28c840"}}/>
|
||
</div>
|
||
<span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.16em" }}>OWNERS BOX · LIVE</span>
|
||
</div>
|
||
<div className="row gap-8">
|
||
<span className="live-dot"/>
|
||
<span className="mono" style={{ fontSize: 11, color: "var(--green)" }}>OPS ONLINE</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ padding: 22 }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 18 }}>
|
||
<div>
|
||
<div style={{ fontSize: 11, color: "var(--muted)", marginBottom: 4 }} className="mono">GOOD MORNING, JUSTIN</div>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>Today's command view</div>
|
||
</div>
|
||
<span className="chip">This week</span>
|
||
</div>
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 18 }}>
|
||
{[
|
||
{ label: "Active Jobs", v: 27, accent: "var(--cyan)", icon: "calendar" },
|
||
{ label: "Crews Live", v: 18, accent: "var(--orange)", icon: "crew" },
|
||
{ label: "Estimates", v: 14, accent: "var(--green)", icon: "doc" },
|
||
{ label: "Revenue", v: "200K", accent: "var(--violet)", icon: "money", prefix: "$" },
|
||
].map(k => (
|
||
<div key={k.label} style={{
|
||
padding: 12,
|
||
background: "rgba(0,209,255,0.04)",
|
||
border: `1px solid rgba(0,209,255,0.16)`,
|
||
borderRadius: 12,
|
||
}}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
|
||
<span style={{ fontSize: 10, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em" }}>{k.label}</span>
|
||
<Icon name={k.icon} size={14} stroke={k.accent}/>
|
||
</div>
|
||
<div className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, color: k.accent, lineHeight: 1 }}>
|
||
{k.prefix}{k.v}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 12 }}>
|
||
<div style={{
|
||
padding: 14,
|
||
background: "rgba(4,12,24,0.7)",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 12,
|
||
}}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
|
||
<span style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.12em" }} className="mono">SCHEDULE</span>
|
||
<span className="chip" style={{ height: 20, fontSize: 9 }}>TODAY</span>
|
||
</div>
|
||
{[
|
||
{ t: "10 AM", title: "Roof Inspection", sub: "123 Maple St", c: "var(--orange)" },
|
||
{ t: "11 AM", title: "Estimate Review", sub: "456 Oak Ave", c: "var(--cyan)" },
|
||
{ t: "1 PM", title: "Material Delivery", sub: "789 Pine Rd", c: "var(--green)" },
|
||
{ t: "3 PM", title: "Project Walkthrough", sub: "321 Cedar Ln", c: "var(--violet)" },
|
||
].map((r, i) => (
|
||
<div key={i} style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "40px 4px 1fr",
|
||
gap: 10,
|
||
alignItems: "center",
|
||
padding: "6px 0",
|
||
}}>
|
||
<span className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>{r.t}</span>
|
||
<span style={{ width: 3, height: 24, background: r.c, borderRadius: 2, boxShadow: `0 0 8px ${r.c}` }}/>
|
||
<div>
|
||
<div style={{ fontSize: 11, fontWeight: 600 }}>{r.title}</div>
|
||
<div style={{ fontSize: 10, color: "var(--muted)" }}>{r.sub}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
|
||
<div style={{
|
||
padding: 14,
|
||
background: "rgba(4,12,24,0.7)",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 12,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 14,
|
||
}}>
|
||
<div style={{ position: "relative" }}>
|
||
<DonutChart size={84} stroke={9} segments={[
|
||
{ value: 9, color: "var(--cyan)" },
|
||
{ value: 6, color: "var(--orange)" },
|
||
{ value: 5, color: "var(--green)" },
|
||
{ value: 7, color: "var(--violet)" },
|
||
]}/>
|
||
<div style={{
|
||
position: "absolute", inset: 0,
|
||
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
|
||
}}>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, lineHeight: 1 }}>27</div>
|
||
<div style={{ fontSize: 8, color: "var(--muted)" }}>TOTAL</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ fontSize: 10, color: "var(--muted)", display: "flex", flexDirection: "column", gap: 4 }}>
|
||
<div className="row gap-8"><span style={{width:6,height:6,background:"var(--cyan)",borderRadius:"50%"}}/>9 In progress</div>
|
||
<div className="row gap-8"><span style={{width:6,height:6,background:"var(--orange)",borderRadius:"50%"}}/>6 Scheduled</div>
|
||
<div className="row gap-8"><span style={{width:6,height:6,background:"var(--green)",borderRadius:"50%"}}/>5 Completed</div>
|
||
<div className="row gap-8"><span style={{width:6,height:6,background:"var(--violet)",borderRadius:"50%"}}/>7 Pending</div>
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
padding: 14,
|
||
background: "rgba(4,12,24,0.7)",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 12,
|
||
}}>
|
||
<div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.14em", marginBottom: 8 }} className="mono">REVENUE · 7D</div>
|
||
<Sparkline data={[12,18,15,22,28,24,32,38,34,42,48,46,54]} color="var(--cyan)" width={210} height={42}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</GlowCard>
|
||
</div>
|
||
|
||
<FloatingCard style={{ top: 40, left: -40, animationDelay: "0s" }} size="lg">
|
||
<div className="row gap-12" style={{ marginBottom: 8 }}>
|
||
<Icon name="spark" size={16} stroke="var(--cyan)"/>
|
||
<span className="mono" style={{ fontSize: 10, color: "var(--cyan)", letterSpacing: "0.18em" }}>AI COPILOT</span>
|
||
</div>
|
||
<div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Suggested action</div>
|
||
<div style={{ fontSize: 11, color: "var(--ink-2)", lineHeight: 1.4 }}>
|
||
Reroute Diego's crew to <span style={{ color: "var(--cyan)" }}>456 Oak Ave</span>, saves 38 min.
|
||
</div>
|
||
</FloatingCard>
|
||
|
||
<FloatingCard style={{ top: 280, left: -80, animationDelay: "1.4s" }} size="sm">
|
||
<div className="row gap-8" style={{ marginBottom: 6 }}>
|
||
<span className="live-dot"/>
|
||
<span className="mono" style={{ fontSize: 9, color: "var(--green)", letterSpacing: "0.16em" }}>ON TRACK</span>
|
||
</div>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, lineHeight: 1 }}>
|
||
<span style={{ color: "var(--green)" }}>95.7%</span>
|
||
</div>
|
||
<div style={{ fontSize: 10, color: "var(--muted)" }}>Workflow accuracy</div>
|
||
</FloatingCard>
|
||
|
||
<FloatingCard style={{ bottom: -20, right: -30, animationDelay: "2.2s" }} size="lg">
|
||
<div className="row gap-12" style={{ marginBottom: 10 }}>
|
||
<Icon name="bell" size={16} stroke="var(--orange)"/>
|
||
<span className="mono" style={{ fontSize: 10, color: "var(--orange)", letterSpacing: "0.18em" }}>UP NEXT · 10:00 AM</span>
|
||
</div>
|
||
<div style={{ fontSize: 13, fontWeight: 600 }}>Roof Inspection</div>
|
||
<div style={{ fontSize: 11, color: "var(--ink-2)", marginBottom: 8 }}>123 Maple St · 12 min away</div>
|
||
<div className="row gap-8">
|
||
<span className="chip orange" style={{ height: 20, fontSize: 9 }}>LIVE</span>
|
||
<span className="chip" style={{ height: 20, fontSize: 9 }}>CREW A</span>
|
||
</div>
|
||
</FloatingCard>
|
||
|
||
<FloatingCard style={{ top: 200, right: -50, animationDelay: "3s" }} size="sm">
|
||
<div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.14em" }} className="mono">FORECAST</div>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, lineHeight: 1.1 }}>
|
||
+<Counter to={35} suffix="%"/>
|
||
</div>
|
||
<Sparkline data={[10,12,11,18,22,28,32]} color="var(--cyan)" width={88} height={22}/>
|
||
</FloatingCard>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FloatingCard({ children, style = {}, size = "md" }) {
|
||
const pad = size === "sm" ? 12 : size === "lg" ? 16 : 14;
|
||
const w = size === "sm" ? 150 : size === "lg" ? 220 : 180;
|
||
return (
|
||
<div style={{
|
||
position: "absolute",
|
||
width: w,
|
||
padding: pad,
|
||
background: "linear-gradient(180deg, rgba(8,18,36,0.92), rgba(4,10,22,0.88))",
|
||
border: "1px solid rgba(0,209,255,0.35)",
|
||
borderRadius: 14,
|
||
backdropFilter: "blur(14px)",
|
||
boxShadow: "0 18px 40px -10px rgba(0,209,255,0.45), 0 0 0 1px rgba(0,209,255,0.18)",
|
||
animation: "floatY 6s ease-in-out infinite",
|
||
zIndex: 3,
|
||
...style,
|
||
}}>
|
||
<span className="corner tl"></span>
|
||
<span className="corner tr"></span>
|
||
<span className="corner bl"></span>
|
||
<span className="corner br"></span>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ============== COMMAND STRIP - live ops ticker ==============
|
||
function CommandStrip() {
|
||
return (
|
||
<div style={{
|
||
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||
padding: "10px 22px",
|
||
borderTop: "1px solid var(--border)",
|
||
borderBottom: "1px solid var(--border)",
|
||
background: "linear-gradient(180deg, rgba(0,209,255,0.05), rgba(0,209,255,0.02))",
|
||
fontFamily: "var(--font-mono)",
|
||
fontSize: 11,
|
||
letterSpacing: "0.18em",
|
||
color: "var(--ink-2)",
|
||
overflow: "hidden",
|
||
}}>
|
||
<div className="row gap-16" style={{ flexShrink: 0 }}>
|
||
<span className="live-dot"/>
|
||
<span style={{ color: "var(--green)" }}>OPS ONLINE</span>
|
||
<span style={{ color: "var(--dim)" }}>/</span>
|
||
<span>MK.07 · 2026.Q2</span>
|
||
</div>
|
||
<div style={{
|
||
overflow: "hidden",
|
||
flex: 1,
|
||
margin: "0 40px",
|
||
maskImage: "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)",
|
||
}}>
|
||
<div style={{
|
||
display: "inline-flex",
|
||
gap: 48,
|
||
whiteSpace: "nowrap",
|
||
animation: "scroll 60s linear infinite",
|
||
}}>
|
||
{[
|
||
["CREW A", "→ 123 MAPLE ST", "var(--cyan)"],
|
||
["NEXT JOB", "10:00 AM · ROOF INSPECTION", "var(--orange)"],
|
||
["AI COPILOT", "REROUTE DIEGO'S CREW → SAVES 38 MIN", "var(--cyan)"],
|
||
["PAYMENT", "+$8,250 · MAPLE PROJECT", "var(--green)"],
|
||
["ESTIMATE", "ACCEPTED · $14,800", "var(--cyan)"],
|
||
["WEATHER", "CLEAR · 72°F · WIND 4MPH", "var(--ink-2)"],
|
||
["18 CREWS ACTIVE", "· 27 JOBS LIVE", "var(--orange)"],
|
||
["UPTIME", "99.99% · 142MS SYNC", "var(--green)"],
|
||
].concat([
|
||
["CREW A", "→ 123 MAPLE ST", "var(--cyan)"],
|
||
["NEXT JOB", "10:00 AM · ROOF INSPECTION", "var(--orange)"],
|
||
["AI COPILOT", "REROUTE DIEGO'S CREW → SAVES 38 MIN", "var(--cyan)"],
|
||
["PAYMENT", "+$8,250 · MAPLE PROJECT", "var(--green)"],
|
||
["ESTIMATE", "ACCEPTED · $14,800", "var(--cyan)"],
|
||
["WEATHER", "CLEAR · 72°F · WIND 4MPH", "var(--ink-2)"],
|
||
]).map((it, i) => (
|
||
<span key={i} style={{ display: "inline-flex", gap: 10, alignItems: "center" }}>
|
||
<span style={{ color: it[2], fontWeight: 600 }}>{it[0]}</span>
|
||
<span style={{ color: "var(--muted)" }}>{it[1]}</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="row gap-16" style={{ flexShrink: 0 }}>
|
||
<span>EVENTS · <span style={{ color: "var(--cyan)" }}>2,847/HR</span></span>
|
||
<span style={{ color: "var(--dim)" }}>/</span>
|
||
<span>SYS · <span style={{ color: "var(--green)" }}>GREEN</span></span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ============== PRODUCT WINDOW - clean, detailed Owners Box ==============
|
||
function HeroProduct() {
|
||
return (
|
||
<div className="card-sharp" style={{
|
||
position: "relative",
|
||
width: "100%",
|
||
maxWidth: 760,
|
||
height: 560,
|
||
borderRadius: 16,
|
||
overflow: "hidden",
|
||
background: "linear-gradient(180deg, #08111f 0%, #03070f 100%)",
|
||
boxShadow:
|
||
"0 60px 120px -30px rgba(0,209,255,0.5)," +
|
||
"0 30px 60px -20px rgba(0,0,0,0.6)," +
|
||
"0 0 0 1px rgba(0,209,255,0.32) inset",
|
||
}}>
|
||
{/* Title bar */}
|
||
<div style={{
|
||
height: 38,
|
||
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||
padding: "0 14px",
|
||
borderBottom: "1px solid var(--border)",
|
||
background: "linear-gradient(180deg, rgba(8,18,36,1), rgba(4,10,22,1))",
|
||
}}>
|
||
<div className="row gap-12">
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<span style={{ width: 11, height: 11, borderRadius: "50%", background: "#ff5f57" }}/>
|
||
<span style={{ width: 11, height: 11, borderRadius: "50%", background: "#ffbd2e" }}/>
|
||
<span style={{ width: 11, height: 11, borderRadius: "50%", background: "#28c840" }}/>
|
||
</div>
|
||
<span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.16em" }}>
|
||
lynkeduppro.app <span style={{ color: "var(--dim)" }}>/</span> owners-box
|
||
</span>
|
||
</div>
|
||
<div className="row gap-12">
|
||
<span className="mono" style={{ fontSize: 10, color: "var(--green)" }}>● SYNCED</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Body: sidebar + main */}
|
||
<div style={{ display: "grid", gridTemplateColumns: "160px 1fr", height: "calc(100% - 38px)" }}>
|
||
{/* Sidebar */}
|
||
<div style={{
|
||
padding: "14px 8px",
|
||
borderRight: "1px solid var(--border)",
|
||
background: "rgba(0,209,255,0.02)",
|
||
display: "flex", flexDirection: "column", gap: 2,
|
||
}}>
|
||
{/* mini logo */}
|
||
<div className="row gap-8" style={{ padding: "6px 10px", marginBottom: 8 }}>
|
||
<svg width="18" height="18" viewBox="0 0 48 48">
|
||
<polygon points="24,3 43,13.5 43,34.5 24,45 5,34.5 5,13.5"
|
||
fill="rgba(0,40,70,0.8)" stroke="#00d1ff" strokeWidth="2"/>
|
||
<path d="M16 18 Q24 12 32 18 Q26 22 24 24 Q22 26 16 30 Q24 36 32 30"
|
||
fill="none" stroke="#bff3ff" strokeWidth="3" strokeLinecap="round"/>
|
||
</svg>
|
||
<span style={{ fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 600, letterSpacing: "-0.01em" }}>
|
||
LynkedUp <span style={{ color: "var(--orange)" }}>Pro</span>
|
||
</span>
|
||
</div>
|
||
{[
|
||
{ l: "Owners Box", i: "field", active: true },
|
||
{ l: "Dashboard", i: "growth" },
|
||
{ l: "Projects", i: "doc" },
|
||
{ l: "Leads", i: "lead" },
|
||
{ l: "Pipeline", i: "calendar" },
|
||
{ l: "LynkDispatch", i: "fleet" },
|
||
{ l: "Canvas", i: "spark" },
|
||
{ l: "Measurements", i: "target" },
|
||
{ l: "AI Assistant", i: "ai" },
|
||
{ l: "Settings", i: "shield" },
|
||
].map(it => (
|
||
<div key={it.l} style={{
|
||
display: "flex", alignItems: "center", gap: 10,
|
||
padding: "7px 10px",
|
||
borderRadius: 6,
|
||
fontSize: 11.5,
|
||
color: it.active ? "var(--cyan)" : "var(--ink-2)",
|
||
background: it.active ? "linear-gradient(90deg, rgba(0,209,255,0.18), rgba(0,209,255,0.04))" : "transparent",
|
||
borderLeft: it.active ? "2px solid var(--cyan)" : "2px solid transparent",
|
||
fontWeight: it.active ? 600 : 400,
|
||
}}>
|
||
<Icon name={it.i} size={13} stroke={it.active ? "var(--cyan)" : "var(--muted)"}/>
|
||
<span>{it.l}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Main */}
|
||
<div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
|
||
{/* Top bar */}
|
||
<div className="row" style={{ justifyContent: "space-between", marginBottom: 2 }}>
|
||
<div>
|
||
<div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.16em", marginBottom: 3 }}>OWNERS BOX</div>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>
|
||
Good morning, <span style={{ color: "var(--cyan)" }}>Justin</span>
|
||
</div>
|
||
</div>
|
||
<div className="row gap-10">
|
||
<span className="chip" style={{ height: 24, fontSize: 10 }}>This week</span>
|
||
<div style={{ width: 26, height: 26, borderRadius: "50%", background: "linear-gradient(135deg, #ff8a1e, #d96100)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, color: "#1a0800" }}>J</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* KPI strip */}
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
|
||
{[
|
||
{ l: "Appointments", v: "18", s: "Today", c: "var(--cyan)", i: "calendar" },
|
||
{ l: "Projects", v: "27", s: "In progress", c: "var(--orange)", i: "hammer" },
|
||
{ l: "Estimates", v: "14", s: "Sent", c: "var(--green)", i: "doc" },
|
||
{ l: "Revenue", v: "$200K", s: "This week", c: "var(--violet)", i: "money" },
|
||
].map(k => (
|
||
<div key={k.l} style={{
|
||
padding: "10px 12px",
|
||
borderRadius: 9,
|
||
background: `linear-gradient(180deg, ${k.c}18, ${k.c}05)`,
|
||
border: `1px solid ${k.c}40`,
|
||
}}>
|
||
<div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
|
||
<Icon name={k.i} size={12} stroke={k.c}/>
|
||
<span style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.14em" }} className="mono">{k.l.toUpperCase()}</span>
|
||
</div>
|
||
<div className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: k.c, lineHeight: 1 }}>{k.v}</div>
|
||
<div style={{ fontSize: 9, color: "var(--muted)", marginTop: 3 }}>{k.s}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Body: schedule + right column */}
|
||
<div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 10, flex: 1, minHeight: 0 }}>
|
||
{/* Schedule */}
|
||
<div style={{
|
||
padding: 12,
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 10,
|
||
background: "rgba(4,12,24,0.5)",
|
||
display: "flex", flexDirection: "column", gap: 4,
|
||
overflow: "hidden",
|
||
}}>
|
||
<div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
|
||
<span className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.16em" }}>SCHEDULE · TODAY</span>
|
||
<span className="mono" style={{ fontSize: 9, color: "var(--cyan)" }}>4 ITEMS</span>
|
||
</div>
|
||
{[
|
||
{ t: "10 AM", title: "Roof Inspection", sub: "123 Maple St · Justin J.", c: "var(--orange)" },
|
||
{ t: "11 AM", title: "Estimate Review", sub: "456 Oak Ave · Sarah M.", c: "var(--cyan)" },
|
||
{ t: "1 PM", title: "Material Delivery", sub: "789 Pine Rd · Mike T.", c: "var(--green)" },
|
||
{ t: "3 PM", title: "Project Walkthrough", sub: "321 Cedar Ln · Justin J.", c: "var(--violet)" },
|
||
].map((r, i) => (
|
||
<div key={i} style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "36px 3px 1fr",
|
||
gap: 9,
|
||
alignItems: "center",
|
||
padding: "5px 0",
|
||
borderTop: i ? "1px solid rgba(255,255,255,0.04)" : "none",
|
||
}}>
|
||
<span className="mono" style={{ fontSize: 9, color: "var(--muted)" }}>{r.t}</span>
|
||
<span style={{ width: 3, height: 28, background: r.c, borderRadius: 2, boxShadow: `0 0 6px ${r.c}` }}/>
|
||
<div style={{ minWidth: 0 }}>
|
||
<div style={{ fontSize: 11, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.title}</div>
|
||
<div style={{ fontSize: 9.5, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.sub}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Right column: donut + activity + map */}
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 8, minHeight: 0 }}>
|
||
<div style={{
|
||
padding: 10,
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 10,
|
||
background: "rgba(4,12,24,0.5)",
|
||
display: "flex", alignItems: "center", gap: 10,
|
||
}}>
|
||
<div style={{ position: "relative" }}>
|
||
<DonutChart size={62} stroke={7} segments={[
|
||
{ value: 9, color: "var(--cyan)" },
|
||
{ value: 6, color: "var(--orange)" },
|
||
{ value: 5, color: "var(--green)" },
|
||
{ value: 7, color: "var(--violet)" },
|
||
]}/>
|
||
<div style={{
|
||
position: "absolute", inset: 0,
|
||
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
|
||
}}>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 700, lineHeight: 1 }}>27</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ fontSize: 9, color: "var(--ink-2)", display: "flex", flexDirection: "column", gap: 2.5, flex: 1 }}>
|
||
<div className="row gap-8" style={{ justifyContent: "space-between" }}>
|
||
<span className="row gap-8"><span style={{width:5,height:5,background:"var(--cyan)",borderRadius:"50%"}}/>In progress</span>
|
||
<span className="tabular" style={{ fontWeight: 600 }}>9</span>
|
||
</div>
|
||
<div className="row gap-8" style={{ justifyContent: "space-between" }}>
|
||
<span className="row gap-8"><span style={{width:5,height:5,background:"var(--orange)",borderRadius:"50%"}}/>Scheduled</span>
|
||
<span className="tabular" style={{ fontWeight: 600 }}>6</span>
|
||
</div>
|
||
<div className="row gap-8" style={{ justifyContent: "space-between" }}>
|
||
<span className="row gap-8"><span style={{width:5,height:5,background:"var(--green)",borderRadius:"50%"}}/>Completed</span>
|
||
<span className="tabular" style={{ fontWeight: 600 }}>5</span>
|
||
</div>
|
||
<div className="row gap-8" style={{ justifyContent: "space-between" }}>
|
||
<span className="row gap-8"><span style={{width:5,height:5,background:"var(--violet)",borderRadius:"50%"}}/>Pending</span>
|
||
<span className="tabular" style={{ fontWeight: 600 }}>7</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
padding: 10,
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 10,
|
||
background: "rgba(4,12,24,0.5)",
|
||
flex: 1,
|
||
minHeight: 0,
|
||
}}>
|
||
<div className="row" style={{ justifyContent: "space-between", marginBottom: 5 }}>
|
||
<span className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.16em" }}>RECENT ACTIVITY</span>
|
||
<span className="mono" style={{ fontSize: 9, color: "var(--cyan)" }}>LIVE</span>
|
||
</div>
|
||
{[
|
||
{ c: "var(--cyan)", t: "New lead added", s: "John Smith · 34m" },
|
||
{ c: "var(--orange)", t: "Estimate sent", s: "456 Oak · 1h" },
|
||
{ c: "var(--green)", t: "Payment received", s: "$8.2K · 3h" },
|
||
].map((a, i) => (
|
||
<div key={i} className="row gap-8" style={{ padding: "3px 0" }}>
|
||
<span style={{ width: 5, height: 5, borderRadius: "50%", background: a.c, boxShadow: `0 0 6px ${a.c}` }}/>
|
||
<span style={{ fontSize: 10, fontWeight: 600, flex: 1 }}>{a.t}</span>
|
||
<span style={{ fontSize: 9, color: "var(--muted)" }} className="mono">{a.s}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// AI Copilot overlay - single confident card
|
||
function CopilotOverlay() {
|
||
return (
|
||
<div style={{
|
||
position: "absolute",
|
||
top: 36,
|
||
right: -40,
|
||
width: 270,
|
||
padding: 16,
|
||
background: "linear-gradient(180deg, rgba(8,20,40,0.96), rgba(4,10,22,0.96))",
|
||
border: "1px solid rgba(0,209,255,0.5)",
|
||
borderRadius: 14,
|
||
backdropFilter: "blur(16px)",
|
||
boxShadow: "0 30px 60px -20px rgba(0,209,255,0.55), 0 0 0 1px rgba(0,209,255,0.2)",
|
||
zIndex: 4,
|
||
animation: "floatY 6s ease-in-out infinite",
|
||
}}>
|
||
<span className="corner tl"/>
|
||
<span className="corner tr"/>
|
||
<span className="corner bl"/>
|
||
<span className="corner br"/>
|
||
<div className="row gap-10" style={{ marginBottom: 12 }}>
|
||
<div style={{
|
||
width: 28, height: 28, borderRadius: 8,
|
||
background: "linear-gradient(135deg, var(--cyan), var(--cyan-deep))",
|
||
display: "grid", placeItems: "center",
|
||
boxShadow: "0 0 14px var(--cyan)",
|
||
}}>
|
||
<Icon name="spark" size={14} stroke="#001520"/>
|
||
</div>
|
||
<div>
|
||
<div className="mono" style={{ fontSize: 10, color: "var(--cyan-2)", letterSpacing: "0.18em" }}>AI COPILOT</div>
|
||
<div style={{ fontSize: 10, color: "var(--muted)" }}>Suggested action · 2s ago</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ fontSize: 13, lineHeight: 1.45, color: "var(--ink)", marginBottom: 12 }}>
|
||
Traffic on Maple St is moderate. Suggest leaving by <span style={{ color: "var(--cyan)", fontWeight: 600 }}>9:42 AM</span> for your <span style={{ color: "var(--orange)" }}>10:00 AM</span> inspection.
|
||
</div>
|
||
<div className="row gap-8">
|
||
<button style={{
|
||
flex: 1, height: 32,
|
||
background: "linear-gradient(180deg, var(--cyan), var(--cyan-deep))",
|
||
color: "#001520",
|
||
border: "none", borderRadius: 8,
|
||
fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12,
|
||
cursor: "pointer",
|
||
boxShadow: "0 6px 16px -4px var(--cyan)",
|
||
}}>Apply route</button>
|
||
<button style={{
|
||
height: 32, padding: "0 12px",
|
||
background: "transparent",
|
||
color: "var(--ink-2)",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 8,
|
||
fontSize: 12, cursor: "pointer",
|
||
}}>Dismiss</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function UpNextOverlay() {
|
||
return (
|
||
<div style={{
|
||
position: "absolute",
|
||
bottom: -32,
|
||
left: -36,
|
||
width: 260,
|
||
padding: 14,
|
||
background: "linear-gradient(180deg, rgba(38,18,4,0.96), rgba(20,10,2,0.96))",
|
||
border: "1px solid rgba(255,138,30,0.55)",
|
||
borderRadius: 14,
|
||
backdropFilter: "blur(14px)",
|
||
boxShadow: "0 30px 60px -20px rgba(255,138,30,0.55), 0 0 0 1px rgba(255,138,30,0.2)",
|
||
zIndex: 4,
|
||
animation: "floatY 7s ease-in-out infinite",
|
||
animationDelay: "1.4s",
|
||
}}>
|
||
<span className="corner tl" style={{ borderColor: "var(--orange)" }}/>
|
||
<span className="corner tr" style={{ borderColor: "var(--orange)" }}/>
|
||
<span className="corner bl" style={{ borderColor: "var(--orange)" }}/>
|
||
<span className="corner br" style={{ borderColor: "var(--orange)" }}/>
|
||
<div className="row gap-10" style={{ marginBottom: 8 }}>
|
||
<Icon name="bell" size={14} stroke="var(--orange)"/>
|
||
<span className="mono" style={{ fontSize: 10, color: "var(--orange-2)", letterSpacing: "0.18em" }}>UP NEXT · 10:00 AM</span>
|
||
</div>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 600 }}>Roof Inspection</div>
|
||
<div style={{ fontSize: 11, color: "var(--ink-2)" }}>123 Maple St · 12 min away</div>
|
||
<div className="row gap-8" style={{ marginTop: 10 }}>
|
||
<span className="chip orange" style={{ height: 20, fontSize: 9 }}>● LIVE</span>
|
||
<span className="chip" style={{ height: 20, fontSize: 9 }}>CREW A</span>
|
||
<span className="chip" style={{ height: 20, fontSize: 9 }}>RES.</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ============== HERO v3 - Confident Editorial ==============
|
||
function Hero() {
|
||
return (
|
||
<section className="section" style={{ paddingTop: 120, paddingBottom: 40 }}>
|
||
<div className="shell">
|
||
<div className="hero-frame" style={{ padding: 0, overflow: "hidden" }}>
|
||
<DimCorner pos="tl"/>
|
||
<DimCorner pos="tr"/>
|
||
<DimCorner pos="bl"/>
|
||
<DimCorner pos="br"/>
|
||
|
||
<CommandStrip/>
|
||
|
||
<div style={{ padding: "70px 56px 56px" }}>
|
||
{/* Section meta strip */}
|
||
<Reveal>
|
||
<div style={{
|
||
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||
marginBottom: 56,
|
||
}}>
|
||
<span className="section-number">
|
||
<span className="num">§01</span>
|
||
<span>FIELD OPERATING SYSTEM</span>
|
||
</span>
|
||
<div className="row gap-12">
|
||
<span className="dim-tag">BUILD MK.07</span>
|
||
<span className="dim-tag">SOC 2 TYPE II</span>
|
||
<span className="dim-tag" style={{ color: "var(--green)", borderColor: "rgba(43,212,156,0.4)" }}>
|
||
99.99% UPTIME
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<div style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "minmax(420px, 5fr) minmax(540px, 7fr)",
|
||
gap: 64,
|
||
alignItems: "center",
|
||
}}>
|
||
{/* LEFT - editorial column */}
|
||
<div>
|
||
<Reveal>
|
||
<span className="eyebrow">
|
||
<span className="dot"/> AI CONSTRUCTION OPERATING SYSTEM
|
||
</span>
|
||
</Reveal>
|
||
|
||
<Reveal delay={1}>
|
||
<h1 className="h-mega" style={{ marginTop: 36, fontSize: "clamp(56px, 7.2vw, 112px)" }}>
|
||
<span className="grad">One platform.</span><br/>
|
||
<span className="grad">Every job.</span><br/>
|
||
<span style={{ display: "inline-flex", alignItems: "baseline", gap: 12 }}>
|
||
<span className="accent">Zero</span>
|
||
<span style={{
|
||
color: "var(--orange)",
|
||
position: "relative",
|
||
display: "inline-block",
|
||
}}>
|
||
drag.
|
||
<span style={{
|
||
position: "absolute",
|
||
left: 0, right: 0, bottom: "0.06em",
|
||
height: 5,
|
||
background: "linear-gradient(90deg, var(--orange), transparent)",
|
||
boxShadow: "0 0 20px var(--orange)",
|
||
borderRadius: 1,
|
||
}}/>
|
||
</span>
|
||
</span>
|
||
</h1>
|
||
</Reveal>
|
||
|
||
<Reveal delay={2}>
|
||
<p className="sub" style={{ marginTop: 32, fontSize: 17, maxWidth: 480 }}>
|
||
The AI command center for modern construction. Connect crews,
|
||
projects, scheduling, budgets, the customer portal, and field
|
||
intelligence in a single seamless ecosystem. It's your assistant
|
||
that never sleeps or takes a day off.
|
||
</p>
|
||
</Reveal>
|
||
|
||
<Reveal delay={3}>
|
||
<div className="row gap-16" style={{ marginTop: 36 }}>
|
||
<a href="https://book.lynkeduppro.com/" className="btn btn-primary">
|
||
Book a demo <span className="arrow">→</span>
|
||
</a>
|
||
</div>
|
||
<div className="mono" style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.12em", marginTop: 16 }}>
|
||
<span style={{ color: "var(--orange)" }}>4.9★</span> · 248 reviews
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* RIGHT - product stage */}
|
||
<div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
|
||
{/* Ambient glows */}
|
||
<div className="ring-glow" style={{
|
||
width: 600, height: 600, top: -100, left: -100,
|
||
background: "radial-gradient(circle, rgba(0,209,255,0.4), transparent 60%)",
|
||
}}/>
|
||
<div className="ring-glow" style={{
|
||
width: 460, height: 460, bottom: -60, right: -100,
|
||
background: "radial-gradient(circle, rgba(255,138,30,0.22), transparent 60%)",
|
||
}}/>
|
||
|
||
{/* Half wireframe house behind */}
|
||
<div style={{
|
||
position: "absolute",
|
||
top: -10, left: "50%",
|
||
transform: "translateX(-50%)",
|
||
opacity: 0.32,
|
||
zIndex: 0,
|
||
pointerEvents: "none",
|
||
}}>
|
||
<BlueprintHouse size={780} withMeasurements={false} withScan={true}/>
|
||
</div>
|
||
|
||
{/* Floor reflection plate */}
|
||
<div style={{
|
||
position: "absolute",
|
||
bottom: -10,
|
||
width: "100%",
|
||
height: 90,
|
||
background: "radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,209,255,0.18), transparent 70%)",
|
||
filter: "blur(8px)",
|
||
zIndex: 0,
|
||
}}/>
|
||
|
||
<Reveal delay={3}>
|
||
<div style={{ position: "relative", zIndex: 2 }}>
|
||
<img
|
||
src="page/assets/dashboard.png"
|
||
alt="LynkedUp Pro dashboard"
|
||
style={{
|
||
width: "100%",
|
||
maxWidth: 720,
|
||
display: "block",
|
||
borderRadius: 14,
|
||
border: "1px solid var(--border-strong)",
|
||
boxShadow: "0 40px 90px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,209,255,0.08)",
|
||
}}
|
||
/>
|
||
<CopilotOverlay/>
|
||
<UpNextOverlay/>
|
||
|
||
{/* Stage signature plate */}
|
||
<div style={{
|
||
position: "absolute",
|
||
top: -28,
|
||
left: 24,
|
||
padding: "6px 12px",
|
||
border: "1px solid var(--border-strong)",
|
||
background: "rgba(2,6,14,0.9)",
|
||
borderRadius: 4,
|
||
fontFamily: "var(--font-mono)",
|
||
fontSize: 10,
|
||
letterSpacing: "0.22em",
|
||
color: "var(--cyan-2)",
|
||
backdropFilter: "blur(8px)",
|
||
zIndex: 5,
|
||
}}>
|
||
OWNERS BOX · v7.1
|
||
</div>
|
||
|
||
{/* Vertical mono rail beside the product */}
|
||
<div style={{
|
||
position: "absolute",
|
||
right: -32,
|
||
top: 60,
|
||
bottom: 60,
|
||
width: 14,
|
||
display: "flex", flexDirection: "column", justifyContent: "space-between",
|
||
pointerEvents: "none",
|
||
}}>
|
||
{["▴","|","|","◆","|","|","▾"].map((c, i) => (
|
||
<span key={i} style={{
|
||
fontFamily: "var(--font-mono)",
|
||
fontSize: 11,
|
||
color: i === 3 ? "var(--cyan)" : "var(--dim)",
|
||
textShadow: i === 3 ? "0 0 8px var(--cyan)" : "none",
|
||
textAlign: "center",
|
||
}}>{c}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom stat strip */}
|
||
<Reveal delay={4}>
|
||
<div style={{
|
||
marginTop: 80,
|
||
paddingTop: 28,
|
||
borderTop: "1px dashed var(--border)",
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(4, 1fr)",
|
||
gap: 0,
|
||
}}>
|
||
{[
|
||
{ v: "2,000+", l: "Operators on platform", c: "var(--cyan)" },
|
||
{ v: "98.7%", l: "Workflow accuracy", c: "var(--green)" },
|
||
{ v: "65%", l: "Faster delivery", c: "var(--orange)" },
|
||
{ v: "24/7", l: "AI ops monitoring", c: "var(--violet)" },
|
||
].map((s, i) => (
|
||
<div key={s.l} style={{
|
||
paddingLeft: i ? 28 : 0,
|
||
paddingRight: i < 3 ? 28 : 0,
|
||
borderRight: i < 3 ? "1px solid var(--border)" : "none",
|
||
}}>
|
||
<div className="tabular" style={{
|
||
fontFamily: "var(--font-display)",
|
||
fontSize: 38,
|
||
fontWeight: 600,
|
||
lineHeight: 1,
|
||
letterSpacing: "-0.03em",
|
||
color: s.c,
|
||
textShadow: `0 0 20px ${s.c}44`,
|
||
}}>{s.v}</div>
|
||
<div className="mono" style={{
|
||
fontSize: 11,
|
||
letterSpacing: "0.16em",
|
||
color: "var(--muted)",
|
||
marginTop: 8,
|
||
textTransform: "uppercase",
|
||
}}>{s.l}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ============== MANIFESTO ==============
|
||
function Manifesto() {
|
||
return (
|
||
<section className="section tight" style={{ padding: "60px 0" }}>
|
||
<div className="shell">
|
||
<Reveal>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
|
||
<div>
|
||
<span className="section-number">
|
||
<span className="num">§02</span>
|
||
<span>THESIS</span>
|
||
</span>
|
||
<div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.22em", marginTop: 18 }}>
|
||
WHY LYNKEDUP PRO
|
||
</div>
|
||
<div className="ticks" style={{ width: 80, height: 8, marginTop: 12,
|
||
backgroundImage: "repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 9px)", opacity: 0.6 }}/>
|
||
</div>
|
||
<div>
|
||
<h2 className="h-section" style={{ textWrap: "balance", lineHeight: 1.02 }}>
|
||
Construction runs on <span className="orange" style={{ color: "var(--orange)" }}>five tools</span>,{" "}
|
||
<span style={{ color: "var(--muted)" }}>four spreadsheets</span>,<br/>
|
||
and a whiteboard. We replaced all of it with{" "}
|
||
<span className="accent">one operating brain</span>.
|
||
</h2>
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 56 }}>
|
||
{[
|
||
{ n: "01", t: "Connected by design", d: "Every action across CRM, jobs, billing and field flows through the same data layer in real time." },
|
||
{ n: "02", t: "Intelligent by default", d: "The AI Copilot watches every workflow and suggests the next best action, before you know you need it." },
|
||
{ n: "03", t: "Built for the field", d: "Engineered with the operators using it. Roofers, contractors, infrastructure teams, not desk-bound PMs." },
|
||
].map(p => (
|
||
<div key={p.n}>
|
||
<span className="mono" style={{ fontSize: 11, color: "var(--cyan)", letterSpacing: "0.2em" }}>{p.n} /</span>
|
||
<div style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, margin: "10px 0 8px" }}>{p.t}</div>
|
||
<div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.55 }}>{p.d}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// ============== BLUEPRINT MARQUEE - uses dim tags ==============
|
||
function TrustMarquee() {
|
||
const items = [
|
||
{ t: "BUILT FOR ROOFING", d: "18′-7″" },
|
||
{ t: "ENTERPRISE GRADE", d: "12′-3″" },
|
||
{ t: "AI-POWERED OPS", d: "MK.07" },
|
||
{ t: "SOC 2 TYPE II", d: "CERT.04" },
|
||
{ t: "REAL-TIME SYNC", d: "142 MS" },
|
||
{ t: "4,000+ PROJECTS", d: "Q2.26" },
|
||
{ t: "TRUSTED BY FIELD TEAMS", d: "v7.1" },
|
||
{ t: "ZERO DOWNTIME", d: "99.99%" },
|
||
{ t: "BUILT BY ROOFERS", d: "EST.21" },
|
||
];
|
||
return (
|
||
<div className="marquee">
|
||
<div className="marquee-track">
|
||
{[...items, ...items, ...items].map((it, i) => (
|
||
<React.Fragment key={i}>
|
||
<span style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
|
||
<span style={{ color: "var(--ink-2)" }}>{it.t}</span>
|
||
<span className="dim-tag" style={{ height: 22, fontSize: 9, padding: "2px 8px" }}>{it.d}</span>
|
||
</span>
|
||
<span className="sep">◆</span>
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ============== LIVE METRICS v2 ==============
|
||
function LiveMetrics() {
|
||
// Projects-managed counter: starts at 3,000 on launch and ticks up 1 per day.
|
||
const LAUNCH_MS = Date.UTC(2026, 6, 7); // 2026-07-07
|
||
const projectsManaged = 3000 + Math.max(0, Math.floor((Date.now() - LAUNCH_MS) / 86400000));
|
||
const metrics = [
|
||
{ v: projectsManaged, suffix: "+", label: "PROJECTS MANAGED", sub: "Across enterprise contractors, and growing", icon: "shield", color: "var(--cyan)", code: "M.01" },
|
||
{ v: 98.7, suffix: "%", decimals: 1, label: "WORKFLOW ACCURACY", sub: "Connected data, fewer errors", icon: "target", color: "var(--green)", code: "M.02" },
|
||
{ v: 65, suffix: "%", label: "FASTER JOB DELIVERY", sub: "Vs. legacy spreadsheets & CRMs", icon: "growth", color: "var(--orange)", code: "M.03" },
|
||
{ v: 24, suffix: "/7", label: "AI OPS MONITORING", sub: "Always-on field intelligence", icon: "ai", color: "var(--violet)", code: "M.04" },
|
||
];
|
||
return (
|
||
<section className="section tight" id="trust">
|
||
<div className="beam top"/>
|
||
<div className="shell">
|
||
<Reveal>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 20 }}>
|
||
<div>
|
||
<span className="section-number">
|
||
<span className="num">§03</span>
|
||
<span>LIVE METRICS · STREAMING</span>
|
||
</span>
|
||
<h2 className="h-section" style={{ marginTop: 22 }}>
|
||
Field teams choose <span className="accent">precision</span>.
|
||
</h2>
|
||
</div>
|
||
<span className="dim-tag" style={{ height: 30, padding: "4px 12px" }}>
|
||
<span className="live-dot"/> STREAM · 142 MS
|
||
</span>
|
||
</div>
|
||
</Reveal>
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
|
||
{metrics.map((m, i) => (
|
||
<Reveal key={m.label} delay={i + 1}>
|
||
<GlowCard style={{ padding: 0 }}>
|
||
<div className="pad" style={{ padding: 28 }}>
|
||
<div className="row" style={{ justifyContent: "space-between", marginBottom: 24 }}>
|
||
<span className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.2em" }}>{m.code} /</span>
|
||
<Icon name={m.icon} size={22} stroke={m.color}/>
|
||
</div>
|
||
<div className="tabular" style={{
|
||
fontFamily: "var(--font-display)",
|
||
fontSize: 60,
|
||
fontWeight: 600,
|
||
lineHeight: 1,
|
||
letterSpacing: "-0.04em",
|
||
color: m.color,
|
||
textShadow: `0 0 30px ${m.color}55`,
|
||
marginBottom: 14,
|
||
}}>
|
||
<Counter to={m.v} suffix={m.suffix} decimals={m.decimals}/>
|
||
</div>
|
||
<div className="mono" style={{
|
||
fontSize: 11,
|
||
letterSpacing: "0.18em",
|
||
color: "var(--ink)",
|
||
marginBottom: 6,
|
||
}}>{m.label}</div>
|
||
<div style={{ fontSize: 13, color: "var(--muted)" }}>{m.sub}</div>
|
||
</div>
|
||
<div style={{
|
||
height: 4,
|
||
background: `linear-gradient(90deg, transparent, ${m.color}, transparent)`,
|
||
filter: `drop-shadow(0 0 8px ${m.color})`,
|
||
opacity: 0.7,
|
||
}}/>
|
||
</GlowCard>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
Object.assign(window, { Nav, Hero, Manifesto, TrustMarquee, LiveMetrics });
|