{/* Device ping, slides in at tick 1 */}

{/* Phone icon */} Signature request received · any device

{/* Main panel */}

{/* Header */}

= 7 ? "rgba(31,138,76,0.04)" : "var(--bg-elevated)", transition: "background 600ms ease", }}>

MSA_Velora_v4-final.pdf

= 7 ? "rgba(31,138,76,0.10)" : "var(--bg-soft)", color: tick >= 7 ? "var(--success)" : "var(--ink-4)", transition: "all 500ms ease", }}> {tick >= 7 ? "COMPLETE" : `${signedCount} / ${signers.length} SIGNED`}

{/* Progress bar */}

= 7 ? "var(--success)" : "var(--accent)", transition: "width 600ms cubic-bezier(.4,0,.2,1), background 400ms ease", }} />

{/* Signers */}

{signers.map((s, i) => (

{s.signed ? : {i + 1} }

{s.name}

{s.role}

{s.signed ? "SIGNED" : "PENDING"}

))}

{/* eIDAS badge row */}

eIDAS AES · Tamper-evident

{/* Device icons */}

{[ // Desktop , // Tablet , // Phone , ].map((icon, i) => ( {icon} ))}

{/* Repository chip, floats up when complete */}

Saved to Repository

); } function SignatureNativeSection() { const bullets = [ { icon: "sign", title: "Legally binding, everywhere", text: "Collect eIDAS-grade electronic signatures on any device, desktop, tablet, or mobile. No app download required.", }, { icon: "analytics", title: "Real-time signing progress", text: "Monitor document status and signer activity as it happens. Know exactly where each contract stands at any moment.", }, { icon: "repository", title: "Auto-saved to your Repository", text: "Every signed contract is automatically filed, indexed, and searchable in ContractControl's Repository, no manual upload.", }, ]; return (

{/* Left: copy */}

Native eSignature

No more hunting
paper signatures.

ContractControl's native digital signature solution is a faster, more secure, and efficient way to collect signatures, without bolting on a separate tool.

{bullets.map((b, i) => (

{b.text}

))}

{/* Right: animation */}

); } // ─── Section 2: Contract-touch spectrum ────────────────────────────────────── function SignatureTouchSection() { const tiers = [ { key: "high", label: "High-touch", tagStyle: { background: "rgba(181,101,29,0.08)", color: "var(--warning)", borderColor: "rgba(181,101,29,0.22)" }, dotColor: "var(--warning)", headline: "Back-and-forth, handled.", desc: "Redlined contracts that need multiple rounds of negotiation before both sides are ready to sign. ContractControl keeps every version, comment, and redline in one place, so signing is a natural last step, not a fresh export.", bullets: [ "Full negotiation history visible at signing", "Ordered or parallel signing workflows", "Reminder cadence per signer, per deadline", ], }, { key: "low", label: "Low-touch", tagStyle: { background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "rgba(110,86,207,0.20)" }, dotColor: "var(--accent)", headline: "Configured once, signed fast.", desc: "Self-service agreements with moderate customisation, order forms, SOWs, contractor agreements. Teams fill a short intake form, the contract auto-populates, and a signature request goes out without legal lifting a finger.", bullets: [ "Template-driven with variable fields", "Auto-route to the right signatory", "Click-accept or eSignature, your call", ], }, ]; return (

{/* Header */}

Every contract, the right flow

High-touch or low-touch.

Not every contract needs the same signing experience. ContractControl adapts to the complexity of the deal, from redlined enterprise paper to templated self-service agreements.

{/* Spectrum bar */}

{/* Cards */}

{tiers.map((t) => (

{t.label}

{t.headline}

{t.desc}

))}

); } // ─── Section: Secure & compliant ───────────────────────────────────────────── function SignatureSecurityMockup() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => (t + 1) % 8), 1100); return () => clearInterval(id); }, []); const show = (n) => tick >= n; const logs = [ { action: "Document opened", who: "Linnea Andersson", time: "09:41", show: 2 }, { action: "OTP verified", who: "Linnea Andersson", time: "09:42", show: 3 }, { action: "Signature placed", who: "Linnea Andersson", time: "09:43", show: 4 }, { action: "Document opened", who: "Erik Hagberg", time: "10:02", show: 5 }, { action: "OTP verified", who: "Erik Hagberg", time: "10:03", show: 6 }, ]; return (

