Skip to content

[landing-fixes] Audit fixes: structure, themes, colors, a11y #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Smetools merged 1 commit into from
May 31, 2026
Merged

[landing-fixes] Audit fixes: structure, themes, colors, a11y #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions app/components/impeccable/kit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -582,8 +582,103 @@ export function CloseSection({ title, sub }: { title: React.ReactNode; sub: stri
<a className="ve-btn ve-btn--primary" href={`${APP_URL}/register`}>Get Started Free <Arrow /></a>
<Link className="ve-btn ve-btn--ghost" href="/book">Book a Demo</Link>
</div>
<p className="ve-close-note">Free to start. Partner pricing on a quick call.</p>

@coderabbitai coderabbitai Bot May 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

ve-close-note styling is overridden — see root cause in themed-shell.tsx.

This <p> also matches .ve-close p (more specific), so its intended small mono fine-print styling won't apply. Root cause and fix are flagged on the .ve-close-note rule in themed-shell.tsx (Line 117).

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/impeccable/kit.tsx` at line 585, The paragraph uses class
"ve-close-note" which is being overridden by the more specific ".ve-close p"
selector; rename the class in app/components/impeccable/kit.tsx (change
"ve-close-note" to a unique name such as "ve-close__note") and update the
corresponding CSS rule in themed-shell.tsx (replace or add the ".ve-close__note"
rule where the current ".ve-close-note" rule is defined around the noted spot)
so the intended small mono fine-print styling applies and no longer conflicts
with ".ve-close p".

</SectionReveal>
</div>
</section>
)
}

/* 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 (
<section className="ve-section ve-dark ve-pad">
<div className="ve-field" aria-hidden="true" />
<div className="ve-wrap" style={{ position: 'relative' }}>
<SectionReveal className="ve-prob">
<h2 className="ve-h2">Most AI agents act on what the AI <span className="ve-dim">thinks</span> is true.</h2>
<p className="ve-lead ve-prose">
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 &ldquo;decision&rdquo; that was really just
discussion. When a client says &ldquo;that&apos;s not what we agreed,&rdquo; there&apos;s no record to point to.
</p>
<p className="ve-lead ve-prose ve-prob-turn">
Knowcap agents act only on what a <Mark>human</Mark> said is true — every fact confirmed,
timestamped to its source, and logged.
</p>
</SectionReveal>
</div>
</section>
)
}

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 (
<section className="ve-section ve-on-paper ve-pad">
<div className="ve-wrap">
<SectionReveal className="ve-head">
<h2 className="ve-h2">Wire it into the tools you already run</h2>
<p className="ve-lead ve-prose ve-dim">
Knowcap is infrastructure, not another silo. Your agents query verified facts over MCP;
confirmed actions flow to your stack.
</p>
</SectionReveal>
<SectionReveal>
<div className="ve-integrations">
{INTEGRATIONS.map((it) => (
<div className="ve-integration" key={it.k}>
<div className="ve-integration-head">
<h3 className="ve-h3">{it.k}</h3>
<span className="ve-int-tag">{it.tag}</span>
</div>
<p>{it.v}</p>
</div>
))}
</div>
</SectionReveal>
</div>
</section>
)
}

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 (
<section className="ve-section ve-dark ve-pad">
<div className="ve-field" aria-hidden="true" />
<div className="ve-wrap" style={{ position: 'relative' }}>
<SectionReveal className="ve-head">
<h2 className="ve-h2">What teams are saying</h2>
</SectionReveal>
<div className="ve-quotes">
{TESTIMONIALS.map((t) => (
<SectionReveal key={t.who}>
<figure className="ve-quote">
<blockquote>&ldquo;{t.quote}&rdquo;</blockquote>
<figcaption>
<span className="ve-quote-who">{t.who}</span>
<span className="ve-quote-org">{t.org}</span>
</figcaption>
</figure>
</SectionReveal>
))}
</div>
</div>
</section>
)
}
66 changes: 64 additions & 2 deletions app/components/impeccable/themed-shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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)}

@coderabbitai coderabbitai Bot May 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Scope .ve-seal (and .ve-docid .ve-mono) under .ve-dark.

This list mixes dark-scoped and unscoped selectors. .ve-seal is unscoped, so it overrides the base --t-accent rule (Line 57) with the bright green --t-accent-bright everywhere — including the on-paper exhibit seal (version-b.tsx OdooDemo, Line 96), where bright green on a light card likely fails the contrast targets this PR is tightening.

🛡️ Proposed fix 
-.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,.ve-dark .ve-step .ve-step-tag,.ve-dark .ve-docid .ve-mono,.ve-dark .ve-seal,.ve-dark .ve-faq .ve-q-sign{color:var(--t-accent-bright)}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.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,.ve-dark .ve-step .ve-step-tag,.ve-dark .ve-docid .ve-mono,.ve-dark .ve-seal,.ve-dark .ve-faq .ve-q-sign{color:var(--t-accent-bright)}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/impeccable/themed-shell.tsx` at line 69, The CSS selector list
in themed-shell.tsx mixes dark-scoped and unscoped rules so .ve-seal and
.ve-docid .ve-mono are unintentionally using --t-accent-bright everywhere;
update the selector so those two are scoped under .ve-dark (e.g. change
".ve-docid .ve-mono" and ".ve-seal" to ".ve-dark .ve-docid .ve-mono" and
".ve-dark .ve-seal") so only the dark theme uses --t-accent-bright (this
prevents bright green from affecting the light-card exhibit rendered by
version-b.tsx / OdooDemo).

.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)}

@coderabbitai coderabbitai Bot May 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

.ve-close-note is too weak to override .ve-close p.

.ve-close p (kit, specificity 0,1,1) outranks .ve-close-note (0,1,0), so the note keeps the large body font-size and margin:0 auto 38px instead of the intended small mono fine-print. Raise specificity.

🐛 Proposed fix 
-.ve-close-note{margin:22px auto 0;font-family:var(--t-fmono);font-size:.72rem;letter-spacing:.04em;color:var(--t-ink-prose-dim)}
+.ve-close .ve-close-note{margin:22px auto 0;font-family:var(--t-fmono);font-size:.72rem;letter-spacing:.04em;color:var(--t-ink-prose-dim)}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.ve-close-note{margin:22px auto 0;font-family:var(--t-fmono);font-size:.72rem;letter-spacing:.04em;color:var(--t-ink-prose-dim)}
.ve-close .ve-close-note{margin:22px auto 0;font-family:var(--t-fmono);font-size:.72rem;letter-spacing:.04em;color:var(--t-ink-prose-dim)}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/impeccable/themed-shell.tsx` at line 117, The rule for
.ve-close-note is being overridden by .ve-close p due to lower specificity;
update the selector to increase specificity (for example change it to .ve-close
.ve-close-note) and keep the same declarations (font-family, font-size,
letter-spacing, color, margin) so the note renders as the intended small mono
fine-print instead of inheriting .ve-close p styles.

`

export const THEMED_STYLE = FONT_IMPORT + IMPECCABLE_CSS + THEME_OVERRIDES
Expand Down Expand Up @@ -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,
Expand All @@ -139,10 +198,13 @@ export default function ThemedShell({
<ABTracker variant={variant} />
<ThemedHeader theme={theme} onThemeChange={setTheme} />
{hero}
<ProblemSection />
{signature}
<ProcessSection />
<ResultsSection />
<IntegrationsSection />
<SecuritySection />
<ResultsSection />
<TestimonialsSection />
<FAQSection />
<CloseSection title={close.title} sub={close.sub} />
<ImpeccableFooter />
Expand Down
48 changes: 24 additions & 24 deletions app/components/theme-switcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down Expand Up @@ -46,8 +46,8 @@ const THEME_MAP: Record<ThemeKey, ThemeColors> = {
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",
Expand All @@ -57,43 +57,43 @@ const THEME_MAP: Record<ThemeKey, ThemeColors> = {
},
'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",
Expand Down
7 changes: 7 additions & 0 deletions app/components/version-b.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@ function Hero() {
<span className="ve-bullet"><Tick />Record from Meet, Zoom, Teams, WhatsApp, Telegram, or Slack</span>
<span className="ve-bullet"><Tick />AI extracts decisions, tasks, risks, facts, and people</span>
</motion.div>
<motion.div className="ve-trust" variants={rise}>
<span>Built by an Odoo partner</span>
<span className="ve-trust-dot" aria-hidden="true" />
<span>MCP-native</span>
<span className="ve-trust-dot" aria-hidden="true" />
<span>Full audit trail on every action</span>
</motion.div>
</motion.div>

<motion.figure
Expand Down
7 changes: 7 additions & 0 deletions app/components/version-d.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,13 @@ function Hero() {
<a className="ve-btn ve-btn--primary" href={`${APP_URL}/register`}>Get Started Free <Arrow /></a>
<Link className="ve-btn ve-btn--ghost" href="/book">Book a Demo</Link>
</motion.div>
<motion.div className="ve-trust" variants={rise}>
<span>Built by an Odoo partner</span>
<span className="ve-trust-dot" aria-hidden="true" />
<span>MCP-native</span>
<span className="ve-trust-dot" aria-hidden="true" />
<span>Full audit trail on every action</span>
</motion.div>
</motion.div>

<motion.figure
Expand Down