diff --git a/app/components/impeccable/kit.tsx b/app/components/impeccable/kit.tsx
index 6aac2b5..c47880a 100644
--- a/app/components/impeccable/kit.tsx
+++ b/app/components/impeccable/kit.tsx
@@ -582,8 +582,103 @@ export function CloseSection({ title, sub }: { title: React.ReactNode; sub: stri
Get Started Free
Book a Demo
+
Free to start. Partner pricing on a quick call.
)
}
+
+/* The problem beat (dark). Uses the approved POSITIONING.md sentence as the
+ turn. Honest failure-mode description — no un-shipped claims. */
+export function ProblemSection() {
+ return (
+
+
+
+
+ Most AI agents act on what the AI thinks is true.
+
+ A model mishears one line in a meeting and your agent runs with it — the wrong scope in
+ a PR, a task from a comment nobody confirmed, a “decision” that was really just
+ discussion. When a client says “that's not what we agreed,” there's no record to point to.
+
+
+ Knowcap agents act only on what a human said is true — every fact confirmed,
+ timestamped to its source, and logged.
+
+
+
+
+ )
+}
+
+const INTEGRATIONS = [
+ { k: 'MCP server', tag: 'Live', v: 'Wire Claude, Codex, Gemini, or any MCP-compatible agent directly to your verified facts.' },
+ { k: 'Odoo', tag: 'Live', v: 'Built for Odoo implementation partners — confirmed scope decisions flow toward your Odoo work.' },
+ { k: 'Jira · Asana · ClickUp', tag: 'On the roadmap', v: 'Project-tool sync so confirmed actions land where your team already works.' },
+]
+
+/* Integrations band (on-paper). Surfaces the MCP/Odoo story that was buried in
+ an eyebrow + FAQ. Tags match the shipped-vs-roadmap reality. */
+export function IntegrationsSection() {
+ return (
+
+
+
+ Wire it into the tools you already run
+
+ Knowcap is infrastructure, not another silo. Your agents query verified facts over MCP;
+ confirmed actions flow to your stack.
+
+
+
+
+ {INTEGRATIONS.map((it) => (
+
+
+
{it.k}
+ {it.tag}
+
+
{it.v}
+
+ ))}
+
+
+
+
+ )
+}
+
+const TESTIMONIALS = [
+ { quote: 'Knowcap cut our support tickets by 40% after implementation.', who: 'Ibrahim Abed', org: 'Plementus (Egypt)' },
+ { quote: 'AI-generated PRDs reduced documentation time by half.', who: 'Mohamed Jamal', org: 'BI Solutions (KSA)' },
+ { quote: 'Our teams stopped re-explaining projects to new members. Onboarding now takes minutes.', who: 'Ariika Tech Team', org: 'Odoo Implementation Partner' },
+]
+
+/* Social proof (dark). The three real customer testimonials. */
+export function TestimonialsSection() {
+ return (
+
+
+
+
+ What teams are saying
+
+
+ {TESTIMONIALS.map((t) => (
+
+
+ “{t.quote}”
+
+ {t.who}
+ {t.org}
+
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/app/components/impeccable/themed-shell.tsx b/app/components/impeccable/themed-shell.tsx
index 1a2f33f..108f54e 100644
--- a/app/components/impeccable/themed-shell.tsx
+++ b/app/components/impeccable/themed-shell.tsx
@@ -18,7 +18,8 @@ import ABTracker from '@/components/ab-tracker'
import ThemeSwitcher, { useThemeColors } from '@/components/theme-switcher'
import {
IMPECCABLE_CSS, APP_URL,
- ProcessSection, ResultsSection, SecuritySection, FAQSection, CloseSection,
+ ProblemSection, ProcessSection, IntegrationsSection, SecuritySection,
+ ResultsSection, TestimonialsSection, FAQSection, CloseSection,
ImpeccableFooter, ImpeccableFloatingCTA,
} from '@/components/impeccable/kit'
@@ -59,6 +60,61 @@ const THEME_OVERRIDES = `
.ve-spec-row dt{color:var(--t-hero-heading)}
.ve-themes{display:flex;align-items:center;gap:14px}
@media(max-width:640px){.ve-themes .ve-textlink{display:none}}
+
+/* On near-black hero + dark sections the forest-green accent fails contrast, so
+ dark-context accents use the bright "verified" green (same hue — verified-green
+ stays the brand constant across themes). */
+.ve-dark .ve-mark{color:var(--t-accent-bright);background-image:linear-gradient(color-mix(in srgb,var(--t-accent-bright) 26%,transparent),color-mix(in srgb,var(--t-accent-bright) 26%,transparent))}
+.ve-dark .ve-mark--ink{color:var(--t-accent-bright);background-image:linear-gradient(color-mix(in srgb,var(--t-accent-bright) 22%,transparent),color-mix(in srgb,var(--t-accent-bright) 22%,transparent))}
+.ve-dark .ve-step-no,.ve-dark .ve-step .ve-step-tag,.ve-docid .ve-mono,.ve-seal,.ve-dark .ve-faq .ve-q-sign{color:var(--t-accent-bright)}
+.ve-dark .ve-step-no::before{background:linear-gradient(var(--t-accent-bright),transparent)}
+.ve-dark .ve-navlink:hover,.ve-dark .ve-textlink:hover{color:var(--t-accent-bright)}
+
+/* Two-column hero: the hero's two in-flow children (text block + framed exhibit)
+ become side-by-side columns on desktop, filling the dead right space. The
+ .ve-field is position:absolute so it stays out of the grid. Below 980px it
+ falls back to the original stacked layout. */
+@media(min-width:980px){
+ .ve-hero .ve-wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4vw,64px);align-items:center}
+ .ve-hero .ve-hero-exhibit{margin-top:0}
+ .ve-hero h1{max-width:none}
+ .ve-hero .ve-lead{max-width:46ch}
+ .ve-hero .ve-bullets{max-width:none}
+}
+
+/* Hero trust strip (honest social proof under the CTAs) */
+.ve-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px;
+ font-family:var(--t-fmono);font-size:.72rem;letter-spacing:.04em;color:var(--t-ink-prose-dim)}
+.ve-trust .ve-trust-dot{width:4px;height:4px;border-radius:999px;background:var(--t-accent-bright);flex:none}
+
+/* Problem section */
+.ve-prob{max-width:760px}
+.ve-prob .ve-lead{color:var(--t-ink-prose-dim);margin:22px 0 0}
+.ve-prob .ve-prob-turn{color:var(--t-ink-prose);margin-top:18px}
+
+/* Integrations band */
+.ve-integrations{display:grid;grid-template-columns:1fr;gap:18px}
+@media(min-width:820px){.ve-integrations{grid-template-columns:repeat(3,1fr)}}
+.ve-integration{border:1px solid var(--t-line);border-radius:6px;padding:clamp(22px,2.6vw,30px);background:var(--t-card)}
+.ve-integration-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
+.ve-integration-head h3{margin:0}
+.ve-int-tag{font-family:var(--t-fmono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
+ padding:4px 9px;border-radius:999px;white-space:nowrap;border:1px solid color-mix(in srgb,var(--t-accent) 40%,transparent);color:var(--t-accent)}
+.ve-integration p{margin:0;color:var(--t-prose-dim);font-size:1rem;line-height:1.55}
+
+/* Testimonials */
+.ve-quotes{display:grid;grid-template-columns:1fr;gap:18px}
+@media(min-width:860px){.ve-quotes{grid-template-columns:repeat(3,1fr)}}
+.ve-quote{margin:0;border:1px solid var(--t-line);border-radius:6px;padding:clamp(22px,2.6vw,30px);
+ display:flex;flex-direction:column;gap:18px;background:color-mix(in srgb,var(--t-ink-prose) 4%,transparent)}
+.ve-quote blockquote{margin:0;font-family:var(--t-fdisp);font-weight:600;letter-spacing:-.01em;
+ font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.4;color:var(--t-hero-heading);text-wrap:pretty}
+.ve-quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto;border-top:1px solid var(--t-line);padding-top:16px}
+.ve-quote-who{font-family:var(--t-fdisp);font-weight:600;color:var(--t-hero-heading);font-size:.96rem}
+.ve-quote-org{font-family:var(--t-fmono);font-size:.7rem;letter-spacing:.06em;color:var(--t-ink-prose-dim)}
+
+/* Close section pricing note */
+.ve-close-note{margin:22px auto 0;font-family:var(--t-fmono);font-size:.72rem;letter-spacing:.04em;color:var(--t-ink-prose-dim)}
`
export const THEMED_STYLE = FONT_IMPORT + IMPECCABLE_CSS + THEME_OVERRIDES
@@ -123,6 +179,9 @@ export default function ThemedShell({
'--t-ink-prose': colors.heroSub,
'--t-ink-prose-dim': colors.heroBullet,
'--t-accent': colors.accentColor,
+ // Bright "verified" green for dark sections (forest-green fails on near-black).
+ // Constant across themes so the verified-green keeps one identity.
+ '--t-accent-bright': '#4ade80',
'--t-accent-contrast': colors.heroBtnText,
'--t-heading': colors.headingColor,
'--t-hero-from': colors.heroFrom,
@@ -139,10 +198,13 @@ export default function ThemedShell({
{hero}
+
{signature}
-
+
+
+
diff --git a/app/components/theme-switcher.tsx b/app/components/theme-switcher.tsx
index d2a2321..4759141 100644
--- a/app/components/theme-switcher.tsx
+++ b/app/components/theme-switcher.tsx
@@ -3,10 +3,10 @@
import { useState, useEffect, useCallback } from 'react'
const THEMES = [
- { key: 'baseline', label: 'Baseline', bg: '#F5F4F1', accent: '#1a1a1a', border: '#e5e5e5' },
- { key: 'operator-dark', label: 'Operator', bg: '#0B0E14', accent: '#58A6FF', border: '#1F2530' },
+ { key: 'baseline', label: 'Baseline', bg: '#F5F4F1', accent: '#1F6B3A', border: '#e5e5e5' },
+ { key: 'operator-dark', label: 'Operator', bg: '#0B0E14', accent: '#4ade80', border: '#1F2530' },
{ key: 'operator-light', label: 'Operator Light', bg: '#FAFAF7', accent: '#1F6B3A', border: '#DDD8CC' },
- { key: 'library', label: 'Library', bg: '#F5EBDC', accent: '#8B3E2F', border: '#D9C9A8' },
+ { key: 'library', label: 'Library', bg: '#F5EBDC', accent: '#1F6B3A', border: '#D9C9A8' },
] as const
type ThemeKey = typeof THEMES[number]['key']
@@ -46,8 +46,8 @@ const THEME_MAP: Record = {
accentColor: '#1F6B3A', iconBg: '#F5F4F1',
heroFrom: '#18181B', heroTo: '#0A0A0A',
heroBadgeBg: 'rgba(255,255,255,0.06)', heroBadgeBorder: 'rgba(255,255,255,0.08)', heroBadgeText: 'rgba(255,255,255,0.6)',
- heroHeading: '#FFFFFF', heroHeadingDim: 'rgba(255,255,255,0.45)',
- heroSub: 'rgba(255,255,255,0.4)', heroBullet: 'rgba(255,255,255,0.35)',
+ heroHeading: '#FFFFFF', heroHeadingDim: 'rgba(255,255,255,0.66)',
+ heroSub: 'rgba(255,255,255,0.66)', heroBullet: 'rgba(255,255,255,0.66)',
heroBtnBg: '#1F6B3A', heroBtnText: '#FFFFFF',
heroGhostBorder: 'rgba(255,255,255,0.12)', heroGhostText: 'rgba(255,255,255,0.7)',
titleFont: "'Space Grotesk', sans-serif",
@@ -57,43 +57,43 @@ const THEME_MAP: Record = {
},
'operator-dark': {
pageBg: '#0B0E14', cardBg: '#11151D', cardBorder: '#1F2530',
- headingColor: '#C9D1D9', bodyColor: '#8B949E', mutedColor: '#767E8A',
- accentColor: '#58A6FF', iconBg: '#1F2530',
+ headingColor: '#C9D1D9', bodyColor: '#8B949E', mutedColor: '#828B98',
+ accentColor: '#4ade80', iconBg: '#1F2530',
heroFrom: '#060810', heroTo: '#0B0E14',
- heroBadgeBg: 'rgba(88,166,255,0.08)', heroBadgeBorder: 'rgba(88,166,255,0.15)', heroBadgeText: '#58A6FF',
- heroHeading: '#E6EDF3', heroHeadingDim: 'rgba(201,209,217,0.5)',
- heroSub: 'rgba(139,148,158,0.7)', heroBullet: 'rgba(139,148,158,0.5)',
- heroBtnBg: '#58A6FF', heroBtnText: '#0B0E14',
+ heroBadgeBg: 'rgba(74,222,128,0.08)', heroBadgeBorder: 'rgba(74,222,128,0.2)', heroBadgeText: '#4ade80',
+ heroHeading: '#E6EDF3', heroHeadingDim: 'rgba(201,209,217,0.72)',
+ heroSub: 'rgba(139,148,158,0.85)', heroBullet: 'rgba(139,148,158,0.85)',
+ heroBtnBg: '#4ade80', heroBtnText: '#0B0E14',
heroGhostBorder: '#1F2530', heroGhostText: '#8B949E',
- titleFont: "'JetBrains Mono', monospace",
- bodyFont: "'JetBrains Mono', monospace",
+ titleFont: "'Space Grotesk', sans-serif",
+ bodyFont: "'Inter', sans-serif",
monoFont: "'JetBrains Mono', monospace",
isDark: true,
},
'operator-light': {
pageBg: '#FAFAF7', cardBg: '#F2F0EA', cardBorder: '#DDD8CC',
- headingColor: '#18181B', bodyColor: '#5B5B62', mutedColor: '#6E6E73',
+ headingColor: '#18181B', bodyColor: '#5B5B62', mutedColor: '#67676C',
accentColor: '#1F6B3A', iconBg: '#EAE7DF',
heroFrom: '#18181B', heroTo: '#0A0A0A',
heroBadgeBg: 'rgba(31,107,58,0.08)', heroBadgeBorder: 'rgba(31,107,58,0.2)', heroBadgeText: '#4ade80',
- heroHeading: '#FFFFFF', heroHeadingDim: 'rgba(255,255,255,0.45)',
- heroSub: 'rgba(255,255,255,0.4)', heroBullet: 'rgba(255,255,255,0.35)',
+ heroHeading: '#FFFFFF', heroHeadingDim: 'rgba(255,255,255,0.66)',
+ heroSub: 'rgba(255,255,255,0.66)', heroBullet: 'rgba(255,255,255,0.66)',
heroBtnBg: '#1F6B3A', heroBtnText: '#FFFFFF',
heroGhostBorder: 'rgba(255,255,255,0.12)', heroGhostText: 'rgba(255,255,255,0.7)',
- titleFont: "'JetBrains Mono', monospace",
- bodyFont: "'JetBrains Mono', monospace",
+ titleFont: "'Space Grotesk', sans-serif",
+ bodyFont: "'Inter', sans-serif",
monoFont: "'JetBrains Mono', monospace",
isDark: false,
},
library: {
pageBg: '#F5EBDC', cardBg: '#FBF4E5', cardBorder: '#D9C9A8',
- headingColor: '#2D1F18', bodyColor: '#6B584A', mutedColor: '#7E6E59',
- accentColor: '#8B3E2F', iconBg: '#EFE3CF',
+ headingColor: '#2D1F18', bodyColor: '#6B584A', mutedColor: '#675844',
+ accentColor: '#1F6B3A', iconBg: '#EFE3CF',
heroFrom: '#2D1F18', heroTo: '#1A110D',
- heroBadgeBg: 'rgba(139,62,47,0.08)', heroBadgeBorder: 'rgba(139,62,47,0.2)', heroBadgeText: 'rgba(255,255,255,0.6)',
- heroHeading: '#F5EBDC', heroHeadingDim: 'rgba(245,235,220,0.5)',
- heroSub: 'rgba(245,235,220,0.4)', heroBullet: 'rgba(245,235,220,0.35)',
- heroBtnBg: '#8B3E2F', heroBtnText: '#FBF4E5',
+ heroBadgeBg: 'rgba(74,222,128,0.1)', heroBadgeBorder: 'rgba(74,222,128,0.25)', heroBadgeText: '#4ade80',
+ heroHeading: '#F5EBDC', heroHeadingDim: 'rgba(245,235,220,0.72)',
+ heroSub: 'rgba(245,235,220,0.72)', heroBullet: 'rgba(245,235,220,0.72)',
+ heroBtnBg: '#1F6B3A', heroBtnText: '#FBF4E5',
heroGhostBorder: 'rgba(245,235,220,0.15)', heroGhostText: 'rgba(245,235,220,0.7)',
titleFont: "'EB Garamond', 'Georgia', serif",
bodyFont: "'Inter', sans-serif",
diff --git a/app/components/version-b.tsx b/app/components/version-b.tsx
index 596fce7..90d75d9 100644
--- a/app/components/version-b.tsx
+++ b/app/components/version-b.tsx
@@ -39,6 +39,13 @@ function Hero() {
Record from Meet, Zoom, Teams, WhatsApp, Telegram, or Slack
AI extracts decisions, tasks, risks, facts, and people
+
+ Built by an Odoo partner
+
+ MCP-native
+
+ Full audit trail on every action
+
Get Started Free
Book a Demo
+
+ Built by an Odoo partner
+
+ MCP-native
+
+ Full audit trail on every action
+