diff --git a/app/app/bi/page.tsx b/app/app/bi/page.tsx new file mode 100644 index 0000000..ed02bdb --- /dev/null +++ b/app/app/bi/page.tsx @@ -0,0 +1,12 @@ +import { Bricolage_Grotesque, Source_Serif_4, Spline_Sans_Mono } from 'next/font/google' +import VersionBImpeccable from '@/components/version-bi' + +// Impeccable type system, route-scoped (kept off the global layout so versions +// A/B/C/D in the cream design are untouched). +const display = Bricolage_Grotesque({ subsets: ['latin'], variable: '--ve-display', display: 'swap' }) +const body = Source_Serif_4({ subsets: ['latin'], variable: '--ve-body', display: 'swap' }) +const mono = Spline_Sans_Mono({ subsets: ['latin'], variable: '--ve-mono', display: 'swap' }) + +export default function VersionBImpeccablePage() { + return +} diff --git a/app/app/di/page.tsx b/app/app/di/page.tsx new file mode 100644 index 0000000..8920fad --- /dev/null +++ b/app/app/di/page.tsx @@ -0,0 +1,12 @@ +import { Bricolage_Grotesque, Source_Serif_4, Spline_Sans_Mono } from 'next/font/google' +import VersionDImpeccable from '@/components/version-di' + +// Impeccable type system, route-scoped (kept off the global layout so versions +// A/B/C/D in the cream design are untouched). +const display = Bricolage_Grotesque({ subsets: ['latin'], variable: '--ve-display', display: 'swap' }) +const body = Source_Serif_4({ subsets: ['latin'], variable: '--ve-body', display: 'swap' }) +const mono = Spline_Sans_Mono({ subsets: ['latin'], variable: '--ve-mono', display: 'swap' }) + +export default function VersionDImpeccablePage() { + return +} diff --git a/app/components/impeccable/kit.tsx b/app/components/impeccable/kit.tsx new file mode 100644 index 0000000..a314f0b --- /dev/null +++ b/app/components/impeccable/kit.tsx @@ -0,0 +1,589 @@ +'use client' + +/** + * Impeccable design kit — shared primitives for the impeccable-designed landing + * variants (B-imp at /bi, D-imp at /di). The live /e control (version-e.tsx) + * is intentionally NOT refactored onto this kit; it stays frozen. + * + * Aesthetic: brass-and-midnight "forensic dossier". Gold marks = "verified". + * Type vars (--ve-display / --ve-body / --ve-mono) are set route-side via + * next/font and passed in as `fontVars` on the page root. + */ + +import { useEffect, useState } from 'react' +import Image from 'next/image' +import Link from 'next/link' +import { motion, useReducedMotion, type Variants } from 'framer-motion' + +export const APP_URL = 'https://app.knowcap.ai' + +/* ----------------------------------------------------------------------- */ +/* Scoped styles (shared with the impeccable visual system) */ +/* ----------------------------------------------------------------------- */ + +export const IMPECCABLE_CSS = ` +.ve-root{ + --ink:#14161D; --ink-2:#1B1E27; --ink-3:#242833; + --paper:#F4F5F7; --paper-2:#EBECF0; + --line:#DCDEE4; --line-strong:#C7CAD2; + --line-dark:rgba(255,255,255,.10); --line-dark-2:rgba(255,255,255,.20); + --prose:#2B303B; --prose-dim:#565C68; + --ink-prose:#E7E9EE; --ink-prose-dim:#A7ACB8; + --brass:#C79A3A; --brass-bright:#E2B557; --brass-ink:#8A6516; + --maxw:1120px; --gutter:clamp(20px,5vw,40px); + --fdisp:var(--ve-display,system-ui,'Segoe UI',sans-serif); + --fbody:var(--ve-body,Georgia,'Times New Roman',serif); + --fmono:var(--ve-mono,ui-monospace,'SFMono-Regular',monospace); + --ease:cubic-bezier(.16,1,.3,1); + background:var(--paper); color:var(--prose); + font-family:var(--fbody); + -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; + font-size:17px; line-height:1.6; + overflow-x:hidden; +} +.ve-root *{box-sizing:border-box} +.ve-root ::selection{background:var(--brass-bright);color:var(--ink)} +.ve-wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} +.ve-narrow{max-width:760px} + +/* type */ +.ve-display{font-family:var(--fdisp);font-weight:700;letter-spacing:-.025em;line-height:1.04;text-wrap:balance} +.ve-h1{font-family:var(--fdisp);font-weight:700;letter-spacing:-.03em;line-height:1.02; + font-size:clamp(2.55rem,6vw,4.9rem);text-wrap:balance} +.ve-h2{font-family:var(--fdisp);font-weight:700;letter-spacing:-.025em;line-height:1.05; + font-size:clamp(2rem,4vw,3.05rem);text-wrap:balance} +.ve-h3{font-family:var(--fdisp);font-weight:600;letter-spacing:-.015em;line-height:1.12; + font-size:clamp(1.18rem,1.7vw,1.5rem)} +.ve-lead{font-family:var(--fbody);font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.62;text-wrap:pretty} +.ve-prose{text-wrap:pretty;max-width:68ch} +.ve-mono{font-family:var(--fmono);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase} + +/* the verified mark — highlighter band painted as a background, no z-index games */ +.ve-mark{color:var(--brass-ink);font-weight:inherit;padding:0 .05em;border-radius:1px; + background-image:linear-gradient(rgba(226,181,87,.30),rgba(226,181,87,.30)); + background-repeat:no-repeat;background-position:0 88%;background-size:100% .38em} +.ve-mark--ink{color:var(--brass-bright); + background-image:linear-gradient(rgba(226,181,87,.20),rgba(226,181,87,.20))} + +/* sections */ +.ve-section{position:relative} +.ve-dark{background:var(--ink);color:var(--ink-prose)} +.ve-dark .ve-h1,.ve-dark .ve-h2,.ve-dark .ve-h3{color:#fff} +.ve-pad{padding-block:clamp(72px,11vw,140px)} +.ve-pad-sm{padding-block:clamp(56px,8vw,96px)} +.ve-rule{height:1px;background:var(--line);border:0;margin:0} +.ve-dark .ve-rule{background:var(--line-dark)} + +/* dot field on dark */ +.ve-field{position:absolute;inset:0;pointer-events:none; + background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); + background-size:26px 26px; + -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%); + mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%)} + +/* header */ +.ve-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s} +.ve-header[data-scrolled="true"]{background:rgba(244,245,247,.86);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)} +.ve-nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px} +.ve-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--fdisp);font-weight:700; + letter-spacing:-.02em;font-size:1.06rem;color:var(--ink-prose);text-decoration:none} +.ve-header[data-scrolled="true"] .ve-brand{color:var(--ink)} +.ve-brand img{border-radius:6px;display:block} +.ve-navlinks{display:none;align-items:center;gap:30px} +.ve-navlink{font-family:var(--fmono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; + color:var(--ink-prose-dim);text-decoration:none;transition:color .2s} +.ve-header[data-scrolled="true"] .ve-navlink{color:var(--prose-dim)} +.ve-navlink:hover{color:var(--brass)} +.ve-header[data-scrolled="true"] .ve-navlink:hover{color:var(--brass-ink)} +.ve-navauth{display:flex;align-items:center;gap:14px} +.ve-navauth .ve-textlink{display:none} +@media(min-width:900px){.ve-navlinks{display:flex}.ve-navauth .ve-textlink{display:inline}} + +/* buttons */ +.ve-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fmono);font-weight:600; + font-size:.8rem;letter-spacing:.04em;padding:13px 22px;border-radius:3px;text-decoration:none; + border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s; + white-space:nowrap} +.ve-btn svg{transition:transform .22s var(--ease)} +.ve-btn:hover svg{transform:translateX(3px)} +.ve-btn--primary{background:#fff;color:var(--ink)} +.ve-btn--primary:hover{transform:translateY(-1px);background:var(--brass-bright)} +.ve-on-paper .ve-btn--primary{background:var(--ink);color:#fff} +.ve-on-paper .ve-btn--primary:hover{background:var(--ink-2)} +.ve-btn--ghost{border-color:var(--line-dark-2);color:var(--ink-prose)} +.ve-btn--ghost:hover{border-color:#fff;color:#fff} +.ve-on-paper .ve-btn--ghost{border-color:var(--line-strong);color:var(--prose)} +.ve-on-paper .ve-btn--ghost:hover{border-color:var(--ink);color:var(--ink)} +.ve-btn--sm{padding:9px 15px;font-size:.74rem} +.ve-textlink{font-family:var(--fmono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; + color:var(--ink-prose-dim);text-decoration:none;transition:color .2s} +.ve-header[data-scrolled="true"] .ve-textlink{color:var(--prose-dim)} +.ve-textlink:hover{color:var(--brass)} +.ve-header[data-scrolled="true"] .ve-textlink:hover{color:var(--brass-ink)} + +/* focus */ +.ve-root a:focus-visible,.ve-root button:focus-visible,.ve-root summary:focus-visible{ + outline:2px solid var(--brass);outline-offset:3px;border-radius:2px} + +/* hero */ +.ve-hero{padding-top:clamp(120px,17vh,168px);padding-bottom:clamp(64px,8vw,104px)} +.ve-docid{display:flex;align-items:center;gap:12px;color:var(--ink-prose-dim);margin-bottom:34px} +.ve-docid .ve-mono{color:var(--brass)} +.ve-docid .ve-tick{flex:none} +.ve-hbadge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-dark); + border-radius:999px;padding:7px 15px 7px 11px;margin-bottom:30px;background:rgba(255,255,255,.025)} +.ve-hbadge span{font-family:var(--fbody);font-size:.92rem;color:var(--ink-prose-dim)} +.ve-hero h1{margin:0 0 26px;max-width:18ch} +.ve-hero .ve-lead{color:var(--ink-prose-dim);max-width:56ch;margin:0 0 38px} +.ve-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:46px} +.ve-bullets{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line-dark);padding-top:28px;max-width:680px} +@media(min-width:720px){.ve-bullets{flex-direction:row;gap:28px}} +.ve-bullet{display:flex;align-items:flex-start;gap:10px;font-family:var(--fmono);font-size:.8rem; + letter-spacing:.01em;line-height:1.5;color:var(--ink-prose-dim)} +.ve-bullet .ve-tick{margin-top:1px;flex:none} + +/* exhibit (framed screenshots) */ +.ve-exhibit{position:relative;border:1px solid var(--line-dark-2);border-radius:5px;overflow:hidden; + background:var(--ink-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)} +.ve-on-paper .ve-exhibit{border-color:var(--line-strong);background:#fff;box-shadow:0 30px 60px -34px rgba(20,22,29,.32)} +.ve-exhibit img{display:block;width:100%;height:auto} +.ve-exhibit-bar{display:flex;align-items:center;justify-content:space-between;gap:16px; + padding:10px 16px;border-bottom:1px solid var(--line-dark);color:var(--ink-prose-dim)} +.ve-on-paper .ve-exhibit-bar{border-color:var(--line);color:var(--prose-dim)} +.ve-exhibit-bar .ve-mono{font-size:.66rem} +.ve-seal{display:inline-flex;align-items:center;gap:7px;color:var(--brass)} +.ve-hero-exhibit{margin-top:clamp(54px,7vw,86px)} + +/* generic section head */ +.ve-head{max-width:720px;margin-bottom:clamp(44px,6vw,72px)} +.ve-head .ve-lead{color:inherit;opacity:.82;margin:18px 0 0} +.ve-dim{color:var(--prose-dim)} +.ve-dark .ve-dim{color:var(--ink-prose-dim)} + +/* split exhibit (narrative + framed media, for signature sections) */ +.ve-split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);align-items:center} +@media(min-width:880px){.ve-split{grid-template-columns:1fr 1fr}.ve-split--flip .ve-split-media{order:-1}} +.ve-split-rule{width:34px;height:2px;background:var(--brass);margin-bottom:20px} +.ve-split h3{margin:0 0 16px} +.ve-split p{margin:0 0 14px;color:var(--prose-dim)} +.ve-split p:last-child{margin-bottom:0} +.ve-figure-xl{font-family:var(--fmono);font-weight:600;letter-spacing:-.02em;line-height:1; + color:var(--brass-ink);font-size:clamp(2.4rem,5vw,3.4rem);margin:0 0 18px;display:block} + +/* process / numbered sequence with drawn rail (also used for escalation levels) */ +.ve-process{display:grid;grid-template-columns:1fr;gap:0;position:relative;max-width:820px} +.ve-step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px); + padding-block:clamp(26px,3.4vw,40px);position:relative} +.ve-step + .ve-step{border-top:1px solid var(--line-dark)} +.ve-step-no{font-family:var(--fmono);font-weight:600;font-size:1rem;color:var(--brass); + letter-spacing:.04em;padding-top:.18em;position:relative;white-space:nowrap} +.ve-step-no::before{content:"";position:absolute;left:.5ch;top:2.4em;bottom:-clamp(26px,3.4vw,40px); + width:1px;background:linear-gradient(var(--brass),transparent)} +.ve-step:last-child .ve-step-no::before{display:none} +.ve-step h3{margin:0 0 9px} +.ve-step .ve-step-tag{font-family:var(--fmono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; + color:var(--brass);display:block;margin-bottom:6px} +.ve-step p{margin:0;color:var(--ink-prose-dim);max-width:62ch} +.ve-process-cta{margin-top:clamp(40px,5vw,60px)} +.ve-process-note{margin-top:clamp(28px,4vw,40px);text-align:center;font-family:var(--fmono); + font-size:.72rem;letter-spacing:.06em;color:var(--ink-prose-dim)} + +/* results — evidence ledger, not stat cards */ +.ve-ledger{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)} +@media(min-width:760px){.ve-ledger{grid-template-columns:1fr 1fr}} +.ve-ledger-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,30px);align-items:baseline; + padding:clamp(26px,3.4vw,38px) 4px;border-bottom:1px solid var(--line)} +@media(min-width:760px){ + .ve-ledger-row:nth-child(odd){border-right:1px solid var(--line);padding-right:clamp(26px,3vw,44px)} + .ve-ledger-row:nth-child(even){padding-left:clamp(26px,3vw,44px)} +} +.ve-figure{font-family:var(--fmono);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink); + font-size:clamp(1.9rem,3.6vw,2.7rem);white-space:nowrap} +.ve-ledger-row h3{margin:0 0 6px;font-size:clamp(1.05rem,1.5vw,1.22rem)} +.ve-ledger-row p{margin:0;color:var(--prose-dim);font-size:1rem;line-height:1.55} + +/* security — datasheet list */ +.ve-spec{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-dark)} +.ve-spec-row{display:grid;grid-template-columns:1fr;gap:6px;padding-block:clamp(22px,2.8vw,30px); + border-bottom:1px solid var(--line-dark)} +@media(min-width:760px){.ve-spec-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(24px,4vw,56px);align-items:baseline}} +.ve-spec-row dt{font-family:var(--fdisp);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.28rem);color:#fff; + display:flex;align-items:center;gap:12px} +.ve-spec-row dd{margin:0;color:var(--ink-prose-dim);font-size:1.04rem;line-height:1.55} + +/* faq */ +.ve-faq{max-width:780px;margin:0 auto;border-top:1px solid var(--line)} +.ve-faq details{border-bottom:1px solid var(--line)} +.ve-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px; + padding:clamp(20px,2.6vw,28px) 2px;font-family:var(--fdisp);font-weight:600; + font-size:clamp(1.08rem,1.6vw,1.32rem);color:var(--ink);letter-spacing:-.01em} +.ve-faq summary::-webkit-details-marker{display:none} +.ve-faq summary:hover{color:var(--brass-ink)} +.ve-faq .ve-q-sign{flex:none;width:18px;height:18px;margin-top:.18em;position:relative;color:var(--brass-ink);transition:transform .3s var(--ease)} +.ve-faq .ve-q-sign::before,.ve-faq .ve-q-sign::after{content:"";position:absolute;background:currentColor;border-radius:2px} +.ve-faq .ve-q-sign::before{left:0;right:0;top:8px;height:2px} +.ve-faq .ve-q-sign::after{top:0;bottom:0;left:8px;width:2px;transition:transform .3s var(--ease)} +.ve-faq details[open] .ve-q-sign::after{transform:scaleY(0)} +.ve-faq-a{padding:0 2px clamp(22px,2.8vw,30px) 36px;color:var(--prose-dim);font-size:1.06rem; + line-height:1.62;max-width:66ch} + +/* close */ +.ve-close{text-align:center;max-width:720px;margin:0 auto} +.ve-close h2{margin:0 0 22px;font-size:clamp(2.1rem,4.6vw,3.6rem)} +.ve-close p{margin:0 auto 38px;color:var(--ink-prose-dim);max-width:46ch;font-size:clamp(1.05rem,1.6vw,1.25rem)} +.ve-close .ve-cta-row{justify-content:center} + +/* footer */ +.ve-footer{background:var(--ink);color:var(--ink-prose-dim);padding-block:clamp(56px,7vw,84px) 36px} +.ve-foot-grid{display:grid;grid-template-columns:1fr;gap:40px} +@media(min-width:760px){.ve-foot-grid{grid-template-columns:2fr 1fr 1fr}} +.ve-foot-brand p{margin:16px 0 0;max-width:38ch;color:var(--ink-prose-dim);font-size:1rem;line-height:1.6} +.ve-foot-col h4{font-family:var(--fmono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; + color:var(--ink-prose);margin:0 0 18px;font-weight:600} +.ve-foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} +.ve-foot-col a{color:var(--ink-prose-dim);text-decoration:none;font-size:1rem;transition:color .2s} +.ve-foot-col a:hover{color:var(--brass)} +.ve-foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center; + margin-top:clamp(44px,6vw,68px);padding-top:28px;border-top:1px solid var(--line-dark)} +.ve-foot-bottom p{margin:0;font-family:var(--fmono);font-size:.7rem;letter-spacing:.08em;color:#9298A4} +.ve-foot-bottom nav{display:flex;gap:22px} +.ve-foot-bottom a{color:#9298A4;text-decoration:none;font-family:var(--fmono);font-size:.7rem;letter-spacing:.08em;transition:color .2s} +.ve-foot-bottom a:hover{color:var(--brass)} + +/* floating cta */ +.ve-float{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:55; + width:min(330px,calc(100vw - 32px));background:var(--ink-2);border:1px solid var(--line-dark-2); + border-radius:6px;padding:20px;box-shadow:0 24px 60px -24px rgba(0,0,0,.7)} +.ve-float h3{margin:0 0 6px;font-family:var(--fdisp);font-weight:600;font-size:1.08rem;color:#fff} +.ve-float p{margin:0 0 16px;color:var(--ink-prose-dim);font-size:.96rem;line-height:1.5} +.ve-float-btns{display:flex;flex-direction:column;gap:9px} +.ve-float-btns .ve-btn{justify-content:center;width:100%} +.ve-float-close{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--ink-prose-dim); + cursor:pointer;padding:4px;line-height:0;transition:color .2s} +.ve-float-close:hover{color:#fff} + +@media (prefers-reduced-motion: reduce){ + .ve-root *{animation-duration:.001ms !important;transition-duration:.001ms !important} +} +` + +/* ----------------------------------------------------------------------- */ +/* Small inline glyphs (custom — no icon library) */ +/* ----------------------------------------------------------------------- */ + +export function Tick({ className = '' }: { className?: string }) { + return ( + + ) +} + +export function Arrow() { + return ( + + ) +} + +export function Mark({ children, ink = false }: { children: React.ReactNode; ink?: boolean }) { + return {children} +} + +/* ----------------------------------------------------------------------- */ +/* Motion helpers */ +/* ----------------------------------------------------------------------- */ + +export function useReveal() { + const reduce = useReducedMotion() + const rise: Variants = { + hidden: { opacity: 0, y: 22 }, + show: { opacity: 1, y: 0, transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] } }, + } + const container: Variants = { + hidden: {}, + show: { transition: { staggerChildren: 0.085, delayChildren: 0.04 } }, + } + return { reduce, rise, container } +} + +export function SectionReveal({ children, className = '' }: { children: React.ReactNode; className?: string }) { + const reduce = useReducedMotion() + return ( + + {children} + + ) +} + +/* ----------------------------------------------------------------------- */ +/* Shared chrome — identical across all impeccable variants */ +/* ----------------------------------------------------------------------- */ + +export function ImpeccableHeader() { + const [scrolled, setScrolled] = useState(false) + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 24) + onScroll() + window.addEventListener('scroll', onScroll, { passive: true }) + return () => window.removeEventListener('scroll', onScroll) + }, []) + return ( +
+
+ + + Knowcap + + +
+ Log in + Get Started Free +
+
+
+ ) +} + +export function ImpeccableFooter() { + const year = new Date().getFullYear() + return ( +
+
+
+
+ + + Knowcap + +

The trust layer for AI agents. Every fact confirmed by a named human, with a full audit trail.

+
+
+

Product

+ +
+
+

Company

+
    +
  • Contact Us
    • +
  • Careers
    • +
  • Privacy Policy
    • +
  • Terms of Service
    • +
+
+
+
+

© {year} Knowcap. All rights reserved.

+ +
+
+
+ ) +} + +export function ImpeccableFloatingCTA() { + const [show, setShow] = useState(false) + const [dismissed, setDismissed] = useState(false) + useEffect(() => { + const t = setTimeout(() => setShow(true), 5000) + return () => clearTimeout(t) + }, []) + if (!show || dismissed) return null + return ( + + +

Ready to try Knowcap?

+

Free to start. No credit card required.

+
+ Get Started Free + Log in +
+ + ) +} + +/* ----------------------------------------------------------------------- */ +/* Shared body sections — the CONSTANT across the B/D copy test */ +/* (identical content + design in both variants; only hero + signature */ +/* section differ between B-imp and D-imp) */ +/* ----------------------------------------------------------------------- */ + +const STEPS = [ + { n: '01', h: 'Ingest Every Project Asset', s: 'Upload PDFs, link websites, add YouTube videos, record your screen, or send a bot to your meetings.' }, + { n: '02', h: 'Build Your Project Memory', s: 'Knowcap automatically interlinks all sources into a persistent, searchable memory.' }, + { n: '03', h: 'Generate & Govern with Proof', s: 'Instantly create contracts, SOPs, PRDs, and gap analyses — all backed by verifiable project memory.' }, + { n: '04', h: 'Ask & Share Instantly', s: 'Spin up client-facing Smart Agents trained on your project memory. Every answer backed by the exact source.' }, +] + +const RESULTS = [ + { fig: '1.4–1.8×', h: 'More Projects Delivered', s: 'Instant onboarding, automated docs, self-sufficient clients — more velocity from the same team.' }, + { fig: '50%', h: 'Less Documentation Time', s: 'Generate contracts, SOPs, and PRDs from your project memory.' }, + { fig: '40%', h: 'Fewer Support Tickets', s: 'Verifiable answers before clients create a ticket.' }, + { fig: '70%', h: 'Faster Onboarding', s: 'Give new hires the entire project memory on day one.' }, +] + +const PILLARS = [ + { h: 'Your Data is Yours', s: 'We never train AI models on your private data.' }, + { h: 'Encrypted Everywhere', s: 'AES-256 at rest, TLS in transit.' }, + { h: 'Granular Access Control', s: 'Role-based permissions for every asset.' }, + { h: 'Auditable Sharing', s: 'Permission-controlled links with audit logs.' }, +] + +const FAQS = [ + { q: 'What is Knowcap?', a: 'Knowcap is the trust layer for AI agents. It ingests all your project assets — meetings, screen recordings, documents, and websites — to create a single, verifiable, and searchable project memory.' }, + { q: 'Can Knowcap join confidential meetings?', a: 'Yes, and you have total control. You can invite Knowcap as a full participant, audio-only, or transcript-only mode.' }, + { q: 'What tools does Knowcap integrate with?', a: 'Knowcap includes an MCP server out of the box — wire Claude, Codex, Gemini, or any MCP-compatible agent directly. Odoo integration is live, with Jira, Asana, and ClickUp on our roadmap.' }, + { q: 'Can I share projects with clients?', a: 'Yes. Share entire projects or specific assets, all managed by role-based permissions with full audit logs.' }, +] + +export function ProcessSection() { + return ( +
+
+ ) +} + +export function ResultsSection() { + return ( +
+
+ +

Measurable results from day one

+ + +
+ {RESULTS.map((r) => ( +
+ {r.fig} +
+

{r.h}

+

{r.s}

+
+
+ ))} +
+ +
+
+ ) +} + +export function SecuritySection() { + return ( +
+
+ ) +} + +export function FAQSection() { + return ( +
+
+ +

FAQ

+ + +
+ {FAQS.map((f, i) => ( +
+ + +
{f.a}
+
+ ))} +
+ +
+
+ ) +} + +export function CloseSection({ title, sub }: { title: React.ReactNode; sub: string }) { + return ( +
+
+ ) +} diff --git a/app/components/version-bi.tsx b/app/components/version-bi.tsx new file mode 100644 index 0000000..635200a --- /dev/null +++ b/app/components/version-bi.tsx @@ -0,0 +1,145 @@ +'use client' + +/** + * Version B-imp — Version B's copy (outcome-first, Odoo demo) in the impeccable + * "forensic dossier" design. Lives at /bi. Tracks as variant "b". + * + * Constant (shared with D-imp via the kit): chrome, Process, Results, Security, + * FAQ, Close, Footer. Variable (B's bet): the hero + the "80-second Odoo PR" + * signature section. + */ + +import Image from 'next/image' +import Link from 'next/link' +import { motion } from 'framer-motion' +import ABTracker from '@/components/ab-tracker' +import { + IMPECCABLE_CSS, APP_URL, Tick, Arrow, Mark, useReveal, SectionReveal, + ImpeccableHeader, ImpeccableFooter, ImpeccableFloatingCTA, + ProcessSection, ResultsSection, SecuritySection, FAQSection, CloseSection, +} from '@/components/impeccable/kit' + +function Hero() { + const { reduce, rise, container } = useReveal() + return ( +
+
+ ) +} + +/* B's signature section: the 80-second Odoo demo, rendered as a dossier exhibit. */ +function OdooDemo() { + return ( +
+
+ +
+
+
+ 80 seconds +

Meeting → confirmed scope change → Odoo PR.

+

+ Your client says “add the warehouse module to phase 2.” Knowcap captures it, + timestamps it, classifies it as a scope decision, and puts it in your inbox. + You confirm with one tap. Before the meeting ends, an agent opens a PR on your + Odoo SH repo — with the client's exact words quoted in the PR body. +

+

+ This is one workflow. Knowcap agents can draft emails, generate SOPs, update CRMs, + and build reports — all from verified meeting content. +

+
+
+
+
+ Exhibit · Artifact + Verified source +
+ Auto-generated project artifact with the client's quoted scope change +
+
+
+ +
+
+ ) +} + +export default function VersionBImpeccable({ fontVars = '' }: { fontVars?: string }) { + return ( +
+