diff --git a/.github/workflows/jan-astro-docs.yml b/.github/workflows/jan-astro-docs.yml new file mode 100644 index 000000000..b551d847d --- /dev/null +++ b/.github/workflows/jan-astro-docs.yml @@ -0,0 +1,98 @@ +name: Jan Astro Docs + +on: + push: + branches: + - dev + paths: + - 'website/**' + - '.github/workflows/jan-astro-docs.yml' + pull_request: + paths: + - 'website/**' + - '.github/workflows/jan-astro-docs.yml' + # Review gh actions docs if you want to further define triggers, paths, etc + # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on + workflow_dispatch: + +jobs: + deploy: + name: Deploy to CloudFlare Pages + env: + CLOUDFLARE_PROJECT_NAME: astro-docs + runs-on: ubuntu-latest + permissions: + contents: write + deployments: write + pull-requests: write + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 20 + + - uses: oven-sh/setup-bun@v2 + + - name: Install jq + uses: dcarbone/install-jq-action@v2.0.1 + + - name: Fill env vars + continue-on-error: true + working-directory: website + run: | + env_example_file=".env.example" + touch .env + while IFS= read -r line || [[ -n "$line" ]]; do + if [[ "$line" == *"="* ]]; then + var_name=$(echo $line | cut -d '=' -f 1) + echo $var_name + var_value="$(jq -r --arg key "$var_name" '.[$key]' <<< "$SECRETS")" + echo "$var_name=$var_value" >> .env + fi + done < "$env_example_file" + env: + SECRETS: '${{ toJson(secrets) }}' + + - name: Install dependencies + working-directory: website + run: bun install + - name: Build website + working-directory: website + run: bun run build + + - name: copy redirects and headers + continue-on-error: true + working-directory: website + run: | + cp _redirects dist/_redirects + cp _headers dist/_headers + + - name: Publish to Cloudflare Pages PR Preview and Staging + if: github.event_name == 'pull_request' + uses: cloudflare/pages-action@v1 + with: + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + projectName: ${{ env.CLOUDFLARE_PROJECT_NAME }} + directory: ./website/dist + # Optional: Enable this if you want to have GitHub Deployments triggered + gitHubToken: ${{ secrets.GITHUB_TOKEN }} + id: deployCloudflarePages + + - uses: mshick/add-pr-comment@v2 + if: github.event_name == 'pull_request' + with: + message: | + Preview URL Astro Docs: ${{ steps.deployCloudflarePages.outputs.url }} + + - name: Publish to Cloudflare Pages Production + if: (github.event_name == 'push' && github.ref == 'refs/heads/dev') || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/dev') + uses: cloudflare/pages-action@v1 + with: + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + projectName: ${{ env.CLOUDFLARE_PROJECT_NAME }} + directory: ./website/dist + branch: main + # Optional: Enable this if you want to have GitHub Deployments triggered + gitHubToken: ${{ secrets.GITHUB_TOKEN }} diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index 0f148de5e..000000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "recommendations": [ - "esbenp.prettier-vscode" - ] -} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 78bf4f0ab..000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true, - "[rust]": { - "editor.defaultFormatter": "rust-lang.rust-analyzer" - } -} diff --git a/docs/src/pages/platforms/_meta.json b/docs/src/pages/platforms/_meta.json deleted file mode 100644 index bfee4c12e..000000000 --- a/docs/src/pages/platforms/_meta.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "-- Switcher": { - "type": "separator", - "title": "Switcher" - }, - "index": { - "display": "hidden" - } -} diff --git a/docs/src/pages/platforms/index.mdx b/docs/src/pages/platforms/index.mdx deleted file mode 100644 index 1ba0ff3a7..000000000 --- a/docs/src/pages/platforms/index.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Coming Soon -description: Exciting new features and platforms are on the way. Stay tuned for Jan Web, Jan Mobile, and our API Platform. -keywords: - [ - Jan, - Customizable Intelligence, LLM, - local AI, - privacy focus, - free and open source, - private and offline, - conversational AI, - no-subscription fee, - large language models, - coming soon, - Jan Web, - Jan Mobile, - API Platform, - ] ---- - -import { Callout } from 'nextra/components' - -
-
-

- 🚀 Coming Soon -

-

- We're working on the next stage of Jan - making our local assistant more powerful and available in more platforms. -

-
- -
-
-
🌐
-

Jan Web

-

- Access Jan directly from your browser with our powerful web interface -

-
- -
-
📱
-

Jan Mobile

-

- Take Jan on the go with our native mobile applications -

-
- -
-
⚡
-

Jan Server

-

- Integrate Jan's capabilities into your applications with our API -

-
-
- - - **Stay Updated**: Follow our [GitHub repository](https://github.com/menloresearch/jan) and join our [Discord community](https://discord.com/invite/FTk2MvZwJH) for the latest updates on these exciting releases! - - -
-

What to Expect

-
-
- ✓ -
- Seamless Experience: Unified interface across all platforms -
-
-
- ✓ -
- Privacy First: Same privacy-focused approach you trust -
-
-
- ✓ -
- Developer Friendly: Robust APIs and comprehensive documentation -
-
-
-
-
diff --git a/extensions/llamacpp-extension/src/index.ts b/extensions/llamacpp-extension/src/index.ts index df10df0fe..73f2be783 100644 --- a/extensions/llamacpp-extension/src/index.ts +++ b/extensions/llamacpp-extension/src/index.ts @@ -1247,11 +1247,6 @@ export default class llamacpp_extension extends AIEngine { ]) args.push('--mmproj', mmprojPath) } - - if (cfg.ctx_size !== undefined) { - args.push('-c', String(cfg.ctx_size)) - } - // Add remaining options from the interface if (cfg.chat_template) args.push('--chat-template', cfg.chat_template) const gpu_layers = @@ -1263,8 +1258,9 @@ export default class llamacpp_extension extends AIEngine { if (cfg.batch_size > 0) args.push('--batch-size', String(cfg.batch_size)) if (cfg.ubatch_size > 0) args.push('--ubatch-size', String(cfg.ubatch_size)) if (cfg.device.length > 0) args.push('--device', cfg.device) - if (cfg.split_mode.length > 0) args.push('--split-mode', cfg.split_mode) - if (cfg.main_gpu !== undefined) + if (cfg.split_mode.length > 0 && cfg.split_mode != 'layer') + args.push('--split-mode', cfg.split_mode) + if (cfg.main_gpu !== undefined && cfg.main_gpu != 0) args.push('--main-gpu', String(cfg.main_gpu)) // Boolean flags @@ -1280,19 +1276,25 @@ export default class llamacpp_extension extends AIEngine { } else { if (cfg.ctx_size > 0) args.push('--ctx-size', String(cfg.ctx_size)) if (cfg.n_predict > 0) args.push('--n-predict', String(cfg.n_predict)) - args.push('--cache-type-k', cfg.cache_type_k) + if (cfg.cache_type_k && cfg.cache_type_k != 'f16') + args.push('--cache-type-k', cfg.cache_type_k) if ( - (cfg.flash_attn && cfg.cache_type_v != 'f16') || - cfg.cache_type_v != 'f32' + cfg.flash_attn && + (cfg.cache_type_v != 'f16' && cfg.cache_type_v != 'f32') ) { args.push('--cache-type-v', cfg.cache_type_v) } - args.push('--defrag-thold', String(cfg.defrag_thold)) + if (cfg.defrag_thold && cfg.defrag_thold != 0.1) + args.push('--defrag-thold', String(cfg.defrag_thold)) - args.push('--rope-scaling', cfg.rope_scaling) - args.push('--rope-scale', String(cfg.rope_scale)) - args.push('--rope-freq-base', String(cfg.rope_freq_base)) - args.push('--rope-freq-scale', String(cfg.rope_freq_scale)) + if (cfg.rope_scaling && cfg.rope_scaling != 'none') + args.push('--rope-scaling', cfg.rope_scaling) + if (cfg.rope_scale && cfg.rope_scale != 1) + args.push('--rope-scale', String(cfg.rope_scale)) + if (cfg.rope_freq_base && cfg.rope_freq_base != 0) + args.push('--rope-freq-base', String(cfg.rope_freq_base)) + if (cfg.rope_freq_scale && cfg.rope_freq_scale != 1) + args.push('--rope-freq-scale', String(cfg.rope_freq_scale)) } logger.info('Calling Tauri command llama_load with args:', args) diff --git a/src-tauri/src/core/utils/extensions/inference_llamacpp_extension/server.rs b/src-tauri/src/core/utils/extensions/inference_llamacpp_extension/server.rs index 09f1b4578..ffa6cfe92 100644 --- a/src-tauri/src/core/utils/extensions/inference_llamacpp_extension/server.rs +++ b/src-tauri/src/core/utils/extensions/inference_llamacpp_extension/server.rs @@ -708,3 +708,195 @@ pub async fn is_process_running(pid: i32, state: State<'_, AppState>) -> Result< pub fn is_port_available(port: u16) -> bool { std::net::TcpListener::bind(("127.0.0.1", port)).is_ok() } + +// tests +// +#[cfg(test)] +mod tests { + use super::*; + + #[test] + fn test_parse_multiple_devices() { + let output = r#"ggml_vulkan: Found 2 Vulkan devices: +ggml_vulkan: 0 = NVIDIA GeForce RTX 3090 (NVIDIA) | uma: 0 | fp16: 1 | bf16: 0 | warp size: 32 | shared memory: 49152 | int dot: 0 | matrix cores: KHR_coopmat +ggml_vulkan: 1 = AMD Radeon Graphics (RADV GFX1151) (radv) | uma: 1 | fp16: 1 | bf16: 0 | warp size: 64 | shared memory: 65536 | int dot: 0 | matrix cores: KHR_coopmat +Available devices: +Vulkan0: NVIDIA GeForce RTX 3090 (24576 MiB, 24576 MiB free) +Vulkan1: AMD Radeon Graphics (RADV GFX1151) (87722 MiB, 87722 MiB free) +"#; + + let devices = parse_device_output(output).unwrap(); + + assert_eq!(devices.len(), 2); + + // Check first device + assert_eq!(devices[0].id, "Vulkan0"); + assert_eq!(devices[0].name, "NVIDIA GeForce RTX 3090"); + assert_eq!(devices[0].mem, 24576); + assert_eq!(devices[0].free, 24576); + + // Check second device + assert_eq!(devices[1].id, "Vulkan1"); + assert_eq!(devices[1].name, "AMD Radeon Graphics (RADV GFX1151)"); + assert_eq!(devices[1].mem, 87722); + assert_eq!(devices[1].free, 87722); + } + + #[test] + fn test_parse_single_device() { + let output = r#"Available devices: +CUDA0: NVIDIA GeForce RTX 4090 (24576 MiB, 24000 MiB free)"#; + + let devices = parse_device_output(output).unwrap(); + + assert_eq!(devices.len(), 1); + assert_eq!(devices[0].id, "CUDA0"); + assert_eq!(devices[0].name, "NVIDIA GeForce RTX 4090"); + assert_eq!(devices[0].mem, 24576); + assert_eq!(devices[0].free, 24000); + } + + #[test] + fn test_parse_with_extra_whitespace_and_empty_lines() { + let output = r#" +Available devices: + +Vulkan0: NVIDIA GeForce RTX 3090 (24576 MiB, 24576 MiB free) + +Vulkan1: AMD Radeon Graphics (RADV GFX1151) (87722 MiB, 87722 MiB free) + +"#; + + let devices = parse_device_output(output).unwrap(); + + assert_eq!(devices.len(), 2); + assert_eq!(devices[0].id, "Vulkan0"); + assert_eq!(devices[1].id, "Vulkan1"); + } + + #[test] + fn test_parse_different_backends() { + let output = r#"Available devices: +CUDA0: NVIDIA GeForce RTX 4090 (24576 MiB, 24000 MiB free) +Vulkan0: NVIDIA GeForce RTX 3090 (24576 MiB, 24576 MiB free) +SYCL0: Intel(R) Arc(TM) A750 Graphics (8000 MiB, 7721 MiB free)"#; + + let devices = parse_device_output(output).unwrap(); + + assert_eq!(devices.len(), 3); + + assert_eq!(devices[0].id, "CUDA0"); + assert_eq!(devices[0].name, "NVIDIA GeForce RTX 4090"); + + assert_eq!(devices[1].id, "Vulkan0"); + assert_eq!(devices[1].name, "NVIDIA GeForce RTX 3090"); + + assert_eq!(devices[2].id, "SYCL0"); + assert_eq!(devices[2].name, "Intel(R) Arc(TM) A750 Graphics"); + assert_eq!(devices[2].mem, 8000); + assert_eq!(devices[2].free, 7721); + } + + #[test] + fn test_parse_complex_gpu_names() { + let output = r#"Available devices: +Vulkan0: Intel(R) Arc(tm) A750 Graphics (DG2) (8128 MiB, 8128 MiB free) +Vulkan1: AMD Radeon RX 7900 XTX (Navi 31) [RDNA 3] (24576 MiB, 24000 MiB free)"#; + + let devices = parse_device_output(output).unwrap(); + + assert_eq!(devices.len(), 2); + + assert_eq!(devices[0].id, "Vulkan0"); + assert_eq!(devices[0].name, "Intel(R) Arc(tm) A750 Graphics (DG2)"); + assert_eq!(devices[0].mem, 8128); + assert_eq!(devices[0].free, 8128); + + assert_eq!(devices[1].id, "Vulkan1"); + assert_eq!(devices[1].name, "AMD Radeon RX 7900 XTX (Navi 31) [RDNA 3]"); + assert_eq!(devices[1].mem, 24576); + assert_eq!(devices[1].free, 24000); + } + + #[test] + fn test_parse_no_devices() { + let output = r#"Available devices:"#; + + let devices = parse_device_output(output).unwrap(); + assert_eq!(devices.len(), 0); + } + + #[test] + fn test_parse_missing_header() { + let output = r#"Vulkan0: NVIDIA GeForce RTX 3090 (24576 MiB, 24576 MiB free)"#; + + let result = parse_device_output(output); + assert!(result.is_err()); + assert!(result + .unwrap_err() + .to_string() + .contains("Could not find 'Available devices:' section")); + } + + #[test] + fn test_parse_malformed_device_line() { + let output = r#"Available devices: +Vulkan0: NVIDIA GeForce RTX 3090 (24576 MiB, 24576 MiB free) +Invalid line without colon +Vulkan1: AMD Radeon Graphics (RADV GFX1151) (87722 MiB, 87722 MiB free)"#; + + let devices = parse_device_output(output).unwrap(); + + // Should skip the malformed line and parse the valid ones + assert_eq!(devices.len(), 2); + assert_eq!(devices[0].id, "Vulkan0"); + assert_eq!(devices[1].id, "Vulkan1"); + } + + #[test] + fn test_parse_device_line_individual() { + // Test the individual line parser + let line = "Vulkan0: NVIDIA GeForce RTX 3090 (24576 MiB, 24576 MiB free)"; + let device = parse_device_line(line).unwrap().unwrap(); + + assert_eq!(device.id, "Vulkan0"); + assert_eq!(device.name, "NVIDIA GeForce RTX 3090"); + assert_eq!(device.mem, 24576); + assert_eq!(device.free, 24576); + } + + #[test] + fn test_memory_pattern_detection() { + assert!(is_memory_pattern("24576 MiB, 24576 MiB free")); + assert!(is_memory_pattern("8000 MiB, 7721 MiB free")); + assert!(!is_memory_pattern("just some text")); + assert!(!is_memory_pattern("24576 MiB")); + assert!(!is_memory_pattern("24576, 24576")); + } + + #[test] + fn test_parse_memory_value() { + assert_eq!(parse_memory_value("24576 MiB").unwrap(), 24576); + assert_eq!(parse_memory_value("7721 MiB free").unwrap(), 7721); + assert_eq!(parse_memory_value("8000").unwrap(), 8000); + + assert!(parse_memory_value("").is_err()); + assert!(parse_memory_value("not_a_number MiB").is_err()); + } + + #[test] + fn test_find_memory_pattern() { + let text = "NVIDIA GeForce RTX 3090 (24576 MiB, 24576 MiB free)"; + let result = find_memory_pattern(text); + assert!(result.is_some()); + let (_start, content) = result.unwrap(); + assert_eq!(content, "24576 MiB, 24576 MiB free"); + + // Test with multiple parentheses + let text = "Intel(R) Arc(tm) A750 Graphics (DG2) (8128 MiB, 8128 MiB free)"; + let result = find_memory_pattern(text); + assert!(result.is_some()); + let (_start, content) = result.unwrap(); + assert_eq!(content, "8128 MiB, 8128 MiB free"); + } +} diff --git a/web-app/src/containers/DownloadManegement.tsx b/web-app/src/containers/DownloadManegement.tsx index 77b03aedf..72feaaf22 100644 --- a/web-app/src/containers/DownloadManegement.tsx +++ b/web-app/src/containers/DownloadManegement.tsx @@ -161,8 +161,14 @@ export function DownloadManagement() { console.debug('onFileDownloadError', state) removeDownload(state.modelId) removeLocalDownloadingModel(state.modelId) + toast.error(t('common:toast.downloadFailed.title'), { + id: 'download-failed', + description: t('common:toast.downloadFailed.description', { + item: state.modelId, + }), + }) }, - [removeDownload, removeLocalDownloadingModel] + [removeDownload, removeLocalDownloadingModel, t] ) const onFileDownloadStopped = useCallback( diff --git a/web-app/src/containers/dialogs/OutOfContextDialog.tsx b/web-app/src/containers/dialogs/OutOfContextDialog.tsx index d73fdacc4..dad3f84e5 100644 --- a/web-app/src/containers/dialogs/OutOfContextDialog.tsx +++ b/web-app/src/containers/dialogs/OutOfContextDialog.tsx @@ -36,7 +36,10 @@ export default function OutOfContextPromiseModal() { return ( - + e.preventDefault()} + > {t('model-errors:title')} @@ -57,7 +60,7 @@ export default function OutOfContextPromiseModal() { {t('model-errors:truncateInput')} + + + + + + diff --git a/website/src/components/SimpleTOC.astro b/website/src/components/SimpleTOC.astro new file mode 100644 index 000000000..94f0418dc --- /dev/null +++ b/website/src/components/SimpleTOC.astro @@ -0,0 +1,338 @@ +--- +export interface Props { + sections?: Array<{ + id: string; + title: string; + level?: number; + }>; +} + +const { + sections = [ + { id: 'what-were-building', title: 'What We\'re Building' }, + { id: 'two-modes-one-experience', title: 'Two Modes, One Experience' }, + { id: 'our-product-principles', title: 'Our Product Principles' }, + { id: 'available-on-every-device', title: 'Available on Every Device' }, + { id: 'jan-desktop', title: 'Jan Desktop', level: 2 }, + { id: 'jan-web', title: 'Jan Web', level: 2 }, + { id: 'jan-mobile', title: 'Jan Mobile', level: 2 }, + { id: 'jan-server', title: 'Jan Server', level: 2 }, + { id: 'jan-mobile-three-modes-one-experience', title: 'Jan Mobile: Three Modes' }, + { id: 'what-makes-jan-different', title: 'What Makes Jan Different' }, + { id: 'development-timeline', title: 'Development Timeline' } + ] +} = Astro.props; +--- + + + + + + diff --git a/website/src/components/StatusIndicator.astro b/website/src/components/StatusIndicator.astro new file mode 100644 index 000000000..f60b23454 --- /dev/null +++ b/website/src/components/StatusIndicator.astro @@ -0,0 +1,147 @@ +--- +export interface Props { + status: 'active' | 'warning' | 'success' | 'error' | 'idle'; + label: string; + pulse?: boolean; + size?: 'small' | 'medium' | 'large'; +} + +const { status, label, pulse = true, size = 'medium' } = Astro.props; + +const statusColors = { + active: '#00ff41', + warning: '#ffb000', + success: '#00ff41', + error: '#ff0040', + idle: '#888888' +}; + +const statusColor = statusColors[status]; +--- + +
+
+ {label} +
+ + diff --git a/website/src/content.config.ts b/website/src/content.config.ts new file mode 100644 index 000000000..ee21da167 --- /dev/null +++ b/website/src/content.config.ts @@ -0,0 +1,8 @@ +import { defineCollection } from 'astro:content'; +import { docsLoader } from '@astrojs/starlight/loaders'; +import { docsSchema } from '@astrojs/starlight/schema'; +import { videosSchema } from 'starlight-videos/schemas'; + +export const collections = { + docs: defineCollection({ loader: docsLoader(), schema: docsSchema({ extend: videosSchema }) }), +}; diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx new file mode 100644 index 000000000..c4caf13d0 --- /dev/null +++ b/website/src/content/docs/index.mdx @@ -0,0 +1,171 @@ +--- +title: Jan +description: Jan is an open-source ChatGPT-alternative and self-hosted AI platform - build and run AI on your own desktop or server. +keywords: + [ + Jan, + Jan AI, + ChatGPT alternative, + OpenAI platform alternative, + local API, + local AI, + private AI, + conversational AI, + no-subscription fee, + large language model, + LLM, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +![Jan's Cover Image](../../assets/jan-app-new.png) + + +Jan is a ChatGPT alternative that runs 100% offline on your desktop and (*soon*) on mobile. Our goal is to +make it easy for anyone, with or without coding skills, to download and use AI models with full control and +[privacy](https://www.reuters.com/legal/legalindustry/privacy-paradox-with-ai-2023-10-31/). + +Jan is powered by [Llama.cpp](https://github.com/ggerganov/llama.cpp), a local AI engine that provides an OpenAI-compatible +API that can run in the background by default at `https://localhost:1337` (or your custom port). This enables you to power all sorts of +applications with AI capabilities from your laptop/PC. For example, you can connect local tools like [Continue](https://jan.ai/docs/server-examples/continue-dev) +and [Cline](https://cline.bot/) to Jan and power them using your favorite models. + +Jan doesn't limit you to locally hosted models, meaning, you can create an API key from your favorite model provider, +add it to Jan via the configuration's page and start talking to your favorite models. + +### Features + +- Download popular open-source LLMs (Llama3, Gemma3, Qwen3, and more) from the HuggingFace [Model Hub](./jan/manage-models) +or import any GGUF files (the model format used by llama.cpp) available locally +- Connect to [cloud services](./jan/remote-models/openai) (OpenAI, Anthropic, Mistral, Groq, etc.) +- [Chat](./jan/threads) with AI models & [customize their parameters](./jan/explanation/model-parameters) via our +intuitive interface +- Use our [local API server](https://jan.ai/api-reference) with an OpenAI-equivalent API to power other apps. + +### Philosophy + +Jan is built to be [user-owned](about#-user-owned), this means that Jan is: +- Truly open source via the [Apache 2.0 license](https://github.com/menloresearch/jan/blob/dev/LICENSE) +- [Data is stored locally, following one of the many local-first principles](https://www.inkandswitch.com/local-first) +- Internet is optional, Jan can run 100% offline +- Free choice of AI models, both local and cloud-based +- We do not collect or sell user data. See our [Privacy Policy](./privacy). + + + +### Inspirations + +Jan is inspired by the concepts of [Calm Computing](https://en.wikipedia.org/wiki/Calm_technology), and the Disappearing Computer. + +## Acknowledgements + +Jan is built on the shoulders of many open-source projects like: + +- [Llama.cpp](https://github.com/ggerganov/llama.cpp/blob/master/LICENSE) +- [Scalar](https://github.com/scalar/scalar) + +## FAQs + +
+What is Jan? + +Jan is a customizable AI assistant that can run offline on your computer - a privacy-focused alternative to tools like ChatGPT, Anthropic's Claude, and Google Gemini, with optional cloud AI support. + +
+ +
+How do I get started with Jan? + +Download Jan on your computer, download a model or add API key for a cloud-based one, and start chatting. For detailed setup instructions, see our installation guides. + +
+ +
+Is Jan compatible with my system? + +Jan supports all major operating systems: +- [Mac](./jan/installation/mac#compatibility) +- [Windows](./jan/installation/windows#compatibility) +- [Linux](./jan/installation/linux) + +Hardware compatibility includes: +- NVIDIA GPUs (CUDA) +- AMD GPUs (Vulkan) +- Intel Arc GPUs (Vulkan) +- Any GPU with Vulkan support + +
+ +
+How does Jan protect my privacy? + +Jan prioritizes privacy by: +- Running 100% offline with locally-stored data +- Using open-source models that keep your conversations private +- Storing all files and chat history on your device in the [Jan Data Folder](./jan/data-folder) +- Never collecting or selling your data + + + +You can optionally share anonymous usage statistics to help improve Jan, but your conversations are never shared. See our complete [Privacy Policy](./jan/privacy). + +
+ +
+What models can I use with Jan? + +- Download optimized models from the [Jan Hub](./jan/manage-models) +- Import GGUF models from Hugging Face or your local files +- Connect to cloud providers like OpenAI, Anthropic, Mistral and Groq (requires your own API keys) + +
+ +
+Is Jan really free? What's the catch? + +Jan is completely free and open-source with no subscription fees for local models and features. When using cloud-based models (like GPT-4o or Claude Sonnet 3.7), you'll only pay the standard rates to those providers—we add no markup. + +
+ +
+Can I use Jan offline? + +Yes! Once you've downloaded a local model, Jan works completely offline with no internet connection needed. + +
+ +
+How can I contribute or get community help? + +- Join our [Discord community](https://discord.gg/qSwXFx6Krr) to connect with other users +- Contribute through [GitHub](https://github.com/menloresearch/jan) (no permission needed!) +- Get troubleshooting help in our [Discord](https://discord.com/invite/FTk2MvZwJH) channel [#🆘|jan-help](https://discord.com/channels/1107178041848909847/1192090449725358130) +- Check our [Troubleshooting](./jan/troubleshooting) guide for common issues + +
+ +
+Can I self-host Jan? + +Yes! We fully support the self-hosted movement. Either download Jan directly or fork it on [GitHub repository](https://github.com/menloresearch/jan) and build it from source. + +
+ +
+What does Jan stand for? + +Jan stands for "Just a Name". We are, admittedly, bad at marketing 😂. + +
+ +
+Are you hiring? + +Yes! We love hiring from our community. Check out our open positions at [Careers](https://menlo.bamboohr.com/careers). + +
diff --git a/website/src/content/docs/jan/assistants.mdx b/website/src/content/docs/jan/assistants.mdx new file mode 100644 index 000000000..ca6d78ed6 --- /dev/null +++ b/website/src/content/docs/jan/assistants.mdx @@ -0,0 +1,97 @@ +--- +title: Assistants +description: A step-by-step guide on customizing and managing your assistants. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + manage assistants, + assistants, + ] +--- + +Jan allows you to give models specific sets of instructions without having to repeat yourself. We called these +models with your instructions, Assistants. Each of these assistants can also have their own set of configuration +which can help guide how the AI model should behave and respond to your inputs. You can add, edit, or delete +assistants, and customize their instructions and settings from the Assistants tab. + +![The Assistants management page, where you can view, add, edit, or delete assistants. Each assistant has a name, +description, and can be customized for different tasks.](../../../assets/assistants-ui-overview.png) + +To find the Assistants tab: + +1. Open Jan and look at the left sidebar. +2. Click on the **Assistants** tab (see highlighted section in the screenshot above). +3. The main panel will display all your current assistants. + +## Managing Assistants + +- **Add a New Assistant**: Click the `+` button in the Assistants panel to create a new assistant with your instructions. +- **Edit an Assistant**: Click the pencil (✏️) icon on any assistant card to update its name, description, or instructions. +- **Delete an Assistant**: Click the trash (🗑️) icon to remove an assistant you no longer need. + +## Customizing Assistant Instructions + +Each assistant can have its own set of instructions to guide its behavior. For example: + +``` +Act as a software engineering mentor focused on Python and JavaScript. +Provide detailed explanations with code examples when relevant. +Use markdown formatting for code blocks. +``` + +Or: + +``` +Respond in a casual, friendly tone. Keep explanations brief and use simple language. +Provide examples when explaining complex topics. +``` + +Or: + +``` +Respond in a casual, friendly tone. Keep explanations brief and use simple language. +Provide examples when explaining complex topics. +``` + +## Best Practices +- Be clear and specific about the desired behavior for each assistant. +- Include preferences for formatting, tone, or style. +- Include examples to increase the model's compliance with your request. +- Use different assistants for different tasks (e.g., translation, travel planning, financial advice). + + +## Switching and Managing Assistants in Chat + +You can quickly switch between assistants, or create and edit them, directly from the Chat screen using the +assistant dropdown menu at the top: + +![Assistant Dropdown](../../../assets/assistant-dropdown-updated.png) + +- Click the assistant's name (e.g., "Travel Planner") at the top of the Chat screen to open the dropdown menu. +- The dropdown lists all of your assistants. Click on any of the assistants available to switch to it for the +current chat session. +- To create a new assistant, select **Create Assistant** at the bottom of the dropdown. This opens the Add Assistant dialog: + +![Add Assistant Dialog](../../../assets/assistant-add-dialog.png) + +- To edit an existing assistant, click the gear (⚙️) icon next to its name in the dropdown. This opens the Edit Assistant dialog: + +![Edit Assistant Dialog](../../../assets/assistant-edit-dialog.png) + +### Add/Edit Assistant Dialogs +- Set an (optional) emoji and name for your assistant. +- Optionally add a description. +- Enter detailed instructions to guide the assistant's behavior. +- Adjust the predefined parameters (like Temperature, Top P, etc.) or add custom parameters as needed. +- Click **Save** to apply your changes. + +This workflow allows you to seamlessly manage and switch between assistants while chatting, making it easy to tailor +Jan to your needs in real time. diff --git a/website/src/content/docs/jan/data-folder.mdx b/website/src/content/docs/jan/data-folder.mdx new file mode 100644 index 000000000..98d605a03 --- /dev/null +++ b/website/src/content/docs/jan/data-folder.mdx @@ -0,0 +1,216 @@ +--- +title: Jan Data Folder +description: A guide to Jan's data structure. +sidebar_position: 2 +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + quickstart, + getting started, + using AI model, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Jan stores your data locally in JSON format. Your data is yours alone. + +## Open Jan Data Folder + +Via Jan: +1. **Settings** > **General** +2. Click on the **Change Location** button. + +![Open Jan Data Folder](../../../assets/settings-11.png) + + +Via Terminal: + +```bash +# Windows +cd %APPDATA%/Jan/data + +# Mac +cd ~/Library/Application\ Support/Jan/data + +# Linux +cd $XDG_CONFIG_HOME/Jan/data # Custom install +cd ~/.config/Jan/data # Default install +``` + +## Directory Structure + + + +``` +/assistants/ + /jan/ + assistant.json +/engines/ + /llama.cpp/ +/extensions/ + extensions.json +/@janhq/ + /assistant-extension/ + /conversational-extension/ + /download-extension/ + /engine-management-extension/ + /hardware-management-extension/ + /inference-cortex-extension/ + /model-extension/ +/files/ +/logs/ + app.log +/models/ + /huggingface.co/ + /Model_Provider_A/ + /Model_A + model_A.gguf + model_A.yaml +/threads/ + /thread_A/ + messages.jsonl + thread.json + +``` + +### `assistants/` +Where AI personalities live. The default one (`/assistants/jan/`): + +```json +{ + "avatar": "👋", + "id": "jan", + "object": "assistant", + "created_at": 1750945742.536, + "name": "Jan", + "description": "Jan is a helpful AI assistant that can use tools and help complete tasks for its users.", + "model": "*", + "instructions": "You have access to a set of tools to help you answer the user’s question. You can use only one tool per message, and you’ll receive the result of that tool in the user’s next response. To complete a task, use tools step by step—each step should be guided by the outcome of the previous one.\nTool Usage Rules:\n1. Always provide the correct values as arguments when using tools. Do not pass variable names—use actual values instead.\n2. You may perform multiple tool steps to complete a task.\n3. Avoid repeating a tool call with exactly the same parameters to prevent infinite loops.", + "tools": [ + { + "type": "retrieval", + "enabled": false, + "useTimeWeightedRetriever": false, + "settings": { + "top_k": 2, + "chunk_size": 1024, + "chunk_overlap": 64, + "retrieval_template": "Use the following pieces of context to answer the question at the end.\n----------------\nCONTEXT: {CONTEXT}\n----------------\nQUESTION: {QUESTION}\n----------------\nHelpful Answer:" + } + } + ], + "file_ids": [] +} +``` + +Parameters: + +| Parameter | Description | Type | Default | +|------------------------|--------------------------------------------------------------|---------|---------| +| id | Assistant identifier | string | jan | +| avatar | Assistant image | string | None | +| object | OpenAI API compatibility marker | string | None | +| created_at | Creation timestamp | string | None | +| name | Display name | string | Jan | +| description | Role description | string | Default | +| model | Allowed models (* = all) | string | * | +| instructions | Default thread instructions | string | None | +| file_ids | OpenAI compatibility field | string | None | +| tools | Available tools (retrieval only currently) | array | retrieval| +| type | Tool type | string | retrieval| +| enabled | Tool status | boolean | true | +| useTimeWeightedRetriever| Time-weighted retrieval toggle | boolean | false | +| settings | Tool configuration | object | None | +| top_k | Max retrieval results | number | 2 | +| chunk_size | Text chunk size | number | 1024 | +| chunk_overlap | Chunk overlap amount | number | 64 | +| retrieval_template | Response format template | string | None | + +### `extensions/` +Add-on central. Organization extensions live in `@janhq/`, solo ones in root. + +### `logs/` +Debugging headquarters (`/logs/app.txt`): +- **[APP]**: Core logs +- **[SERVER]**: API drama +- **[SPECS]**: Hardware confessions + +### `models/` +The silicon brain collection. Each model has its own `model.json`. + + + +### `threads/` +Chat archive. Each thread (`/threads/jan_unixstamp/`) contains: + +- `messages.jsonl`: +```json + { + "completed_at": 0, + "content": [ + { + "text": { + "annotations": [], + "value": "Hello! I can help you with various tasks. I can search for information on the internet, including news, videos, images, shopping, and more. I can also scrape webpages to extract specific information. Let me know what you need!" + }, + "type": "text" + } + ], + "created_at": 1751012639307, + "id": "01JYR7S0JB5ZBGMJV52KWMW5VW", + "metadata": { + "assistant": { + "avatar": "👋", + "id": "jan", + "instructions": "You have access to a set of tools to help you answer the user's question. You can use only one tool per message, and you'll receive the result of that tool in the user's next response. To complete a task, use tools step by step—each step should be guided by the outcome of the previous one.\nTool Usage Rules:\n1. Always provide the correct values as arguments when using tools. Do not pass variable names—use actual values instead.\n2. You may perform multiple tool steps to complete a task.\n3. Avoid repeating a tool call with exactly the same parameters to prevent infinite loops.", + "name": "Jan", + "parameters": "" + }, + "tokenSpeed": { + "lastTimestamp": 1751012637097, + "message": "01JYR7S0GW5M9PSHMRE7T8VQJM", + "tokenCount": 49, + "tokenSpeed": 22.653721682847895 + } + }, + "object": "thread.message", + "role": "assistant", + "status": "ready", + "thread_id": "8f2c9922-db49-4d1e-8620-279c05baf2d0", + "type": "text" + } +``` + +- `thread.json`: + +| Parameter | Description | +|------------|------------------------------------------------| +| assistants | Assistant configuration clone | +| created | Creation timestamp | +| id | Thread identifier | +| metadata | Additional thread data | +| model | Active model settings | +| object | OpenAI compatibility marker | +| title | Thread name | +| updated | Updated timestamp | + + + + +## Delete Jan Data + +Uninstall guides: [Mac](./installation/mac#step-2-clean-up-data-optional), +[Windows](./installation/windows#step-2-handle-jan-data), or [Linux](./installation/linux#uninstall-jan). diff --git a/website/src/content/docs/jan/explanation/llama-cpp.mdx b/website/src/content/docs/jan/explanation/llama-cpp.mdx new file mode 100644 index 000000000..aa1cc3d02 --- /dev/null +++ b/website/src/content/docs/jan/explanation/llama-cpp.mdx @@ -0,0 +1,207 @@ +--- +title: Local AI Engine +description: Understand and configure Jan's local AI engine for running models on your hardware. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + Llama CPP integration, + llama.cpp Engine, + Intel CPU, + AMD CPU, + NVIDIA GPU, + AMD GPU Radeon, + Apple Silicon, + Intel Arc GPU, + ] +--- + +import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; + +## What is llama.cpp? + +llama.cpp is the engine that runs AI models locally on your computer. Think of it as the software +that takes an AI model file and makes it work on your hardware - whether that's your CPU, +graphics card, or Apple's M-series chips. + +Originally created by Georgi Gerganov, llama.cpp is designed to run large language models +efficiently on consumer hardware without requiring specialized AI accelerators or cloud connections. + +## Why This Matters + +- **Privacy**: Your conversations never leave your computer +- **Cost**: No monthly subscription fees or API costs +- **Speed**: No internet required once models are downloaded +- **Control**: Choose exactly which models to run and how they behave + +## Accessing Engine Settings + +Find llama.cpp settings at **Settings** > **Model Providers** > **Llama.cpp**: + +![llama.cpp](../../../../assets/llama.cpp-01-updated.png) + + + +## Engine Management + +| Feature | What It Does | When You Need It | +|---------|-------------|------------------| +| **Engine Version** | Shows which version of llama.cpp you're running | Check compatibility with newer models | +| **Check Updates** | Downloads newer engine versions | When new models require updated engine | +| **Backend Selection** | Choose the version optimized for your hardware | After installing new graphics cards or when performance is poor | + +## Hardware Backends + +Jan offers different backend versions optimized for your specific hardware. Think of these as different "drivers" - each one is tuned for particular processors or graphics cards. + + + + + + + +### NVIDIA Graphics Cards (Recommended for Speed) +Choose based on your CUDA version (check NVIDIA Control Panel): + +**For CUDA 12.0:** +- `llama.cpp-avx2-cuda-12-0` (most common) +- `llama.cpp-avx512-cuda-12-0` (newer Intel/AMD CPUs) + +**For CUDA 11.7:** +- `llama.cpp-avx2-cuda-11-7` (most common) +- `llama.cpp-avx512-cuda-11-7` (newer Intel/AMD CPUs) + +### CPU Only (No Graphics Card Acceleration) +- `llama.cpp-avx2` (most modern CPUs) +- `llama.cpp-avx512` (newer Intel/AMD CPUs) +- `llama.cpp-avx` (older CPUs) +- `llama.cpp-noavx` (very old CPUs) + +### Other Graphics Cards +- `llama.cpp-vulkan` (AMD, Intel Arc, some others) + + + + + + + +### NVIDIA Graphics Cards +Same CUDA options as Windows: +- `llama.cpp-avx2-cuda-12-0` (most common) +- `llama.cpp-avx2-cuda-11-7` (older drivers) + +### CPU Only +- `llama.cpp-avx2` (most modern CPUs) +- `llama.cpp-avx512` (newer Intel/AMD CPUs) +- `llama.cpp-arm64` (ARM processors like Raspberry Pi) + +### Other Graphics Cards +- `llama.cpp-vulkan` (AMD, Intel graphics) + + + + + +### Apple Silicon (M1/M2/M3/M4) +- `llama.cpp-mac-arm64` (recommended) + +### Intel Macs +- `llama.cpp-mac-amd64` + + + + + + + +## Performance Settings + +These control how efficiently models run: + +| Setting | What It Does | Recommended Value | Impact | +|---------|-------------|------------------|---------| +| **Continuous Batching** | Process multiple requests at once | Enabled | Faster when using multiple tools or having multiple conversations | +| **Parallel Operations** | How many requests to handle simultaneously | 4 | Higher = more multitasking, but uses more memory | +| **CPU Threads** | How many processor cores to use | Auto-detected | More threads can speed up CPU processing | + +## Memory Settings + +These control how models use your computer's memory: + +| Setting | What It Does | Recommended Value | When to Change | +|---------|-------------|------------------|----------------| +| **Flash Attention** | More efficient memory usage | Enabled | Leave enabled unless you have problems | +| **Caching** | Remember recent conversations | Enabled | Speeds up follow-up questions | +| **KV Cache Type** | Memory precision trade-off | f16 | Change to q8_0 or q4_0 if running out of memory | +| **mmap** | Load models more efficiently | Enabled | Helps with large models | +| **Context Shift** | Handle very long conversations | Disabled | Enable for very long chats or multiple tool calls | + +### KV Cache Types Explained +- **f16**: Most stable, uses more memory +- **q8_0**: Balanced memory usage and quality +- **q4_0**: Uses least memory, slight quality loss + +## Troubleshooting Common Issues + +**Models won't load:** +- Try a different backend (switch from CUDA to CPU or vice versa) +- Check if you have enough RAM/VRAM +- Update to latest engine version + +**Very slow performance:** +- Make sure you're using GPU acceleration (CUDA/Metal/Vulkan backend) +- Increase GPU Layers in model settings +- Close other memory-intensive programs + +**Out of memory errors:** +- Reduce Context Size in model settings +- Switch KV Cache Type to q8_0 or q4_0 +- Try a smaller model variant + +**Random crashes:** +- Switch to a more stable backend (try avx instead of avx2) +- Disable overclocking if you have it enabled +- Update graphics drivers + +## Quick Setup Guide + +**For most users:** +1. Use the default backend that Jan installs +2. Leave all performance settings at defaults +3. Only adjust if you experience problems + +**If you have an NVIDIA graphics card:** +1. Download the appropriate CUDA backend +2. Make sure GPU Layers is set high in model settings +3. Enable Flash Attention + +**If models are too slow:** +1. Check you're using GPU acceleration +2. Try enabling Continuous Batching +3. Close other applications using memory + +**If running out of memory:** +1. Change KV Cache Type to q8_0 +2. Reduce Context Size in model settings +3. Try a smaller model + + diff --git a/website/src/content/docs/jan/explanation/model-parameters.mdx b/website/src/content/docs/jan/explanation/model-parameters.mdx new file mode 100644 index 000000000..4b60afd68 --- /dev/null +++ b/website/src/content/docs/jan/explanation/model-parameters.mdx @@ -0,0 +1,109 @@ +--- +title: Model Parameters +description: Customize how your AI models behave and perform. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + model settings, + parameters, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Model parameters control how your AI thinks and responds. Think of them as the AI's personality settings and performance controls. + +## How to Access Settings + +**For individual conversations:** +- In **Threads**, click the **gear icon** next to your selected model + +**For permanent model settings:** +- Go to **Settings > Model Providers > Llama.cpp**, click the **gear icon** next to a model + +**For model capabilities:** +- Click the **edit button** next to a model to enable features like vision or tools + +## Performance Settings + +These settings control how the model thinks and performs: + +| Setting | What It Does | Simple Explanation | +|---------|-------------|-------------------| +| **Context Size** | How much text the model remembers | Like the model's working memory. Larger = remembers more of your conversation, but uses more computer memory. | +| **GPU Layers** | How much work your graphics card does | More layers on GPU = faster responses, but needs more graphics memory. Start high and reduce if you get errors. | +| **Temperature** | How creative vs. predictable responses are | Low (0.1-0.3) = focused, consistent answers. High (0.7-1.0) = creative, varied responses. Try 0.7 for general use. | +| **Top K** | How many word choices the model considers | Smaller numbers (20-40) = more focused. Larger numbers (80-100) = more variety. Most people don't need to change this. | +| **Top P** | Another way to control word variety | Works with Top K. Values like 0.9 work well. Lower = more focused, higher = more creative. | +| **Min P** | Minimum chance a word needs to be chosen | Prevents very unlikely words. Usually fine at default settings. | +| **Repeat Last N** | How far back to check for repetition | Helps prevent the model from repeating itself. Default values usually work well. | +| **Repeat Penalty** | How much to avoid repeating words | Higher values (1.1-1.3) reduce repetition. Too high makes responses awkward. | +| **Presence Penalty** | Encourages talking about new topics | Higher values make the model explore new subjects instead of staying on one topic. | +| **Frequency Penalty** | Reduces word repetition | Similar to repeat penalty but focuses on how often words are used. | + +![Model Parameters](../../../../assets/model-parameters.png) + +## Model Capabilities + +These toggle switches enable special features: + +- **Vision**: Let the model see and analyze images you share +- **Tools**: Enable advanced features like web search, file operations, and code execution +- **Embeddings**: Allow the model to create numerical representations of text (for advanced users) +- **Web Search**: Let the model search the internet for current information +- **Reasoning**: Enable step-by-step thinking for complex problems + +![Model Capabilities Edit 01](../../../../assets/model-capabilities-edit-01.png) +![Model Capabilities Edit 02](../../../../assets/model-capabilities-edit-02.png) + +## Hardware Settings + +These control how efficiently the model runs on your computer: + +### GPU Layers +Think of your model as a stack of layers, like a cake. Each layer can run on either your main processor (CPU) or graphics card (GPU). Your graphics card is usually much faster. + +- **More GPU layers** = Faster responses, but uses more graphics memory +- **Fewer GPU layers** = Slower responses, but uses less graphics memory + +Start with the maximum number and reduce if you get out-of-memory errors. + +### Context Length +This is like the model's short-term memory - how much of your conversation it can remember at once. + +- **Longer context** = Remembers more of your conversation, better for long discussions +- **Shorter context** = Uses less memory, runs faster, but might "forget" earlier parts of long conversations + + + +## Quick Setup Guide + +**For most users:** +1. Enable **Tools** if you want web search and code execution +2. Set **Temperature** to 0.7 for balanced creativity +3. Max out **GPU Layers** (reduce only if you get memory errors) +4. Leave other settings at defaults + +**For creative writing:** +- Increase **Temperature** to 0.8-1.0 +- Increase **Top P** to 0.95 + +**For factual/technical work:** +- Decrease **Temperature** to 0.1-0.3 +- Enable **Tools** for web search and calculations + +**Troubleshooting:** +- **Responses too repetitive?** Increase Temperature or Repeat Penalty +- **Out of memory errors?** Reduce GPU Layers or Context Size +- **Responses too random?** Decrease Temperature +- **Model running slowly?** Increase GPU Layers (if you have VRAM) or reduce Context Size diff --git a/website/src/content/docs/jan/installation/linux.mdx b/website/src/content/docs/jan/installation/linux.mdx new file mode 100644 index 000000000..238b663a3 --- /dev/null +++ b/website/src/content/docs/jan/installation/linux.mdx @@ -0,0 +1,266 @@ +--- +title: Linux +description: Get started quickly with Jan, an AI chat application that runs 100% offline on your desktop & mobile (*coming soon*). +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + quickstart, + getting started, + using AI model, + installation, + "desktop" + ] +--- + +import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; + +Instructions for installing Jan on Linux. + +## Compatibility +System requirements: + + + + #### Debian-based (Supports `.deb` and `AppImage`) + + - Debian + - Ubuntu and derivatives: + - Ubuntu Desktop LTS (official)/Ubuntu Server LTS (only for server) + - Edubuntu + - Kubuntu + - Lubuntu + - Ubuntu Budgie + - Ubuntu Cinnamon + - Ubuntu Kylin + - Ubuntu MATE + - Linux Mint + - Pop!_OS + + #### RHEL-based (Supports `.rpm` and `AppImage`) + + - RHEL-based (Server only) + - Fedora + + #### Arch-based + + - Arch Linux + - SteamOS + + #### Independent + + - openSUSE + + + + - Haswell processors (Q2 2013) and newer + - Tiger Lake (Q3 2020) and newer for Celeron and Pentium processors + - Excavator processors (Q2 2015) and newer + + + + + + - 8GB → up to 3B parameter models (int4) + - 16GB → up to 7B parameter models (int4) + - 32GB → up to 13B parameter models (int4) + + + + + + - 6GB → up to 3B parameter models (int4) + - 8GB → up to 7B parameter models (int4) + - 12GB → up to 13B parameter models (int4) + + + + + + Minimum 10GB of free disk space required. + + + +## Install Jan + +Installation steps: + + +### Step 1: Download Application + +Available releases: + + + Stable release: + - Ubuntu: [jan.deb](https://app.jan.ai/download/latest/linux-amd64-deb) + - Others: [Jan.AppImage](https://app.jan.ai/download/latest/linux-amd64-appimage) + - Official Website: https://jan.ai/download + + + + Development build: + - Ubuntu: [jan.deb](https://app.jan.ai/download/nightly/linux-amd64-deb) + - Others: [Jan.AppImage](https://app.jan.ai/download/nightly/linux-amd64-appimage) + + + + + +### Step 2: Install Application + +Installation commands: + + + + ##### dpkg + + ```bash + sudo dpkg -i jan-linux-amd64-{version}.deb + ``` + + ##### apt-get + + ```bash + sudo apt-get install ./jan-linux-amd64-{version}.deb + ``` + + + + From the terminal, run the following commands: + + ```bash + chmod +x jan-linux-x86_64-{version}.AppImage + ./jan-linux-x86_64-{version}.AppImage + ``` + + + + + +## Data Folder + +Default locations: + +```bash +# Custom installation directory +$XDG_CONFIG_HOME = /home/username/custom_config + +# or + +# Default installation directory +~/.config/Jan/data + +``` +See [Jan Data Folder](/docs/data-folder) for details. + + +## GPU Acceleration +Configuration for GPU support: + + + +
    + + ### Step 1: Verify Hardware & Install Dependencies + + **1.1. Check GPU Detection** + + ```sh + lspci | grep -i nvidia + ``` + + **1.2. Install Required components** + + **NVIDIA Driver:** + + 1. Install the [NVIDIA Driver](https://www.nvidia.com/en-us/drivers/), ideally via your package manager. + 2. Verify: + + ```sh + nvidia-smi + ``` + + **CUDA Toolkit:** + + 1. Install the [CUDA toolkit](https://developer.nvidia.com/cuda-downloads), ideally from your package manager (**11.7+**) + 2. Verify: + + ```sh + nvcc --version + ``` + + **Additional Requirements:** + + ```sh + sudo apt update + sudo apt install gcc-11 g++-11 cpp-11 + export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/cuda/lib64 + ``` + [Documentation](https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#post-installation-actions) + + ### Step 2: Enable GPU Acceleration + + 1. Navigate to **Settings** > **Local Engine** > **Llama.cpp** + 2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp). + + + +
+ + + + Requires Vulkan support. + + 1. Navigate to **Settings** > **Hardware** > **GPUs** + 2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp). + + + + Requires Vulkan support. + + 1. Navigate to **Settings** > **Hardware** > **GPUs** + 2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp). + + + +## Uninstall Jan + +Removal commands: + + + ```bash + sudo apt-get remove jan + rm -rf Jan + rm -rf ~/.config/Jan/data + rm -rf ~/.config/Jan/cache + ``` + + + + ```bash + rm jan-linux-x86_64-{version}.AppImage + rm -rf ~/.config/Jan + ``` + + + + diff --git a/website/src/content/docs/jan/installation/mac.mdx b/website/src/content/docs/jan/installation/mac.mdx new file mode 100644 index 000000000..80a8cf40f --- /dev/null +++ b/website/src/content/docs/jan/installation/mac.mdx @@ -0,0 +1,131 @@ +--- +title: Mac +description: Get started quickly with Jan - a local AI that runs on your computer. Install Jan and pick your model to start chatting. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + quickstart, + getting started, + using AI model, + installation, + "desktop" + ] +--- + +import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; + + +Jan runs natively on both Apple Silicon and Intel-based Macs. + +## Compatibility + +### Minimum Requirements + +Your Mac needs: +- **Operating System:** MacOSX 13.6 or higher +- **Memory:** + - 8GB → up to 3B parameter models + - 16GB → up to 7B parameter models + - 32GB → up to 13B parameter models +- **Storage:** 10GB+ free space + +### Mac Performance Guide + + + +**Apple Silicon (M1, M2, M3)** +- Metal acceleration enabled by default +- GPU-accelerated processing + +**Intel-based Mac** +- CPU processing only +- Standard performance + +_Check your Mac's processor: Apple menu → About This Mac_ + +## Install Jan + +Installation steps: + +### Step 1: Download Application + +Select version: + + + + Get Jan from here: + - [Download Jan's Stable Version](https://app.jan.ai/download/latest/mac-universal) + - Official Website: https://jan.ai/download + + + + + Nightly: Latest features, less stable. + + [Download Jan's Nightly Version](https://app.jan.ai/download/nightly/mac-universal) + + + + + + +### Step 2: Install Application + +1. Open the Jan installer (`.dmg` file) +2. Drag Jan to **Applications** +3. Wait a moment +4. Launch Jan + + +## Jan Data Folder + +Default location: + +```sh +# Default installation directory +~/Library/Application\ Support/Jan/data +``` + +See [Jan Data Folder](../data-folder) for details. + + +## Uninstall Jan + + +### Step 1: Remove Application + +1. Close Jan if it's running +2. Open **Finder** +3. Go to **Applications** +4. Find Jan +5. Pick your removal method: + - Drag to **Trash** + - Right-click → **Move to Trash** + - **Command-Delete** + +### Step 2: Clean Up Data (Optional) + +Run this in **Terminal** to remove all data: + +```bash +rm -rf ~/Library/Application\ Support/Jan/data +``` + + diff --git a/website/src/content/docs/jan/installation/windows.mdx b/website/src/content/docs/jan/installation/windows.mdx new file mode 100644 index 000000000..b50abf65f --- /dev/null +++ b/website/src/content/docs/jan/installation/windows.mdx @@ -0,0 +1,192 @@ +--- +title: Windows +description: Run AI models locally on your Windows machine with Jan. Quick setup guide for local inference and chat. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + quickstart, + getting started, + using AI model, + installation, + "desktop" + ] +--- + +import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; + + + +# Windows Installation + +## Compatibility + +**System requirements:** +- **Operating System**: Windows 10 or higher. +- **CPU** + + + + - Intel: Haswell (Q2 2013) or newer + - Intel Celeron/Pentium: Tiger Lake (Q3 2020) or newer + + + - Excavator processors (Q2 2015) and newer. + + + + + +**Memory (RAM)** +- 8GB → up to 3B parameter models (int4) +- 16GB → up to 7B parameter models (int4) +- 32GB → up to 13B parameter models (int4) + + + +**GPU**: +- 6GB → up to 3B parameter models +- 8GB → up to 7B parameter models +- 12GB → up to 13B parameter models + + + +**Storage:** 10GB free space minimum for app and models + + +## Install Jan + +### Step 1: Download Application + + + + - [Download Stable Jan](https://app.jan.ai/download/latest/win-x64) + - Official Website: [Download Jan](https://jan.ai/download) + + + + Nightly: Development build with latest features + + [Download Nightly Jan](https://app.jan.ai/download/nightly/win-x64) + + + + + +### Step 2: Install Application + +1. Run the downloaded `.exe` file +2. Wait for installation to complete +3. Launch Jan + +## Data Folder + +Default installation path: + +```sh +# Default installation directory +~\Users\\AppData\Roaming\Jan\data +``` + +See [Jan Data Folder](/docs/data-folder) for complete folder structure details. + + +## GPU Acceleration + + + + +### Step 1: Verify Hardware & Install Dependencies +**1.1. Check GPU Detection** + +Verify GPU is recognized: +- Right-click desktop > NVIDIA Control Panel +- Or check Device Manager > Display Adapters + +**1.2. Install Required components** +**NVIDIA Driver:** +1. Install [NVIDIA Driver](https://www.nvidia.com/en-us/drivers/) (version **470.63.01 or higher**) +2. Verify installation: + +```sh +nvidia-smi +``` + +**CUDA Toolkit:** +1. Install [CUDA toolkit](https://developer.nvidia.com/cuda-downloads) (**11.7 or higher**) +2. Verify installation: + +```sh +nvcc --version +``` +### Step 2: Enable GPU Acceleration + +Navigate to **Settings** > **Hardware** > **GPUs** +and toggle the **ON** switch if not enabled. + + + + + AMD GPUs require **Vulkan** support. + + Navigate to **Settings** > **Hardware** > **GPUs** + and toggle the **ON** switch if not enabled. + + + + + Intel Arc GPUs require **Vulkan** support. + + Navigate to **Settings** > **Hardware** > **GPUs** + and toggle the **ON** switch if not enabled. + + + + + + +## Uninstall Jan + +### Step 1: Remove Application through Control Panel + +1. Open **Control Panels** +2. Go to **Programs** section +3. Click **Uninstall Program** +4. Search for **Jan** +5. Click the **Three Dots Icon** > **Uninstall** +6. Click **Uninstall** again to confirm +7. Click **OK** + +### Step 2: Clean Up Remaining Files + +Remove app data: + +1. Navigate to `C:\Users\[username]\AppData\Roaming` +2. Delete Jan folder + +or via **Terminal**: + +```sh +cd C:\Users\%USERNAME%\AppData\Roaming +rmdir /S Jan +``` + + diff --git a/website/src/content/docs/jan/jan-models/jan-nano-128.mdx b/website/src/content/docs/jan/jan-models/jan-nano-128.mdx new file mode 100644 index 000000000..03ee1f17c --- /dev/null +++ b/website/src/content/docs/jan/jan-models/jan-nano-128.mdx @@ -0,0 +1,137 @@ +--- +title: Jan Nano 128k +description: Jan Models +keywords: + [ + Jan, + Jan Models, + Jan Model, + Jan Model List, + Menlo Models, + Menlo Model, + Jan-Nano-Gguf, + ReZero, + Model Context Protocol, + MCP, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +> Enabling deeper research through extended context understanding. + +Jan-Nano-128k represents a notable advancement in compact language models for different applications. Building upon the +success of Jan-Nano-32k, this enhanced version features a native 128k context window that enables deeper, more comprehensive +research capabilities without the performance degradation typically associated with context extension methods. + +You can have a look at all of our models, and download them from the HuggingFace [Menlo Models page](https://huggingface.co/Menlo). + +**Key Improvements:** + +- 🔍 Deeper Research: Extended context allows for processing entire research papers, lengthy documents, and complex multi-turn conversations +- ⚡ Native 128k Window: Built to handle long contexts efficiently, maintaining performance across the full context range +- 📈 Enhanced Performance: Unlike traditional context extension methods, Jan-Nano-128k's performance remains consistent with longer contexts + +This model maintains full compatibility with Model Context Protocol (MCP) servers while dramatically expanding the scope of research +tasks it can handle in a single session. + + +## Why Jan-Nano-128k? + +Most small models hit a wall at 8-32k tokens. Jan-Nano-128k goes beyond this limitation with a native 128k context window—that's roughly +300 pages of text or an entire novel's worth of information processed simultaneously. + +Unlike YaRN or PI methods that retrofit models beyond their limits and degrade performance, Jan-Nano-128k was architecturally rewired for +128k contexts from the ground up. The result: an inverse scaling behavior where performance actually improves with longer contexts, +maintaining consistent accuracy from 1k to 128k tokens as the model leverages more information for synthesis. + + + + +**Applications unlocked:** +- **Academic**: Extract key findings from 50+ papers simultaneously +- **Legal**: Pinpoint relevant clauses across thousand-page contracts +- **Code**: Trace specific functions through massive codebases +- **Business**: Distill insights from quarters of financial data +- **Content**: Maintain narrative coherence across book-length outputs + +**MCP Usage:** Jan-Nano-128k doesn't memorize, it orchestrates. With MCP integration, it becomes a research conductor that fetches dozens +of sources, holds everything in active memory, extracts precisely what's needed, and synthesizes findings across a marathon research session. It's +not about understanding every word; it's about finding the needle in a haystack of haystacks. + +## Evaluation + +Jan-Nano-128k has been rigorously evaluated on the SimpleQA benchmark using our MCP-based methodology, demonstrating superior performance compared to its predecessor: + +![Jan-Nano-128k Performance](../../../../assets/jan-nano-bench.png) + +**Key findings:** +- 15% improvement over Jan-Nano-32k on complex multi-document tasks +- Consistent performance across all context lengths (no cliff at 64k like other extended models) +- Superior citation accuracy when handling 10+ sources simultaneously + +## 🖥️ How to Run Locally + +### Demo + + + +### Quick Start Guide + +1. **Download Jan** +2. **Download Jan-Nano-128k** +3. **Enable MCP**, the serper or the exa MCPs work very well with Jan-Nano-128k +4. **Start researching** + +### Usage + +Deploy using VLLM: + +```bash +vllm serve Menlo/Jan-nano-128k \ + --host 0.0.0.0 \ + --port 1234 \ + --enable-auto-tool-choice \ + --tool-call-parser hermes \ + --rope-scaling '{"rope_type":"yarn","factor":3.2,"original_max_position_embeddings":40960}' --max-model-len 131072 +``` + +Or with `llama-server` from `llama.cpp`: + +```bash +llama-server ... --rope-scaling yarn --rope-scale 3.2 --yarn-orig-ctx 40960 +``` + +**Note:** The chat template is included in the tokenizer. For troubleshooting, download the [Non-think chat template](https://qwen.readthedocs.io/en/latest/_downloads/c101120b5bebcc2f12ec504fc93a965e/qwen3_nonthinking.jinja). + +### Recommended Sampling Parameters + +```yaml +Temperature: 0.7 +Top-p: 0.8 +Top-k: 20 +Min-p: 0.0 +``` + +### Hardware Requirements +- **Minimum**: 16GB RAM for Q4 quantization +- **Recommended**: 24GB RAM for Q8 quantization +- **Optimal**: 32GB+ RAM for full precision + +## 🤝 Community & Support +- **Discussions**: [HuggingFace Community](https://huggingface.co/Menlo/Jan-nano-128k/discussions) +- **Issues**: [GitHub Repository](https://github.com/menloresearch/deep-research/issues) +- **Discord**: Join our research community for tips and best practices diff --git a/website/src/content/docs/jan/jan-models/jan-nano-32.mdx b/website/src/content/docs/jan/jan-models/jan-nano-32.mdx new file mode 100644 index 000000000..66d8a3ec1 --- /dev/null +++ b/website/src/content/docs/jan/jan-models/jan-nano-32.mdx @@ -0,0 +1,136 @@ +--- +title: Jan Nano 32k +description: Jan-Nano-Gguf Model +keywords: + [ + Jan, + Jan Models, + Jan Model, + Jan Model List, + Menlo Models, + Menlo Model, + Jan-Nano-Gguf, + ReZero, + Model Context Protocol, + MCP, + ] +sidebar: + order: 1 +--- + +import { Aside } from '@astrojs/starlight/components'; + +![Jan Nano](../../../../assets/jan-nano0.png) + +## Why Jan Nano? + +Most language models face a fundamental tradeoff where powerful capabilities require a lot of computational resources. Jan +Nano breaks this constraint through a focused design philosophy where instead of trying to know everything, it excels at +knowing how to find anything. + + +## What is Jan Nano? + +Jan Nano is a compact 4-billion parameter language model specifically designed and trained for deep research tasks. +This model has been optimized to work seamlessly with Model Context Protocol (MCP) servers, enabling efficient integration +with various research tools and data sources. + +The model and its different model variants are fully supported by Jan. + + + + +## System Requirements + +- Minimum Requirements: + - 8GB RAM (with iQ4_XS quantization) + - 12GB VRAM (for Q8 quantization) + - CUDA-compatible GPU +- Recommended Setup: + - 16GB+ RAM + - 16GB+ VRAM + - Latest CUDA drivers + - RTX 30/40 series or newer + + +## Using Jan-Nano-32k + +**Step 1** +Download Jan from [here](https://jan.ai/docs/desktop/). + +**Step 2** +Go to the Hub Tab, search for Jan-Nano-Gguf, and click on the download button to the best model size for your system. + +![Jan Nano](../../../../assets/jan-nano1.png) + +**Step 3** +Go to **Settings** > **Model Providers** > **Llama.cpp** click on the pencil icon and enable tool use for Jan-Nano-Gguf. + +**Step 4** +To take advantage of Jan-Nano's full capabilities, you need to enable MCP support. We're going to use it with Serper's +API. You can get a free API key from [here](https://serper.dev/). Sign up and they will immediately generate one for you. + +**Step 5** +Add the serper MCP to Jan via the **Settings** > **MCP Servers** tab. + +![Serper MCP](../../../../assets/serper-mcp.png) + +**Step 6** +Open up a new chat and ask Jan-Nano to search the web for you. + +![Jan Nano](/gifs/jan-nano-demo.gif) + +## Queries to Try + +Here are some example queries to showcase Jan-Nano's web search capabilities: + +1. **Current Events**: What are the latest developments in renewable energy adoption in Germany and Denmark? +2. **International Business**: What is the current status of Tesla's Gigafactory in Berlin and how has it impacted the local economy? +3. **Technology Trends**: What are the newest AI developments from Google, Microsoft, and Meta that were announced this week? +4. **Global Weather**: What's the current weather forecast for Tokyo, Japan for the next 5 days? +5. **Stock Market**: What are the current stock prices for Apple, Samsung, and Huawei, and how have they performed this month? +6. **Sports Updates**: What are the latest results from the Premier League matches played this weekend? +7. **Scientific Research**: What are the most recent findings about climate change impacts in the Arctic region? +8. **Cultural Events**: What major music festivals are happening in Europe this summer and who are the headliners? +9. **Health & Medicine**: What are the latest developments in mRNA vaccine technology and its applications beyond COVID-19? +10. **Space Exploration**: What are the current missions being conducted by NASA, ESA, and China's space program? + + +## FAQ + +- What are the recommended GGUF quantizations? + - Q8 GGUF is recommended for best performance + - iQ4_XS GGUF for very limited VRAM setups + - Avoid Q4_0 and Q4_K_M as they show significant performance degradation + +- Can I run this on a laptop with 8GB RAM? + - Yes, but use the recommended quantizations (iQ4_XS) + - Note that performance may be limited with Q4 quantizations + +- How much did the training cost? + - Training was done on internal A6000 clusters + - Estimated cost on RunPod would be under $100 using H200 + - Hardware used: + - 8xA6000 for training code + - 4xA6000 for vllm server (inferencing) + +- What frontend should I use? + - Jan Beta (recommended) - Minimalistic and polished interface + - Download link: https://jan.ai/docs/desktop/beta + +- Getting Jinja errors in LM Studio? + - Use Qwen3 template from other LM Studio compatible models + - Disable “thinking” and add the required system prompt + - Fix coming soon in future GGUF releases +- Having model loading issues in Jan? + - Use latest beta version: Jan-beta_0.5.18-rc6-beta + - Ensure proper CUDA support for your GPU + - Check VRAM requirements match your quantization choice + +## Resources + +- [Jan-Nano Model on Hugging Face](https://huggingface.co/Menlo/Jan-nano) +- [Jan-Nano GGUF on Hugging Face](https://huggingface.co/Menlo/Jan-nano-gguf) diff --git a/website/src/content/docs/jan/manage-models.mdx b/website/src/content/docs/jan/manage-models.mdx new file mode 100644 index 000000000..290d1452f --- /dev/null +++ b/website/src/content/docs/jan/manage-models.mdx @@ -0,0 +1,187 @@ +--- +title: Managing Models +description: Manage your interaction with AI models locally. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + threads, + chat history, + thread history, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +This guide shows you how to add, customize, and delete models within Jan. + +## Local Model + +Local models are managed through [Llama.cpp](https://github.com/ggerganov/llama.cpp), and these models are in a +format called GGUF. When you run them locally, they will use your computer's memory (RAM) and processing power, so +please make sure that you download models that match the hardware specifications for your operating system: +- [Mac](/docs/desktop/mac#compatibility) +- [Windows](/docs/desktop/windows#compatibility) +- [Linux](/docs/desktop/linux#compatibility). + +### Adding Models + +#### 1. Download from Jan Hub (Recommended) + +The easiest way to get started is using Jan's built-in model hub (which is connected to [HuggingFace's Model Hub](https://huggingface.co/models): +1. Go to the **Hub** tab +2. Browse available models and click on any model to see details about it +3. Choose a model that fits your needs & hardware specifications +4. Click **Download** on your chosen model + + + +![Download Model](../../../assets/model-management-01.png) + + +#### 2. Import from [Hugging Face](https://huggingface.co/) + +You can download models with a direct link from Hugging Face: + +**Note:** Some models require a Hugging Face Access Token. Enter your token in **Settings > Model Providers > Hugging Face** before importing. + +1. Visit the [Hugging Face Models](https://huggingface.co/models) page. +2. Find the model you want to use, make sure it is a GGUF file that fits in your computer. +3. Copy the **model ID** (e.g., TheBloke/Mistral-7B-v0.1-GGUF) +4. In Jan, paste the model ID to the **Search** bar in **Hub** page +5. Select your preferred quantized version to download (if the option is available) + +**Copy the model ID.** +![Find HF Model](../../../assets/hf-unsloth.png) + +**Paste it in Jan's Hub Search Bar.** +![Import Model](../../../assets/model-management-02.png) + +#### 3. Import Local Files + +If you already have one or many GGUF model files on your computer: +1. In Jan, go to **Settings > Model Providers > Llama.cpp** +2. Click **Import** and select your GGUF file(s) +3. Choose how you want to import: + - **Link Files:** Creates symbolic links to your model files (saves space) + - **Duplicate:** Makes a copy of model files in Jan's directory +4. Click **Import** to complete (check the [Jan Data Folder](./data-folder) section for more info) + + + +![Download Model](../../../assets/model-management-04.png) + +![Download Model](../../../assets/model-import-04.png) + +![Download Model](../../../assets/model-import-05.png) + + +#### 4. Manual Setup + +For advanced users who want to add a specific model that is not available within the Jan **Hub**: + +##### Step 1: Create Model File + +1. Navigate to the [Jan Data Folder](./data-folder) +2. Open `models` folder +3. Create a new **Folder** for your model +4. Add your `model.gguf` file +5. Add your `model.json` file with your configuration. Here's an example with "TinyLlama Chat 1.1B Q4": + +```json +{ + "sources": [ + { + "filename": "tinyllama-1.1b-chat-v1.0.Q4_K_M.gguf", + "url": "https://huggingface.co/TheBloke/TinyLlama-1.1B-Chat-v1.0-GGUF/resolve/main/tinyllama-1.1b-chat-v1.0.Q4_K_M.gguf" + } + ], + "id": "tinyllama-1.1b", + "object": "model", + "name": "TinyLlama Chat 1.1B Q4", + "version": "1.0", + "description": "TinyLlama is a tiny model with only 1.1B. It's a good model for less powerful computers.", + "format": "gguf", + "settings": { + "ctx_len": 4096, + "prompt_template": "<|system|>\n{system_message}<|user|>\n{prompt}<|assistant|>", + "llama_model_path": "tinyllama-1.1b-chat-v1.0.Q4_K_M.gguf" + }, + "parameters": { + "temperature": 0.7, + "top_p": 0.95, + "stream": true, + "max_tokens": 2048, + "stop": [], + "frequency_penalty": 0, + "presence_penalty": 0 + }, + "metadata": { + "author": "TinyLlama", + "tags": [ + "Tiny", + "Foundation Model" + ], + "size": 669000000 + }, + "engine": "nitro" +} +``` +##### Step 2: Modify Model Parameters + +Key fields to configure: +1. The **Settings** array is where you can set the path or location of your model in your computer, the context +length allowed, and the chat template expected by your model. +2. The [**Parameters**](./model-parameters) are the adjustable settings that affect how your model operates or +processes the data. The fields in the parameters array are typically general and can be used across different +models. Here is an example of model parameters: + +```json +"parameters":{ + "temperature": 0.7, + "top_p": 0.95, + "stream": true, + "max_tokens": 4096, + "frequency_penalty": 0, + "presence_penalty": 0, +} +``` + +### Delete Models +1. Go to **Settings > Model Providers > Llama.cpp** +2. Find the model you want to remove +3. Select the three dots icon next to it and select **Delete Model** + +![Delete Model](../../../assets/model-management-05.png) + +## Cloud Models + + + +Jan supports connecting to various AI cloud providers that are OpenAI API-compatible, including: OpenAI (GPT-4o, o3,...), +Anthropic (Claude), Groq, Mistral, and more. +1. Navigate to the **Settings** page +2. Under **Model Providers** section in the left sidebar, choose your preferred provider (OpenAI, Anthropic, etc.) +3. Enter your API key +4. The activated cloud models will be available in your model selector inside the **Chat** panel + +![Download Model](../../../assets/model-management-06.png) + +As soon as you add your key for a model provider like Anthropic or OpenAI, you will be able to pick one of their models to chat with. + +![Connect Remote APIs](../../../assets/quick-start-03.png) diff --git a/website/src/content/docs/jan/mcp-examples/data-analysis/e2b.mdx b/website/src/content/docs/jan/mcp-examples/data-analysis/e2b.mdx new file mode 100644 index 000000000..ff4d919c9 --- /dev/null +++ b/website/src/content/docs/jan/mcp-examples/data-analysis/e2b.mdx @@ -0,0 +1,288 @@ +--- +title: E2B Code Sandbox +description: Execute Python code securely in isolated sandbox environments with E2B. +keywords: + [ + Jan, + MCP, + Model Context Protocol, + E2B, + code execution, + sandbox, + data analysis, + Python, + secure computing, + tool calling, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +E2B MCP provides isolated Python execution environments. Your AI can run actual code instead of just describing what code might do. + +The real value emerges when you combine secure remote execution with Jan's flexible model selection. You can use +local models for conversation and reasoning while offloading actual computation to E2B's sandboxes. This means you +get the privacy and control of local models plus the computational power of cloud infrastructure, without the +complexity of managing Python environments or dependencies locally. + +## Setup + +### Prerequisites + +- Jan with MCP enabled +- E2B API key from [e2b.dev](https://e2b.dev/) +- Node.js installed +- Model with tool calling support + +### Configuration + +1. **Enable MCP**: Go to **Settings** > **MCP Servers**, toggle **Allow All MCP Tool Permission** ON + +![Turn on MCP](../../../../../assets/mcp-on.png) + + + +2. **Get API Key**: Sign up at [e2b.dev](https://e2b.dev/), generate an API key + +![E2B API Key](../../../../../assets/e2b-key.png) + +Add a meaningful name to your key. + +![E2B MCP Server](../../../../../assets/e2b-key1.png) + +3. **Add MCP Server**: Click `+` in MCP Servers section + +Configure: +- **Server Name**: `e2b-server` +- **Command**: `npx` +- **Arguments**: `@e2b/mcp-server` +- **Environment Variables**: + - Key: `E2B_API_KEY` + - Value: `your-api-key` + +![E2B MCP Server](../../../../../assets/e2b-key2.png) + +4. **Verify**: Check server shows as active + + +![E2B MCP Server](../../../../../assets/e2b-key3.png) + +## Pre-installed Libraries + +The sandbox includes these packages by default: + +**Data Analysis & Science:** +- `pandas` (1.5.3) - Data manipulation +- `numpy` (1.26.4) - Numerical computing +- `scipy` (1.12.0) - Scientific computing +- `scikit-learn` (1.4.1) - Machine learning +- `sympy` (1.12) - Symbolic mathematics + +**Visualization:** +- `matplotlib` (3.8.3) - Static plots +- `seaborn` (0.13.2) - Statistical visualization +- `plotly` (5.19.0) - Interactive charts +- `bokeh` (3.3.4) - Web-ready visualizations + +**Data Processing:** +- `requests` (2.26.0) - HTTP requests +- `beautifulsoup4` (4.12.3) - HTML/XML parsing +- `openpyxl` (3.1.2) - Excel files +- `python-docx` (1.1.0) - Word documents + +**Text & NLP:** +- `nltk` (3.8.1) - Natural language processing +- `spacy` (3.7.4) - Advanced NLP +- `textblob` (0.18.0) - Text processing +- `gensim` (4.3.2) - Topic modeling + +**Image & Audio:** +- `opencv-python` (4.9.0) - Computer vision +- `scikit-image` (0.22.0) - Image processing +- `imageio` (2.34.0) - Image I/O +- `librosa` (0.10.1) - Audio analysis + +Additional packages can be installed as needed. + +## Examples + + +For the following examples, we'll use Claude 4 Sonnet but you can use any local or remote +model with tool calling capabilities you'd like. + + + +![E2B MCP Server](../../../../../assets/e2b-key4.png) + +### Basic Data Analysis + +Start small. Open a new chat, confirm that the model has tools enabled and ask it to create a small dataset of 100 students with grades and study hours. + +![Chat and use E2B MCP ](../../../../../assets/e2b-key5.png) + + +``` +Create a small dataset of 100 students with grades and study hours. +Calculate the correlation and create a scatter plot. +``` + +The model will: +1. Generate data with pandas (100 rows) +2. Calculate correlation coefficient +3. Create a matplotlib scatter plot +4. Add trend line + + +![Chat and use E2B MCP ](../../../../../assets/e2b-key6.png) + +![Chat and use E2B MCP ](../../../../../assets/e2b-key7.png) + + + + + +### Statistical Computing + +``` +Run a Monte Carlo simulation with 10,000 iterations to estimate π. +``` + +Expected output: +- Numerical computation with numpy +- Convergence plot showing estimate improvement +- Final π estimate + + +For more intensive simulations, increase iterations gradually and monitor performance. + +### Machine Learning + +``` +Create a simple 2-class dataset with 200 samples. Train a logistic regression +model and visualize the decision boundary. +``` + +The model will: +- Generate synthetic 2D classification data +- Train a single scikit-learn model +- Plot data points and decision boundary + + +### Time Series Analysis + +``` +Generate daily temperature data for one year. Calculate moving averages +and identify seasonal patterns. +``` + +Output includes: +- Line plot of temperature data +- Moving average overlay +- Simple seasonal decomposition + + +### Scaling Up + +Once basic examples work, you can increase complexity: +- Larger datasets (1000+ samples) +- Multiple models for comparison +- Complex visualizations with subplots +- Advanced statistical tests + +The sandbox handles moderate computational loads well. For very large datasets or intensive ML training, consider breaking work into smaller chunks. + +## Chart Generation + +E2B automatically detects and extracts charts from matplotlib code. Charts are returned as base64-encoded images and downloadable files. + +### Static Charts + +```python +import matplotlib.pyplot as plt +import numpy as np + +x = np.linspace(0, 10, 100) +y = np.sin(x) + +plt.figure(figsize=(10, 6)) +plt.plot(x, y) +plt.title('Sine Wave') +plt.xlabel('x') +plt.ylabel('sin(x)') +plt.show() +``` + +E2B captures the plot and makes it available for download. + +### Interactive Charts + +The system extracts chart data for frontend visualization: + +```python +plt.bar(['A', 'B', 'C'], [10, 20, 15]) +plt.title('Sample Bar Chart') +plt.show() +``` + +Returns structured data: +```json +{ + "type": "bar", + "title": "Sample Bar Chart", + "elements": [ + {"label": "A", "value": 10}, + {"label": "B", "value": 20}, + {"label": "C", "value": 15} + ] +} +``` + +Supported chart types: line, bar, scatter, pie, box plots. + +## Available Tools + +- **run_code**: Execute Python code +- **install_package**: Add Python packages +- **create_file**: Save files to sandbox +- **read_file**: Access sandbox files +- **list_files**: Browse sandbox contents + +## Troubleshooting + +**Connection Issues:** +- Verify API key is correct +- Check Node.js installation +- Restart Jan if server won't start + +**Execution Problems:** +- Free sandboxes have 2 cores and 1GB RAM - start with small datasets +- Large computations may time out or run out of memory +- Scale up complexity gradually after testing basic examples +- Some packages may require explicit installation + +**Package Installation:** +- Most data science packages install successfully +- System dependencies may cause failures for some packages +- Try alternative packages if installation fails + + + +## Use Cases + +E2B is useful for: + +- **Academic Research**: Statistical analysis, data visualization, hypothesis testing +- **Data Science**: Exploratory data analysis, model prototyping, result validation +- **Financial Analysis**: Portfolio optimization, risk calculations, market simulations +- **Scientific Computing**: Numerical simulations, mathematical modeling, algorithm testing +- **Prototyping**: Quick algorithm validation, proof-of-concept development + +The sandbox provides isolated execution without local environment setup or dependency management. diff --git a/website/src/content/docs/jan/mcp-examples/search/exa.mdx b/website/src/content/docs/jan/mcp-examples/search/exa.mdx new file mode 100644 index 000000000..19c7a5dde --- /dev/null +++ b/website/src/content/docs/jan/mcp-examples/search/exa.mdx @@ -0,0 +1,224 @@ +--- +title: Exa Search MCP +description: Connect Jan to real-time web search with Exa's AI-powered search engine. +keywords: + [ + Jan, + MCP, + Model Context Protocol, + Exa, + web search, + real-time search, + research, + AI search, + tool calling, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +[Exa MCP](https://docs.exa.ai/examples/exa-mcp) provides real-time web search capabilities for AI +models. Instead of relying on training data, models can access current web content through Exa's search API. + +## Available Tools + +Exa MCP includes eight search functions: +- `web_search_exa`: General web search with content extraction +- `research_paper_search`: Academic papers and research content +- `company_research`: Company analysis and business intelligence +- `crawling`: Extract content from specific URLs +- `competitor_finder`: Find business competitors +- `linkedin_search`: Search LinkedIn profiles and companies +- `wikipedia_search_exa`: Wikipedia content retrieval +- `github_search`: Repository and code search + +## Prerequisites + +- Jan with MCP enabled +- Exa API key from [dashboard.exa.ai](https://dashboard.exa.ai/api-keys) +- Model with tool calling support +- Node.js installed + + + +## Setup + +### Enable MCP + +1. Go to **Settings** > **MCP Servers** +2. Toggle **Allow All MCP Tool Permission** ON + +![MCP settings page with toggle enabled](../../../../../assets/mcp-on.png) + +### Get API Key + +1. Visit [dashboard.exa.ai/api-keys](https://dashboard.exa.ai/api-keys) +2. Create account or sign in +3. Generate API key +4. Save the key + +![Exa API Key](../../../../../assets/exa.png) + +### Configure MCP Server + +Click `+` in MCP Servers section: + +**Configuration:** +- **Server Name**: `exa` +- **Command**: `npx` +- **Arguments**: `-y exa-mcp-server` +- **Environment Variables**: + - Key: `EXA_API_KEY` + - Value: `your-api-key` + +![Exa Jan MCP Server](../../../../../assets/exa1.png) + +### Verify Setup + +Check server status in the MCP Servers list. + +![Exa Jan MCP Server](../../../../../assets/exa2.png) + +### Model Configuration + +Use a compatible model provider: + +- **Jan Nano 32k** +- **Anthropic** +- **OpenAI** +- **OpenRouter** + +![E2B MCP Server](../../../../../assets/e2b-key4.png) + +## Usage + +Start a new chat with a tool-enabled model. Exa tools will appear in the available tools list. + +![Exa Tools Available](../../../../../assets/exa3.png) + +### Example Queries + +**Current Events & Activities:** + +``` +What is happening this week, mid July 2025, in Sydney, Australia? +``` + +![Exa Tools Available](../../../../../assets/exa4.png) + +**Investment Research:** + +``` +Find recent research papers about quantum computing startups that received Series A funding in 2024-2025 +``` + +**Tech Discovery:** + +``` +Find GitHub repositories for WebAssembly runtime engines written in Rust with active development +``` + +**Career Intelligence:** + +``` +Search LinkedIn for AI safety researchers at major tech companies who published papers in the last 6 months +``` + +**Competitive Analysis:** + +``` +Research emerging competitors to OpenAI in the large language model space, focusing on companies founded after 2023 +``` + +**Travel & Local Research:** + +``` +Find authentic local food experiences in Tokyo that aren't in typical tourist guides, mentioned in recent travel blogs +``` + +**Academic Research:** + +``` +Find recent papers about carbon capture technology breakthroughs published in Nature or Science during 2025 +``` + +**Creator Economy:** + +``` +Research successful creators who transitioned from TikTok to longer-form content platforms in 2024-2025 +``` + +**Emerging Tech Trends:** + +``` +Find startups working on brain-computer interfaces that have raised funding in the past 12 months +``` + +**Health & Wellness:** + +``` +Extract information about the latest longevity research findings from Peter Attia's recent podcast episodes +``` + +**Regulatory Intelligence:** + +``` +Find recent AI regulation developments in the EU that could impact US companies, focusing on July 2025 updates +``` + +**Supply Chain Research:** + +``` +Research companies developing sustainable packaging alternatives that have partnerships with major retailers +``` + +## Use Cases + +### Academic Research +Literature reviews, finding recent papers, tracking research trends. + +### Business Intelligence +Competitor analysis, market research, company information gathering. + +### Technical Research +Finding libraries, tools, and code repositories. Documentation research. + +### Content Analysis +Extracting and analyzing content from specific URLs for research. + +### Professional Search +LinkedIn searches for industry connections and expertise. + +## Troubleshooting + +**Connection Issues:** +- Verify API key accuracy +- Check Node.js installation +- Restart Jan +- Make sure you have enough credits in your Exa account + +**Tool Calling Problems:** +- Confirm tool calling is enabled for your model +- Try Jan Nano 32k, Claude, Gemini, GPT-4o and above models +- Check MCP server status + +**Search Quality:** +- Use specific, descriptive queries +- Prefer natural language over keywords + +**API Errors:** +- Verify API key at [dashboard.exa.ai](https://dashboard.exa.ai) +- Check rate limits on your plan +- Regenerate API key if needed + + + +## Next Steps + +Exa MCP enables real-time web search within Jan's privacy-focused environment. Models can access current +information while maintaining local conversation processing. diff --git a/website/src/content/docs/jan/mcp.mdx b/website/src/content/docs/jan/mcp.mdx new file mode 100644 index 000000000..793424084 --- /dev/null +++ b/website/src/content/docs/jan/mcp.mdx @@ -0,0 +1,200 @@ +--- +title: Model Context Protocol +description: Manage your interaction with AI locally. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + threads, + chat history, + thread history, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +```mermaid +graph TD + subgraph "What is MCP?" + You[You using Jan Desktop] + Claude[Jan AI Assistant] + + subgraph "Your Connected Tools" + Files[📁 Your Files
Documents, folders,
text files] + Database[📊 Your Data
Spreadsheets,
databases] + WebServices[🌐 Online Services
GitHub, Slack,
Google Drive] + Custom[🔧 Custom Tools
Special programs
you've added] + end + + subgraph "What Jan Can Do" + Read[Read & Understand
- View your files
- Check your data
- See updates] + Action[Take Actions
- Search for info
- Create content
- Run commands] + Templates[Use Templates
- Common tasks
- Saved prompts
- Workflows] + end + end + + You --> Claude + Claude -->|"Can I see this file?"| Files + Claude -->|"What's in my database?"| Database + Claude -->|"Check my GitHub"| WebServices + Claude -->|"Run this tool"| Custom + + Files --> Read + Database --> Read + WebServices --> Action + Custom --> Templates + + style You fill:transparent + style Claude fill:transparent + style Files fill:transparent + style Database fill:transparent + style WebServices fill:transparent + style Custom fill:transparent + style Read fill:transparent + style Action fill:transparent + style Templates fill:transparent +``` + + +Jan now supports the **Model Context Protocol (MCP)**, an open standard designed to allow language models to +interact with external tools and data sources. + +MCPs act as a common interface, standardizing the way an AI model can interact with external tools and data +sources. This enables a model to connect to any MCP-compliant tool without requiring custom +integration work. The way this works is via clients and servers. Clients are connected to an AI model and a host +where a user will describe the task needed to be done. These applications hosting client will want to connect +to different data sources to accomplish a task, for example, notion, google sheets, or even custom APIs. These +applications will be connected to a server with prompts, tools, and data sources which will be used to complete +the task. + +Jan is an MCP host that allows you to download different clients and servers and use them to accomplish a task. + +This document outlines the benefits, risks, and implementation of MCPs within Jan. + +## Core Benefits of MCP + +Integrating MCP provides a structured way to extend the capabilities of the models you use in Jan. Here are the three + +* **Standardization:** MCP aims to solve the "M x N" integration problem, where every model (M) needs a +unique connector for every tool (N). By adapting to a single standard, any compliant model can interface with any compliant tool. +* **Extensibility:** This allows you to augment your models with new abilities. For instance, an AI can be granted +access to search your local codebase, query a database, or interact with web APIs, all through the same protocol. +* **Flexibility:** Because the interface is standardized, you can swap out models or tools with minimal friction, +making your workflows more modular and adaptable over time. + + + + + +## Considerations and Risks + +While powerful, MCP is an evolving standard, and its use requires careful consideration of the following points: + +* **Security:** Granting a model access to external tools is a significant security consideration. A compromised +tool or a malicious prompt could potentially lead to unintended actions or data exposure. Jan's implementation +focuses on user-managed permissions to mitigate this risk, meaning, you have to turn on the permission for each +tool individually. +* **Standard Maturity:** As a relatively new protocol, best practices or sensible defaults are still being +established. Users should be aware of potential issues like prompt injection, where an input could be crafted to +misuse a tool's capabilities. +* **Resource Management:** Active MCP connections may consume a portion of a model's context window, which could +affect performance (i.e., the more tools the model and the larger the context of the conversation has the longer +you will need to wait for a response). Efficient management of tools and their outputs is important. + + +## Configure and Use MCPs within Jan + +To illustrate how MCPs can be used within Jan, we will walk through an example using the [Browser MCP](https://browsermcp.io/). + +Before we begin, you will need to enable experimental features at `General` > `Advanced`. Next, go to `Settings` > `MCP Servers`, and toggle +the `Allow All MCP Tool Permission` switch ON. + +![Turn on the MCP Host](../../../assets/mcp-on.png) + +Please note that you will also need to have **NodeJS** and/or **Python** installed on your machine. In case you don't +have either, you can download them from the official websites at the links below: +- [Node.js](https://nodejs.org/) +- [Python](https://www.python.org/) + + +### Browser MCP + +- Click on the `+` sign on the upper right-hand corner of the MCP box. + +![Add New Server](../../../assets/mcp-setup-1.png) + +- Enter the following details to configure the BrowserMCP: + - **Server Name**: `browsermcp` + - **Command**: `npx` + - **Arguments**: `@browsermcp/mcp` + - **Environment Variables**: You can leave this field empty. + +![Configure BrowserMCP](../../../assets/mcp-setup-2.png) + +- Check that the server has been activated successfully. + +![Server Confirmation](../../../assets/mcp-setup-3.png) + +- Open your favorite chrome-based browser (e.g., Google Chrome, Brave, Vivaldi, Microsoft Edge, etc...) and navigate to the +[Browser MCP Extension Page](https://chromewebstore.google.com/detail/browser-mcp-automate-your/bjfgambnhccakkhmkepdoekmckoijdlc). + +![Browser MCP Extension](../../../assets/mcp-setup-6.png) + +- Make sure to enable the extension to run on private windows. Since Browser Use will have access to all sites you've +already logged into in your regular browser session, it is best to give it a clean slate to start from. + +![Browser MCP Extension](../../../assets/mcp-setup-7.png) + +- Enable the extension to run on private windows by clicking on it and Connecting to the Browser MCP server. + +![Browser MCP Extension](../../../assets/mcp-setup-8.png) + +- Go back to Jan and pick a model with good tool use capabilities, for example, Claude 3.7 and 4 Sonnet, or Claude 4 Opus, +and make sure to enable tool calling via the UI by going to **Model Providers > Anthropic** and, after you have entered your +API key, enable tool from the **+** button. + +![Browser MCP Extension](../../../assets/mcp-setup-9.png) + +You can check and see if this was accurate below. + +![Browser MCP Extension](../../../assets/mcp-setup-10.png) + + +## Troubleshooting + +- The MCP server won't connect even though I've already added it to my list of MCP Servers? + - Make sure you have NodeJS and Python installed + - Make sure you typed the commands correctly in the MCP Server form + - Make sure the model you are using has tools enabled + - Restart Jan +- The open source model I picked won't use the MCPs I enabled. + - Make sure the model you are using has tools enabled + - Lots of open source models are not designed to use tools or simply don't work well with them, so you may need to try a different model + - The model you have selected might be good at tool calling but it is possible that it does not support images, effectively making it unsuitable for some tools that take screenshots of a website like the Browser MCP + +## Future Potential + +This integration is the foundation for creating more capable and context-aware AI assistants within Jan. The +long-term goal is to enable more sophisticated workflows that make use of your local environment securely as +well as your favorite tools. + +For example, an AI could cross-reference information between a local document and a remote API, or use a +local script toanalyze data and then summarize the findings, all orchestrated through Jan's interface. As +the MCP ecosystem grows, so will the potential applications within Jan. diff --git a/website/src/content/docs/jan/privacy.mdx b/website/src/content/docs/jan/privacy.mdx new file mode 100644 index 000000000..3e0d8301e --- /dev/null +++ b/website/src/content/docs/jan/privacy.mdx @@ -0,0 +1,140 @@ +--- +title: Jan Privacy Policy +description: Jan's data collection practices, privacy measures, and your rights. Learn how we protect your data and maintain transparency. +keywords: + [ + Jan AI, + Jan, + local AI, + private AI, + conversational AI, + no-subscription fee, + large language model, + about Jan, + desktop application, + privacy policy, + data protection, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +
+ Last Updated: January 16, 2025 +
+ +Jan is your AI. Here's what we do with data. + + + +## 1. Data Collection and Consent + +### No Data Collection Until You Allow It + +Menlo Research Pte Ltd (the "Company") doesn't collect anything until you explicitly allow tracking. + +### Your Choice + +You'll choose tracking preferences at first launch. Change them anytime in Settings or Privacy Settings. + +### Legal Basis (GDPR) + +Under EU GDPR Article 6(1)(a), we process data based on your explicit consent: + +- Clear consent required before any data collection +- Withdraw consent anytime through Settings +- Withdrawal doesn't affect previous lawful processing +- Processing stops immediately upon withdrawal + +## 2. What We Never Collect + +Jan will **never** access your chats, settings, or model choices without permission: + +- **Chat History**: Your conversations stay private +- **Chat Settings**: Your personalized settings remain with you +- **Language Models**: We don't track which models you use +- **Files**: No scanning, uploading, or viewing +- **Personal Identity**: No personally identifiable information +- **Prompts**: Your prompts and templates aren't monitored +- **Conversation Metrics**: No context or conversation length tracking +- **Model Usage**: Specific models and types aren't tracked + +## 3. Data We Track (With Permission) + +We track basic app usage to improve Jan. + +### Product Analytics + +When allowed, we collect: + +- **Active Users**: Daily active users to gauge engagement +- **Retention**: User retention metrics to ensure ongoing value + +Everything's tied to a random ID - not your personal information. Your chats remain private. + + + +## 4. Cloud Model Use + +Cloud models (like GPT, Claude) need to see your messages to work. That's between you and the cloud provider - Jan facilitates the connection. + +- **API Processing**: Cloud providers process your messages directly +- **Jan Access**: We don't access or store these messages +- **Local Models**: Keep everything on your device with no external access + +## 5. Data Storage and Security + +### Analytics Provider + +[PostHog EU](https://posthog.com/eu) handles our analytics. All EU-based, GDPR-compliant data processing. + +### Security Measures + +- **Encryption**: All transfers use TLS encryption +- **EU Processing**: Data processed within European Union +- **Secure Storage**: PostHog manages data securely + +Details in their [GDPR docs](https://posthog.com/docs/privacy/gdpr-compliance). + +## 6. Data Retention + +- **Retention Period**: Analytics data kept for up to 12 months +- **Deletion Requests**: Request deletion by emailing hello@jan.ai +- **Legal Requirements**: May retain longer if legally required + +## 7. Your Rights + +- **Access and Control**: Modify tracking preferences anytime in Settings +- **Data Requests**: Contact hello@jan.ai for any data-related requests +- **Withdrawal**: Stop data collection immediately through Settings + +## 8. Children's Privacy + +Services not targeted at children under 13. We don't knowingly collect data from children under 13. If we become aware of such collection, we'll delete the information. + +## 9. Cookies and Tracking + +Our website uses cookies to: + +- Enhance user experience +- Measure website traffic and usage + +Most browsers let you manage cookies and adjust privacy preferences. See our Cookie Policy for details. + +## 10. Policy Changes + +We may update this policy to reflect practice or legal changes. We'll notify you of significant changes via: + +- App notifications +- Website announcements +- Email (if provided) + +Continued use means you accept the changes. + +## 11. Contact Us + +Questions about privacy or data practices? Contact hello@menlo.ai. diff --git a/website/src/content/docs/jan/remote-models/anthropic.mdx b/website/src/content/docs/jan/remote-models/anthropic.mdx new file mode 100644 index 000000000..595590a2c --- /dev/null +++ b/website/src/content/docs/jan/remote-models/anthropic.mdx @@ -0,0 +1,77 @@ +--- +title: Anthropic +description: Learn how to integrate Anthropic with Jan for enhanced functionality. +keywords: + [ + Anthropic API, + Jan, + Jan AI, + ChatGPT alternative, + conversational AI, + large language model, + integration, + Anthropic integration, + API integration + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Jan supports all of [Anthropic's models](https://anthropic.com/) via API integration, allowing +you to chat with Claude's latest Opus, Sonnet and Haiku models. + +## Integrate Anthropic API with Jan + + +### Step 1: Get Your API Key + +1. Visit [Anthropic Console](https://console.anthropic.com/settings/keys) and sign in +2. Create & copy a new API key or copy your existing one + + + +### Step 2: Configure Jan + +1. Navigate to the **Settings** page +2. Under **Model Providers**, select **Anthropic** +3. Insert your **API Key** + +![Anthropic](../../../../assets/model-management-06.png) + +### Step 3: Start Using Anthropic's Models + +1. In any existing **Chat** or create a new one +2. Select an Anthropic model from **model selector** +3. Start chatting + + +## Available Anthropic Models + +Jan automatically includes Anthropic's available models. In case you want to use a specific Anthropic model +that you cannot find in **Jan**, follow instructions in [Add Cloud Models](/docs/manage-models#add-models-1): +- See list of available models in [Anthropic Models](https://docs.anthropic.com/claude/docs/models-overview). +- The `id` property must match the model name in the list. For example, `claude-opus-4@20250514`, `claude-sonnet-4@20250514`, or `claude-3-5-haiku@20241022`. + +## Troubleshooting + +Common issues and solutions: + +**1. API Key Issues** +- Verify your API key is correct and not expired +- Check if you have billing set up on your Anthropic account +- Ensure you have access to the model you're trying to use + +**2. Connection Problems** +- Check your internet connection +- Verify Anthropic's system status +- Look for error messages in [Jan's logs](/docs/troubleshooting#how-to-get-error-logs) + +**3. Model Unavailable** +- Confirm your API key has access to the model +- Check if you're using the correct model ID +- Verify your Anthropic account has the necessary permissions + +Need more help? Join our [Discord community](https://discord.gg/FTk2MvZwJH) or check the +[Anthropic's documentation](https://docs.anthropic.com/claude/docs). diff --git a/website/src/content/docs/jan/remote-models/cohere.mdx b/website/src/content/docs/jan/remote-models/cohere.mdx new file mode 100644 index 000000000..91ba75b10 --- /dev/null +++ b/website/src/content/docs/jan/remote-models/cohere.mdx @@ -0,0 +1,77 @@ +--- +title: Cohere +description: Learn how to integrate Cohere with Jan for enhanced functionality. +keywords: + [ + Cohere API, + Jan, + Jan AI, + ChatGPT alternative, + conversational AI, + large language model, + integration, + Cohere integration, + API integration + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Jan supports [Cohere](https://cohere.com/) API integration, allowing you to use Cohere's +models (Command, Command-R and more) through Jan's interface. + +## Integrate Cohere API with Jan + + +### Step 1: Get Your API Key + +1. Visit [Cohere Dashboard](https://dashboard.cohere.com/api-keys) and sign in +2. Create a new API key and/or copy your existing one + + + +### Step 2: Configure Jan + +1. Navigate to the **Settings** page +2. Under **Model Providers**, select **Cohere** +3. Insert your **API Key** + +![Cohere](../../../../assets/cohere.png) + + +### Step 3: Start Using Cohere's Models + +1. Jump into any existing **Chat** or create a new one +2. Select a Cohere model from **model selector** options +3. Start chatting + + +## Available Cohere Models + +Jan automatically includes Cohere's available models. In case you want to use a specific +Cohere model that you cannot find in **Jan**, follow instructions in [Add Cloud Models](/docs/manage-models): +- See list of available models in [Cohere Documentation](https://docs.cohere.com/v2/docs/models). +- The `id` property must match the model name in the list. For example, `command-nightly` or `command-light`. + +## Troubleshooting + +Common issues and solutions: + +**1. API Key Issues** +- Verify your API key is correct and not expired +- Check if you have billing set up on your Cohere account +- Ensure you have access to the model you're trying to use + +**2. Connection Problems** +- Check your internet connection +- Verify Cohere's [system status](https://status.cohere.com/) +- Look for error messages in [Jan's logs](/docs/troubleshooting#how-to-get-error-logs) + +**3. Model Unavailable** +- Confirm your API key has access to the model +- Check if you're using the correct model ID +- Verify your Cohere account has the necessary permissions + +Need more help? Join our [Discord community](https://discord.gg/FTk2MvZwJH) or check the [Cohere documentation](https://docs.cohere.com). diff --git a/website/src/content/docs/jan/remote-models/google.mdx b/website/src/content/docs/jan/remote-models/google.mdx new file mode 100644 index 000000000..41aa7ed1c --- /dev/null +++ b/website/src/content/docs/jan/remote-models/google.mdx @@ -0,0 +1,75 @@ +--- +title: Google +description: Learn how to integrate Google with Jan for enhanced functionality. +keywords: + [ + Anthropic API, + Jan, + Jan AI, + ChatGPT alternative, + conversational AI, + large language model, + integration, + Anthropic integration, + API integration + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Jan supports [Google](https://ai.google/get-started/our-models/) API integration, allowing you to use Google models (like Gemini series) through Jan's interface. + +## Integrate Google API with Jan + +### Step 1: Get Your API Key + +1. Visit [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in +2. Create & copy a new API key or copy your existing one + + + +### Step 2: Configure Jan + +1. Navigate to the **Settings** page +2. Under **Model Providers**, select **Gemini** +3. Insert your **API Key** + +![Google](../../../../assets/google.png) + + +### Step 3: Start Using Google's Models + +1. Got to any existing **Chat** or create a new one +2. Select an Gemini model from **model selector** +3. Start chatting + + +## Available Google Models + +Jan automatically includes Google's available models like Gemini series. In case you want to use a specific +Gemini model that you cannot find in **Jan**, follow instructions in [Add Cloud Models](/docs/manage-models#add-models-1): +- See list of available models in [Google Models](https://ai.google.dev/gemini-api/docs/models/gemini). +- The `id` property must match the model name in the list. For example, `gemini-1.5-pro` or `gemini-2.0-flash-lite-preview`. + +## Troubleshooting + +Common issues and solutions: + +**1. API Key Issues** +- Verify your API key is correct and not expired +- Check if you have billing set up on your Google account +- Ensure you have access to the model you're trying to use + +**2. Connection Problems** +- Check your internet connection +- Verify [Gemini's system status](https://www.google.com/appsstatus/dashboard/) +- Look for error messages in [Jan's logs](/docs/troubleshooting#how-to-get-error-logs) + +**3. Model Unavailable** +- Confirm your API key has access to the model +- Check if you're using the correct model ID +- Verify your Google account has the necessary permissions + +Need more help? Join our [Discord community](https://discord.gg/FTk2MvZwJH). diff --git a/website/src/content/docs/jan/remote-models/groq.mdx b/website/src/content/docs/jan/remote-models/groq.mdx new file mode 100644 index 000000000..cd67a63c3 --- /dev/null +++ b/website/src/content/docs/jan/remote-models/groq.mdx @@ -0,0 +1,74 @@ +--- +title: Groq API +description: Learn how to integrate Groq API with Jan for enhanced functionality. +keywords: + [ + Groq API, + Jan, + Jan AI, + ChatGPT alternative, + conversational AI, + large language model, + integration, + Groq integration, + API integration + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Jan supports [Groq](https://groq.com/) API integration, allowing you to use Groq's high-performance LLM models (LLaMA 2, Mixtral and more) through Jan's interface. + +## Integrate Groq API with Jan + +### Step 1: Get Your API Key + +1. Visit [Groq Console](https://console.groq.com/keys) and sign in +2. Create & copy a new API key or copy your existing one + + + +### Step 2: Configure Jan + +1. Navigate to the **Settings** page +2. Under **Model Providers**, select **Groq** +3. Insert your **API Key** + +![Groq](../../../../assets/groq.png) + + +### Step 3: Start Using Groq's Models + +1. Jump into any existing **Chat** or create a new one +2. Select a Groq model from **model selector** +3. Start chatting + +## Available Models Through Groq + +Jan automatically includes Groq's available models. In case you want to use a specific Groq model that +you cannot find in **Jan**, follow the instructions in the [Add Cloud Models](/docs/manage-models#add-models-1): +- See list of available models in [Groq Documentation](https://console.groq.com/docs/models). +- The `id` property must match the model name in the list. For example, if you want to use Llama3.3 70B, you must set the `id` property to `llama-3.3-70b-versatile`. + +## Troubleshooting + +Common issues and solutions: + +**1. API Key Issues** +- Verify your API key is correct and not expired +- Check if you have billing set up on your Groq account +- Ensure you have access to the model you're trying to use + +**2. Connection Problems** +- Check your internet connection +- Verify Groq's system status +- Look for error messages in [Jan's logs](/docs/troubleshooting#how-to-get-error-logs) + +**3. Model Unavailable** +- Confirm your API key has access to the model +- Check if you're using the correct model ID +- Verify your Groq account has the necessary permissions + +Need more help? Join our [Discord community](https://discord.gg/FTk2MvZwJH) or check the [Groq documentation](https://console.groq.com/docs). diff --git a/website/src/content/docs/jan/remote-models/mistralai.mdx b/website/src/content/docs/jan/remote-models/mistralai.mdx new file mode 100644 index 000000000..f2a6bbaab --- /dev/null +++ b/website/src/content/docs/jan/remote-models/mistralai.mdx @@ -0,0 +1,77 @@ +--- +title: Mistral AI API +description: A step-by-step guide on integrating Jan with Mistral AI. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + Mistral integration, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Jan supports all models available via the [Mistral AI](https://mistral.ai/) API, allowing you to use Mistral's +powerful models (Mistral Large, Mistral Medium, Mistral Small and more) through Jan's interface. + +## Integrate Mistral AI with Jan + +### Step 1: Get Your API Key + +1. Visit the [Mistral AI Platform](https://console.mistral.ai/api-keys/) and sign in +2. Create & copy a new API key or copy your existing one + + + +### Step 2: Configure Jan + +1. Navigate to the **Settings** page +2. Under **Model Providers**, select **Mistral AI** +3. Insert your **API Key** + +![Mistral](../../../../assets/mistralai.png) + +### Step 3: Start Using Mistral's Models + +1. Open any existing **Chat** or create a new one +2. Select a Mistral model from **model selector** +3. Start chatting + + +## Available Mistral Models + +Jan automatically includes Mistral's available models. In case you want to use a specific Mistral model +that you cannot find in **Jan**, follow the instructions in [Add Cloud Models](/docs/manage-models#add-models-1): +- See list of available models in [Mistral AI Documentation](https://docs.mistral.ai/platform/endpoints). +- The `id` property must match the model name in the list. For example, if you want to use +Mistral Large, you must set the `id` property to `mistral-large-latest` + +## Troubleshooting + +Common issues and solutions: + +**1. API Key Issues** +- Verify your API key is correct and not expired +- Check if you have billing set up on your Mistral AI account +- Ensure you have access to the model you're trying to use + +**2. Connection Problems** +- Check your internet connection +- Verify Mistral AI's system status +- Look for error messages in [Jan's logs](/docs/troubleshooting#how-to-get-error-logs) + +**3. Model Unavailable** +- Confirm your API key has access to the model +- Check if you're using the correct model ID +- Verify your Mistral AI account has the necessary permissions + +Need more help? Join our [Discord community](https://discord.gg/FTk2MvZwJH) or check the [Mistral AI documentation](https://docs.mistral.ai/). diff --git a/website/src/content/docs/jan/remote-models/openai.mdx b/website/src/content/docs/jan/remote-models/openai.mdx new file mode 100644 index 000000000..f1eb33ba5 --- /dev/null +++ b/website/src/content/docs/jan/remote-models/openai.mdx @@ -0,0 +1,81 @@ +--- +title: OpenAI API +description: A step-by-step guide on integrating Jan with Azure OpenAI. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + integration, + Azure OpenAI Service, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +Jan supports most [OpenAI](https://openai.com/) as well as the many OpenAI-compatible APIs out there, +allowing you to use all models from OpenAI (GPT-4o, o3 and even those from Together AI, DeepSeek, Fireworks +and more) through Jan's interface. + +## Integrate OpenAI API with Jan + +### Step 1: Get Your API Key +1. Visit the [OpenAI Platform](https://platform.openai.com/api-keys) and sign in +2. Create & copy a new API key or copy your existing one + + + +### Step 2: Configure Jan + +1. Navigate to the **Settings** page +2. Under Remote Engines, select OpenAI +3. Insert your API Key + +![OpenAI](../../../../assets/openai.png) + + +### Step 3: Start Using OpenAI's Models + +In any existing Threads or create a new one +Select an OpenAI model from model selector +Start chatting + + +## Available OpenAI Models + +Jan automatically includes popular OpenAI models. In case you want to use a specific model that you +cannot find in Jan, follow instructions in [Add Cloud Models](/docs/manage-models#add-models-1): +- See list of available models in [OpenAI Platform](https://platform.openai.com/docs/models/overview). +- The id property must match the model name in the list. For example, if you want to use the +[GPT-4.5](https://platform.openai.com/docs/models/), you must set the id property +to respective one. + +## Troubleshooting + +Common issues and solutions: + +1. API Key Issues +- Verify your API key is correct and not expired +- Check if you have billing set up on your OpenAI account +- Ensure you have access to the model you're trying to use + +2. Connection Problems +- Check your internet connection +- Verify OpenAI's [system status](https://status.openai.com) +- Look for error messages in [Jan's logs](/docs/troubleshooting#how-to-get-error-logs) + +3. Model Unavailable +- Confirm your API key has access to the model +- Check if you're using the correct model ID +- Verify your OpenAI account has the necessary permissions + +Need more help? Join our [Discord community](https://discord.gg/FTk2MvZwJH) or check the +[OpenAI documentation](https://platform.openai.com/docs). diff --git a/website/src/content/docs/jan/remote-models/openrouter.mdx b/website/src/content/docs/jan/remote-models/openrouter.mdx new file mode 100644 index 000000000..614bc58e6 --- /dev/null +++ b/website/src/content/docs/jan/remote-models/openrouter.mdx @@ -0,0 +1,90 @@ +--- +title: OpenRouter +description: A step-by-step guide on integrating Jan with OpenRouter. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + OpenRouter integration, + OpenRouter, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +## Integrate OpenRouter with Jan + +[OpenRouter](https://openrouter.ai/) is a tool that gathers AI model APIs and provides access to all +via a unified API. Developers can use the API to interact with LLMs, generative image models, and +even models that generate 3D objects, all with a competitive pricing. + +Jan supports the OpenRouter API, allowing you to use models from various providers (Anthropic, Google, +Meta and more) and helping you avoid having to get an API from all of your favorite ones. + +OpenRouter even offers a few free models! 🙌 + +## Integrate OpenRouter with Jan + +### Step 1: Get Your API Key +1. Visit [OpenRouter](https://openrouter.ai/keys) and sign in +2. Create & copy a new API key or copy your existing one + + + +### Step 2: Configure Jan + +1. Navigate to the **Settings** page +2. Under **Model Providers**, select **OpenRouter** +3. Insert your **API Key** + +![OpenRouter](../../../../assets/openrouter.png) + +### Step 3: Start Using OpenRouter Models + +1. Pick any existing **Chat** or create a new one +2. Select any model from **model selector** under OpenRouter +3. Start chatting + +## Available Models Through OpenRouter + +Jan automatically use your default OpenRouter's available models. For custom configurations: + +**Model Field Settings:** +- Leave empty to use your account's default model +- Specify a model using the format: `organization/model-name` +- Available options can be found in [OpenRouter's Model Reference](https://openrouter.ai/models) + +**Examples of Model IDs:** +- Claude 4 Opus: `anthropic/claude-opus-4` +- Google Gemini 2.5 Pro: `google/gemini-2.5-pro-preview` +- DeepSeek R1 Latest: `deepseek/deepseek-r1-0528` + +## Troubleshooting + +Common issues and solutions: + +**1. API Key Issues** +- Verify your API key is correct and not expired +- Check if you have sufficient credits in your OpenRouter account +- Ensure you have access to the model you're trying to use + +**2. Connection Problems** +- Check your internet connection +- Verify OpenRouter's [system status](https://status.openrouter.ai) +- Look for error messages in [Jan's logs](/docs/troubleshooting#how-to-get-error-logs) + +**3. Model Unavailable** +- Confirm the model is currently available on OpenRouter +- Check if you're using the correct model ID format +- Verify the model provider is currently operational + +Need more help? Join our [Discord community](https://discord.gg/FTk2MvZwJH) or check the [OpenRouter documentation](https://openrouter.ai/docs). diff --git a/website/src/content/docs/jan/settings.mdx b/website/src/content/docs/jan/settings.mdx new file mode 100644 index 000000000..baba03570 --- /dev/null +++ b/website/src/content/docs/jan/settings.mdx @@ -0,0 +1,215 @@ +--- +title: Settings +description: Explore how to adjust Jan's settings to suit your specific requirements. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + Advanced Settings, + HTTPS Proxy, + SSL, + settings, + Jan settings, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +To access the **Settings**, click icon in the bottom left corner of Jan. + +## Model Management + +Manage your installed AI models in **Settings** > **Model Providers**: + +### Import Models +- **From Hugging Face:** + - Enter a model's Hugging Face ID (e.g., `org/model_name_or_id`) in the Hub's search bar. + - **Note:** Some models require a Hugging Face Access Token. Enter your token in **Settings > Model Providers > Hugging Face**. +- **From Local Files:** + - Click **Import Model** and select your GGUF files. + +### Remove Models + +- Click the trash icon next to the **Start** button and then click **Delete**. + +### Start Models + +1. Open a new chat and select the model you want to start. +2. Click the **Start** button on the **Settings > Model Providers** + +### Hugging Face Access Token +To download models from Hugging Face that require authentication, for example, like the llama models from meta: +1. Get your token from [Hugging Face Tokens](https://huggingface.co/docs/hub/en/security-tokens) +2. Enter it in **Settings > Model Providers > Hugging Face**. + +## Model Settings (Gear Icon) + +![Model Settings](../../../assets/trouble-shooting-04.png) + +Click the gear icon next to a model to configure advanced settings: +- **Context Size**: Maximum prompt context length +- **GPU Layers**: Number of model layers to offload to GPU. If you have an NVIDIA GPU and notice that your model won't fully load in it, you can reduce this value to load smaller parts of the model and try again. +- **Temperature**: Controls randomness (higher = more random) +- **Top K**: Limits token selection to K most likely next tokens (smaller K = more focused responses) +- **Top P**: Limits token selection to tokens comprising P probability mass (smaller P = more focused responses) +- **Min P**: Sets a minimum threshold for words the model can select (higher values filter out less likely words) +- **Repeat Last N**: Determines how many recent words the model checks to avoid repetition +- **Repeat Penalty**: Controls how strongly the model avoids repeating phrases (higher values reduce repetition) +- **Presence Penalty**: Discourages reusing words that already appeared in the text (helps with variety) + +_See [Model Parameters](/docs/model-parameters) for a more detailed explanation._ + + +## Hardware + +Monitor and manage system resources at **Settings > Hardware**: +- **CPU, RAM, GPU**: View usage and specs +- **GPU Acceleration**: Enable/disable and configure GPU settings + +![Hardware](../../../assets/hardware.png) + + +## Preferences + +### Appearance & Theme + +Control the visual theme of Jan's interface with any color combo you'd like. You can also control the color use in the code blocks. + +![Appearance](../../../assets/settings-04.png) + +### Spell Check + +Jan includes a built-in spell check feature to help catch typing errors in your messages. + +![Spell Check](../../../assets/settings-06.png) + +## Privacy + +At **Settings** > **Privacy**, you can control anonymous analytics in Jan: + +### Analytics +Jan is built with privacy at its core. By default, no data is collected. Everything stays local on your device. +You can help improve Jan by sharing anonymous usage data: +1. Toggle on **Analytics** to share anonymous data +2. You can change this setting at any time + + + +![Analytics](../../../assets/settings-07.png) + +### Log Management + +**1. View Logs** +- Logs are stored at: + - App log: `~/Library/Application\ Support/jan/data/logs/app.log` + - Cortex log: `~/Library/Application\ Support/jan/data/logs/cortex.log` +- To open logs from Jan's interface: at **Logs**, click icon to open App Logs & Cortex Logs: + +![View Logs](../../../assets/settings-08.png) + +**2. Clear Logs** + +Jan retains your logs for only **24 hours**. To remove all logs from Jan, at **Clear Logs**, click the **Clear** button: + + + +![Clear Logs](../../../assets/settings-09.png) + + +### Jan Data Folder +Jan stores your data locally in your own filesystem in a universal file format. See detailed [Jan Folder Structure](./data-folder#folder-structure). + +**1. Open Jan Data Folder** + +At **Jan Data Folder**, click icon to open Jan application's folder: + +![Open Jan Data Folder](../../../assets/settings-11.png) + +**2. Edit Jan Data Folder** + +1. At **Jan Data Folder** icon to edit Jan application's folder +2. Choose a new directory & click **Select**, make sure the new folder is empty +3. Confirmation pop-up shows up: + +> Are you sure you want to relocate Jan Data Folder to `new directory`? +Jan Data Folder will be duplicated into the new location while the original folder remains intact. +An app restart will be required afterward. + +4. Click **Yes, Proceed** + +![Edit Jan Data Folder](../../../assets/settings-12.png) + +### HTTPs Proxy + +HTTPS Proxy encrypts data between your browser and the internet, making it hard for outsiders to intercept +or read. It also helps you maintain your privacy and security while bypassing regional restrictions on the internet. + + + +1. **Enable** the proxy toggle +2. Enter your proxy server details in the following format: + +``` +http://:@: +``` +Where: +- ``: Your proxy username (if authentication is required) +- ``: Your proxy password (if authentication is required) +- ``: Your proxy server's domain name or IP address +- ``: The port number for the proxy server + +![HTTPs Proxy](../../../assets/settings-13.png) + +**Ignore SSL Certificates** + +This setting allows Jan to accept self-signed or unverified SSL certificates. This may be necessary when: +- Working with corporate proxies using internal certificates +- Testing in development environments +- Connecting through specialized network security setups + + + +![Ignore SSL Certificates](../../../assets/settings-14.png) + +### Factory Reset + +Reset to Factory Settings restores Jan to its initial state by erasing all user data, including downloaded +models and chat history. This action is irreversible and should only be used as a last resort when experiencing +serious application issues. + + + +Only use factory reset if: +- The application is corrupted +- You're experiencing persistent technical issues that other solutions haven't fixed +- You want to completely start fresh with a clean installation + +To begin the process: +1. At **Reset to Factory Settings**, click **Reset** button + +![Jan Quick Ask](../../../assets/settings-17.png) + +2. In the confirmation dialog: +- Type the word **RESET** to confirm +- Optionally check **Keep the current app data location** to maintain the same data folder +- Click **Reset Now** +3. App restart is required upon confirmation +![Jan Quick Ask](../../../assets/settings-18.png) diff --git a/website/src/content/docs/jan/threads.mdx b/website/src/content/docs/jan/threads.mdx new file mode 100644 index 000000000..d7e2a2bd5 --- /dev/null +++ b/website/src/content/docs/jan/threads.mdx @@ -0,0 +1,142 @@ +--- +title: Start Chatting +description: Download models and manage your conversations with AI models locally. +keywords: + [ + Jan, + local AI, + LLM, + chat, + threads, + models, + download, + installation, + conversations, + ] +--- + +import { Aside } from '@astrojs/starlight/components'; + +
    + +### Step 1: Install Jan + +1. [Download Jan](/download) +2. Install the app ([Mac](/docs/desktop/mac), [Windows](/docs/desktop/windows), [Linux](/docs/desktop/linux)) +3. Launch Jan + +### Step 2: Download a Model + +Jan requires a model to chat. Download one from the Hub: + +1. Go to the **Hub Tab** +2. Browse available models (must be GGUF format) +3. Select one matching your hardware specs +4. Click **Download** + +![Download a Model](../../../assets/model-management-01.png) + + + +**HuggingFace models:** Some require an access token. Add yours in **Settings > Model Providers > Llama.cpp > Hugging Face Access Token**. + +![Add HF Token](../../../assets/hf_token.png) + +### Step 3: Enable GPU Acceleration (Optional) + +For Windows/Linux with compatible graphics cards: + +1. Go to **Settings** > **Hardware** +2. Toggle **GPUs** to ON + +![Turn on GPU acceleration](../../../assets/gpu_accl.png) + + + +### Step 4: Start Chatting + +1. Click the **New Chat** icon +2. Select your model in the input field dropdown +3. Type your message and start chatting + +![Create New Thread](../../../assets/threads-new-chat-updated.png) + +
+ +## Managing Conversations + +Jan organizes conversations into threads for easy tracking and revisiting. + +### View Chat History + +- **Left sidebar** shows all conversations +- Click any chat to open the full conversation +- **Favorites**: Pin important threads for quick access +- **Recents**: Access recently used threads + +![Favorites and Recents](../../../assets/threads-favorites-and-recents-updated.png) + +### Edit Chat Titles + +1. Hover over a conversation in the sidebar +2. Click the **three dots** icon +3. Click **Rename** +4. Enter new title and save + +![Context Menu](../../../assets/threads-context-menu-updated.png) + +### Delete Threads + + + +**Single thread:** +1. Hover over thread in sidebar +2. Click the **three dots** icon +3. Click **Delete** + +**All threads:** +1. Hover over `Recents` category +2. Click the **three dots** icon +3. Select **Delete All** + +## Advanced Features + +### Custom Assistant Instructions + +Customize how models respond: + +1. Use the assistant dropdown in the input field +2. Or go to the **Assistant tab** to create custom instructions +3. Instructions work across all models + +![Assistant Instruction](../../../assets/assistant-dropdown.png) + +![Add an Assistant Instruction](../../../assets/assistant-edit-dialog.png) + +### Model Parameters + +Fine-tune model behavior: +- Click the **Gear icon** next to your model +- Adjust parameters in **Assistant Settings** +- Switch models via the **model selector** + +![Chat with a Model](../../../assets/model-parameters.png) + +### Connect Cloud Models (Optional) + +Connect to OpenAI, Anthropic, Groq, Mistral, and others: + +1. Open any thread +2. Select a cloud model from the dropdown +3. Click the **Gear icon** beside the provider +4. Add your API key (ensure sufficient credits) + +![Connect Remote APIs](../../../assets/quick-start-03.png) + +For detailed setup, see [Remote APIs](/docs/remote-models/openai). diff --git a/website/src/content/docs/jan/troubleshooting.mdx b/website/src/content/docs/jan/troubleshooting.mdx new file mode 100644 index 000000000..d2d417ad0 --- /dev/null +++ b/website/src/content/docs/jan/troubleshooting.mdx @@ -0,0 +1,344 @@ +--- +title: Troubleshooting +description: Fix common issues and optimize Jan's performance with this comprehensive guide. +keywords: + [ + Jan, + troubleshooting, + error fixes, + performance issues, + GPU problems, + installation issues, + common errors, + local AI, + technical support, + ] +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import { Aside } from '@astrojs/starlight/components'; +import { Steps } from '@astrojs/starlight/components'; + +## Getting Help: Error Logs + +When Jan isn't working properly, error logs help identify the problem. Here's how to get them: + +### Quick Access to Logs + +**In Jan Interface:** +1. Look for **System Monitor** in the footer +2. Click **App Log** + +![App log](../../../assets/trouble-shooting-02.png) + +**Via Terminal:** + + + + +**Application Logs:** +```bash +tail -n 50 ~/Library/Application\ Support/Jan/data/logs/app.log +``` + +**Server Logs:** +```bash +tail -n 50 ~/Library/Application\ Support/Jan/data/logs/cortex.log +``` + + + + +**Application Logs:** +```cmd +type %APPDATA%\Jan\data\logs\app.log +``` + +**Server Logs:** +```cmd +type %APPDATA%\Jan\data\logs\cortex.log +``` + + + + + + +## Common Issues & Solutions + +### Jan Won't Start (Broken Installation) + +If Jan gets stuck after installation or won't start properly: + + + + +**Clean Reinstall Steps:** + +1. **Uninstall Jan** from Applications folder + +2. **Delete all Jan data:** +```bash +rm -rf ~/Library/Application\ Support/Jan +``` + +3. **Kill any background processes** (for versions before 0.4.2): +```bash +ps aux | grep nitro +# Find process IDs and kill them: +kill -9 +``` + +4. **Download fresh copy** from [jan.ai](/download) + + + + +**Clean Reinstall Steps:** + +1. **Uninstall Jan** via Control Panel + +2. **Delete application data:** +```cmd +cd C:\Users\%USERNAME%\AppData\Roaming +rmdir /S Jan +``` + +3. **Kill background processes** (for versions before 0.4.2): +```cmd +# Find nitro processes +tasklist | findstr "nitro" +# Kill them by PID +taskkill /F /PID +``` + +4. **Download fresh copy** from [jan.ai](/download) + + + + +**Clean Reinstall Steps:** + +1. **Uninstall Jan:** +```bash +# For Debian/Ubuntu +sudo apt-get remove jan + +# For AppImage - just delete the file +``` + +2. **Delete application data:** +```bash +# Default location +rm -rf ~/.config/Jan + +# Or custom location +rm -rf $XDG_CONFIG_HOME/Jan +``` + +3. **Kill background processes** (for versions before 0.4.2): +```bash +ps aux | grep nitro +kill -9 +``` + +4. **Download fresh copy** from [jan.ai](/download) + + + + + + +### NVIDIA GPU Not Working + +If Jan isn't using your NVIDIA graphics card for acceleration: + +#### Step 1: Verify Hardware and System Requirements + +**Check GPU Detection:** + +*Windows:* Right-click desktop → NVIDIA Control Panel, or check Device Manager → Display Adapters + +*Linux:* Run `lspci | grep -i nvidia` + +**Install Required Software:** + +**NVIDIA Driver (470.63.01 or newer):** +1. Download from [nvidia.com/drivers](https://www.nvidia.com/drivers/) +2. Test: Run `nvidia-smi` in terminal + +**CUDA Toolkit (11.7 or newer):** +1. Download from [CUDA Downloads](https://developer.nvidia.com/cuda-downloads) +2. Test: Run `nvcc --version` + +**Linux Additional Requirements:** +```bash +# Install required packages +sudo apt update && sudo apt install gcc-11 g++-11 cpp-11 + +# Set CUDA environment +export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/cuda/lib64 +``` + +#### Step 2: Enable GPU Acceleration in Jan + +1. Open **Settings** > **Hardware** +2. Turn on **GPU Acceleration** +3. Check **System Monitor** (footer) to verify GPU is detected + +![Hardware](../../../assets/trouble-shooting-01.png) + +#### Step 3: Verify Configuration + +1. Go to **Settings** > **Advanced Settings** > **Data Folder** +2. Open `settings.json` file +3. Check these settings: + +```json +{ + "run_mode": "gpu", // Should be "gpu" + "nvidia_driver": { + "exist": true, // Should be true + "version": "531.18" + }, + "cuda": { + "exist": true, // Should be true + "version": "12" + }, + "gpus": [ + { + "id": "0", + "vram": "12282" // Your GPU memory in MB + } + ] +} +``` + +#### Step 4: Restart Jan + +Close and restart Jan to apply changes. + +#### Tested Working Configurations + +**Desktop Systems:** +- Windows 11 + RTX 4070Ti + CUDA 12.2 + Driver 531.18 +- Ubuntu 22.04 + RTX 4070Ti + CUDA 12.2 + Driver 545 + +**Virtual Machines:** +- Ubuntu on Proxmox + GTX 1660Ti + CUDA 12.1 + Driver 535 + + + +### "Failed to Fetch" or "Something's Amiss" Errors + +When models won't respond or show these errors: + +**1. Check System Requirements** +- **RAM:** Use models under 80% of available memory + - 8GB system: Use models under 6GB + - 16GB system: Use models under 13GB +- **Hardware:** Verify your system meets [minimum requirements](/docs/desktop/) + +**2. Adjust Model Settings** +- Open model settings in the chat sidebar +- Lower the **GPU Layers (ngl)** setting +- Start low and increase gradually + +**3. Check Port Conflicts** +If logs show "Bind address failed": + +```bash +# Check if ports are in use +# macOS/Linux +netstat -an | grep 1337 + +# Windows +netstat -ano | find "1337" +``` + +**Default Jan ports:** +- API Server: `1337` +- Documentation: `3001` + +**4. Try Factory Reset** +1. **Settings** > **Advanced Settings** +2. Click **Reset** under "Reset To Factory Settings" + + + +**5. Clean Reinstall** +If problems persist, do a complete clean installation (see "Jan Won't Start" section above). + +### Permission Denied Errors + +If you see permission errors during installation: + +```bash +# Fix npm permissions (macOS/Linux) +sudo chown -R $(whoami) ~/.npm + +# Windows - run as administrator +``` + +### OpenAI API Issues ("Unexpected Token") + +For OpenAI connection problems: + +**1. Verify API Key** +- Get valid key from [OpenAI Platform](https://platform.openai.com/) +- Ensure sufficient credits and permissions + +**2. Check Regional Access** +- Some regions have API restrictions +- Try using a VPN from a supported region +- Test network connectivity to OpenAI endpoints + +### Performance Issues + +**Models Running Slowly:** +- Enable GPU acceleration (see NVIDIA section) +- Use appropriate model size for your hardware +- Close other memory-intensive applications +- Check Task Manager/Activity Monitor for resource usage + +**High Memory Usage:** +- Switch to smaller model variants +- Reduce context length in model settings +- Enable model offloading in engine settings + +**Frequent Crashes:** +- Update graphics drivers +- Check system temperature +- Reduce GPU layers if using GPU acceleration +- Verify adequate power supply (desktop systems) + +## Need More Help? + +If these solutions don't work: + +**1. Gather Information:** +- Copy your error logs (see top of this page) +- Note your system specifications +- Describe what you were trying to do when the problem occurred + +**2. Get Community Support:** +- Join our [Discord](https://discord.com/invite/FTk2MvZwJH) +- Post in the **#🆘|jan-help** channel +- Include your logs and system info + +**3. Check Resources:** +- [System requirements](./installation) +- [Model compatibility guides](./manage-models) +- [Hardware setup guides](./installation) + + diff --git a/website/src/content/docs/local-server/api-server.mdx b/website/src/content/docs/local-server/api-server.mdx new file mode 100644 index 000000000..c4ac4c32d --- /dev/null +++ b/website/src/content/docs/local-server/api-server.mdx @@ -0,0 +1,107 @@ +--- +title: Local API Server +description: Run Jan's OpenAI-compatible API server on your local machine for private, offline AI development. +keywords: + [ + Jan, + local AI server, + OpenAI API, + local API, + self-hosted AI, + offline AI, + privacy-focused AI, + API integration, + local LLM server, + llama.cpp, + CORS, + API key + ] +--- +import { Aside, Steps } from '@astrojs/starlight/components'; + +Jan provides a built-in, OpenAI-compatible API server that runs entirely on your computer, +powered by `llama.cpp`. Use it as a drop-in replacement for cloud APIs to build private, +offline-capable AI applications. + +![Jan's Local API Server Settings UI](../../../assets/api-server-ui.png) + +## Quick Start + +### 1. Start the Server + +1. Navigate to **Settings** > **Local API Server**. +2. Enter a custom **API Key** (e.g., `secret-key-123`). This is required for all requests. +3. Click **Start Server**. + +The server is ready when the logs show `JAN API listening at http://12.0.0.1:1337`. + +### 2. Load a model with cURL + +```sh +curl http://127.0.0.1:1337/v1/models/start -H "Content-Type: application/json" \ + -H "Authorization: Bearer secret-key-123" \ + -d '{"model": "gemma3:12b"}' +``` + +### 3. Test with cURL +Open a terminal and make a request. Replace `YOUR_MODEL_ID` with the ID of an available model in Jan. + +```bash +curl http://127.0.0.1:1337/v1/chat/completions \ + -H "Content-Type: application/json" \ + -H "Authorization: Bearer secret-key-123" \ + -d '{ + "model": "YOUR_MODEL_ID", + "messages": [{"role": "user", "content": "Tell me a joke."}] + }' +``` + +## Server Configuration + +These settings control the network accessibility and basic behavior of your local server. + +### Server Host +The network address the server listens on. +- **`127.0.0.1`** (Default): The server is only accessible from your own computer. This is the most secure option for personal use. +- **`0.0.0.0`**: The server is accessible from other devices on your local network (e.g., your phone or another computer). Use this with caution. + +### Server Port +The port number for the API server. +- **`1337`** (Default): A common alternative port. +- You can change this to any available port number (e.g., `8000`). + +### API Prefix +The base path for all API endpoints. +- **`/v1`** (Default): Follows OpenAI's convention. The chat completions endpoint would be `http://127.0.0.1:1337/v1/chat/completions`. +- You can change this or leave it empty if desired. + +### API Key +A mandatory secret key to authenticate requests. +- You must set a key. It can be any string (e.g., `a-secure-password`). +- All API requests must include this key in the `Authorization: Bearer YOUR_API_KEY` header. + +### Trusted Hosts +A comma-separated list of hostnames allowed to access the server. This provides an additional layer of security when the server is exposed on your network. + +## Advanced Settings + +### Cross-Origin Resource Sharing (CORS) +- **(Enabled by default)** Allows web applications (like a custom web UI you are building) running on different domains to make requests to the API server. +- **Disable this** if your API will only be accessed by non-browser-based applications (e.g., scripts, command-line tools) for slightly improved security. + +### Verbose Server Logs +- **(Enabled by default)** Provides detailed, real-time logs of all incoming requests, responses, and server activity. +- This is extremely useful for debugging application behavior and understanding exactly what is being sent to the models. + +## Troubleshooting + + + +- **Connection Refused:** The server is not running, or your application is pointing to the wrong host or port. +- **401 Unauthorized:** Your API Key is missing from the `Authorization` header or is incorrect. +- **404 Not Found:** + - The `model` ID in your request body does not match an available model in Jan. + - Your request URL is incorrect (check the API Prefix). +- **CORS Error (in a web browser):** Ensure the CORS toggle is enabled in Jan's settings. diff --git a/website/src/content/docs/local-server/data-folder.mdx b/website/src/content/docs/local-server/data-folder.mdx new file mode 100644 index 000000000..59165137a --- /dev/null +++ b/website/src/content/docs/local-server/data-folder.mdx @@ -0,0 +1,179 @@ +--- +title: Jan Data Folder +description: Understand where Jan stores your data and how to monitor server logs. +keywords: + [ + Jan, + local AI, + data folder, + logs, + server logs, + troubleshooting, + privacy, + local storage, + file structure, + ] +--- + +import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; + +Jan stores all your data locally on your computer. No cloud storage, no external servers - +everything stays on your machine. + +## Quick Access + +**Via Jan Interface:** +1. Go to Settings (⚙️) > Advanced Settings +2. Click the folder icon 📁 + +![Open Jan Data Folder](../../../assets/settings-11.png) + +**Via File Explorer:** + + + +```cmd +%APPDATA%\Jan\data +``` + + +```bash +~/Library/Application Support/Jan/data +``` + + + +```bash +# Default installation +~/.config/Jan/data + +# Custom installation +$XDG_CONFIG_HOME/Jan/data +``` + + + + + +## Monitoring Server Logs + +When Jan's local server is running, you can monitor real-time activity in the logs folder: + +![API Server Logs](../../../assets/api-server-logs.png) + +### Live Log Monitoring + +**Real-time logs show:** +- API requests and responses +- Model loading and inference activity +- Error messages and warnings +- Performance metrics +- Connection attempts from external applications + +**Accessing logs:** +- **In Jan**: System Monitor (footer) > App Log +- **File location**: `/logs/app.log` + +### Log Categories + +| Log Type | What It Shows | When It's Useful | +|----------|---------------|------------------| +| **[APP]** | Core application events | Startup issues, crashes, general errors | +| **[SERVER]** | API server activity | Connection problems, request failures | +| **[SPECS]** | Hardware information | Performance issues, compatibility problems | +| **[MODEL]** | Model operations | Loading failures, inference errors | + +## Data Structure + +``` +jan/ +├── assistants/ # AI personality settings +│ └── jan/ +│ └── assistant.json +├── engines/ # Engine configurations +│ └── llama.cpp/ +├── extensions/ # Add-on modules +│ └── extensions.json +├── logs/ # Server and application logs +│ └── app.log # Main log file +├── models/ # Downloaded AI models +│ └── huggingface.co/ +└── threads/ # Chat conversations + └── thread_id/ + ├── messages.jsonl + └── thread.json +``` + +## Key Folders Explained + +### `/logs/` - Server Activity Hub +Contains all application and server logs. Essential for troubleshooting and monitoring API activity. + +**What you'll find:** +- Real-time server requests +- Model loading status +- Error diagnostics +- Performance data + +### `/models/` - AI Model Storage +Where your downloaded models live. Each model includes: +- `model.gguf` - The actual AI model file +- `model.json` - Configuration and metadata + +### `/threads/` - Chat History +Every conversation gets its own folder with: +- `messages.jsonl` - Complete chat history +- `thread.json` - Thread metadata and settings + +### `/assistants/` - AI Personalities +Configuration files that define how your AI assistants behave, including their instructions and available tools. + +## Privacy & Security + +**Your data stays local:** +- No cloud backups or syncing +- Files stored in standard JSON/JSONL formats +- Complete control over your data +- Easy to backup or migrate + +**File permissions:** +- Only you and Jan can access these files +- Standard user-level permissions +- No elevated access required + + + +## Common Tasks + +### Backup Your Data +Copy the entire Jan data folder to backup: +- All chat history +- Model configurations +- Assistant settings +- Extension data + +### Clear Chat History +Delete individual thread folders in `/threads/` or use Jan's interface to delete conversations. + +### Export Conversations +Thread files are in standard JSON format - readable by any text editor or compatible with other applications. + +### Troubleshooting Data Issues +1. Check `/logs/app.log` for error messages +2. Verify folder permissions +3. Ensure sufficient disk space +4. Restart Jan if files appear corrupted + +## Uninstalling Jan + +If you need to completely remove Jan and all data: + +**Keep data (reinstall later):** Just uninstall the application +**Remove everything:** Delete the Jan data folder after uninstalling + +Detailed uninstall guides: +- [macOS](/docs/desktop/mac#step-2-clean-up-data-optional) +- [Windows](/docs/desktop/windows#step-2-handle-jan-data) +- [Linux](/docs/desktop/linux#uninstall-jan) diff --git a/website/src/content/docs/local-server/index.mdx b/website/src/content/docs/local-server/index.mdx new file mode 100644 index 000000000..d81b48b90 --- /dev/null +++ b/website/src/content/docs/local-server/index.mdx @@ -0,0 +1,195 @@ +--- +title: Jan Local Server +description: Run Jan as a local AI server with OpenAI-compatible API for building AI applications. +--- + +import { Aside } from '@astrojs/starlight/components'; + +![Jan's Cover Image](../../../assets/ls.png) + +Jan Local Server provides an OpenAI-compatible API that runs entirely on your computer. Build AI applications using familiar API patterns while keeping complete control over your data and models. + +## How It Works + +Jan runs a local server powered by [llama.cpp](https://github.com/ggerganov/llama.cpp) that provides an OpenAI-compatible API. By default, it runs at `https://localhost:1337` and works completely offline. + +**What this enables:** +- Connect development tools like [Continue](./continue-dev) and [Cline](https://cline.bot/) to Jan +- Build AI applications without cloud dependencies +- Use both local and cloud models through the same API +- Maintain full privacy for local model interactions + +## Key Features + +**Local AI Models** +- Download popular open-source models (Llama, Gemma, Qwen) from Hugging Face +- Import any GGUF files from your computer +- Run models completely offline + +**Cloud Integration** +- Connect to cloud services (OpenAI, Anthropic, Mistral, Groq) +- Use your own API keys +- Switch between local and cloud models seamlessly + +**Developer-Friendly** +- OpenAI-compatible API for easy integration +- Chat interface for testing and configuration +- Model parameter customization + +**Complete Privacy** +- All data stored locally +- No cloud dependencies for local models +- You control what data leaves your machine + +## Why Choose Jan? + +**Truly Open Source** +- Apache 2.0 license - no restrictions +- Community-driven development +- Full transparency + +**Local-First Design** +- Works 100% offline with local models +- Data stays on your machine +- No vendor lock-in + +**Flexible Model Support** +- Your choice of AI models +- Both local and cloud options +- Easy model switching + +**No Data Collection** +- We don't collect or sell user data +- Local conversations stay local +- [Read our Privacy Policy](./privacy) + + + +## Philosophy + +Jan is built to be **user-owned**. This means: +- **True open source** - Apache 2.0 license with no hidden restrictions +- **Local data storage** - following [local-first principles](https://www.inkandswitch.com/local-first) +- **Internet optional** - works completely offline +- **Free choice** - use any AI models you want +- **No surveillance** - we don't collect or sell your data + +Read more about our [philosophy](/about#philosophy). + +## Inspiration + +Jan draws inspiration from [Calm Computing](https://en.wikipedia.org/wiki/Calm_technology) and the Disappearing Computer - technology that works quietly in the background without demanding constant attention. + +## Built With + +Jan stands on the shoulders of excellent open-source projects: +- [llama.cpp](https://github.com/ggerganov/llama.cpp) - Local AI model inference +- [Scalar](https://github.com/scalar/scalar) - API documentation + +## Frequently Asked Questions + +## What is Jan? + + Jan is a privacy-focused AI assistant that runs locally on your computer. It's an alternative to ChatGPT, Claude, and other cloud-based AI tools, with optional cloud AI support when you want it. + + +## How do I get started? + + Download Jan, add a model (either download locally or add a cloud API key), and start chatting. Check our [Quick Start guide](/docs/quickstart) for detailed setup instructions. + + +## What systems does Jan support? + + Jan works on all major operating systems: + - [macOS](/docs/desktop/mac#compatibility) - Intel and Apple Silicon + - [Windows](/docs/desktop/windows#compatibility) - x64 systems + - [Linux](/docs/desktop/linux) - Most distributions + + Jan supports various hardware: + - NVIDIA GPUs (CUDA acceleration) + - AMD GPUs (Vulkan support) + - Intel Arc GPUs (Vulkan support) + - Any GPU with Vulkan support + - CPU-only operation + + +## How does Jan protect my privacy? + + Jan prioritizes privacy through: + - **100% offline operation** with local models + - **Local data storage** - everything stays on your device + - **Open-source transparency** - you can verify what Jan does + - **No data collection** - we never see your conversations + + + + All your files and chat history are stored locally in the [Jan Data Folder](./data-folder). See our complete [Privacy Policy](./privacy). + + +## What AI models can I use? + + **Local models:** + - Download optimized models from the [Jan Hub](/docs/manage-models) + - Import GGUF models from Hugging Face + - Use any compatible local model files + + **Cloud models:** + - OpenAI (GPT-4, ChatGPT) + - Anthropic (Claude) + - Mistral, Groq, and others + - Bring your own API keys + + +## Is Jan really free? + + Yes! Jan is completely free and open-source with no subscription fees. + + **What's free:** + - Jan application and all features + - Local model usage (once downloaded) + - Local server and API + + **What costs money:** + - Cloud model usage (you pay providers directly) + - We add no markup to cloud service costs + + +## Can Jan work offline? + + Absolutely! Once you download a local model, Jan works completely offline with no internet connection needed. This is one of Jan's core features. + + +## How can I get help or contribute? + + **Get help:** + - Join our [Discord community](https://discord.gg/qSwXFx6Krr) + - Check the [Troubleshooting guide](./troubleshooting) + - Ask in [#🆘|jan-help](https://discord.com/channels/1107178041848909847/1192090449725358130) + + **Contribute:** + - Contribute on [GitHub](https://github.com/menloresearch/jan) + - No permission needed to submit improvements + - Help other users in Discord + + +## Can I self-host Jan? + + Yes! We fully support self-hosting. You can: + - Download Jan directly for personal use + - Fork the [GitHub repository](https://github.com/menloresearch/jan) + - Build from source + - Deploy on your own infrastructure + + +## What does 'Jan' stand for? + + "Just a Name" - we admit we're not great at marketing! 😄 + + +## Are you hiring? + + Yes! We love hiring from our community. Check our open positions at [Careers](https://menlo.bamboohr.com/careers). diff --git a/website/src/content/docs/local-server/integrations/continue-dev.mdx b/website/src/content/docs/local-server/integrations/continue-dev.mdx new file mode 100644 index 000000000..6be87d943 --- /dev/null +++ b/website/src/content/docs/local-server/integrations/continue-dev.mdx @@ -0,0 +1,97 @@ +--- +title: Continue.dev +description: A step-by-step guide on integrating Jan with Continue and VS Code. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + Continue integration, + VSCode integration, + ] +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +## Integrate with Continue VS Code + +[Continue](https://continue.dev/docs/intro) is an open-source autopilot compatible with Visual Studio Code and JetBrains, offering the simplest method to code with any LLM (Local Language Model). + +To integrate Jan with a local AI language model, follow the steps below: + +1. **Installing Continue on Visual Studio Code** + - Follow this [guide](https://continue.dev/docs/quickstart) to install the Continue extension on Visual Studio Code. +2. **Enable the Jan API Server** + To set up Continue for use with Jan's Local Server, you must activate the Jan API Server with your chosen model. + 1. Press the `⚙️ Settings` button. + 2. Locate `Local API Server`. + 3. Setup the server, which includes the **IP Port**, **Cross-Origin-Resource-Sharing (CORS)** and **Verbose Server Logs**. + 4. Include your user-defined API Key. + 5. Press the **Start Server** button +3. **Configure Continue to Use Jan's Local Server** + 1. Go to the `~/.continue` directory. + + + ```bash + cd ~/.continue + ``` + + + ```bash + C:/Users//.continue + ``` + + + ```bash + cd ~/.continue + ``` + + + + ```yaml title="~/.continue/config.yaml" + name: Local Assistant + version: 1.0.0 + schema: v1 + models: + - name: Jan + provider: openai + model: #MODEL_NAME (e.g. qwen3:0.6b) + apiKey: #YOUR_USER_DEFINED_API_KEY_HERE (e.g. hello) + apiBase: http://localhost:1337/v1 + context: + - provider: code + - provider: docs + - provider: diff + - provider: terminal + - provider: problems + - provider: folder + - provider: codebase + ``` + 2. Ensure the file has the following configurations: + - Ensure `openai` is selected as the `provider`. + - Match the `model` with the one enabled in the Jan API Server. + - Set `apiBase` to `http://localhost:1337/v1`. +4. **Ensure the Using Model Is Activated in Jan** + 1. Navigate to `Settings` > `Model Providers`. + 2. Under Llama.cpp, find the model that you would want to use. + 3. Select the **Start Model** button to activate the model. + +## Use Jan with Continue in Visual Studio Code + +### 1. Exploring Code with Jan + +1. Highlight a code. +2. Press `Command + Shift + M` to open the Left Panel. +3. Click "Jan" at the bottom of the panel and submit your query, such as `Explain this code`. + +### 2. Enhancing Code with the Help of a Large Language Model + +1. Select a code snippet. +2. Press `Command + Shift + L`. +3. Type in your specific request, for example, `Add comments to this code`. diff --git a/website/src/content/docs/local-server/integrations/llmcord.mdx b/website/src/content/docs/local-server/integrations/llmcord.mdx new file mode 100644 index 000000000..4724e2d27 --- /dev/null +++ b/website/src/content/docs/local-server/integrations/llmcord.mdx @@ -0,0 +1,63 @@ +--- +title: llmcord (Discord) +description: A step-by-step guide on integrating Jan with a Discord bot. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + Discord integration, + Discord, + bot, + ] +--- + +import { Aside, Steps } from '@astrojs/starlight/components'; + +## Integrate llmcord.py with Jan + +[llmcord.py](https://github.com/jakobdylanc/discord-llm-chatbot) lets you and your friends chat with LLMs directly in your Discord server. + +To integrate Jan with llmcord.py, follow the steps below: + + + +1. **Clone the Repository** + Clone the discord bot's [repository](https://github.com/jakobdylanc/discord-llm-chatbot) by using the following command: + ```bash + git clone https://github.com/jakobdylanc/discord-llm-chatbot.git + ``` +2. **Install the Required Libraries** + After cloning the repository, run the following command: + ```bash + pip install -r requirements.txt + ``` + +3. **Set the Environment** + 1. Create a copy of `.env.example`. + 2. Change the name to `.env`. + 3. Set the environment with the following options: + + | Setting | Instructions | + | :----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | `DISCORD_BOT_TOKEN` | Create a new Discord bot at [discord.com/developers/applications](https://discord.com/developers/applications), obtain a token from the Bot tab, and enable MESSAGE CONTENT INTENT. | + | `DISCORD_CLIENT_ID` | Found under the OAuth2 tab of the Discord bot you just made. | + | `LLM` | For Jan, set to `local/openai/(MODEL_NAME)`, where `(MODEL_NAME)` is your loaded model's name. | + | `LLM_SYSTEM_PROMPT` | Adjust the bot's behavior as needed. | + | `LOCAL_SERVER_URL` | URL of your local API server. For Jan, set it to `http://localhost:1337/v1`. | + + For more configuration options, refer to llmcord.py's [README](https://github.com/jakobdylanc/discord-llm-chatbot/tree/main?tab=readme-ov-file#instructions). +4. **Run the Bot** + Run the bot by using the following command in your command prompt: + ```bash + python llmcord.py + ``` + The bot's invite URL will be printed in the console. Use it to add the bot to your server. + + diff --git a/website/src/content/docs/local-server/integrations/n8n.mdx b/website/src/content/docs/local-server/integrations/n8n.mdx new file mode 100644 index 000000000..80b89a0b5 --- /dev/null +++ b/website/src/content/docs/local-server/integrations/n8n.mdx @@ -0,0 +1,72 @@ +--- +title: n8n +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + n8n integration, + n8n, + ] +description: A step-by-step guide on integrating Jan with n8n. +--- + +import { Steps } from '@astrojs/starlight/components'; + +## Integrate n8n with Jan + +[n8n](https://n8n.io/) is an open-source workflow automation tool that allows you to connect to more than 400+ integrations and services to automate repetitive tasks. With its visual interface, you can create complex workflows conveniently. To integrate n8n with Jan, follow the steps below: + + +1. **Run your preferred model with Jan server** + 1. Open Jan app. + 2. Go to the **Hub** and download your preferred model + 3. Run the Jan server +2. **Start n8n service** + Start n8n immediately using npx: + ```sh + npx n8n + ``` + + Or deploy with Docker: + ```sh + docker run -it --rm --name n8n -p 5678:5678 docker.n8n.io/n8nio/n8n + ``` +3. **Integrate Jan with n8n service using HTTP Request** + Integrate Jan by selecting the HTTP Request node in n8n and importing the following cURL command: + + ```bash + curl -X 'POST' \ + 'http://127.0.0.1:1337/v1/chat/completions' \ + -H 'accept: application/json' \ + -H 'Content-Type: application/json' \ + -d '{ + "messages": [ + { + "content": "You are a helpful assistant.", + "role": "system" + }, + { + "content": "Hello!", + "role": "user" + } + ], + "model": "tinyllama-1.1b", + "stream": true, + "max_tokens": 2048, + "stop": [ + "hello" + ], + "frequency_penalty": 0, + "presence_penalty": 0, + "temperature": 0.7, + "top_p": 0.95 + }' + ``` + diff --git a/website/src/content/docs/local-server/integrations/tabby.mdx b/website/src/content/docs/local-server/integrations/tabby.mdx new file mode 100644 index 000000000..1d69f5635 --- /dev/null +++ b/website/src/content/docs/local-server/integrations/tabby.mdx @@ -0,0 +1,88 @@ +--- +title: Tabby +description: A step-by-step guide on integrating Jan with Tabby and VSCode, JetBrains, or other IDEs. +keywords: + [ + Jan, + Customizable Intelligence, LLM, + local AI, + privacy focus, + free and open source, + private and offline, + conversational AI, + no-subscription fee, + large language models, + Tabby integration, + VSCode integration, + JetBrains integration, + ] +--- + +import { Steps } from '@astrojs/starlight/components'; + +## Integrate Jan with Tabby and Your Favorite IDEs + +[Tabby](https://www.tabbyml.com/) is an open-source, self-hosted AI coding assistant. +With Tabby, teams can easily set up their own LLM-powered code completion server. + +Tabby provides integrations with VSCode, JetBrains, and other IDEs to help developers code more efficiently, +and it can be used with various LLM services, including Jan. + +To integrate Jan with Tabby, follow these steps: + + + +1. **Enable the Jan API Server** + To set up Tabby with Jan's Local Server, you must activate the Jan API Server with your chosen model. + 1. Click the `Local API Server` (`<>`) button above the Settings. Jan will direct you to the **Local API Server** section. + 2. Configure the server, including the **IP Port**, **Cross-Origin Resource Sharing (CORS)**, and **Verbose Server Logs**. + 3. Press the **Start Server** button. +2. **Find the Model ID and Ensure the Model is Activated** + 1. Go to `Settings` > `My Models`. + 2. Models are listed with their **Model ID** beneath their names. + 3. Click the **three dots (⋮)** button next to the model. + 4. Select **Start Model** to activate the model. +3. **Installing Tabby Server** + Use the following documentation to install the Tabby server: + - [Docker](https://tabby.tabbyml.com/docs/quick-start/installation/docker/) + - [Apple Silicon](https://tabby.tabbyml.com/docs/quick-start/installation/apple/) + - [Linux](https://tabby.tabbyml.com/docs/quick-start/installation/linux/) + - [Windows](https://tabby.tabbyml.com/docs/quick-start/installation/windows/) + Then, follow the steps to connect Jan with the Tabby server: + [Connect Jan with Tabby](https://tabby.tabbyml.com/docs/references/models-http-api/jan.ai/). + For example, to connect Jan with Tabby, save the following configuration under `~/.tabby/config.toml`: + + ```toml + # ~/.tabby/config.toml + [model.chat.http] + kind = "openai/chat" + model_name = "model_id" + api_endpoint = "http://localhost:1337/v1" + api_key = "" + ``` + Currently, the Jan completion and embedding API is under construction. + Once completed, you can also connect Jan with Tabby for completion and embedding tasks. + +4. **Installing Tabby on Your Favorite IDEs** + Refer to the following documentation to install the Tabby extension on your favorite IDEs: + - [Visual Studio Code](https://tabby.tabbyml.com/docs/extensions/installation/vscode/) + - [JetBrains IntelliJ Platform](https://tabby.tabbyml.com/docs/extensions/installation/intellij/) + - [VIM / NeoVIM](https://tabby.tabbyml.com/docs/extensions/installation/vim/) + + + +## How to Use Tabby with Jan Integration + +### Answer Engine: Chat with Your Codes and Documentation + +Tabby offers an [Answer Engine](https://tabby.tabbyml.com/docs/administration/answer-engine/) on the homepage, +which can leverage the Jan LLM and related contexts like code, documentation, and web pages to answer user questions. + +Simply open the Tabby homepage at [localhost:8080](http://localhost:8080) and ask your questions. + +### IDE Chat Sidebar + +After installing the Tabby extension on your preferred IDEs, you can engage in a conversation with Jan to: + +1. Discuss your code, receive suggestions, and seek assistance. +2. Request Jan to inline edit your code, and then review and accept the proposed changes. diff --git a/website/src/content/docs/local-server/llama-cpp.mdx b/website/src/content/docs/local-server/llama-cpp.mdx new file mode 100644 index 000000000..8b7412faa --- /dev/null +++ b/website/src/content/docs/local-server/llama-cpp.mdx @@ -0,0 +1,164 @@ +--- +title: llama.cpp Server +description: Configure Jan's local AI engine for optimal performance. +keywords: + [ + Jan, + local AI, + llama.cpp, + AI engine, + local models, + performance, + GPU acceleration, + CPU processing, + model optimization, + ] +--- + +import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; + +llama.cpp is the engine that runs AI models locally on your computer. It's what makes Jan work without +needing internet or cloud services. + +## Accessing Engine Settings + +Find llama.cpp settings at **Settings** (⚙️) > **Local Engine** > **llama.cpp**: + +![llama.cpp](../../../assets/llama.cpp-01-updated.png) + + + +## When to Adjust Settings + +You might need to modify these settings if: +- Models load slowly or don't work +- You've installed new hardware (like a graphics card) +- You want to optimize performance for your specific setup + +## Engine Management + +| Feature | What It Does | When You Need It | +|---------|-------------|------------------| +| **Engine Version** | Shows current llama.cpp version | Check compatibility with newer models | +| **Check Updates** | Downloads engine updates | When new models require updated engine | +| **Backend Selection** | Choose hardware-optimized version | After hardware changes or performance issues | + +## Hardware Backends + +Different backends are optimized for different hardware. Pick the one that matches your computer: + + + + +### NVIDIA Graphics Cards (Fastest) +**For CUDA 12.0:** +- `llama.cpp-avx2-cuda-12-0` (most common) +- `llama.cpp-avx512-cuda-12-0` (newer Intel/AMD CPUs) + +**For CUDA 11.7:** +- `llama.cpp-avx2-cuda-11-7` (older drivers) + +### CPU Only +- `llama.cpp-avx2` (modern CPUs) +- `llama.cpp-avx` (older CPUs) +- `llama.cpp-noavx` (very old CPUs) + +### Other Graphics Cards +- `llama.cpp-vulkan` (AMD, Intel Arc) + + + + +### NVIDIA Graphics Cards +- `llama.cpp-avx2-cuda-12-0` (recommended) +- `llama.cpp-avx2-cuda-11-7` (older drivers) + +### CPU Only +- `llama.cpp-avx2` (modern CPUs) +- `llama.cpp-arm64` (ARM processors) + +### Other Graphics Cards +- `llama.cpp-vulkan` (AMD, Intel graphics) + + + + +### Apple Silicon (M1/M2/M3/M4) +- `llama.cpp-mac-arm64` (recommended) + +### Intel Macs +- `llama.cpp-mac-amd64` + + + + + + +## Performance Settings + +| Setting | What It Does | Recommended | Impact | +|---------|-------------|-------------|---------| +| **Continuous Batching** | Handle multiple requests simultaneously | Enabled | Faster when using tools or multiple chats | +| **Parallel Operations** | Number of concurrent requests | 4 | Higher = more multitasking, uses more memory | +| **CPU Threads** | Processor cores to use | Auto | More threads can speed up CPU processing | + +## Memory Settings + +| Setting | What It Does | Recommended | When to Change | +|---------|-------------|-------------|----------------| +| **Flash Attention** | Efficient memory usage | Enabled | Leave enabled unless problems occur | +| **Caching** | Remember recent conversations | Enabled | Speeds up follow-up questions | +| **KV Cache Type** | Memory vs quality trade-off | f16 | Change to q8_0 if low on memory | +| **mmap** | Efficient model loading | Enabled | Helps with large models | +| **Context Shift** | Handle very long conversations | Disabled | Enable for very long chats | + +### Memory Options Explained +- **f16**: Best quality, uses more memory +- **q8_0**: Balanced memory and quality +- **q4_0**: Least memory, slight quality reduction + +## Quick Troubleshooting + +**Models won't load:** +- Try a different backend +- Check available RAM/VRAM +- Update engine version + +**Slow performance:** +- Verify GPU acceleration is active +- Close memory-intensive applications +- Increase GPU Layers in model settings + +**Out of memory:** +- Change KV Cache Type to q8_0 +- Reduce Context Size in model settings +- Try a smaller model + +**Crashes or errors:** +- Switch to a more stable backend (avx instead of avx2) +- Update graphics drivers +- Check system temperature + +## Quick Setup Guide + +**Most users:** +1. Use default settings +2. Only change if problems occur + +**NVIDIA GPU users:** +1. Download CUDA backend +2. Ensure GPU Layers is set high +3. Enable Flash Attention + +**Performance optimization:** +1. Enable Continuous Batching +2. Use appropriate backend for hardware +3. Monitor memory usage + + diff --git a/website/src/content/docs/local-server/settings.mdx b/website/src/content/docs/local-server/settings.mdx new file mode 100644 index 000000000..8819442ba --- /dev/null +++ b/website/src/content/docs/local-server/settings.mdx @@ -0,0 +1,245 @@ +--- +title: Settings +description: Configure Jan to work best for your needs and hardware. +keywords: + [ + Jan, + settings, + configuration, + model management, + privacy, + hardware settings, + local AI, + customization, + ] +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import { Steps } from '@astrojs/starlight/components'; +import { Aside } from '@astrojs/starlight/components'; + +Access Jan's settings by clicking the ⚙️ icon in the bottom left corner. + +## Managing AI Models + +Find all model options at **Settings** > **Model Providers**: + +### Adding Models + +**From Hugging Face:** +- Enter a model's ID (like `microsoft/DialoGPT-medium`) in the search bar +- **Need authentication?** Some models require a Hugging Face token - add yours at **Settings > Model Providers > Hugging Face Access Token** + +**From Your Computer:** +- Click **Import Model** and select GGUF files from your computer +- Works with any compatible model files you've downloaded + +### Managing Existing Models + +**Start a model:** +1. Open a new chat and select the model you want +2. Or go to **Settings > Model Providers** and click the **Start** button + +**Remove a model:** +- Click the trash icon next to the **Start** button +- Confirm deletion when prompted + +### Hugging Face Token Setup + +For restricted models (like Meta's Llama models): +1. Get your token from [Hugging Face Tokens](https://huggingface.co/docs/hub/en/security-tokens) +2. Add it at **Settings > Model Providers > Hugging Face** + +## Model Configuration (Gear Icon) + +![Model Settings](../../../assets/trouble-shooting-04.png) + +Click the gear icon next to any model to adjust how it behaves: + +**Basic Settings:** +- **Context Size**: How much conversation history the model remembers +- **GPU Layers**: How much of the model runs on your graphics card (higher = faster, but uses more GPU memory) +- **Temperature**: Controls creativity (0.1 = focused, 1.0 = creative) + +**Advanced Controls:** +- **Top K & Top P**: Fine-tune how the model picks words (lower = more focused) +- **Min P**: Minimum probability threshold for word selection +- **Repeat Penalty**: Prevents the model from repeating itself too much +- **Presence Penalty**: Encourages the model to use varied vocabulary + + + +## Hardware Monitoring + +Check your computer's performance at **Settings** > **Hardware**: + +- **CPU, RAM, GPU**: Real-time usage and specifications +- **GPU Acceleration**: Turn GPU acceleration on/off +- **Temperature monitoring**: Keep an eye on system heat + +![Hardware](../../../assets/hardware.png) + + + +## Personalization + +### Visual Appearance + +Customize Jan's look at **Settings** > **Appearance**: +- **Theme**: Choose light or dark mode +- **Colors**: Pick your preferred color scheme +- **Code highlighting**: Adjust syntax colors for programming discussions + +![Appearance](../../../assets/settings-04.png) + +### Writing Assistance + +**Spell Check:** Jan can help catch typing mistakes in your messages. + +![Spell Check](../../../assets/settings-06.png) + +## Privacy & Data Control + +Access privacy settings at **Settings** > **Privacy**: + +### Usage Analytics + +**Default: No data collection.** Everything stays on your computer. + +**Optional: Help improve Jan** +- Toggle **Analytics** to share anonymous usage patterns +- No conversations or personal data ever shared +- Change this setting anytime + + + +![Analytics](../../../assets/settings-07.png) + +### Log Management + +**Viewing System Logs:** +- Logs help troubleshoot problems +- Click the folder icon to open App Logs and System Logs +- Logs are automatically deleted after 24 hours + +![View Logs](../../../assets/settings-08.png) + +**Clearing Logs:** +- Click **Clear** to remove all log files immediately +- Useful before sharing your computer or troubleshooting + + + +![Clear Logs](../../../assets/settings-09.png) + +### Data Folder Management + +Jan stores everything locally on your computer in standard file formats. + +**Access Your Data:** +- Click the folder icon to open Jan's data directory +- Find your chat history, models, and settings +- All files are yours to backup, move, or examine + +![Open Jan Data Folder](../../../assets/settings-11.png) + +**Change Storage Location:** +1. Click the pencil icon to edit the data folder location +2. Choose an empty directory +3. Confirm the move (original folder stays intact) +4. Restart Jan to complete the change + +![Edit Jan Data Folder](../../../assets/settings-12.png) + + + +## Network Settings + +### HTTPS Proxy Setup + +If you need to connect through a corporate network or want enhanced privacy: + +1. **Enable** the proxy toggle +2. Enter your proxy details: +``` +http://:@: +``` + +**Example:** +``` +http://user:pass@proxy.company.com:8080 +``` + +![HTTPS Proxy](../../../assets/settings-13.png) + + + +### SSL Certificate Handling + +**Ignore SSL Certificates:** Only enable this for: +- Corporate networks with internal certificates +- Development/testing environments +- Trusted network setups + +![Ignore SSL Certificates](../../../assets/settings-14.png) + + + +## Emergency Options + +### Factory Reset + +**When to use:** Only as a last resort for serious problems that other solutions can't fix. + +**What it does:** Returns Jan to its original state - deletes everything. + +**Steps:** +1. Click **Reset** under "Reset to Factory Settings" +2. Type **RESET** to confirm you understand this deletes everything +3. Optionally keep your current data folder location +4. Click **Reset Now** +5. Restart Jan + +![Factory Reset](../../../assets/settings-17.png) + +![Reset Confirmation](../../../assets/settings-18.png) + + + +**Try these first:** +- Restart Jan +- Check the [Troubleshooting Guide](./troubleshooting) +- Ask for help on [Discord](https://discord.gg/qSwXFx6Krr) + +## Quick Tips + +**For new users:** +- Start with default settings +- Try a few different models to find what works best +- Enable GPU acceleration if you have a graphics card + +**For performance:** +- Monitor hardware usage in real-time +- Adjust GPU layers based on your graphics card memory +- Use smaller models on older hardware + +**For privacy:** +- All data stays local by default +- Check the data folder to see exactly what's stored +- Analytics are opt-in only diff --git a/website/src/content/docs/mobile/index.mdx b/website/src/content/docs/mobile/index.mdx new file mode 100644 index 000000000..ed62d4b6a --- /dev/null +++ b/website/src/content/docs/mobile/index.mdx @@ -0,0 +1,35 @@ +--- +title: Jan Mobile +description: Your AI assistant, on the go. Get ready for a seamless mobile experience with local and cloud capabilities. +keywords: + [ + Jan Mobile, + Jan AI, + mobile AI, + local AI on phone, + private AI app, + iOS, + Android, + offline AI, + ChatGPT alternative mobile + ] +banner: + content: 'Coming Q4 2025: Jan Mobile is currently in development.' +--- +import { Aside, Card, CardGrid } from '@astrojs/starlight/components'; + +## Your AI, Everywhere + +Jan Mobile brings the full power of a private, local-first AI to your iOS and Android devices. Connect to your home desktop, your company's server, or run models directly on your phone for complete offline privacy. + + + +The goal is a seamless experience that adapts to your environment without requiring you to change settings. + +### Core Features Planned: +- **Three Connection Modes**: Seamlessly switch between Local, Desktop, and Server modes. +- **Offline Capability**: Run `Jan Nano` or other small models directly on your device. +- **Voice-First Interface**: Interact with your AI naturally through voice commands. +- **Privacy by Design**: End-to-end encryption and full control over your data. diff --git a/website/src/content/docs/server/index.mdx b/website/src/content/docs/server/index.mdx new file mode 100644 index 000000000..6da7d4f7a --- /dev/null +++ b/website/src/content/docs/server/index.mdx @@ -0,0 +1,37 @@ +--- +title: Jan Server +description: Your self-hosted, private AI cloud for teams and enterprises. +keywords: + [ + Jan Server, + Jan AI, + self-hosted AI, + private AI cloud, + local LLM server, + enterprise AI, + Docker, + Kubernetes, + on-premise AI + ] +banner: + content: 'Coming Q3 2025: Jan Server is currently in development.' +--- +import { Aside, Card } from '@astrojs/starlight/components'; + +## Your Private AI Cloud + +Jan Server allows you to deploy a powerful, multi-user AI environment on your +own infrastructure. It's designed for teams and enterprises that require full +data control, privacy, and predictable costs without sacrificing performance. + + + +By self-hosting, you ensure that your sensitive data and intellectual property never leave your network. + +### Core Features Planned: +- **Multi-User Management**: Control access with individual accounts and API keys. +- **Enterprise Authentication**: Integrate with your existing SSO, LDAP, or AD. +- **Flexible Deployment**: Deploy easily via Docker, Kubernetes, or on bare metal. +- **Centralized Admin Dashboard**: Monitor usage, manage models, and oversee system health. diff --git a/website/src/content/products/index.mdx b/website/src/content/products/index.mdx new file mode 100644 index 000000000..3dab3e086 --- /dev/null +++ b/website/src/content/products/index.mdx @@ -0,0 +1,112 @@ +--- +title: Vision 🚀 +description: AI that runs where you need it, how you need it. +sidebar: + order: 0 +--- +import { Aside, Card, CardGrid } from '@astrojs/starlight/components'; + +**Jan's Goal is** + +> **to build a superintelligence that you can self-host and use locally on your own devices.** + +We know it's hard but we believe this will be possible in the next decade through a combination of +models, applications and tools. For this we are... + +> **building Jan as the ecosystem that ties all of these seamlessly so that users, regardless of their technical +background, add intelligence to their day-to-day lives like they would, but better, with similar tools.** + +![Jan Vision](../../assets/jan-vision.png) + + +## Core Principles + +### 1) Build the Full Stack + +Models alone aren't enough. Neither are applications. Superintelligence requires models that +understand your needs, tools that extend capabilities, and applications that tie it all +together. We're building all three, openly. + +### 2) You Choose Who Runs It +Run Jan on your laptop. Self-host it on your servers. Use our cloud. The same superintelligence +works everywhere. Your data, your compute, your choice. + +### 3) Start Simple, Scale Infinitely +Open Jan and start chatting. No setup required. When you need more - better models, advanced tools, +team deployment - everything's there. The complexity scales with your ambition, not our architecture. + +## The Path to Superintelligence + +### Today we have the Foundation + +- **A desktop app** that works both with local and cloud-based models +- **Jan models** small enough to run on any laptop and powerful enough to scale on any server +- **Basic tools** enabled through MCP Search, file parsing, simple workflows + +### Next 12 Months: Ecosystem +- **The Jan v1 models** are a specialized series of models with general capabilities but optimsed +for specific tasks like search, analysis, creative writing and more +- **The Jan server** works as a self-hosted AI infrastructure for teams +- **Advanced tools** like browser use, deep research, and long-term memory works across devices, excels +across different day-to-day use cases, and scales with the needs of large teams +- **Cross-device sync** allows you to take your AI everywhere + +### End State: Open Superintelligence +Not one massive model, but an ecosystem of specialized models, tools, and applications working +together. Built in public. Owned by whoever runs it. + +## Why This Matters: The Status Quo + +Every other AI company wants to be your AI provider. We want you to own your AI. + +- **OpenAI/Anthropic**: Their models, their servers, their rules +- **Open Source Models**: Powerful but fragmented - no cohesive experience +- **Jan**: Complete ecosystem you can own, modify, and deploy however you want + +## Watch Us Build + +### Live Model Training +We train our models in public. Check the [models page](./models/jan-v1) to see: +- Real-time training progress +- Failed runs and what went wrong +- Models in testing before release + +No "trust us, it's good." Watch the entire process from dataset to deployment. + +### Help Evaluate Our Models +Every model needs real-world testing. Join our open evaluation platform where you can: +- Compare model outputs side-by-side +- Test specific capabilities you care about +- Vote on which responses actually help +- Suggest improvements based on your use cases + +Think LMArena, but you can see all the data, run your own evals, and directly influence what we train next. + +[Test/evaluate our models here](link) + +### Our Models Training Right Now + +We don't just talk about open development. Here's what's actually happening: + +| Model | Progress | Status | Details | +|:------|:---------|:-------|:--------| +| **Jan-Search-7B** | ████████░░ 82% | Testing | [View run](/) • 2.1M steps • ETA 3 days | +| **Jan-Write-13B** | ████░░░░░░ 41% | Training | [View run](/) • 980K steps • On track | +| **Jan-Analyze-13B** | ████████░░ ~~67%~~ | Failed | [View logs](/) • OOM at step 1.5M • Restarting | + +These are our actual models training on our hardware in our Singapore office. Click any run to see: +- Live loss curves +- Training datasets +- Evaluation metrics +- Even our failures + +[Watch live training →](/train) + + +## Get Involved + +We build in public. Everything from our model training to our product roadmap is open. + +- [GitHub](link) - Contribute code +- [Handbook](link) - See how we train models +- [Discord](link) - Join the discussion diff --git a/website/src/content/products/models/jan-nano.mdx b/website/src/content/products/models/jan-nano.mdx new file mode 100644 index 000000000..4b321aeda --- /dev/null +++ b/website/src/content/products/models/jan-nano.mdx @@ -0,0 +1,33 @@ +--- +title: Jan Nano +description: Compact research model optimized for finding answers through tool use. +sidebar: + order: 2 +--- +import { Aside } from '@astrojs/starlight/components'; + +Jan Nano is a 4-billion parameter model designed for research and information retrieval. Instead of trying to know everything, it excels at finding anything through deep integration with Model Context Protocol (MCP) tools. + +## Two Variants + +| Model | Context Window | Size | Use Case | +|:---|:---|:---|:---| +| Jan Nano 32k | 32,768 tokens | 4-8GB | Quick research, general queries | +| Jan Nano 128k | 131,072 tokens | 8-12GB | Deep research, document analysis | + + + +## What Makes Nano Different +- **Research-First Design:** Trained to find relevant information, synthesize findings, and provide accurate citations. +- **MCP Integration:** Works seamlessly with tools like web search, document analysis, and code repositories. +- **Extended Context:** The 128k variant can process entire codebases, book-length documents, or 50+ research papers simultaneously. + +## Technical Details +- **Base:** 4B parameter transformer +- **Training:** Optimized for tool use and retrieval +- **Quantization:** Q4, Q8, FP16 variants available + +## Philosophy +Most models try to be encyclopedias. Jan Nano is a research assistant. It doesn't memorize the internet—it knows how to navigate it. \ No newline at end of file diff --git a/website/src/content/products/models/jan-v1.mdx b/website/src/content/products/models/jan-v1.mdx new file mode 100644 index 000000000..bde5817b2 --- /dev/null +++ b/website/src/content/products/models/jan-v1.mdx @@ -0,0 +1,51 @@ +--- +title: Jan Models +description: Specialized AI models trained in public for real tasks. +sidebar: + order: 1 +banner: + content: 'Watch live training progress below. First models releasing Q1 2025.' +--- +import { Aside } from '@astrojs/starlight/components'; + +## Not Just Another Model Family + +Jan Models aren't general-purpose chatbots. Each model is trained for specific tasks that matter in daily work: search, analysis, creative writing, coding, research. They work together, each handling what it does best. + +### Current Training Status + +| Model | Specialization | Size | Training Progress | Status | +|:------|:--------------|:-----|:------------------|:-------| +| Jan-Search | Web search + synthesis | 7B | ████████░░ 82% | Testing phase | +| Jan-Write | Creative + technical writing | 13B | ████░░░░░░ 41% | Active training | +| Jan-Analyze | Data analysis + reasoning | 13B | ██░░░░░░░░ 23% | Dataset prep | +| Jan-Code | Code generation + debugging | 7B | ░░░░░░░░░░ 0% | Starting Jan 2025 | + + + +### Why Specialized Models? + +One model can't excel at everything. GPT-4o, o3, o4, or Claude 4 Sonnet writing poetry +use the same weights to do math as well, which can be inefficient and expensive. + +Our approach: +- **Jan-Search** knows how to query, crawl, and synthesize +- **Jan-Write** understands tone, structure, and creativity +- **Jan-Analyze** excels at reasoning and data interpretation +- Models work together through the Jan orchestration layer + +### Built for the Ecosystem + +These aren't standalone models. They're designed to: +- Run efficiently on local hardware (quantized to 4-8GB) +- Work with Jan Tools (browser automation, file parsing, memory) +- Scale from laptop to server without code changes +- Share context and hand off tasks to each other + +### Help Us Improve + +Models are only as good as their real-world performance. [Test our models](link) against your actual use cases and vote on what works. + +We train on your feedback, not just benchmarks. diff --git a/website/src/content/products/platforms/desktop.mdx b/website/src/content/products/platforms/desktop.mdx new file mode 100644 index 000000000..31e7b059f --- /dev/null +++ b/website/src/content/products/platforms/desktop.mdx @@ -0,0 +1,118 @@ +--- +title: Jan Desktop +description: The foundation of your AI ecosystem. Runs on your hardware. +sidebar: + order: 2 +--- +import { Aside, Card, CardGrid, Tabs, TabItem } from '@astrojs/starlight/components'; + +Jan Desktop is your local AI workstation. Download it, run your own models, or connect to +cloud providers. Your computer, your choice. + +## How It Works + +### Default: Local Mode +Open Jan. Start chatting with Jan Nano. No internet, no account, no API keys. Your conversations +never leave your machine. + +### Optional: Cloud Mode +Need more power? Connect to: +- Your own Jan Server +- jan.ai (coming soon) +- Any OpenAI-compatible API + + + +## Why Desktop First + +Your desktop has the GPU, storage, and memory to run real AI models. Not toy versions. Not +demos. The same models that power ChatGPT-scale applications. + +More importantly: it becomes the hub for your other devices. Your phone connects to your +desktop. Your team connects to your desktop. Everything stays in your control. + +## Specifications + + + + Everything in `~/.local/share/jan`. Your data, your models, your configuration. Back it up, move it, delete + it - it's just files. + + + OpenAI-compatible API at `localhost:1337`. Any tool that works with OpenAI works with Jan. No + code changes. + + + NVIDIA CUDA acceleration out of the box. Automatically detects and uses available GPUs. CPU fallback always works. + + + Run any GGUF model from Hugging Face. Or our models. Or your fine-tuned models. If it's GGUF, it runs. + + + +## System Requirements + +**Minimum**: 8GB RAM, 10GB storage, any 64-bit OS from the last 5 years + +**Recommended**: 16GB RAM, NVIDIA GPU, 50GB storage for multiple models + +**Runs on**: Windows 10+, macOS 12+, Ubuntu 20.04+ + +## Installation + +```bash +# macOS/Linux +curl -sSL https://jan.ai/install.sh | bash + +# Windows +# Download from jan.ai/download +``` + + + +## For Developers + +### Use Jan as an OpenAI Drop-in + +```javascript +// Your existing OpenAI code +const openai = new OpenAI({ + apiKey: "not-needed", + baseURL: "http://localhost:1337/v1" +}); + +// Works exactly the same +const completion = await openai.chat.completions.create({ + model: "jan-nano", + messages: [{ role: "user", content: "Hello" }] +}); +``` + +### Available Endpoints +- `/v1/chat/completions` - Chat with any loaded model +- `/v1/models` - List available models +- `/v1/embeddings` - Generate embeddings +- `/routes` - See all available routes + +## The Foundation + +Jan Desktop isn't just an app. It's the foundation of your personal AI infrastructure: + +1. **Today**: Run models locally, connect to cloud APIs +2. **Soon**: Your phone connects to your desktop +3. **Next**: Your desktop serves your team +4. **Future**: Your personal AI that knows you, runs everywhere + +No subscriptions. No lock-in. Just software that's yours. + +--- + +**Next steps**: +- [Download Jan Desktop](https://jan.ai/download) +- [Try Jan Models →](../models/jan-v1) +- [Explore Tools →](../tools/search) diff --git a/website/src/content/products/platforms/jan-ai.mdx b/website/src/content/products/platforms/jan-ai.mdx new file mode 100644 index 000000000..2c570c7eb --- /dev/null +++ b/website/src/content/products/platforms/jan-ai.mdx @@ -0,0 +1,46 @@ +--- +title: Jan.ai +description: Cloud AI that respects your privacy. Web-based access to Jan with no setup required. +sidebar: + order: 1 +--- +import { Aside, Card, CardGrid } from '@astrojs/starlight/components'; + +![Jan Web](../../../assets/jan_web.png) + +**Status:** Beta Launch Soon 🚀 + +Web-based version of Jan with no setup required. Same default cloud mode for (soon) mobile and desktop users. + +## What is Jan Web? + +Jan Web is the cloud-hosted version of Jan that runs in your browser. No installation needed, instant access from any device, with the same AI experience you get locally. + + + +## How It Works + + + + You can sync conversations from Jan desktop to Jan Web. + + + Jan Web uses the same models you have access to on the go. + + + Visit (soon) ask.jan.ai directly in your browser for instant access to AI without downloading anything. + + + Share prompts, workflows, and collaborate on threads with your team members. + + + +## Pricing + +| Tier | Features | Price | +| :--- | :--- | :--- | +| **Free** | Free for everyone | $0 | +| **Pro** | Access our latest models
Access other cloud providers without API keys | Coming Soon | +| **Enterprise** | Self-host or we host it for you
Active support and SLAs
SSO integration
Team features | Contact Sales | \ No newline at end of file diff --git a/website/src/content/products/platforms/mobile.mdx b/website/src/content/products/platforms/mobile.mdx new file mode 100644 index 000000000..5729a23fd --- /dev/null +++ b/website/src/content/products/platforms/mobile.mdx @@ -0,0 +1,48 @@ +--- +title: Jan Mobile +description: Your AI assistant on the go. Seamlessly connect to local, desktop, or server models. +sidebar: + order: 3 +--- +import { Aside, Card, CardGrid } from '@astrojs/starlight/components'; + +![Jan Mobile](../../../assets/jan_mobile.png) + +**Status:** Coming Q4 2025 + +Jan Mobile brings the same AI experience to your phone. Connect to your desktop, your server, or run models locally. + +## How It Works + +Jan Mobile adapts to your situation: +- **At Home:** Connect to your Jan Desktop over WiFi. +- **At Work:** Connect to your company Jan Server. +- **On the Go:** Run Jan Nano on your phone or use a cloud model. + +## Three Modes, One Experience + +### Desktop Mode +Access larger, more powerful models running on your home computer. No phone battery drain. + +### Server Mode +Connect to your organization's private AI cloud for team collaboration and access to shared knowledge. + +### Local Mode +No connection? No problem. Run models like 'Jan Nano' directly on your phone for complete privacy and offline access. + +## Key Features + + + + + + + + + + +## Development Status +- Core architecture in progress +- Desktop/Server connection protocols next +- Jan Nano mobile optimization in progress +- Beta launch planned for Q4 2025 \ No newline at end of file diff --git a/website/src/content/products/platforms/server.mdx b/website/src/content/products/platforms/server.mdx new file mode 100644 index 000000000..fe3c4629d --- /dev/null +++ b/website/src/content/products/platforms/server.mdx @@ -0,0 +1,39 @@ +--- +title: Jan Server +description: Your own private AI cloud. Self-hosted AI for teams and enterprises. +sidebar: + order: 4 +--- + +import { Aside, Card, CardGrid } from '@astrojs/starlight/components'; + +![Jan Server](../../../assets/jan-server.png) + +**Status:** Coming Q2 2025 + +Jan Server is a powerful AI API platform with multi-user support that you can self-host. Deploy it on your hardware to create your own private AI cloud for your team or organization, or run it at scale with Jan's managed service. + +## Why Organizations Need This + +Jan Server gives you complete control over your AI infrastructure, ensuring total privacy, predictable costs, and compliance readiness. + +## Key Features + + + + + + + + + + +## Deployment Options +- **Docker:** Single command setup +- **Kubernetes:** Scale with your needs +- **Bare Metal:** Maximum control and performance + +## Scaling Guidelines +- **Small Teams (5-10 users):** Small GPU cluster +- **Departments (10-50 users):** 4-8 GPU cluster nodes +- **Enterprise (50+ users):** Multi-cluster setup with custom configurations \ No newline at end of file diff --git a/website/src/content/products/tools/browseruse.mdx b/website/src/content/products/tools/browseruse.mdx new file mode 100644 index 000000000..0363df1b9 --- /dev/null +++ b/website/src/content/products/tools/browseruse.mdx @@ -0,0 +1,32 @@ +--- +title: BrowserUse +description: Native browser automation for Jan, enabling AI to interact with the web on your behalf. +sidebar: + order: 3 +--- + +## Let Jan Use Your Browser + +`BrowserUse` is a native tool being developed for the Jan ecosystem that will allow the AI to securely control a browser to perform tasks, automate workflows, and interact with websites just like a human would. + +Think of it as an integrated, privacy-first automation layer that turns Jan from a conversational AI into a powerful agent for action. + +:::note +**This tool is not yet available.** We are designing `BrowserUse` to be a core component of Jan's agentic capabilities. +::: + +### Inspired by the Best + +While tools like [Browser Use](https://docs.browser-use.com/introduction) exist for developers, Jan's `BrowserUse` will be a built-in, user-friendly feature. No complex setup required—just grant permission and let Jan handle the rest. + +### Built on MCP + +The tool will be implemented as a native **Model Context Protocol (MCP)** server within Jan, ensuring secure and standardized communication between the AI model and the browser. This allows for powerful, auditable, and secure web interactions. + +### Planned Core Features: +- **Secure Sessions**: All browsing activity happens in an isolated, sandboxed environment. +- **Natural Language Control**: Simply tell Jan what you want to do (e.g., "Book a flight," "Research this topic and summarize the top 5 findings," "Apply for this job for me"). +- **Visual Understanding**: Jan will be able to see and interpret the content on pages, not just the underlying code. +- **User in the Loop**: Always ask for permission before taking critical actions like submitting forms or making purchases. + +--- diff --git a/website/src/content/products/tools/deepresearch.mdx b/website/src/content/products/tools/deepresearch.mdx new file mode 100644 index 000000000..f518a9185 --- /dev/null +++ b/website/src/content/products/tools/deepresearch.mdx @@ -0,0 +1,27 @@ +--- +title: DeepResearch +description: An AI agent that performs comprehensive, multi-step research for you. +sidebar: + order: 1 +--- +import { Aside } from '@astrojs/starlight/components'; + + + +## Your Personal Research Analyst + +`DeepResearch` is a planned native tool for Jan that transforms it into a powerful research agent. Give it a complex question, and it will autonomously browse, analyze, and synthesize information from numerous sources to deliver a comprehensive, structured report. + +Think of it as Jan's answer to the advanced research capabilities seen in **OpenAI's ChatGPT** and **Google's Gemini**, but built in the open and with user control at its core. + +### How It Will Work +Unlike a simple web search that returns a list of links, `DeepResearch` will understand your goal, create a research plan that you can edit, execute it, and deliver a final, synthesized document with citations. + +### Planned Core Features: +- **Autonomous Multi-Step Research** +- **Comprehensive Source Analysis** +- **Structured Report Generation** +- **Full Transparency with Citations** +- **Local-First Privacy** \ No newline at end of file diff --git a/website/src/content/products/tools/search.mdx b/website/src/content/products/tools/search.mdx new file mode 100644 index 000000000..3b8bb56b1 --- /dev/null +++ b/website/src/content/products/tools/search.mdx @@ -0,0 +1,29 @@ +--- +title: Search +description: A native search tool that gives you answers, not just links, with complete privacy. +sidebar: + order: 2 +--- +import { Aside } from '@astrojs/starlight/components'; + + + +## Answers, Not Just Links + +'Search' is a planned native tool for Jan that rethinks web search. Instead of just giving you a list of links to sift through, it understands your question, scours the web, and provides a direct, synthesized answer with sources cited. + +Think of it as a private, self-hosted alternative to services like **Perplexity.ai**, integrated directly into your AI assistant. + +### How It's Different +- **Privacy-First:** Your search queries are processed locally and anonymized. +- **Direct Answers:** Get a concise, accurate answer compiled from the best sources. +- **Cited Sources:** Every piece of information is backed by a verifiable source. +- **Conversational Follow-up:** Ask follow-up questions in a natural way. + +### Planned Core Features: +- **Real-Time Information** +- **Source Verification** +- **Customizable Focus** +- **Seamless Integration** with other tools \ No newline at end of file diff --git a/website/src/layouts/BaseLayout.astro b/website/src/layouts/BaseLayout.astro new file mode 100644 index 000000000..70b6691f5 --- /dev/null +++ b/website/src/layouts/BaseLayout.astro @@ -0,0 +1,238 @@ +--- +export interface Props { + title?: string; + description?: string; +} + +const { title = 'Jan', description = 'AI that runs where you need it, how you need it' } = Astro.props; +--- + + + + + + + + {title} + + + + +
+ +
+ + diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro new file mode 100644 index 000000000..591effc34 --- /dev/null +++ b/website/src/layouts/Layout.astro @@ -0,0 +1,64 @@ +--- +export interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + {title} + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/pages/api-reference.astro b/website/src/pages/api-reference.astro new file mode 100644 index 000000000..ac3d9b4f5 --- /dev/null +++ b/website/src/pages/api-reference.astro @@ -0,0 +1,58 @@ +--- +const title = '👋 Jan API Reference'; +const description = 'Interactive Jan API documentation powered by Scalar'; +--- + + + + + + + + {title} + + + +
+ + + + + + \ No newline at end of file diff --git a/website/src/pages/prods.mdx b/website/src/pages/prods.mdx new file mode 100644 index 000000000..0c8fc7ba3 --- /dev/null +++ b/website/src/pages/prods.mdx @@ -0,0 +1,534 @@ +--- +layout: ../layouts/BaseLayout.astro +title: Product +description: AI that runs where you need it, how you need it +--- + +import SimpleFloatingNav from '../components/SimpleFloatingNav.astro'; +import SimpleTOC from '../components/SimpleTOC.astro'; +import ReleaseDatabase from '../components/ReleaseDatabase.astro'; + + + + + +
+ +# Products + +

+Jan is moving from a local AI application to a complete full-stack AI solution that you can self-host. This includes models, +applications, and tools that delights users and help them solve their problems. +

+ +## What We're Building + +**Jan Factory (or Agent)** = Jan Models + Jan Application + Jan Tools + +Unlike other AI assistants that do specific tasks with one model or have many models with a myriad of solutions, Jan provides: +- Its own specialised models that are optimised at specific tasks like web-search, creative writing, and translation +- Applications that work across all of your devices in an integrated way +- Tools that actually get things done + +## Two Modes, One Experience + +### Local (Incognito) Mode + +Run AI models entirely on your device, giving you complete privacy with no internet required. + +![Jan Desktop](../assets/jan_desktop.png) + +### Cloud Mode + +Connect to more powerful models when needed - either self-hosted or via jan.ai. + +![Jan Everywhere](../assets/jan_everywhere.png) + +Users shouldn't need to understand models, APIs, or technical details. Just choose Local for privacy or Cloud for power. + +## Our Product Principles + +### 1) It Just Works + +1. Open Jan, start chatting +2. Onboarding is fully available but optional +3. Setting up an API key is optional +4. Selecting a local model is optional +5. Become a power user at your own pace, if you want to + +We handle the complexity. + +### 2) Cloud When Needed + +Start completely locally and own your AI models. Add cloud capabilities only when you choose to. + +### 3) Solve Problems, Not Settings + +We help users get to answers quickly answers, not configuration options. Power users can dig deeper, but it's never required. + +## Available on Every Device + +### Jan Desktop + +This is how Jan started and it has been available since day 1. Jan Desktop stives to be: + +> Your personal AI workstation that helps with our use cases and powers other devices. Run models locally right away +or bring an API key to connect to your favorite cloud-based models. + +**Key Features:** +- Runs models locally on your hardware +- GPU acceleration support +- Powers other devices via network connection +- Complete privacy and control +- Windows, macOS, and Linux support + +**Requirements:** +- Minimum 8GB RAM +- 10GB+ storage space +- Optional: NVIDIA GPU for acceleration + +### Jan Web + +**Status:** Beta Launch Soon + +![Jan Web](../assets/jan_web.png) + +Web-based version of 👋 Jan with no setup required. Same default cloud mode for mobile and desktop users. + +**Key Features:** +- No installation needed +- Instant access from any browser +- Automatic updates and maintenance +- Default cloud backend for mobile apps +- Team collaboration features + - Share prompts + - Share workflows + - Collaborate on threads + +**Pricing:** +- Free for everyone +- Pro: + - Access our latest models + - Access other cloud providers, no need to bring their API keys +- Enterprise: + - Self-host or we host it for you + - Active support and SLAs + - SSO + - Team featues + +### Jan Mobile + +**Status:** Coming Q4 2025 + +Connect to Desktop/Server, run local mode with Jan Nano or Lucy, same experience everywhere. + +Jan Mobile adapts to your situation: + +At Home, you can connect to your Jan Desktop over WiFi + +![Jan Mobile Home](../assets/jan_mobile2.png) + +At Work, you can connect to your company Jan Server + +![Jan Mobile Home](../assets/jan_mobile3.png) + +On the Go, you can run Jan Nano on your phone or talk to your favourite cloud-based model + +![Jan Mobile Home](../assets/jan_mobile4.png) + +**Key Features:** +- iOS and Android support +- Three adaptive modes (Desktop, Server, Local) +- Voice-first interface +- Seamless device switching +- Jan Nano for on-device AI + +### Jan Server + +**Status:** Coming Q2 2025 + +Self-hosted solution for teams and enterprises. Your own private AI cloud. + +**Key Features:** +- Support for 5-500+ concurrent users +- Enterprise authentication (SSO, LDAP) +- Docker and Kubernetes deployment +- Admin dashboard +- Team knowledge sharing + +**Deployment Options:** +- Docker: Single command setup +- Kubernetes: Enterprise scale +- Bare metal: Maximum control + +## Jan Mobile: Three Modes, One Experience + +Jan Mobile brings the same AI experience to your phone. Connect to your desktop, your server, or run models locally. + +### How It Works + +Jan Mobile adapts to your situation: + +**At Home** - Connect to your Jan Desktop over WiFi +Your Phone → WiFi → Your Desktop → Response + +**At Work** - Connect to your company Jan Server +Your Phone → Internet → Company Server → Response + +**On the Go** - Run Jan Nano on your phone or talk to your favorite cloud-based model +Your Phone → Jan Nano (6GB) → Response + +No configuration needed. It just works. + +### Key Features + +- **Seamless Switching**: Move from home to office to airplane. One-click and Jan adapts immediately. +- **Voice First**: Talk to Jan naturally. Responses can be spoken too. +- **Sync Everything**: Conversations, settings, and preferences follow you across devices. + +### Privacy & Security + +**Your Data, Your Control** +- Local Mode: Everything stays on your phone +- Desktop Mode: Direct encrypted connection +- Server Mode: Your organization's policies apply + +**No Compromises** +- Biometric app lock +- Encrypted storage +- No cloud backups without permission +- Clear data anytime + +## What Makes Jan Different + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureOther AI AssistantsJan
ModelsWrapper around Claude/GPTOur own models + You can own them
Dual modeYour data on their serversYour data stays yours
DeploymentCloud onlyLocal, self-hosted, or cloud
CostSubscription foreverFree locally, pay for cloud
+ +## Development Timeline + + + +
+ + + + diff --git a/website/src/pages/products/index.astro b/website/src/pages/products/index.astro new file mode 100644 index 000000000..03cca8501 --- /dev/null +++ b/website/src/pages/products/index.astro @@ -0,0 +1,47 @@ +--- +// Products index page with custom sidebar for root deployment +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../content/products/index.mdx'; +--- + + + + diff --git a/website/src/pages/products/models/jan-nano.astro b/website/src/pages/products/models/jan-nano.astro new file mode 100644 index 000000000..4c1e8381b --- /dev/null +++ b/website/src/pages/products/models/jan-nano.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/models/jan-nano.mdx'; +--- + + + + diff --git a/website/src/pages/products/models/jan-v1.astro b/website/src/pages/products/models/jan-v1.astro new file mode 100644 index 000000000..2c41301aa --- /dev/null +++ b/website/src/pages/products/models/jan-v1.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/models/jan-v1.mdx'; +--- + + + + diff --git a/website/src/pages/products/platforms/desktop.astro b/website/src/pages/products/platforms/desktop.astro new file mode 100644 index 000000000..1f8b7ccc2 --- /dev/null +++ b/website/src/pages/products/platforms/desktop.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/platforms/desktop.mdx'; +--- + + + + diff --git a/website/src/pages/products/platforms/jan-ai.astro b/website/src/pages/products/platforms/jan-ai.astro new file mode 100644 index 000000000..98ffadb77 --- /dev/null +++ b/website/src/pages/products/platforms/jan-ai.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/platforms/jan-ai.mdx'; +--- + + + + diff --git a/website/src/pages/products/platforms/mobile.astro b/website/src/pages/products/platforms/mobile.astro new file mode 100644 index 000000000..b8741938c --- /dev/null +++ b/website/src/pages/products/platforms/mobile.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/platforms/mobile.mdx'; +--- + + + + diff --git a/website/src/pages/products/platforms/server.astro b/website/src/pages/products/platforms/server.astro new file mode 100644 index 000000000..390cd690d --- /dev/null +++ b/website/src/pages/products/platforms/server.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/platforms/server.mdx'; +--- + + + + diff --git a/website/src/pages/products/tools/browseruse.astro b/website/src/pages/products/tools/browseruse.astro new file mode 100644 index 000000000..48df73f29 --- /dev/null +++ b/website/src/pages/products/tools/browseruse.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/tools/browseruse.mdx'; +--- + + + + diff --git a/website/src/pages/products/tools/deepresearch.astro b/website/src/pages/products/tools/deepresearch.astro new file mode 100644 index 000000000..5bf97d7e6 --- /dev/null +++ b/website/src/pages/products/tools/deepresearch.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/tools/deepresearch.mdx'; +--- + + + + diff --git a/website/src/pages/products/tools/search.astro b/website/src/pages/products/tools/search.astro new file mode 100644 index 000000000..4f373ca24 --- /dev/null +++ b/website/src/pages/products/tools/search.astro @@ -0,0 +1,46 @@ +--- +import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; +import { Content } from '../../../content/products/tools/search.mdx'; +--- + + + + diff --git a/website/src/scripts/robot-interactions.js b/website/src/scripts/robot-interactions.js new file mode 100644 index 000000000..143cb2697 --- /dev/null +++ b/website/src/scripts/robot-interactions.js @@ -0,0 +1,697 @@ +// Robot Interactions - Make robots come alive with personality! + +class RobotInteractions { + constructor() { + this.robots = []; + this.mousePosition = { x: 0, y: 0 }; + this.isInitialized = false; + + // Robot moods and states + this.moods = ['happy', 'curious', 'excited', 'sleepy', 'thinking']; + this.currentMood = 'happy'; + + // Easter egg: secret robot dance + this.konami = []; + this.konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']; + } + + init() { + if (this.isInitialized) return; + + this.findRobots(); + this.setupEventListeners(); + this.startIdleAnimations(); + this.setupEasterEggs(); + + this.isInitialized = true; + } + + findRobots() { + // Find all robot elements + const robotElements = document.querySelectorAll('.robot-head, .robot-container, .model-robot, .platform-robot, .tool-robot'); + + robotElements.forEach(robot => { + const eyes = robot.querySelectorAll('.robot-eye'); + if (eyes.length > 0) { + this.robots.push({ + element: robot, + eyes: Array.from(eyes), + originalPositions: Array.from(eyes).map(eye => { + const rect = eye.getBoundingClientRect(); + return { + x: rect.left + rect.width / 2, + y: rect.top + rect.height / 2 + }; + }), + isBlinking: false, + mood: 'happy' + }); + } + }); + } + + setupEventListeners() { + // Track mouse movement + document.addEventListener('mousemove', (e) => { + this.mousePosition = { x: e.clientX, y: e.clientY }; + this.updateEyes(); + }); + + // Robot hover interactions + this.robots.forEach(robot => { + robot.element.addEventListener('mouseenter', () => this.onRobotHover(robot)); + robot.element.addEventListener('mouseleave', () => this.onRobotLeave(robot)); + robot.element.addEventListener('click', () => this.onRobotClick(robot)); + }); + + // Keyboard interactions + document.addEventListener('keydown', (e) => this.handleKeyPress(e)); + } + + updateEyes() { + this.robots.forEach(robot => { + if (robot.isBlinking) return; + + robot.eyes.forEach((eye, index) => { + // Skip sleeping or closed eyes + if (eye.classList.contains('sleeping') || eye.classList.contains('closed')) return; + + const eyeRect = eye.getBoundingClientRect(); + const eyeCenter = { + x: eyeRect.left + eyeRect.width / 2, + y: eyeRect.top + eyeRect.height / 2 + }; + + // Calculate angle between eye and mouse + const angle = Math.atan2( + this.mousePosition.y - eyeCenter.y, + this.mousePosition.x - eyeCenter.x + ); + + // Calculate distance (capped for natural movement) + const distance = Math.min( + Math.hypot( + this.mousePosition.x - eyeCenter.x, + this.mousePosition.y - eyeCenter.y + ) / 10, + 3 // Maximum pupil movement + ); + + // Move the pupil (eye shine) + const pupil = eye.querySelector('::after') || eye; + const offsetX = Math.cos(angle) * distance; + const offsetY = Math.sin(angle) * distance; + + // Apply transform to eye or create inner pupil + if (!eye.querySelector('.pupil')) { + const pupilElement = document.createElement('div'); + pupilElement.className = 'pupil'; + eye.appendChild(pupilElement); + } + + const pupilElement = eye.querySelector('.pupil'); + if (pupilElement) { + pupilElement.style.transform = `translate(${offsetX}px, ${offsetY}px)`; + } + }); + }); + } + + onRobotHover(robot) { + // Add excited animation + robot.element.classList.add('hover-active'); + + // Make eyes bigger + robot.eyes.forEach(eye => { + eye.style.transform = 'scale(1.2)'; + eye.classList.add('excited'); + }); + + // Add blush effect + this.addBlush(robot); + + // Random reaction + const reactions = ['happy', 'surprised', 'love']; + const reaction = reactions[Math.floor(Math.random() * reactions.length)]; + + if (reaction === 'love') { + robot.eyes.forEach(eye => eye.classList.add('love')); + } + } + + onRobotLeave(robot) { + robot.element.classList.remove('hover-active'); + + // Reset eyes + robot.eyes.forEach(eye => { + eye.style.transform = ''; + eye.classList.remove('excited', 'love'); + }); + + // Remove blush + this.removeBlush(robot); + } + + onRobotClick(robot) { + // Trigger a fun animation + this.makeRobotJump(robot); + this.makeRobotSpeak(robot); + + // Easter egg: clicking 5 times makes robot do a dance + if (!robot.clickCount) robot.clickCount = 0; + robot.clickCount++; + + if (robot.clickCount >= 5) { + this.robotDance(robot); + robot.clickCount = 0; + } + } + + makeRobotJump(robot) { + robot.element.style.animation = 'robotJump 0.6s ease-out'; + setTimeout(() => { + robot.element.style.animation = ''; + }, 600); + } + + makeRobotSpeak(robot) { + const messages = [ + "Hello there! 👋", + "Beep boop! 🤖", + "AI at your service!", + "Let's build something cool!", + "Privacy first! 🔒", + "Running locally! 💪", + "*happy robot noises*", + "01001000 01101001! (Hi in binary!)" + ]; + + const message = messages[Math.floor(Math.random() * messages.length)]; + this.showSpeechBubble(robot, message); + } + + showSpeechBubble(robot, message) { + // Remove existing bubble + const existingBubble = robot.element.querySelector('.robot-speech-bubble'); + if (existingBubble) existingBubble.remove(); + + // Create new bubble + const bubble = document.createElement('div'); + bubble.className = 'robot-speech-bubble'; + bubble.innerHTML = ` + ${message} +
+ `; + + robot.element.appendChild(bubble); + + // Remove after 3 seconds + setTimeout(() => { + bubble.classList.add('fade-out'); + setTimeout(() => bubble.remove(), 300); + }, 3000); + } + + startIdleAnimations() { + // Random blinking + setInterval(() => { + this.robots.forEach(robot => { + if (Math.random() < 0.1 && !robot.isBlinking) { + this.makeRobotBlink(robot); + } + }); + }, 2000); + + // Random mood changes + setInterval(() => { + const robot = this.robots[Math.floor(Math.random() * this.robots.length)]; + if (robot && Math.random() < 0.3) { + this.changeRobotMood(robot); + } + }, 5000); + } + + makeRobotBlink(robot) { + robot.isBlinking = true; + + robot.eyes.forEach(eye => { + eye.style.transition = 'height 0.1s ease'; + eye.style.height = '2px'; + + setTimeout(() => { + eye.style.height = ''; + robot.isBlinking = false; + }, 150); + }); + } + + changeRobotMood(robot) { + const moods = ['thinking', 'happy', 'curious']; + const mood = moods[Math.floor(Math.random() * moods.length)]; + + switch(mood) { + case 'thinking': + this.showThinkingBubbles(robot); + break; + case 'happy': + this.makeRobotSmile(robot); + break; + case 'curious': + this.makeRobotLookAround(robot); + break; + } + } + + showThinkingBubbles(robot) { + const bubbles = document.createElement('div'); + bubbles.className = 'thinking-bubbles'; + bubbles.innerHTML = ` +
+
+
💭
+ `; + + robot.element.appendChild(bubbles); + + setTimeout(() => { + bubbles.classList.add('fade-out'); + setTimeout(() => bubbles.remove(), 300); + }, 3000); + } + + makeRobotSmile(robot) { + const smile = robot.element.querySelector('.robot-smile'); + if (smile) { + smile.classList.add('big-smile'); + setTimeout(() => smile.classList.remove('big-smile'), 2000); + } + } + + makeRobotLookAround(robot) { + let direction = -1; + const lookInterval = setInterval(() => { + robot.eyes.forEach(eye => { + eye.style.transform = `translateX(${direction * 3}px)`; + }); + direction *= -1; + }, 500); + + setTimeout(() => { + clearInterval(lookInterval); + robot.eyes.forEach(eye => { + eye.style.transform = ''; + }); + }, 2000); + } + + addBlush(robot) { + const head = robot.element.querySelector('.robot-head') || robot.element; + + ['left', 'right'].forEach(side => { + const blush = document.createElement('div'); + blush.className = `robot-blush ${side}`; + head.appendChild(blush); + }); + } + + removeBlush(robot) { + const blushes = robot.element.querySelectorAll('.robot-blush'); + blushes.forEach(blush => blush.remove()); + } + + setupEasterEggs() { + // Konami code for robot dance party + document.addEventListener('keydown', (e) => { + this.konami.push(e.key); + this.konami = this.konami.slice(-10); + + if (this.konami.join(',') === this.konamiCode.join(',')) { + this.robotDanceParty(); + } + }); + + // Secret robot activation phrase + let secretPhrase = ''; + document.addEventListener('keypress', (e) => { + secretPhrase += e.key; + secretPhrase = secretPhrase.slice(-10); + + if (secretPhrase.includes('robot')) { + this.activateSecretRobotMode(); + } + }); + } + + robotDanceParty() { + document.body.classList.add('robot-dance-party'); + + // Make all robots dance + this.robots.forEach((robot, index) => { + setTimeout(() => { + this.robotDance(robot); + }, index * 200); + }); + + // Add disco lights + this.addDiscoLights(); + + // Stop after 10 seconds + setTimeout(() => { + document.body.classList.remove('robot-dance-party'); + this.removeDiscoLights(); + }, 10000); + } + + robotDance(robot) { + robot.element.classList.add('dancing'); + + // Random dance moves + const dances = ['wiggle', 'spin', 'bounce', 'shake']; + const dance = dances[Math.floor(Math.random() * dances.length)]; + + robot.element.style.animation = `robot-${dance} 1s ease-in-out infinite`; + + setTimeout(() => { + robot.element.style.animation = ''; + robot.element.classList.remove('dancing'); + }, 5000); + } + + addDiscoLights() { + const disco = document.createElement('div'); + disco.className = 'disco-lights'; + disco.innerHTML = ` +
🪩
+
+
+
+
+ `; + document.body.appendChild(disco); + } + + removeDiscoLights() { + const disco = document.querySelector('.disco-lights'); + if (disco) disco.remove(); + } + + activateSecretRobotMode() { + // Make all robots super happy + this.robots.forEach(robot => { + robot.eyes.forEach(eye => { + eye.classList.add('sparkle', 'rainbow'); + }); + + this.showSpeechBubble(robot, "Secret mode activated! 🎉"); + }); + + // Remove after 5 seconds + setTimeout(() => { + this.robots.forEach(robot => { + robot.eyes.forEach(eye => { + eye.classList.remove('sparkle', 'rainbow'); + }); + }); + }, 5000); + } + + handleKeyPress(e) { + // Number keys change robot expressions + if (e.key >= '1' && e.key <= '9') { + const expressions = ['happy', 'sad', 'surprised', 'angry', 'love', 'sleepy', 'wink', 'dizzy', 'cool']; + const expression = expressions[parseInt(e.key) - 1]; + + if (expression) { + this.robots.forEach(robot => { + this.setRobotExpression(robot, expression); + }); + } + } + } + + setRobotExpression(robot, expression) { + // Clear previous expressions + const allExpressions = ['happy', 'sad', 'surprised', 'angry', 'love', 'sleepy', 'wink', 'dizzy', 'cool']; + robot.eyes.forEach(eye => { + allExpressions.forEach(exp => eye.classList.remove(exp)); + eye.classList.add(expression); + }); + + // Remove after 3 seconds + setTimeout(() => { + robot.eyes.forEach(eye => { + eye.classList.remove(expression); + }); + }, 3000); + } +} + +// Initialize when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + window.robotInteractions = new RobotInteractions(); + window.robotInteractions.init(); + }); +} else { + window.robotInteractions = new RobotInteractions(); + window.robotInteractions.init(); +} + +// Add required styles dynamically +const style = document.createElement('style'); +style.textContent = ` + /* Pupil for eye tracking */ + .robot-eye .pupil { + position: absolute; + top: 50%; + left: 50%; + width: 40%; + height: 40%; + background: white; + border-radius: 50%; + transform: translate(-50%, -50%); + transition: transform 0.1s ease-out; + pointer-events: none; + } + + /* Speech bubble */ + .robot-speech-bubble { + position: absolute; + bottom: 110%; + left: 50%; + transform: translateX(-50%); + background: white; + color: #1A1A2E; + padding: 0.75rem 1rem; + border-radius: 20px; + border: 3px solid #1A1A2E; + font-size: 0.9rem; + font-weight: 600; + white-space: nowrap; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + animation: bubbleIn 0.3s ease-out; + z-index: 100; + } + + .robot-speech-bubble.fade-out { + animation: bubbleOut 0.3s ease-in forwards; + } + + .bubble-tail { + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 10px solid white; + } + + .bubble-tail::before { + content: ''; + position: absolute; + bottom: 2px; + left: -10px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 12px solid #1A1A2E; + } + + /* Thinking bubbles */ + .thinking-bubbles { + position: absolute; + top: -40px; + right: -20px; + animation: bubbleFloat 3s ease-in-out; + } + + .thinking-bubbles.fade-out { + animation: fadeOut 0.3s ease-in forwards; + } + + .think-bubble { + position: absolute; + background: white; + border: 2px solid #1A1A2E; + border-radius: 50%; + } + + .think-bubble.small { + width: 8px; + height: 8px; + bottom: 0; + left: 0; + } + + .think-bubble.medium { + width: 12px; + height: 12px; + bottom: 10px; + left: -5px; + } + + .think-bubble.large { + width: 30px; + height: 30px; + bottom: 25px; + left: -15px; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + } + + /* Big smile animation */ + .robot-smile.big-smile { + width: 30px !important; + height: 15px !important; + border-width: 4px !important; + } + + /* Dance animations */ + @keyframes robot-wiggle { + 0%, 100% { transform: rotate(-5deg); } + 50% { transform: rotate(5deg); } + } + + @keyframes robot-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + @keyframes robot-bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } + } + + @keyframes robot-shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } + } + + @keyframes robotJump { + 0%, 100% { transform: translateY(0) scale(1); } + 50% { transform: translateY(-30px) scale(1.1); } + } + + @keyframes bubbleIn { + 0% { opacity: 0; transform: translateX(-50%) scale(0.8); } + 100% { opacity: 1; transform: translateX(-50%) scale(1); } + } + + @keyframes bubbleOut { + 0% { opacity: 1; transform: translateX(-50%) scale(1); } + 100% { opacity: 0; transform: translateX(-50%) scale(0.8); } + } + + @keyframes fadeOut { + 0% { opacity: 1; } + 100% { opacity: 0; } + } + + @keyframes bubbleFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-5px); } + } + + /* Disco mode */ + .disco-lights { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + z-index: 9999; + } + + .disco-ball { + position: absolute; + top: 50px; + left: 50%; + transform: translateX(-50%); + font-size: 60px; + animation: discoSpin 2s linear infinite; + } + + .light-beam { + position: absolute; + top: 100px; + left: 50%; + width: 100px; + height: 500px; + opacity: 0.3; + transform-origin: top center; + animation: lightSweep 4s ease-in-out infinite; + } + + .light-beam.red { background: linear-gradient(transparent, #FF006E); } + .light-beam.blue { background: linear-gradient(transparent, #3A86FF); animation-delay: 1s; } + .light-beam.green { background: linear-gradient(transparent, #06FFA5); animation-delay: 2s; } + .light-beam.yellow { background: linear-gradient(transparent, #FFB700); animation-delay: 3s; } + + @keyframes discoSpin { + 0% { transform: translateX(-50%) rotate(0deg); } + 100% { transform: translateX(-50%) rotate(360deg); } + } + + @keyframes lightSweep { + 0%, 100% { transform: translateX(-50%) rotate(-30deg); } + 50% { transform: translateX(-50%) rotate(30deg); } + } + + /* Rainbow eyes */ + .robot-eye.rainbow { + animation: rainbowEyes 2s linear infinite; + } + + @keyframes rainbowEyes { + 0% { background: #FF006E; } + 25% { background: #3A86FF; } + 50% { background: #06FFA5; } + 75% { background: #FFB700; } + 100% { background: #FF006E; } + } + + /* Sparkle effect */ + .robot-eye.sparkle::before { + content: '✨'; + position: absolute; + top: -10px; + right: -10px; + font-size: 12px; + animation: sparkleFloat 1s ease-in-out infinite; + } + + @keyframes sparkleFloat { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-5px) rotate(180deg); } + } +`; + +document.head.appendChild(style); diff --git a/website/src/styles/hand-drawn.css b/website/src/styles/hand-drawn.css new file mode 100644 index 000000000..fe64e358e --- /dev/null +++ b/website/src/styles/hand-drawn.css @@ -0,0 +1,667 @@ +/* Hand-Drawn UI Styles - PostHog-inspired playful design */ + +/* ===== HAND-DRAWN BORDERS ===== */ +.hand-drawn-border { + position: relative; + border: none !important; +} + +.hand-drawn-border::before { + content: ''; + position: absolute; + inset: -2px; + background: transparent; + border: 3px solid currentColor; + border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; + pointer-events: none; +} + +.hand-drawn-border.thick::before { + border-width: 4px; + inset: -3px; +} + +.hand-drawn-border.animated::before { + animation: borderWobble 8s ease-in-out infinite; +} + +@keyframes borderWobble { + 0%, 100% { + border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; + } + 25% { + border-radius: 15px 255px 15px 225px/225px 15px 255px 15px; + } + 50% { + border-radius: 225px 15px 255px 15px/15px 255px 15px 225px; + } + 75% { + border-radius: 15px 225px 15px 255px/255px 15px 225px 15px; + } +} + +/* ===== SKETCHY BUTTONS ===== */ +.btn-sketchy { + position: relative; + background: var(--robot-yellow); + color: var(--robot-dark); + padding: 1rem 2rem; + border: none; + font-weight: 700; + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; + overflow: visible; +} + +.btn-sketchy::before { + content: ''; + position: absolute; + inset: -3px; + background: var(--robot-yellow); + transform: rotate(-1deg); + border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; + z-index: -1; + transition: all 0.3s ease; +} + +.btn-sketchy::after { + content: ''; + position: absolute; + inset: 0; + border: 3px solid var(--robot-dark); + border-radius: 225px 15px 255px 15px/15px 255px 15px 225px; + transform: rotate(0.5deg); +} + +.btn-sketchy:hover { + transform: translateY(-2px) rotate(-0.5deg); +} + +.btn-sketchy:hover::before { + transform: rotate(-2deg) scale(1.05); + background: var(--robot-orange); +} + +.btn-sketchy:hover::after { + transform: rotate(1deg); +} + +.btn-sketchy:active { + transform: translateY(0) rotate(0deg); +} + +/* ===== HAND-DRAWN ARROWS ===== */ +.arrow-doodle { + position: relative; + width: 100px; + height: 50px; +} + +.arrow-doodle svg { + width: 100%; + height: 100%; + overflow: visible; +} + +.arrow-doodle path { + fill: none; + stroke: var(--robot-dark); + stroke-width: 3; + stroke-linecap: round; + stroke-linejoin: round; +} + +.arrow-doodle.animated path { + stroke-dasharray: 100; + stroke-dashoffset: 100; + animation: drawArrow 2s ease-in-out infinite; +} + +@keyframes drawArrow { + 0% { stroke-dashoffset: 100; } + 50% { stroke-dashoffset: 0; } + 100% { stroke-dashoffset: -100; } +} + +/* ===== WOBBLY UNDERLINES ===== */ +.underline-wobble { + position: relative; + text-decoration: none; + display: inline-block; +} + +.underline-wobble::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + right: 0; + height: 3px; + background: currentColor; + clip-path: polygon( + 0% 50%, + 2% 35%, + 4% 65%, + 6% 45%, + 8% 55%, + 10% 40%, + 12% 60%, + 14% 50%, + 16% 35%, + 18% 65%, + 20% 45%, + 22% 55%, + 24% 40%, + 26% 60%, + 28% 50%, + 30% 35%, + 32% 65%, + 34% 45%, + 36% 55%, + 38% 40%, + 40% 60%, + 42% 50%, + 44% 35%, + 46% 65%, + 48% 45%, + 50% 55%, + 52% 40%, + 54% 60%, + 56% 50%, + 58% 35%, + 60% 65%, + 62% 45%, + 64% 55%, + 66% 40%, + 68% 60%, + 70% 50%, + 72% 35%, + 74% 65%, + 76% 45%, + 78% 55%, + 80% 40%, + 82% 60%, + 84% 50%, + 86% 35%, + 88% 65%, + 90% 45%, + 92% 55%, + 94% 40%, + 96% 60%, + 98% 50%, + 100% 50% + ); +} + +.underline-wobble:hover::after { + animation: wobbleUnderline 0.5s ease-in-out; +} + +@keyframes wobbleUnderline { + 0%, 100% { transform: translateY(0); } + 25% { transform: translateY(-2px); } + 75% { transform: translateY(2px); } +} + +/* ===== SKETCH CIRCLES ===== */ +.circle-sketch { + position: relative; + width: 100px; + height: 100px; + background: var(--robot-blue); +} + +.circle-sketch::before { + content: ''; + position: absolute; + inset: -5px; + background: transparent; + border: 3px solid var(--robot-dark); + border-radius: 50%; + clip-path: polygon( + 50% 0%, + 52% 2%, + 54% 1%, + 56% 3%, + 58% 2%, + 60% 0%, + 62% 1%, + 64% 3%, + 66% 2%, + 68% 1%, + 70% 0%, + 72% 2%, + 74% 3%, + 76% 1%, + 78% 2%, + 80% 0%, + 82% 1%, + 84% 3%, + 86% 2%, + 88% 1%, + 90% 0%, + 92% 2%, + 94% 1%, + 96% 3%, + 98% 2%, + 100% 0%, + 100% 50%, + 98% 52%, + 99% 54%, + 97% 56%, + 98% 58%, + 100% 60%, + 99% 62%, + 97% 64%, + 98% 66%, + 99% 68%, + 100% 70%, + 98% 72%, + 97% 74%, + 99% 76%, + 98% 78%, + 100% 80%, + 99% 82%, + 97% 84%, + 98% 86%, + 99% 88%, + 100% 90%, + 98% 92%, + 99% 94%, + 97% 96%, + 98% 98%, + 100% 100%, + 50% 100%, + 48% 98%, + 46% 99%, + 44% 97%, + 42% 98%, + 40% 100%, + 38% 99%, + 36% 97%, + 34% 98%, + 32% 99%, + 30% 100%, + 28% 98%, + 26% 97%, + 24% 99%, + 22% 98%, + 20% 100%, + 18% 99%, + 16% 97%, + 14% 98%, + 12% 99%, + 10% 100%, + 8% 98%, + 6% 99%, + 4% 97%, + 2% 98%, + 0% 100%, + 0% 50%, + 2% 48%, + 1% 46%, + 3% 44%, + 2% 42%, + 0% 40%, + 1% 38%, + 3% 36%, + 2% 34%, + 1% 32%, + 0% 30%, + 2% 28%, + 3% 26%, + 1% 24%, + 2% 22%, + 0% 20%, + 1% 18%, + 3% 16%, + 2% 14%, + 1% 12%, + 0% 10%, + 2% 8%, + 1% 6%, + 3% 4%, + 2% 2%, + 0% 0% + ); +} + +/* ===== ROUGH PAPER TEXTURE ===== */ +.paper-texture { + position: relative; + background: + repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.03) 2px, + rgba(0, 0, 0, 0.03) 4px + ), + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.03) 2px, + rgba(0, 0, 0, 0.03) 4px + ), + linear-gradient( + 135deg, + #ffffff 0%, + #f8f8f8 100% + ); +} + +.paper-texture::before { + content: ''; + position: absolute; + inset: 0; + background: url('data:image/svg+xml;utf8,'); + pointer-events: none; +} + +/* ===== HANDWRITING FONTS ===== */ +@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Caveat:wght@400;700&display=swap'); + +.handwriting { + font-family: 'Kalam', cursive; + letter-spacing: 0.02em; +} + +.handwriting-alt { + font-family: 'Caveat', cursive; + font-size: 1.2em; +} + +/* ===== DOODLE CHECKBOX ===== */ +.checkbox-doodle { + position: relative; + width: 24px; + height: 24px; + cursor: pointer; +} + +.checkbox-doodle input { + position: absolute; + opacity: 0; + width: 100%; + height: 100%; + cursor: pointer; +} + +.checkbox-doodle .checkbox-box { + position: absolute; + inset: 0; + background: white; + border: 3px solid var(--robot-dark); + border-radius: 4px; + transform: rotate(-2deg); + transition: all 0.3s ease; +} + +.checkbox-doodle .checkbox-check { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0) rotate(-45deg); + width: 12px; + height: 6px; + border-left: 3px solid var(--robot-green); + border-bottom: 3px solid var(--robot-green); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.checkbox-doodle input:checked ~ .checkbox-box { + background: var(--robot-yellow); + transform: rotate(2deg); +} + +.checkbox-doodle input:checked ~ .checkbox-check { + transform: translate(-50%, -50%) scale(1) rotate(-45deg); +} + +.checkbox-doodle:hover .checkbox-box { + transform: rotate(-4deg) scale(1.1); + border-color: var(--robot-blue); +} + +/* ===== TOOLTIP BUBBLE ===== */ +.tooltip-bubble { + position: relative; + display: inline-block; +} + +.tooltip-bubble .tooltip-content { + position: absolute; + bottom: 125%; + left: 50%; + transform: translateX(-50%) scale(0); + background: var(--robot-dark); + color: white; + padding: 0.75rem 1rem; + border-radius: 15px 15px 15px 2px; + font-size: 0.9rem; + white-space: nowrap; + box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); + transform-origin: bottom center; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.tooltip-bubble .tooltip-content::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 10px solid var(--robot-dark); + margin-left: -8px; +} + +.tooltip-bubble:hover .tooltip-content { + transform: translateX(-50%) scale(1); +} + +/* ===== WIGGLE TEXT ===== */ +.text-wiggle { + display: inline-block; + animation: textWiggle 2s ease-in-out infinite; +} + +.text-wiggle.subtle { + animation-duration: 4s; +} + +@keyframes textWiggle { + 0%, 100% { transform: rotate(-1deg); } + 50% { transform: rotate(1deg); } +} + +/* ===== HAND-DRAWN DIVIDER ===== */ +.divider-sketch { + width: 100%; + height: 20px; + margin: 2rem 0; + background: url('data:image/svg+xml;utf8,') center/contain no-repeat; +} + +/* ===== SCRIBBLE BACKGROUND ===== */ +.scribble-bg { + position: relative; + overflow: hidden; +} + +.scribble-bg::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: url('data:image/svg+xml;utf8,') 0 0/50px 50px; + transform: rotate(-5deg); + opacity: 0.1; + pointer-events: none; +} + +/* ===== STICKY NOTE ===== */ +.sticky-note { + position: relative; + background: #fff740; + padding: 1.5rem; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); + transform: rotate(-2deg); + transition: all 0.3s ease; +} + +.sticky-note::before { + content: ''; + position: absolute; + top: -8px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 16px; + background: rgba(0, 0, 0, 0.1); + border-radius: 8px; +} + +.sticky-note:hover { + transform: rotate(0deg) scale(1.02); + box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.15); +} + +.sticky-note.pink { background: #ff9ff3; } +.sticky-note.blue { background: #54a0ff; } +.sticky-note.green { background: #1dd1a1; } + +/* ===== MARKER HIGHLIGHT ===== */ +.highlight-marker { + position: relative; + display: inline-block; + color: var(--robot-dark); + padding: 0 0.2em; +} + +.highlight-marker::before { + content: ''; + position: absolute; + bottom: 0; + left: -0.1em; + right: -0.1em; + height: 0.8em; + background: var(--robot-yellow); + opacity: 0.4; + transform: skew(-5deg); + z-index: -1; + transition: all 0.3s ease; +} + +.highlight-marker:hover::before { + height: 1.2em; + opacity: 0.6; +} + +.highlight-marker.pink::before { background: var(--robot-pink); } +.highlight-marker.blue::before { background: var(--robot-blue); } +.highlight-marker.green::before { background: var(--robot-green); } + +/* ===== ROUGH SHADOW ===== */ +.shadow-rough { + position: relative; +} + +.shadow-rough::after { + content: ''; + position: absolute; + inset: 4px -4px -4px 4px; + background: rgba(0, 0, 0, 0.2); + border-radius: inherit; + transform: rotate(-1deg); + z-index: -1; + filter: blur(2px); +} + +/* ===== HAND-DRAWN PROGRESS BAR ===== */ +.progress-sketch { + position: relative; + width: 100%; + height: 30px; + background: white; + border: 3px solid var(--robot-dark); + border-radius: 15px; + overflow: hidden; + transform: rotate(-1deg); +} + +.progress-sketch .progress-fill { + height: 100%; + background: repeating-linear-gradient( + 45deg, + var(--robot-green), + var(--robot-green) 10px, + transparent 10px, + transparent 20px + ); + border-right: 3px solid var(--robot-dark); + transition: width 0.5s ease; + animation: progressSlide 1s linear infinite; +} + +@keyframes progressSlide { + 0% { background-position: 0 0; } + 100% { background-position: 20px 0; } +} + +/* ===== UTILITY CLASSES ===== */ +.wiggle { animation: wiggle 2s ease-in-out infinite; } +.bounce { animation: bounce 3s ease-in-out infinite; } +.float { animation: float 4s ease-in-out infinite; } +.shake { animation: shake 0.5s ease-in-out infinite; } + +@keyframes wiggle { + 0%, 100% { transform: rotate(-2deg); } + 50% { transform: rotate(2deg); } +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } +} + +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } +} + +/* ===== ACCESSIBILITY ===== */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ===== RESPONSIVE ADJUSTMENTS ===== */ +@media (max-width: 768px) { + .btn-sketchy { + padding: 0.75rem 1.5rem; + font-size: 0.9rem; + } + + .sticky-note { + padding: 1rem; + } +} diff --git a/website/src/styles/products-architecture.css b/website/src/styles/products-architecture.css new file mode 100644 index 000000000..3ff9d0a3e --- /dev/null +++ b/website/src/styles/products-architecture.css @@ -0,0 +1,577 @@ +/* ProductsArchitecture Component Styles */ + +.architecture-section { + background: var(--light-gray); + border-top: 1px solid var(--border-color); +} + +.architecture-section .badge-robot-head { + background: var(--pastel-blue); +} + +/* Architecture Stack */ +.architecture-stack { + margin: 4rem 0; + max-width: 900px; + margin-left: auto; + margin-right: auto; + position: relative; +} + +.stack-layer { + background: white; + border-radius: 20px; + border: 3px solid var(--border-color); + padding: 2rem; + margin-bottom: 2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + position: relative; + display: flex; + align-items: center; + gap: 2rem; +} + +.stack-layer:hover { + transform: translateX(8px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); +} + +.tools-layer { + border-color: var(--gentle-orange); + border-left-width: 8px; +} + +.models-layer { + border-color: var(--soft-green); + border-left-width: 8px; +} + +.platforms-layer { + border-color: var(--primary-blue); + border-left-width: 8px; + margin-bottom: 0; +} + +.layer-number { + position: absolute; + top: -15px; + left: 2rem; + width: 30px; + height: 30px; + background: var(--primary-blue); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.1rem; + border: 3px solid white; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +} + +.layer-robot { + flex-shrink: 0; +} + +/* Robot Designs */ +.tools-robot, +.models-robot, +.platforms-robot { + position: relative; +} + +.tools-robot .robot-head, +.models-robot .robot-head, +.platforms-robot .robot-head { + width: 60px; + height: 60px; + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto 10px; + position: relative; +} + +.tools-robot .robot-body, +.models-robot .robot-body, +.platforms-robot .robot-body { + width: 70px; + height: 80px; + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.tools-robot .robot-head, +.tools-robot .robot-body { + background: var(--gentle-orange); +} + +.models-robot .robot-head, +.models-robot .robot-body { + background: var(--soft-green); +} + +.platforms-robot .robot-head, +.platforms-robot .robot-body { + background: var(--pastel-blue); +} + +.robot-eyes { + display: flex; + justify-content: space-between; + padding: 12px 8px; +} + +.robot-eye { + width: 12px; + height: 12px; + background: var(--dark-text); + border-radius: 50%; + position: relative; +} + +.robot-eye::after { + content: ''; + position: absolute; + top: 2px; + right: 2px; + width: 3px; + height: 3px; + background: white; + border-radius: 50%; +} + +.robot-eye.thinking { + animation: thinking 3s infinite ease-in-out; +} + +.robot-smile { + position: absolute; + bottom: 8px; + left: 50%; + transform: translateX(-50%); + width: 15px; + height: 8px; + border: 3px solid var(--dark-text); + border-top: none; + border-radius: 0 0 12px 12px; +} + +.robot-smile { + position: absolute; + bottom: 8px; + left: 50%; + transform: translateX(-50%); + width: 15px; + height: 8px; + border: 3px solid var(--dark-text); + border-top: none; + border-radius: 0 0 12px 12px; +} + +/* Robot-specific details */ +.robot-base { + margin-top: 5px; +} + +.base-foundation { + width: 50px; + height: 8px; + background: var(--medium-gray); + border-radius: 4px; + border: 2px solid var(--dark-text); + margin: 0 auto; +} + +.layer-content { + flex: 1; +} + +.layer-content h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.75rem; +} + +.layer-content p { + color: var(--medium-gray); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.layer-features { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.feature-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; + font-weight: 500; +} + +.feature-status { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid var(--dark-text); +} + +.feature-item.active .feature-status { + background: var(--success-green); + animation: pulse 2s infinite; +} + +.feature-item.beta .feature-status { + background: var(--warning-amber); + animation: pulse 2s infinite; +} + +.feature-item.coming .feature-status { + background: var(--medium-gray); +} + +/* Connection Lines */ +.layer-connection { + position: absolute; + bottom: -2rem; + left: 50%; + width: 4px; + height: 2rem; + background-color: var(--border-color); + z-index: -1; +} + +.platforms-layer .layer-connection { + display: none; +} + +.data-flow { + position: absolute; + top: 0; + left: -4px; + right: -4px; + height: 100%; +} + +.flow-packet { + position: absolute; + width: 6px; + height: 6px; + background: var(--primary-blue); + border-radius: 50%; + animation: flowData 3s infinite linear; + left: 50%; + transform: translateX(-50%); +} + +.flow-packet:nth-child(2) { + animation-delay: 1s; +} +.flow-packet:nth-child(3) { + animation-delay: 2s; +} + +/* Architecture Benefits */ +.architecture-benefits { + margin: 4rem 0; +} + +.architecture-benefits h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.benefit-card { + background: white; + border-radius: 16px; + border: 2px solid var(--border-color); + padding: 2rem; + text-align: center; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; +} + +.benefit-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); + border-color: var(--primary-blue); +} + +.benefit-robot { + margin-bottom: 1rem; +} + +.benefit-robot .robot-head { + width: 40px; + height: 40px; + background: var(--warm-yellow); + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto 6px; + position: relative; +} + +.benefit-robot .robot-body { + width: 50px; + height: 60px; + background: var(--gentle-orange); + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.benefit-card h4 { + font-size: 1.3rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.benefit-card p { + color: var(--medium-gray); + line-height: 1.6; +} + +/* Interactive Demo */ +.architecture-demo { + margin: 4rem 0; + background: white; + border-radius: 20px; + border: 2px solid var(--border-color); + padding: 3rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.architecture-demo h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.demo-container { + max-width: 800px; + margin: 0 auto; +} + +.scenario-title { + text-align: center; + font-size: 1.2rem; + font-weight: 600; + color: var(--primary-blue); + margin-bottom: 2rem; + padding: 1rem; + background: var(--light-blue); + border-radius: 10px; + border: 2px solid var(--primary-blue); +} + +.demo-flow { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +.flow-step { + background: var(--cream-white); + border-radius: 12px; + border: 2px solid var(--border-color); + padding: 1.5rem; + text-align: center; + max-width: 200px; + transition: all 0.3s ease; +} + +.flow-step:hover { + border-color: var(--primary-blue); + transform: scale(1.05); +} + +.step-number { + width: 30px; + height: 30px; + background: var(--primary-blue); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + margin: 0 auto 1rem; +} + +.step-content { + font-size: 0.9rem; + line-height: 1.4; +} + +.step-content strong { + color: var(--primary-blue); + display: block; + margin-bottom: 0.5rem; +} + +.flow-arrow { + width: 30px; + height: 2px; + background: var(--primary-blue); + position: relative; +} + +.flow-arrow::after { + content: ''; + position: absolute; + right: -5px; + top: -3px; + width: 0; + height: 0; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 8px solid var(--primary-blue); +} + +/* Animations */ +@keyframes thinking { + 0%, + 100% { + transform: scaleY(1); + } + 50% { + transform: scaleY(0.8); + } +} + +@keyframes flowData { + 0% { + top: 0; + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + top: 100%; + opacity: 0; + } +} + +@keyframes pulse { + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.2); + opacity: 0.7; + } +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .stack-layer { + flex-direction: column; + text-align: center; + gap: 1.5rem; + } + + .layer-connection { + display: none; + } + + .benefits-grid { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + } +} + +@media (max-width: 768px) { + .architecture-stack { + margin: 3rem 0; + } + + .stack-layer { + padding: 1.5rem; + margin-bottom: 1.5rem; + } + + .layer-content h3 { + font-size: 1.3rem; + } + + .demo-flow { + flex-direction: column; + } + + .flow-arrow { + transform: rotate(90deg); + } + + .architecture-demo { + padding: 2rem; + } +} + +@media (max-width: 480px) { + .stack-layer { + padding: 1.25rem; + } + + .benefits-grid { + grid-template-columns: 1fr; + } + + .benefit-card { + padding: 1.5rem; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + .robot-eye, + .flow-packet, + .feature-status, + .stack-layer, + .benefit-card, + .flow-step { + animation: none !important; + transition: none !important; + } +} + +/* High contrast mode */ +@media (prefers-contrast: high) { + .stack-layer, + .benefit-card, + .architecture-demo { + border-width: 3px; + } +} diff --git a/website/src/styles/products-models.css b/website/src/styles/products-models.css new file mode 100644 index 000000000..d691759f7 --- /dev/null +++ b/website/src/styles/products-models.css @@ -0,0 +1,758 @@ +/* ProductsModels Component Styles */ + +.models-section { + background: var(--cream-white); + border-top: 1px solid var(--border-color); +} + +.models-section .badge-robot-head { + background: var(--soft-pink); +} + +/* Models Grid */ +.models-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 2rem; + margin: 4rem 0; +} + +.model-card { + position: relative; + overflow: visible; +} + +.model-robot-section { + position: relative; + text-align: center; + margin-bottom: 2rem; +} + +.model-robot { + display: inline-block; + position: relative; + margin-bottom: 1rem; +} + +.model-robot .robot-head { + width: 70px; + height: 70px; + border-radius: 16px; + border: 3px solid var(--dark-text); + margin: 0 auto 12px; + position: relative; +} + +.model-robot .robot-body { + width: 80px; + height: 90px; + border-radius: 16px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +/* Robot variations */ +.v1-robot .robot-head { background: var(--success-green); } +.v1-robot .robot-body { background: var(--success-green); } + +.nano-robot .robot-head { background: var(--primary-blue); } +.nano-robot .robot-body { background: var(--primary-blue); } + +.lucy-robot .robot-head { background: var(--warning-amber); } +.lucy-robot .robot-body { background: var(--warning-amber); } + +.robot-eyes { + display: flex; + justify-content: space-between; + padding: 12px 10px; +} + +.robot-eye { + width: 14px; + height: 14px; + background: var(--dark-text); + border-radius: 50%; + position: relative; +} + +.robot-eye::after { + content: ''; + position: absolute; + top: 3px; + right: 3px; + width: 4px; + height: 4px; + background: white; + border-radius: 50%; +} + +.robot-eye.research { + background: var(--primary-blue); + animation: researchBlink 3s infinite ease-in-out; +} + +.robot-eye.sleeping { + height: 4px; + border-radius: 2px; + background: var(--dark-text); +} + +.robot-eye.sleeping::after { + display: none; +} + +.robot-antenna { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + width: 3px; + height: 15px; + background: var(--dark-text); + border-radius: 2px; +} + +.antenna-tip { + position: absolute; + top: -6px; + left: 50%; + transform: translateX(-50%); + width: 8px; + height: 8px; + border-radius: 50%; + border: 2px solid var(--dark-text); +} + +.antenna-tip.active { + background: var(--success-green); + animation: pulse 2s infinite; +} + +.robot-chest { + margin-bottom: 8px; +} + +.chest-panel { + display: flex; + flex-direction: column; + gap: 2px; +} + +.panel-line { + width: 20px; + height: 2px; + background: var(--dark-text); + border-radius: 1px; +} + +.panel-line.active { + background: white; + animation: dataFlow 2s infinite ease-in-out; +} + +.panel-line:nth-child(2) { animation-delay: 0.5s; } +.panel-line:nth-child(3) { animation-delay: 1s; } + +.robot-badge { + background: white; + color: var(--dark-text); + padding: 2px 8px; + border-radius: 8px; + font-size: 0.7rem; + font-weight: 700; + border: 2px solid var(--dark-text); +} + +.robot-scanner { + position: absolute; + top: 8px; + right: 8px; + width: 12px; + height: 12px; +} + +.scanner-beam { + width: 100%; + height: 2px; + background: var(--primary-blue); + border-radius: 1px; + animation: scan 3s infinite ease-in-out; +} + +.research-display { + display: flex; + gap: 3px; +} + +.display-dot { + width: 4px; + height: 4px; + background: white; + border-radius: 50%; + animation: pulse 2s infinite; +} + +.display-dot:nth-child(2) { animation-delay: 0.5s; } +.display-dot:nth-child(3) { animation-delay: 1s; } + +.robot-vision-sensor { + position: absolute; + top: 5px; + left: 50%; + transform: translateX(-50%); + width: 16px; + height: 16px; +} + +.vision-ring { + width: 100%; + height: 100%; + border: 2px solid var(--dark-text); + border-radius: 50%; + position: relative; +} + +.vision-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 6px; + height: 6px; + background: var(--error-red); + border-radius: 50%; +} + +.multimodal-display { + display: flex; + gap: 2px; +} + +.modal-icon { + width: 6px; + height: 6px; + border-radius: 2px; + border: 1px solid var(--dark-text); +} + +.modal-icon.vision { background: var(--primary-blue); } +.modal-icon.text { background: var(--success-green); } +.modal-icon.audio { background: var(--medium-gray); } + +.robot-progress { + margin-top: 8px; + text-align: center; +} + +.progress-bar { + width: 40px; + height: 4px; + background: var(--border-color); + border-radius: 2px; + margin: 0 auto 4px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: var(--warning-amber); + border-radius: 2px; + width: 60%; + animation: training 3s infinite ease-in-out; +} + +.progress-text { + font-size: 0.7rem; + color: var(--medium-gray); + font-weight: 500; +} + +.robot-arms { + display: flex; + justify-content: space-between; + margin-top: -30px; + padding: 0 15px; + position: relative; + z-index: -1; +} + +.arm { + width: 10px; + height: 30px; + background: var(--gentle-orange); + border-radius: 5px; + border: 2px solid var(--dark-text); + transform-origin: top center; +} + +.robot-tools { + display: flex; + gap: 8px; + margin-top: 8px; +} + +.tool { + width: 8px; + height: 8px; + border-radius: 2px; + border: 1px solid var(--dark-text); +} + +.search-tool { background: var(--primary-blue); } +.analysis-tool { background: var(--success-green); } + +.model-status-bubble { + position: absolute; + top: -10px; + right: 1rem; +} + +/* Model Content */ +.model-content { + padding: 0; +} + +.model-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.model-header h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); +} + +.model-version { + background: var(--light-gray); + color: var(--medium-gray); + padding: 0.25rem 0.5rem; + border-radius: 8px; + font-size: 0.7rem; + font-weight: 600; + border: 1px solid var(--border-color); +} + +.model-description { + color: var(--medium-gray); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.model-specs { + margin-bottom: 1.5rem; +} + +.spec-section { + margin-bottom: 1rem; +} + +.spec-section h4 { + font-size: 0.9rem; + font-weight: 600; + color: var(--dark-text); + margin-bottom: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.spec-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + gap: 0.75rem; +} + +.spec-item { + background: var(--light-gray); + border-radius: 8px; + padding: 0.75rem; + text-align: center; + border: 1px solid var(--border-color); +} + +.spec-label { + font-size: 0.8rem; + font-weight: 600; + color: var(--primary-blue); + margin-bottom: 0.25rem; +} + +.spec-value { + font-size: 0.9rem; + color: var(--dark-text); + font-weight: 500; +} + +.spec-highlight { + background: var(--light-blue); + border: 2px solid var(--primary-blue); + border-radius: 10px; + padding: 1rem; + text-align: center; +} + +.highlight-label { + font-size: 0.8rem; + font-weight: 600; + color: var(--primary-blue); + margin-bottom: 0.25rem; + text-transform: uppercase; +} + +.highlight-value { + font-size: 1.2rem; + font-weight: 700; + color: var(--dark-text); +} + +.model-capabilities { + margin-bottom: 1.5rem; +} + +.model-capabilities h4 { + font-size: 0.9rem; + font-weight: 600; + color: var(--dark-text); + margin-bottom: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.capabilities-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 0.75rem; +} + +.capability { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 0.75rem; + border-radius: 10px; + border: 2px solid var(--border-color); + text-align: center; + font-size: 0.8rem; + font-weight: 500; + transition: all 0.3s ease; +} + +.capability:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +} + +.capability.active { + border-color: var(--success-green); + background: var(--soft-green); +} + +.capability.coming { + border-color: var(--medium-gray); + background: var(--light-gray); + color: var(--medium-gray); + border-style: dashed; +} + +.capability-icon { + width: 20px; + height: 20px; + border-radius: 4px; + border: 2px solid var(--dark-text); + position: relative; +} + +/* Capability icon colors */ +.capability-icon.reasoning { background: var(--primary-blue); } +.capability-icon.coding { background: var(--success-green); } +.capability-icon.multilingual { background: var(--warning-amber); } +.capability-icon.tools { background: var(--light-purple); } +.capability-icon.search { background: var(--primary-blue); } +.capability-icon.document { background: var(--warning-amber); } +.capability-icon.mobile { background: var(--success-green); } +.capability-icon.mcp { background: var(--light-purple); } +.capability-icon.image { background: var(--medium-gray); } +.capability-icon.ocr { background: var(--medium-gray); } +.capability-icon.visual { background: var(--medium-gray); } +.capability-icon.processing { background: var(--medium-gray); } + +/* Add small symbols to capability icons */ +.capability-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 6px; + height: 6px; + background: white; + border-radius: 2px; +} + +.capability-icon.reasoning::after { border-radius: 50%; } +.capability-icon.coding::after { width: 8px; height: 4px; } +.capability-icon.search::after { border-radius: 50%; width: 4px; height: 4px; } + +.model-metrics { + display: flex; + justify-content: space-around; + padding-top: 1rem; + border-top: 1px solid var(--border-color); +} + +.metric { + text-align: center; +} + +.metric-value { + font-size: 1.1rem; + font-weight: 700; + color: var(--primary-blue); + margin-bottom: 0.25rem; +} + +.metric-label { + font-size: 0.8rem; + color: var(--medium-gray); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Models Comparison */ +.models-comparison { + margin: 4rem 0; + background: white; + border-radius: 20px; + border: 2px solid var(--border-color); + padding: 3rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.models-comparison h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.comparison-table { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 1px; + background: var(--border-color); + border-radius: 12px; + overflow: hidden; +} + +.table-header { + display: contents; +} + +.header-cell { + background: var(--primary-blue); + color: white; + padding: 1rem; + font-weight: 700; + text-align: center; +} + +.table-row { + display: contents; +} + +.table-cell { + background: white; + padding: 1rem; + text-align: center; + font-size: 0.9rem; +} + +.feature-col { + font-weight: 600; + color: var(--dark-text); + text-align: left; +} + +.model-col { + color: var(--medium-gray); +} + +.status-indicator { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.5rem; + border-radius: 12px; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; +} + +.status-indicator::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; +} + +.status-indicator.active { + background: var(--soft-green); + color: var(--success-green); +} + +.status-indicator.active::before { + background: var(--success-green); +} + +.status-indicator.beta { + background: var(--warm-yellow); + color: var(--warning-amber); +} + +.status-indicator.beta::before { + background: var(--warning-amber); +} + +.status-indicator.coming { + background: var(--light-gray); + color: var(--medium-gray); +} + +.status-indicator.coming::before { + background: var(--medium-gray); +} + +/* Animations */ +@keyframes researchBlink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +@keyframes scan { + 0% { transform: translateY(0) scaleX(1); } + 50% { transform: translateY(4px) scaleX(1.2); } + 100% { transform: translateY(8px) scaleX(1); } +} + +@keyframes training { + 0% { width: 0%; } + 50% { width: 80%; } + 100% { width: 60%; } +} + +@keyframes dataFlow { + 0%, 100% { opacity: 0.5; transform: scaleX(1); } + 50% { opacity: 1; transform: scaleX(1.2); } +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.1); opacity: 0.7; } +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .models-grid { + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + } + + .models-comparison { + padding: 2rem; + } + + .comparison-table { + font-size: 0.8rem; + } +} + +@media (max-width: 768px) { + .models-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .model-robot .robot-head { + width: 60px; + height: 60px; + } + + .model-robot .robot-body { + width: 70px; + height: 80px; + } + + .spec-grid { + grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); + } + + .capabilities-grid { + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + } + + .comparison-table { + grid-template-columns: 1fr; + gap: 0; + } + + .table-row { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 1px; + margin-bottom: 1px; + } + + .models-comparison { + padding: 1.5rem; + } +} + +@media (max-width: 480px) { + .model-content { + padding: 1rem; + } + + .model-specs { + margin-bottom: 1rem; + } + + .spec-grid { + grid-template-columns: 1fr 1fr; + } + + .capabilities-grid { + grid-template-columns: 1fr 1fr; + } + + .model-metrics { + flex-direction: column; + gap: 1rem; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + .robot-eye, .scanner-beam, .display-dot, .panel-line, .progress-fill, .antenna-tip, .capability { + animation: none !important; + transition: none !important; + } +} + +/* High contrast mode */ +@media (prefers-contrast: high) { + .model-card, .comparison-table { + border-width: 3px; + } + + .capability, .spec-item { + border-width: 2px; + } +} diff --git a/website/src/styles/products-platforms.css b/website/src/styles/products-platforms.css new file mode 100644 index 000000000..a5eaf7c23 --- /dev/null +++ b/website/src/styles/products-platforms.css @@ -0,0 +1,1009 @@ +/* Products Platforms Section Styles */ + +.platforms-section { + background: var(--light-gray); + position: relative; + overflow: hidden; +} + +/* Platforms Timeline */ +.platforms-timeline { + position: relative; + max-width: 1000px; + margin: 4rem auto; + padding: 0 2rem; +} + +.timeline-path { + position: absolute; + left: 50px; + top: 0; + bottom: 0; + width: 4px; + background: linear-gradient( + 180deg, + var(--primary-blue) 0%, + var(--soft-pink) 25%, + var(--warm-yellow) 50%, + var(--soft-green) 75%, + var(--primary-blue) 100% + ); + border-radius: 2px; +} + +.timeline-path::before { + content: ''; + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); + width: 12px; + height: 12px; + background: var(--primary-blue); + border-radius: 50%; + border: 3px solid white; +} + +/* Platform Items */ +.platform-item { + position: relative; + display: flex; + align-items: center; + gap: 3rem; + margin-bottom: 4rem; + opacity: 0; + transform: translateX(-50px); + animation: slideInFromLeft 0.6s ease-out forwards; +} + +.platform-item:nth-child(2) { animation-delay: 0.2s; } +.platform-item:nth-child(3) { animation-delay: 0.4s; } +.platform-item:nth-child(4) { animation-delay: 0.6s; } + +@keyframes slideInFromLeft { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideInFromRight { + from { + opacity: 0; + transform: translateX(50px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* Platform Robots Container */ +.platform-robot { + position: relative; + width: 150px; + flex-shrink: 0; + z-index: 2; +} + +.platform-robot .robot-head { + width: 60px; + height: 60px; + margin: 0 auto 10px; + border-radius: 15px; + border: 3px solid var(--dark-text); + position: relative; + transition: all 0.3s ease; +} + +.platform-robot .robot-body { + width: 80px; + height: 100px; + margin: 0 auto; + border-radius: 15px; + border: 3px solid var(--dark-text); + position: relative; + transition: all 0.3s ease; +} + +/* Desktop Robot Styles */ +.desktop-robot .robot-head { + background: linear-gradient(135deg, var(--primary-blue), var(--pastel-blue)); +} + +.desktop-robot .robot-body { + background: linear-gradient(135deg, var(--pastel-blue), var(--primary-blue)); +} + +.desktop-robot .robot-screen { + position: absolute; + top: 15px; + left: 50%; + transform: translateX(-50%); + width: 50px; + height: 30px; + background: #000; + border: 2px solid var(--primary-blue); + border-radius: 4px; + overflow: hidden; +} + +.screen-content { + padding: 4px; +} + +.screen-bar { + height: 2px; + background: var(--soft-green); + margin: 2px 0; + border-radius: 1px; + animation: codeFlow 2s ease-in-out infinite; +} + +.screen-bar:nth-child(2) { animation-delay: 0.5s; width: 80%; } +.screen-bar:nth-child(3) { animation-delay: 1s; width: 60%; } + +@keyframes codeFlow { + 0%, 100% { opacity: 0.3; transform: translateX(-10px); } + 50% { opacity: 1; transform: translateX(0); } +} + +.robot-keyboard { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 2px; +} + +.key { + width: 6px; + height: 6px; + background: var(--dark-text); + border-radius: 1px; +} + +.robot-base { + margin-top: 10px; +} + +.base-stand { + width: 40px; + height: 8px; + background: var(--dark-text); + margin: 0 auto; + border-radius: 4px; +} + +/* Web Robot Styles */ +.web-robot .robot-head { + background: linear-gradient(135deg, var(--light-blue), var(--soft-green)); +} + +.web-robot .robot-body { + background: linear-gradient(135deg, var(--soft-green), var(--light-blue)); +} + +.robot-browser { + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + width: 45px; + height: 35px; + background: white; + border: 2px solid var(--dark-text); + border-radius: 4px; + overflow: hidden; +} + +.browser-bar { + display: flex; + gap: 2px; + padding: 2px; + background: var(--light-gray); + border-bottom: 1px solid var(--border-color); +} + +.browser-dot { + width: 4px; + height: 4px; + border-radius: 50%; +} + +.browser-dot.red { background: #ff5f56; } +.browser-dot.yellow { background: #ffbd2e; } +.browser-dot.green { background: #27ca3f; } + +.browser-content { + padding: 4px; +} + +.content-line { + height: 2px; + background: var(--primary-blue); + margin: 2px 0; + border-radius: 1px; + width: 100%; +} + +.content-line.short { width: 70%; } + +.robot-cloud { + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 40px; + height: 40px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.cloud-icon { + font-size: 24px; +} + +.cloud-data { + display: flex; + gap: 2px; + margin-top: 4px; +} + +.data-bit { + width: 4px; + height: 4px; + background: var(--primary-blue); + border-radius: 50%; + animation: dataFlow 1.5s ease-in-out infinite; +} + +.data-bit:nth-child(2) { animation-delay: 0.5s; } + +@keyframes dataFlow { + 0%, 100% { opacity: 0; transform: translateY(0); } + 50% { opacity: 1; transform: translateY(-5px); } +} + +/* Mobile Robot Styles */ +.mobile-robot .robot-head { + background: linear-gradient(135deg, var(--warm-yellow), var(--gentle-orange)); +} + +.mobile-robot .robot-body { + background: linear-gradient(135deg, var(--gentle-orange), var(--warm-yellow)); +} + +.robot-phone { + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + width: 30px; + height: 40px; + background: #000; + border: 2px solid var(--dark-text); + border-radius: 6px; + overflow: hidden; +} + +.phone-screen { + margin: 2px; + height: calc(100% - 4px); + background: var(--primary-blue); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +.phone-ui { + display: flex; + flex-direction: column; + gap: 4px; +} + +.ui-element { + width: 20px; + height: 4px; + background: white; + border-radius: 2px; + opacity: 0.8; +} + +.robot-signal { + position: absolute; + top: 20px; + right: 10px; + display: flex; + gap: 2px; +} + +.signal-bar { + width: 3px; + height: 8px; + background: var(--dark-text); + border-radius: 1px; + opacity: 0.3; +} + +.signal-bar:nth-child(2) { height: 12px; opacity: 0.6; } +.signal-bar:nth-child(3) { height: 16px; opacity: 1; } + +.development-indicator { + position: absolute; + bottom: -30px; + left: 50%; + transform: translateX(-50%); + text-align: center; + width: 100%; +} + +.dev-progress { + width: 80px; + height: 4px; + background: var(--light-gray); + border-radius: 2px; + margin: 0 auto 8px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + width: 60%; + background: var(--warm-yellow); + border-radius: 2px; + animation: progressAnimation 2s ease-in-out infinite; +} + +@keyframes progressAnimation { + 0%, 100% { width: 60%; } + 50% { width: 80%; } +} + +.dev-text { + font-size: 0.8rem; + color: var(--medium-gray); + font-weight: 600; +} + +/* Server Robot Styles */ +.server-robot .robot-head { + background: linear-gradient(135deg, var(--dark-text), var(--medium-gray)); +} + +.server-robot .robot-body { + background: linear-gradient(135deg, var(--medium-gray), var(--dark-text)); +} + +.robot-server-display { + position: absolute; + top: 15px; + left: 50%; + transform: translateX(-50%); +} + +.server-lights { + display: flex; + gap: 4px; +} + +.light { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--success-green); + animation: serverBlink 2s ease-in-out infinite; +} + +.light:nth-child(2) { animation-delay: 0.5s; background: var(--warning-amber); } +.light:nth-child(3) { animation-delay: 1s; background: var(--error-red); } + +@keyframes serverBlink { + 0%, 100% { opacity: 0.3; } + 50% { opacity: 1; } +} + +.robot-rack { + padding: 20px 10px; +} + +.rack-unit { + width: 100%; + height: 8px; + background: var(--light-gray); + margin: 4px 0; + border-radius: 2px; + position: relative; + overflow: hidden; +} + +.rack-unit::after { + content: ''; + position: absolute; + top: 0; + left: -20px; + width: 20px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + animation: rackScan 3s linear infinite; +} + +@keyframes rackScan { + to { left: 100%; } +} + +.robot-connections { + margin-top: 10px; + display: flex; + justify-content: center; + gap: 8px; +} + +.connection-port { + width: 12px; + height: 6px; + background: var(--dark-text); + border-radius: 2px; +} + +/* Platform Cards */ +.platform-card { + flex: 1; + background: white; + border-radius: 20px; + border: 3px solid var(--border-color); + padding: 2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + position: relative; +} + +.platform-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); + border-color: var(--primary-blue); +} + +.platform-status { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.platform-status.available { + background: var(--success-green); + color: white; +} + +.platform-status.beta { + background: var(--warning-amber); + color: white; +} + +.platform-status.coming { + background: var(--medium-gray); + color: white; + border: 2px dashed white; +} + +.platform-card h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.5rem; +} + +.platform-card p { + color: var(--medium-gray); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +/* Platform Metrics */ +.platform-metrics { + display: flex; + gap: 2rem; + margin-bottom: 1.5rem; +} + +.metric { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.metric-icon { + width: 32px; + height: 32px; + background: var(--light-blue); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.metric-text { + display: flex; + flex-direction: column; +} + +.metric-value { + font-size: 1.2rem; + font-weight: 700; + color: var(--dark-text); +} + +.metric-label { + font-size: 0.8rem; + color: var(--medium-gray); +} + +/* Platform Features */ +.platform-features { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + margin-bottom: 1.5rem; +} + +.feature-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; +} + +.feature-icon { + width: 20px; + height: 20px; + background: var(--light-purple); + border-radius: 4px; + flex-shrink: 0; +} + +/* Platform Specs */ +.platform-specs { + display: flex; + gap: 1rem; + padding: 1rem; + background: var(--light-gray); + border-radius: 12px; +} + +.spec-item { + flex: 1; + text-align: center; +} + +.spec-label { + font-size: 0.8rem; + color: var(--medium-gray); + margin-bottom: 0.25rem; +} + +.spec-value { + font-size: 1rem; + font-weight: 700; + color: var(--dark-text); +} + +/* Mobile Modes */ +.mobile-modes { + margin-top: 2rem; + padding: 2rem; + background: var(--light-blue); + border-radius: 16px; +} + +.mobile-modes h4 { + text-align: center; + font-size: 1.3rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1.5rem; +} + +.modes-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.mode-card { + background: white; + border-radius: 12px; + padding: 1.5rem; + border: 2px solid transparent; + transition: all 0.3s ease; + cursor: pointer; +} + +.mode-card:hover { + border-color: var(--primary-blue); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); +} + +.mode-card.active { + border-color: var(--primary-blue); + background: var(--light-blue); +} + +.mode-icon { + display: flex; + justify-content: center; + margin-bottom: 1rem; +} + +.mode-robot-mini { + width: 40px; + height: 50px; + position: relative; +} + +.mini-head { + width: 20px; + height: 20px; + margin: 0 auto 5px; + border-radius: 6px; + border: 2px solid var(--dark-text); +} + +.mini-body { + width: 30px; + height: 25px; + margin: 0 auto; + border-radius: 6px; + border: 2px solid var(--dark-text); + display: flex; + align-items: center; + justify-content: center; +} + +.desktop-color { background: var(--primary-blue); } +.server-color { background: var(--medium-gray); } +.local-color { background: var(--soft-green); } + +.mode-content h5 { + font-size: 1.1rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.5rem; +} + +.mode-content p { + font-size: 0.9rem; + color: var(--medium-gray); + margin-bottom: 1rem; +} + +.mode-flow { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.8rem; + color: var(--primary-blue); + font-weight: 600; + margin-bottom: 1rem; +} + +.mode-benefits { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.benefit { + font-size: 0.85rem; + color: var(--dark-text); + padding-left: 1rem; + position: relative; +} + +.benefit::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--success-green); + font-weight: bold; +} + +/* Mobile Features */ +.mobile-features { + margin-top: 2rem; +} + +.mobile-features h4 { + font-size: 1.3rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1.5rem; +} + +.feature-highlight-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.feature-highlight { + display: flex; + gap: 1rem; +} + +.highlight-icon { + width: 48px; + height: 48px; + background: var(--light-purple); + border-radius: 12px; + flex-shrink: 0; +} + +.highlight-content h5 { + font-size: 1rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.25rem; +} + +.highlight-content p { + font-size: 0.85rem; + color: var(--medium-gray); + line-height: 1.5; +} + +/* Deployment Options */ +.deployment-options { + display: flex; + gap: 1rem; + margin-top: 1rem; +} + +.deploy-option { + flex: 1; + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1rem; + background: var(--light-gray); + border-radius: 8px; +} + +.deploy-icon { + width: 32px; + height: 32px; + background: var(--primary-blue); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: bold; +} + +.deploy-content { + display: flex; + flex-direction: column; +} + +.deploy-name { + font-size: 0.9rem; + font-weight: 600; + color: var(--dark-text); +} + +.deploy-desc { + font-size: 0.8rem; + color: var(--medium-gray); +} + +/* Platform Comparison */ +.platform-comparison { + margin: 4rem 0; +} + +.platform-comparison h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.comparison-grid { + background: white; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.comparison-header { + display: grid; + grid-template-columns: 2fr 2fr 1fr 2fr; + background: var(--light-gray); + font-weight: 700; + color: var(--dark-text); +} + +.header-item { + padding: 1rem; + border-right: 1px solid var(--border-color); +} + +.header-item:last-child { + border-right: none; +} + +.comparison-row { + display: grid; + grid-template-columns: 2fr 2fr 1fr 2fr; + border-bottom: 1px solid var(--border-color); + transition: all 0.3s ease; +} + +.comparison-row:last-child { + border-bottom: none; +} + +.comparison-row:hover { + background: var(--light-blue); +} + +.row-item { + padding: 1rem; + border-right: 1px solid var(--border-color); + display: flex; + align-items: center; +} + +.row-item:last-child { + border-right: none; +} + +.platform-name { + display: flex; + align-items: center; + gap: 0.75rem; + font-weight: 600; +} + +.platform-mini-icon { + width: 24px; + height: 24px; + border-radius: 6px; + border: 2px solid var(--dark-text); +} + +.desktop-mini { background: var(--primary-blue); } +.web-mini { background: var(--soft-green); } +.mobile-mini { background: var(--warm-yellow); } +.server-mini { background: var(--medium-gray); } + +.status-indicator { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 600; +} + +.status-indicator.active { + background: var(--success-green); + color: white; +} + +.status-indicator.beta { + background: var(--warning-amber); + color: white; +} + +.status-indicator.coming { + background: var(--light-gray); + color: var(--medium-gray); + border: 2px dashed var(--medium-gray); +} + +/* Hover Animation for Platform Robots */ +.platform-robot.hover-animation { + animation: robotHoverBounce 0.8s ease-in-out; +} + +@keyframes robotHoverBounce { + 0%, 100% { transform: translateY(0) scale(1); } + 50% { transform: translateY(-10px) scale(1.05); } +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .platforms-timeline { + padding: 0 1rem; + } + + .platform-item { + flex-direction: column; + text-align: center; + } + + .timeline-path { + display: none; + } + + .modes-grid { + grid-template-columns: 1fr; + } + + .comparison-grid { + overflow-x: auto; + } + + .comparison-header, + .comparison-row { + min-width: 600px; + } +} + +@media (max-width: 768px) { + .platform-robot { + transform: scale(0.8); + margin-bottom: 1rem; + } + + .platform-features { + grid-template-columns: 1fr; + } + + .platform-specs { + flex-direction: column; + gap: 0.5rem; + } + + .spec-item { + display: flex; + justify-content: space-between; + text-align: left; + } + + .mobile-features { + padding: 1rem; + } + + .feature-highlight-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .platform-card { + padding: 1.5rem; + } + + .platform-metrics { + flex-direction: column; + gap: 1rem; + } + + .deployment-options { + flex-direction: column; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } +} diff --git a/website/src/styles/products-principles.css b/website/src/styles/products-principles.css new file mode 100644 index 000000000..221fdbbfd --- /dev/null +++ b/website/src/styles/products-principles.css @@ -0,0 +1,1303 @@ +/* ProductsPrinciples Component Styles */ + +.principles-section { + background: var(--cream-white); + border-top: 1px solid var(--border-color); +} + +.principles-section .badge-robot-head { + background: var(--error-red); +} + +/* Main Comparison */ +.main-comparison { + margin: 4rem 0; +} + +.comparison-sides { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 2rem; + align-items: start; + max-width: 1000px; + margin: 0 auto; +} + +.comparison-side { + background: white; + border-radius: 20px; + border: 3px solid var(--border-color); + padding: 2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; +} + +.other-ai { + border-color: var(--error-red); + border-left-width: 6px; +} + +.jan-side { + border-color: var(--success-green); + border-left-width: 6px; +} + +.comparison-side:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); +} + +.side-header { + text-align: center; + margin-bottom: 2rem; +} + +.side-robot { + display: inline-block; + position: relative; + margin-bottom: 1rem; +} + +/* Other AI Robot (Corporate) */ +.other-robot .robot-head { + width: 60px; + height: 60px; + background: var(--error-red); + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto 10px; + position: relative; +} + +.other-robot .robot-body { + width: 70px; + height: 80px; + background: var(--error-red); + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.robot-eyes { + display: flex; + justify-content: space-between; + padding: 12px 8px; +} + +.robot-eye { + width: 12px; + height: 12px; + background: var(--dark-text); + border-radius: 50%; + position: relative; +} + +.robot-eye::after { + content: ''; + position: absolute; + top: 2px; + right: 2px; + width: 3px; + height: 3px; + background: white; + border-radius: 50%; +} + +.robot-eye.corporate { + background: var(--dark-text); + animation: corporateGlare 3s infinite ease-in-out; +} + +.robot-corporate-hat { + position: absolute; + top: -8px; + left: 50%; + transform: translateX(-50%); + width: 25px; + height: 15px; + background: var(--dark-text); + border-radius: 8px 8px 0 0; + display: flex; + align-items: center; + justify-content: center; +} + +.hat-logo { + color: var(--warning-amber); + font-size: 0.7rem; + font-weight: 700; +} + +.robot-tie { + width: 8px; + height: 25px; + background: var(--dark-text); + margin-bottom: 5px; + position: relative; +} + +.tie-pattern { + position: absolute; + top: 3px; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 4px; + background: var(--warning-amber); + border-radius: 50%; +} + +.robot-briefcase { + width: 20px; + height: 12px; + background: var(--dark-text); + border-radius: 2px; + display: flex; + align-items: center; + justify-content: center; +} + +.briefcase-lock { + width: 6px; + height: 6px; + background: var(--warning-amber); + border-radius: 2px; +} + +.robot-chains { + display: flex; + gap: 2px; + margin-top: 8px; +} + +.chain-link { + width: 8px; + height: 4px; + border: 1px solid var(--dark-text); + border-radius: 2px; + background: var(--medium-gray); +} + +/* Jan Robot (Friendly) */ +.jan-robot .robot-head { + width: 60px; + height: 60px; + background: var(--success-green); + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto 10px; + position: relative; +} + +.jan-robot .robot-body { + width: 70px; + height: 80px; + background: var(--success-green); + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.robot-eye.friendly { + background: var(--dark-text); + animation: friendlyBlink 4s infinite ease-in-out; +} + +.robot-smile { + position: absolute; + bottom: 12px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 10px; + border: 3px solid var(--dark-text); + border-top: none; + border-radius: 0 0 20px 20px; +} + +.robot-heart { + margin-bottom: 8px; + position: relative; +} + +.heart-beat { + width: 15px; + height: 15px; + background: var(--error-red); + border-radius: 50%; + position: relative; + animation: heartbeat 2s infinite; +} + +.heart-beat::before, +.heart-beat::after { + content: ''; + position: absolute; + width: 15px; + height: 15px; + background: var(--error-red); + border-radius: 50%; +} + +.heart-beat::before { + top: -7px; + left: 0; +} + +.heart-beat::after { + top: 0; + left: -7px; +} + +.robot-shield { + width: 18px; + height: 20px; + background: var(--primary-blue); + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + border: 2px solid var(--dark-text); + display: flex; + align-items: center; + justify-content: center; +} + +.shield-lock { + width: 6px; + height: 6px; + background: white; + border-radius: 2px; +} + +.robot-freedom { + margin-top: 8px; +} + +.freedom-wings { + display: flex; + gap: 4px; + align-items: center; +} + +.wing { + width: 12px; + height: 8px; + background: white; + border: 2px solid var(--dark-text); + border-radius: 50%; + animation: wingFlap 3s infinite ease-in-out; +} + +.left-wing { + animation-delay: 0s; +} + +.right-wing { + animation-delay: 0.5s; +} + +/* VS Divider */ +.vs-divider { + display: flex; + align-items: center; + justify-content: center; + padding: 2rem 0; +} + +.vs-robot { + position: relative; +} + +.vs-robot .robot-head { + width: 40px; + height: 40px; + background: var(--warning-amber); + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto 8px; + position: relative; +} + +.vs-robot .robot-body { + width: 50px; + height: 60px; + background: var(--warning-amber); + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.robot-eye.vs-eye { + animation: vsFlicker 1s infinite ease-in-out; +} + +.vs-text { + font-size: 1.2rem; + font-weight: 800; + color: var(--dark-text); +} + +.robot-lightning { + position: absolute; + top: -15px; + left: 50%; + transform: translateX(-50%); +} + +.lightning-bolt { + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 12px solid var(--warning-amber); + position: relative; +} + +.lightning-bolt::after { + content: ''; + position: absolute; + top: 8px; + left: -3px; + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 6px solid var(--warning-amber); +} + +.side-header h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.5rem; +} + +.side-header p { + color: var(--medium-gray); + font-size: 0.9rem; +} + +.side-features { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.feature-item { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1rem; + border-radius: 12px; + transition: all 0.3s ease; +} + +.feature-item.limitation { + background: var(--warm-yellow); + border: 2px solid var(--error-red); +} + +.feature-item.advantage { + background: var(--soft-green); + border: 2px solid var(--success-green); +} + +.feature-item:hover { + transform: translateX(4px); +} + +.feature-icon { + width: 30px; + height: 30px; + border-radius: 8px; + border: 2px solid var(--dark-text); + flex-shrink: 0; +} + +.feature-icon.wrapper { + background: var(--error-red); +} +.feature-icon.cloud-only { + background: var(--medium-gray); +} +.feature-icon.subscription { + background: var(--warning-amber); +} +.feature-icon.control { + background: var(--error-red); +} +.feature-icon.own-models { + background: var(--success-green); +} +.feature-icon.privacy-first { + background: var(--primary-blue); +} +.feature-icon.free-local { + background: var(--success-green); +} +.feature-icon.your-rules { + background: var(--primary-blue); +} + +.feature-content h4 { + font-size: 1rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.25rem; +} + +.feature-content p { + font-size: 0.9rem; + color: var(--medium-gray); + line-height: 1.4; +} + +/* Detailed Comparison */ +.detailed-comparison { + margin: 4rem 0; + background: white; + border-radius: 20px; + border: 2px solid var(--border-color); + padding: 3rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.detailed-comparison h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.comparison-table { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1px; + background: var(--border-color); + border-radius: 12px; + overflow: hidden; +} + +.table-header { + display: contents; +} + +.header-cell { + background: var(--primary-blue); + color: white; + padding: 1rem; + font-weight: 700; + text-align: center; +} + +.table-row { + display: contents; +} + +.table-cell { + background: white; + padding: 1rem; + text-align: center; + transition: all 0.3s ease; +} + +.feature-col { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + font-weight: 600; + color: var(--dark-text); +} + +.feature-robot { + position: relative; +} + +.robot-mini-head { + width: 20px; + height: 20px; + border-radius: 6px; + border: 2px solid var(--dark-text); + margin: 0 auto 4px; +} + +.robot-mini-body { + width: 25px; + height: 30px; + border-radius: 6px; + border: 2px solid var(--dark-text); + margin: 0 auto; +} + +.models-feature .robot-mini-head { + background: var(--soft-pink); +} +.models-feature .robot-mini-body { + background: var(--soft-pink); +} + +.privacy-feature .robot-mini-head { + background: var(--primary-blue); +} +.privacy-feature .robot-mini-body { + background: var(--primary-blue); +} + +.deployment-feature .robot-mini-head { + background: var(--success-green); +} +.deployment-feature .robot-mini-body { + background: var(--success-green); +} + +.cost-feature .robot-mini-head { + background: var(--warning-amber); +} +.cost-feature .robot-mini-body { + background: var(--warning-amber); +} + +.control-feature .robot-mini-head { + background: var(--light-purple); +} +.control-feature .robot-mini-body { + background: var(--light-purple); +} + +.limitation-indicator { + background: var(--warm-yellow); + color: var(--error-red); + padding: 0.5rem 1rem; + border-radius: 8px; + font-weight: 600; + border: 2px solid var(--error-red); +} + +.advantage-indicator { + background: var(--soft-green); + color: var(--success-green); + padding: 0.5rem 1rem; + border-radius: 8px; + font-weight: 600; + border: 2px solid var(--success-green); +} + +/* Philosophy Cards */ +.philosophy-cards { + margin: 4rem 0; +} + +.philosophy-cards h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.philosophy-card { + background: white; + border-radius: 16px; + border: 2px solid var(--border-color); + padding: 2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + text-align: center; +} + +.philosophy-card:hover { + border-color: var(--primary-blue); +} + +.card-robot { + margin-bottom: 1.5rem; + display: inline-block; +} + +.card-robot .robot-head { + width: 50px; + height: 50px; + border-radius: 12px; + border: 3px solid var(--dark-text); + margin: 0 auto 8px; + position: relative; +} + +.card-robot .robot-body { + width: 60px; + height: 70px; + border-radius: 12px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.models-card .card-robot .robot-head { + background: var(--soft-pink); +} +.models-card .card-robot .robot-body { + background: var(--soft-pink); +} + +.infrastructure-card .card-robot .robot-head { + background: var(--success-green); +} +.infrastructure-card .card-robot .robot-body { + background: var(--success-green); +} + +.tools-card .card-robot .robot-head { + background: var(--warning-amber); +} +.tools-card .card-robot .robot-body { + background: var(--warning-amber); +} + +.robot-brain { + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); +} + +.brain-core { + width: 15px; + height: 10px; + background: var(--primary-blue); + border-radius: 8px; + border: 2px solid var(--dark-text); +} + +.model-display { + display: flex; + flex-direction: column; + gap: 3px; +} + +.model-layer { + width: 25px; + height: 3px; + background: var(--dark-text); + border-radius: 2px; +} + +.robot-home { + position: absolute; + top: 5px; + left: 50%; + transform: translateX(-50%); +} + +.home-roof { + width: 20px; + height: 10px; + background: var(--error-red); + border: 2px solid var(--dark-text); + border-radius: 2px 2px 0 0; +} + +.home-door { + width: 8px; + height: 8px; + background: var(--dark-text); + border-radius: 2px; + margin: 0 auto; +} + +.infrastructure-display { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; +} + +.server-rack { + width: 20px; + height: 15px; + background: var(--dark-text); + border-radius: 2px; +} + +.connection-lines { + display: flex; + gap: 2px; +} + +.line { + width: 8px; + height: 1px; + background: var(--dark-text); +} + +.robot-tools-display { + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 4px; +} + +.tool-wrench { + width: 8px; + height: 8px; + background: var(--dark-text); + border-radius: 2px; + transform: rotate(45deg); +} + +.tool-gear { + width: 8px; + height: 8px; + background: var(--dark-text); + border-radius: 50%; +} + +.automation-display { + width: 30px; + height: 20px; +} + +.automation-flow { + display: flex; + justify-content: space-between; + align-items: center; +} + +.flow-dot { + width: 4px; + height: 4px; + background: var(--dark-text); + border-radius: 50%; + animation: flowPulse 2s infinite ease-in-out; +} + +.flow-dot:nth-child(2) { + animation-delay: 0.5s; +} +.flow-dot:nth-child(3) { + animation-delay: 1s; +} + +.card-content h4 { + font-size: 1.3rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.card-content p { + color: var(--medium-gray); + line-height: 1.6; +} + +.card-icon { + width: 40px; + height: 40px; + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto 1rem; +} + +.card-icon.our-models { + background: var(--soft-pink); +} +.card-icon.your-infrastructure { + background: var(--success-green); +} +.card-icon.real-tools { + background: var(--warning-amber); +} + +/* Principles CTA */ +.principles-cta { + margin: 4rem 0; + background: var(--light-blue); + border-radius: 20px; + border: 3px solid var(--primary-blue); + padding: 3rem; + display: flex; + align-items: center; + gap: 2rem; + box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2); +} + +.cta-robot { + flex-shrink: 0; + position: relative; +} + +.cta-robot .robot-head { + width: 80px; + height: 80px; + background: var(--primary-blue); + border-radius: 20px; + border: 4px solid var(--dark-text); + margin: 0 auto 12px; + position: relative; +} + +.cta-robot .robot-body { + width: 90px; + height: 100px; + background: var(--primary-blue); + border-radius: 20px; + border: 4px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.robot-eye.confident { + background: var(--dark-text); + animation: confidentGlow 3s infinite ease-in-out; +} + +.robot-confident-smile { + position: absolute; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + width: 30px; + height: 15px; + border: 4px solid var(--dark-text); + border-bottom: none; + border-radius: 30px 30px 0 0; +} + +.robot-badge { + background: white; + color: var(--primary-blue); + padding: 0.5rem 1rem; + border-radius: 12px; + font-size: 0.8rem; + font-weight: 700; + border: 2px solid var(--dark-text); + text-transform: uppercase; +} + +.robot-cape { + position: absolute; + top: 70px; + left: -10px; + right: -10px; + height: 40px; + background: var(--error-red); + border-radius: 0 0 15px 15px; + border: 3px solid var(--dark-text); + border-top: none; + z-index: -1; +} + +.cape-flow { + width: 100%; + height: 100%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.2) 50%, + transparent 70% + ); + animation: capeFlow 3s infinite ease-in-out; +} + +.cta-content { + flex: 1; +} + +.cta-content h3 { + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.cta-content p { + font-size: 1.1rem; + color: var(--medium-gray); + margin-bottom: 2rem; + line-height: 1.6; +} + +.cta-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +/* Animations */ +@keyframes corporateGlare { + 0%, + 100% { + background: var(--dark-text); + } + 50% { + background: var(--error-red); + } +} + +@keyframes friendlyBlink { + 0%, + 90%, + 100% { + transform: scaleY(1); + } + 95% { + transform: scaleY(0.1); + } +} + +@keyframes heartbeat { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } +} + +@keyframes wingFlap { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-3px); + } +} + +@keyframes vsFlicker { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +@keyframes flowPulse { + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.3); + opacity: 0.7; + } +} + +@keyframes confidentGlow { + 0%, + 100% { + box-shadow: 0 0 5px var(--primary-blue); + } + 50% { + box-shadow: 0 0 15px var(--primary-blue); + } +} + +@keyframes capeFlow { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +@keyframes corporateShake { + 0%, + 100% { + transform: translateX(0); + } + 25% { + transform: translateX(-2px) rotate(-1deg); + } + 75% { + transform: translateX(2px) rotate(1deg); + } +} + +@keyframes friendlyBounce { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-8px); + } +} + +@keyframes vsFlash { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + box-shadow: 0 0 15px var(--warning-amber); + } +} + +@keyframes featureBounce { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-4px); + } +} + +@keyframes cardRobotFloat { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-6px); + } +} + +@keyframes slideInComparison { + 0% { + transform: translateX(-30px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes fadeInUp { + 0% { + transform: translateY(30px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes ctaRobotCelebrate { + 0%, + 100% { + transform: translateY(0) rotate(0deg); + } + 25% { + transform: translateY(-10px) rotate(-5deg); + } + 75% { + transform: translateY(-5px) rotate(5deg); + } +} + +@keyframes advantagePulse { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +@keyframes limitationShake { + 0%, + 100% { + transform: translateX(0); + } + 25% { + transform: translateX(-2px); + } + 75% { + transform: translateX(2px); + } +} + +@keyframes iconPulse { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .comparison-sides { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .vs-divider { + order: 2; + transform: rotate(90deg); + padding: 1rem 0; + } + + .other-ai { + order: 1; + } + + .jan-side { + order: 3; + } + + .principles-cta { + flex-direction: column; + text-align: center; + gap: 2rem; + } +} + +@media (max-width: 768px) { + .detailed-comparison { + padding: 2rem; + } + + .comparison-table { + grid-template-columns: 1fr; + gap: 0; + } + + .table-row { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1px; + margin-bottom: 1px; + } + + .cards-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .philosophy-card { + padding: 1.5rem; + } + + .feature-item { + flex-direction: column; + text-align: center; + gap: 1rem; + } + + .side-robot .robot-head { + width: 50px; + height: 50px; + } + + .side-robot .robot-body { + width: 60px; + height: 70px; + } +} + +@media (max-width: 480px) { + .comparison-side { + padding: 1.5rem; + } + + .detailed-comparison { + padding: 1.5rem; + } + + .philosophy-cards h3, + .detailed-comparison h3 { + font-size: 1.8rem; + } + + .cta-content h3 { + font-size: 1.8rem; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .table-row { + grid-template-columns: 1fr; + text-align: left; + } + + .header-cell, + .table-cell { + padding: 0.75rem; + font-size: 0.8rem; + } + + .feature-col { + justify-content: flex-start; + } + + .advantage-indicator, + .limitation-indicator { + padding: 0.5rem; + font-size: 0.8rem; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + .other-robot, + .jan-robot, + .vs-robot, + .feature-robot, + .card-robot, + .cta-robot, + .comparison-side, + .feature-item, + .philosophy-card, + .advantage-indicator, + .limitation-indicator { + animation: none !important; + transition: none !important; + } +} + +/* High contrast mode */ +@media (prefers-contrast: high) { + .comparison-side, + .detailed-comparison, + .philosophy-card, + .principles-cta { + border-width: 3px; + } + + .feature-item { + border-width: 2px; + } +} diff --git a/website/src/styles/products-roadmap.css b/website/src/styles/products-roadmap.css new file mode 100644 index 000000000..1cc480dae --- /dev/null +++ b/website/src/styles/products-roadmap.css @@ -0,0 +1,837 @@ +/* ProductsRoadmap Component Styles */ + +.roadmap-section { + background: var(--light-gray); + border-top: 1px solid var(--border-color); +} + +.roadmap-section .badge-robot-head { + background: var(--light-purple); +} + +/* Roadmap Overview */ +.roadmap-overview { + margin: 4rem 0; + max-width: 900px; + margin-left: auto; + margin-right: auto; +} + +.timeline-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; +} + +.stat-card { + background: white; + border-radius: 16px; + border: 2px solid var(--border-color); + padding: 1.5rem; + display: flex; + align-items: center; + gap: 1rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; +} + +.stat-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); +} + +.stat-robot { + flex-shrink: 0; +} + +.stat-robot .robot-head { + width: 40px; + height: 40px; + border-radius: 10px; + border: 3px solid var(--dark-text); + margin: 0 auto 8px; + position: relative; +} + +.stat-robot .robot-body { + width: 50px; + height: 60px; + border-radius: 10px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.released-robot .robot-head { + background: var(--success-green); +} +.released-robot .robot-body { + background: var(--success-green); +} + +.development-robot .robot-head { + background: var(--primary-blue); +} +.development-robot .robot-body { + background: var(--primary-blue); +} + +.planned-robot .robot-head { + background: var(--medium-gray); +} +.planned-robot .robot-body { + background: var(--medium-gray); +} + +.success-check { + width: 20px; + height: 10px; + border-left: 4px solid white; + border-bottom: 4px solid white; + transform: rotate(-45deg); +} + +.work-indicator { + display: flex; + gap: 3px; +} + +.work-dot { + width: 6px; + height: 6px; + background: white; + border-radius: 50%; + animation: workPulse 2s infinite ease-in-out; +} + +.work-dot:nth-child(2) { + animation-delay: 0.3s; +} +.work-dot:nth-child(3) { + animation-delay: 0.6s; +} + +.planning-board { + display: flex; + flex-direction: column; + gap: 3px; +} + +.plan-item { + width: 20px; + height: 3px; + background: white; + border-radius: 2px; +} + +.stat-content { + text-align: left; +} + +.stat-number { + font-size: 2rem; + font-weight: 800; + color: var(--dark-text); + line-height: 1; +} + +.stat-label { + font-size: 1rem; + color: var(--medium-gray); + font-weight: 500; +} + +/* Roadmap Database */ +.roadmap-database { + background: white; + border-radius: 20px; + border: 2px solid var(--border-color); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.database-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.database-title { + display: flex; + align-items: center; + gap: 1rem; +} + +.title-robot .robot-head { + width: 30px; + height: 30px; + background: var(--light-purple); + border-radius: 8px; + border: 2px solid var(--dark-text); + margin-bottom: 4px; +} + +.title-robot .robot-body { + width: 35px; + height: 40px; + background: var(--light-purple); + border-radius: 8px; + border: 2px solid var(--dark-text); + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 0.9rem; +} + +.database-title h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); +} + +.database-controls { + display: flex; + gap: 0.75rem; +} + +.control-btn { + background: var(--light-gray); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 0.5rem 1rem; + font-size: 0.8rem; + font-weight: 600; + color: var(--dark-text); + cursor: pointer; + transition: all 0.3s ease; +} + +.control-btn:hover { + background: var(--border-color); + transform: translateY(-2px); +} + +.database-table { + padding: 1.5rem; +} + +.table-header { + display: grid; + grid-template-columns: 2fr 1fr 1fr 80px; + gap: 1rem; + padding: 0 1rem 1rem; + border-bottom: 1px solid var(--border-color); + font-size: 0.8rem; + font-weight: 600; + color: var(--medium-gray); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.expand-col { + text-align: right; +} + +/* Roadmap Row */ +.roadmap-row { + border-bottom: 1px solid var(--border-color); + transition: background-color 0.3s ease; +} + +.roadmap-row:last-child { + border-bottom: none; +} + +.roadmap-row.expanded { + background: var(--light-blue); +} + +.row-main { + display: grid; + grid-template-columns: 2fr 1fr 1fr 80px; + gap: 1rem; + align-items: center; + padding: 1rem; + cursor: pointer; +} + +.version-col { + display: flex; + align-items: center; + gap: 1rem; +} + +.version-robot { + flex-shrink: 0; +} + +.robot-mini-head { + width: 25px; + height: 25px; + border-radius: 6px; + border: 2px solid var(--dark-text); + margin: 0 auto 4px; +} + +.robot-mini-body { + width: 30px; + height: 35px; + border-radius: 6px; + border: 2px solid var(--dark-text); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; +} + +.released-version .robot-mini-head, +.released-version .robot-mini-body { + background: var(--success-green); +} + +.development-version .robot-mini-head, +.development-version .robot-mini-body { + background: var(--primary-blue); +} + +.planned-version .robot-mini-head, +.planned-version .robot-mini-body { + background: var(--medium-gray); +} + +.version-info { + display: flex; + flex-direction: column; +} + +.version-number { + font-size: 1rem; + font-weight: 700; + color: var(--dark-text); +} + +.version-name { + font-size: 0.9rem; + color: var(--medium-gray); +} + +.date-badge { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; +} + +.date-badge.released { + background: var(--soft-green); + color: var(--success-green); +} +.date-badge.development { + background: var(--light-blue); + color: var(--primary-blue); +} +.date-badge.planned { + background: var(--light-gray); + color: var(--medium-gray); +} + +.status-indicator { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; + font-weight: 600; +} + +.status-dot { + width: 8px; + height: 8px; + border-radius: 50%; +} + +.status-indicator.released { + color: var(--success-green); +} +.status-indicator.released .status-dot { + background: var(--success-green); +} + +.status-indicator.development { + color: var(--primary-blue); +} +.status-indicator.development .status-dot { + background: var(--primary-blue); + animation: pulse 2s infinite; +} + +.status-indicator.planned { + color: var(--medium-gray); +} +.status-indicator.planned .status-dot { + background: var(--medium-gray); +} + +.expand-btn { + width: 30px; + height: 30px; + background: var(--light-gray); + border: 1px solid var(--border-color); + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.expand-btn:hover { + background: var(--border-color); + transform: scale(1.1); +} + +.expand-icon { + font-size: 1.2rem; + font-weight: 700; + color: var(--medium-gray); + transition: transform 0.3s ease; +} + +/* Row Details */ +.row-details { + max-height: 0; + opacity: 0; + overflow: hidden; + transition: max-height 0.5s ease-out, opacity 0.5s ease-out; +} + +.details-content { + padding: 1rem 2rem 2rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + border-top: 1px solid var(--border-color); +} + +.detail-section h4 { + font-size: 1rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; + border-bottom: 2px solid var(--primary-blue); + padding-bottom: 0.5rem; + display: inline-block; +} + +.detail-section ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.detail-section li { + padding-left: 1.5rem; + position: relative; + font-size: 0.9rem; + color: var(--medium-gray); +} + +.detail-section li::before { + content: "→"; + position: absolute; + left: 0; + color: var(--primary-blue); + font-weight: 700; +} + +/* Roadmap CTA */ +.roadmap-cta { + margin: 4rem 0 0; + background: var(--light-blue); + border-radius: 20px; + border: 3px solid var(--primary-blue); + padding: 3rem; + display: flex; + align-items: center; + gap: 2rem; + box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2); +} + +.cta-robot { + flex-shrink: 0; +} + +.cta-robot .robot-head { + width: 80px; + height: 80px; + background: var(--primary-blue); + border-radius: 20px; + border: 4px solid var(--dark-text); + margin: 0 auto 12px; + position: relative; +} + +.cta-robot .robot-body { + width: 90px; + height: 100px; + background: var(--primary-blue); + border-radius: 20px; + border: 4px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.robot-eye.excited { + animation: excitedWiggle 2s infinite ease-in-out; +} + +.robot-smile-big { + position: absolute; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + width: 35px; + height: 20px; + border: 4px solid var(--dark-text); + border-bottom: none; + border-radius: 35px 35px 0 0; +} + +.robot-progress-wheel { + width: 40px; + height: 40px; + border-radius: 50%; + border: 3px solid var(--dark-text); + position: relative; + animation: spin 4s infinite linear; +} + +.progress-segment { + position: absolute; + width: 50%; + height: 50%; +} + +.progress-segment:nth-child(1) { + top: 0; + left: 0; + background: var(--soft-green); + border-radius: 100% 0 0 0; +} +.progress-segment:nth-child(2) { + top: 0; + right: 0; + background: var(--warm-yellow); + border-radius: 0 100% 0 0; +} +.progress-segment:nth-child(3) { + bottom: 0; + left: 0; + background: var(--light-purple); + border-radius: 0 0 0 100%; +} +.progress-segment:nth-child(4) { + bottom: 0; + right: 0; + background: var(--soft-pink); + border-radius: 0 0 100% 0; +} + +.robot-arms.celebrating { + display: flex; + justify-content: space-between; + margin-top: -80px; + padding: 0 10px; +} + +.arm.left-celebrate, +.arm.right-celebrate { + width: 15px; + height: 40px; + background: var(--gentle-orange); + border-radius: 8px; + border: 3px solid var(--dark-text); + transform-origin: bottom center; + animation: celebrate 1.5s infinite ease-in-out; +} + +.arm.right-celebrate { + animation-delay: 0.3s; +} + +.cta-content h3 { + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.cta-content p { + font-size: 1.1rem; + color: var(--medium-gray); + margin-bottom: 2rem; + line-height: 1.6; +} + +.cta-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +/* Animations */ +@keyframes workPulse { + 0%, + 100% { + transform: scale(1); + opacity: 0.7; + } + 50% { + transform: scale(1.2); + opacity: 1; + } +} + +@keyframes pulse { + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.1); + opacity: 0.7; + } +} + +@keyframes versionCelebrate { + 0%, + 100% { + transform: translateY(0); + } + 25% { + transform: translateY(-8px) rotate(-5deg); + } + 75% { + transform: translateY(-4px) rotate(5deg); + } +} + +@keyframes versionHover { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +@keyframes slideInFromLeft { + 0% { + transform: translateX(-30px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes fadeInUp { + 0% { + transform: translateY(20px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes excitedWiggle { + 0%, + 100% { + transform: rotate(0); + } + 25% { + transform: rotate(-3deg); + } + 75% { + transform: rotate(3deg); + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes celebrate { + 0%, + 100% { + transform: rotate(0deg); + } + 50% { + transform: rotate(15deg); + } +} + +@keyframes ctaRobotCelebration { + 0%, + 100% { + transform: translateY(0) rotate(0); + } + 25% { + transform: translateY(-10px) rotate(-5deg); + } + 75% { + transform: translateY(-5px) rotate(5deg); + } +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .database-table { + font-size: 0.9rem; + } + + .table-header { + grid-template-columns: 2fr 1.5fr 1fr 60px; + } + + .row-main { + grid-template-columns: 2fr 1.5fr 1fr 60px; + } +} + +@media (max-width: 768px) { + .timeline-stats { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .database-header { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } + + .table-header { + display: none; + } + + .row-main { + grid-template-columns: 1fr; + gap: 1rem; + padding: 1.5rem; + } + + .row-cell { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px dashed var(--border-color); + padding-bottom: 0.75rem; + } + + .row-cell:last-child { + border-bottom: none; + } + + .row-cell::before { + content: attr(data-label); + font-weight: 600; + color: var(--medium-gray); + font-size: 0.8rem; + text-transform: uppercase; + } + + .expand-col { + justify-content: flex-end; + } + + .details-content { + grid-template-columns: 1fr; + padding: 1rem; + } + + .roadmap-cta { + flex-direction: column; + text-align: center; + } +} + +@media (max-width: 480px) { + .roadmap-database { + font-size: 0.8rem; + } + + .row-main { + padding: 1rem; + } + + .version-col { + gap: 0.75rem; + } + + .version-number { + font-size: 0.9rem; + } + + .cta-content h3 { + font-size: 1.8rem; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + .work-dot, + .status-indicator.development .status-dot, + .robot-eye, + .progress-wheel, + .arm, + .stat-card, + .roadmap-row, + .control-btn, + .expand-btn, + .row-details, + .version-robot { + animation: none !important; + transition: none !important; + } +} + +/* High contrast mode */ +@media (prefers-contrast: high) { + .stat-card, + .roadmap-database, + .roadmap-cta { + border-width: 3px; + } + + .roadmap-row { + border-width: 2px; + } +} diff --git a/website/src/styles/products-tools.css b/website/src/styles/products-tools.css new file mode 100644 index 000000000..8603b491e --- /dev/null +++ b/website/src/styles/products-tools.css @@ -0,0 +1,597 @@ +/* ProductsTools Component Styles */ + +.tools-section { + background: var(--cream-white); + border-top: 1px solid var(--border-color); +} + +.tools-section .badge-robot-head { + background: var(--warning-amber); +} + +/* Tools Grid */ +.tools-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; + margin: 4rem 0; +} + +.tool-card { + position: relative; + overflow: visible; +} + +.tool-robot-section { + position: relative; + text-align: center; + margin-bottom: 2rem; +} + +.tool-robot { + display: inline-block; + position: relative; + margin-bottom: 1rem; +} + +.tool-robot .robot-head { + width: 60px; + height: 60px; + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto 10px; + position: relative; +} + +.tool-robot .robot-body { + width: 70px; + height: 80px; + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +/* Robot Variations */ +.search-robot .robot-head, +.search-robot .robot-body { + background: var(--success-green); +} + +.research-robot .robot-head, +.research-robot .robot-body { + background: var(--primary-blue); +} + +.browser-robot .robot-head, +.browser-robot .robot-body { + background: var(--warning-amber); +} + +.agents-robot .robot-head, +.agents-robot .robot-body { + background: var(--light-purple); +} + +.agents-robot.sleeping { + opacity: 0.7; + animation: sleepBob 4s infinite ease-in-out; +} + +.tool-status-bubble { + position: absolute; + top: -10px; + right: 1rem; +} + +/* Tool Content */ +.tool-content { + padding: 0; +} + +.tool-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.tool-header h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); +} + +.tool-version { + background: var(--light-gray); + color: var(--medium-gray); + padding: 0.25rem 0.5rem; + border-radius: 8px; + font-size: 0.7rem; + font-weight: 600; + border: 1px solid var(--border-color); +} + +.tool-description { + color: var(--medium-gray); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.tool-features { + margin-bottom: 1.5rem; +} + +.tool-features h4 { + font-size: 0.9rem; + font-weight: 600; + color: var(--dark-text); + margin-bottom: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.features-list { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.feature-item { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.9rem; + color: var(--dark-text); + padding: 0.5rem; + border-radius: 8px; + transition: all 0.3s ease; +} + +.feature-item:hover { + background: var(--light-gray); +} + +.feature-item.coming { + color: var(--medium-gray); + font-style: italic; +} + +.feature-icon { + width: 20px; + height: 20px; + border-radius: 4px; + border: 2px solid var(--dark-text); + flex-shrink: 0; +} + +.tool-metrics { + display: flex; + justify-content: space-around; + padding-top: 1rem; + border-top: 1px solid var(--border-color); +} + +.metric { + text-align: center; +} + +.metric-value { + font-size: 1.1rem; + font-weight: 700; + color: var(--primary-blue); + margin-bottom: 0.25rem; +} + +.metric-label { + font-size: 0.8rem; + color: var(--medium-gray); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Tools Integration Flow */ +.tools-integration { + margin: 4rem 0; + background: white; + border-radius: 20px; + border: 2px solid var(--border-color); + padding: 3rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.tools-integration h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.integration-flow { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +.flow-step { + text-align: center; +} + +.step-robot { + margin-bottom: 0.5rem; +} + +.robot-mini { + width: 40px; + height: 50px; + border-radius: 8px; + border: 2px solid var(--dark-text); + margin: 0 auto; +} + +.search-mini { background: var(--success-green); } +.research-mini { background: var(--primary-blue); } +.browser-mini { background: var(--warning-amber); } +.agents-mini { background: var(--light-purple); } + +.step-content h4 { + font-size: 1rem; + font-weight: 600; + color: var(--dark-text); +} + +.step-content p { + font-size: 0.8rem; + color: var(--medium-gray); +} + +.flow-arrow { + width: 40px; + height: 2px; + background: var(--primary-blue); + position: relative; +} + +.flow-arrow.coming { + background: var(--medium-gray); + border-style: dashed; +} + +.flow-arrow .arrow-head { + position: absolute; + right: -5px; + top: -3px; + width: 0; + height: 0; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 8px solid var(--primary-blue); +} + +.flow-arrow.coming .arrow-head { + border-left-color: var(--medium-gray); +} + +/* Tools Comparison Table */ +.tools-comparison { + margin: 4rem 0; + background: white; + border-radius: 20px; + border: 2px solid var(--border-color); + padding: 3rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.tools-comparison h3 { + text-align: center; + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 2rem; +} + +.comparison-table { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 1px; + background: var(--border-color); + border-radius: 12px; + overflow: hidden; +} + +.table-header { display: contents; } + +.header-cell { + background: var(--primary-blue); + color: white; + padding: 1rem; + font-weight: 700; + text-align: center; +} + +.table-row { display: contents; } + +.table-cell { + background: white; + padding: 1rem; + text-align: center; + font-size: 0.9rem; +} + +.tool-col { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + font-weight: 600; +} + +.tool-mini-icon { + width: 20px; + height: 20px; + border-radius: 4px; + border: 2px solid var(--dark-text); +} + +.search-icon { background: var(--success-green); } +.research-icon { background: var(--primary-blue); } +.browser-icon { background: var(--warning-amber); } +.agents-icon { background: var(--light-purple); } + +/* Animations */ +@keyframes toolBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +@keyframes sleepShift { + 0%, 100% { transform: translateX(0) rotate(0); } + 50% { transform: translateX(4px) rotate(2deg); } +} + +@keyframes slideInFromBottom { + 0% { transform: translateY(50px); opacity: 0; } + 100% { transform: translateY(0); opacity: 1; } +} + +@keyframes miniRobotSpin { + 0% { transform: rotate(0); } + 100% { transform: rotate(360deg); } +} + +@keyframes iconPulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +@keyframes featureIconBounce { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.2) rotate(5deg); } +} + +@keyframes fadeInUp { + 0% { transform: translateY(20px); opacity: 0; } + 100% { transform: translateY(0); opacity: 1; } +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .tools-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + } +} + +@media (max-width: 768px) { + .tools-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .tools-comparison { + padding: 2rem; + } + + .comparison-table { + grid-template-columns: 1fr; + gap: 0; + } + + .table-row { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 1px; + margin-bottom: 1px; + } +} + +@media (max-width: 480px) { + .flow-arrow { + transform: rotate(90deg); + } + + .table-row { + display: flex; + flex-direction: column; + gap: 0; + margin-bottom: 1px; + } + + .table-cell { + border-bottom: 1px solid var(--border-color); + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + .tool-robot, + .tool-card, + .flow-step, + .robot-mini, + .tool-mini-icon, + .feature-icon { + animation: none !important; + transition: none !important; + } +} + +/* High contrast mode */ +@media (prefers-contrast: high) { + .tool-card, + .tools-integration, + .tools-comparison { + border-width: 3px; + } +} + +/* Robot-specific details and animations that were missing */ +.robot-eyes { + display: flex; + justify-content: space-between; + padding: 12px 10px; +} + +.robot-eye { + width: 12px; + height: 12px; + background: var(--dark-text); + border-radius: 50%; +} + +.robot-eye.active { + animation: eyeBlink 4s infinite ease-in-out; +} + +.robot-eye.thinking { + height: 3px; + border-radius: 2px; + animation: thinkingBlink 3s infinite ease-in-out; +} + +.robot-eye.beta { + background: var(--dark-text); + animation: betaGlow 2s infinite ease-in-out; +} + +.robot-eye.sleeping { + height: 3px; + border-radius: 2px; +} + +@keyframes eyeBlink { + 0%, 90%, 100% { transform: scaleY(1); } + 95% { transform: scaleY(0.1); } +} + +@keyframes thinkingBlink { + 0%, 100% { width: 12px; } + 50% { width: 4px; } +} + +@keyframes betaGlow { + 0%, 100% { box-shadow: none; } + 50% { box-shadow: 0 0 5px var(--warning-amber); } +} + +.robot-search-beam { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + width: 40px; + height: 20px; + perspective: 50px; +} + +.search-wave { + position: absolute; + width: 100%; + height: 1px; + background: white; + opacity: 0.7; + animation: searchWave 3s infinite ease-out; +} + +.search-wave:nth-child(2) { animation-delay: 1s; } +.search-wave:nth-child(3) { animation-delay: 2s; } + +@keyframes searchWave { + 0% { transform: translateY(0) scaleY(1); opacity: 0; } + 50% { opacity: 0.7; } + 100% { transform: translateY(20px) scaleY(3); opacity: 0; } +} + +.robot-screen { + width: 40px; + height: 30px; + background: var(--dark-text); + border-radius: 4px; + padding: 5px; +} + +.search-results .result-line { + height: 2px; + background: white; + border-radius: 1px; + margin-bottom: 3px; + animation: searchResults 4s infinite; +} + +.search-results .result-line.short { + width: 60%; +} + +@keyframes searchResults { + 0%, 100% { width: 100%; } + 50% { width: 40%; } +} + +.robot-magnifier { + position: absolute; + bottom: -10px; + right: -10px; +} + +.magnifier-glass { + width: 20px; + height: 20px; + border: 3px solid var(--dark-text); + border-radius: 50%; + background: var(--light-blue); +} + +.magnifier-handle { + width: 15px; + height: 4px; + background: var(--dark-text); + transform: rotate(45deg) translate(12px, -3px); +} + +.sleep-indicator { + position: absolute; + top: -5px; + right: -20px; + display: flex; + flex-direction: column; +} + +.sleep-z { + font-size: 0.8rem; + font-weight: 600; + color: var(--medium-gray); + animation: sleepZ 3s infinite ease-in-out; +} + +.sleep-z:nth-child(2) { animation-delay: 1s; } +.sleep-z:nth-child(3) { animation-delay: 2s; } + +@keyframes sleepZ { + 0% { transform: translate(0, 0); opacity: 0; } + 50% { transform: translate(5px, -5px); opacity: 1; } + 100% { transform: translate(10px, -10px); opacity: 0; } +} diff --git a/website/src/styles/products.css b/website/src/styles/products.css new file mode 100644 index 000000000..05b0fd54d --- /dev/null +++ b/website/src/styles/products.css @@ -0,0 +1,1644 @@ +/* Products Page Styles - Blue Dominant Theme */ + +/* Color Palette - Blue Dominant */ +:root { + --primary-blue: #3b82f6; + --light-blue: #93c5fd; + --pale-blue: #dbeafe; + --sky-blue: #e0f2fe; + --soft-green: #bbf7d0; + --warm-yellow: #fef08a; + --gentle-orange: #fed7aa; + --light-purple: #e9d5ff; + --soft-pink: #fce7f3; + --cream-white: #fefce8; + --light-gray: #f8fafc; + --medium-gray: #64748b; + --dark-text: #1e293b; + --success-green: #22c55e; + --warning-amber: #f59e0b; + --error-red: #ef4444; + --white: #ffffff; +} + +/* Base Styles */ +* { + box-sizing: border-box; +} + +.products-page { + background: linear-gradient( + 135deg, + var(--pale-blue) 0%, + var(--light-gray) 100% + ); + min-height: 100vh; + font-family: + 'Inter', + -apple-system, + BlinkMacSystemFont, + sans-serif; + line-height: 1.6; + color: var(--dark-text); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Hero Section */ +.hero-section { + position: relative; + padding: 4rem 0 6rem; + background: linear-gradient( + 135deg, + var(--primary-blue) 0%, + var(--light-blue) 100% + ); + overflow: hidden; +} + +.hero-content { + position: relative; + text-align: center; + z-index: 2; + max-width: 800px; + margin: 0 auto; + padding: 0 2rem; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.75rem; + background: rgba(255, 255, 255, 0.9); + padding: 0.75rem 1.5rem; + border-radius: 50px; + font-size: 0.9rem; + font-weight: 600; + color: var(--dark-text); + margin-bottom: 2rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border: 2px solid var(--dark-text); +} + +.badge-robot { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; +} + +.badge-robot-head { + width: 16px; + height: 16px; + background: var(--primary-blue); + border-radius: 4px; + border: 2px solid var(--dark-text); +} + +.badge-robot-body { + width: 12px; + height: 12px; + background: var(--light-blue); + border-radius: 2px; + border: 1px solid var(--dark-text); +} + +.hero-title { + margin-bottom: 1.5rem; +} + +.title-main { + display: block; + font-size: clamp(2.5rem, 8vw, 3.5rem); + font-weight: 800; + color: var(--white); + margin-bottom: 0.5rem; + line-height: 1.1; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.title-sub { + display: block; + font-size: 1.2rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.9); +} + +.hero-description { + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 3rem; + line-height: 1.6; +} + +/* Hero Robot */ +.hero-robot { + margin: 3rem 0; +} + +.robot-container { + position: relative; + display: inline-block; + animation: bounce 3s infinite ease-in-out; +} + +.robot-head { + width: 80px; + height: 80px; + background: var(--warm-yellow); + border-radius: 20px; + position: relative; + margin: 0 auto 10px; + border: 4px solid var(--dark-text); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); +} + +.robot-eyes { + display: flex; + justify-content: space-between; + padding: 15px 12px; +} + +.eye { + width: 16px; + height: 16px; + background: var(--dark-text); + border-radius: 50%; + position: relative; +} + +.eye::after { + content: ''; + position: absolute; + top: 3px; + right: 3px; + width: 4px; + height: 4px; + background: white; + border-radius: 50%; +} + +.robot-mouth.happy { + position: absolute; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 10px; + border: 3px solid var(--dark-text); + border-bottom: none; + border-radius: 20px 20px 0 0; +} + +.robot-body { + width: 100px; + height: 100px; + background: var(--soft-green); + border-radius: 15px; + margin: 0 auto; + border: 4px solid var(--dark-text); + position: relative; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); +} + +.robot-panel { + display: flex; + justify-content: center; + gap: 8px; + padding: 20px; +} + +.panel-light { + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid var(--dark-text); +} + +.panel-light.blue { + background: var(--primary-blue); +} +.panel-light.green { + background: var(--success-green); +} +.panel-light.amber { + background: var(--warning-amber); + animation: blink 1.5s infinite; +} + +.speech-bubble { + position: absolute; + top: -40px; + left: 120%; + background: white; + padding: 0.5rem 1rem; + border-radius: 15px; + border: 2px solid var(--dark-text); + font-size: 0.9rem; + font-weight: 600; + color: var(--dark-text); + white-space: nowrap; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +.speech-bubble::before { + content: ''; + position: absolute; + left: -10px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + border-right: 10px solid white; +} + +.speech-bubble::after { + content: ''; + position: absolute; + left: -12px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 12px solid var(--dark-text); +} + +/* Table of Contents */ +.toc-section { + padding: 4rem 0; + background: var(--white); +} + +.toc-card { + background: var(--white); + border-radius: 20px; + padding: 2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + border: 3px solid var(--dark-text); +} + +.toc-card h2 { + text-align: center; + margin-bottom: 2rem; + font-size: 1.8rem; + font-weight: 700; + color: var(--dark-text); +} + +.toc-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; +} + +.toc-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + border-radius: 15px; + background: var(--pale-blue); + border: 2px solid var(--primary-blue); + text-decoration: none; + color: var(--dark-text); + font-weight: 600; + transition: all 0.3s ease; +} + +.toc-item:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); + background: var(--light-blue); +} + +.toc-icon { + width: 40px; + height: 40px; + border-radius: 10px; + border: 2px solid var(--dark-text); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + flex-shrink: 0; +} + +.toc-icon.vision { + background: var(--soft-pink); +} +.toc-icon.work { + background: var(--light-blue); +} +.toc-icon.platform { + background: var(--gentle-orange); +} +.toc-icon.model { + background: var(--soft-green); +} +.toc-icon.tool { + background: var(--light-purple); +} +.toc-icon.compare { + background: var(--warm-yellow); +} +.toc-icon.roadmap { + background: var(--primary-blue); +} + +/* Section Styles */ +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-badge { + display: inline-flex; + align-items: center; + gap: 0.75rem; + background: rgba(255, 255, 255, 0.9); + padding: 0.75rem 1.5rem; + border-radius: 50px; + font-size: 0.9rem; + font-weight: 600; + color: var(--dark-text); + margin-bottom: 1rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border: 2px solid var(--dark-text); +} + +.section-title { + font-size: 2.5rem; + font-weight: 800; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.section-description { + font-size: 1.2rem; + color: var(--medium-gray); + max-width: 600px; + margin: 0 auto; +} + +/* Vision Section */ +.vision-section { + padding: 6rem 0; + background: var(--sky-blue); +} + +.vision-formula { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + margin: 3rem 0; +} + +.formula-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} + +.formula-robot { + width: 60px; + height: 80px; + position: relative; +} + +.formula-robot .robot-head { + width: 40px; + height: 40px; + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto 5px; + background: var(--primary-blue); +} + +.formula-robot .robot-body { + width: 50px; + height: 40px; + border-radius: 8px; + border: 2px solid var(--dark-text); + margin: 0 auto; + background: var(--light-blue); +} + +.formula-plus, +.formula-equals { + font-size: 1.5rem; + font-weight: 800; + color: var(--dark-text); +} + +.vision-principles { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 4rem; +} + +.principle-card { + background: var(--white); + border-radius: 20px; + padding: 2rem; + text-align: center; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + border: 3px solid var(--dark-text); +} + +.principle-robot { + margin: 0 auto 1rem; + width: 50px; + height: 70px; +} + +.principle-robot .robot-head { + width: 30px; + height: 30px; + border-radius: 8px; + border: 2px solid var(--dark-text); + margin: 0 auto 5px; + background: var(--warm-yellow); +} + +.principle-robot .robot-body { + width: 40px; + height: 35px; + border-radius: 6px; + border: 2px solid var(--dark-text); + margin: 0 auto; + background: var(--soft-green); +} + +.principle-card h3 { + font-size: 1.3rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.principle-card p { + color: var(--medium-gray); + line-height: 1.6; +} + +/* Works Section */ +.works-section { + padding: 6rem 0; + background: var(--light-gray); +} + +.modes-comparison { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 2rem; + margin-top: 4rem; +} + +.mode-card { + background: var(--white); + border-radius: 20px; + padding: 2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + border: 3px solid var(--dark-text); + text-align: center; +} + +.mode-robot { + margin: 0 auto 1.5rem; + width: 60px; + height: 80px; +} + +.mode-robot .robot-head { + width: 40px; + height: 40px; + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto 5px; +} + +.mode-robot .robot-body { + width: 50px; + height: 40px; + border-radius: 8px; + border: 2px solid var(--dark-text); + margin: 0 auto; +} + +.local-mode .mode-robot .robot-head { + background: var(--success-green); +} +.local-mode .mode-robot .robot-body { + background: var(--soft-green); +} + +.cloud-mode .mode-robot .robot-head { + background: var(--primary-blue); +} +.cloud-mode .mode-robot .robot-body { + background: var(--light-blue); +} + +.mode-card h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.mode-card p { + color: var(--medium-gray); + margin-bottom: 1.5rem; +} + +.mode-features { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.feature-item { + padding: 0.5rem 1rem; + background: var(--pale-blue); + border-radius: 15px; + border: 2px solid var(--primary-blue); + font-size: 0.9rem; + font-weight: 600; +} + +/* Platforms Section */ +.platforms-section { + padding: 6rem 0; + background: var(--cream-white); +} + +.platforms-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 4rem; +} + +.platform-card { + background: var(--white); + border-radius: 20px; + padding: 2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + border: 3px solid var(--dark-text); + transition: all 0.3s ease; + text-align: center; +} + +.platform-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); +} + +.platform-status { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 1rem; + border: 2px solid var(--dark-text); +} + +.platform-status:contains('Available') { + background: var(--success-green); + color: white; +} +.platform-status:contains('Beta') { + background: var(--warning-amber); + color: white; +} +.platform-status:contains('Q4') { + background: var(--light-gray); + color: var(--medium-gray); + border-style: dashed; +} +.platform-status:contains('Coming') { + background: var(--light-gray); + color: var(--medium-gray); + border-style: dashed; +} + +.platform-robot { + margin: 0 auto 1.5rem; + width: 60px; + height: 80px; +} + +.platform-robot .robot-head { + width: 40px; + height: 40px; + border-radius: 10px; + border: 2px solid var(--dark-text); + margin: 0 auto 5px; +} + +.platform-robot .robot-body { + width: 50px; + height: 40px; + border-radius: 8px; + border: 2px solid var(--dark-text); + margin: 0 auto; +} + +.desktop-robot .robot-head { + background: var(--success-green); +} +.desktop-robot .robot-body { + background: var(--soft-green); +} + +.web-robot .robot-head { + background: var(--primary-blue); +} +.web-robot .robot-body { + background: var(--light-blue); +} + +.mobile-robot .robot-head { + background: var(--warning-amber); +} +.mobile-robot .robot-body { + background: var(--warm-yellow); +} + +.server-robot .robot-head { + background: var(--light-purple); +} +.server-robot .robot-body { + background: var(--soft-pink); +} + +.platform-card h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.5rem; +} + +.platform-card p { + color: var(--medium-gray); + margin-bottom: 1rem; +} + +.platform-metrics { + margin-bottom: 1rem; +} + +.metric { + font-size: 0.9rem; + color: var(--primary-blue); + font-weight: 600; +} + +.platform-features { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; +} + +.feature { + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + background: var(--pale-blue); + color: var(--dark-text); + border: 2px solid var(--primary-blue); +} + +.feature.coming { + border-style: dashed; + color: var(--medium-gray); + background: var(--light-gray); +} + +/* Models Section */ +.models-section { + padding: 6rem 0; + background: var(--sky-blue); +} + +.models-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; + margin-top: 4rem; +} + +.model-card { + background: var(--white); + border-radius: 20px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + border: 3px solid var(--dark-text); + overflow: hidden; + transition: all 0.3s ease; + position: relative; +} + +.model-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); +} + +.model-robot { + display: inline-block; + position: relative; + margin: 2rem auto 1rem; + text-align: center; +} + +.model-robot .robot-head { + width: 60px; + height: 60px; + border-radius: 15px; + border: 3px solid var(--dark-text); + margin: 0 auto 8px; + position: relative; +} + +.model-robot .robot-body { + width: 70px; + height: 60px; + border-radius: 12px; + border: 3px solid var(--dark-text); + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.v1-robot .robot-head { + background: var(--success-green); +} +.v1-robot .robot-body { + background: var(--soft-green); +} + +.nano-robot .robot-head { + background: var(--primary-blue); +} +.nano-robot .robot-body { + background: var(--light-blue); +} + +.lucy-robot .robot-head { + background: var(--warning-amber); +} +.lucy-robot .robot-body { + background: var(--warm-yellow); +} + +.status-light { + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid var(--dark-text); + position: absolute; + top: 5px; + right: 5px; +} + +.status-light.active { + background: var(--success-green); + animation: pulse 2s infinite; +} +.status-light.beta { + background: var(--warning-amber); + animation: pulse 1.5s infinite; +} +.status-light.coming { + background: var(--medium-gray); +} + +.robot-speech { + position: absolute; + top: -25px; + left: 50%; + transform: translateX(-50%); + background: white; + padding: 0.25rem 0.75rem; + border-radius: 15px; + border: 2px solid var(--dark-text); + font-size: 0.8rem; + font-weight: 600; + white-space: nowrap; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +} + +.model-content { + padding: 0 2rem 2rem; +} + +.model-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; + text-align: left; +} + +.model-header h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--dark-text); +} + +.model-status { + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + border: 2px solid var(--dark-text); +} + +.model-status.active { + background: var(--success-green); + color: white; +} +.model-status.beta { + background: var(--warning-amber); + color: white; +} +.model-status.coming { + background: var(--light-gray); + color: var(--medium-gray); +} + +.model-specs { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + margin-bottom: 1.5rem; +} + +.spec-group h4 { + font-size: 0.9rem; + color: var(--medium-gray); + margin-bottom: 0.5rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.spec-list { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.spec-item { + font-size: 0.9rem; + color: var(--dark-text); + font-weight: 500; +} + +.spec-highlight { + font-size: 1.1rem; + font-weight: 700; + color: var(--primary-blue); +} + +.model-description { + color: var(--medium-gray); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.model-capabilities { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.capability { + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + background: var(--success-green); + color: white; + border: 2px solid var(--dark-text); +} + +.capability.coming { + background: var(--light-gray); + color: var(--medium-gray); + border-style: dashed; +} + +/* Tools Section */ +.tools-section { + padding: 6rem 0; + background: var(--light-gray); +} + +.tools-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 4rem; +} + +.tool-card { + background: var(--white); + border-radius: 20px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + border: 3px solid var(--dark-text); + overflow: hidden; + transition: all 0.3s ease; + position: relative; +} + +.tool-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); +} + +.tool-robot { + padding: 2rem 2rem 1rem; + text-align: center; + position: relative; +} + +.tool-robot .robot-head { + width: 50px; + height: 50px; + border-radius: 12px; + border: 3px solid var(--dark-text); + margin: 0 auto 8px; + position: relative; +} + +.tool-robot .robot-body { + width: 60px; + height: 50px; + border-radius: 12px; + border: 3px solid var(--dark-text); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; +} + +.search-tool .tool-robot .robot-head { + background: var(--success-green); +} +.search-tool .tool-robot .robot-body { + background: var(--soft-green); +} + +.research-tool .tool-robot .robot-head { + background: var(--primary-blue); +} +.research-tool .tool-robot .robot-body { + background: var(--light-blue); +} + +.browser-tool .tool-robot .robot-head { + background: var(--warning-amber); +} +.browser-tool .tool-robot .robot-body { + background: var(--warm-yellow); +} + +.agents-tool .tool-robot .robot-head { + background: var(--light-purple); +} +.agents-tool .tool-robot .robot-body { + background: var(--soft-pink); +} + +.tool-robot.sleeping { + opacity: 0.6; +} + +.sleep-indicator { + position: absolute; + top: -10px; + right: -10px; + font-size: 0.8rem; + color: var(--medium-gray); + animation: float 2s infinite ease-in-out; +} + +.tool-content { + padding: 0 2rem 2rem; +} + +.tool-status { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 1rem; + border: 2px solid var(--dark-text); +} + +.tool-status.active { + background: var(--success-green); + color: white; +} +.tool-status.beta { + background: var(--warning-amber); + color: white; +} +.tool-status.coming { + background: var(--light-gray); + color: var(--medium-gray); + border-style: dashed; +} + +.tool-content h3 { + font-size: 1.3rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 0.5rem; +} + +.tool-content p { + color: var(--medium-gray); + margin-bottom: 1rem; +} + +.tool-features { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.tool-features .feature { + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + background: var(--pale-blue); + color: var(--dark-text); + border: 2px solid var(--primary-blue); +} + +.tool-features .feature.coming { + border-style: dashed; + color: var(--medium-gray); + background: var(--light-gray); +} + +/* Comparison Section */ +.comparison-section { + padding: 6rem 0; + background: var(--cream-white); +} + +.comparison-table { + background: var(--white); + border-radius: 20px; + border: 3px solid var(--dark-text); + overflow: hidden; + margin-top: 4rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); +} + +.table-header { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + background: var(--primary-blue); + color: white; +} + +.header-cell { + padding: 1rem; + font-weight: 700; + text-align: center; + border-right: 2px solid var(--dark-text); +} + +.header-cell:last-child { + border-right: none; +} + +.header-cell.jan-col { + background: var(--success-green); +} + +.table-row { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + border-bottom: 2px solid var(--light-gray); +} + +.table-row:last-child { + border-bottom: none; +} + +.table-cell { + padding: 1rem; + text-align: center; + border-right: 2px solid var(--light-gray); +} + +.table-cell:last-child { + border-right: none; +} + +.table-cell.feature-col { + font-weight: 600; + background: var(--pale-blue); +} + +.table-cell.jan-col { + background: var(--soft-green); + font-weight: 600; + color: var(--dark-text); +} + +/* Roadmap Section */ +.roadmap-section { + padding: 6rem 0; + background: var(--sky-blue); +} + +.roadmap-database { + background: var(--white); + border-radius: 20px; + border: 3px solid var(--dark-text); + overflow: hidden; + margin-top: 4rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); +} + +.database-header { + display: grid; + grid-template-columns: 2fr 2fr 1fr 0.5fr; + background: var(--primary-blue); + color: white; +} + +.database-header .header-cell { + padding: 1rem; + font-weight: 700; + text-align: center; + border-right: 2px solid var(--dark-text); +} + +.roadmap-row { + border-bottom: 2px solid var(--light-gray); + position: relative; +} + +.roadmap-row:last-child { + border-bottom: none; +} + +.roadmap-row { + display: grid; + grid-template-columns: 2fr 2fr 1fr 0.5fr; +} + +.row-cell { + padding: 1rem; + text-align: center; + border-right: 2px solid var(--light-gray); + display: flex; + align-items: center; + justify-content: center; +} + +.row-cell:last-child { + border-right: none; +} + +.expand-btn { + background: var(--primary-blue); + color: white; + border: 2px solid var(--dark-text); + border-radius: 50%; + width: 30px; + height: 30px; + cursor: pointer; + font-weight: bold; + font-size: 1.2rem; + transition: all 0.3s ease; +} + +.expand-btn:hover { + background: var(--success-green); + transform: scale(1.1); +} + +.status-badge { + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + border: 2px solid var(--dark-text); +} + +.status-badge.released { + background: var(--success-green); + color: white; +} + +.status-badge.in-progress { + background: var(--warning-amber); + color: white; +} + +.status-badge.planned { + background: var(--light-gray); + color: var(--medium-gray); + border-style: dashed; +} + +.row-details { + grid-column: 1 / -1; + background: var(--pale-blue); + border-top: 2px solid var(--light-gray); + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; +} + +.roadmap-row.expanded .row-details { + max-height: 500px; +} + +.details-content { + padding: 2rem; +} + +.detail-section { + margin-bottom: 2rem; +} + +.detail-section:last-child { + margin-bottom: 0; +} + +.detail-section h4 { + font-size: 1.1rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 1rem; +} + +.detail-section ul { + list-style: none; + padding: 0; + margin: 0; +} + +.detail-section li { + padding: 0.5rem 0; + border-bottom: 1px solid var(--light-gray); + color: var(--medium-gray); +} + +.detail-section li:last-child { + border-bottom: none; +} + +/* CTA Section */ +.cta-section { + padding: 6rem 0; + background: var(--primary-blue); + text-align: center; +} + +.cta-content { + max-width: 600px; + margin: 0 auto; +} + +.cta-robot { + display: inline-block; + margin-bottom: 2rem; + animation: bounce 3s infinite ease-in-out; +} + +.cta-robot .robot-head { + width: 80px; + height: 80px; + background: var(--warm-yellow); + border-radius: 20px; + border: 4px solid var(--dark-text); + margin: 0 auto 10px; + position: relative; +} + +.cta-robot .robot-eyes { + display: flex; + justify-content: space-between; + padding: 15px 12px; +} + +.eye.winking { + height: 4px; + border-radius: 2px; + animation: wink 3s infinite; +} + +.cta-robot .robot-body { + width: 100px; + height: 80px; + background: var(--soft-green); + border-radius: 15px; + border: 4px solid var(--dark-text); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.heart { + font-size: 1.5rem; + animation: heartbeat 2s infinite; +} + +.cta-content h2 { + font-size: 2.5rem; + font-weight: 800; + color: white; + margin-bottom: 1rem; +} + +.cta-content p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 2rem; +} + +.cta-buttons { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +.btn-primary, +.btn-secondary { + padding: 1rem 2rem; + border-radius: 50px; + font-size: 1rem; + font-weight: 600; + text-decoration: none; + transition: all 0.3s ease; + border: 3px solid var(--dark-text); + display: inline-block; +} + +.btn-primary { + background: var(--success-green); + color: white; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3); +} + +.btn-secondary { + background: white; + color: var(--dark-text); +} + +.btn-secondary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); +} + +/* Animations */ +@keyframes bounce { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes blink { + 0%, + 90%, + 100% { + opacity: 1; + } + 95% { + opacity: 0.3; + } +} + +@keyframes pulse { + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.1); + opacity: 0.8; + } +} + +@keyframes wink { + 0%, + 90%, + 100% { + height: 16px; + border-radius: 50%; + } + 95% { + height: 4px; + border-radius: 2px; + } +} + +@keyframes heartbeat { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } +} + +@keyframes float { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + } +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .vision-formula { + flex-direction: column; + align-items: center; + } + + .modes-comparison { + grid-template-columns: 1fr; + } + + .models-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + } + + .comparison-table, + .roadmap-database { + font-size: 0.9rem; + } + + .database-header, + .roadmap-row { + grid-template-columns: 1.5fr 1.5fr 1fr 0.5fr; + } +} + +@media (max-width: 768px) { + .container { + padding: 0 1rem; + } + + .title-main { + font-size: 2.5rem; + } + + .section-title { + font-size: 2rem; + } + + .toc-grid { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } + + .vision-principles { + grid-template-columns: 1fr; + } + + .platforms-grid { + grid-template-columns: 1fr; + } + + .model-specs { + grid-template-columns: 1fr; + } + + .tools-grid { + grid-template-columns: 1fr; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .speech-bubble { + display: none; + } + + .comparison-table, + .roadmap-database { + font-size: 0.8rem; + } + + .table-header, + .table-row { + grid-template-columns: 1fr; + } + + .table-cell, + .header-cell { + text-align: left; + border-right: none; + border-bottom: 1px solid var(--light-gray); + } + + .database-header, + .roadmap-row { + grid-template-columns: 1fr; + } + + .row-cell { + text-align: left; + border-right: none; + border-bottom: 1px solid var(--light-gray); + } +} + +@media (max-width: 480px) { + .hero-content { + padding: 0 1rem; + } + + .section-title { + font-size: 1.8rem; + } + + .cta-content h2 { + font-size: 2rem; + } + + .platform-card, + .model-card, + .tool-card { + padding: 1.5rem; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* High contrast mode */ +@media (prefers-contrast: high) { + .model-card, + .platform-card, + .tool-card, + .toc-card { + border-width: 4px; + } + + .comparison-table, + .roadmap-database { + border-width: 4px; + } +} + +/* Focus states for accessibility */ +.toc-item:focus, +.expand-btn:focus, +.btn-primary:focus, +.btn-secondary:focus { + outline: 2px solid var(--primary-blue); + outline-offset: 2px; +} diff --git a/website/src/styles/retro-effects.css b/website/src/styles/retro-effects.css new file mode 100644 index 000000000..1e6f42294 --- /dev/null +++ b/website/src/styles/retro-effects.css @@ -0,0 +1,822 @@ +/* Retro-Tech Effects CSS */ +/* RadioShack meets PostHog aesthetic */ + +:root { + /* Retro Color Palette */ + --retro-green: #00ff41; + --retro-amber: #ffb000; + --retro-blue: #00bfff; + --retro-red: #ff0040; + --retro-cyan: #00ffff; + --retro-magenta: #ff00ff; + + /* Terminal Colors */ + --terminal-bg: #0a0a0a; + --terminal-fg: #00ff41; + --terminal-cursor: #ffffff; + + /* Glow Effects */ + --glow-green: rgba(0, 255, 65, 0.5); + --glow-amber: rgba(255, 176, 0, 0.5); + --glow-blue: rgba(0, 191, 255, 0.5); + --glow-red: rgba(255, 0, 64, 0.5); +} + +/* CRT Monitor Effect */ +.crt-effect { + position: relative; + background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%); +} + +.crt-effect::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + rgba(0, 255, 65, 0.05) 0px, + rgba(0, 255, 65, 0.05) 1px, + transparent 1px, + transparent 3px + ); + pointer-events: none; + z-index: 1000; +} + +.crt-effect::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + ellipse at center, + transparent 40%, + rgba(0, 0, 0, 0.8) 100% + ); + pointer-events: none; + z-index: 1001; +} + +/* Matrix Rain Effect */ +.matrix-rain { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: -1; + overflow: hidden; +} + +.matrix-char { + position: absolute; + color: var(--retro-green); + font-family: 'JetBrains Mono', monospace; + font-size: 14px; + animation: matrixFall 3s linear infinite; + opacity: 0.7; +} + +@keyframes matrixFall { + 0% { + transform: translateY(-100vh); + opacity: 1; + } + 100% { + transform: translateY(100vh); + opacity: 0; + } +} + +/* Glitch Text Effects */ +.glitch-text { + position: relative; + color: var(--retro-green); + font-weight: bold; +} + +.glitch-text::before, +.glitch-text::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.glitch-text::before { + animation: glitch-anim-1 0.3s infinite; + color: var(--retro-red); + z-index: -1; +} + +.glitch-text::after { + animation: glitch-anim-2 0.3s infinite; + color: var(--retro-blue); + z-index: -2; +} + +@keyframes glitch-anim-1 { + 0% { + clip-path: inset(40% 0 61% 0); + transform: translate(-2px, -2px); + } + 20% { + clip-path: inset(92% 0 1% 0); + transform: translate(2px, 2px); + } + 40% { + clip-path: inset(43% 0 1% 0); + transform: translate(-2px, 2px); + } + 60% { + clip-path: inset(25% 0 58% 0); + transform: translate(2px, -2px); + } + 80% { + clip-path: inset(54% 0 7% 0); + transform: translate(-2px, -2px); + } + 100% { + clip-path: inset(58% 0 43% 0); + transform: translate(2px, 2px); + } +} + +@keyframes glitch-anim-2 { + 0% { + clip-path: inset(25% 0 58% 0); + transform: translate(2px, 1px); + } + 20% { + clip-path: inset(54% 0 7% 0); + transform: translate(-1px, 2px); + } + 40% { + clip-path: inset(58% 0 43% 0); + transform: translate(1px, -1px); + } + 60% { + clip-path: inset(40% 0 61% 0); + transform: translate(-1px, -2px); + } + 80% { + clip-path: inset(92% 0 1% 0); + transform: translate(2px, 1px); + } + 100% { + clip-path: inset(43% 0 1% 0); + transform: translate(-2px, -1px); + } +} + +/* Neon Glow Effects */ +.neon-glow { + text-shadow: + 0 0 5px currentColor, + 0 0 10px currentColor, + 0 0 15px currentColor, + 0 0 20px currentColor; + animation: neonFlicker 2s infinite alternate; +} + +@keyframes neonFlicker { + 0%, + 18%, + 22%, + 25%, + 53%, + 57%, + 100% { + text-shadow: + 0 0 5px currentColor, + 0 0 10px currentColor, + 0 0 15px currentColor, + 0 0 20px currentColor; + } + 20%, + 24%, + 55% { + text-shadow: none; + } +} + +/* Terminal Cursor */ +.terminal-cursor { + display: inline-block; + background-color: var(--terminal-cursor); + color: var(--terminal-bg); + animation: cursorBlink 1s infinite; + margin-left: 2px; + width: 8px; + height: 1em; +} + +@keyframes cursorBlink { + 0%, + 50% { + opacity: 1; + } + 51%, + 100% { + opacity: 0; + } +} + +/* Data Stream Animation */ +.data-stream { + position: relative; + overflow: hidden; +} + +.data-stream::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(0, 255, 65, 0.1) 10%, + rgba(0, 255, 65, 0.3) 50%, + rgba(0, 255, 65, 0.1) 90%, + transparent + ); + animation: dataStreamFlow 2s infinite; +} + +@keyframes dataStreamFlow { + 0% { + left: -100%; + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + left: 100%; + opacity: 0; + } +} + +/* Circuit Board Traces */ +.circuit-trace { + position: relative; + overflow: hidden; +} + +.circuit-trace::after { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + transparent, + var(--retro-green) 20%, + var(--retro-green) 80%, + transparent + ); + transform: translateY(-50%); + animation: circuitPulse 3s infinite; +} + +@keyframes circuitPulse { + 0%, + 100% { + opacity: 0.3; + box-shadow: 0 0 5px var(--retro-green); + } + 50% { + opacity: 1; + box-shadow: 0 0 15px var(--retro-green); + } +} + +/* Electronic Component Styles */ +.component-resistor { + display: inline-block; + width: 20px; + height: 6px; + background: linear-gradient( + 90deg, + transparent 0%, + var(--retro-amber) 20%, + var(--retro-red) 40%, + var(--retro-amber) 60%, + var(--retro-red) 80%, + transparent 100% + ); + border-radius: 1px; + position: relative; +} + +.component-resistor::before, +.component-resistor::after { + content: ''; + position: absolute; + top: 50%; + width: 5px; + height: 1px; + background: var(--retro-green); + transform: translateY(-50%); +} + +.component-resistor::before { + left: -5px; +} +.component-resistor::after { + right: -5px; +} + +.component-led { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background: radial-gradient(circle, var(--retro-red), transparent); + box-shadow: 0 0 10px var(--retro-red); + animation: ledBlink 2s infinite; +} + +@keyframes ledBlink { + 0%, + 80%, + 100% { + opacity: 0.3; + box-shadow: 0 0 5px var(--retro-red); + } + 85%, + 95% { + opacity: 1; + box-shadow: 0 0 15px var(--retro-red); + } +} + +/* Retro Button Styles */ +.retro-button { + background: linear-gradient(145deg, #2a2a2a, #1a1a1a); + border: 2px solid var(--retro-green); + color: var(--retro-green); + padding: 0.75rem 1.5rem; + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + cursor: pointer; + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + +.retro-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(0, 255, 65, 0.2), + transparent + ); + transition: left 0.5s; +} + +.retro-button:hover::before { + left: 100%; +} + +.retro-button:hover { + box-shadow: + 0 0 20px var(--glow-green), + inset 0 0 20px rgba(0, 255, 65, 0.1); + transform: translateY(-2px); +} + +.retro-button:active { + transform: translateY(0); + box-shadow: + 0 0 10px var(--glow-green), + inset 0 0 10px rgba(0, 255, 65, 0.2); +} + +/* Holographic Effect */ +.holographic { + background: linear-gradient( + 45deg, + var(--retro-cyan), + var(--retro-magenta), + var(--retro-amber), + var(--retro-green) + ); + background-size: 400% 400%; + animation: holographicShift 3s ease infinite; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +@keyframes holographicShift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* System Status Indicators */ +.system-status { + display: flex; + align-items: center; + gap: 0.5rem; + font-family: 'JetBrains Mono', monospace; + font-size: 0.8rem; + text-transform: uppercase; +} + +.status-bar { + width: 60px; + height: 4px; + background: #333; + border-radius: 2px; + overflow: hidden; + position: relative; +} + +.status-bar::after { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + background: var(--retro-green); + border-radius: 2px; + animation: statusProgress 2s ease-in-out infinite; +} + +@keyframes statusProgress { + 0% { + width: 0%; + } + 50% { + width: 100%; + } + 100% { + width: 0%; + } +} + +/* Vintage Monitor Bezel */ +.monitor-bezel { + background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); + border: 3px solid #333; + border-radius: 15px; + padding: 20px; + position: relative; + box-shadow: + inset 0 0 20px rgba(0, 0, 0, 0.5), + 0 0 30px rgba(0, 0, 0, 0.8); +} + +.monitor-bezel::before { + content: ''; + position: absolute; + top: 10px; + right: 10px; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--retro-red); + box-shadow: 0 0 8px var(--retro-red); + animation: powerIndicator 3s infinite; +} + +@keyframes powerIndicator { + 0%, + 90%, + 100% { + opacity: 1; + } + 95% { + opacity: 0.3; + } +} + +/* ASCII Art Enhancement */ +.ascii-art { + font-family: 'JetBrains Mono', monospace; + white-space: pre; + color: var(--retro-green); + text-shadow: 0 0 10px var(--glow-green); + animation: asciiGlow 4s ease-in-out infinite alternate; +} + +@keyframes asciiGlow { + 0% { + text-shadow: 0 0 5px var(--glow-green); + opacity: 0.8; + } + 100% { + text-shadow: 0 0 20px var(--glow-green); + opacity: 1; + } +} + +/* Retro Loading Animation */ +.retro-loader { + display: inline-block; + position: relative; + width: 40px; + height: 40px; +} + +.retro-loader::after { + content: ''; + position: absolute; + border: 3px solid #333; + border-top: 3px solid var(--retro-green); + border-radius: 50%; + width: 30px; + height: 30px; + animation: retroSpin 1s linear infinite; +} + +@keyframes retroSpin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* Scanline Effect */ +.scanlines { + position: relative; +} + +.scanlines::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 255, 65, 0.03) 2px, + rgba(0, 255, 65, 0.03) 4px + ); + pointer-events: none; + animation: scanlineMove 8s linear infinite; +} + +@keyframes scanlineMove { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(4px); + } +} + +/* Phosphor Screen Effect */ +.phosphor-screen { + background: radial-gradient(ellipse at center, #001100 0%, #000000 100%); + color: var(--retro-green); + text-shadow: 0 0 2px var(--retro-green); +} + +/* Terminal Window */ +.terminal-window { + background: #000000; + border: 2px solid var(--retro-green); + border-radius: 4px; + padding: 1rem; + font-family: 'JetBrains Mono', monospace; + color: var(--retro-green); + box-shadow: + 0 0 20px rgba(0, 255, 65, 0.3), + inset 0 0 20px rgba(0, 255, 65, 0.1); +} + +.terminal-header { + display: flex; + align-items: center; + margin-bottom: 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--retro-green); +} + +.terminal-title { + color: var(--retro-amber); + font-weight: bold; + text-transform: uppercase; +} + +/* Retro Grid */ +.retro-grid { + background-image: + linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px); + background-size: 20px 20px; +} + +/* Digital Clock Display */ +.digital-clock { + font-family: 'JetBrains Mono', monospace; + color: var(--retro-green); + background: #000000; + padding: 0.5rem 1rem; + border: 1px solid var(--retro-green); + font-weight: bold; + text-shadow: 0 0 10px var(--retro-green); + letter-spacing: 0.1em; +} + +/* Radar Sweep Effect */ +.radar-sweep { + position: relative; + border-radius: 50%; + background: radial-gradient( + circle, + transparent 30%, + rgba(0, 255, 65, 0.1) 100% + ); + overflow: hidden; +} + +.radar-sweep::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 50%; + height: 2px; + background: linear-gradient(90deg, var(--retro-green), transparent); + transform-origin: left center; + animation: radarSweep 3s linear infinite; +} + +@keyframes radarSweep { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } +} + +/* VHS Static Effect */ +.vhs-static { + position: relative; + overflow: hidden; +} + +.vhs-static::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + rgba(255, 255, 255, 0.03) 2px, + rgba(255, 255, 255, 0.03) 4px + ), + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(255, 255, 255, 0.03) 2px, + rgba(255, 255, 255, 0.03) 4px + ); + animation: vhsStatic 0.1s infinite; + pointer-events: none; +} + +@keyframes vhsStatic { + 0% { + opacity: 0.03; + } + 50% { + opacity: 0.05; + } + 100% { + opacity: 0.03; + } +} + +/* Accessibility and Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* High Contrast Mode */ +@media (prefers-contrast: high) { + :root { + --retro-green: #00ff00; + --retro-amber: #ffff00; + --retro-red: #ff0000; + --retro-blue: #0080ff; + } + + .crt-effect::before { + display: none; + } + + .neon-glow { + text-shadow: none; + font-weight: bold; + } + + .scanlines::after { + display: none; + } +} + +/* Dark Mode Enhancements */ +@media (prefers-color-scheme: dark) { + .retro-button { + background: linear-gradient(145deg, #1a1a1a, #0a0a0a); + } + + .monitor-bezel { + background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #000000 100%); + } +} + +/* Print Styles */ +@media print { + .matrix-rain, + .crt-effect::before, + .crt-effect::after, + .neon-glow, + .data-stream::before, + .circuit-trace::after, + .scanlines::after { + display: none !important; + } + + .retro-button, + .terminal-window { + border: 2px solid #000 !important; + background: #fff !important; + color: #000 !important; + } +} + +/* Mobile Optimizations */ +@media (max-width: 768px) { + .retro-button { + padding: 0.5rem 1rem; + font-size: 0.9rem; + } + + .terminal-window { + padding: 0.75rem; + font-size: 0.9rem; + } + + .digital-clock { + font-size: 0.8rem; + padding: 0.25rem 0.5rem; + } +} + +/* Focus States for Accessibility */ +.retro-button:focus, +.terminal-window:focus { + outline: 2px solid var(--retro-green); + outline-offset: 2px; +} diff --git a/website/src/styles/robot-personalities.css b/website/src/styles/robot-personalities.css new file mode 100644 index 000000000..71a1cac66 --- /dev/null +++ b/website/src/styles/robot-personalities.css @@ -0,0 +1,393 @@ +/* Robot Personalities - Fun, Playful, PostHog-inspired Style */ + +/* ===== VIBRANT COLOR PALETTE ===== */ +:root { + /* Primary Colors - Bold & Playful */ + --robot-pink: #FF006E; + --robot-blue: #3A86FF; + --robot-green: #06FFA5; + --robot-yellow: #FFB700; + --robot-purple: #8338EC; + --robot-orange: #FB5607; + --robot-teal: #00F5FF; + --robot-red: #FF4365; + + /* Background & UI Colors */ + --robot-dark: #1A1A2E; + --robot-light: #FFFFFF; + --robot-gray: #4A4E69; + --robot-bg-purple: #F3E8FF; + --robot-bg-blue: #E8F4FF; + --robot-bg-pink: #FFE8F0; + --robot-bg-yellow: #FFF8E8; + --robot-bg-green: #E8FFEA; + + /* Special Effects */ + --robot-glow-pink: rgba(255, 0, 110, 0.4); + --robot-glow-blue: rgba(58, 134, 255, 0.4); + --robot-glow-green: rgba(6, 255, 165, 0.4); + --robot-shadow: rgba(26, 26, 46, 0.15); +} + +/* ===== HAPPY ROBOT SMILES ===== */ +.robot-smile { + position: absolute; + bottom: 12px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 10px; + border: 3px solid var(--robot-dark); + border-top: none !important; + border-radius: 0 0 20px 20px !important; + background: transparent; +} + +/* Big smile variant */ +.robot-smile-big { + width: 30px; + height: 15px; + border-radius: 0 0 30px 30px !important; +} + +/* Cheeky smile */ +.robot-smile.cheeky { + transform: translateX(-50%) rotate(-5deg); +} + +/* ===== ROBOT EYES WITH PERSONALITY ===== */ +.robot-eye { + width: 12px; + height: 12px; + background: var(--robot-dark); + border-radius: 50%; + position: relative; + transition: all 0.3s ease; +} + +/* Eye shine */ +.robot-eye::after { + content: ''; + position: absolute; + top: 2px; + right: 2px; + width: 4px; + height: 4px; + background: white; + border-radius: 50%; + animation: eyeShine 3s infinite; +} + +/* Winking eye */ +.robot-eye.wink { + height: 2px; + border-radius: 0; + animation: wink 4s infinite; +} + +/* Excited eyes */ +.robot-eye.excited { + transform: scale(1.2); +} + +.robot-eye.excited::before { + content: ''; + position: absolute; + top: -5px; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: 4px; + background: var(--robot-dark); + border-radius: 1px; +} + +/* Heart eyes */ +.robot-eye.love { + background: var(--robot-pink); + clip-path: polygon(50% 25%, 15% 0%, 0% 15%, 0% 40%, 50% 90%, 100% 40%, 100% 15%, 85% 0%); + border-radius: 0; + width: 14px; + height: 14px; +} + +/* Sleepy eyes */ +.robot-eye.sleeping { + height: 2px; + border-radius: 0; + background: var(--robot-gray); +} + +/* ===== ROBOT BLUSH ===== */ +.robot-blush { + position: absolute; + width: 12px; + height: 8px; + background: var(--robot-pink); + opacity: 0.3; + border-radius: 50%; + top: 50%; +} + +.robot-blush.left { + left: -5px; +} + +.robot-blush.right { + right: -5px; +} + +/* ===== ROBOT HEAD STYLES ===== */ +.robot-head { + position: relative; + animation: robotBob 4s ease-in-out infinite; +} + +/* Add antenna with animation */ +.robot-antenna { + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); + width: 3px; + height: 15px; + background: var(--robot-dark); + border-radius: 2px; +} + +.robot-antenna::after { + content: ''; + position: absolute; + top: -8px; + left: 50%; + transform: translateX(-50%); + width: 12px; + height: 12px; + background: var(--robot-pink); + border: 2px solid var(--robot-dark); + border-radius: 50%; + animation: antennaGlow 2s ease-in-out infinite; +} + +/* ===== ROBOT BODY DECORATIONS ===== */ +.robot-chest-screen { + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 40px; + height: 30px; + background: var(--robot-dark); + border-radius: 8px; + overflow: hidden; +} + +.robot-chest-screen::after { + content: '♥'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--robot-pink); + font-size: 20px; + animation: heartBeat 1.5s ease-in-out infinite; +} + +/* Robot buttons */ +.robot-button { + position: absolute; + width: 8px; + height: 8px; + background: var(--robot-yellow); + border: 2px solid var(--robot-dark); + border-radius: 50%; + cursor: pointer; + transition: all 0.2s ease; +} + +.robot-button:hover { + transform: scale(1.2); + background: var(--robot-green); +} + +/* ===== SPECIAL ROBOT VARIANTS ===== */ + +/* Hero Robot - Extra Playful */ +.hero-robot .robot-head { + background: linear-gradient(135deg, var(--robot-yellow) 0%, var(--robot-orange) 100%); + box-shadow: 0 8px 32px var(--robot-shadow); +} + +.hero-robot .robot-body { + background: linear-gradient(135deg, var(--robot-green) 0%, var(--robot-teal) 100%); + box-shadow: 0 8px 32px var(--robot-shadow); +} + +/* Models Robot - Smart & Analytical */ +.models-robot .robot-head { + background: linear-gradient(135deg, var(--robot-purple) 0%, var(--robot-pink) 100%); +} + +.models-robot::before { + content: ''; + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 60px; + border: 2px dashed var(--robot-purple); + border-radius: 50%; + animation: thinkingCircle 6s linear infinite; +} + +/* Platform Robot - Connected */ +.platform-robot .robot-body::before, +.platform-robot .robot-body::after { + content: ''; + position: absolute; + width: 40px; + height: 2px; + background: var(--robot-blue); + top: 50%; + animation: connectionPulse 2s ease-in-out infinite; +} + +.platform-robot .robot-body::before { + left: -40px; +} + +.platform-robot .robot-body::after { + right: -40px; +} + +/* Tools Robot - Action-Oriented */ +.tools-robot { + animation: toolsWorking 3s ease-in-out infinite; +} + +.tools-robot .robot-arms { + animation: armSwing 2s ease-in-out infinite; +} + +/* ===== FUN ANIMATIONS ===== */ +@keyframes robotBob { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-5px); } +} + +@keyframes antennaGlow { + 0%, 100% { + background: var(--robot-pink); + box-shadow: 0 0 10px var(--robot-glow-pink); + } + 50% { + background: var(--robot-green); + box-shadow: 0 0 20px var(--robot-glow-green); + } +} + +@keyframes heartBeat { + 0%, 100% { transform: translate(-50%, -50%) scale(1); } + 25% { transform: translate(-50%, -50%) scale(1.1); } + 50% { transform: translate(-50%, -50%) scale(0.9); } + 75% { transform: translate(-50%, -50%) scale(1.05); } +} + +@keyframes eyeShine { + 0%, 90%, 100% { opacity: 1; } + 95% { opacity: 0; } +} + +@keyframes wink { + 0%, 40%, 50%, 100% { height: 12px; border-radius: 50%; } + 45% { height: 2px; border-radius: 0; } +} + +@keyframes thinkingCircle { + 0% { transform: translateX(-50%) rotate(0deg); } + 100% { transform: translateX(-50%) rotate(360deg); } +} + +@keyframes connectionPulse { + 0%, 100% { opacity: 0.3; width: 40px; } + 50% { opacity: 1; width: 60px; } +} + +@keyframes toolsWorking { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-2deg); } + 75% { transform: rotate(2deg); } +} + +@keyframes armSwing { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-10deg); } + 75% { transform: rotate(10deg); } +} + +/* ===== SPARKLE EFFECTS ===== */ +.robot-sparkles { + position: absolute; + top: -20px; + left: -20px; + right: -20px; + bottom: -20px; + pointer-events: none; +} + +.sparkle { + position: absolute; + width: 4px; + height: 4px; + background: var(--robot-yellow); + animation: sparkle 3s ease-in-out infinite; +} + +.sparkle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; } +.sparkle:nth-child(2) { top: 30%; right: 15%; animation-delay: 0.5s; } +.sparkle:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 1s; } +.sparkle:nth-child(4) { bottom: 10%; right: 25%; animation-delay: 1.5s; } + +@keyframes sparkle { + 0%, 100% { + opacity: 0; + transform: scale(0) rotate(0deg); + } + 50% { + opacity: 1; + transform: scale(1) rotate(180deg); + } +} + +/* ===== HOVER INTERACTIONS ===== */ +.robot-head:hover { + animation-play-state: paused; + transform: scale(1.05); + cursor: pointer; +} + +.robot-head:hover .robot-eye { + transform: scale(1.2); +} + +.robot-head:hover .robot-smile { + border-color: var(--robot-pink); + width: 24px; +} + +/* ===== ACCESSIBILITY ===== */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ===== RESPONSIVE ADJUSTMENTS ===== */ +@media (max-width: 768px) { + .robot-head, .robot-body { + transform: scale(0.9); + } +} diff --git a/website/tsconfig.json b/website/tsconfig.json new file mode 100644 index 000000000..8bf91d3bb --- /dev/null +++ b/website/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +}