// Revly — Shared components const { useState, useEffect, useRef } = React; const { HashRouter, Routes, Route, Link, NavLink, useLocation } = ReactRouterDOM; // ---------- Hooks ---------- function useJsonLd(...schemas) { const ref = useRef([]); useEffect(() => { const nodes = schemas.map((s) => { const el = document.createElement("script"); el.type = "application/ld+json"; el.text = typeof s === "string" ? s : JSON.stringify(s); document.head.appendChild(el); return el; }); ref.current = nodes; return () => {ref.current.forEach((n) => n.remove());}; }, []); } function usePageMeta(title, description) { useEffect(() => { const prevTitle = document.title; document.title = title; let m = document.querySelector('meta[name="description"]'); const prev = m ? m.getAttribute("content") : ""; if (!m) {m = document.createElement("meta");m.setAttribute("name", "description");document.head.appendChild(m);} m.setAttribute("content", description); return () => {document.title = prevTitle;if (m) m.setAttribute("content", prev);}; }, [title, description]); } // ---------- ScrollToTop ---------- function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => {window.scrollTo(0, 0);}, [pathname]); return null; } // ---------- Icons (lucide-style, lightweight inline SVG) ---------- const Icon = ({ name, size = 24, className = "" }) => { const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className }; switch (name) { case "chevron-down":return ; case "chevron-right":return ; case "menu":return ; case "x":return ; case "check":return ; case "users":return ; case "msg":return ; case "nav":return ; case "dash":return ; case "trend":return ; case "search":return ; case "ear":return ; case "heart":return ; case "shield":return ; case "eye":return ; case "mic":return ; default:return null; } }; // ---------- Navbar ---------- function Navbar() { const [productOpen, setProductOpen] = useState(false); const [useCasesOpen, setUseCasesOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const ref = useRef(null); const ucRef = useRef(null); useEffect(() => { const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setProductOpen(false); if (ucRef.current && !ucRef.current.contains(e.target)) setUseCasesOpen(false); }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, []); const productLinks = [ { to: "/collect-quality-reviews", label: "Collect Quality Reviews" }, { to: "/monitor-platforms", label: "Monitor Multiple Review Platforms" }, { to: "/smart-review-requests", label: "Send Smart Review Requests" }, { to: "/manage-review-responses", label: "Manage Review Responses" }]; const useCasesLinks = [ { to: "/use-cases/saas", label: "SaaS teams" }, { to: "/use-cases/agencies", label: "Agencies" }]; return (
Revly
{mobileOpen &&
{productLinks.map((l) => setMobileOpen(false)} style={{ padding: ".5rem 0" }}>{l.label})}
{useCasesLinks.map((l) => setMobileOpen(false)} style={{ padding: ".5rem 0" }}>{l.label})} setMobileOpen(false)} style={{ padding: ".5rem 0" }}>Pricing Start for free
}
); } // ---------- Footer ---------- function Footer() { return ( ); } function FooterCol({ title, links, items }) { return (

{title}

); } // ---------- PlatformBar ---------- function PlatformBar() { const logos = ["G2", "Capterra", "TrustRadius", "GetApp", "Software Advice", "Trustpilot", "App Store", "Google Play", "Shopify"]; const triple = [...logos, ...logos, ...logos]; return (
{triple.map((l, i) => {l} )}
); } // ---------- BeforeAfterSlider — static before/after comparison table ---------- function BeforeAfterSlider({ rows }) { return (
Without Revly
With Revly
{rows.map((r, i) =>
{r.without}
{r.with}
 )}
); } // ---------- ScrollRevealSection — sticky scroll-driven crossfade ---------- function ScrollRevealSection({ title, bgClassName = "", keepTitle = false, children }) { const wrapperRef = useRef(null); const [progress, setProgress] = useState(0); const rafRef = useRef(0); const tickingRef = useRef(false); useEffect(() => { const compute = () => { tickingRef.current = false; const el = wrapperRef.current;if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight; const wrapperHeight = el.offsetHeight; const denom = Math.max(1, wrapperHeight - vh); const p = Math.max(0, Math.min(1, -rect.top / denom)); setProgress(p); }; const onScroll = () => { if (tickingRef.current) return; tickingRef.current = true; rafRef.current = requestAnimationFrame(compute); }; compute(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); cancelAnimationFrame(rafRef.current); }; }, []); const bg = bgClassName === "card" ? "hsl(var(--card))" : bgClassName === "f6" ? "#f6f6f4" : bgClassName === "accent" ? "hsl(var(--accent))" : bgClassName === "muted" ? "hsl(var(--muted))" : "transparent"; const lerp = (a, b, t) => a + (b - a) * t; const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); // Smooth ease-in-out so progress doesn't feel linear/clunky const ease = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; // Detect small viewports: skip the sticky-runway treatment to keep mobile usable const isSmall = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(max-width: 880px)").matches; if (isSmall) { return (

{title}

{children}
); } if (keepTitle) { // Title persists; body has a faint baseline and ramps up smoothly const tRaw = clamp((progress - 0.05) / (0.45 - 0.05), 0, 1); const t = ease(tRaw); const bodyOpacity = lerp(0.18, 1, t); const bodyY = lerp(24, 0, t); return (

{title}

{children}
); } // Default: title and body share the screen; title fades out, body fades up let titleOp, titleY, bodyOp, bodyY; if (progress < 0.2) { titleOp = 1;titleY = 0; const t = ease(clamp(progress / 0.2, 0, 1)); bodyOp = lerp(0.15, 0.22, t); bodyY = lerp(18, 10, t); } else if (progress <= 0.6) { const t = ease((progress - 0.2) / (0.6 - 0.2)); titleOp = lerp(1, 0, t); titleY = lerp(0, -32, t); bodyOp = lerp(0.22, 1, t); bodyY = lerp(10, 0, t); } else { titleOp = 0;titleY = -32;bodyOp = 1;bodyY = 0; } const titlePE = titleOp < 0.1 ? "none" : "auto"; const bodyPE = bodyOp < 0.4 ? "none" : "auto"; return (

{title}

{children}
); } // ---------- FAQ Accordion ---------- function FAQ({ items, title = "Common questions" }) { const [open, setOpen] = useState(-1); return (

{title}

{items.map((it, i) =>
{it.a}
)}
); } // ---------- ClosingCTA ---------- function ClosingCTA({ heading, sub, buttons, bg = "muted" }) { const bgStyle = bg === "primary" ? { background: "hsl(var(--primary))", color: "white" } : { background: "hsl(var(--muted))" }; return (

{heading}

{sub}

{buttons}
); } // ---------- Cross-links ---------- function CrossLinks({ items }) { return (
Also in Revly
{items.map((it, i) =>
{it.chip}

{it.title}

{it.body}

Learn more →
)}
); } // Export to window Object.assign(window, { useJsonLd, usePageMeta, ScrollToTop, Icon, Navbar, Footer, PlatformBar, BeforeAfterSlider, ScrollRevealSection, FAQ, ClosingCTA, CrossLinks });