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.
650 lines
30 KiB
React
650 lines
30 KiB
React
/* global React, Reveal, GlowCard, Icon, Sparkline, DonutChart, BlueprintHouse, Counter */
|
|
// Features, Connected Operations, Mobile
|
|
|
|
const FEATURES = [
|
|
{ code: "M.01", name: "AI Copilot", icon: "ai", color: "var(--cyan)",
|
|
desc: "An intelligent operator that thinks ahead, rerouting crews, flagging risk, and surfacing next best actions in real time.",
|
|
tag: "ALWAYS ON" },
|
|
{ code: "M.02", name: "Smart Scheduling", icon: "calendar", color: "var(--orange)",
|
|
desc: "Auto-organizes routes, weather, conflicts and dependencies. Suggests the perfect time, every time.",
|
|
tag: "ADAPTIVE" },
|
|
{ code: "M.03", name: "Crew Automation", icon: "crew", color: "var(--green)",
|
|
desc: "Dispatch, check-ins, and timecards run themselves. Field teams stay aligned without the chatter.",
|
|
tag: "HANDS-FREE" },
|
|
{ code: "M.04", name: "GPS Fleet Tracking", icon: "fleet", color: "var(--violet)",
|
|
desc: "Live vehicle telemetry, geofenced job zones, ETA forecasting, and route optimization at a glance.",
|
|
tag: "REAL-TIME" },
|
|
{ code: "M.05", name: "Budget Intelligence", icon: "budget", color: "var(--cyan)",
|
|
desc: "Predictive margins, automated cost capture, and instant variance alerts before they bite.",
|
|
tag: "PREDICTIVE" },
|
|
{ code: "M.06", name: "Real-time Reporting", icon: "report", color: "var(--orange)",
|
|
desc: "Production, profit, and performance, generated continuously from connected operations data.",
|
|
tag: "LIVE" },
|
|
{ code: "M.07", name: "Client Communication", icon: "chat", color: "var(--green)",
|
|
desc: "Branded portal, automated touchpoints, and a single thread per project. Nothing falls through.",
|
|
tag: "BRANDED" },
|
|
{ code: "M.08", name: "Field Intelligence", icon: "field", color: "var(--violet)",
|
|
desc: "AI-powered measurements, photo evidence, claim-ready reports and on-site decisions in minutes.",
|
|
tag: "AI VISION" },
|
|
];
|
|
|
|
// ============ SPEC SHEET - six-system architecture =============
|
|
function SpecSheet() {
|
|
const systems = [
|
|
{ code: "S.01", name: "CRM", icon: "lead", color: "var(--cyan)", desc: "Pipeline, leads & relationships" },
|
|
{ code: "S.02", name: "Canvas", icon: "doc", color: "var(--orange)", desc: "Business development" },
|
|
{ code: "S.03", name: "Measurements",icon: "target", color: "var(--green)", desc: "AI roof & site dimensions" },
|
|
{ code: "S.04", name: "Client", icon: "chat", color: "var(--violet)", desc: "Branded portals & comms" },
|
|
{ code: "S.05", name: "Billing", icon: "money", color: "var(--cyan)", desc: "Invoicing, payments, AR" },
|
|
{ code: "S.06", name: "Estimating", icon: "report", color: "var(--orange)", desc: "Proposals that close" },
|
|
];
|
|
return (
|
|
<section className="section tight" id="systems">
|
|
<div className="beam top"/>
|
|
<div className="shell">
|
|
<Reveal>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
|
|
<div>
|
|
<span className="section-number">
|
|
<span className="num">§04</span>
|
|
<span>SPEC SHEET · CORE STACK</span>
|
|
</span>
|
|
<h2 className="h-section" style={{ marginTop: 22 }}>
|
|
Six systems.<br/>
|
|
<span className="accent">One intelligent CRM/ERP.</span>
|
|
</h2>
|
|
</div>
|
|
<div className="row gap-12">
|
|
<span className="dim-tag">// ALL CONNECTED</span>
|
|
<span className="dim-tag">// ALL AUTOMATED</span>
|
|
<span className="dim-tag" style={{ color: "var(--orange-2)", borderColor: "rgba(255,138,30,0.4)" }}>// BUILT TO PERFORM</span>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<Reveal delay={1}>
|
|
<div style={{
|
|
position: "relative",
|
|
padding: "44px 36px 32px",
|
|
border: "1px solid var(--border)",
|
|
borderRadius: 20,
|
|
background: `
|
|
repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,209,255,0.04) 26px 27px),
|
|
radial-gradient(700px 280px at 50% 0%, rgba(0,209,255,0.12), transparent 70%),
|
|
rgba(2,6,14,0.55)
|
|
`,
|
|
}}>
|
|
<DimCorner pos="tl"/>
|
|
<DimCorner pos="tr"/>
|
|
<DimCorner pos="bl"/>
|
|
<DimCorner pos="br"/>
|
|
|
|
{/* Spec header bar */}
|
|
<div className="row" style={{
|
|
justifyContent: "space-between",
|
|
paddingBottom: 18,
|
|
borderBottom: "1px dashed var(--border)",
|
|
marginBottom: 28,
|
|
fontFamily: "var(--font-mono)",
|
|
fontSize: 11,
|
|
letterSpacing: "0.2em",
|
|
color: "var(--muted)",
|
|
}}>
|
|
<span>LYNKEDUP PRO · TECHNICAL SPECIFICATION</span>
|
|
<span style={{ color: "var(--cyan-2)" }}>SHEET 04 / 10</span>
|
|
</div>
|
|
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 18 }}>
|
|
{systems.map((s, i) => (
|
|
<Reveal key={s.code} delay={(i % 6) + 1}>
|
|
<div style={{
|
|
padding: 20,
|
|
border: `1px solid ${s.color}55`,
|
|
borderRadius: 12,
|
|
background: `linear-gradient(180deg, ${s.color}10, transparent)`,
|
|
position: "relative",
|
|
transition: "transform 0.3s, box-shadow 0.3s",
|
|
}}
|
|
onMouseEnter={e => {
|
|
e.currentTarget.style.transform = "translateY(-4px)";
|
|
e.currentTarget.style.boxShadow = `0 18px 40px -16px ${s.color}99`;
|
|
}}
|
|
onMouseLeave={e => {
|
|
e.currentTarget.style.transform = "none";
|
|
e.currentTarget.style.boxShadow = "none";
|
|
}}
|
|
>
|
|
<div style={{
|
|
width: 44, height: 44, borderRadius: 10,
|
|
border: `1px solid ${s.color}99`,
|
|
background: `${s.color}18`,
|
|
display: "grid", placeItems: "center",
|
|
marginBottom: 18,
|
|
boxShadow: `inset 0 0 18px -4px ${s.color}77`,
|
|
}}>
|
|
<Icon name={s.icon} size={22} stroke={s.color}/>
|
|
</div>
|
|
<div className="mono" style={{ fontSize: 10, color: s.color, letterSpacing: "0.18em", marginBottom: 6 }}>{s.code} /</div>
|
|
<div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, marginBottom: 6 }}>{s.name}</div>
|
|
<div style={{ fontSize: 11, color: "var(--muted)", lineHeight: 1.45 }}>{s.desc}</div>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
|
|
{/* spec footer */}
|
|
<div style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(4, 1fr)",
|
|
gap: 0,
|
|
marginTop: 32,
|
|
borderTop: "1px dashed var(--border)",
|
|
paddingTop: 22,
|
|
}}>
|
|
{[
|
|
{ l: "SEAMLESS COLLABORATION", d: "Office, sales reps, crews & subs aligned", c: "var(--cyan)" },
|
|
{ l: "SMARTER DECISIONS", d: "AI insights you can act on", c: "var(--orange)" },
|
|
{ l: "PROFITABLE GROWTH", d: "Close more, margin up", c: "var(--green)" },
|
|
{ l: "ZERO HANDOFF LOSS", d: "Same data layer end-to-end", c: "var(--violet)" },
|
|
].map(f => (
|
|
<div key={f.l} style={{ paddingRight: 18, borderRight: "1px solid var(--border)" }}>
|
|
<div className="mono" style={{ fontSize: 10, color: f.c, letterSpacing: "0.16em", marginBottom: 8 }}>● {f.l}</div>
|
|
<div style={{ fontSize: 13, color: "var(--ink-2)" }}>{f.d}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function CoreFeatures() {
|
|
return (
|
|
<section className="section" id="features">
|
|
<div className="beam top"/>
|
|
<div className="shell">
|
|
<Reveal>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
|
|
<div>
|
|
<span className="section-number">
|
|
<span className="num">§05</span>
|
|
<span>PLATFORM CAPABILITIES</span>
|
|
</span>
|
|
<h2 className="h-section" style={{ marginTop: 22, maxWidth: 700 }}>
|
|
Eight modules.<br/>
|
|
<span className="accent">One operating brain.</span>
|
|
</h2>
|
|
<p className="sub" style={{ marginTop: 18 }}>
|
|
Every module shares the same connected data layer,
|
|
so insight in one corner of the business becomes action everywhere else.
|
|
</p>
|
|
</div>
|
|
<span className="dim-tag" style={{ height: 30, padding: "4px 12px" }}>// MODULES 01-08</span>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
|
|
{FEATURES.map((f, i) => (
|
|
<Reveal key={f.name} delay={(i % 4) + 1}>
|
|
<GlowCard className="feature-card" style={{ minHeight: 280, padding: 0, display: "flex", flexDirection: "column" }}>
|
|
<div style={{ padding: 26, flex: 1, display: "flex", flexDirection: "column" }}>
|
|
<div className="row" style={{ justifyContent: "space-between", marginBottom: 22 }}>
|
|
<div style={{
|
|
width: 54, height: 54, borderRadius: 14,
|
|
border: `1px solid ${f.color}55`,
|
|
background: `linear-gradient(180deg, ${f.color}22, transparent)`,
|
|
display: "grid", placeItems: "center",
|
|
boxShadow: `0 0 24px -6px ${f.color}88, inset 0 0 24px -6px ${f.color}55`,
|
|
}}>
|
|
<Icon name={f.icon} size={26} stroke={f.color}/>
|
|
</div>
|
|
<span className="mono" style={{ fontSize: 10, color: f.color, letterSpacing: "0.2em" }}>{f.code} /</span>
|
|
</div>
|
|
<div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
|
|
<h3 className="h-card">{f.name}</h3>
|
|
<span className="mono" style={{ fontSize: 9, color: f.color, letterSpacing: "0.18em", opacity: 0.8 }}>{f.tag}</span>
|
|
</div>
|
|
<p style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.5, margin: 0 }}>{f.desc}</p>
|
|
<div style={{ flex: 1 }}/>
|
|
</div>
|
|
<div style={{
|
|
height: 2,
|
|
background: `linear-gradient(90deg, transparent, ${f.color}, transparent)`,
|
|
opacity: 0.6,
|
|
}}/>
|
|
</GlowCard>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// ---------------- Connected Operations -----------------
|
|
function ConnectedOps() {
|
|
// workflow nodes positioned around central blueprint
|
|
const nodes = [
|
|
{ x: 12, y: 14, label: "Leads", icon: "lead", sub: "Auto-qualified" },
|
|
{ x: 12, y: 38, label: "Schedule", icon: "calendar", sub: "Adapts in real time" },
|
|
{ x: 12, y: 62, label: "Inspections",icon: "doc", sub: "Field-captured" },
|
|
{ x: 88, y: 14, label: "Estimates", icon: "money", sub: "Create faster" },
|
|
{ x: 88, y: 38, label: "Jobs", icon: "hammer", sub: "Every step tracked" },
|
|
{ x: 88, y: 62, label: "Invoices", icon: "report", sub: "Paid faster" },
|
|
];
|
|
return (
|
|
<section className="section" id="platform">
|
|
<div className="beam top"/>
|
|
<div className="shell">
|
|
<Reveal>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
|
|
<div>
|
|
<span className="section-number">
|
|
<span className="num">§06</span>
|
|
<span>CONNECTED OPERATIONS</span>
|
|
</span>
|
|
<h2 className="h-section" style={{ marginTop: 22 }}>
|
|
All your work.<br/>
|
|
Connected. <span className="accent">All in one place.</span>
|
|
</h2>
|
|
<p className="sub" style={{ marginTop: 18 }}>
|
|
From leads to final invoice, every operational detail flows
|
|
through the same nervous system. Nothing slips through the cracks.
|
|
</p>
|
|
</div>
|
|
<span className="dim-tag" style={{ height: 30, padding: "4px 12px" }}>// ONE SOURCE OF TRUTH</span>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<Reveal delay={1}>
|
|
<GlowCard style={{ padding: 0, overflow: "hidden" }}>
|
|
<div style={{
|
|
position: "relative",
|
|
height: 720,
|
|
background: `
|
|
radial-gradient(800px 400px at 50% 50%, rgba(0,209,255,0.12), transparent 70%),
|
|
linear-gradient(180deg, rgba(4,10,22,0.4), rgba(2,6,14,0.6))
|
|
`,
|
|
}}>
|
|
{/* SVG connection lines */}
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
|
|
<defs>
|
|
<linearGradient id="line-g" x1="0" x2="1">
|
|
<stop offset="0" stopColor="#00d1ff" stopOpacity="0"/>
|
|
<stop offset="0.5" stopColor="#00d1ff" stopOpacity="0.7"/>
|
|
<stop offset="1" stopColor="#00d1ff" stopOpacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
{nodes.map((n, i) => {
|
|
const cx = 50, cy = 50;
|
|
return (
|
|
<g key={i}>
|
|
<path
|
|
d={`M${n.x} ${n.y} C ${(n.x+cx)/2} ${n.y}, ${(n.x+cx)/2} ${cy}, ${cx} ${cy}`}
|
|
fill="none"
|
|
stroke="rgba(0,209,255,0.32)"
|
|
strokeWidth="0.15"
|
|
strokeDasharray="0.6 0.6"
|
|
vectorEffect="non-scaling-stroke"
|
|
/>
|
|
<circle r="0.5" fill="#7be8ff">
|
|
<animateMotion
|
|
dur={`${3 + i * 0.3}s`}
|
|
repeatCount="indefinite"
|
|
path={`M${n.x} ${n.y} C ${(n.x+cx)/2} ${n.y}, ${(n.x+cx)/2} ${cy}, ${cx} ${cy}`}
|
|
/>
|
|
</circle>
|
|
</g>
|
|
);
|
|
})}
|
|
</svg>
|
|
|
|
{/* Central wireframe house */}
|
|
<div style={{
|
|
position: "absolute",
|
|
left: "50%", top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
opacity: 0.9,
|
|
}}>
|
|
<BlueprintHouse size={520} animate={false} withScan={true}/>
|
|
</div>
|
|
|
|
{/* Central hex logo overlay */}
|
|
<div style={{
|
|
position: "absolute",
|
|
left: "50%", top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 110, height: 110,
|
|
display: "grid", placeItems: "center",
|
|
background: "radial-gradient(circle, rgba(0,209,255,0.3), transparent 60%)",
|
|
zIndex: 2,
|
|
}}>
|
|
<img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro"
|
|
width="100" height="100"
|
|
style={{ width: 100, height: 100, objectFit: "contain", filter: "drop-shadow(0 0 20px rgba(0,209,255,0.9))" }}/>
|
|
</div>
|
|
|
|
{/* Workflow nodes */}
|
|
{nodes.map((n, i) => (
|
|
<div key={n.label} style={{
|
|
position: "absolute",
|
|
left: `${n.x}%`, top: `${n.y}%`,
|
|
transform: `translate(${n.x < 50 ? "-10%" : "-90%"}, -50%)`,
|
|
zIndex: 3,
|
|
}}>
|
|
<div style={{
|
|
width: 200,
|
|
padding: 14,
|
|
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: 12,
|
|
backdropFilter: "blur(14px)",
|
|
boxShadow: "0 8px 24px -10px rgba(0,209,255,0.45)",
|
|
animation: `floatY ${5 + i * 0.4}s ease-in-out infinite`,
|
|
animationDelay: `${i * 0.3}s`,
|
|
}}>
|
|
<div className="row gap-12" style={{ marginBottom: 6 }}>
|
|
<Icon name={n.icon} size={18} stroke="var(--cyan)"/>
|
|
<span style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600 }}>{n.label}</span>
|
|
</div>
|
|
<div style={{ fontSize: 11, color: "var(--muted)" }}>{n.sub}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Footer ribbon */}
|
|
<div style={{
|
|
position: "absolute",
|
|
left: 24, right: 24, bottom: 22,
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
padding: "14px 22px",
|
|
background: "rgba(0,209,255,0.06)",
|
|
border: "1px solid var(--border)",
|
|
borderRadius: 12,
|
|
backdropFilter: "blur(10px)",
|
|
}}>
|
|
<div className="row gap-16">
|
|
<span className="live-dot"/>
|
|
<span className="mono" style={{ fontSize: 12, color: "var(--cyan-2)", letterSpacing: "0.18em" }}>
|
|
ONE SYSTEM · ONE SOURCE OF TRUTH
|
|
</span>
|
|
</div>
|
|
<div className="row gap-24" style={{ fontSize: 11, color: "var(--muted)" }} >
|
|
<span><Counter to={2847} /> events / hr</span>
|
|
<span>·</span>
|
|
<span><Counter to={147} suffix=" ms"/> sync</span>
|
|
<span>·</span>
|
|
<span className="mono" style={{ color: "var(--green)" }}>● HEALTHY</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</GlowCard>
|
|
</Reveal>
|
|
|
|
{/* Outcome bar */}
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 32 }}>
|
|
{[
|
|
{ icon: "clock", color: "var(--cyan)", title: "Save time", desc: "Automate the busy work and focus on what matters." },
|
|
{ icon: "target", color: "var(--orange)", title: "Reduce errors", desc: "Connected data means fewer mistakes." },
|
|
{ icon: "growth", color: "var(--green)", title: "Grow faster", desc: "Better systems. Better decisions. Bigger results." },
|
|
].map((o, i) => (
|
|
<Reveal key={o.title} delay={i + 1}>
|
|
<div style={{
|
|
padding: 22, display: "flex", gap: 16, alignItems: "flex-start",
|
|
border: "1px solid var(--border)", borderRadius: 16,
|
|
background: "rgba(0,209,255,0.03)",
|
|
}}>
|
|
<div style={{
|
|
width: 44, height: 44, borderRadius: 10,
|
|
border: `1px solid ${o.color}55`,
|
|
display: "grid", placeItems: "center",
|
|
background: `${o.color}15`,
|
|
}}>
|
|
<Icon name={o.icon} size={22} stroke={o.color}/>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600, marginBottom: 4 }}>{o.title}</div>
|
|
<div style={{ fontSize: 13, color: "var(--muted)" }}>{o.desc}</div>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// --------------- Mobile Experience ----------------
|
|
function MobilePhone() {
|
|
return (
|
|
<div style={{ position: "relative", width: 320, height: 660 }}>
|
|
{/* Phone frame */}
|
|
<div style={{
|
|
width: "100%", height: "100%",
|
|
background: "linear-gradient(160deg, #1a2540, #07101e)",
|
|
borderRadius: 42,
|
|
padding: 8,
|
|
boxShadow: "0 60px 80px -30px rgba(0,209,255,0.45), 0 0 0 1px rgba(0,209,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.05)",
|
|
position: "relative",
|
|
}}>
|
|
<div style={{
|
|
width: "100%", height: "100%",
|
|
background: "linear-gradient(180deg, #050c18, #02060e)",
|
|
borderRadius: 34,
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
}}>
|
|
{/* Notch */}
|
|
<div style={{
|
|
position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)",
|
|
width: 110, height: 26, background: "#000", borderRadius: 13, zIndex: 5,
|
|
}}/>
|
|
{/* Status bar */}
|
|
<div style={{
|
|
display: "flex", justifyContent: "space-between",
|
|
padding: "16px 24px 0",
|
|
fontSize: 12, fontFamily: "var(--font-display)", fontWeight: 600,
|
|
color: "#fff",
|
|
}}>
|
|
<span>9:41</span>
|
|
<span style={{ opacity: 0 }}>.</span>
|
|
<span className="mono">●●●● <span style={{ marginLeft: 4 }}>5G</span></span>
|
|
</div>
|
|
|
|
{/* App content */}
|
|
<div style={{ padding: "40px 18px 18px", display: "flex", flexDirection: "column", gap: 10 }}>
|
|
<div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
|
|
<span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16 }}>June 23, 2026</span>
|
|
<Icon name="bell" size={18} stroke="var(--cyan)"/>
|
|
</div>
|
|
<div className="mono" style={{ fontSize: 11, color: "var(--cyan-2)", letterSpacing: "0.16em" }}>TODAY · 3 SCHEDULED</div>
|
|
|
|
{/* Schedule cards */}
|
|
{[
|
|
{ t: "10:00 AM", title: "Roof Inspection", sub: "123 Maple St", active: true },
|
|
{ t: "1:30 PM", title: "Estimate Review", sub: "456 Oak Ave" },
|
|
{ t: "11:00 AM", title: "Material Order", sub: "789 Pine Rd" },
|
|
].map((s, i) => (
|
|
<div key={i} style={{
|
|
padding: 14,
|
|
borderRadius: 14,
|
|
background: s.active ? "linear-gradient(180deg, #ff8a1e, #d96100)" : "rgba(0,209,255,0.07)",
|
|
border: s.active ? "1px solid #ffb24d" : "1px solid var(--border)",
|
|
color: s.active ? "#1a0800" : "var(--ink)",
|
|
boxShadow: s.active ? "0 12px 24px -8px rgba(255,138,30,0.6)" : "none",
|
|
}}>
|
|
<div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13 }}>{s.t}</div>
|
|
<div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }}>{s.title}</div>
|
|
<div style={{ fontSize: 11, opacity: 0.75 }}>{s.sub}</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Bottom tabs */}
|
|
<div className="row" style={{ justifyContent: "space-around", marginTop: 16, padding: "10px 0", borderTop: "1px solid rgba(0,209,255,0.15)" }}>
|
|
{["calendar","sync","bell","pin"].map((ic, i) => (
|
|
<div key={i} style={{ width: 32, height: 32, borderRadius: 8, display: "grid", placeItems: "center",
|
|
background: i === 0 ? "rgba(0,209,255,0.18)" : "transparent" }}>
|
|
<Icon name={ic} size={16} stroke={i === 0 ? "var(--cyan)" : "var(--muted)"}/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Side notification glows */}
|
|
<div style={{ position: "absolute", top: 80, right: -180, animation: "floatY 5s ease-in-out infinite" }}>
|
|
<div style={{
|
|
width: 220, padding: 14,
|
|
background: "rgba(0,209,255,0.08)",
|
|
border: "1px solid rgba(0,209,255,0.4)",
|
|
borderRadius: 12,
|
|
backdropFilter: "blur(14px)",
|
|
boxShadow: "0 12px 30px -10px rgba(0,209,255,0.5)",
|
|
}}>
|
|
<div className="row gap-8" style={{ marginBottom: 6 }}>
|
|
<span className="live-dot"/>
|
|
<span className="mono" style={{ fontSize: 10, color: "var(--cyan-2)", letterSpacing: "0.16em" }}>NEW ALERT</span>
|
|
</div>
|
|
<div style={{ fontSize: 13, fontWeight: 600 }}>Diego's crew clocked in</div>
|
|
<div style={{ fontSize: 11, color: "var(--muted)" }}>456 Oak Ave · 3 min ago</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ position: "absolute", bottom: 80, left: -200, animation: "floatY 6s ease-in-out infinite", animationDelay: "1s" }}>
|
|
<div style={{
|
|
width: 240, padding: 14,
|
|
background: "rgba(255,138,30,0.07)",
|
|
border: "1px solid rgba(255,138,30,0.4)",
|
|
borderRadius: 12,
|
|
backdropFilter: "blur(14px)",
|
|
boxShadow: "0 12px 30px -10px rgba(255,138,30,0.45)",
|
|
}}>
|
|
<div className="row gap-8" style={{ marginBottom: 6 }}>
|
|
<Icon name="spark" size={12} stroke="var(--orange)"/>
|
|
<span className="mono" style={{ fontSize: 10, color: "var(--orange-2)", letterSpacing: "0.16em" }}>AI REMINDER</span>
|
|
</div>
|
|
<div style={{ fontSize: 13, fontWeight: 600 }}>Leave by 9:42 AM</div>
|
|
<div style={{ fontSize: 11, color: "var(--muted)" }}>Traffic on Maple St, moderate</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ position: "absolute", top: 350, right: -160, animation: "floatY 5.5s ease-in-out infinite", animationDelay: "2s" }}>
|
|
<div style={{
|
|
width: 180, padding: 12,
|
|
background: "rgba(43,212,156,0.07)",
|
|
border: "1px solid rgba(43,212,156,0.4)",
|
|
borderRadius: 12,
|
|
backdropFilter: "blur(14px)",
|
|
boxShadow: "0 12px 30px -10px rgba(43,212,156,0.4)",
|
|
}}>
|
|
<div className="row gap-8" style={{ marginBottom: 4 }}>
|
|
<Icon name="report" size={12} stroke="var(--green)"/>
|
|
<span className="mono" style={{ fontSize: 10, color: "var(--green)", letterSpacing: "0.16em" }}>DAILY REPORT</span>
|
|
</div>
|
|
<div style={{ fontSize: 13, fontWeight: 600 }}>3 jobs · $12.4K</div>
|
|
<div style={{ fontSize: 11, color: "var(--muted)" }}>Generated · 4:55 PM</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Ambient glow behind phone */}
|
|
<div className="ring-glow" style={{
|
|
width: 500, height: 500, top: 50, left: -100,
|
|
background: "radial-gradient(circle, rgba(0,209,255,0.4), transparent 60%)", zIndex: -1,
|
|
}}/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MobileSection() {
|
|
return (
|
|
<section className="section" id="mobile">
|
|
<div className="beam top"/>
|
|
<div className="shell split">
|
|
<div>
|
|
<Reveal>
|
|
<span className="section-number">
|
|
<span className="num">§07</span>
|
|
<span>FIELD MOBILE</span>
|
|
</span>
|
|
</Reveal>
|
|
<Reveal delay={1}>
|
|
<h2 className="h-section" style={{ marginTop: 22 }}>
|
|
Never miss what matters.<br/>
|
|
<span className="accent">Stay ahead every day.</span>
|
|
</h2>
|
|
</Reveal>
|
|
<Reveal delay={2}>
|
|
<p className="sub" style={{ marginTop: 24 }}>
|
|
The LynkedUp Pro mobile companion turns your phone into a field
|
|
command center. Smart scheduling, real-time alerts, and AI reminders
|
|
keep your day on track, and your business moving forward.
|
|
</p>
|
|
</Reveal>
|
|
<Reveal delay={3}>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 36 }}>
|
|
{[
|
|
{ icon: "calendar", title: "Smart scheduling", sub: "Automatically organize and adapt.", color: "var(--cyan)" },
|
|
{ icon: "bell", title: "Real-time alerts", sub: "Know what's next. Always.", color: "var(--orange)" },
|
|
{ icon: "pin", title: "Location ready", sub: "Get directions and job details in one tap.", color: "var(--green)" },
|
|
{ icon: "sync", title: "Sync everywhere", sub: "Stay aligned across your entire team.", color: "var(--violet)" },
|
|
].map(m => (
|
|
<div key={m.title} className="row gap-16" style={{
|
|
padding: "14px 16px",
|
|
border: "1px solid var(--border)",
|
|
borderRadius: 12,
|
|
background: "rgba(0,209,255,0.03)",
|
|
transition: "border-color 0.25s, transform 0.25s",
|
|
}}
|
|
onMouseEnter={e => {
|
|
e.currentTarget.style.borderColor = "var(--border-strong)";
|
|
e.currentTarget.style.transform = "translateX(6px)";
|
|
}}
|
|
onMouseLeave={e => {
|
|
e.currentTarget.style.borderColor = "var(--border)";
|
|
e.currentTarget.style.transform = "none";
|
|
}}
|
|
>
|
|
<div style={{
|
|
width: 42, height: 42, borderRadius: 10,
|
|
border: `1px solid ${m.color}55`,
|
|
background: `${m.color}15`,
|
|
display: "grid", placeItems: "center",
|
|
}}>
|
|
<Icon name={m.icon} size={20} stroke={m.color}/>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, letterSpacing: "0.04em", textTransform: "uppercase" }}>{m.title}</div>
|
|
<div style={{ fontSize: 13, color: "var(--muted)" }}>{m.sub}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
<div style={{ display: "flex", justifyContent: "center" }}>
|
|
<Reveal delay={2}>
|
|
<img
|
|
src="page/assets/mobile.png"
|
|
alt="LynkedUp Pro mobile app"
|
|
style={{
|
|
width: "100%",
|
|
maxWidth: 320,
|
|
display: "block",
|
|
borderRadius: 28,
|
|
border: "1px solid var(--border-strong)",
|
|
boxShadow: "0 40px 90px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,209,255,0.08)",
|
|
}}
|
|
/>
|
|
</Reveal>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
Object.assign(window, { CoreFeatures, ConnectedOps, MobileSection, SpecSheet });
|