{/* Header */}

Security · MSA_Velora_v4-final.pdf

{/* Link expiry */}

Link expires

2026-05-31 · 23:59

{/* OTP verification */}

OTP verification

{show(3) ? "VERIFIED" : "REQUIRED"}

{/* Activity log */}

Activity log

{logs.map((e, i) => (

{e.action} · {e.who} {e.time}

))}

); } function SignatureSecuritySection() { const bullets = [ { text: "Set expiration dates on contract links to control who can access them and when" }, { text: "Verify signer identity with one-time passwords and unique IDs at every step" }, { text: "Track every action on contracts with detailed, tamper-proof activity logs" }, ]; return (

{/* Left: mockup */}

{/* Right: copy */}

Security & compliance

Secure and globally compliant.

ContractControl Sign safeguards your data with industry-leading encryption and authentication, and ensures global compliance standards are met throughout the signing process.

{bullets.map((b, i) => (

{b.text}

))}

); } // ─── Section: Collect anywhere ─────────────────────────────────────────────── function SignatureAnywhereAnimation() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => (t + 1) % 8), 1100); return () => clearInterval(id); }, []); const show = (n) => tick >= n; return (

{/* Phone silhouette */}

{/* Screen content */}

{["", "", "", "", ""].map((_, i) => (

))} {/* Signature field */}

{show(3) && ( )}

{/* Confirm button */}

{show(4) ? "Signed ✓" : "Confirm"}

{/* Notch */}

{/* Floating: email notification */}

You have a contract to sign

MSA_Velora · via ContractControl

{/* Floating: Slack alert */}

SMS · Reminder · signature pending

Erik Hagberg hasn't signed yet

{/* Floating: confirmed chip */}

All signed · link expired

); } function SignatureAnywhereSection() { const bullets = [ { text: "Sign and request signatures from anywhere, on any device, laptop, phone, or tablet" }, { text: "Get instant alerts and automated reminders via ContractControl, SMS, and email" }, { text: "Request signatures via a shareable link, no account needed for the signer" }, ]; return (

{/* Left: animation */}

{/* Right: copy */}

Any device, any format

Collect signatures effortlessly, anywhere.

Accelerate your signing process with flexible options for collecting signatures across devices and formats, and keep everyone in the loop with timely notifications.

{bullets.map((b, i) => (

{b.text}

))}

); } // ─── Full eSignature page ───────────────────────────────────────────────────── function ESignaturePage() { const data = window.ccModuleData["signature"]; return (

{/* 3-column feature section (Precisely style) */}

Native sign-off keeps signers on your platform. No redirects, no emails, no external vendor logins required to place a signature.

Qualified Electronic Signatures (QES) meet strict eIDAS requirements. Verify identity with local bank IDs before sealing documents.

Cryptographic sealing guarantees document integrity. Any modification after signature immediately invalidates the certificate.

); } // ─── Section: Signing workflows ────────────────────────────────────────────── function SignatureWorkflowMockup() { const rules = [ { condition: "Contract value", op: ">", value: "€50,000", route: "CFO sign-off" }, { condition: "Contract type", op: "=", value: "DPA / Data", route: "DPO review first" }, { condition: "Counterparty region", op: "=", value: "Outside EU", route: "Legal approval" }, ]; const signers = [ { name: "Erik Hagberg", role: "CEO", status: "required", color: "var(--accent)" }, { name: "Linnea A.", role: "CFO", status: "if >€50k", color: "#E8B339" }, { name: "Maya Karlsson", role: "GC", status: "cc only", color: "var(--ink-4)" }, ]; return (

{/* Rule builder */}

Signing rules · MSA template

{rules.map((r, i) => (

{r.condition} {r.op} {r.value} {r.route}

))}

{/* Signing order */}

Signing order · auto-configured

{signers.map((s, i) => (

{/* Step number with connector */}

{i + 1}

{s.name} {s.role}

{s.status}

))}

