diff --git a/website/bun.lock b/website/bun.lock index 64b203928..a14a47a64 100644 --- a/website/bun.lock +++ b/website/bun.lock @@ -6,6 +6,8 @@ "dependencies": { "@astrojs/starlight": "^0.35.1", "astro": "^5.6.1", + "gsap": "^3.13.0", + "phosphor-astro": "^2.1.0", "sharp": "^0.34.2", "starlight-sidebar-topics": "^0.6.0", "starlight-theme-rapide": "^0.5.1", @@ -432,6 +434,8 @@ "github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="], + "gsap": ["gsap@3.13.0", "", {}, "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="], + "h3": ["h3@1.15.3", "", { "dependencies": { "cookie-es": "^1.2.2", "crossws": "^0.3.4", "defu": "^6.1.4", "destr": "^2.0.5", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.0", "radix3": "^1.1.2", "ufo": "^1.6.1", "uncrypto": "^0.1.3" } }, "sha512-z6GknHqyX0h9aQaTx22VZDf6QyZn+0Nh+Ym8O/u0SGSkyF5cuTJYKlc8MkzW3Nzf9LE1ivcpmYC3FUGpywhuUQ=="], "hast-util-embedded": ["hast-util-embedded@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-is-element": "^3.0.0" } }, "sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA=="], @@ -688,6 +692,8 @@ "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="], + "phosphor-astro": ["phosphor-astro@2.1.0", "", {}, "sha512-qyYUlxF8DbfHc+85DDGPL04ghNBwrVK75EsNsBfYOChiCeCRwAwfbHxj/qqPrrSFPMgh9cUyEvgKYjI/7bjCUA=="], + "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="], "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="], diff --git a/website/src/components/DoodleBackground.astro b/website/src/components/DoodleBackground.astro new file mode 100644 index 000000000..8244fccfa --- /dev/null +++ b/website/src/components/DoodleBackground.astro @@ -0,0 +1,371 @@ +--- +export interface Props { + variant?: 'light' | 'dark' | 'colorful'; + density?: 'sparse' | 'medium' | 'dense'; + animated?: boolean; + pattern?: 'robots' | 'shapes' | 'mixed' | 'tech'; +} + +const { + variant = 'light', + density = 'medium', + animated = true, + pattern = 'mixed' +} = Astro.props; + +// Generate random positions for doodles +const doodleCount = density === 'sparse' ? 8 : density === 'medium' ? 15 : 25; +const doodles = Array.from({ length: doodleCount }, (_, i) => ({ + id: i, + x: Math.random() * 100, + y: Math.random() * 100, + type: ['squiggle', 'dot', 'star', 'heart', 'robot', 'circle', 'triangle', 'zigzag'][Math.floor(Math.random() * 8)], + size: Math.random() * 0.5 + 0.5, + rotation: Math.random() * 360, + delay: Math.random() * 5 +})); +--- + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {doodles.map(doodle => ( + + + + ))} + + + +
+
+ AI magic happens here! + + + + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + +
+
+
+ + + + diff --git a/website/src/components/products/ProductsArchitecture.astro b/website/src/components/products/ProductsArchitecture.astro new file mode 100644 index 000000000..8593f2eb3 --- /dev/null +++ b/website/src/components/products/ProductsArchitecture.astro @@ -0,0 +1,900 @@ +--- +// ProductsArchitecture.astro - 3-layer stack explanation component +--- + +
+
+
+
+
+
+
Stack
+
+ How Jan Works +
+

Three Layers, One Experience

+

+ Unlike other AI assistants that do specific tasks with one model or have many models with a myriad of solutions, + Jan provides a complete, integrated stack that works together seamlessly. +

+
+ + +
+ +
+
3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Tools & Capabilities

+

AI capabilities that actually get things done. Not just chat, but real automation and intelligence augmentation.

+
+
+
+ Web Search +
+
+
+ Deep Research +
+
+
+ Browser Use +
+
+
+ AI Agents +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
2
+
+
+
+
+
+
+
+
+
+
+
+
+
+

AI Models

+

Purpose-built models, not API wrappers. Trained by us, optimized for privacy and performance.

+
+
+
+ Jan V1 Series +
+
+
+ Jan Nano +
+
+
+ Lucy (Multimodal) +
+
+
+
+
+
+
+
+
+
+
+ + +
+
1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Platform Ecosystem

+

Run anywhere - desktop, web, mobile, or server. Your AI assistant follows you across all devices.

+
+
+
+ Desktop App +
+
+
+ jan.ai Web +
+
+
+ Mobile Apps +
+
+
+ Server Edition +
+
+
+
+
+ + +
+

Why This Architecture Matters

+
+
+
+
+
+
+
+
+
+

Tight Integration

+

Each layer is designed to work perfectly with the others. No API incompatibilities or integration headaches.

+
+ +
+
+
+
+
+
+
+
+

Your Control

+

Own your models, choose your deployment, control your data. No vendor lock-in or surprise policy changes.

+
+ +
+
+
+
+
+
+
+
+

Scales With You

+

Start simple with local models, add cloud power when needed, deploy for teams when you're ready.

+
+
+
+ + +
+

See It In Action

+
+
+
User asks: "Find recent AI research papers"
+
+
+
1
+
+ Tools Layer: Web Search tool activates +
+
+
+
+
2
+
+ Models Layer: Jan V1 processes the request +
+
+
+
+
3
+
+ Platform Layer: Results displayed in your app +
+
+
+
+
+
+
+
+ + + + diff --git a/website/src/components/products/ProductsHero.astro b/website/src/components/products/ProductsHero.astro new file mode 100644 index 000000000..17065c68d --- /dev/null +++ b/website/src/components/products/ProductsHero.astro @@ -0,0 +1,696 @@ +--- +// ProductsHero.astro - Hero section with blue-tinted background and friendly robot +--- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
AI
+
+ Full Stack AI Solution +
+ +

+ Jan's Product Roadmap + AI that runs where you need it, how you need it +

+ +

+ Complete ecosystem of models, applications, and tools. Let's build the future of AI together! +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ready to build amazing AI experiences? +
+
+
+
+ +
+
+
3
+
AI Models
+
+
+
4
+
Platforms
+
+
+
4
+
Tools
+
+
+
+
+
+ + diff --git a/website/src/components/products/ProductsModels.astro b/website/src/components/products/ProductsModels.astro new file mode 100644 index 000000000..e01e6bd73 --- /dev/null +++ b/website/src/components/products/ProductsModels.astro @@ -0,0 +1,909 @@ +--- +// ProductsModels.astro - AI Models section with detailed specifications +--- + +
+
+
+
+
+
+
AI
+
+ AI Models +
+

Our AI Models

+

+ Purpose-built models, not API wrappers. Trained by us, optimized for privacy and performance. + As of now, we have Jan Nano in 2 flavors and Lucy but more are coming soon. +

+
+ + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🧠
+
+
+
+
+
+
+
+
+
+
+
+
+
π
+
+
+
V1
+
+
+
+
+
+
+
+
Production Ready
+
+
+ +
+
+

Jan V1 Series

+
v1.2.1
+
+ +

+ Complete model family designed to compete with Claude and GPT-4. + Optimized for reasoning, coding, and general conversation. +

+ +
+
+

Model Sizes

+
+
+
7B
+
8GB RAM
+
+
+
13B
+
16GB RAM
+
+
+
70B
+
64GB RAM
+
+
+
+ +
+

Performance

+
+
Context Window
+
32,768 tokens
+
+
+
+ +
+

Capabilities

+
+
+
+ Reasoning +
+
+
+ Code Generation +
+
+
+ Multilingual +
+
+
+ Tool Use +
+
+
+ +
+
+
Production
+
Status
+
+
+
3M+
+
Downloads
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Nano
+
+
+
+
+
+
+
+
Beta
+
+
+ +
+
+

Jan Nano

+
v0.6.0
+
+ +

+ Specialized for research and information retrieval. Native MCP integration + for web search, document analysis, and knowledge synthesis. Available in 2 flavors. +

+ +
+
+

Specifications

+
+
+
Parameters
+
4B
+
+
+
RAM Required
+
6-8GB
+
+
+
+ +
+

Context Options

+
+
+
Standard
+
32k tokens
+
+
+
Extended
+
128k tokens
+
+
+
+
+ +
+

Specialized For

+
+
+
+ Web Search +
+
+
+ Document Analysis +
+
+
+ Mobile Optimized +
+
+
+ MCP Tools +
+
+
+ +
+
+
Beta
+
Status
+
+
+
2
+
Flavors
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ 🌟 + 👁️ + 🎨 +
+
+
+
+
+
+
+
+
+
+
+
🌙
+
+
+
Lucy
+
🧸
+
+
+
+
+
+
Training...
+
+
+
+
Q2 2025
+
+
+ +
+
+

Lucy

+
v0.1.0-alpha
+
+ +

+ Advanced multimodal capabilities for image understanding, document processing, + and visual reasoning tasks. The future of AI interaction. +

+ +
+
+

Modalities

+
+
+
Vision
+
Ready
+
+
+
Text
+
Ready
+
+
+
Audio
+
Soon
+
+
+
+ +
+

Timeline

+
+
Release Target
+
Q2 2025
+
+
+
+ +
+

Future Capabilities

+
+
+
+ Image Analysis +
+
+
+ OCR +
+
+
+ Visual Reasoning +
+
+
+ Document Processing +
+
+
+ +
+
+
Training
+
Status
+
+
+
Multimodal
+
Type
+
+
+
+
+
+ + +
+

Choose Your Model

+
+
+
Feature
+
Jan V1
+
Jan Nano
+
Lucy
+
+ +
+
Use Case
+
General AI
+
Research & Mobile
+
Multimodal AI
+
+ +
+
Status
+
+
Production
+
+
+
Beta
+
+
+
Coming
+
+
+ +
+
Parameters
+
7B - 70B
+
4B
+
TBD
+
+ +
+
RAM Required
+
8GB - 64GB
+
6GB - 8GB
+
TBD
+
+ +
+
Best For
+
Coding, Reasoning
+
Research, Mobile
+
Vision, Documents
+
+
+
+
+
+ + + + diff --git a/website/src/components/products/ProductsPlatforms.astro b/website/src/components/products/ProductsPlatforms.astro new file mode 100644 index 000000000..1bb73eb40 --- /dev/null +++ b/website/src/components/products/ProductsPlatforms.astro @@ -0,0 +1,1272 @@ +--- +// ProductsPlatforms.astro - Platform ecosystem with mobile integration +--- + +
+
+
+
+
+
+
Devices
+
+ Platform Ecosystem +
+

Available on Every Device

+

+ Your AI assistant follows you across all your devices with seamless synchronization. + Run AI where it makes sense for you. Local for privacy, cloud for power, mobile for accessibility. +

+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
GPU
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💪
+
+
+
+
+
+
+
+
+
+ +
+
Available Now
+

Jan Desktop

+

Your personal AI workstation that powers all other devices

+ +
+
+
+
+
3M+
+
Downloads
+
+
+
+ +
+
+
+ Runs models locally +
+
+
+ Optional cloud connection +
+
+
+ Powers other devices +
+
+
+ GPU acceleration +
+
+ +
+
+
Min RAM
+
8GB
+
+
+
Storage
+
10GB+
+
+
+
OS Support
+
Win/Mac/Linux
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
jan.ai
+
+
+
+
+
+
+
+
☁️
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Beta Launch Soon
+

jan.ai Web

+

SaaS version of Jan Server with no setup required. Default for mobile/desktop cloud mode.

+ +
+
+
+
+
Join
+
Waitlist
+
+
+
+ +
+
+
+ No installation needed +
+
+
+ Instant access +
+
+
+ Cross-platform sync +
+
+
+ Mobile companion +
+
+ +
+
+
Free
+
50 queries/day
+
+
+
Pro
+
Unlimited
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
J
+
!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
5G
+
+
+
+
+
+
+
+
+
+
+
Q1 2025
+
+ ✨ +
+
+
+ +
+
Q1 2025
+

Jan Mobile

+

Your AI assistant on the go. Jan Mobile adapts to your situation with three intelligent modes.

+ +
+
+
+
+
iOS & Android
+
Coming Soon
+
+
+
+ + +
+

Three Modes, One Experience

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Desktop Mode
+

At home, connect to your Jan Desktop over WiFi

+
+ Phone → WiFi → Desktop +
+
+
Access to larger models
+
Faster processing
+
Shared conversations
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
Server Mode
+

At work, connect to your company Jan Server

+
+ Phone → Internet → Server +
+
+
Team knowledge base
+
Consistent models
+
Work anywhere
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
Local Mode
+

On the go, run Jan Nano directly on your phone

+
+ Phone → Jan Nano → Response +
+
+
Complete privacy
+
Works offline
+
Always available
+
+
+
+
+
+ +
+

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.

+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
SYS
+
+
+
> INITIALIZING...
+
+
+
+
+
+
+
CPU
+
+
+
+
RAM
+
+
+
+
SSD
+
+
+
+
+
+
+
+
+
+
+
ETH0
+
+
+
ETH1
+
+
+
PWR
+
+
+
+ ENTERPRISE +
+
+ +
+
Q2 2025
+

Jan Server

+

Self-hosted for teams with enterprise capabilities. Your own private AI cloud.

+ +
+
+
+
+
5-500+
+
Users
+
+
+
+ +
+
+
+ Self-hosted deployment +
+
+
+ Multi-user support +
+
+
+ Enterprise SSO +
+
+
+ Docker & Kubernetes +
+
+ +
+
+
+
+
Docker
+
Single command setup
+
+
+
+
+
+
Kubernetes
+
Enterprise scale
+
+
+
+
+
+
+ + +
+

Choose Your Platform

+
+
+
Platform
+
Best For
+
Status
+
Key Benefit
+
+ +
+
+
+ Desktop +
+
Power users, developers
+
+
Available
+
+
Complete privacy & power
+
+ +
+
+
+ Web +
+
Quick access, collaboration
+
+
Beta
+
+
No installation required
+
+ +
+
+
+ Mobile +
+
On-the-go AI assistance
+
+
Q1 2025
+
+
AI in your pocket
+
+ +
+
+
+ Server +
+
Teams, enterprises
+
+
Q2 2025
+
+
Team collaboration
+
+
+
+
+
+ + + diff --git a/website/src/components/products/ProductsPrinciples.astro b/website/src/components/products/ProductsPrinciples.astro new file mode 100644 index 000000000..59a45e8f5 --- /dev/null +++ b/website/src/components/products/ProductsPrinciples.astro @@ -0,0 +1,528 @@ +--- +// ProductsPrinciples.astro - Why Jan is different comparison +--- + +
+
+
+
+
+
+
Why
+
+ Why Jan is Different +
+

What Makes Jan Different

+

+ Most AI is just a wrapper around someone else's models. Jan is different. + We build the models, control the infrastructure, and integrate the tools. +

+
+ + +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Other AI Assistants

+

Subscription-based, cloud-only solutions

+
+ +
+
+
+
+

API Wrappers

+

Just interfaces around Claude/GPT models

+
+
+
+
+
+

Cloud Only

+

Your data travels to their servers

+
+
+
+
+
+

Subscription Forever

+

Monthly fees that never end

+
+
+
+
+
+

Their Rules

+

Limited by their policies and restrictions

+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
VS
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Jan

+

Open, self-hostable, privacy-first AI

+
+ +
+
+
+
+

Our Own Models

+

Purpose-built, optimized for your needs

+
+
+
+
+
+

Your Data Stays Yours

+

Local processing, complete privacy

+
+
+
+
+
+

Free Locally

+

No subscriptions for local usage

+
+
+
+
+
+

Your Rules

+

Self-host and control everything

+
+
+
+
+
+
+ + +
+

Feature Comparison

+
+
+
Feature
+
Other AI Assistants
+
Jan
+
+ +
+
+
+
+
+
+ Models +
+
+
Wrapper around Claude/GPT
+
+
+
Our own models + others
+
+
+ +
+
+
+
+
+
+ Privacy +
+
+
Your data on their servers
+
+
+
Your data stays yours
+
+
+ +
+
+
+
+
+
+ Deployment +
+
+
Cloud only
+
+
+
Local, self-hosted, or cloud
+
+
+ +
+
+
+
+
+
+ Cost +
+
+
Subscription forever
+
+
+
Free locally, pay for cloud
+
+
+ +
+
+
+
+
+
+ Control +
+
+
Their rules, their limits
+
+
+
Your infrastructure, your rules
+
+
+
+
+ + +
+

Our Philosophy

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Our Models

+

Trained by us, optimized for your use cases, not subscription revenue. Real AI, not API wrappers.

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Your Infrastructure

+

Run locally for privacy, or cloud when you need power. You choose where your data lives.

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Real Tools

+

Not just chat, but automation that actually gets things done. Integrated, not bolted-on.

+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ Open AI +
+
+
+
+
+
+
+

Ready for AI that respects your choices?

+

Run it locally for privacy, connect to cloud for power, or self-host for both.

+
+ Download Jan Desktop + Try jan.ai Beta +
+
+
+
+
+ + + + diff --git a/website/src/components/products/ProductsRoadmap.astro b/website/src/components/products/ProductsRoadmap.astro new file mode 100644 index 000000000..ea663882a --- /dev/null +++ b/website/src/components/products/ProductsRoadmap.astro @@ -0,0 +1,763 @@ +--- +// ProductsRoadmap.astro - Interactive release roadmap database +--- + +
+
+
+
+
+
+
Map
+
+ Release Roadmap +
+

Development Timeline

+

+ Detailed roadmap with release versions, target dates, and comprehensive feature breakdowns. + Track our progress as we build the future of AI. +

+
+ + +
+
+
+
+
+
+
+
+
+
+
3
+
Released
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
2
+
In Development
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
4
+
Planned
+
+
+
+
+ + +
+
+
+
+
+
DB
+
+

Release Database

+
+
+ + +
+
+ +
+
+
Release Version
+
Target Date
+
Status
+
Details
+
+ + +
+
+
+
+
+
✓
+
+
+
v0.6.7
+
Web Search
+
+
+
+
Released
+
+
+
+
+ Live +
+
+
+ +
+
+
+
+
+

User Stories

+
    +
  • As a user, I want to search the web directly from Jan chat for real-time information
    • +
  • As a developer, I want better API documentation for integration
    • +
  • As a researcher, I want source attribution for all search results
    • +
+
+
+

New Features

+
    +
  • Privacy-respecting web search integration
    • +
  • Multiple search engine support
    • +
  • Improved model downloading experience
    • +
  • Enhanced error handling and user feedback
    • +
+
+
+

Documentation

+
    +
  • Web Search API documentation
    • +
  • Privacy policy updates
    • +
  • Search configuration guide
    • +
+
+
+
+
+ +
+
+
+
+
+
✓
+
+
+
v0.6.5
+
Desktop Stability
+
+
+
+
Released
+
+
+
+
+ Live +
+
+
+ +
+
+
+
+
+

Improvements

+
    +
  • Enhanced memory management for large models
    • +
  • Improved GPU utilization
    • +
  • Better cross-platform compatibility
    • +
+
+
+

Bug Fixes

+
    +
  • Fixed model loading crashes on Windows
    • +
  • Resolved memory leaks in long conversations
    • +
  • Fixed UI freezing during model downloads
    • +
+
+
+
+
+ + +
+
+
+
+
+
⚡
+
+
+
v0.7.0
+
Deep Research
+
+
+
+
January 2025
+
+
+
+
+ Building +
+
+
+ +
+
+
+
+
+

User Stories

+
    +
  • As a researcher, I want to conduct deep research with multiple sources and citations
    • +
  • As a user, I want Jan Nano to work seamlessly on mobile devices
    • +
  • As a team lead, I want to preview jan.ai for my organization
    • +
+
+
+

New Features

+
    +
  • Deep research capabilities with multi-source analysis
    • +
  • jan.ai web platform beta launch
    • +
  • Improved Jan Nano performance and mobile optimization
    • +
  • Citation management and research reports
    • +
+
+
+

Documentation

+
    +
  • Research methodology guide
    • +
  • jan.ai platform documentation
    • +
  • Mobile optimization best practices
    • +
+
+
+
+
+ +
+
+
+
+
+
⚡
+
+
+
v0.8.0
+
Browser Automation
+
+
+
+
March 2025
+
+
+
+
+ Building +
+
+
+ +
+
+
+
+
+

User Stories

+
    +
  • As a user, I want Jan to automate web tasks for me safely and efficiently
    • +
  • As a business user, I want to automate repetitive web workflows
    • +
  • As a developer, I want browser automation APIs for custom integrations
    • +
+
+
+

New Features

+
    +
  • Browser automation capabilities (Beta)
    • +
  • Form filling and data extraction
    • +
  • Website navigation and interaction
    • +
  • Safety policies and user confirmation flows
    • +
+
+
+

Documentation

+
    +
  • Browser automation safety guide
    • +
  • Web scraping best practices
    • +
  • API reference for automation tools
    • +
+
+
+
+
+ + +
+
+
+
+
+
📱
+
+
+
v0.9.0
+
Mobile Launch
+
+
+
+
Q1 2025
+
+
+
+
+ Planned +
+
+
+ +
+
+
+
+
+

User Stories

+
    +
  • As a mobile user, I want Jan AI available on my iOS/Android device
    • +
  • As a commuter, I want to seamlessly switch between desktop and mobile
    • +
  • As a privacy-conscious user, I want local AI on my phone
    • +
+
+
+

New Features

+
    +
  • iOS and Android mobile applications
    • +
  • Three adaptive modes (Desktop, Server, Local)
    • +
  • Voice-first interface
    • +
  • Cross-device synchronization
    • +
  • Jan Nano on-device processing
    • +
+
+
+

Documentation

+
    +
  • Mobile setup and configuration guide
    • +
  • Voice interaction best practices
    • +
  • Device syncing tutorial
    • +
+
+
+
+
+ +
+
+
+
+
+
🏢
+
+
+
v1.0.0
+
Server Edition
+
+
+
+
Q2 2025
+
+
+
+
+ Planned +
+
+
+ +
+
+
+
+
+

User Stories

+
    +
  • As an IT admin, I want to deploy Jan for my entire organization
    • +
  • As a team lead, I want centralized AI with team collaboration features
    • +
  • As a CTO, I want enterprise-grade security and compliance
    • +
+
+
+

New Features

+
    +
  • Multi-user server deployment
    • +
  • Enterprise authentication (SSO, LDAP)
    • +
  • Team collaboration and shared conversations
    • +
  • Docker and Kubernetes deployment options
    • +
  • Admin dashboard and user management
    • +
+
+
+

Documentation

+
    +
  • Enterprise deployment guide
    • +
  • Security and compliance documentation
    • +
  • Admin management tutorials
    • +
+
+
+
+
+ +
+
+
+
+
+
🤖
+
+
+
v1.1.0
+
AI Agents
+
+
+
+
Q1 2026
+
+
+
+
+ Planned +
+
+
+ +
+
+
+
+
+

User Stories

+
    +
  • As a user, I want autonomous agents to handle complex multi-step tasks
    • +
  • As a business owner, I want AI that can coordinate multiple tools automatically
    • +
  • As a power user, I want to create custom agent workflows
    • +
+
+
+

New Features

+
    +
  • Autonomous AI agents
    • +
  • Multi-step task planning and execution
    • +
  • Tool orchestration and coordination
    • +
  • Goal-oriented intelligent reasoning
    • +
  • Custom agent workflow builder
    • +
+
+
+

Documentation

+
    +
  • Agent development guide
    • +
  • Workflow automation tutorials
    • +
  • Safety and oversight best practices
    • +
+
+
+
+
+ +
+
+
+
+
+
👁️
+
+
+
v1.2.0
+
Lucy Multimodal
+
+
+
+
Q2 2025
+
+
+
+
+ Planned +
+
+
+ +
+
+
+
+
+

User Stories

+
    +
  • As a content creator, I want AI that can understand and process images
    • +
  • As a researcher, I want to analyze documents with both text and visuals
    • +
  • As a designer, I want AI that can help with visual content creation
    • +
+
+
+

New Features

+
    +
  • Lucy multimodal model release
    • +
  • Image understanding and analysis
    • +
  • Document processing with OCR
    • +
  • Visual reasoning capabilities
    • +
  • Audio processing (planned)
    • +
+
+
+

Documentation

+
    +
  • Multimodal AI usage guide
    • +
  • Image processing tutorials
    • +
  • Visual reasoning examples
    • +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Join Our Journey

+

Be part of building the future of AI. Download Jan today and help shape our roadmap.

+
+ Download Jan Desktop + Follow Our Progress +
+
+
+
+
+ + + + diff --git a/website/src/components/products/ProductsTOC.astro b/website/src/components/products/ProductsTOC.astro new file mode 100644 index 000000000..02f8a8174 --- /dev/null +++ b/website/src/components/products/ProductsTOC.astro @@ -0,0 +1,628 @@ +--- +// ProductsTOC.astro - Sticky table of contents navigation +--- + +
+
+
+
+
+
📋
+
+

Navigate This Page

+
+ + + +
+
+
+
+
+ Getting Started +
+
+
+ + + +
+ + + + diff --git a/website/src/components/products/ProductsTools.astro b/website/src/components/products/ProductsTools.astro new file mode 100644 index 000000000..e1c50efd2 --- /dev/null +++ b/website/src/components/products/ProductsTools.astro @@ -0,0 +1,1150 @@ +--- +// ProductsTools.astro - Tools and capabilities section +--- + +
+
+
+
+
+
+
Tools
+
+ Tools & Capabilities +
+

AI Tools & Extensions

+

+ AI capabilities that actually get things done. Not just chat, but real automation + and intelligence augmentation with integrated tools. +

+
+ + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ✨ + ✨ +
+
+
+
+
+
+
+
🔍
+
+
+
+
Active
+
+
+ +
+
+

Web Search

+
v0.6.7
+
+ +

+ Privacy-respecting web search with local crawling, anonymous cloud queries, + and intelligent routing. Real-time web search with source citations. +

+ +
+

Key Features

+
+
+
+ Multiple Search Engines +
+
+
+ Source Attribution +
+
+
+ Real-time Results +
+
+
+ Privacy-first +
+
+
+ +
+
+
< 1s
+
Response Time
+
+
+
Real-time
+
Data Access
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📕
+
📗
+
📘
+
+
+
+
+
+
+
+
+
+
+
+
📝
+
+
+
🧪
+
+
+
🔬
+
⚗️
+
E=mc²
+
+
+
+
Active
+
+
+ +
+
+

Deep Research

+
v0.7.0
+
+ +

+ Comprehensive investigation beyond simple search. Literature reviews, + multi-source synthesis, and academic citations with comprehensive analysis. +

+ +
+

Research Capabilities

+
+
+
+ Multi-source Analysis +
+
+
+ Citation Management +
+
+
+ Research Reports +
+
+
+ Knowledge Synthesis +
+
+
+ +
+
+
200+
+
Max Sources
+
+
+
3 levels
+
Research Depth
+
+
+
+
+ + +
+
+
+
+
+
🌐
+
🌐
+
+
+
+
+
+
+
+
+
+
+
🏠
+
📧
+
🛒
+
+
+
+
+
+
+
+
https://awesome.ai
+
+
+
+
+
+
+
+
+
👆
+
+
💫
+
+
+
🤚
+
🤚
+
+
+
+
📱
+
💻
+
🖥️
+
+
🚀
+
+
+
+
Beta
+
+
+ +
+
+

Browser Use

+
v0.8.0
+
+ +

+ AI that can navigate and interact with websites. Web automation that respects + site policies with form filling, data extraction, and workflow automation. +

+ +
+

Automation Features

+
+
+
+ Website Navigation +
+
+
+ Form Filling +
+
+
+ Data Extraction +
+
+
+ Workflow Automation +
+
+
+ +
+
+
90%
+
Success Rate
+
+
+
Local/Cloud
+
Execution
+
+
+
+
+ + +
+
+
+
+
+
⭐
+
🌙
+
+
+
+
+
+
+
+
+
🤖
+
+
+
+ 🤖 + 🤖 +
+
+
+
+
+ 🤖 + 🤖 + 🤖 +
+
Soon...
+
+
+
+
+
+
+
+
+ 🚀 + ⚡ + 🌟 +
+
+
+
+
📐
+
🔧
+
⚙️
+
+
+
Loading Future...
+
+
+
+
+
+
🧸
+
💤
+
+
+
z
+
z
+
Z
+
💭
+
+
+
+
Q1 2026
+
+
+ +
+
+

AI Agents

+
v0.9.0
+
+ +

+ Autonomous agents for complex, multi-step tasks. Autonomous task execution with + tool orchestration, multi-step workflows, and intelligent coordination. +

+ +
+

Future Capabilities

+
+
+
+ Task Planning +
+
+
+ Multi-tool Usage +
+
+
+ Goal Execution +
+
+
+ Intelligent Coordination +
+
+
+ +
+
+
Coming
+
Q1 2026
+
+
+
Autonomous
+
Task Execution
+
+
+
+
+
+ + +
+

Seamless Integration

+
+
+
+
+
+
+

Search

+

Find information

+
+
+ +
+
+
+
+ +
+
+
+
+
+

Research

+

Analyze deeply

+
+
+ +
+
+
+
+ +
+
+
+
+
+

Automate

+

Take action

+
+
+ +
+
+
+
+ +
+
+
+
+
+

Orchestrate

+

Complex workflows

+
+
+
+
+ + +
+

Tool Capabilities

+
+
+
Tool
+
Primary Use
+
Status
+
Best For
+
+ +
+
+
+ Web Search +
+
Quick information retrieval
+
+
Active
+
+
Real-time answers
+
+ +
+
+
+ Deep Research +
+
Comprehensive analysis
+
+
Active
+
+
Academic & business research
+
+ +
+
+
+ Browser Use +
+
Web automation
+
+
Beta
+
+
Form filling & data extraction
+
+ +
+
+
+ AI Agents +
+
Autonomous workflows
+
+
Q1 2026
+
+
Complex multi-step tasks
+
+
+
+
+
+ + + + diff --git a/website/src/components/products/ProductsVision.astro b/website/src/components/products/ProductsVision.astro new file mode 100644 index 000000000..aa02974b5 --- /dev/null +++ b/website/src/components/products/ProductsVision.astro @@ -0,0 +1,810 @@ +--- +// ProductsVision.astro - Product vision and principles section +--- + +
+
+
+
+
+
+
Vision
+
+ Product Vision +
+

What We're Building

+

+ Jan is evolving from a local AI application to a complete full-stack AI solution that you can self-host. + This includes models, applications, and tools to solve real problems. +

+
+ + +
+
+
+
+
+
+
+
+
Jan Models
+
Our own AI models optimized for local and private use
+
+ +
+
+ +
+
+
+
+
+
+
Jan Application
+
Applications that work across all your devices
+
+ +
+
+ +
+
+
+
+
+
+
Jan Tools
+
Tools that actually get things done
+
+ +
=
+ +
+
+
+
+
+
+
+
+
Jan Agent
+
Complete AI ecosystem that you control
+
+
+
+ + +
+
+

Two Modes, One Experience

+

Users shouldn't need to understand models, APIs, or technical details. Just choose Local for privacy or Cloud for power.

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+

Local (Incognito) Mode

+

Run AI models entirely on your device, giving you complete privacy with no internet required.

+
+
+
+ Complete privacy +
+
+
+ No internet required +
+
+
+ Your hardware, your data +
+
+
+ Offline capable +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Cloud Mode

+

Connect to more powerful models when needed - either self-hosted or via jan.ai.

+
+
+
+ Powerful models +
+
+
+ Faster processing +
+
+
+ Self-hosted option +
+
+
+ jan.ai integration +
+
+
+
+
+
+ + +
+
+

Our Product Principles

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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.
+
+
We handle the complexity.
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Privacy First, Cloud When Needed

+

Start with complete privacy by default. Add cloud capabilities only when you choose to.

+
+ Your choice, your control, your data. +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Solve Problems, Not Settings

+

Users want answers, not configuration options. Power users can dig deeper, but it's never required.

+
+ Focus on what matters: getting things done. +
+
+
+
+
+
+
+ + diff --git a/website/src/pages/prods.astro b/website/src/pages/prods.astro index dd6ea9c97..64b1d1bfe 100644 --- a/website/src/pages/prods.astro +++ b/website/src/pages/prods.astro @@ -1,1867 +1,310 @@ --- import Layout from '../layouts/Layout.astro'; -import CircuitBackground from '../components/CircuitBackground.astro'; -import StatusIndicator from '../components/StatusIndicator.astro'; -import RetroCard from '../components/RetroCard.astro'; -import FloatingNav from '../components/FloatingNav.astro'; +import ProductsHero from '../components/products/ProductsHero.astro'; +import ProductsTOC from '../components/products/ProductsTOC.astro'; +import ProductsVision from '../components/products/ProductsVision.astro'; +import ProductsArchitecture from '../components/products/ProductsArchitecture.astro'; +import ProductsModels from '../components/products/ProductsModels.astro'; +import ProductsPlatforms from '../components/products/ProductsPlatforms.astro'; +import ProductsTools from '../components/products/ProductsTools.astro'; +import ProductsPrinciples from '../components/products/ProductsPrinciples.astro'; +import ProductsRoadmap from '../components/products/ProductsRoadmap.astro'; +import DoodleBackground from '../components/DoodleBackground.astro'; --- - +
+ + - - + + -
- -
-
- ⚡ - Open Superintelligence -
-

- Jan's Product Roadmap - Models • Platforms • Tools -

-

- Complete AI ecosystem that you control. Our models, your infrastructure, real capabilities. -

-
-
- 3 - AI Models -
-
- 4 - Platforms -
-
- 4 - Tools -
-
-
-
+ - -
-
-

Product Architecture

-
-
-
-
- 🔧 - Tools - 4 capabilities -
-
- Search - Deep Research - Browser Use - AI Agents -
-
+ + -
-
- 🧠 - Models - 3 families -
-
- Jan V1 Series - Jan Nano - Lucy -
-
- -
-
- 💻 - Platforms - 4 deployment options -
-
- Desktop - jan.ai - Mobile - Server -
-
-
-
-
+ + -
-
-
-
- 🧠 - Neural Networks -
-

Our AI Models

-

- Purpose-built models, not API wrappers. Trained by us, optimized for privacy and performance. -

-
- -
- -
-
- - v1.2.1 -
-
- -
-
-

Parameters

-
- 7B 8GB RAM - 13B 16GB RAM - 70B 64GB RAM -
-
-
-

Context Window

-
- 32,768 tokens -
-
-
- -

- Complete model family designed to compete with Claude and GPT-4. - Optimized for reasoning, coding, and general conversation. -

- -
- Reasoning - Code Generation - Multilingual - Tool Use -
- - - -
-
- - v0.6.0 -
-
- -
-
-

Parameters

-
- 4B 6-8GB RAM -
-
-
-

Context Options

-
- 32k Standard - 128k Extended -
-
-
- -

- Specialized for research and information retrieval. Native MCP integration - for web search, document analysis, and knowledge synthesis. -

- -
- Web Search - Document Analysis - Citation Management - MCP Tools -
- - - -
-
- - v0.1.0-alpha -
-
- -
-
-

Modalities

-
- Vision - Text - Audio Soon -
-
-
-

Release

-
- Q2 2025 -
-
-
- -

- Advanced multimodal capabilities for image understanding, document processing, - and visual reasoning tasks. -

- -
- Image Analysis - OCR - Visual Reasoning - Document Processing -
- -
-
-
+ -
-
-
-
- 💻 - Deployment -
-

Platform Ecosystem

-

- Run AI where it makes sense for you. Local for privacy, cloud for power, - mobile for accessibility. -

-
- -
-
- -
-
- Available Now -
-
-
-
💻
-
-

Jan Desktop

-

Your personal AI workstation

-
-
- 3M+ downloads -
-
-
- Complete Privacy - Offline Mode - Powers Mobile - No Internet Required -
-
-
- Min RAM - 8GB -
-
- Storage - 10GB+ -
-
- OS Support - Win/Mac/Linux -
-
-
-
- -
-
- Beta Launch -
-
-
-
☁️
-
-

jan.ai

-

Cloud AI that respects privacy

-
-
- Join waitlist -
-
-
- No Setup - Anonymous Usage - API Access - Fast Response -
-
-
- Free - 50 queries/day -
-
- Pro - Unlimited -
-
-
-
- -
-
- Q4 2025 -
-
-
-
📱
-
-

Jan Mobile

-

AI assistant on the go

-
-
- iOS & Android -
-
-
- Voice First - Desktop Sync - Jan Nano Local - Seamless Switching -
-
-
- Desktop Mode - Connect to your computer -
-
- Local Mode - Jan Nano on device -
-
-
-
- -
-
- Coming Soon -
-
-
-
🏢
-
-

Jan Server

-

Private AI cloud for teams

-
-
- 5-500+ users -
-
-
- Self-Hosted - Multi-User - Enterprise SSO - Compliance Ready -
-
-
- Docker - Single command setup -
-
- Kubernetes - Enterprise scale -
-
-
-
-
-
-
+ -
-
-
-
- 🔧 - Capabilities -
-

Integrated Tools

-

- AI capabilities that actually get things done. Not just chat, but real automation - and intelligence augmentation. -

-
+ -
-
-
-
🔍
-
-

Search

- -
-
v0.6.7
-
-

- Privacy-respecting web search with local crawling, anonymous cloud queries, - and intelligent routing. -

-
-
- Modes -
- Local - Cloud - Hybrid -
-
-
- Privacy -
- Anonymous - No Tracking -
-
-
-
-
- < 1s - Response Time -
-
- Real-time - Data Access -
-
-
+ + -
-
-
📚
-
-

Deep Research

- -
-
v0.7.0
-
-

- Comprehensive investigation beyond simple search. Literature reviews, - multi-source synthesis, and academic citations. -

-
-
- Depth -
- Quick - Standard - Comprehensive -
-
-
- Sources -
- Academic - Patents - News -
-
-
-
-
- 200+ - Max Sources -
-
- 3 levels - Research Depth -
-
-
- -
-
-
🌐
-
-

Browser Use

- -
-
v0.8.0
-
-

- Web automation that respects site policies. Form filling, data extraction, - and workflow automation with safety boundaries. -

-
-
- Automation -
- Forms - Data Extract - Workflows -
-
-
- Safety -
- Policy Aware - Confirmation -
-
-
-
-
- 90% - Success Rate -
-
- Local/Cloud - Execution -
-
-
- -
-
-
🤖
-
-

AI Agents

- -
-
v0.9.0
-
-

- Autonomous task execution with tool orchestration. Multi-step workflows, - goal-oriented planning, and intelligent coordination. -

-
-
- Capabilities -
- Multi-step - Tool Chain - Planning -
-
-
- Integration -
- All Tools - External APIs -
-
-
-
-
- Coming - Q1 2026 -
-
- Autonomous - Task Execution -
-
-
-
-
-
- - -
-
-
-
-

Why This Matters

-

- Most AI is just a wrapper around someone else's models. Jan is different. - We build the models, control the infrastructure, and integrate the tools. -

-
-
- 🧠 -
-

Our Models

-

Trained by us, optimized for your use cases, not subscription revenue.

-
-
-
- 🏠 -
-

Your Infrastructure

-

Run locally for privacy, or cloud when you need power. You choose.

-
-
-
- 🔧 -
-

Real Tools

-

Not just chat, but automation that actually gets things done.

-
-
-
-
-
-
-
- ⚡ - Jan -
-
- Models -
-
- Platforms -
-
- Tools -
-
-
-
-
-
- - -
-
-
-

Start Building With Jan

-

Download Jan Desktop today and experience AI that runs where you need it.

-
- - 💻 - Download Jan Desktop - - - 📚 - Read Documentation - -
-
-
- 3M+ - Downloads -
-
- 100% - Open Source -
-
- 0 - Data Collection -
-
-
-
-
+ +
- - + + 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/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); + } +}