Rebrand HomeLanding with FamiliarOS content and remove unused Scriptorium marketing sections
This commit is contained in:
FamiliarOS Builder
parent
726fc23301
commit
5f2fcea5bf
3 changed files with 259 additions and 396 deletions
|
|
@ -1,79 +0,0 @@
|
|||
// LogosSection — academic/research institution trusted-by carousel.
|
||||
// Uses CSS keyframe marquee (no embla required; zero extra deps).
|
||||
|
||||
const LOGOS: { label: string; sub?: string }[] = [
|
||||
{ label: 'MIT Libraries', sub: 'Massachusetts Institute of Technology' },
|
||||
{ label: 'arXiv', sub: 'Cornell University' },
|
||||
{ label: 'Nature Portfolio', sub: 'Springer Nature' },
|
||||
{ label: 'IEEE', sub: 'Spectrum & Xplore' },
|
||||
{ label: 'Elsevier', sub: 'ScienceDirect' },
|
||||
{ label: 'Springer', sub: 'SpringerLink' },
|
||||
{ label: 'ResearchGate', sub: 'Academic Network' },
|
||||
{ label: 'CERN', sub: 'Document Server' },
|
||||
{ label: 'ETH Zürich', sub: 'Research Collections' },
|
||||
{ label: 'Max Planck', sub: 'eDoc Repository' },
|
||||
]
|
||||
|
||||
function LogoBadge({ label, sub }: { label: string; sub?: string }) {
|
||||
return (
|
||||
<div className="flex shrink-0 flex-col items-center justify-center rounded-xl border border-white/10 bg-[#0A0E19]/70 px-5 py-3 backdrop-blur-sm">
|
||||
<span className="whitespace-nowrap text-sm font-semibold tracking-wide text-[#D8CBAF]/80">
|
||||
{label}
|
||||
</span>
|
||||
{sub && (
|
||||
<span className="mt-0.5 whitespace-nowrap text-[10px] text-[#8A9099]/60">{sub}</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function LogosSection() {
|
||||
// Duplicate the list so the marquee loops seamlessly
|
||||
const doubled = [...LOGOS, ...LOGOS]
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
|
||||
<p className="text-center text-xs uppercase tracking-widest text-[#8A9099]">
|
||||
Workflow-compatible with leading academic publishers & repositories
|
||||
</p>
|
||||
|
||||
<div className="relative mt-8 overflow-hidden">
|
||||
{/* Left + right fade masks */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 left-0 z-10 w-20"
|
||||
style={{ background: 'linear-gradient(to right, #0A0E19 0%, transparent 100%)' }}
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 right-0 z-10 w-20"
|
||||
style={{ background: 'linear-gradient(to left, #0A0E19 0%, transparent 100%)' }}
|
||||
/>
|
||||
|
||||
{/* Marquee track */}
|
||||
<div
|
||||
className="flex gap-4"
|
||||
style={{
|
||||
animation: 'logos-scroll 32s linear infinite',
|
||||
width: 'max-content',
|
||||
}}
|
||||
>
|
||||
{doubled.map((logo, i) => (
|
||||
<LogoBadge key={i} label={logo.label} sub={logo.sub} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inline keyframes — avoids needing tailwind config changes */}
|
||||
<style>{`
|
||||
@keyframes logos-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[style*="logos-scroll"] { animation: none; }
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import { cn } from '../../lib/utils'
|
||||
|
||||
interface Testimonial {
|
||||
quote: string
|
||||
name: string
|
||||
role: string
|
||||
institution: string
|
||||
initials: string
|
||||
}
|
||||
|
||||
const TESTIMONIALS: Testimonial[] = [
|
||||
{
|
||||
quote: 'FamiliarOS completely transformed how our lab manages collaborative LaTeX projects. The bidirectional SyncTeX alone saves hours every week.',
|
||||
name: 'Dr. Sarah Chen',
|
||||
role: 'Associate Professor',
|
||||
institution: 'MIT CSAIL',
|
||||
initials: 'SC',
|
||||
},
|
||||
{
|
||||
quote: "I tried other LaTeX editors and IDEs — nothing comes close to the compile reliability and PDF navigation here.",
|
||||
name: 'James Okoye',
|
||||
role: 'PhD Candidate',
|
||||
institution: 'ETH Zürich',
|
||||
initials: 'JO',
|
||||
},
|
||||
{
|
||||
quote: 'The cross-document comparison engine is something we needed for years. Running a visual diff across 40 corpus documents is extraordinary.',
|
||||
name: 'Dr. Miriam Hoffmann',
|
||||
role: 'Research Director',
|
||||
institution: 'Max Planck Institute',
|
||||
initials: 'MH',
|
||||
},
|
||||
{
|
||||
quote: 'The Git-native local history gave us exactly what we needed — full checkpoint control without ever leaving the writing environment.',
|
||||
name: 'Prof. Antonio Reyes',
|
||||
role: 'Faculty of Theoretical Physics',
|
||||
institution: 'Universidad Complutense',
|
||||
initials: 'AR',
|
||||
},
|
||||
{
|
||||
quote: "The structured AI Memory doesn't hallucinate citations. That alone made it our team's standard tool within two weeks of trial.",
|
||||
name: 'Yuki Tanaka',
|
||||
role: 'Technical Writer',
|
||||
institution: 'CERN Documentation Team',
|
||||
initials: 'YT',
|
||||
},
|
||||
]
|
||||
|
||||
function StarRow() {
|
||||
return (
|
||||
<div className="flex gap-0.5" aria-label="5 stars">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<svg key={i} viewBox="0 0 16 16" className="h-3.5 w-3.5 fill-[#C4A96B]" aria-hidden="true">
|
||||
<path d="M8 1l1.85 3.75L14 5.5l-3 2.92.71 4.14L8 10.4l-3.71 2.16L5 8.42 2 5.5l4.15-.75Z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TestimonialCard({ t, className }: { t: Testimonial; className?: string }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col gap-4 rounded-2xl border border-white/10 bg-[#0A0E19]/60 p-6 backdrop-blur-sm',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<StarRow />
|
||||
<p className="text-sm leading-relaxed text-[#C0B49A]/85">
|
||||
“{t.quote}”
|
||||
</p>
|
||||
<div className="mt-auto flex items-center gap-3">
|
||||
{/* Avatar */}
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[#C4A96B]/30 bg-[#C4A96B]/10 text-xs font-semibold tracking-wide text-[#D8CBAF]">
|
||||
{t.initials}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#D8CBAF]">{t.name}</p>
|
||||
<p className="text-xs text-[#8A9099]">
|
||||
{t.role} · {t.institution}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SocialProof() {
|
||||
return (
|
||||
<section className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
|
||||
<div className="text-center">
|
||||
<p className="public-shell-kicker">Testimonials</p>
|
||||
<h2 className="public-section-title mt-3">Trusted by Researchers & Writers</h2>
|
||||
<p className="public-lead mx-auto mt-4 max-w-2xl">
|
||||
From PhD labs to documentation teams — the platform built for the most demanding publishing workflows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Row 1: 3 cards */}
|
||||
<div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{TESTIMONIALS.slice(0, 3).map((t) => (
|
||||
<TestimonialCard key={t.name} t={t} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Row 2: 2 cards centered */}
|
||||
<div className="mt-5 grid gap-5 sm:grid-cols-2 lg:mx-auto lg:max-w-3xl">
|
||||
{TESTIMONIALS.slice(3).map((t) => (
|
||||
<TestimonialCard key={t.name} t={t} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,22 +1,31 @@
|
|||
import { useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ArrowRight, BookOpen, Bot, Cpu, FileScan, GraduationCap, GitBranch, Layers, MonitorSmartphone, Network, ScanSearch, Search, Users, Workflow } from 'lucide-react'
|
||||
import {
|
||||
ArrowRight,
|
||||
BookMarked,
|
||||
Bot,
|
||||
Brain,
|
||||
Download,
|
||||
FolderOpen,
|
||||
Layers,
|
||||
Lock,
|
||||
MessageCircle,
|
||||
Mic,
|
||||
Sparkles,
|
||||
Wrench,
|
||||
Zap,
|
||||
} from 'lucide-react'
|
||||
import { ItshoverExternalLinkIcon, ItshoverShieldCheckIcon } from '../components/icons/itshover-subset'
|
||||
import { MarketingShell } from '../components/marketing/MarketingShell'
|
||||
import { PublicPrimaryButton } from '../components/marketing/PublicPrimaryButton'
|
||||
import { LogosSection } from '../components/marketing/LogosSection'
|
||||
import { SocialProof } from '../components/marketing/SocialProof'
|
||||
import { usePlatformAuth } from '../auth/platform-auth'
|
||||
|
||||
|
||||
type BillingMode = 'monthly' | 'annual'
|
||||
|
||||
const heroPricing = [
|
||||
{ name: 'Free', monthly: 0, annual: 0, note: 'Get started, no credit card', isFree: true },
|
||||
{ name: 'Student', monthly: 10, annual: 89, note: 'Full power · academic email required' },
|
||||
{ name: 'Scholar', monthly: 15, annual: 149, note: 'Solo researchers & authors' },
|
||||
{ name: 'Groups', monthly: 22, annual: 199, note: 'Research groups & doc teams', isGroup: true },
|
||||
{ name: 'Enterprise', monthly: 0, annual: 0, note: 'Labs & regulated environments', isEnterprise: true },
|
||||
{ name: 'Free', monthly: 0, annual: 0, note: 'Create your Familiar, local memory, basic chat', isFree: true },
|
||||
{ name: 'Companion', monthly: 9, annual: 89, note: 'Unlimited knowledge, cloud voices, sync' },
|
||||
{ name: 'Agent', monthly: 19, annual: 189, note: 'MCP tools, agent bridge, advanced memory', isAgent: true },
|
||||
]
|
||||
|
||||
function formatUsd(value: number, fractionDigits = 0): string {
|
||||
|
|
@ -32,138 +41,101 @@ function getAnnualMonthlyEquivalent(annualPrice: number): number {
|
|||
return annualPrice / 12
|
||||
}
|
||||
|
||||
const supportedFormats = [
|
||||
'LaTeX', 'PDF', 'Markdown', 'RST', 'HTML', 'Plain Text', 'BibTeX',
|
||||
'CSV', 'JSON', 'YAML', 'XML', 'SVG', 'PNG / JPEG / WebP', 'MP4 / WebM', 'ZIP / TAR.GZ', 'SyncTeX',
|
||||
const heroHighlights = [
|
||||
{ metric: 'Local-first', label: 'your data stays on your machine' },
|
||||
{ metric: 'BYOK', label: 'bring your own API key' },
|
||||
{ metric: 'MCP tools', label: 'filesystem, terminal, web, GitHub, SQLite & more' },
|
||||
{ metric: 'Voice ready', label: 'system, cloud, and local TTS' },
|
||||
]
|
||||
|
||||
const heroHighlights = [
|
||||
{ metric: '16+', label: 'supported file formats' },
|
||||
{ metric: 'Native Compile Orchestration', label: 'per-project locking + artifact manifests' },
|
||||
{ metric: 'Real MuPDF', label: 'native PDF rendering' },
|
||||
{ metric: 'Bidirectional SyncTeX', label: 'source-to-PDF continuity' },
|
||||
{ metric: 'Desktop + Web', label: 'identical via Tauri + browser' },
|
||||
{ metric: 'Git-Native Local History', label: 'checkpoints, diff, and restore' },
|
||||
{ metric: 'AI Memory', label: 'bounded reasoning continuity + recoverable checkpoints' },
|
||||
{ metric: 'Real-Time Collaboration', label: 'presence, cursors, review threads' },
|
||||
{ metric: 'Citation Intelligence', label: 'DOI/ArXiv BibTeX + integrity forecasting' },
|
||||
{ metric: 'Reference Sync', label: 'library-aware citation continuity' },
|
||||
{ metric: 'Memory Domain Intelligence', label: 'governance, provenance, and readiness' },
|
||||
{ metric: 'Workspace Visualization', label: 'layout presets, working sets, heatmaps, and cockpit views' },
|
||||
{ metric: 'Operator Runboard', label: 'verification, remediation, and reversible workbench handoffs' },
|
||||
{ metric: 'Autonomous Research Agent', label: 'swarm-style research synthesis' },
|
||||
{ metric: 'Skills Manager', label: 'model-agnostic capability modules' },
|
||||
{ metric: 'OpenAPI Routing', label: 'provider-neutral routing + BYOK custody' },
|
||||
{ metric: 'Provider Governance', label: 'BYOK custody + routed fallback policy' },
|
||||
{ metric: 'Scientific Runtime', label: 'uv + venv project lanes' },
|
||||
{ metric: 'Paper2All Export', label: 'retention-aware publication bundles' },
|
||||
{ metric: 'PDF Intake QA', label: 'probe, benchmark, triage, and handoff pipeline' },
|
||||
{ metric: 'Manim Visuals Studio', label: 'AI-assisted math and physics animation' },
|
||||
{ metric: 'Tutorial Mode', label: 'guided help flags across menus, editor chrome, and core workspace controls' },
|
||||
{ metric: 'Assistive Optionality', label: 'AI helpers stay optional while raw authority remains recoverable' },
|
||||
{ metric: 'Whiteboard + MindMap', label: 'ideation surfaces wired to the document graph' },
|
||||
{ metric: 'AI Diagram Studio', label: 'figure generation from prompt to LaTeX-ready output' },
|
||||
{ metric: 'Video Studio', label: 'scripted video production inside the same workspace' },
|
||||
const pillars = [
|
||||
{
|
||||
icon: Brain,
|
||||
title: 'Remembers',
|
||||
body: 'Your Familiar captures preferences, facts, notes, and conversation history across sessions. Inspect, edit, or forget anything in the built-in memory viewer.',
|
||||
},
|
||||
{
|
||||
icon: Mic,
|
||||
title: 'Speaks',
|
||||
body: 'Chat by text or voice. Use system speech, OpenAI, ElevenLabs, or run Piper locally for fully offline conversations with your Familiar.',
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: 'Acts',
|
||||
body: 'Turn on MCP Tool Servers and ask your Familiar to read files, run terminal commands, search the web, query SQLite, drive GitHub, or control Docker.',
|
||||
},
|
||||
]
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Workflow,
|
||||
title: 'Native Compile Orchestration',
|
||||
body: 'Per-project locking, persistent build directories, retry semantics, incremental compilation with dependency-aware caching, and full artifact manifests with SyncTeX index URIs keep source, retained outputs, and disposable cache residue clearly separated.',
|
||||
},
|
||||
{
|
||||
icon: ScanSearch,
|
||||
title: 'Real MuPDF + Bidirectional SyncTeX',
|
||||
body: 'Genuine MuPDF page rendering with large-document lazy caching, compile-artifact-backed routing, and bidirectional SyncTeX navigation — click a PDF page, jump to source; edit source, scroll the PDF.',
|
||||
},
|
||||
{
|
||||
icon: GitBranch,
|
||||
title: 'Git-Native Local History',
|
||||
body: 'Full checkpoint control with label, diff, restore, and content hydration. Your entire writing history is yours — local, versioned, and always recoverable.',
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: 'Cross-Document Comparison + PDF Visual Diff',
|
||||
body: 'Side-by-side PDF visual diff, a remediation routing engine, and line-level proposal accept/reject with multi-author assignee management. Compare revisions, track structural drift, and surface changes no inline diff tool can catch.',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Real-Time Collaboration',
|
||||
body: 'Presence, remote cursors, anchored review threads, follow-mode, queued-save replay, and session handoff keep multi-author work continuous instead of brittle.',
|
||||
},
|
||||
{
|
||||
icon: Bot,
|
||||
title: 'AI Memory and Reasoning Continuity',
|
||||
body: 'Checkpoint lineage, preview-before-restore, decision trails, open-question tracking, comments, and restorable AI state keep raw history, derived memory, and optional assistive summaries distinct instead of collapsing them into one opaque blob.',
|
||||
title: 'Desktop Companion',
|
||||
body: 'A persistent Familiar lives on your desktop — idling, reacting, and always a double-click away from conversation. Choose or import companions and make the workspace feel alive.',
|
||||
},
|
||||
{
|
||||
icon: Workflow,
|
||||
title: 'Citation Intelligence',
|
||||
body: 'BibTeX auto-completion from DOI and ArXiv, citation graph memory, LaTeX error-context enrichment, and integrity forecasting that predicts at-risk citations before submission.',
|
||||
icon: MessageCircle,
|
||||
title: 'Always-on-Top Floating Chat',
|
||||
body: 'Compact prompt window that stays above other apps. Multi-conversation history, attachments, and a focused chat surface without opening a browser or terminal.',
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: 'Reference Sync and Corpus Imports',
|
||||
body: 'Reference synchronization, DOI/ArXiv/BibTeX normalization, and import-friendly corpus plumbing keep citations, bibliographies, and supporting materials aligned instead of drifting across tools.',
|
||||
icon: Brain,
|
||||
title: 'Local Memory Engine',
|
||||
body: 'Preference, identity, fact, and note-style memories are stored locally, retrieved by relevance, and editable at any time. Cross-conversation history surfaces context when it matters.',
|
||||
},
|
||||
{
|
||||
icon: ScanSearch,
|
||||
title: 'Memory Domain Intelligence',
|
||||
body: 'Governance drift detection, integration boundary tracking, provenance and explainability ledger, cost-adaptive analysis depth, offline queue capture, section churn memory, and submission readiness — all scoped per project.',
|
||||
icon: BookMarked,
|
||||
title: 'Knowledge Store',
|
||||
body: 'Upload documents, notes, code, and reference material. Your Familiar retrieves relevant context automatically and cites what it found.',
|
||||
},
|
||||
{
|
||||
icon: GitBranch,
|
||||
title: 'Operator Workbench and Visualization System',
|
||||
body: 'An editor-centered workbench with layout presets, working-set tabs, graph heatmaps, corpus glyph packs, governance cockpit views, and routed handoffs between editor, Runboard, search, graph, and studio surfaces.',
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: 'Operator Runboard and Verification',
|
||||
body: 'Queue health, verify-suite surfaces, remediation routing, patch review, AI Kanban follow-through, and post-run retrospectives keep execution visible and reversible instead of burying it in background jobs.',
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
title: 'Scientific Runtime and Provider Control',
|
||||
body: 'Project-scoped uv and venv runtime lanes, provider-neutral OpenAPI routing, BYOK-aware profile custody, managed Qwen access, and governed provider policies keep advanced workflows operator-controlled instead of vendor-locked.',
|
||||
},
|
||||
{
|
||||
icon: Bot,
|
||||
title: 'Research Agent and AI Orchestration',
|
||||
body: 'Research-agent swarm sessions, skills modules, routed provider strategy, and reviewable AI outputs extend the workspace beyond a single inline assistant. Bring your own LLM key (Scholar+) for direct, unmetered inference.',
|
||||
icon: Wrench,
|
||||
title: 'MCP Tool Servers',
|
||||
body: 'Activate filesystem, terminal, web fetch, Git, GitHub, Docker, Playwright, SQLite, memory, and reasoning tools from a permission-aware panel inside the app.',
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
title: 'Studio Surfaces — Whiteboard, MindMap, Video, AI Diagram',
|
||||
body: 'Whiteboard for spatial ideation, MindMap for structured brainstorming, AI Diagram Studio for prompt-to-LaTeX figure generation, and Video Studio for scripted production — all routed back into the same document, graph, and operator context.',
|
||||
title: 'External Agent Bridge',
|
||||
body: 'The FamiliarOS MCP Server lets Claude Code, OpenCode, Cursor, or Codex CLI control your Familiar safely — react, speak a bubble, or read/write memory — without unrestricted desktop access.',
|
||||
},
|
||||
{
|
||||
icon: FileScan,
|
||||
title: 'PDF Intake QA Pipeline',
|
||||
body: 'Import any PDF, probe its structural integrity, run benchmark comparisons against reference documents, triage quality issues, and hand off a clean annotated version directly into the compiler or research-agent workflow — no manual copy-paste.',
|
||||
icon: Mic,
|
||||
title: 'Flexible Voice Stack',
|
||||
body: 'System voices, OpenAI TTS, ElevenLabs, OpenAI-compatible endpoints, and local Piper. Per-provider speed, model, and voice selection with safe credential storage.',
|
||||
},
|
||||
{
|
||||
icon: Network,
|
||||
title: 'Manim Visuals Studio',
|
||||
body: 'AI-assisted mathematical and physics animation directly inside the workspace. Describe the visualization you need, generate Manim scenes, preview the animation, and embed the output in your document without switching tools.',
|
||||
icon: FolderOpen,
|
||||
title: 'Familiar Packs & Gallery',
|
||||
body: 'Browse, preview, and install Familiar packs. Import from ZIP or folder, pick a default companion, and route different familiars to different agents.',
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
title: 'Paper2All and Publication Delivery',
|
||||
body: 'Paper2All export, readiness-aware packaging, retained publication bundles, and operator-visible publish blockers keep final-mile delivery inside the same platform as authoring, review, and artifact governance.',
|
||||
},
|
||||
{
|
||||
icon: GraduationCap,
|
||||
title: 'Tutorial Mode',
|
||||
body: 'Enable Tutorial Mode from your account menu to surface contextual help flags across the menu bar, account menu, editor chrome, formatting toolbar groups, and right-side workspace controls. Each flag explains what the control does and when to use it without forcing you to leave the current workflow.',
|
||||
},
|
||||
{
|
||||
icon: MonitorSmartphone,
|
||||
title: 'Desktop + Web Continuity',
|
||||
body: 'The same routed product architecture runs in both Tauri desktop and the browser, so compile workflows, review systems, research-agent surfaces, runtime controls, and publication delivery stay consistent instead of splitting into separate "lite" tools.',
|
||||
icon: Lock,
|
||||
title: 'Privacy by Design',
|
||||
body: 'Prompts, code, logs, paths, and secrets are not shown in bubbles. Cloud voice credentials are encrypted when the platform supports it. You choose which tools are on.',
|
||||
},
|
||||
]
|
||||
|
||||
const steps = [
|
||||
{ n: '01', title: 'Download', body: 'Install FamiliarOS for macOS, Windows, or Linux. The companion appears immediately.' },
|
||||
{ n: '02', title: 'Create', body: 'Name your Familiar, set a personality, and choose a voice. It is yours from the first moment.' },
|
||||
{ n: '03', title: 'Chat', body: 'Double-click the Familiar to open the floating chat. Ask, remember, and continue conversations across sessions.' },
|
||||
{ n: '04', title: 'Add tools', body: 'Enable MCP Tool Servers and connect external agents so your Familiar can act across your files, code, and accounts.' },
|
||||
]
|
||||
|
||||
const integrations = [
|
||||
'Claude Code',
|
||||
'OpenCode',
|
||||
'Cursor',
|
||||
'Codex CLI',
|
||||
'OpenAI',
|
||||
'OpenRouter',
|
||||
'ElevenLabs',
|
||||
'Piper',
|
||||
'GitHub',
|
||||
'Docker',
|
||||
'SQLite',
|
||||
'Playwright',
|
||||
]
|
||||
|
||||
export function HomeLanding() {
|
||||
const { isAuthenticated } = usePlatformAuth()
|
||||
const [billingMode, setBillingMode] = useState<BillingMode>('annual')
|
||||
|
|
@ -176,7 +148,7 @@ export function HomeLanding() {
|
|||
<div className="public-hero-shell p-8 md:p-12">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-[#D8CBAF]/40 bg-[#BFAE8C]/10 px-4 py-1 public-shell-kicker">
|
||||
<ItshoverShieldCheckIcon size={14} />
|
||||
FamiliarOS Platform
|
||||
Local-first AI companion platform
|
||||
</div>
|
||||
|
||||
<div className="relative mt-6 overflow-hidden rounded-3xl border border-white/15 bg-black/25 px-6 py-8 public-hero-inner md:px-10 md:py-12">
|
||||
|
|
@ -184,11 +156,11 @@ export function HomeLanding() {
|
|||
<div className="pointer-events-none absolute inset-x-32 top-0 h-[4px] bg-gradient-to-r from-transparent via-[#BFAE8C]/40 to-transparent blur-sm" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(216,203,175,0.22),transparent_54%),linear-gradient(180deg,rgba(11,12,15,0.08)_0%,rgba(11,12,15,0.28)_100%)]" />
|
||||
<div className="relative z-10 mx-auto flex w-fit max-w-full flex-col items-center">
|
||||
<h1 className="public-page-title text-center">FamiliarOS</h1>
|
||||
<h1 className="public-page-title text-center">Create your Familiar.</h1>
|
||||
<div className="mt-3 h-[3px] w-full rounded-full bg-gradient-to-r from-transparent via-[#D8CBAF] to-transparent shadow-[0_0_16px_rgba(216,203,175,0.45)]" />
|
||||
</div>
|
||||
<p className="public-lead relative z-10 mt-5 text-center max-w-3xl mx-auto">
|
||||
The editor-centered technical writing and scientific publishing workbench that combines native LaTeX compile orchestration, artifact-backed preview and SyncTeX, Git-native local history, bounded AI Memory, real-time collaboration, citation and Memory Domain intelligence, operator-grade workbench routing, provider-neutral AI controls with BYOK support, and specialist studio surfaces in one unified architecture running identically on desktop and web.
|
||||
<p className="public-lead relative z-10 mx-auto mt-5 max-w-3xl text-center">
|
||||
Your Familiar remembers, speaks, and acts across your system. A local-first AI companion with memory, voice, knowledge, and tools — entirely under your control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -199,11 +171,18 @@ export function HomeLanding() {
|
|||
{isAuthenticated ? 'Open Dashboard' : 'Get Started Free'}
|
||||
</Link>
|
||||
</PublicPrimaryButton>
|
||||
<Link to="/pricing">
|
||||
<button type="button" className="public-btn-secondary">
|
||||
<ItshoverExternalLinkIcon size={14} />
|
||||
View Pricing
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/verticaltension/familiaros/releases/latest"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="public-btn-secondary inline-flex items-center gap-2"
|
||||
>
|
||||
<Download size={14} />
|
||||
Download Desktop App
|
||||
</a>
|
||||
<Link to="/pricing" className="public-btn-secondary inline-flex items-center gap-2">
|
||||
<ItshoverExternalLinkIcon size={14} />
|
||||
View Pricing
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
|
@ -216,71 +195,40 @@ export function HomeLanding() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pricing preview */}
|
||||
<div className="mt-10 public-card-raised rounded-2xl p-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="public-shell-kicker">Pricing — <Link to="/pricing" className="text-[#D8CBAF]">See full plans</Link></p>
|
||||
<div className="inline-flex items-center rounded-full border border-white/15 bg-white/5 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBillingMode('monthly')}
|
||||
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'monthly' ? 'bg-[#D8CBAF]/20 text-[#D8CBAF]' : 'text-[#8A9099]'}`}
|
||||
>Monthly</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBillingMode('annual')}
|
||||
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'annual' ? 'bg-[#D8CBAF]/20 text-[#D8CBAF]' : 'text-[#8A9099]'}`}
|
||||
>
|
||||
Annual
|
||||
{billingMode === 'annual' && <span className="ml-1 text-[#D8CBAF]">— save ~20%</span>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
|
||||
{heroPricing.map((plan) => {
|
||||
const price = billingMode === 'annual'
|
||||
? formatUsd(getAnnualMonthlyEquivalent(plan.annual), 2)
|
||||
: formatUsd(plan.monthly)
|
||||
const billingUnit = plan.isGroup ? '/ seat / mo' : '/ mo'
|
||||
return (
|
||||
<div key={plan.name} className="public-card rounded-2xl p-5">
|
||||
<p className="public-card-title">{plan.name}</p>
|
||||
<p className="mt-2 text-2xl font-semibold leading-tight">
|
||||
{plan.isEnterprise ? 'Custom' : plan.isFree ? 'Free' : price}
|
||||
{!plan.isEnterprise && !plan.isFree
|
||||
? <span className="ml-1 text-xs text-[#8A9099] align-middle">{billingUnit}</span>
|
||||
: null}
|
||||
</p>
|
||||
<p className="public-microcopy mt-1">
|
||||
{plan.note}
|
||||
{billingMode === 'annual' && !plan.isEnterprise && !plan.isFree
|
||||
? ` · billed annually at ${formatUsd(plan.annual)}${plan.isGroup ? '/seat/yr' : '/yr'}`
|
||||
: ''}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Supported Formats */}
|
||||
<section id="about" className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
|
||||
<div className="mb-6 public-card rounded-2xl p-5">
|
||||
<p className="public-shell-kicker">Supported Formats</p>
|
||||
<p className="public-body mt-2 max-w-2xl">Every format your research workflow touches — ingested, rendered, compared, reasoned over, and exported from one surface.</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{supportedFormats.map((format) => (
|
||||
<span key={format} className="public-format-pill rounded-full border border-white/20 bg-black/25 px-3 py-1 text-xs leading-5 text-[#F4F6F8]">
|
||||
{format}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{/* Pillars */}
|
||||
<section className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
|
||||
<div className="mb-6 text-center">
|
||||
<p className="public-shell-kicker">What your Familiar does</p>
|
||||
<h2 className="public-section-title mt-3">Remembers. Speaks. Acts.</h2>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{pillars.map((pillar) => {
|
||||
const Icon = pillar.icon
|
||||
return (
|
||||
<div key={pillar.title} className="public-card rounded-2xl p-6 text-center">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-[#D8CBAF]/30 bg-[#D8CBAF]/10">
|
||||
<Icon className="text-[#D8CBAF]" size={24} />
|
||||
</div>
|
||||
<h3 className="public-section-title mt-4">{pillar.title}</h3>
|
||||
<p className="public-body mt-2">{pillar.body}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature Cards */}
|
||||
{/* Feature Cards */}
|
||||
<section id="features" className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
|
||||
<div className="mb-6">
|
||||
<p className="public-shell-kicker">Features</p>
|
||||
<h2 className="public-section-title mt-3">Everything your companion needs</h2>
|
||||
<p className="public-body mt-2 max-w-2xl">
|
||||
FamiliarOS combines a persistent desktop companion, a private memory engine, a searchable Knowledge Store, and a growing tool ecosystem in one app.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{features.map((feature) => {
|
||||
const Icon = feature.icon
|
||||
|
|
@ -295,29 +243,138 @@ export function HomeLanding() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<LogosSection />
|
||||
<SocialProof />
|
||||
{/* Integrations marquee */}
|
||||
<section className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
|
||||
<p className="text-center text-xs uppercase tracking-widest text-[#8A9099]">
|
||||
Works with your favorite agents, models, and tools
|
||||
</p>
|
||||
<div className="relative mt-6 overflow-hidden">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 left-0 z-10 w-20"
|
||||
style={{ background: 'linear-gradient(to right, #0A0E19 0%, transparent 100%)' }}
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 right-0 z-10 w-20"
|
||||
style={{ background: 'linear-gradient(to left, #0A0E19 0%, transparent 100%)' }}
|
||||
/>
|
||||
<div
|
||||
className="flex gap-4"
|
||||
style={{
|
||||
animation: 'logos-scroll 28s linear infinite',
|
||||
width: 'max-content',
|
||||
}}
|
||||
>
|
||||
{[...integrations, ...integrations].map((label, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex shrink-0 items-center justify-center rounded-xl border border-white/10 bg-[#0A0E19]/70 px-5 py-3 backdrop-blur-sm"
|
||||
>
|
||||
<span className="whitespace-nowrap text-sm font-semibold tracking-wide text-[#D8CBAF]/80">{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<style>{`
|
||||
@keyframes logos-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[style*="logos-scroll"] { animation: none; }
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
|
||||
{/* Competitive Edge */}
|
||||
<section className="mx-auto max-w-7xl px-6 pb-10 lg:px-8">
|
||||
{/* How it works */}
|
||||
<section className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
|
||||
<div className="public-card rounded-2xl p-6 md:p-8">
|
||||
<p className="public-shell-kicker">Why FamiliarOS</p>
|
||||
<h2 className="public-section-title mt-3">Beyond editor parity</h2>
|
||||
<p className="public-body mt-3 max-w-3xl">
|
||||
FamiliarOS delivers a complete next-generation scientific writing system. Native compile orchestration with incremental caching, artifact manifests, and retention-aware output handling. Real MuPDF rendering with bidirectional SyncTeX and compile-artifact-backed routing. Cross-document comparison with PDF visual diff and remediation workflows. Git-backed local history, bounded AI Memory, and collaboration continuity kept distinct instead of flattened into one ambiguous history lane. Citation intelligence and Memory Domain signals make readiness, provenance, and drift visible. The editor, Runboard, search, graph, and studio surfaces operate as one routed workbench. Provider-neutral AI routing, BYOK custody, managed-model governance, Scientific Runtime control, PDF Intake QA, Tutorial Mode, Whiteboard, MindMap, AI Diagram Studio, Video Studio, and Manim all stay inside that same desktop-and-web architecture.
|
||||
<p className="public-shell-kicker">How it works</p>
|
||||
<h2 className="public-section-title mt-3">From download to companion in minutes</h2>
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{steps.map((step) => (
|
||||
<div key={step.n} className="rounded-2xl border border-white/10 bg-black/20 p-5">
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-[#A6926E]">{step.n}</span>
|
||||
<h3 className="public-section-title mt-2">{step.title}</h3>
|
||||
<p className="public-body mt-2 text-sm">{step.body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing preview */}
|
||||
<section className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
|
||||
<div className="public-card-raised rounded-2xl p-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="public-shell-kicker">
|
||||
Pricing — <Link to="/pricing" className="text-[#D8CBAF]">See full plans</Link>
|
||||
</p>
|
||||
<div className="inline-flex items-center rounded-full border border-white/15 bg-white/5 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBillingMode('monthly')}
|
||||
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'monthly' ? 'bg-[#D8CBAF]/20 text-[#D8CBAF]' : 'text-[#8A9099]'}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBillingMode('annual')}
|
||||
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'annual' ? 'bg-[#D8CBAF]/20 text-[#D8CBAF]' : 'text-[#8A9099]'}`}
|
||||
>
|
||||
Annual
|
||||
{billingMode === 'annual' && <span className="ml-1 text-[#D8CBAF]">— save ~18%</span>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{heroPricing.map((plan) => {
|
||||
const price = billingMode === 'annual'
|
||||
? formatUsd(getAnnualMonthlyEquivalent(plan.annual), 2)
|
||||
: formatUsd(plan.monthly)
|
||||
return (
|
||||
<div key={plan.name} className="public-card rounded-2xl p-5">
|
||||
<p className="public-card-title">{plan.name}</p>
|
||||
<p className="mt-2 text-2xl font-semibold leading-tight">
|
||||
{plan.isFree ? 'Free' : price}
|
||||
{!plan.isFree && <span className="ml-1 text-xs text-[#8A9099] align-middle">/ mo</span>}
|
||||
</p>
|
||||
<p className="public-microcopy mt-1">
|
||||
{plan.note}
|
||||
{billingMode === 'annual' && !plan.isFree
|
||||
? ` · billed annually at ${formatUsd(plan.annual)}/yr`
|
||||
: ''}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="mx-auto max-w-7xl px-6 pb-10 lg:px-8">
|
||||
<div className="public-card rounded-2xl p-6 md:p-8 text-center">
|
||||
<Sparkles className="mx-auto text-[#D8CBAF]" size={28} />
|
||||
<h2 className="public-section-title mt-4">Ready to meet your Familiar?</h2>
|
||||
<p className="public-body mx-auto mt-3 max-w-2xl">
|
||||
Start free on macOS, Windows, or Linux. Upgrade when you are ready for knowledge, voice, and tools.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-3">
|
||||
<PublicPrimaryButton asChild>
|
||||
<Link to="/pricing">Explore Plans</Link>
|
||||
<Link to="/register">Create Free Account</Link>
|
||||
</PublicPrimaryButton>
|
||||
<Link to="/affiliate-program" className="public-btn-secondary inline-flex items-center gap-2">
|
||||
Join the affiliate marketplace
|
||||
<ArrowRight size={13} />
|
||||
</Link>
|
||||
<Link to="/support" className="public-btn-secondary inline-flex items-center gap-2">
|
||||
Talk to us
|
||||
<ArrowRight size={13} />
|
||||
</Link>
|
||||
<a
|
||||
href="https://github.com/verticaltension/familiaros/releases/latest"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="public-btn-secondary inline-flex items-center gap-2"
|
||||
>
|
||||
<Download size={14} />
|
||||
Download Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue