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 ( +
+
+ ) +} + +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 ( +
+
+ ) +} 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 + Get Started Free Book a Demo + + Built by an Odoo partner +