diff --git a/website/PRODUCTS_PAGE_README.MD b/website/PRODUCTS_PAGE_README.MD deleted file mode 100644 index e4a1188be..000000000 --- a/website/PRODUCTS_PAGE_README.MD +++ /dev/null @@ -1,306 +0,0 @@ -# Jan Products Page - Retro-Tech Design System - -A futuristic products showcase page that combines the nostalgic aesthetics of RadioShack's electronic components with PostHog's modern data visualization approach. This creates a unique "retro-tech" visual language that feels both familiar and cutting-edge. - -## Design Philosophy - -### RadioShack + PostHog = Retro-Tech -- **RadioShack Heritage**: Circuit board patterns, electronic components, terminal interfaces, amber/green CRT colors -- **PostHog Influence**: Clean data cards, status indicators, system metrics, dashboard layouts -- **Result**: A cohesive aesthetic that makes AI products feel like sophisticated electronic equipment - -### Color Palette -```css ---retro-green: #00ff41 /* Matrix green, primary brand */ ---retro-amber: #ffb000 /* Classic terminal amber */ ---retro-blue: #00bfff /* Processing/loading states */ ---retro-red: #ff0040 /* Error/warning states */ ---retro-cyan: #00ffff /* Accent highlights */ ---retro-magenta: #ff00ff /* Special effects */ -``` - -## Architecture - -### File Structure -``` -jan/website/src/ -├── pages/ -│ └── prods.astro # Main products page -├── components/ -│ ├── CircuitBackground.astro # Animated circuit patterns -│ ├── StatusIndicator.astro # System status components -│ ├── RetroCard.astro # Terminal-style cards -│ └── FloatingNav.astro # Floating navigation menu -├── layouts/ -│ └── Layout.astro # Base layout with GSAP -└── styles/ - └── retro-effects.css # Advanced visual effects -``` - -### Component Hierarchy -``` -Layout -└── Products Page - ├── FloatingNav (right-side navigation) - ├── Hero Section - │ └── CircuitBackground (animated) - ├── Table of Contents - ├── Models Section - │ └── RetroCard (circuit variant) - ├── Platforms Section - │ └── RetroCard (data/system variants) - ├── Tools Section - │ └── RetroCard (terminal variant) - └── Integration Section -``` - -## Components Deep Dive - -### CircuitBackground.astro -Creates animated circuit board patterns with electronic components. - -**Props:** -- `variant`: 'subtle' | 'prominent' | 'animated' -- `color`: 'green' | 'amber' | 'blue' | 'multi' -- `density`: 'low' | 'medium' | 'high' -- `animated`: boolean -- `opacity`: number (0-1) - -**Features:** -- Procedural circuit patterns -- Animated electronic components (LEDs, resistors, capacitors) -- Flowing data lines -- Responsive grid scaling - -### StatusIndicator.astro -Terminal-style system status indicators with pulsing animations. - -**Props:** -- `status`: 'active' | 'warning' | 'success' | 'error' | 'idle' -- `label`: string -- `pulse`: boolean -- `size`: 'small' | 'medium' | 'large' - -**Features:** -- Animated status dots with glow effects -- Color-coded status states -- Accessibility compliant -- Reduced motion support - -### RetroCard.astro -Terminal-inspired cards with scanlines, CRT effects, and interactive animations. - -**Props:** -- `variant`: 'terminal' | 'circuit' | 'data' | 'system' -- `color`: 'green' | 'amber' | 'blue' | 'red' | 'multi' -- `size`: 'small' | 'medium' | 'large' -- `glitch`: boolean -- `scanlines`: boolean -- `glow`: boolean -- `interactive`: boolean -- `status`: 'online' | 'offline' | 'error' | 'warning' | 'processing' - -**Features:** -- CRT monitor bezels with power indicators -- Animated scanlines and glitch effects -- Terminal-style headers with traffic light controls -- Interactive hover states with 3D transforms -- Corner brackets for retro-futuristic framing - -### FloatingNav.astro -Floating navigation with terminal interface and system monitoring. - -**Props:** -- `sections`: Array of navigation items with icons and status -- `position`: 'left' | 'right' -- `theme`: 'dark' | 'matrix' | 'circuit' -- `compact`: boolean - -**Features:** -- Terminal-style command prompt -- Real-time system status indicators -- Animated progress bars -- Circuit connection lines -- Smooth scrolling with GSAP integration - -## Animations & Effects - -### GSAP Integration -The page uses GSAP (GreenSock Animation Platform) for sophisticated animations: - -**Timeline Animations:** -- Hero section entrance with staggered reveals -- Section headers with typewriter effects -- Card appearances with 3D transforms - -**Scroll Triggers:** -- Elements animate into view as user scrolls -- Parallax effects on background elements -- Progressive content revelation - -**Interactive Animations:** -- Magnetic cursor effects on cards -- 3D hover transformations -- Ripple effects on clicks - -### CSS-Only Effects -Enhanced with pure CSS animations for performance: - -**Visual Effects:** -- CRT scanlines and monitor bezels -- Matrix-style character rain -- Glitch text distortions -- Neon glow and pulsing lights - -**Component Animations:** -- Electronic component blinking (LEDs) -- Data stream flowing effects -- Circuit trace pulsing -- Status indicator breathing - -## Performance Optimizations - -### Lazy Loading -- GSAP libraries loaded from CDN -- Animations initialized after DOM ready -- Circuit patterns use CSS transforms for GPU acceleration - -### Reduced Motion Support -```css -@media (prefers-reduced-motion: reduce) { - /* All animations disabled for accessibility */ -} -``` - -### Mobile Optimizations -- Responsive grid layouts -- Touch-friendly interactive elements -- Optimized animation performance -- Reduced visual effects on smaller screens - -## Accessibility Features - -### WCAG Compliance -- High contrast mode support -- Focus indicators for keyboard navigation -- Screen reader friendly markup -- Semantic HTML structure - -### Keyboard Navigation -- Tab order follows logical flow -- Escape key closes floating navigation -- Arrow keys for menu navigation -- Enter/Space for activation - -### Color Accessibility -- Sufficient contrast ratios maintained -- Status information not solely color-dependent -- Alternative text for decorative elements - -## Customization Guide - -### Adding New Sections -1. Add section to main page -2. Update FloatingNav sections array -3. Add corresponding GSAP animations -4. Update TOC links - -### Creating New Card Variants -```astro - - - -``` - -### Custom Circuit Patterns -```astro - -``` - -### Color Theme Customization -Override CSS custom properties: -```css -:root { - --retro-green: #your-color; - --retro-amber: #your-color; - /* etc. */ -} -``` - -## Dependencies - -### Required -- Astro ^5.6.1 -- GSAP (loaded from CDN) -- JetBrains Mono font - -### Optional Enhancements -- Sharp for image optimization -- Additional GSAP plugins for advanced effects - -## Browser Support - -### Fully Supported -- Chrome 88+ -- Firefox 85+ -- Safari 14+ -- Edge 88+ - -### Graceful Degradation -- Older browsers receive static layout -- CSS fallbacks for unsupported features -- Progressive enhancement approach - -## Development Commands - -```bash -# Start development server -npm run dev - -# Build for production -npm run build - -# Preview production build -npm run preview -``` - -## Future Enhancements - -### Planned Features -- Sound effects for interactions -- More electronic component animations -- Additional card variants -- Theme switching capability -- Advanced glitch effects - -### Performance Improvements -- WebGL circuit backgrounds -- Intersection Observer for animations -- Service worker for offline support -- Image lazy loading optimization - -## Contributing - -When adding new components or effects: - -1. Follow the retro-tech design language -2. Ensure accessibility compliance -3. Add reduced motion alternatives -4. Test on multiple devices -5. Document new props and features - ---- - -*Created with ❤️ and a healthy dose of 80s nostalgia* diff --git a/website/PRODUCTS_PAGE_README.md b/website/PRODUCTS_PAGE_README.md deleted file mode 100644 index 54299c01b..000000000 --- a/website/PRODUCTS_PAGE_README.md +++ /dev/null @@ -1,306 +0,0 @@ -# Jan Products Page - Retro-Tech Design System - -A futuristic products showcase page that combines the nostalgic aesthetics of RadioShack's electronic components with PostHog's modern data visualization approach. This creates a unique "retro-tech" visual language that feels both familiar and cutting-edge. - -## Design Philosophy - -### RadioShack + PostHog = Retro-Tech -- **RadioShack Heritage**: Circuit board patterns, electronic components, terminal interfaces, amber/green CRT colors -- **PostHog Influence**: Clean data cards, status indicators, system metrics, dashboard layouts -- **Result**: A cohesive aesthetic that makes AI products feel like sophisticated electronic equipment - -### Color Palette -```css ---retro-green: #00ff41 /* Matrix green, primary brand */ ---retro-amber: #ffb000 /* Classic terminal amber */ ---retro-blue: #00bfff /* Processing/loading states */ ---retro-red: #ff0040 /* Error/warning states */ ---retro-cyan: #00ffff /* Accent highlights */ ---retro-magenta: #ff00ff /* Special effects */ -``` - -## Architecture - -### File Structure -``` -jan/website/src/ -├── pages/ -│ └── prods.astro # Main products page -├── components/ -│ ├── CircuitBackground.astro # Animated circuit patterns -│ ├── StatusIndicator.astro # System status components -│ ├── RetroCard.astro # Terminal-style cards -│ └── FloatingNav.astro # Floating navigation menu -├── layouts/ -│ └── Layout.astro # Base layout with GSAP -└── styles/ - └── retro-effects.css # Advanced visual effects -``` - -### Component Hierarchy -``` -Layout -└── Products Page - ├── FloatingNav (right-side navigation) - ├── Hero Section - │ └── CircuitBackground (animated) - ├── Table of Contents - ├── Models Section - │ └── RetroCard (circuit variant) - ├── Platforms Section - │ └── RetroCard (data/system variants) - ├── Tools Section - │ └── RetroCard (terminal variant) - └── Integration Section -``` - -## Components Deep Dive - -### CircuitBackground.astro -Creates animated circuit board patterns with electronic components. - -**Props:** -- `variant`: 'subtle' | 'prominent' | 'animated' -- `color`: 'green' | 'amber' | 'blue' | 'multi' -- `density`: 'low' | 'medium' | 'high' -- `animated`: boolean -- `opacity`: number (0-1) - -**Features:** -- Procedural circuit patterns -- Animated electronic components (LEDs, resistors, capacitors) -- Flowing data lines -- Responsive grid scaling - -### StatusIndicator.astro -Terminal-style system status indicators with pulsing animations. - -**Props:** -- `status`: 'active' | 'warning' | 'success' | 'error' | 'idle' -- `label`: string -- `pulse`: boolean -- `size`: 'small' | 'medium' | 'large' - -**Features:** -- Animated status dots with glow effects -- Color-coded status states -- Accessibility compliant -- Reduced motion support - -### RetroCard.astro -Terminal-inspired cards with scanlines, CRT effects, and interactive animations. - -**Props:** -- `variant`: 'terminal' | 'circuit' | 'data' | 'system' -- `color`: 'green' | 'amber' | 'blue' | 'red' | 'multi' -- `size`: 'small' | 'medium' | 'large' -- `glitch`: boolean -- `scanlines`: boolean -- `glow`: boolean -- `interactive`: boolean -- `status`: 'online' | 'offline' | 'error' | 'warning' | 'processing' - -**Features:** -- CRT monitor bezels with power indicators -- Animated scanlines and glitch effects -- Terminal-style headers with traffic light controls -- Interactive hover states with 3D transforms -- Corner brackets for retro-futuristic framing - -### FloatingNav.astro -Floating navigation with terminal interface and system monitoring. - -**Props:** -- `sections`: Array of navigation items with icons and status -- `position`: 'left' | 'right' -- `theme`: 'dark' | 'matrix' | 'circuit' -- `compact`: boolean - -**Features:** -- Terminal-style command prompt -- Real-time system status indicators -- Animated progress bars -- Circuit connection lines -- Smooth scrolling with GSAP integration - -## Animations & Effects - -### GSAP Integration -The page uses GSAP (GreenSock Animation Platform) for sophisticated animations: - -**Timeline Animations:** -- Hero section entrance with staggered reveals -- Section headers with typewriter effects -- Card appearances with 3D transforms - -**Scroll Triggers:** -- Elements animate into view as user scrolls -- Parallax effects on background elements -- Progressive content revelation - -**Interactive Animations:** -- Magnetic cursor effects on cards -- 3D hover transformations -- Ripple effects on clicks - -### CSS-Only Effects -Enhanced with pure CSS animations for performance: - -**Visual Effects:** -- CRT scanlines and monitor bezels -- Matrix-style character rain -- Glitch text distortions -- Neon glow and pulsing lights - -**Component Animations:** -- Electronic component blinking (LEDs) -- Data stream flowing effects -- Circuit trace pulsing -- Status indicator breathing - -## Performance Optimizations - -### Lazy Loading -- GSAP libraries loaded from CDN -- Animations initialized after DOM ready -- Circuit patterns use CSS transforms for GPU acceleration - -### Reduced Motion Support -```css -@media (prefers-reduced-motion: reduce) { - /* All animations disabled for accessibility */ -} -``` - -### Mobile Optimizations -- Responsive grid layouts -- Touch-friendly interactive elements -- Optimized animation performance -- Reduced visual effects on smaller screens - -## Accessibility Features - -### WCAG Compliance -- High contrast mode support -- Focus indicators for keyboard navigation -- Screen reader friendly markup -- Semantic HTML structure - -### Keyboard Navigation -- Tab order follows logical flow -- Escape key closes floating navigation -- Arrow keys for menu navigation -- Enter/Space for activation - -### Color Accessibility -- Sufficient contrast ratios maintained -- Status information not solely color-dependent -- Alternative text for decorative elements - -## Customization Guide - -### Adding New Sections -1. Add section to main page -2. Update FloatingNav sections array -3. Add corresponding GSAP animations -4. Update TOC links - -### Creating New Card Variants -```astro - - - -``` - -### Custom Circuit Patterns -```astro - -``` - -### Color Theme Customization -Override CSS custom properties: -```css -:root { - --retro-green: #your-color; - --retro-amber: #your-color; - /* etc. */ -} -``` - -## Dependencies - -### Required -- Astro ^5.6.1 -- GSAP (loaded from CDN) -- JetBrains Mono font - -### Optional Enhancements -- Sharp for image optimization -- Additional GSAP plugins for advanced effects - -## Browser Support - -### Fully Supported -- Chrome 88+ -- Firefox 85+ -- Safari 14+ -- Edge 88+ - -### Graceful Degradation -- Older browsers receive static layout -- CSS fallbacks for unsupported features -- Progressive enhancement approach - -## Development Commands - -```bash -# Start development server -npm run dev - -# Build for production -npm run build - -# Preview production build -npm run preview -``` - -## Future Enhancements - -### Planned Features -- Sound effects for interactions -- More electronic component animations -- Additional card variants -- Theme switching capability -- Advanced glitch effects - -### Performance Improvements -- WebGL circuit backgrounds -- Intersection Observer for animations -- Service worker for offline support -- Image lazy loading optimization - -## Contributing - -When adding new components or effects: - -1. Follow the retro-tech design language -2. Ensure accessibility compliance -3. Add reduced motion alternatives -4. Test on multiple devices -5. Document new props and features - ---- - -*Created with ❤️ and a healthy dose of 80s nostalgia* \ No newline at end of file diff --git a/website/src/assets/jan-server.png b/website/src/assets/jan-server.png new file mode 100644 index 000000000..e49499f01 Binary files /dev/null and b/website/src/assets/jan-server.png differ diff --git a/website/src/content/products/index.mdx b/website/src/content/products/index.mdx index 1ac653817..1a85a48fd 100644 --- a/website/src/content/products/index.mdx +++ b/website/src/content/products/index.mdx @@ -1,13 +1,22 @@ --- -title: Products -description: AI that runs where you need it, how you need it +title: Vision 🚀 +description: AI that runs where you need it, how you need it. sidebar: order: 0 --- - import { Aside, Card, CardGrid } from '@astrojs/starlight/components'; -Jan is moving from a local AI application to a complete full-stack AI solution that you can self-host. This includes models, applications, and tools that delights users and help them solve their problems. +**Jan's Goal is** + +> to build a superintelligence that you can self-host and use locally on your own devices. + +**We know it's hard** + +> but we believe this will be possible in the next decade. + + + +Jan is moving from a local AI application to a complete full-stack AI solution that you can self-host. This includes models, applications, and tools that delight users and help them solve their problems. ## What We're Building @@ -16,26 +25,27 @@ Jan is moving from a local AI application to a complete full-stack AI solution t Unlike other AI assistants that do specific tasks with one model or have many models with a myriad of solutions, Jan provides: - Its own specialised models that are optimised at specific tasks like web-search, creative writing, and translation - Applications that work across all of your devices in an integrated way -- Tools that actually get things done +- Tools to help you get things done -## Two Modes, One Experience - -### Local (Incognito) Mode +## Two Modes +### Local Mode Run AI models entirely on your device, giving you complete privacy with no internet required. -### Cloud Mode +![Jan Desktop](../../assets/jan_desktop.png) +### Cloud Mode Connect to more powerful models when needed - either self-hosted or via jan.ai. -