Order auto-adjusts when rules match at submission

); } function SignatureWorkflowSection() { return (

{/* Left: mockup */}

{/* Right: copy */}

Smart signing workflows

Route to the right signers, automatically.

Set up rules once and ContractControl handles the rest, routing contracts to the right signatories based on deal value, contract type, or counterparty region. No manual coordination, no missed sign-offs.

{[ { text: "Define signing order, sequential, parallel, or conditional" }, { text: "Rules trigger automatically at submission, no manual step needed" }, { text: "Escalate or reassign at any point without breaking the audit trail" }, ].map((b, i) => (

{b.text}

))}

); } // ─── Section: Automatic reminders ─────────────────────────────────────────── function SignatureRemindersMockup() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => (t + 1) % 5), 1400); return () => clearInterval(id); }, []); const show = (n) => tick >= n; const rules = [ { label: "Not opened after sending", days: "3 days", date: "Nov 1", active: true }, { label: "Document not yet signed", days: "7 days", date: "Nov 5", active: true }, { label: "Expiry date approaching", days: "30 days", date: "Mar 1", active: false }, ]; // Animated notification chip const notifVisible = tick === 2 || tick === 4; return (

{/* Floating notification */}

Reminder sent to Erik Hagberg

{/* Header */}

Automatic reminders · MSA v4-final.pdf {/* Toggle */}

{/* Reminder rules */}

{rules.map((r, i) => (

{r.label}

{r.days} {r.date}

{/* Active dot */}

))}

{/* Footer status */}

2 reminders active · 1 sent this week

); } function SignatureRemindersSection() { return (

{/* Left: copy */}

Automatic reminders

Stop chasing. Let it run.

Set reminder rules once and ContractControl handles the follow-up, automatically nudging signers when a document hasn't been opened, hasn't been signed, or is nearing expiry.

{[ { text: "Trigger reminders when documents go unread or unsigned past your threshold" }, { text: "Expiry reminders sent before contracts lapse, no renewals missed" }, { text: "Every reminder logged in the audit trail, with timestamps" }, ].map((b, i) => (

{b.text}

))}

{/* Right: mockup */}

); } // ─── Section: Auto-filed signatures ───────────────────────────────────────── function SignatureInboxMockup() { const requests = [ { name: "MSA · Velora Industries", from: "Sent by Legal · Anna Sjöberg", due: "Due today", urgent: true, active: true }, { name: "Order Form · Kvist Group", from: "Sent by Sales · Erik Lund", due: "Due in 2 days", urgent: false, active: false }, { name: "NDA · Brevia", from: "Sent by Legal · Anna Sjöberg", due: "Due in 5 days", urgent: false, active: false }, ]; return (

{/* Header */}

Awaiting your signature 3 pending

{/* Request list */} {requests.map((r, i) => (

{r.name}

{r.from}

{r.due}

{r.active && (

)}

))}

); } function SignatureAutoFiledSection() { return (

{/* Left: copy */}

Signature inbox

Your signature requests, right here.

When a contract needs your signature, it shows up directly in ContractControl, not buried in your inbox. See what's waiting, review the full contract, and sign without switching tools.

{[ "All pending requests in one place, no inbox hunting", "Review the full contract before you sign", "Deadlines visible at a glance so nothing slips", ].map((b, i) => (

{b}

))}

{/* Right: mockup */}

); } // ─── Section: eID integrations ─────────────────────────────────────────────── function SignatureEidSection() { const providers = [ { name: "Swedish BankID", flag: "🇸🇪", slug: "swedish-bankid" }, { name: "Denmark MitID", flag: "🇩🇰", slug: "denmark-mitid" }, { name: "Norwegian Bank ID", flag: "🇳🇴", slug: "norwegian-bank-id" }, { name: "Finnish Trust Network", flag: "🇫🇮", slug: "finnish-trust-network" }, { name: "Estonian Mobile-ID", flag: "🇪🇪", slug: "estonian-mobile-id" }, { name: "Smart-ID", flag: "🇪🇪", slug: "smart-id" }, { name: "Itsme", flag: "🇧🇪", slug: "itsme" }, { name: "SPID", flag: "🇮🇹", slug: "spid" }, { name: "D-Trust sign-me", flag: "🇩🇪", slug: "d-trust-sign-me" }, { name: "ZealID app", flag: "🇪🇺", slug: "zealid-app" }, { name: "Freja eID", flag: "🇸🇪", slug: "freja-eid" }, ]; return (

{/* Centered heading */}

eIDAS · 60+ providers

Your counterparty signs with the eID they already have.

60+ national and pan-European identity providers. No new app. No new account. Just sign.

{/* Provider pills, centered, wrapping */}

{providers.map(({ name, flag, slug }) => ( { e.currentTarget.style.background = "rgba(110,86,207,0.18)"; e.currentTarget.style.borderColor = "rgba(110,86,207,0.45)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.06)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.10)"; }} > {flag} {name} ))} + 50 more

{/* Region tags */}

{["Nordics", "Baltics", "DACH", "Benelux", "UK & Ireland", "Southern Europe", "Eastern Europe", "Americas", "Asia Pacific"].map((r) => ( {r} ))}

); } // ─── Departments section ────────────────────────────────────────────────────── function SignatureDepartmentsSection() { const depts = [ { icon: "negotiation", label: "Sales", desc: "Close deals faster with contracts sent and signed the same day.", href: "/solutions/team/sales" }, { icon: "legal", label: "Legal", desc: "Stay in control with full audit trails and eIDAS-grade compliance.", href: "/solutions/team/legal" }, { icon: "workspace", label: "HR & People", desc: "Offer letters, contractor agreements, and NDAs, signed in minutes.", href: "/solutions/team/hr" }, { icon: "obligations", label: "Procurement", desc: "Vendor signatures tracked and archived from day one.", href: "/solutions/team/procurement" }, { icon: "analytics", label: "Finance", desc: "Know exactly which contracts are signed, pending, or blocking revenue, without chasing anyone.", href: "/solutions/team/finance" }, ]; return (

Built for every team

Who uses eSignature?

From Sales to HR to Procurement, eSignature fits into every team's workflow without extra tooling.

{depts.map((d) => ( { e.currentTarget.style.borderColor = "var(--ink-5)"; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }} >

{d.label}

{d.desc}

See how {d.label} uses it ))}

); } // ─── FAQ section ───────────────────────────────────────────────────────────── function SignatureFAQSection() { const [open, setOpen] = React.useState(null); const faqs = [ { q: "How does ContractControl eSignature simplify contract execution?", a: "ContractControl eSignature provides a native digital signing tool built directly into your contract workflow. It allows you to collect legally binding signatures without exporting files to external signing portals.", }, { q: "How does integrated signing reduce contract cycle times?", a: "By keeping signing inside the contract lifecycle, counterparties sign via a secure web interface, and completed files are instantly filed in the Repository. This eliminates manual file uploads and keeps the audit trail intact.", }, { q: "Is ContractControl eSignature compliant with international electronic signature laws?", a: "Yes, ContractControl supports eIDAS Advanced Electronic Signatures (AES) and Qualified Electronic Signatures (QES) across more than sixty jurisdictions. Signed documents include cryptographic seals and audit certificates that meet strict legal standards.", }, { q: "How does the platform secure agreements during the signing phase?", a: "Every signing event is protected by multi-factor authentication, secure links, and tamper-evident PDF encryption. The platform logs all actions to create a court-admissible audit trail.", }, { q: "Can counterparties sign contracts on mobile devices or tablets?", a: "Yes, counterparties can review and sign documents on any desktop, tablet, or smartphone. Signers do not need to install an app or register for a ContractControl account.", }, { q: "How does the platform handle signing status alerts and reminders?", a: "The system sends automated email and SMS reminders based on custom follow-up schedules. You can track open rates and signing actions in real time from your dashboard.", }, ]; const faqSchema = { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": faqs.map(f => ({ "@type": "Question", "name": f.q, "acceptedAnswer": { "@type": "Answer", "text": f.a } })) }; return (

No more huntingpaper signatures.

High-touch or low-touch.

{t.headline}

Secure and globally compliant.

Collect signatures effortlessly, anywhere.

Route to the right signers, automatically.

Stop chasing. Let it run.

Your signature requests, right here.

Your counterparty signs with the eID they already have.

Who uses eSignature?

No more hunting
paper signatures.